PhoneInput: full ITU-T E.164 country list + basic validation (#32)

content/docs/components/index.mdx

@@ -24,9 +24,9 @@ Choose a region and read back the locale defaults that come with it — for sett
 
 International phone number input with country selector and dial code search.
 
-| Component                                              | Description                                                          |
-| ------------------------------------------------------ | -------------------------------------------------------------------- |
-| **[Phone Input](/docs/components/inputs/phone-input)** | Country selector with flags, dial codes, and search for 50 countries |
+| Component                                              | Description                                                                                |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| **[Phone Input](/docs/components/inputs/phone-input)** | Country selector with flags, dial codes, and search for every E.164 country (~244 entries) |
 
 ### Navigation
 

src/components/docs/phone-input-demo.tsx

@@ -1,15 +1,25 @@
 "use client";
 
+import { useState } from "react";
 import { PhoneInput } from "@/registry/components/phone-input";
 
 export function PhoneInputDemo() {
+  const [e164, setE164] = useState("");
   return (
-    <PhoneInput
-      defaultCountry="US"
-      placeholder="(555) 000-0000"
-      onValueChange={(phone, country) => console.log("Phone:", country.dialCode, phone)}
-      size="default" // sm, default, lg
-      className="w-full max-w-xs"
-    />
+    <div className="w-full max-w-xs space-y-2">
+      <PhoneInput
+        defaultCountry="US"
+        placeholder="(555) 000-0000"
+        preferredCountries={["IN", "GB"]} // pinned above the full list
+        validate // marks a malformed number aria-invalid
+        onValueChange={(phone, country) => console.log("Phone:", country.dialCode, phone)}
+        onValidityChange={(valid, value) => setE164(valid ? value : "")}
+        size="default" // sm, default, lg
+        className="w-full"
+      />
+      <p className="text-xs text-muted-foreground">
+        {e164 ? `E.164: ${e164}` : "Type a phone number"}
+      </p>
+    </div>
   );
 }