{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phone-input",
  "type": "registry:ui",
  "title": "Phone Input",
  "description": "A phone input component",
  "registryDependencies": [
    "popover",
    "https://ui.ednesdayw.com/r/input.json",
    "https://ui.ednesdayw.com/r/use-disclosure.json"
  ],
  "files": [
    {
      "path": "src/registry/ui/phone-input.tsx",
      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { useDisclosure } from \"@/hooks/use-disclosure\";\nimport { Input, type InputProps } from \"@/components/ui/input\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\ninterface PhoneCode {\n  name: string;\n  flag: string;\n  dialCode: string;\n  mask?: string;\n}\n\ninterface PhoneInputProps\n  extends Omit<InputProps, \"value\" | \"onChange\" | \"startContent\"> {\n  items: PhoneCode[];\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\nconst PhoneInput = ({\n  items,\n  variant,\n  placeholder,\n  disabled,\n  value,\n  onChange,\n  ...props\n}: PhoneInputProps) => {\n  const [selectedItem, setSelectedItem] = useState(items[0]);\n  const [phoneNumber, setPhoneNumber] = useState(\"\");\n  const { open, onClose, onOpenChange } = useDisclosure();\n\n  const handleCountrySelect = (country: PhoneCode) => {\n    setSelectedItem(country);\n    onClose();\n    onChange?.(`${country.dialCode} ${phoneNumber}`);\n  };\n\n  const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newNumber = e.target.value;\n    if (newNumber !== \"\" && !/^[0-9]+$/.test(newNumber)) {\n      return;\n    }\n    setPhoneNumber(newNumber);\n    onChange?.(`${selectedItem.dialCode} ${newNumber}`);\n  };\n\n  useEffect(() => {\n    if (value) {\n      const match = value.match(/^\\+\\d{1,3}\\s\\d{7,14}$/);\n      if (match) {\n        const [dialCode, phoneNumber] = match[0].split(\" \");\n        setSelectedItem(items.find((c) => c.dialCode === dialCode) || items[0]);\n        setPhoneNumber(phoneNumber);\n      }\n    }\n  }, []);\n\n  return (\n    <Input\n      {...props}\n      value={phoneNumber}\n      onChange={handlePhoneNumberChange}\n      disabled={disabled}\n      variant={variant}\n      placeholder={placeholder ?? selectedItem.mask}\n      startContent={\n        <div className=\"h-full flex items-center\">\n          <Popover open={open} onOpenChange={onOpenChange}>\n            <PopoverTrigger asChild disabled={disabled}>\n              <button\n                type=\"button\"\n                data-disabled={disabled?.toString()}\n                className=\"flex items-center justify-between gap-1 text-sm cursor-pointer data-[disabled=true]:cursor-not-allowed\"\n              >\n                <div className=\"flex items-center gap-1\">\n                  <span className=\"text-base\">{selectedItem.flag}</span>\n                  <span className=\"font-medium\">{selectedItem.dialCode}</span>\n                </div>\n                <ChevronDown className=\"w-4 h-4 ml-1 text-muted-foreground\" />\n              </button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-64 p-0\"\n              align=\"start\"\n              side=\"bottom\"\n              sideOffset={16}\n              alignOffset={variant === \"underline\" ? -4 : -12}\n              avoidCollisions={true}\n            >\n              <div className=\"max-h-[300px] overflow-y-auto\">\n                {items.map((item, index) => (\n                  <button\n                    key={index}\n                    type=\"button\"\n                    className=\"flex items-center w-full px-4 py-2 text-sm hover:bg-muted\"\n                    onClick={() => handleCountrySelect(item)}\n                  >\n                    <span className=\"mr-2 text-base\">{item.flag}</span>\n                    <span className=\"flex-1 text-left\">{item.name}</span>\n                    <span className=\"text-muted-foreground\">\n                      {item.dialCode}\n                    </span>\n                    {item.dialCode === selectedItem.dialCode && (\n                      <Check className=\"w-4 h-4 ml-2 text-primary\" />\n                    )}\n                  </button>\n                ))}\n              </div>\n            </PopoverContent>\n          </Popover>\n          <div className=\"h-full border-r py-1 pl-1.5 mr-1\" />\n        </div>\n      }\n    />\n  );\n};\n\nPhoneInput.displayName = \"PhoneInput\";\n\nexport { PhoneInput, type PhoneInputProps };\n",
      "type": "registry:ui",
      "target": "components/wed/phone-input.tsx"
    }
  ]
}