{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-46",
  "type": "registry:component",
  "dependencies": [
    "react-phone-number-input"
  ],
  "registryDependencies": [
    "https://coss.com/origin/r/input.json",
    "https://coss.com/origin/r/label.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-46.tsx",
      "content": "\"use client\";\n\nimport { ChevronDownIcon, PhoneIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { useId, useState } from \"react\";\nimport * as RPNInput from \"react-phone-number-input\";\nimport flags from \"react-phone-number-input/flags\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <div className=\"*:not-first:mt-2\" dir=\"ltr\">\n      <Label htmlFor={id}>PhoneIcon number input</Label>\n      <RPNInput.default\n        className=\"flex rounded-md shadow-xs\"\n        countrySelectComponent={CountrySelect}\n        flagComponent={FlagComponent}\n        id={id}\n        inputComponent={PhoneInput}\n        international\n        onChange={(newValue) => setValue(newValue ?? \"\")}\n        placeholder=\"Enter phone number\"\n        value={value}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://gitlab.com/catamphetamine/react-phone-number-input\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          react-phone-number-input\n        </a>\n      </p>\n    </div>\n  );\n}\n\nconst PhoneInput = ({ className, ...props }: React.ComponentProps<\"input\">) => {\n  return (\n    <Input\n      className={cn(\n        \"-ms-px rounded-s-none shadow-none focus-visible:z-10\",\n        className,\n      )}\n      data-slot=\"phone-input\"\n      {...props}\n    />\n  );\n};\n\nPhoneInput.displayName = \"PhoneInput\";\n\ntype CountrySelectProps = {\n  disabled?: boolean;\n  value: RPNInput.Country;\n  onChange: (value: RPNInput.Country) => void;\n  options: { label: string; value: RPNInput.Country | undefined }[];\n};\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange(event.target.value as RPNInput.Country);\n  };\n\n  return (\n    <div className=\"relative inline-flex items-center self-stretch rounded-s-md border border-input bg-background py-2 ps-3 pe-2 text-muted-foreground outline-none transition-[color,box-shadow] focus-within:z-10 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 hover:bg-accent hover:text-foreground has-disabled:pointer-events-none has-aria-invalid:border-destructive/60 has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\">\n      <div aria-hidden=\"true\" className=\"inline-flex items-center gap-1\">\n        <FlagComponent aria-hidden=\"true\" country={value} countryName={value} />\n        <span className=\"text-muted-foreground/80\">\n          <ChevronDownIcon aria-hidden=\"true\" size={16} />\n        </span>\n      </div>\n      <select\n        aria-label=\"Select country\"\n        className=\"absolute inset-0 text-sm opacity-0\"\n        disabled={disabled}\n        onChange={handleSelect}\n        value={value}\n      >\n        <option key=\"default\" value=\"\">\n          Select a country\n        </option>\n        {options\n          .filter((x) => x.value)\n          .map((option, i) => (\n            <option key={option.value ?? `empty-${i}`} value={option.value}>\n              {option.label}{\" \"}\n              {option.value &&\n                `+${RPNInput.getCountryCallingCode(option.value)}`}\n            </option>\n          ))}\n      </select>\n    </div>\n  );\n};\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country];\n\n  return (\n    <span className=\"w-5 overflow-hidden rounded-sm\">\n      {Flag ? (\n        <Flag title={countryName} />\n      ) : (\n        <PhoneIcon aria-hidden=\"true\" size={16} />\n      )}\n    </span>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "input",
      "label",
      "phone"
    ]
  }
}