{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "title": "Select",
  "author": "@fma-ui/ui",
  "description": "A listbox-style picker (react-aria-components' Select) with a trigger, popover, groups, and an optional search input — richer than the native <select> (see native-select for that).",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0",
    "react-aria-components@^1.21.1"
  ],
  "registryDependencies": [
    "@fma-ui/input-group"
  ],
  "files": [
    {
      "path": "src/core/select/select.tsx",
      "content": "import { cn } from \"cn\";\nimport { CheckIcon, ChevronDownIcon, SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n  Button as ButtonPrimitive,\n  composeRenderProps,\n  Header as HeaderPrimitive,\n  ListBoxItem as ListBoxItemPrimitive,\n  ListBox as ListBoxPrimitive,\n  type ListBoxProps,\n  ListBoxSection as ListBoxSectionPrimitive,\n  Popover as PopoverPrimitive,\n  SearchField,\n  type SearchFieldProps,\n  type ListBoxSectionProps as SelectGroupProps,\n  Select as SelectPrimitive,\n  type SelectProps,\n  SelectValue as SelectValuePrimitive,\n  type SelectValueProps,\n  Separator as SeparatorPrimitive,\n} from \"react-aria-components\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/core/input-group/input-group\";\n\nfunction Select<T extends object, M extends \"single\" | \"multiple\" = \"single\">({\n  className,\n  ...props\n}: SelectProps<T, M>) {\n  return <SelectPrimitive data-slot=\"select\" className={cn(\"w-fit\", className)} {...props} />;\n}\n\nfunction SelectGroup<T extends object>({ className, ...props }: SelectGroupProps<T>) {\n  return (\n    <ListBoxSectionPrimitive\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectValue<T extends object>({ className, children, ...props }: SelectValueProps<T>) {\n  return (\n    <SelectValuePrimitive\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left data-placeholder:text-muted-foreground\", className)}\n      {...props}\n    >\n      {typeof children === \"function\"\n        ? children\n        : ({ selectedItems, selectedText, defaultChildren }) =>\n            selectedItems.length > 1 ? selectedText : defaultChildren}\n    </SelectValuePrimitive>\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof ButtonPrimitive>, \"children\"> & {\n  children?: React.ReactNode;\n  size?: \"sm\" | \"default\";\n}) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ButtonPrimitive>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  placement = \"bottom\",\n  offset = 4,\n  crossOffset = 0,\n  ...props\n}: Omit<React.ComponentProps<typeof PopoverPrimitive>, \"className\" | \"children\"> & {\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <SelectPopover\n      className={className}\n      placement={placement}\n      offset={offset}\n      crossOffset={crossOffset}\n      {...props}\n    >\n      <SelectList>{children}</SelectList>\n    </SelectPopover>\n  );\n}\n\nfunction SelectPopover({\n  className,\n  children,\n  placement = \"bottom start\",\n  offset = 4,\n  crossOffset = 0,\n  ...props\n}: Omit<React.ComponentProps<typeof PopoverPrimitive>, \"className\" | \"children\"> & {\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <PopoverPrimitive\n      data-slot=\"select-content\"\n      placement={placement}\n      offset={offset}\n      crossOffset={crossOffset}\n      className={cn(\n        \"relative isolate z-50 w-(--trigger-width) min-w-36 origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </PopoverPrimitive>\n  );\n}\n\nfunction SelectList<T extends object>({ className, ...props }: ListBoxProps<T>) {\n  return (\n    <ListBoxPrimitive\n      data-slot=\"select-list\"\n      className={cn(\n        \"group/select-list max-h-[inherit] overflow-x-hidden overflow-y-auto p-0 outline-hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SelectInput({ className, ...props }: SearchFieldProps) {\n  return (\n    <SearchField\n      {...props}\n      autoFocus\n      data-slot=\"select-input-wrapper\"\n      className={cn(\"p-1 pb-0\", className)}\n    >\n      <InputGroup>\n        <InputGroupInput\n          data-slot=\"select-input\"\n          className=\"[&::-webkit-search-cancel-button]:hidden\"\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </SearchField>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps<typeof HeaderPrimitive>) {\n  return (\n    <HeaderPrimitive\n      data-slot=\"select-label\"\n      className={cn(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ListBoxItemPrimitive>) {\n  return (\n    <ListBoxItemPrimitive\n      data-slot=\"select-item\"\n      textValue={typeof children === \"string\" ? children : undefined}\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-focused:bg-accent data-focused:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      {composeRenderProps(children, (children, { isSelected }) => (\n        <>\n          <span className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">{children}</span>\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n            {isSelected ? <CheckIcon className=\"pointer-events-none\" /> : null}\n          </span>\n        </>\n      ))}\n    </ListBoxItemPrimitive>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<typeof SeparatorPrimitive>) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"select-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/select-list:flex\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectEmpty,\n  SelectGroup,\n  SelectInput,\n  SelectItem,\n  SelectLabel,\n  SelectList,\n  SelectPopover,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
      "type": "registry:component",
      "target": "components/fma-ui/select.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "customized",
    "tags": [
      "form",
      "select",
      "react-aria"
    ]
  },
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}