{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phone-input",
  "dependencies": [
    "lucide-react",
    "react-phone-number-input",
    "zod"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/phone-input.tsx",
      "content": "'use client';\nimport { Button } from '@/components/website/ui/button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/website/ui/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/website/ui/popover';\nimport { ScrollArea } from '@/components/website/ui/scroll-area';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronsUpDown } from 'lucide-react';\nimport * as React from 'react';\nimport * as RPNInput from 'react-phone-number-input';\nimport flags from 'react-phone-number-input/flags';\n\ntype PhoneInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> &\n  Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {\n    onChange?: (value: RPNInput.Value) => void;\n  };\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> = React.forwardRef<\n  React.ElementRef<typeof RPNInput.default>,\n  PhoneInputProps\n>(({ className, onChange, ...props }, ref) => {\n  return (\n    <RPNInput.default\n      ref={ref}\n      className={cn('flex', className)}\n      flagComponent={FlagComponent}\n      countrySelectComponent={CountrySelect}\n      inputComponent={InputComponent}\n      /**\n       * Handles the onChange event.\n       *\n       * react-phone-number-input might trigger the onChange event as undefined\n       * when a valid phone number is not entered. To prevent this,\n       * the value is coerced to an empty string.\n       *\n       * @param {E164Number | undefined} value - The entered value\n       */\n      // @ts-expect-error\n      onChange={(value) => onChange?.(value || '')}\n      {...props}\n    />\n  );\n});\nPhoneInput.displayName = 'PhoneInput';\n\nconst InputComponent = React.forwardRef<HTMLInputElement, any>(({ className, ...props }, ref) => (\n  <input\n    className={cn(\n      'rounded-e-lg rounded-s-none px-2 bg-primary-base outline-hidden w-full ',\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n));\nInputComponent.displayName = 'InputComponent';\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country };\n\ntype CountrySelectProps = {\n  disabled?: boolean;\n  value: RPNInput.Country;\n  onChange: (value: RPNInput.Country) => void;\n  options: CountrySelectOption[];\n};\n\nconst CountrySelect = ({ disabled, value, onChange, options }: CountrySelectProps) => {\n  const handleSelect = React.useCallback(\n    (country: RPNInput.Country) => {\n      onChange(country);\n    },\n    [onChange]\n  );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type='button'\n          variant={'outline'}\n          className={cn('flex gap-1 rounded-e-none bg-primary-base rounded-s-lg px-3')}\n          disabled={disabled}\n        >\n          <FlagComponent country={value} countryName={value} />\n          <ChevronsUpDown\n            className={cn('-mr-2 h-4 w-4 opacity-50', disabled ? 'hidden' : 'opacity-100')}\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className='w-[300px] p-0'>\n        <Command className='dark:bg-neutral-950 border dark:border-neutral-800 border-neutral-200'>\n          <CommandList>\n            <ScrollArea className='h-72'>\n              <CommandInput placeholder='Search country...' />\n              <CommandEmpty>No country found.</CommandEmpty>\n              <CommandGroup>\n                {options\n                  .filter((x) => x.value)\n                  .map((option) => (\n                    <CommandItem\n                      className='gap-2'\n                      key={option.value}\n                      onSelect={() => handleSelect(option.value)}\n                    >\n                      <FlagComponent country={option.value} countryName={option.label} />\n                      <span className='flex-1 text-sm'>{option.label}</span>\n                      {option.value && (\n                        <span className='text-foreground/50 text-sm'>\n                          {`+${RPNInput.getCountryCallingCode(option.value)}`}\n                        </span>\n                      )}\n                      <CheckIcon\n                        className={cn(\n                          'ml-auto h-4 w-4',\n                          option.value === value ? 'opacity-100' : 'opacity-0'\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n              </CommandGroup>\n            </ScrollArea>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country];\n\n  return (\n    <span className='bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-xs'>\n      {Flag && <Flag title={countryName} />}\n    </span>\n  );\n};\nFlagComponent.displayName = 'FlagComponent';\n\nexport { PhoneInput };\n",
      "type": "registry:component"
    },
    {
      "path": "./components/website/ui/button.tsx",
      "content": "import { Slot } from '@radix-ui/react-slot';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input dark:bg-neutral-800 bg-neutral-50 hover:bg-accent hover:text-accent-foreground',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n        uilayouts:\n          'dark:bg-zinc-900 bg-neutral-200 dark:text-white text-black border dark:border-neutral-800',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n    return (\n      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />\n    );\n  }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n",
      "type": "registry:component"
    },
    {
      "path": "./components/website/ui/command.tsx",
      "content": "'use client';\n\nimport { Dialog, DialogContent } from '@/components/website/ui/dialog';\nimport { cn } from '@/lib/utils';\nimport type { DialogProps } from '@radix-ui/react-dialog';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-md dark:bg-neutral-800 bg-neutral-50 text-popover-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className='overflow-hidden p-0'>\n        <Command className='[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className='flex items-center border-b px-3' cmdk-input-wrapper=''>\n    <Search className='mr-2 h-4 w-4 shrink-0 opacity-50' />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className='py-6 text-center text-sm' {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden dark:aria-selected:bg-neutral-950 aria-selected:bg-neutral-200 aria-selected:text-accent-foreground data-[disabled=\"true\"]:pointer-events-none data-[disabled=\"true\"]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n",
      "type": "registry:component"
    },
    {
      "path": "./components/website/ui/popover.tsx",
      "content": "'use client';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverContent, PopoverTrigger };\n",
      "type": "registry:component"
    },
    {
      "path": "./components/website/ui/scroll-area.tsx",
      "content": "'use client';\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn('relative overflow-hidden', className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n));\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-colors',\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',\n      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full dark:bg-neutral-800 bg-neutral-200' />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}