{"name":"shadcd","homepage":"https://pb-ui-five.vercel.app","items":[{"name":"alert-dialog","title":"Alert Dialog","description":"Modal dialog with actions for critical decisions.","type":"registry:ui","docs":"/components/alert-dialog","categories":["overlay","feedback"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button"],"files":[{"path":"components/ui/alert-dialog.tsx","target":"components/ui/alert-dialog.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n return \n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Popup.Props & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: AlertDialogPrimitive.Close.Props &\n Pick, \"variant\" | \"size\">) {\n return (\n }\n {...props}\n />\n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n"}]},{"name":"badge","title":"Badge","description":"Small status or label indicator.","type":"registry:ui","docs":"/components/badge","categories":["data-display"],"files":[{"path":"components/ui/badge.tsx","target":"components/ui/badge.tsx","type":"registry:ui","content":"import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive:\n \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n outline:\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost:\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ variant }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n"}]},{"name":"button","title":"Button","description":"Interactive button with variants and sizes.","type":"registry:ui","docs":"/components/button","categories":["forms"],"files":[{"path":"components/ui/button.tsx","target":"components/ui/button.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps) {\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n"}]},{"name":"card","title":"Card","description":"Container for grouped content and actions.","type":"registry:ui","docs":"/components/card","categories":["layout"],"files":[{"path":"components/ui/card.tsx","target":"components/ui/card.tsx","type":"registry:ui","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n"}]},{"name":"combobox","title":"Combobox","description":"Searchable select input with options list.","type":"registry:ui","docs":"/components/combobox","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button","https://pb-ui-five.vercel.app/registry/input-group"],"files":[{"path":"components/ui/combobox.tsx","target":"components/ui/combobox.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return ;\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n );\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean;\n showClear?: boolean;\n}) {\n return (\n \n }\n {...props}\n />\n \n {showTrigger && (\n }\n data-slot=\"input-group-button\"\n className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n disabled={disabled}\n />\n )}\n {showClear && }\n \n {children}\n \n );\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n \n \n \n \n \n );\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n \n }\n >\n \n \n \n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n );\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n );\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n );\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef &\n ComboboxPrimitive.Chips.Props) {\n return (\n \n );\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean;\n}) {\n return (\n \n {children}\n {showRemove && (\n }\n className=\"opacity-50 hover:opacity-100 -ml-1\"\n data-slot=\"combobox-chip-remove\"\n >\n \n \n )}\n \n );\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n \n );\n}\n\nfunction useComboboxAnchor() {\n return React.useRef(null);\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxClear,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n};\n"}]},{"name":"dropdown-menu","title":"Dropdown Menu","description":"Contextual menu with groups and shortcuts.","type":"registry:ui","docs":"/components/dropdown-menu","categories":["overlay"],"files":[{"path":"components/ui/dropdown-menu.tsx","target":"components/ui/dropdown-menu.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronRightIcon, CheckIcon } from \"lucide-react\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n return \n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n return \n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n return \n}\n\nfunction DropdownMenuContent({\n align = \"start\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n className,\n ...props\n}: MenuPrimitive.Popup.Props &\n Pick<\n MenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return \n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: MenuPrimitive.GroupLabel.Props & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: MenuPrimitive.Item.Props & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n return \n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction DropdownMenuSubContent({\n align = \"start\",\n alignOffset = -3,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return (\n \n )\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: MenuPrimitive.RadioItem.Props & {\n inset?: boolean\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: MenuPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n}\n"}]},{"name":"field","title":"Field","description":"Form field wrappers and labels.","type":"registry:ui","docs":"/components/field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/label","https://pb-ui-five.vercel.app/registry/separator"],"files":[{"path":"components/ui/field.tsx","target":"components/ui/field.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return (\n [data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n \n )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nconst fieldVariants = cva(\n \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n {\n variants: {\n orientation: {\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n responsive:\n \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n }\n)\n\nfunction Field({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n \n )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction FieldLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n [data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n children?: React.ReactNode\n}) {\n return (\n \n \n {children && (\n \n {children}\n \n )}\n \n )\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<\"div\"> & {\n errors?: Array<{ message?: string } | undefined>\n}) {\n const content = useMemo(() => {\n if (children) {\n return children\n }\n\n if (!errors?.length) {\n return null\n }\n\n const uniqueErrors = [\n ...new Map(errors.map((error) => [error?.message, error])).values(),\n ]\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message\n }\n\n return (\n
    \n {uniqueErrors.map(\n (error, index) =>\n error?.message &&
  • {error.message}
    • \n )}\n
\n )\n }, [children, errors])\n\n if (!content) {\n return null\n }\n\n return (\n \n {content}\n \n )\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n}\n"}]},{"name":"input","title":"Input","description":"Text input with consistent styling.","type":"registry:ui","docs":"/components/input","categories":["forms"],"files":[{"path":"components/ui/input.tsx","target":"components/ui/input.tsx","type":"registry:ui","content":"import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nexport { Input }\n"}]},{"name":"input-group","title":"Input Group","description":"Grouped input with add-ons.","type":"registry:ui","docs":"/components/input-group","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button","https://pb-ui-five.vercel.app/registry/input","https://pb-ui-five.vercel.app/registry/textarea"],"files":[{"path":"components/ui/input-group.tsx","target":"components/ui/input-group.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n \"inline-end\":\n \"order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps) {\n return (\n {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"flex items-center gap-2 text-sm shadow-none\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit, \"size\" | \"type\"> &\n VariantProps & {\n type?: \"button\" | \"submit\" | \"reset\"\n }) {\n return (\n \n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n \n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n \n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n"}]},{"name":"label","title":"Label","description":"Accessible label for form controls.","type":"registry:ui","docs":"/components/label","categories":["forms"],"files":[{"path":"components/ui/label.tsx","target":"components/ui/label.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n return (\n \n )\n}\n\nexport { Label }\n"}]},{"name":"select","title":"Select","description":"Custom select with grouped options.","type":"registry:ui","docs":"/components/select","categories":["forms"],"files":[{"path":"components/ui/select.tsx","target":"components/ui/select.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n return (\n \n )\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: SelectPrimitive.Trigger.Props & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n }\n />\n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n alignItemWithTrigger = true,\n ...props\n}: SelectPrimitive.Popup.Props &\n Pick<\n SelectPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n >) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: SelectPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: SelectPrimitive.Item.Props) {\n return (\n \n \n {children}\n \n \n }\n >\n \n \n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: SelectPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"}]},{"name":"separator","title":"Separator","description":"Horizontal or vertical divider.","type":"registry:ui","docs":"/components/separator","categories":["layout"],"files":[{"path":"components/ui/separator.tsx","target":"components/ui/separator.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n ...props\n}: SeparatorPrimitive.Props) {\n return (\n \n )\n}\n\nexport { Separator }\n"}]},{"name":"textarea","title":"Textarea","description":"Multiline text input.","type":"registry:ui","docs":"/components/textarea","categories":["forms"],"files":[{"path":"components/ui/textarea.tsx","target":"components/ui/textarea.tsx","type":"registry:ui","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n return (\n \n )\n}\n\nexport { Textarea }\n"}]},{"name":"tag-input","title":"Tag Input","description":"Create tags from typed input and enter press.","type":"registry:ui","docs":"/components/tag-input","categories":["forms","data-entry"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/badge","https://pb-ui-five.vercel.app/registry/button","https://pb-ui-five.vercel.app/registry/input"],"files":[{"path":"components/ui/tag-input.tsx","target":"components/ui/tag-input.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TagInputProps = Omit, \"onChange\"> & {\n value: string[];\n onValueChange: (value: string[]) => void;\n placeholder?: string;\n maxTags?: number;\n allowDuplicates?: boolean;\n disabled?: boolean;\n showClear?: boolean;\n};\n\nexport function TagInput({\n value,\n onValueChange,\n placeholder = \"Add a tag…\",\n maxTags,\n allowDuplicates = false,\n disabled = false,\n showClear = false,\n className,\n ...props\n}: TagInputProps) {\n const [inputValue, setInputValue] = React.useState(\"\");\n\n const addTag = React.useCallback(\n (raw: string) => {\n const tagsToAdd = raw\n .split(/[,,]/)\n .map((t) => t.trim())\n .filter((t) => t.length > 0);\n\n if (tagsToAdd.length === 0) {\n return;\n }\n\n const newValue = [...value];\n let tagsAdded = false;\n\n for (const next of tagsToAdd) {\n if (\n !allowDuplicates &&\n newValue.some((t) => t.toLowerCase() === next.toLowerCase())\n ) {\n continue;\n }\n\n if (typeof maxTags === \"number\" && newValue.length >= maxTags) {\n break;\n }\n\n newValue.push(next);\n tagsAdded = true;\n }\n\n if (tagsAdded) {\n onValueChange(newValue);\n }\n setInputValue(\"\");\n },\n [allowDuplicates, maxTags, onValueChange, value],\n );\n\n const removeTag = React.useCallback(\n (tag: string) => {\n onValueChange(value.filter((item) => item !== tag));\n },\n [onValueChange, value],\n );\n\n return (\n \n {value.map((tag) => (\n \n {tag}\n removeTag(tag)}\n disabled={disabled}\n aria-label={`Remove ${tag}`}\n >\n \n \n \n ))}\n setInputValue(event.target.value)}\n onKeyDown={(event) => {\n if (disabled) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \",\") {\n event.preventDefault();\n addTag(inputValue);\n return;\n }\n\n if (event.key === \"Backspace\" && inputValue.length === 0) {\n onValueChange(value.slice(0, -1));\n }\n }}\n onBlur={() => {\n if (disabled) {\n return;\n }\n\n if (inputValue.trim().length > 0) {\n addTag(inputValue);\n }\n }}\n placeholder={placeholder}\n disabled={disabled}\n className=\"flex-1 bg-transparent shadow-none p-0 border-0 focus-visible:ring-0 w-[18ch] min-w-[18ch] h-7\"\n />\n {showClear && value.length > 0 && (\n onValueChange([])}\n disabled={disabled}\n aria-label=\"Clear all tags\"\n >\n \n \n )}\n \n );\n}\n"}]},{"name":"checkbox","title":"Checkbox","description":"Toggle control for boolean values.","type":"registry:ui","docs":"/components/checkbox","categories":["forms"],"files":[{"path":"components/ui/checkbox.tsx","target":"components/ui/checkbox.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n return (\n \n svg]:size-3.5\"\n >\n \n \n \n )\n}\n\nexport { Checkbox }\n"}]},{"name":"switch","title":"Switch","description":"Toggle switch for on/off states.","type":"registry:ui","docs":"/components/switch","categories":["forms"],"files":[{"path":"components/ui/switch.tsx","target":"components/ui/switch.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n className,\n size = \"default\",\n ...props\n}: SwitchPrimitive.Root.Props & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n \n \n )\n}\n\nexport { Switch }\n"}]},{"name":"slider","title":"Slider","description":"Range input for selecting numeric values.","type":"registry:ui","docs":"/components/slider","categories":["forms"],"files":[{"path":"components/ui/slider.tsx","target":"components/ui/slider.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n"}]},{"name":"radio-group","title":"Radio Group","description":"Single selection from multiple options.","type":"registry:ui","docs":"/components/radio-group","categories":["forms"],"files":[{"path":"components/ui/radio-group.tsx","target":"components/ui/radio-group.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n return (\n \n )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n return (\n \n \n \n \n \n )\n}\n\nexport { RadioGroup, RadioGroupItem }\n"}]},{"name":"popover","title":"Popover","description":"Floating content panel with positioning.","type":"registry:ui","docs":"/components/popover","categories":["overlay"],"files":[{"path":"components/ui/popover.tsx","target":"components/ui/popover.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n return \n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n return \n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n ...props\n}: PopoverPrimitive.Popup.Props &\n Pick<\n PopoverPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverPrimitive.Description.Props) {\n return (\n \n )\n}\n\nexport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n}\n"}]},{"name":"calendar","title":"Calendar","description":"Date selection calendar component.","type":"registry:ui","docs":"/components/calendar","categories":["forms","data-entry"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button"],"dependencies":["react-day-picker"],"files":[{"path":"components/ui/calendar.tsx","target":"components/ui/calendar.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport {\n DayPicker,\n getDefaultClassNames,\n type DayButton,\n type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from \"lucide-react\"\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n locale,\n formatters,\n components,\n ...props\n}: React.ComponentProps & {\n buttonVariant?: React.ComponentProps[\"variant\"]\n}) {\n const defaultClassNames = getDefaultClassNames()\n\n return (\n svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className\n )}\n captionLayout={captionLayout}\n locale={locale}\n formatters={{\n formatMonthDropdown: (date) =>\n date.toLocaleString(locale?.code, { month: \"short\" }),\n ...formatters,\n }}\n classNames={{\n root: cn(\"w-fit\", defaultClassNames.root),\n months: cn(\n \"relative flex flex-col gap-4 md:flex-row\",\n defaultClassNames.months\n ),\n month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n nav: cn(\n \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n defaultClassNames.nav\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n defaultClassNames.button_previous\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n defaultClassNames.button_next\n ),\n month_caption: cn(\n \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n defaultClassNames.month_caption\n ),\n dropdowns: cn(\n \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n defaultClassNames.dropdowns\n ),\n dropdown_root: cn(\n \"relative rounded-(--cell-radius)\",\n defaultClassNames.dropdown_root\n ),\n dropdown: cn(\n \"absolute inset-0 bg-popover opacity-0\",\n defaultClassNames.dropdown\n ),\n caption_label: cn(\n \"font-medium select-none\",\n captionLayout === \"label\"\n ? \"text-sm\"\n : \"flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n defaultClassNames.caption_label\n ),\n table: \"w-full border-collapse\",\n weekdays: cn(\"flex\", defaultClassNames.weekdays),\n weekday: cn(\n \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n defaultClassNames.weekday\n ),\n week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n week_number_header: cn(\n \"w-(--cell-size) select-none\",\n defaultClassNames.week_number_header\n ),\n week_number: cn(\n \"text-[0.8rem] text-muted-foreground select-none\",\n defaultClassNames.week_number\n ),\n day: cn(\n \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n props.showWeekNumber\n ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n defaultClassNames.day\n ),\n range_start: cn(\n \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n defaultClassNames.range_start\n ),\n range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n range_end: cn(\n \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n defaultClassNames.range_end\n ),\n today: cn(\n \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n defaultClassNames.today\n ),\n outside: cn(\n \"text-muted-foreground aria-selected:text-muted-foreground\",\n defaultClassNames.outside\n ),\n disabled: cn(\n \"text-muted-foreground opacity-50\",\n defaultClassNames.disabled\n ),\n hidden: cn(\"invisible\", defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n Root: ({ className, rootRef, ...props }) => {\n return (\n \n )\n },\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === \"left\") {\n return (\n \n )\n }\n\n if (orientation === \"right\") {\n return (\n \n )\n }\n\n return (\n \n )\n },\n DayButton: ({ ...props }) => (\n \n ),\n WeekNumber: ({ children, ...props }) => {\n return (\n \n
\n {children}\n
\n \n )\n },\n ...components,\n }}\n {...props}\n />\n )\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n locale,\n ...props\n}: React.ComponentProps & { locale?: Partial }) {\n const defaultClassNames = getDefaultClassNames()\n\n const ref = React.useRef(null)\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus()\n }, [modifiers.focused])\n\n return (\n span]:text-xs [&>span]:opacity-70\",\n defaultClassNames.day,\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Calendar, CalendarDayButton }\n"}]},{"name":"dialog","title":"Dialog","description":"Modal window for focused interactions.","type":"registry:ui","docs":"/components/dialog","categories":["overlay"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button"],"files":[{"path":"components/ui/dialog.tsx","target":"components/ui/dialog.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { XIcon } from \"lucide-react\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n return \n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n return \n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n return \n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n return \n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogPrimitive.Popup.Props & {\n showCloseButton?: boolean\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showCloseButton?: boolean\n}) {\n return (\n \n {children}\n {showCloseButton && (\n }>\n Close\n \n )}\n \n )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogPrimitive.Description.Props) {\n return (\n \n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n"}]},{"name":"command","title":"Command","description":"Command palette with search and keyboard navigation.","type":"registry:ui","docs":"/components/command","categories":["overlay","navigation"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/dialog","https://pb-ui-five.vercel.app/registry/input-group"],"dependencies":["cmdk"],"files":[{"path":"components/ui/command.tsx","target":"components/ui/command.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\"\nimport {\n InputGroup,\n InputGroupAddon,\n} from \"@/components/ui/input-group\"\nimport { SearchIcon, CheckIcon } from \"lucide-react\"\n\nfunction Command({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandDialog({\n title = \"Command Palette\",\n description = \"Search for a command to run...\",\n children,\n className,\n showCloseButton = false,\n ...props\n}: Omit, \"children\"> & {\n title?: string\n description?: string\n className?: string\n showCloseButton?: boolean\n children: React.ReactNode\n}) {\n return (\n \n \n {title}\n {description}\n \n \n {children}\n \n \n )\n}\n\nfunction CommandInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n
\n \n \n \n \n \n \n
\n )\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandEmpty({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction CommandItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n"}]},{"name":"datefield-rac","title":"Date Field","description":"Date and time input with segmented fields.","type":"registry:ui","docs":"/components/datefield-rac","categories":["forms","data-entry"],"dependencies":["react-aria-components"],"files":[{"path":"components/ui/datefield-rac.tsx","target":"components/ui/datefield-rac.tsx","type":"registry:ui","content":"\"use client\";\n\nimport {\n composeRenderProps,\n type DateFieldProps,\n DateField as DateFieldRac,\n type DateInputProps as DateInputPropsRac,\n DateInput as DateInputRac,\n type DateSegmentProps,\n DateSegment as DateSegmentRac,\n type DateValue as DateValueRac,\n type TimeFieldProps,\n TimeField as TimeFieldRac,\n type TimeValue as TimeValueRac,\n} from \"react-aria-components\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction DateField({\n className,\n children,\n ...props\n}: DateFieldProps) {\n return (\n cn(className))}\n {...props}\n >\n {children}\n \n );\n}\n\nfunction TimeField({\n className,\n children,\n ...props\n}: TimeFieldProps) {\n return (\n cn(className))}\n {...props}\n >\n {children}\n \n );\n}\n\nfunction DateSegment({ className, ...props }: DateSegmentProps) {\n return (\n \n cn(\n \"inline data-focused:bg-accent data-invalid:data-focused:bg-destructive data-disabled:opacity-50 p-0.5 data-[type=literal]:px-0 rounded outline-hidden text-foreground data-[type=literal]:text-muted-foreground/70 data-focused:data-placeholder:text-foreground data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-primary-foreground data-invalid:data-focused:text-primary-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 caret-transparent data-disabled:cursor-not-allowed\",\n className,\n ),\n )}\n {...props}\n data-invalid\n />\n );\n}\n\nconst dateInputStyle =\n \"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:ring-[3px] aria-invalid:border-destructive aria-invalid:data-focus-within:ring-destructive/50 aria-invalid:data-focus-within:border-destructive dark:aria-invalid:border-destructive/50\";\n\ninterface DateInputProps extends DateInputPropsRac {\n className?: string;\n unstyled?: boolean;\n}\n\nfunction DateInput({\n className,\n unstyled = false,\n ...props\n}: Omit) {\n return (\n \n cn(!unstyled && dateInputStyle, className),\n )}\n {...props}\n >\n {(segment) => }\n \n );\n}\n\nexport { DateField, DateInput, dateInputStyle, DateSegment, TimeField };\nexport type { DateInputProps };\n"}]},{"name":"password-input","title":"Password Input","description":"Text input with visibility toggle for passwords.","type":"registry:ui","docs":"/components/password-input","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/input"],"files":[{"path":"components/ui/password-input.tsx","target":"components/ui/password-input.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\n\nimport { Input } from \"@/components/ui/input\";\n\nexport default function PasswordInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n const id = useId();\n const [isVisible, setIsVisible] = useState(false);\n\n const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n\n return (\n
\n \n \n {isVisible ? (\n \n ) : (\n \n )}\n \n
\n );\n}\n"}]},{"name":"file-upload","title":"File Upload","description":"Drag and drop file upload with preview.","type":"registry:ui","docs":"/components/file-upload","categories":["forms","data-entry"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button","https://pb-ui-five.vercel.app/registry/input","https://pb-ui-five.vercel.app/registry/label"],"files":[{"path":"components/ui/file-upload.tsx","target":"components/ui/file-upload.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\nimport { FileText, Loader2, Trash2, Upload, X } from \"lucide-react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { Label } from \"./label\";\n\nexport interface FileUploadProps {\n /** Current file URL (for edit mode) */\n currentFileUrl?: string | null;\n /** Callback when a file is selected */\n onFileSelect: (file: File | null) => void;\n /** Callback when user wants to remove existing file */\n onRemoveExisting?: () => void;\n /** Whether the upload is in progress */\n isUploading?: boolean;\n /** Optional error message */\n error?: string;\n /** Label for the field */\n label?: string;\n /** Description for the field */\n description?: string;\n /** Whether the field is disabled */\n disabled?: boolean;\n /** Whether the field is required */\n required?: boolean;\n showError?: boolean;\n className?: string;\n validateFile?: (file: File) => {\n valid: boolean;\n error?: string | undefined;\n };\n clickToUploadText?: string;\n orDragAndDropText?: string;\n fileTypesText?: string;\n invalidFileErrorText?: string;\n uploadingText?: string;\n viewCurrentFileText?: string;\n replaceText?: string;\n}\n\nexport function FileUpload({\n currentFileUrl,\n onFileSelect,\n onRemoveExisting,\n isUploading = false,\n error,\n label = \"File Upload\",\n description = \"Upload your file here.\",\n disabled = false,\n required = false,\n className,\n validateFile,\n clickToUploadText = \"Click to upload\",\n orDragAndDropText = \"or drag and drop\",\n fileTypesText = \"PDF, DOC, DOCX (max 10MB)\",\n invalidFileErrorText = \"Invalid file\",\n uploadingText = \"Uploading...\",\n viewCurrentFileText = \"View current file\",\n replaceText = \"Replace\",\n showError = true,\n}: FileUploadProps) {\n const [selectedFile, setSelectedFile] = useState(null);\n const [isDragging, setIsDragging] = useState(false);\n const [validationError, setValidationError] = useState(null);\n const inputRef = useRef(null);\n\n const handleFileChange = useCallback(\n (file: File | null) => {\n if (validateFile && file) {\n const validation = validateFile(file);\n if (!validation.valid) {\n setValidationError(validation.error || invalidFileErrorText);\n return;\n }\n }\n setValidationError(null);\n setSelectedFile(file);\n onFileSelect(file);\n },\n [onFileSelect, validateFile, invalidFileErrorText],\n );\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0] || null;\n handleFileChange(file);\n };\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n\n if (disabled || isUploading) return;\n\n const file = e.dataTransfer.files?.[0] || null;\n handleFileChange(file);\n },\n [disabled, isUploading, handleFileChange],\n );\n\n const handleDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n if (!disabled && !isUploading) {\n setIsDragging(true);\n }\n };\n\n const handleDragLeave = (e: React.DragEvent) => {\n e.preventDefault();\n setIsDragging(false);\n };\n\n const handleRemoveSelected = () => {\n setSelectedFile(null);\n setValidationError(null);\n onFileSelect(null);\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n };\n\n const handleRemoveExisting = () => {\n onRemoveExisting?.();\n handleRemoveSelected();\n };\n\n const handleClick = () => {\n if (!disabled && !isUploading) {\n inputRef.current?.click();\n }\n };\n\n const displayError = validationError || error;\n const hasExistingFile = currentFileUrl && !selectedFile;\n const hasSelectedFile = selectedFile !== null;\n\n // Extract filename from URL for display\n const existingFileName = currentFileUrl\n ? decodeURIComponent(currentFileUrl.split(\"/\").pop() || \"curriculum\")\n : null;\n\n return (\n
\n {label && (\n \n )}\n \n \n\n {isUploading ? (\n
\n \n

{uploadingText}

\n
\n ) : hasSelectedFile ? (\n
\n
\n \n
\n

{selectedFile.name}

\n

\n {(selectedFile.size / 1024 / 1024).toFixed(2)} MB\n

\n
\n
\n {\n e.stopPropagation();\n handleRemoveSelected();\n }}\n disabled={disabled}\n >\n \n \n
\n ) : hasExistingFile ? (\n
\n
\n \n
\n

{existingFileName}

\n e.stopPropagation()}\n >\n {viewCurrentFileText}\n \n
\n
\n
\n {\n e.stopPropagation();\n handleClick();\n }}\n disabled={disabled}\n >\n \n {replaceText}\n \n {onRemoveExisting && (\n {\n e.stopPropagation();\n handleRemoveExisting();\n }}\n disabled={disabled}\n className=\"text-destructive hover:text-destructive\"\n >\n \n \n )}\n
\n
\n ) : (\n
\n \n

\n \n {clickToUploadText}\n {\" \"}\n {orDragAndDropText}\n

\n

\n {fileTypesText}\n

\n
\n )}\n
\n\n {description && !displayError && (\n

{description}

\n )}\n\n {showError && displayError && (\n

{displayError}

\n )}\n \n );\n}\n"}]},{"name":"multi-select","title":"Multi Select","description":"Select multiple options with grouped support.","type":"registry:ui","docs":"/components/multi-select","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/combobox"],"files":[{"path":"components/ui/multi-select.tsx","target":"components/ui/multi-select.tsx","type":"registry:ui","content":"\"use client\";\n\nimport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxClear,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxValue,\n useComboboxAnchor,\n} from \"@/components/ui/combobox\";\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\n\nexport type OptionType = {\n label: string;\n value: string;\n category?: string;\n};\n\ninterface MultiSelectProps {\n options: OptionType[];\n selected: string[];\n onChange: (selected: string[]) => void;\n placeholder?: string;\n className?: string;\n grouped?: boolean;\n invalid?: boolean;\n disabled?: boolean;\n showClear?: boolean;\n}\n\nexport function MultiSelect({\n options,\n selected,\n onChange,\n placeholder = \"Select options...\",\n className,\n grouped = false,\n invalid = false,\n disabled = false,\n showClear = false,\n}: MultiSelectProps) {\n const anchor = useComboboxAnchor();\n\n const groupedOptions = React.useMemo(() => {\n if (!grouped) return null;\n\n return options.reduce>((acc, option) => {\n const category = option.category || \"Other\";\n if (!acc[category]) {\n acc[category] = [];\n }\n acc[category].push(option);\n return acc;\n }, {});\n }, [options, grouped]);\n\n const categories = groupedOptions ? Object.keys(groupedOptions) : [];\n\n // Convert string[] selected to OptionType[] for Combobox\n const selectedOptions = React.useMemo(\n () => options.filter((o) => selected.includes(o.value)),\n [options, selected],\n );\n\n // Handle value change from Combobox (converts OptionType[] back to string[])\n const handleValueChange = React.useCallback(\n (newValue: OptionType[]) => {\n onChange(newValue.map((item) => item.value));\n },\n [onChange],\n );\n\n return (\n item.label}\n multiple\n value={selectedOptions}\n onValueChange={handleValueChange}\n disabled={disabled}\n >\n \n \n {selectedOptions.map((option) => (\n {option.label}\n ))}\n \n \n {showClear && selected.length > 0 && (\n \n )}\n \n \n No results found.\n \n {grouped && groupedOptions\n ? categories.map((category, index) => (\n \n \n {category}\n {groupedOptions[category].map((option) => (\n \n {option.label}\n \n ))}\n \n {index < categories.length - 1 && }\n \n ))\n : (item) => (\n \n {item.label}\n \n )}\n \n \n \n );\n}\n"}]},{"name":"tabs","title":"Tabs","description":"Tabbed interface for organized content.","type":"registry:ui","docs":"/components/tabs","categories":["navigation","layout"],"files":[{"path":"components/ui/tabs.tsx","target":"components/ui/tabs.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n className,\n orientation = \"horizontal\",\n ...props\n}: TabsPrimitive.Root.Props) {\n return (\n \n )\n}\n\nconst tabsListVariants = cva(\n \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: TabsPrimitive.List.Props & VariantProps) {\n return (\n \n )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n return (\n \n )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n return (\n \n )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n"}]},{"name":"rhf-base-controller","title":"RHF Base Controller","description":"Base controller wrapper for React Hook Form fields.","type":"registry:ui","docs":"/components/rhf-base-controller","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/field"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/base-controller.tsx","target":"components/ui/rhf-inputs/base-controller.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { ReactNode } from \"react\";\nimport {\n Control,\n Controller,\n ControllerFieldState,\n ControllerRenderProps,\n FieldPath,\n FieldValues,\n UseFormStateReturn,\n} from \"react-hook-form\";\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldError,\n FieldLabel,\n} from \"../field\";\n\ntype ControllerRenderParams = {\n field: ControllerRenderProps>;\n fieldState: ControllerFieldState;\n formState: UseFormStateReturn;\n ariaDescribedBy: string | undefined;\n};\n\nexport type BaseControllerProps = {\n control: Control;\n name: FieldPath;\n label?: string;\n description?: string | ReactNode;\n disableFieldError?: boolean;\n required?: boolean;\n orientation?: \"vertical\" | \"horizontal\";\n layout?: \"standard\" | \"inline\";\n containerClassName?: string;\n children: (params: ControllerRenderParams) => ReactNode;\n};\n\nexport function BaseController({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required = false,\n orientation = \"vertical\",\n layout = \"standard\",\n containerClassName,\n children,\n}: BaseControllerProps) {\n const isInline = layout === \"inline\";\n\n return (\n {\n const ariaDescribedBy =\n [\n description ? `${field.name}-description` : undefined,\n fieldState.error ? `${field.name}-error` : undefined,\n ]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n const labelContent = label && (\n \n {label}\n {required && (\n \n *\n \n )}\n \n );\n\n const descriptionContent = description && (\n \n {description}\n \n );\n\n const errorContent = !disableFieldError && fieldState.invalid && (\n \n );\n\n return (\n \n {isInline ? (\n \n
\n {children({ field, fieldState, formState, ariaDescribedBy })}\n
\n {labelContent}\n {descriptionContent}\n
\n
\n {errorContent}\n \n ) : (\n <>\n {labelContent}\n \n {children({ field, fieldState, formState, ariaDescribedBy })}\n {descriptionContent}\n {errorContent}\n \n \n )}\n \n );\n }}\n />\n );\n}\n"}]},{"name":"rhf-input-field","title":"RHF Input Field","description":"Text input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-input-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/input"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/input-field.tsx","target":"components/ui/rhf-inputs/input-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { InputHTMLAttributes } from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport { Input } from \"../input\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldInputProps = Omit<\n InputHTMLAttributes,\n \"name\" | \"id\"\n> & {\n maxLength?: number;\n} & Omit, \"children\">;\n\nexport function InputField({\n control,\n name,\n label,\n description,\n maxLength,\n disableFieldError = false,\n required,\n ...inputProps\n}: FieldInputProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n
\n \n {maxLength && (\n
\n {(field.value || \"\").length}/{maxLength}\n
\n )}\n
\n )}\n \n );\n}\n"}]},{"name":"rhf-checkbox-field","title":"RHF Checkbox Field","description":"Checkbox field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-checkbox-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/checkbox"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/checkbox-field.tsx","target":"components/ui/rhf-inputs/checkbox-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { Checkbox } from \"../checkbox\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldCheckboxProps = Omit<\n React.ComponentProps,\n \"checked\" | \"onCheckedChange\" | \"id\"\n> &\n Omit, \"children\" | \"layout\"> & {\n orientation?: \"vertical\" | \"horizontal\";\n };\n\nexport function CheckboxField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n orientation = \"horizontal\",\n required,\n ...checkboxProps\n}: FieldCheckboxProps) {\n return (\n \n {({ field, ariaDescribedBy }) => (\n \n )}\n \n );\n}\n"}]},{"name":"rhf-select-field","title":"RHF Select Field","description":"Select field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-select-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/select"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/select-field.tsx","target":"components/ui/rhf-inputs/select-field.tsx","type":"registry:ui","content":"import { ReactNode, RefAttributes } from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"../select\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\nconst EMPTY_SELECT_VALUE = \"\";\n\ntype SelectOption = {\n value: string;\n label: string;\n leading?: ReactNode;\n};\n\ntype FieldSelectProps = {\n placeholder?: string;\n onValueChange?: (value: string | null) => void;\n selectProps?: React.ComponentProps;\n triggerProps?: React.ComponentProps &\n RefAttributes & {\n size?: \"sm\" | \"default\";\n };\n} & Omit, \"children\"> &\n (\n | {\n options: SelectOption[];\n children?: never;\n }\n | {\n options?: never;\n children: ReactNode;\n }\n );\n\nexport function SelectField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n options,\n placeholder,\n onValueChange,\n triggerProps,\n children,\n required,\n ...selectProps\n}: FieldSelectProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n return (\n {\n field.onChange(value);\n onValueChange?.(value);\n }}\n {...selectProps}\n >\n \n {placeholder &&\n (field.value === EMPTY_SELECT_VALUE ||\n field.value === undefined ||\n field.value === null) ? (\n {placeholder}\n ) : (\n \n )}\n \n \n {placeholder && (\n \n {placeholder}\n \n )}\n {options\n ? options.map((option) => {\n return (\n \n {option.leading ? (\n \n {option.leading}\n {option.label}\n \n ) : (\n option.label\n )}\n \n );\n })\n : children}\n \n \n );\n }}\n \n );\n}\n"}]},{"name":"rhf-textarea-field","title":"RHF Textarea Field","description":"Textarea field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-textarea-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/textarea"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/textarea-field.tsx","target":"components/ui/rhf-inputs/textarea-field.tsx","type":"registry:ui","content":"import { FieldValues } from \"react-hook-form\";\nimport { Textarea } from \"../textarea\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldTextareaProps = Omit<\n React.TextareaHTMLAttributes,\n \"name\" | \"id\"\n> & {\n maxLength?: number;\n} & Omit, \"children\">;\n\nexport function TextareaField({\n control,\n name,\n label,\n description,\n maxLength,\n disableFieldError = false,\n required,\n ...textareaProps\n}: FieldTextareaProps & { required?: boolean }) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n
\n \n {maxLength && (\n
\n {(field.value || \"\").length}/{maxLength}\n
\n )}\n
\n )}\n \n );\n}\n"}]},{"name":"rhf-radio-group-field","title":"RHF Radio Group Field","description":"Radio group field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-radio-group-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/radio-group","https://pb-ui-five.vercel.app/registry/label"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/radio-group-field.tsx","target":"components/ui/rhf-inputs/radio-group-field.tsx","type":"registry:ui","content":"import { FieldValues } from \"react-hook-form\";\nimport { Label } from \"../label\";\nimport { RadioGroup, RadioGroupItem } from \"../radio-group\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype RadioOption = {\n value: string;\n label: string;\n disabled?: boolean;\n};\n\ntype FieldRadioGroupProps = Omit<\n React.ComponentProps,\n \"value\" | \"onValueChange\"\n> &\n Omit, \"children\"> & {\n options: RadioOption[];\n };\n\nexport function RadioGroupField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n options,\n required,\n ...radioGroupProps\n}: FieldRadioGroupProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n \n {options.map((option) => (\n
\n \n \n {option.label}\n \n
\n ))}\n \n )}\n \n );\n}\n"}]},{"name":"rhf-slider-field","title":"RHF Slider Field","description":"Slider field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-slider-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/slider"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/slider-field.tsx","target":"components/ui/rhf-inputs/slider-field.tsx","type":"registry:ui","content":"import { FieldValues } from \"react-hook-form\";\nimport { Slider } from \"../slider\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldSliderProps = Omit<\n React.ComponentProps,\n \"value\" | \"onValueChange\"\n> &\n Omit, \"children\"> & {\n showValue?: boolean;\n valueFormatter?: (value: number) => string;\n };\n\nexport function SliderField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n showValue = false,\n valueFormatter,\n required,\n ...sliderProps\n}: FieldSliderProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n // Base UI Slider requires a valid number array.\n // Fallback to min (or 0) when field value is undefined.\n const min = sliderProps.min ?? 0;\n const sliderValue = field.value ?? min;\n\n return (\n
\n {\n // Base UI can return number or number[] depending on how it's set\n const actualValue = Array.isArray(newValue)\n ? newValue[0]\n : newValue;\n field.onChange(actualValue);\n }}\n aria-invalid={!!fieldState.error}\n aria-describedby={ariaDescribedBy}\n />\n {showValue && (\n
\n {valueFormatter ? valueFormatter(sliderValue) : sliderValue}\n
\n )}\n
\n );\n }}\n \n );\n}\n"}]},{"name":"rhf-switch-field","title":"RHF Switch Field","description":"Switch field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-switch-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/field","https://pb-ui-five.vercel.app/registry/switch"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/switch-field.tsx","target":"components/ui/rhf-inputs/switch-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { Control, Controller, FieldPath, FieldValues } from \"react-hook-form\";\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldError,\n FieldLabel,\n} from \"../field\";\nimport { Switch } from \"../switch\";\n\ntype FieldSwitchProps = Omit<\n React.ComponentProps,\n \"checked\" | \"onCheckedChange\"\n> & {\n control: Control;\n name: FieldPath;\n label?: string;\n description?: string;\n disableFieldError?: boolean;\n required?: boolean;\n};\n\nexport function SwitchField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n ...switchProps\n}: FieldSwitchProps) {\n return (\n (\n \n
\n {label && (\n \n {label}\n {required && (\n \n *\n \n )}\n \n )}\n {description && {description}}\n
\n \n \n \n {!disableFieldError && fieldState.invalid && (\n \n )}\n \n )}\n />\n );\n}\n"}]},{"name":"rhf-password-field","title":"RHF Password Field","description":"Password input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-password-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/password-input"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/password-field.tsx","target":"components/ui/rhf-inputs/password-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { InputHTMLAttributes } from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport PasswordInput from \"../password-input\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldInputProps = Omit<\n InputHTMLAttributes,\n \"name\" | \"id\"\n> &\n Omit, \"children\">;\n\nexport function PasswordField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n ...inputProps\n}: FieldInputProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n \n )}\n \n );\n}\n"}]},{"name":"rhf-input-with-tag-field","title":"RHF Input with Tag Field","description":"Tag input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-input-with-tag-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/tag-input"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/input-with-tag-field.tsx","target":"components/ui/rhf-inputs/input-with-tag-field.tsx","type":"registry:ui","content":"import { FieldValues } from \"react-hook-form\";\nimport { TagInput } from \"../tag-input\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype Props = {\n placeholder?: string;\n showClear?: boolean;\n} & Omit, \"children\">;\n\nexport function InputWithTagField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n placeholder,\n required,\n showClear,\n}: Props) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n field.onChange(newTags)}\n showClear={showClear}\n aria-invalid={!!fieldState.error}\n aria-describedby={ariaDescribedBy}\n />\n )}\n \n );\n}\n"}]},{"name":"rhf-multi-select-field","title":"RHF Multi Select Field","description":"Multi select field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-multi-select-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/multi-select"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/multi-select-field.tsx","target":"components/ui/rhf-inputs/multi-select-field.tsx","type":"registry:ui","content":"import { FieldValues } from \"react-hook-form\";\nimport { MultiSelect, OptionType } from \"../multi-select\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldSelectProps = {\n placeholder?: string;\n options: OptionType[];\n grouped?: boolean;\n disabled?: boolean;\n showClear?: boolean;\n onChange?: (values: string[]) => void;\n} & Omit, \"children\">;\n\nexport function MultiSelectField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n options,\n grouped,\n placeholder,\n disabled,\n showClear,\n onChange,\n}: FieldSelectProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n {\n field.onChange(values);\n onChange?.(values);\n }}\n placeholder={placeholder}\n invalid={!!fieldState.error}\n grouped={grouped}\n disabled={disabled}\n showClear={showClear}\n aria-describedby={ariaDescribedBy}\n />\n )}\n \n );\n}\n"}]},{"name":"rhf-input-date-field","title":"RHF Input Date Field","description":"Date input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-input-date-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/datefield-rac"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/input-date-field.tsx","target":"components/ui/rhf-inputs/input-date-field.tsx","type":"registry:ui","content":"import {\n getLocalTimeZone,\n parseDate,\n parseDateTime,\n} from \"@internationalized/date\";\nimport { format } from \"date-fns\";\nimport { DateFieldProps, DateValue } from \"react-aria-components\";\nimport { FieldValues } from \"react-hook-form\";\nimport { DateField, DateInput, DateInputProps } from \"../datefield-rac\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FieldInputProps = Omit<\n BaseControllerProps,\n \"children\"\n> &\n Omit, \"value\" | \"onChange\" | \"children\"> & {\n defaultValue?: Date | string;\n } & Pick;\n\ntype DateLike = Date | string | null | undefined;\n\nfunction toDateValue(value: DateLike): DateValue | undefined {\n if (!value) return undefined;\n if (value instanceof Date) {\n const dateString = format(value, \"yyyy-MM-dd\");\n return parseDate(dateString);\n }\n if (typeof value === \"string\") {\n try {\n return parseDate(value);\n } catch {\n try {\n return parseDateTime(value);\n } catch {\n return undefined;\n }\n }\n }\n return undefined;\n}\n\nexport function InputDateField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n className,\n required,\n ...inputProps\n}: FieldInputProps) {\n const { defaultValue, ...restInputProps } = inputProps;\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n const resolvedValue = toDateValue(field.value as DateLike);\n const resolvedDefaultValue = toDateValue(defaultValue);\n\n return (\n {\n if (!nextValue) {\n field.onChange(undefined);\n return;\n }\n\n const timeZone = getLocalTimeZone();\n field.onChange(nextValue.toDate(timeZone));\n }}\n {...restInputProps}\n >\n \n \n );\n }}\n \n );\n}\n"}]},{"name":"rhf-date-picker-field","title":"RHF Date Picker Field","description":"Date picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-date-picker-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/calendar","https://pb-ui-five.vercel.app/registry/popover","https://pb-ui-five.vercel.app/registry/button"],"dependencies":["react-hook-form","date-fns"],"files":[{"path":"components/ui/rhf-inputs/date-picker-field.tsx","target":"components/ui/rhf-inputs/date-picker-field.tsx","type":"registry:ui","content":"import { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { FieldValues } from \"react-hook-form\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { Calendar } from \"../calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype DatePickerFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n placeholder?: string;\n formatString?: string;\n calendarProps?: React.ComponentProps;\n buttonProps?: React.ComponentProps;\n};\n\nexport function DatePickerField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n placeholder = \"Pick a date\",\n formatString,\n calendarProps,\n buttonProps,\n}: DatePickerFieldProps) {\n const formatter = React.useMemo(\n () =>\n new Intl.DateTimeFormat(\"it-IT\", {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"numeric\",\n }),\n [],\n );\n const {\n className: buttonClassName,\n variant,\n ...restButtonProps\n } = buttonProps ?? {};\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n \n \n }\n >\n \n {field.value ? (\n formatString ? (\n format(field.value as Date, formatString)\n ) : (\n formatter.format(field.value as Date)\n )\n ) : (\n {placeholder}\n )}\n \n \n field.onChange(date ?? undefined)}\n />\n \n \n )}\n \n );\n}\n"}]},{"name":"rhf-date-time-picker-field","title":"RHF Date Time Picker Field","description":"Date and time picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-date-time-picker-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/calendar","https://pb-ui-five.vercel.app/registry/popover","https://pb-ui-five.vercel.app/registry/button","https://pb-ui-five.vercel.app/registry/input"],"dependencies":["react-hook-form","date-fns"],"files":[{"path":"components/ui/rhf-inputs/date-time-picker-field.tsx","target":"components/ui/rhf-inputs/date-time-picker-field.tsx","type":"registry:ui","content":"import { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { FieldValues } from \"react-hook-form\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { Calendar } from \"../calendar\";\nimport { Input } from \"../input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype DateTimePickerFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n placeholder?: string;\n formatString?: string;\n calendarProps?: React.ComponentProps;\n buttonProps?: React.ComponentProps;\n timeInputProps?: Omit<\n React.ComponentProps,\n \"id\" | \"name\" | \"type\" | \"value\" | \"onChange\" | \"onBlur\" | \"disabled\"\n >;\n showSeconds?: boolean;\n};\n\nfunction normalizeTimeValue(value: string, showSeconds: boolean) {\n if (!value) return value;\n if (!showSeconds) return value;\n if (/^\\d{2}:\\d{2}$/.test(value)) return `${value}:00`;\n return value;\n}\n\nfunction applyTimeToDate(baseDate: Date, timeValue: string) {\n const [hours = \"0\", minutes = \"0\", seconds = \"0\"] = timeValue.split(\":\");\n const nextDate = new Date(baseDate);\n nextDate.setHours(Number(hours), Number(minutes), Number(seconds), 0);\n return nextDate;\n}\n\nexport function DateTimePickerField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n placeholder = \"Pick a date & time\",\n formatString,\n calendarProps,\n buttonProps,\n timeInputProps,\n showSeconds = false,\n}: DateTimePickerFieldProps) {\n const formatter = new Intl.DateTimeFormat(\"it-IT\", {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"numeric\",\n });\n const {\n className: buttonClassName,\n variant,\n ...restButtonProps\n } = buttonProps ?? {};\n const {\n className: timeInputClassName,\n step,\n ...restTimeInputProps\n } = timeInputProps ?? {};\n const timeFormat = showSeconds ? \"HH:mm:ss\" : \"HH:mm\";\n const resolvedStep =\n typeof step === \"number\" ? step : showSeconds ? 1 : undefined;\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n const dateValue = field.value as Date | undefined;\n const hasValue = Boolean(dateValue);\n const timeValue = dateValue ? format(dateValue, timeFormat) : \"\";\n const displayValue = dateValue\n ? formatString\n ? format(dateValue, formatString)\n : `${formatter.format(dateValue)} ${format(dateValue, timeFormat)}`\n : null;\n\n return (\n \n \n }\n >\n \n {displayValue ? (\n {displayValue}\n ) : (\n {placeholder}\n )}\n \n \n
\n {\n if (!selectedDate) {\n field.onChange(undefined);\n return;\n }\n\n const nextDate = applyTimeToDate(\n selectedDate,\n timeValue || \"00:00:00\",\n );\n field.onChange(nextDate);\n }}\n />\n
\n \n Time\n \n {\n field.onBlur();\n\n const normalizedValue = normalizeTimeValue(\n timeValue,\n showSeconds,\n );\n if (!normalizedValue) {\n field.onChange(undefined);\n return;\n }\n\n if (dateValue) {\n field.onChange(\n applyTimeToDate(dateValue, normalizedValue),\n );\n }\n }}\n onChange={(event) => {\n const nextInputValue = event.target.value;\n if (!nextInputValue) {\n field.onChange(undefined);\n return;\n }\n\n if (!dateValue) return;\n\n field.onChange(\n applyTimeToDate(dateValue, nextInputValue),\n );\n }}\n step={resolvedStep}\n className={timeInputClassName}\n {...restTimeInputProps}\n />\n
\n
\n \n \n );\n }}\n \n );\n}\n"}]},{"name":"rhf-range-date-picker-field","title":"RHF Range Date Picker Field","description":"Range date picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-range-date-picker-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/calendar","https://pb-ui-five.vercel.app/registry/popover","https://pb-ui-five.vercel.app/registry/button"],"dependencies":["react-hook-form","date-fns"],"files":[{"path":"components/ui/rhf-inputs/range-date-picker-field.tsx","target":"components/ui/rhf-inputs/range-date-picker-field.tsx","type":"registry:ui","content":"import { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { DateRange } from \"react-day-picker\";\nimport { FieldValues } from \"react-hook-form\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\nimport { Calendar } from \"../calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype RangeDatePickerFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n placeholder?: string;\n formatString?: string;\n calendarProps?: React.ComponentProps;\n buttonProps?: React.ComponentProps;\n};\n\nexport function RangeDatePickerField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n placeholder = \"Pick a date range\",\n formatString,\n calendarProps,\n buttonProps,\n}: RangeDatePickerFieldProps) {\n const formatter = React.useMemo(\n () =>\n new Intl.DateTimeFormat(\"it-IT\", {\n day: \"2-digit\",\n month: \"2-digit\",\n year: \"numeric\",\n }),\n [],\n );\n const {\n className: buttonClassName,\n variant,\n ...restButtonProps\n } = buttonProps ?? {};\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n const range = field.value as DateRange | undefined;\n const hasValue = Boolean(range?.from);\n const display = range?.from\n ? range.to\n ? formatString\n ? `${format(range.from, formatString)} - ${format(range.to, formatString)}`\n : `${formatter.format(range.from)} - ${formatter.format(range.to)}`\n : formatString\n ? format(range.from, formatString)\n : formatter.format(range.from)\n : null;\n\n return (\n \n \n }\n >\n \n {display ? {display} : {placeholder}}\n \n \n field.onChange(nextRange ?? undefined)}\n />\n \n \n );\n }}\n \n );\n}\n"}]},{"name":"rhf-time-picker-field","title":"RHF Time Picker Field","description":"Time picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-time-picker-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/input"],"dependencies":["react-hook-form","date-fns"],"files":[{"path":"components/ui/rhf-inputs/time-picker-field.tsx","target":"components/ui/rhf-inputs/time-picker-field.tsx","type":"registry:ui","content":"\"use client\";\nimport { InputHTMLAttributes } from \"react\";\nimport { ControllerFieldState, FieldValues } from \"react-hook-form\";\n\nimport { Input } from \"../input\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype TimePickerFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> &\n Omit, \"name\" | \"id\" | \"type\"> & {\n showSeconds?: boolean;\n };\n\nfunction normalizeTimeValue(value: string, showSeconds: boolean) {\n if (!value) return value;\n if (!showSeconds) return value;\n if (/^\\d{2}:\\d{2}$/.test(value)) return `${value}:00`;\n return value;\n}\n\nexport function TimePickerField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n showSeconds = false,\n ...inputProps\n}: TimePickerFieldProps) {\n const { step, ...restInputProps } = inputProps;\n const resolvedStep =\n typeof step === \"number\" ? step : showSeconds ? 1 : undefined;\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n \n )}\n \n );\n}\n\ntype TimePickerInputProps = {\n name: string;\n value: T[keyof T] | undefined;\n onBlur: () => void;\n onChange: (value: string | undefined) => void;\n fieldState: ControllerFieldState;\n required?: boolean;\n showSeconds: boolean;\n step?: number;\n inputProps: Omit<\n InputHTMLAttributes,\n \"name\" | \"id\" | \"type\"\n >;\n ariaDescribedBy?: string;\n};\n\nfunction TimePickerInput({\n name,\n value: fieldValue,\n onBlur,\n onChange,\n fieldState,\n required,\n showSeconds,\n step,\n inputProps,\n ariaDescribedBy,\n}: TimePickerInputProps) {\n const rawValue = fieldValue as unknown;\n const value = typeof rawValue === \"string\" ? rawValue : \"\";\n const inputValue = value;\n\n return (\n {\n onBlur();\n\n const normalizedValue = normalizeTimeValue(inputValue, showSeconds);\n if (!normalizedValue) {\n onChange(undefined);\n return;\n }\n\n onChange(normalizedValue);\n }}\n onChange={(event) => {\n const nextInputValue = event.target.value;\n if (!nextInputValue) {\n onChange(undefined);\n return;\n }\n\n onChange(nextInputValue);\n }}\n step={step}\n {...inputProps}\n />\n );\n}\n"}]},{"name":"rhf-file-upload-field","title":"RHF File Upload Field","description":"File upload field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-file-upload-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/file-upload"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/file-upload-field.tsx","target":"components/ui/rhf-inputs/file-upload-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { FileUpload, FileUploadProps } from \"../file-upload\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype FileUploadFieldProps = Omit<\n FileUploadProps,\n \"onFileSelect\" | \"error\" | \"label\" | \"description\" | \"required\"\n> &\n Omit, \"children\">;\n\nexport function FileUploadField({\n control,\n name,\n label,\n description,\n disableFieldError = false,\n required,\n ...fileUploadProps\n}: FileUploadFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n {\n field.onChange(file);\n }}\n />\n )}\n \n );\n}\n"}]},{"name":"number-input","title":"Number Input","description":"Numeric input with increment/decrement controls.","type":"registry:ui","docs":"/components/number-input","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/button","https://pb-ui-five.vercel.app/registry/input"],"files":[{"path":"components/ui/number-input.tsx","target":"components/ui/number-input.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\n\nexport type NumberInputProps = Omit<\n React.InputHTMLAttributes,\n \"type\" | \"value\" | \"onChange\"\n> & {\n value?: number | null;\n onChange?: (value: number | null) => void;\n min?: number;\n max?: number;\n step?: number;\n showControls?: boolean;\n /** Allow decimal numbers. When false, only integers are allowed. */\n allowDecimals?: boolean;\n /** Maximum number of decimal places. Only applies when allowDecimals is true. */\n decimalPlaces?: number;\n /** Locale for decimal separator detection. Defaults to browser locale. */\n locale?: string;\n};\n\nfunction NumberInput({\n value,\n onChange,\n min,\n max,\n step = 1,\n showControls = true,\n allowDecimals = false,\n decimalPlaces,\n locale,\n disabled,\n className,\n ...props\n}: NumberInputProps) {\n // Get the decimal separator for the locale (defaults to browser locale)\n const decimalSeparator = React.useMemo(() => {\n const parts = new Intl.NumberFormat(locale).formatToParts(1.1);\n return parts.find((part) => part.type === \"decimal\")?.value ?? \".\";\n }, [locale]);\n\n // Format a number for display\n const formatValue = React.useCallback(\n (val: number) => {\n let formatted: string;\n if (allowDecimals && decimalPlaces !== undefined) {\n formatted = val.toFixed(decimalPlaces);\n } else {\n // Use enough precision to represent the number accurately\n formatted = String(val);\n }\n // Replace standard decimal separator with locale-specific one\n if (decimalSeparator !== \".\") {\n formatted = formatted.replace(\".\", decimalSeparator);\n }\n return formatted;\n },\n [allowDecimals, decimalPlaces, decimalSeparator],\n );\n\n // Parse input string to number, handling locale decimal separator\n const parseInput = React.useCallback(\n (input: string): number | null => {\n if (input === \"\" || input === \"-\") return null;\n // Normalize: replace locale decimal separator with standard dot\n let normalized = input;\n if (decimalSeparator !== \".\") {\n normalized = normalized.replace(decimalSeparator, \".\");\n }\n // Also accept dot as input even if locale uses comma\n normalized = normalized.replace(\",\", \".\");\n const parsed = parseFloat(normalized);\n return isNaN(parsed) ? null : parsed;\n },\n [decimalSeparator],\n );\n\n // Clamp and round value according to constraints\n const clampValue = React.useCallback(\n (val: number): number => {\n let result = val;\n if (min != null && result < min) result = min;\n if (max != null && result > max) result = max;\n if (!allowDecimals) {\n result = Math.round(result);\n } else if (decimalPlaces !== undefined) {\n const factor = Math.pow(10, decimalPlaces);\n result = Math.round(result * factor) / factor;\n }\n return result;\n },\n [min, max, allowDecimals, decimalPlaces],\n );\n\n const [inputValue, setInputValue] = React.useState(\n value != null ? formatValue(value) : \"\",\n );\n\n // Track focus state to prevent reformatting while typing\n const isFocusedRef = React.useRef(false);\n const prevValueRef = React.useRef(value);\n\n React.useEffect(() => {\n // Only update from external value when NOT focused\n // This prevents reformatting while the user is typing\n if (!isFocusedRef.current && value !== prevValueRef.current) {\n setInputValue(value != null ? formatValue(value) : \"\");\n prevValueRef.current = value;\n }\n }, [value, formatValue]);\n\n const handleFocus = () => {\n isFocusedRef.current = true;\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const raw = e.target.value;\n\n // Allow free typing - only filter obvious garbage\n // Allow: digits, minus sign, dot, comma (for locale flexibility)\n const isValidChar = /^-?[\\d.,]*$/.test(raw);\n if (!isValidChar && raw !== \"\") return;\n\n // If decimals not allowed, prevent typing decimal separators\n if (!allowDecimals && (raw.includes(\".\") || raw.includes(\",\"))) {\n return;\n }\n\n setInputValue(raw);\n\n // Parse and notify parent (without clamping during typing)\n const parsed = parseInput(raw);\n if (parsed !== null) {\n onChange?.(parsed);\n } else if (raw === \"\" || raw === \"-\") {\n onChange?.(null);\n }\n };\n\n const handleBlur = () => {\n isFocusedRef.current = false;\n\n if (value != null) {\n // Clamp and format on blur\n const clamped = clampValue(value);\n setInputValue(formatValue(clamped));\n prevValueRef.current = clamped;\n if (clamped !== value) {\n onChange?.(clamped);\n }\n } else {\n setInputValue(\"\");\n }\n };\n\n const increment = () => {\n const current = value ?? 0;\n const newValue = clampValue(current + step);\n onChange?.(newValue);\n setInputValue(formatValue(newValue));\n prevValueRef.current = newValue;\n };\n\n const decrement = () => {\n const current = value ?? 0;\n const newValue = clampValue(current - step);\n onChange?.(newValue);\n setInputValue(formatValue(newValue));\n prevValueRef.current = newValue;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (canIncrement) increment();\n } else if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (canDecrement) decrement();\n }\n };\n\n const canIncrement = max == null || (value ?? 0) < max;\n const canDecrement = min == null || (value ?? 0) > min;\n\n return (\n
\n {showControls && (\n \n \n \n )}\n \n {showControls && (\n \n \n \n )}\n
\n );\n}\n\nexport { NumberInput };\n"}]},{"name":"input-otp","title":"Input OTP","description":"One-time password input with segmented fields.","type":"registry:ui","docs":"/components/input-otp","categories":["forms"],"dependencies":["input-otp"],"files":[{"path":"components/ui/input-otp.tsx","target":"components/ui/input-otp.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/lib/utils\"\nimport { MinusIcon } from \"lucide-react\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps & {\n containerClassName?: string\n}) {\n return (\n \n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n \n {char}\n {hasFakeCaret && (\n
\n
\n
\n )}\n
\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n \n \n \n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"}]},{"name":"color-picker","title":"Color Picker","description":"Color selection with visual swatch and hex input.","type":"registry:ui","docs":"/components/color-picker","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/input"],"files":[{"path":"components/ui/color-picker.tsx","target":"components/ui/color-picker.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Input } from \"./input\";\n\nexport type ColorPickerProps = Omit<\n React.InputHTMLAttributes,\n \"type\" | \"value\" | \"onChange\"\n> & {\n value?: string;\n onChange?: (value: string) => void;\n showInput?: boolean;\n};\n\nfunction ColorPicker({\n value = \"#000000\",\n onChange,\n showInput = true,\n disabled,\n className,\n ...props\n}: ColorPickerProps) {\n const [inputValue, setInputValue] = React.useState(value);\n\n React.useEffect(() => {\n setInputValue(value);\n }, [value]);\n\n const handleColorChange = (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n onChange?.(newValue);\n };\n\n const handleTextChange = (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n setInputValue(newValue);\n\n // Only trigger onChange if it's a valid hex color\n if (/^#[0-9A-Fa-f]{6}$/.test(newValue)) {\n onChange?.(newValue);\n }\n };\n\n const handleBlur = () => {\n // Normalize to valid hex on blur\n if (!/^#[0-9A-Fa-f]{6}$/.test(inputValue)) {\n setInputValue(value);\n }\n };\n\n return (\n
\n
\n \n
\n {showInput && (\n \n )}\n
\n );\n}\n\nexport { ColorPicker };\n"}]},{"name":"rating","title":"Rating","description":"Star rating component with hover preview.","type":"registry:ui","docs":"/components/rating","categories":["forms","data-entry"],"files":[{"path":"components/ui/rating.tsx","target":"components/ui/rating.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\n\nconst sizeClasses = {\n sm: \"size-4\",\n default: \"size-5\",\n lg: \"size-6\",\n};\n\nexport type RatingProps = {\n value?: number;\n onChange?: (value: number) => void;\n max?: number;\n disabled?: boolean;\n readOnly?: boolean;\n size?: \"sm\" | \"default\" | \"lg\";\n allowHalf?: boolean;\n className?: string;\n \"aria-label\"?: string;\n \"aria-invalid\"?: boolean;\n};\n\nconst StarIcon = ({\n isFilled,\n isHalfFilled,\n size,\n className,\n}: {\n isFilled: boolean;\n isHalfFilled: boolean;\n size: string;\n className?: string;\n}) => {\n return (\n
\n {/* Empty star background */}\n \n \n \n {/* Filled/Half-filled star overlay */}\n \n \n \n
\n );\n};\n\nfunction Rating({\n value = 0,\n onChange,\n max = 5,\n disabled = false,\n readOnly = false,\n allowHalf = false,\n size = \"default\",\n className,\n \"aria-label\": ariaLabel = \"Rating\",\n \"aria-invalid\": ariaInvalid,\n ...props\n}: RatingProps) {\n const [hoverValue, setHoverValue] = React.useState(null);\n const displayValue = hoverValue ?? value;\n\n const handleMouseMove = (\n e: React.MouseEvent,\n index: number,\n ) => {\n if (disabled || readOnly) return;\n\n if (allowHalf) {\n const { left, width } = e.currentTarget.getBoundingClientRect();\n const percent = (e.clientX - left) / width;\n const newValue = index + (percent > 0.5 ? 1 : 0.5);\n setHoverValue(newValue);\n } else {\n setHoverValue(index + 1);\n }\n };\n\n const handleClick = (rating: number) => {\n if (disabled || readOnly) return;\n onChange?.(rating);\n };\n\n const handleMouseLeave = () => {\n setHoverValue(null);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent, rating: number) => {\n if (disabled || readOnly) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onChange?.(rating);\n }\n };\n\n // Clean up rating logic for rendering\n const renderStars = () => {\n return Array.from({ length: max }, (_, index) => {\n const starValue = index + 1;\n const isFilled = displayValue >= starValue;\n const isHalfFilled =\n allowHalf && !isFilled && displayValue >= starValue - 0.5;\n\n return (\n handleClick(hoverValue ?? starValue)}\n onMouseMove={(e) => handleMouseMove(e, index)}\n onKeyDown={(e) => handleKeyDown(e, starValue)}\n className={cn(\n \"p-0.5 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 transition-transform\",\n !disabled && !readOnly && \"cursor-pointer hover:scale-110\",\n disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n \n \n );\n });\n };\n\n return (\n \n {renderStars()}\n \n );\n}\n\nexport { Rating };\n"}]},{"name":"rhf-combobox-field","title":"RHF Combobox Field","description":"Searchable combobox field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-combobox-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/combobox"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/combobox-field.tsx","target":"components/ui/rhf-inputs/combobox-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport {\n Combobox,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n} from \"../combobox\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\nexport type ComboboxOption = {\n value: string;\n label: string;\n disabled?: boolean;\n};\n\nexport type ComboboxOptionGroup = {\n label: string;\n options: ComboboxOption[];\n};\n\ntype ComboboxFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n options: (ComboboxOption | ComboboxOptionGroup)[];\n placeholder?: string;\n emptyMessage?: string;\n disabled?: boolean;\n showClear?: boolean;\n className?: string;\n};\n\nfunction isOptionGroup(\n option: ComboboxOption | ComboboxOptionGroup,\n): option is ComboboxOptionGroup {\n return \"options\" in option;\n}\n\nexport function ComboboxField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n options,\n placeholder = \"Search...\",\n emptyMessage = \"No options found.\",\n disabled = false,\n showClear = true,\n className,\n}: ComboboxFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n field.onChange(value)}\n disabled={disabled}\n >\n \n \n \n {emptyMessage}\n {options.map((option, index) =>\n isOptionGroup(option) ? (\n \n {option.label}\n {option.options.map((opt) => (\n \n {opt.label}\n \n ))}\n \n ) : (\n \n {option.label}\n \n ),\n )}\n \n \n \n )}\n \n );\n}\n"}]},{"name":"rhf-number-field","title":"RHF Number Field","description":"Numeric input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-number-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/number-input"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/number-field.tsx","target":"components/ui/rhf-inputs/number-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { NumberInput, NumberInputProps } from \"../number-input\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype NumberFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> &\n Omit;\n\nexport function NumberField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n min,\n max,\n step,\n showControls,\n allowDecimals,\n decimalPlaces,\n locale,\n disabled,\n className,\n ...inputProps\n}: NumberFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n field.onChange(value)}\n min={min}\n max={max}\n step={step}\n showControls={showControls}\n allowDecimals={allowDecimals}\n decimalPlaces={decimalPlaces}\n locale={locale}\n disabled={disabled}\n aria-invalid={!!fieldState.error}\n aria-required={required}\n aria-describedby={ariaDescribedBy}\n className={className}\n {...inputProps}\n />\n )}\n \n );\n}\n"}]},{"name":"rhf-otp-field","title":"RHF OTP Field","description":"OTP/PIN input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-otp-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/input-otp"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/otp-field.tsx","target":"components/ui/rhf-inputs/otp-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"../input-otp\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype OTPFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n /** Number of OTP digits */\n length?: number;\n /** Pattern for input validation (e.g., /^[0-9]*$/) */\n pattern?: RegExp;\n disabled?: boolean;\n className?: string;\n};\n\nexport function OTPField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n length = 6,\n pattern,\n disabled = false,\n className,\n}: OTPFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n field.onChange(value)}\n disabled={disabled}\n pattern={pattern?.source}\n aria-invalid={!!fieldState.error}\n aria-describedby={ariaDescribedBy}\n className={className}\n >\n \n {Array.from({ length }, (_, index) => (\n \n ))}\n \n \n )}\n \n );\n}\n"}]},{"name":"rhf-checkbox-group-field","title":"RHF Checkbox Group Field","description":"Multiple checkboxes as array with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-checkbox-group-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/checkbox","https://pb-ui-five.vercel.app/registry/label"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/checkbox-group-field.tsx","target":"components/ui/rhf-inputs/checkbox-group-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { Checkbox } from \"../checkbox\";\nimport { Label } from \"../label\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\nexport type CheckboxGroupOption = {\n value: string;\n label: string;\n disabled?: boolean;\n};\n\ntype CheckboxGroupFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n options: CheckboxGroupOption[];\n orientation?: \"horizontal\" | \"vertical\";\n disabled?: boolean;\n className?: string;\n};\n\nexport function CheckboxGroupField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n options,\n orientation = \"vertical\",\n disabled = false,\n className,\n}: CheckboxGroupFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n const values: string[] = Array.isArray(field.value) ? field.value : [];\n\n const handleChange = (optionValue: string, checked: boolean) => {\n if (checked) {\n field.onChange([...values, optionValue]);\n } else {\n field.onChange(values.filter((v) => v !== optionValue));\n }\n };\n\n return (\n \n {options.map((option) => (\n
\n \n handleChange(option.value, !!checked)\n }\n disabled={disabled || option.disabled}\n aria-invalid={!!fieldState.error}\n />\n \n {option.label}\n \n
\n ))}\n \n );\n }}\n \n );\n}\n"}]},{"name":"rhf-phone-field","title":"RHF Phone Field","description":"Phone input with country code and React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-phone-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/input","https://pb-ui-five.vercel.app/registry/select"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/phone-field.tsx","target":"components/ui/rhf-inputs/phone-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport { Input } from \"../input\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"../select\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\n// Common country codes with their dial codes\nconst DEFAULT_COUNTRIES = [\n { code: \"US\", dialCode: \"+1\", name: \"United States\" },\n { code: \"GB\", dialCode: \"+44\", name: \"United Kingdom\" },\n { code: \"DE\", dialCode: \"+49\", name: \"Germany\" },\n { code: \"FR\", dialCode: \"+33\", name: \"France\" },\n { code: \"IT\", dialCode: \"+39\", name: \"Italy\" },\n { code: \"ES\", dialCode: \"+34\", name: \"Spain\" },\n { code: \"NL\", dialCode: \"+31\", name: \"Netherlands\" },\n { code: \"BE\", dialCode: \"+32\", name: \"Belgium\" },\n { code: \"CH\", dialCode: \"+41\", name: \"Switzerland\" },\n { code: \"AT\", dialCode: \"+43\", name: \"Austria\" },\n { code: \"AU\", dialCode: \"+61\", name: \"Australia\" },\n { code: \"CA\", dialCode: \"+1\", name: \"Canada\" },\n { code: \"JP\", dialCode: \"+81\", name: \"Japan\" },\n { code: \"CN\", dialCode: \"+86\", name: \"China\" },\n { code: \"IN\", dialCode: \"+91\", name: \"India\" },\n { code: \"BR\", dialCode: \"+55\", name: \"Brazil\" },\n { code: \"MX\", dialCode: \"+52\", name: \"Mexico\" },\n { code: \"KR\", dialCode: \"+82\", name: \"South Korea\" },\n { code: \"RU\", dialCode: \"+7\", name: \"Russia\" },\n { code: \"ZA\", dialCode: \"+27\", name: \"South Africa\" },\n];\n\nexport type Country = {\n code: string;\n dialCode: string;\n name: string;\n};\n\ntype PhoneFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n countries?: Country[];\n defaultCountry?: string;\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n};\n\nexport function PhoneField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n countries = DEFAULT_COUNTRIES,\n defaultCountry = \"US\",\n placeholder = \"Phone number\",\n disabled = false,\n className,\n}: PhoneFieldProps) {\n const [selectedCountry, setSelectedCountry] = React.useState(\n () => countries.find((c) => c.code === defaultCountry) ?? countries[0],\n );\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => {\n // Parse the current value to extract country and number\n const parsePhoneValue = (value: string | undefined) => {\n if (!value) return { dialCode: selectedCountry.dialCode, number: \"\" };\n\n // Find matching country code\n for (const country of countries) {\n if (value.startsWith(country.dialCode)) {\n return {\n dialCode: country.dialCode,\n number: value.slice(country.dialCode.length).trim(),\n };\n }\n }\n return { dialCode: selectedCountry.dialCode, number: value };\n };\n\n const { number } = parsePhoneValue(field.value);\n\n const handleCountryChange = (countryCode: string | null) => {\n if (!countryCode) return;\n const country = countries.find((c) => c.code === countryCode);\n if (country) {\n setSelectedCountry(country);\n // Update the full phone number with new dial code\n if (number) {\n field.onChange(`${country.dialCode}${number}`);\n }\n }\n };\n\n const handleNumberChange = (e: React.ChangeEvent) => {\n const raw = e.target.value.replace(/[^0-9]/g, \"\");\n if (raw) {\n field.onChange(`${selectedCountry.dialCode}${raw}`);\n } else {\n field.onChange(\"\");\n }\n };\n\n return (\n
\n \n \n \n {selectedCountry.dialCode}\n \n \n \n {countries.map((country) => (\n \n \n \n {country.dialCode}\n \n {country.name}\n \n \n ))}\n \n \n \n
\n );\n }}\n \n );\n}\n"}]},{"name":"rhf-currency-field","title":"RHF Currency Field","description":"Currency input with symbol and React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-currency-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/input"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/currency-field.tsx","target":"components/ui/rhf-inputs/currency-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { FieldValues } from \"react-hook-form\";\nimport { Input } from \"../input\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype CurrencyFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> & {\n currency?: string;\n locale?: string;\n min?: number;\n max?: number;\n placeholder?: string;\n disabled?: boolean;\n className?: string;\n allowCents?: boolean;\n};\n\nfunction CurrencyInput({\n value,\n onChange,\n onBlur,\n min,\n max,\n currencySymbol,\n decimalSeparator,\n placeholder,\n disabled,\n id,\n error,\n required,\n allowCents = false,\n formatValue,\n ariaDescribedBy,\n}: {\n value: number | null | undefined;\n onChange: (value: number | null) => void;\n onBlur: () => void;\n min?: number;\n max?: number;\n currencySymbol: string;\n decimalSeparator: string;\n placeholder?: string;\n disabled?: boolean;\n id: string;\n error?: boolean;\n required?: boolean;\n allowCents?: boolean;\n formatValue: (value: number) => string;\n ariaDescribedBy?: string;\n}) {\n const [inputValue, setInputValue] = React.useState(\n value != null ? formatValue(value) : \"\",\n );\n const [isFocused, setIsFocused] = React.useState(false);\n\n React.useEffect(() => {\n if (!isFocused) {\n setInputValue(value != null ? formatValue(value) : \"\");\n }\n }, [value, formatValue, isFocused]);\n\n const handleChange = (e: React.ChangeEvent) => {\n const input = e.target.value;\n\n // Allow digits, minus, and the locale-specific decimal separator\n const escapedSep = decimalSeparator.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n const pattern = allowCents\n ? new RegExp(`[^0-9${escapedSep}-]`, \"g\")\n : /[^0-9-]/g;\n\n const raw = input.replace(pattern, \"\");\n\n // Normalize decimal separator to period for parsing\n const normalized = raw.replace(decimalSeparator, \".\");\n\n setInputValue(raw);\n\n if (normalized === \"\" || normalized === \"-\") {\n onChange(null);\n return;\n }\n\n const parsed = allowCents\n ? parseFloat(normalized)\n : parseInt(normalized, 10);\n if (!isNaN(parsed)) {\n let clamped = parsed;\n if (min != null) clamped = Math.max(min, clamped);\n if (max != null) clamped = Math.min(max, clamped);\n onChange(clamped);\n }\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n // Show raw number when focused for easier editing\n if (value != null) {\n const rawValue = allowCents\n ? String(value).replace(\".\", decimalSeparator)\n : String(value);\n setInputValue(rawValue);\n }\n };\n\n const handleBlurInput = () => {\n setIsFocused(false);\n // Format value on blur\n if (value != null) {\n setInputValue(formatValue(value));\n } else {\n setInputValue(\"\");\n }\n onBlur();\n };\n\n return (\n
\n \n {currencySymbol}\n \n \n
\n );\n}\n\nexport function CurrencyField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n currency = \"USD\",\n locale = \"en-US\",\n min,\n max,\n placeholder,\n disabled = false,\n className,\n allowCents = false,\n}: CurrencyFieldProps) {\n const currencySymbol = React.useMemo(() => {\n return (\n new Intl.NumberFormat(locale, {\n style: \"currency\",\n currency,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n })\n .formatToParts(0)\n .find((part) => part.type === \"currency\")?.value ?? \"$\"\n );\n }, [locale, currency]);\n\n const decimalSeparator = React.useMemo(() => {\n return (\n new Intl.NumberFormat(locale)\n .formatToParts(1.1)\n .find((part) => part.type === \"decimal\")?.value ?? \".\"\n );\n }, [locale]);\n\n const formatValue = React.useCallback(\n (value: number) => {\n return new Intl.NumberFormat(locale, {\n minimumFractionDigits: allowCents ? 2 : 0,\n maximumFractionDigits: allowCents ? 2 : 0,\n }).format(value);\n },\n [locale, allowCents],\n );\n\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n
\n field.onChange(value)}\n onBlur={field.onBlur}\n min={min}\n max={max}\n currencySymbol={currencySymbol}\n decimalSeparator={decimalSeparator}\n placeholder={placeholder}\n disabled={disabled}\n id={field.name}\n error={!!fieldState.error}\n required={required}\n allowCents={allowCents}\n formatValue={formatValue}\n ariaDescribedBy={ariaDescribedBy}\n />\n
\n )}\n \n );\n}\n"}]},{"name":"rhf-color-picker-field","title":"RHF Color Picker Field","description":"Color picker field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-color-picker-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/color-picker"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/color-picker-field.tsx","target":"components/ui/rhf-inputs/color-picker-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { ColorPicker, ColorPickerProps } from \"../color-picker\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype ColorPickerFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> &\n Omit;\n\nexport function ColorPickerField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n showInput,\n disabled,\n className,\n}: ColorPickerFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n field.onChange(value)}\n showInput={showInput}\n disabled={disabled}\n aria-invalid={!!fieldState.error}\n aria-describedby={ariaDescribedBy}\n className={className}\n />\n )}\n \n );\n}\n"}]},{"name":"rhf-rating-field","title":"RHF Rating Field","description":"Star rating field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-rating-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/rating"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/rating-field.tsx","target":"components/ui/rhf-inputs/rating-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { Rating, RatingProps } from \"../rating\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype RatingFieldProps = Omit<\n BaseControllerProps,\n \"children\"\n> &\n Omit;\n\nexport function RatingField({\n control,\n name,\n label,\n description,\n required,\n disableFieldError = false,\n max,\n disabled,\n readOnly,\n allowHalf,\n size,\n className,\n}: RatingFieldProps) {\n return (\n \n {({ field, fieldState, ariaDescribedBy }) => (\n field.onChange(value)}\n max={max}\n disabled={disabled}\n readOnly={readOnly}\n allowHalf={allowHalf}\n size={size}\n aria-invalid={!!fieldState.error}\n aria-describedby={ariaDescribedBy}\n className={className}\n />\n )}\n \n );\n}\n"}]},{"name":"rhf-inputs","title":"React Hook Form Inputs (All)","description":"Complete collection of form field components with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-inputs","categories":["forms","data-entry"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/rhf-input-field","https://pb-ui-five.vercel.app/registry/rhf-checkbox-field","https://pb-ui-five.vercel.app/registry/rhf-checkbox-group-field","https://pb-ui-five.vercel.app/registry/rhf-select-field","https://pb-ui-five.vercel.app/registry/rhf-combobox-field","https://pb-ui-five.vercel.app/registry/rhf-textarea-field","https://pb-ui-five.vercel.app/registry/rhf-radio-group-field","https://pb-ui-five.vercel.app/registry/rhf-slider-field","https://pb-ui-five.vercel.app/registry/rhf-switch-field","https://pb-ui-five.vercel.app/registry/rhf-password-field","https://pb-ui-five.vercel.app/registry/rhf-input-with-tag-field","https://pb-ui-five.vercel.app/registry/rhf-multi-select-field","https://pb-ui-five.vercel.app/registry/rhf-number-field","https://pb-ui-five.vercel.app/registry/rhf-otp-field","https://pb-ui-five.vercel.app/registry/rhf-input-date-field","https://pb-ui-five.vercel.app/registry/rhf-date-picker-field","https://pb-ui-five.vercel.app/registry/rhf-date-time-picker-field","https://pb-ui-five.vercel.app/registry/rhf-range-date-picker-field","https://pb-ui-five.vercel.app/registry/rhf-time-picker-field","https://pb-ui-five.vercel.app/registry/rhf-file-upload-field","https://pb-ui-five.vercel.app/registry/rhf-phone-field","https://pb-ui-five.vercel.app/registry/rhf-currency-field","https://pb-ui-five.vercel.app/registry/rhf-color-picker-field","https://pb-ui-five.vercel.app/registry/rhf-rating-field"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/index.ts","target":"components/ui/rhf-inputs/index.ts","type":"registry:ui","content":"export { BaseController, type BaseControllerProps } from \"./base-controller\";\nexport { CheckboxField } from \"./checkbox-field\";\nexport { CheckboxGroupField, type CheckboxGroupOption } from \"./checkbox-group-field\";\nexport { ColorPickerField } from \"./color-picker-field\";\nexport { ComboboxField, type ComboboxOption, type ComboboxOptionGroup } from \"./combobox-field\";\nexport { CurrencyField } from \"./currency-field\";\nexport { DatePickerField } from \"./date-picker-field\";\nexport { DateTimePickerField } from \"./date-time-picker-field\";\nexport { FileUploadField } from \"./file-upload-field\";\nexport { InputDateField } from \"./input-date-field\";\nexport { InputField } from \"./input-field\";\nexport { InputWithTagField } from \"./input-with-tag-field\";\nexport { MultiSelectField } from \"./multi-select-field\";\nexport { NumberField } from \"./number-field\";\nexport { OTPField } from \"./otp-field\";\nexport { PasswordField } from \"./password-field\";\nexport { PhoneField, type Country } from \"./phone-field\";\nexport { RadioGroupField } from \"./radio-group-field\";\nexport { RangeDatePickerField } from \"./range-date-picker-field\";\nexport { RatingField } from \"./rating-field\";\nexport { SelectField } from \"./select-field\";\nexport { SliderField } from \"./slider-field\";\nexport { SwitchField } from \"./switch-field\";\nexport { TextareaField } from \"./textarea-field\";\nexport { TimePickerField } from \"./time-picker-field\";\n"}]}]}