{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phone-input",
  "description": "Phone input component with country selection",
  "dependencies": [
    "react-phone-number-input",
    "libphonenumber-js"
  ],
  "registryDependencies": [
    "https://formscn.space/r/label.json"
  ],
  "files": [
    {
      "path": "src/components/ui/phone-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport PhoneInput, { type Country } from \"react-phone-number-input\";\nimport { isValidPhoneNumber } from \"libphonenumber-js\";\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"./label\";\n\nimport \"react-phone-number-input/style.css\";\n\nexport interface PhoneInputFieldProps {\n  value?: string;\n  onChange?: (value: string | undefined) => void;\n  label?: string;\n  placeholder?: string;\n  error?: string;\n  description?: string;\n  disabled?: boolean;\n  required?: boolean;\n  defaultCountry?: Country;\n  className?: string;\n}\n\nexport function PhoneInputField({\n  value,\n  onChange,\n  label,\n  placeholder = \"Enter phone number\",\n  error,\n  description,\n  disabled = false,\n  required = false,\n  defaultCountry = \"US\",\n  className,\n}: PhoneInputFieldProps) {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      {label && (\n        <Label className={cn(error && \"text-destructive\")}>\n          {label}\n          {required && <span className=\"text-destructive ml-1\">*</span>}\n        </Label>\n      )}\n      \n      <div className=\"relative\">\n        <PhoneInput\n          international\n          countryCallingCodeEditable={false}\n          defaultCountry={defaultCountry}\n          value={value}\n          onChange={(value) => onChange?.(value as string | undefined)}\n          placeholder={placeholder}\n          disabled={disabled}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          className={cn(\n            \"flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors\",\n            \"border-input focus-visible:border-ring focus-visible:ring-ring/50\",\n            \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n            \"placeholder:text-muted-foreground\",\n            \"focus-visible:outline-none focus-visible:ring-1\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n            \"aria-invalid:border-destructive\",\n            error && \"border-destructive\",\n            isFocused && !error && \"ring-1 ring-ring\",\n            \"[&_.PhoneInputCountry]:bg-transparent\",\n            \"[&_.PhoneInputCountrySelect]:h-9\",\n            \"[&_.PhoneInputCountrySelect]:px-2\",\n            \"[&_.PhoneInputCountrySelect]:border-r\",\n            \"[&_.PhoneInputCountrySelect]:border-input\",\n            \"[&_.PhoneInputInput]:flex-1\",\n            \"[&_.PhoneInputInput]:bg-transparent\",\n            \"[&_.PhoneInputInput]:outline-none\",\n            \"[&_.PhoneInputInput]:placeholder:text-muted-foreground\",\n          )}\n        />\n      </div>\n\n      {description && !error && (\n        <p className=\"text-xs text-muted-foreground\">{description}</p>\n      )}\n      \n      {error && (\n        <p className=\"text-xs text-destructive\">{error}</p>\n      )}\n    </div>\n  );\n}\n\n// Import z for the schema helper\nimport * as z from \"zod\";\n\n/**\n * Zod validation helper for phone numbers\n */\nexport const phoneSchema = (message = \"Invalid phone number\") =>\n  z.string().refine(\n    (value) => !value || isValidPhoneNumber(value),\n    message\n  );",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}