{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"phone-input","type":"registry:ui","title":"Phone Input","description":"","dependencies":["react-phone-number-input"],"registryDependencies":["button","combobox","input","scroll-area"],"files":[{"path":"phone-input.tsx","type":"registry:ui","content":"\"use client\"\n\nimport type { ComponentProps } from \"react\"\nimport { createContext, useContext, useMemo, useState } from \"react\"\nimport * as BasePhoneInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/components/ui/combobox\"\nimport { Input } from \"@/components/ui/input\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype PhoneInputSize = \"sm\" | \"default\" | \"lg\"\n\nconst PhoneInputContext = createContext<{\n  variant: PhoneInputSize\n  popupClassName?: string\n  scrollAreaClassName?: string\n}>({\n  variant: \"default\",\n  popupClassName: undefined,\n  scrollAreaClassName: undefined,\n})\n\ntype PhoneInputProps = Omit<\n  ComponentProps<\"input\">,\n  \"onChange\" | \"value\" | \"ref\"\n> &\n  Omit<\n    BasePhoneInput.Props<typeof BasePhoneInput.default>,\n    \"onChange\" | \"variant\" | \"popupClassName\" | \"scrollAreaClassName\"\n  > & {\n    onChange?: (value: BasePhoneInput.Value) => void\n    variant?: PhoneInputSize\n    popupClassName?: string\n    scrollAreaClassName?: string\n  }\n\nfunction PhoneInput({\n  className,\n  variant,\n  popupClassName,\n  scrollAreaClassName,\n  onChange,\n  value,\n  ...props\n}: PhoneInputProps) {\n  const phoneInputSize = variant || \"default\"\n  return (\n    <PhoneInputContext.Provider\n      value={{ variant: phoneInputSize, popupClassName, scrollAreaClassName }}\n    >\n      <BasePhoneInput.default\n        className={cn(\n          \"flex\",\n          props[\"aria-invalid\"] &&\n            \"[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50\",\n          className\n        )}\n        flagComponent={FlagComponent}\n        countrySelectComponent={CountrySelect}\n        inputComponent={InputComponent}\n        smartCaret={false}\n        value={value || undefined}\n        onChange={(value) => onChange?.(value || (\"\" as BasePhoneInput.Value))}\n        {...props}\n      />\n    </PhoneInputContext.Provider>\n  )\n}\n\nfunction InputComponent({ className, ...props }: ComponentProps<typeof Input>) {\n  const { variant } = useContext(PhoneInputContext)\n\n  return (\n    <Input\n      className={cn(\n        \"rounded-s-none focus:z-1\",\n        variant === \"sm\" && \"h-7\",\n        variant === \"lg\" && \"h-9\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\ntype CountryEntry = { label: string; value: BasePhoneInput.Country | undefined }\n\ntype CountrySelectProps = {\n  disabled?: boolean\n  value: BasePhoneInput.Country\n  options: CountryEntry[]\n  onChange: (country: BasePhoneInput.Country) => void\n}\n\nfunction CountrySelect({\n  disabled,\n  value: selectedCountry,\n  options: countryList,\n  onChange,\n}: CountrySelectProps) {\n  const { variant, popupClassName } = useContext(PhoneInputContext)\n  const [searchValue, setSearchValue] = useState(\"\")\n\n  const filteredCountries = useMemo(() => {\n    if (!searchValue) return countryList\n    return countryList.filter(({ label }) =>\n      label.toLowerCase().includes(searchValue.toLowerCase())\n    )\n  }, [countryList, searchValue])\n\n  return (\n    <Combobox\n      items={filteredCountries}\n      value={selectedCountry || \"\"}\n      onValueChange={(country: BasePhoneInput.Country | null) => {\n        if (country) {\n          onChange(country)\n        }\n      }}\n    >\n      <ComboboxTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            size={variant}\n            className={cn(\n              \"rounded-s-3xl flex gap-1 rounded-e-none border-e-0 px-2.5 py-0 leading-none hover:bg-transparent focus:z-10 data-pressed:bg-transparent\",\n              disabled && \"opacity-50\"\n            )}\n            disabled={disabled}\n          >\n            <span className=\"sr-only\">\n              <ComboboxValue />\n            </span>\n            <FlagComponent\n              country={selectedCountry}\n              countryName={selectedCountry}\n            />\n          </Button>\n        }\n      />\n      <ComboboxContent\n        className={cn(\n          \"w-xs *:data-[slot=input-group]:bg-transparent\",\n          popupClassName\n        )}\n      >\n        <ComboboxInput\n          placeholder=\"e.g. United States\"\n          value={searchValue}\n          onChange={(e) => setSearchValue(e.target.value)}\n          showTrigger={false}\n          className=\"border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0\"\n        />\n        <ComboboxSeparator />\n        <ComboboxEmpty className=\"px-4 py-2.5 text-sm\">\n          No country found.\n        </ComboboxEmpty>\n        <ComboboxList>\n          <div className=\"relative flex max-h-full\">\n            <div className=\"flex max-h-[min(var(--available-height),24rem)] w-full scroll-pt-2 scroll-pb-2 flex-col overscroll-contain\">\n              <ScrollArea className=\"size-full min-h-0 **:data-[slot=scroll-area-scrollbar]:m-0 [&_[data-slot=scroll-area-viewport]]:h-full [&_[data-slot=scroll-area-viewport]]:overscroll-contain\">\n                {filteredCountries.map((item: CountryEntry) =>\n                  item.value ? (\n                    <ComboboxItem\n                      key={item.value}\n                      value={item.value}\n                      className=\"flex items-center gap-2\"\n                    >\n                      <FlagComponent\n                        country={item.value}\n                        countryName={item.label}\n                      />\n                      <span className=\"flex-1 text-sm\">{item.label}</span>\n                      <span className=\"text-foreground/50 text-sm\">\n                        {`+${BasePhoneInput.getCountryCallingCode(item.value)}`}\n                      </span>\n                    </ComboboxItem>\n                  ) : null\n                )}\n              </ScrollArea>\n            </div>\n          </div>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  )\n}\n\nfunction FlagComponent({ country, countryName }: BasePhoneInput.FlagProps) {\n  const Flag = flags[country]\n\n  return (\n    <span className=\"flex h-4 w-4 items-center justify-center [&_svg:not([class*='size-'])]:size-full! [&_svg:not([class*='size-'])]:rounded-[5px]\">\n      {Flag ? (\n        <Flag title={countryName} />\n      ) : (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeSimpleIcon\"\n          remixicon=\"RiGlobalLine\"\n          className=\"size-4 opacity-60\"\n        />\n      )}\n    </span>\n  )\n}\n\nexport { PhoneInput }","target":"components/neui/phone-input.tsx"}]}