{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ui/react-select",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/select.tsx",
      "content": "\"use client\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { useIsMobile } from \"../lib/use-is-mobile\";\n\nexport const Select = SelectPrimitive.Root;\nexport const SelectGroup = SelectPrimitive.Group;\nexport const SelectValue = SelectPrimitive.Value;\n\nexport function SelectTrigger({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Trigger>) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        \"flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none transition\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:truncate\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"size-4 shrink-0 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        position={position}\n        className={cn(\n          \"relative z-50 max-h-72 min-w-32 overflow-hidden rounded-lg border border-hairline bg-popover p-1 text-popover-foreground shadow-lg\",\n          position === \"popper\" && \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(position === \"popper\" && \"w-full min-w-[var(--radix-select-trigger-width)]\")}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"relative flex w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2.5 pr-8 text-sm outline-none\",\n        \"focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      <span className=\"absolute right-2.5 flex items-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-brand\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\"px-2.5 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Separator>) {\n  return <SelectPrimitive.Separator className={cn(\"-mx-1 my-1 h-px bg-hairline\", className)} {...props} />;\n}\n\nexport type SelectOption = { value: string; label: string; disabled?: boolean };\n\n/**\n * A styled native `<select>`. Its option list is drawn by the OS (the mobile\n * wheel/sheet picker), so it is the right control on touch devices; the trigger\n * still matches the theme. Prefer `SelectField`, which picks this or the Radix\n * Select automatically.\n */\nexport function NativeSelect({\n  options,\n  className,\n  ...props\n}: Omit<ComponentProps<\"select\">, \"children\"> & { options: SelectOption[] }) {\n  return (\n    <div className=\"relative inline-flex w-full\">\n      <select\n        data-slot=\"native-select\"\n        className={cn(\n          \"h-10 w-full appearance-none rounded-md border border-input bg-background pr-8 pl-3 text-sm text-foreground outline-none transition\",\n          \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((o) => (\n          <option key={o.value} value={o.value} disabled={o.disabled}>\n            {o.label}\n          </option>\n        ))}\n      </select>\n      <ChevronDown className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground\" />\n    </div>\n  );\n}\n\nexport type SelectFieldProps = {\n  options: SelectOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  name?: string;\n  /** Class for the native <select> (mobile) and, if `triggerClassName` is unset, the Radix trigger. */\n  className?: string;\n  /** Class for the Radix trigger (desktop) only. */\n  triggerClassName?: string;\n  contentClassName?: string;\n  \"aria-label\"?: string;\n};\n\n/**\n * The design system's adaptive select: a native `<select>` on mobile (best OS\n * picker, dark-mode-correct by the platform) and our Radix Select on desktop\n * (fully themed menu). Data-driven via `options`, so one call site works on\n * every device. For rich, composed menus use the primitives directly.\n */\nexport function SelectField({\n  options,\n  value,\n  onValueChange,\n  placeholder,\n  disabled,\n  name,\n  className,\n  triggerClassName,\n  contentClassName,\n  \"aria-label\": ariaLabel,\n}: SelectFieldProps) {\n  const isMobile = useIsMobile();\n\n  if (isMobile) {\n    return (\n      <NativeSelect\n        options={options}\n        value={value}\n        disabled={disabled}\n        name={name}\n        aria-label={ariaLabel}\n        className={cn(triggerClassName, className)}\n        onChange={(e) => onValueChange?.(e.currentTarget.value)}\n      />\n    );\n  }\n\n  return (\n    <Select value={value} onValueChange={onValueChange} disabled={disabled} name={name}>\n      <SelectTrigger className={triggerClassName ?? className} aria-label={ariaLabel}>\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent className={contentClassName}>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value} disabled={o.disabled}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/select.tsx"
    }
  ]
}