{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select",
  "type": "registry:ui",
  "title": "Select",
  "description": "@interlace/ui — select primitive (shadcn-compatible).",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "theme"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/select.tsx",
      "target": "components/ui/select.tsx",
      "type": "registry:ui",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nconst Select = BaseSelect.Root;\nconst SelectGroup = BaseSelect.Group;\nfunction SelectValue({\n  placeholder,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.Value> & {\n  placeholder?: React.ReactNode;\n}) {\n  const Component = BaseSelect.Value as any;\n  return <Component placeholder={placeholder} {...props} />;\n}\nconst SelectPortal = BaseSelect.Portal;\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.Trigger> & {\n  size?: 'sm' | 'default';\n}) {\n  return (\n    <BaseSelect.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        'flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm whitespace-nowrap shadow-sm transition-[color,box-shadow] outline-none',\n        'hover:bg-accent hover:text-accent-foreground',\n        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',\n        'data-popup-open:border-ring',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'data-[size=default]:h-9 data-[size=sm]:h-8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <BaseSelect.Icon className=\"opacity-50\">\n        <ChevronDownIcon className=\"size-4\" />\n      </BaseSelect.Icon>\n    </BaseSelect.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  sideOffset = 4,\n  popupClassName,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.Positioner> & {\n  popupClassName?: string;\n}) {\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        data-slot=\"select-positioner\"\n        sideOffset={sideOffset}\n        className={cn('z-50', className)}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <BaseSelect.Popup\n          data-slot=\"select-popup\"\n          className={cn(\n            'min-w-(--anchor-width) overflow-x-hidden overflow-y-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-lg',\n            'origin-(--transform-origin)',\n            'data-starting-style:opacity-0 data-starting-style:scale-95',\n            'data-ending-style:opacity-0 data-ending-style:scale-95',\n            'transition-[opacity,scale] duration-150',\n            'p-1',\n            popupClassName,\n          )}\n        >\n          {children}\n        </BaseSelect.Popup>\n        <SelectScrollDownButton />\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nfunction SelectGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.GroupLabel>) {\n  return (\n    <BaseSelect.GroupLabel\n      data-slot=\"select-group-label\"\n      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.Item>) {\n  return (\n    <BaseSelect.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-pointer items-center gap-2 rounded-lg py-2.5 pr-8 pl-3 text-sm outline-hidden select-none transition-all duration-150',\n        'text-popover-foreground',\n        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',\n        'data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-medium',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <BaseSelect.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </BaseSelect.ItemIndicator>\n      </span>\n      <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n    </BaseSelect.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.Separator>) {\n  return (\n    <BaseSelect.Separator\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 SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.ScrollUpArrow>) {\n  return (\n    <BaseSelect.ScrollUpArrow\n      data-slot=\"select-scroll-up\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1 text-muted-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </BaseSelect.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSelect.ScrollDownArrow>) {\n  return (\n    <BaseSelect.ScrollDownArrow\n      data-slot=\"select-scroll-down\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1 text-muted-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </BaseSelect.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectValue,\n  SelectPortal,\n  SelectTrigger,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"
    }
  ]
}