{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phone-input",
  "title": "Phone Input",
  "description": "Phone number input with a country dialing-code selector.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/phone-input/phone-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Country option rendered in the dialing-code selector. */\nexport type PhoneCountry = {\n  code: string;\n  dialCode: string;\n  label: string;\n};\n\nconst defaultCountries: PhoneCountry[] = [\n  { code: \"US\", dialCode: \"+1\", label: \"United States\" },\n  { code: \"GB\", dialCode: \"+44\", label: \"United Kingdom\" },\n  { code: \"CA\", dialCode: \"+1\", label: \"Canada\" },\n  { code: \"AU\", dialCode: \"+61\", label: \"Australia\" },\n  { code: \"DE\", dialCode: \"+49\", label: \"Germany\" },\n  { code: \"FR\", dialCode: \"+33\", label: \"France\" },\n  { code: \"IN\", dialCode: \"+91\", label: \"India\" },\n  { code: \"JP\", dialCode: \"+81\", label: \"Japan\" },\n];\n\n/** Phone number input with a leading country dialing-code selector. */\nexport type PhoneInputProps = Omit<\n  React.ComponentPropsWithoutRef<\"input\">,\n  \"type\"\n> & {\n  countries?: PhoneCountry[];\n  defaultCountry?: string;\n  onCountryChange?: (code: string) => void;\n};\n\nconst PhoneInput = ({\n  className,\n  countries = defaultCountries,\n  defaultCountry,\n  onCountryChange,\n  ref,\n  ...props\n}: PhoneInputProps & { ref?: React.Ref<HTMLInputElement> }) => {\n  const [country, setCountry] = React.useState(\n    defaultCountry ?? countries[0]?.code ?? \"\",\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex h-10 w-full items-center rounded-md border border-input bg-background text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2\",\n        className,\n      )}\n    >\n      <select\n        aria-label=\"Country dialing code\"\n        className=\"h-full rounded-l-md border-0 border-r border-input bg-transparent py-2 pl-3 pr-2 text-sm focus-visible:outline-none disabled:cursor-not-allowed\"\n        onChange={(event) => {\n          setCountry(event.target.value);\n          onCountryChange?.(event.target.value);\n        }}\n        value={country}\n      >\n        {countries.map((item) => (\n          <option key={item.code} value={item.code}>\n            {item.dialCode}\n          </option>\n        ))}\n      </select>\n      <input\n        {...props}\n        className=\"h-full w-full flex-1 rounded-r-md bg-transparent px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed\"\n        ref={ref}\n        type=\"tel\"\n      />\n    </div>\n  );\n};\nPhoneInput.displayName = \"PhoneInput\";\n\nexport { PhoneInput };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}