{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select",
  "description": "Custom dropdown select with chevron icon.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/select.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport const SelectRoot = SelectPrimitive.Root\nexport const SelectGroup = SelectPrimitive.Group\nexport const SelectValue = SelectPrimitive.Value\n\nexport const SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'flex h-12 w-full items-center justify-between rounded-2xl bg-white px-4 py-2 text-sm font-extrabold text-rk-ink rk-border rk-shadow-sm focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-120 cursor-pointer data-[state=open]:shadow-[5px_5px_0_0_var(--rk-shadow-color)] data-[state=open]:-translate-x-0.5 data-[state=open]:-translate-y-0.5 [&>span]:line-clamp-1',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"w-5 h-5 stroke-[3] text-rk-ink transition-transform duration-200 shrink-0 ml-2 data-[state=open]:rotate-180\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nexport const SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4 stroke-[3]\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nexport const SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4 stroke-[3]\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName\n\nexport const SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      className={cn(\n        'relative z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-2xl bg-white rk-border rk-shadow-xl p-2 font-sans text-rk-ink data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        position === 'popper' &&\n          'data-[side=bottom]:translate-y-1.5 data-[side=left]:-translate-x-1.5 data-[side=right]:translate-x-1.5 data-[side=top]:-translate-y-1.5',\n        className\n      )}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-0 space-y-1',\n          position === 'popper' &&\n            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nexport const SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex w-full cursor-pointer select-none items-center justify-between rounded-xl px-3.5 py-2.5 font-mono text-xs font-extrabold transition-all outline-none focus:bg-rk-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:bg-rk-primary data-[state=checked]:rk-border-sm data-[state=checked]:rk-shadow-sm data-[state=checked]:font-black data-[state=checked]:-translate-y-px [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"flex items-center gap-2 truncate\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"w-4 h-4 stroke-[3.5] shrink-0 mr-2\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </span>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nexport const SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn('px-3 py-2 font-mono text-[10px] font-black uppercase tracking-wider text-rk-secondary', className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nexport const SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 my-1 border-t-2 border-rk-ink/10', className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\n/* ------------------------------------------------------------------ */\n/* Legacy compatibility wrapper                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface SelectOption {\n  value: string\n  label: string\n  icon?: React.ReactNode\n}\n\nexport interface SelectProps {\n  options?: SelectOption[]\n  value?: string\n  defaultValue?: string\n  onChange?: (e: { target: { value: string } }) => void\n  onValueChange?: (val: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n}\n\nexport function Select({\n  options = [],\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  onValueChange,\n  placeholder = 'Select an option...',\n  className,\n  disabled = false,\n}: SelectProps) {\n  const [internalValue, setInternalValue] = React.useState(\n    defaultValue ?? (options.length > 0 ? options[0].value : '')\n  )\n  const currentValue = controlledValue !== undefined ? controlledValue : internalValue\n\n  return (\n    <SelectRoot\n      value={currentValue}\n      defaultValue={defaultValue}\n      disabled={disabled}\n      onValueChange={(val) => {\n        setInternalValue(val)\n        onValueChange?.(val)\n        onChange?.({ target: { value: val } })\n      }}\n    >\n      <SelectTrigger className={className}>\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((opt) => (\n          <SelectItem key={opt.value} value={opt.value}>\n            {opt.icon}\n            <span>{opt.label}</span>\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </SelectRoot>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/select.tsx"
    }
  ]
}