{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phone-input",
  "type": "registry:ui",
  "title": "Phone input",
  "description": "A telephone number field with type tel, a numeric keypad on mobile, tel autocomplete, tabular digits and a default aria label. Styled like the React base input.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/phone-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/phone-input.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { inputVariants } from \"@/components/ui/input\"\n\ntype PhoneInputProps = {\n  value?: string\n  onChange?: (value: string) => void\n  disabled?: boolean\n  className?: string\n  id?: string\n  \"aria-label\"?: string\n  placeholder?: string\n}\n\nfunction PhoneInput({\n  value,\n  onChange,\n  disabled,\n  className,\n  id,\n  placeholder = \"+1 (555) 000-0000\",\n  ...a11y\n}: PhoneInputProps) {\n  return (\n    <input\n      id={id}\n      type=\"tel\"\n      inputMode=\"tel\"\n      autoComplete=\"tel\"\n      disabled={disabled}\n      value={value}\n      placeholder={placeholder}\n      aria-label={a11y[\"aria-label\"] ?? \"Phone number\"}\n      data-slot=\"phone-input\"\n      className={cn(inputVariants({ size: \"default\" }), \"tabular-nums\", className)}\n      onChange={(e) => onChange?.(e.target.value)}\n    />\n  )\n}\nexport { PhoneInput }\n"
    }
  ]
}