{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-glass",
  "type": "registry:ui",
  "title": "Select Glass",
  "description": "Glass-themed select dropdown with compound component API for flexible composition.\n * Built on @radix-ui/react-select for accessibility, keyboard navigation, and robust selection behavior.\n *\n * ## Features",
  "dependencies": [
    "@radix-ui/react-select",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/select-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * SelectGlass Component\n *\n * Glass-themed select dropdown with compound component API for flexible composition.\n * Built on @radix-ui/react-select for accessibility, keyboard navigation, and robust selection behavior.\n *\n * ## Features\n * - Compound API with 9 sub-components for maximum flexibility\n * - Full shadcn/ui API compatibility (drop-in replacement)\n * - Keyboard navigation (Arrow keys, Enter, Escape, Home/End)\n * - Grouped options with labels and separators\n * - Custom scroll buttons for long lists\n * - Glass morphism styling with theme-aware CSS variables\n * - Accessible ARIA attributes and focus management\n * - Type-safe value handling with TypeScript generics\n *\n * ## CSS Variables\n * - `--input-bg` - Trigger button background\n * - `--input-border` - Trigger button border color\n * - `--input-text` - Trigger button text color\n * - `--dropdown-bg` - Content background\n * - `--dropdown-border` - Content border color\n * - `--dropdown-item-hover` - Item hover background\n * - `--dropdown-item-text` - Item text color\n * - `--dropdown-glow` - Content box shadow\n * - `--text-secondary` - Scroll button icon color\n *\n * @example Basic usage\n * ```tsx\n * import { SelectGlass, SelectGlassTrigger, SelectGlassValue, SelectGlassContent, SelectGlassItem } from 'shadcn-glass-ui'\n *\n * <SelectGlass>\n *   <SelectGlassTrigger className=\"w-[180px]\">\n *     <SelectGlassValue placeholder=\"Select a fruit\" />\n *   </SelectGlassTrigger>\n *   <SelectGlassContent>\n *     <SelectGlassItem value=\"apple\">Apple</SelectGlassItem>\n *     <SelectGlassItem value=\"banana\">Banana</SelectGlassItem>\n *     <SelectGlassItem value=\"orange\">Orange</SelectGlassItem>\n *   </SelectGlassContent>\n * </SelectGlass>\n * ```\n *\n * @example With groups and labels\n * ```tsx\n * <SelectGlass>\n *   <SelectGlassTrigger className=\"w-[200px]\">\n *     <SelectGlassValue placeholder=\"Select a framework\" />\n *   </SelectGlassTrigger>\n *   <SelectGlassContent>\n *     <SelectGlassGroup>\n *       <SelectGlassLabel>Frontend</SelectGlassLabel>\n *       <SelectGlassItem value=\"react\">React</SelectGlassItem>\n *       <SelectGlassItem value=\"vue\">Vue</SelectGlassItem>\n *     </SelectGlassGroup>\n *     <SelectGlassSeparator />\n *     <SelectGlassGroup>\n *       <SelectGlassLabel>Backend</SelectGlassLabel>\n *       <SelectGlassItem value=\"node\">Node.js</SelectGlassItem>\n *       <SelectGlassItem value=\"python\">Python</SelectGlassItem>\n *     </SelectGlassGroup>\n *   </SelectGlassContent>\n * </SelectGlass>\n * ```\n *\n * @example Controlled state\n * ```tsx\n * const [value, setValue] = useState('react')\n *\n * <SelectGlass value={value} onValueChange={setValue}>\n *   <SelectGlassTrigger className=\"w-[200px]\">\n *     <SelectGlassValue />\n *   </SelectGlassTrigger>\n *   <SelectGlassContent>\n *     <SelectGlassItem value=\"react\">React</SelectGlassItem>\n *     <SelectGlassItem value=\"vue\">Vue</SelectGlassItem>\n *   </SelectGlassContent>\n * </SelectGlass>\n * ```\n *\n * @example shadcn/ui compatible aliases\n * ```tsx\n * import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'shadcn-glass-ui'\n *\n * <Select>\n *   <SelectTrigger className=\"w-[180px]\">\n *     <SelectValue placeholder=\"Theme\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"light\">Light</SelectItem>\n *     <SelectItem value=\"dark\">Dark</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n *\n * @accessibility\n * - WCAG 2.1 AA compliant via Radix UI primitives\n * - Full keyboard navigation support (Arrow keys, Enter, Space, Escape)\n * - Proper ARIA roles: `combobox`, `listbox`, `option`\n * - Screen reader announcements for selection changes\n * - Focus management with visible focus indicators\n * - Disabled state properly communicated to assistive technologies\n *\n * @since v1.0.0\n * @see https://www.radix-ui.com/primitives/docs/components/select\n */\n\n'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';\nimport {\n  getDropdownContentStyles,\n  dropdownContentClasses,\n  getDropdownItemClasses,\n  dropdownSeparatorClasses,\n  dropdownLabelClasses,\n} from '@/lib/variants/dropdown-content-styles';\nimport '@/glass-theme.css';\n\n// ========================================\n// ROOT\n// ========================================\n\nconst SelectGlass = SelectPrimitive.Root;\n\n// ========================================\n// GROUP\n// ========================================\n\nconst SelectGlassGroup = SelectPrimitive.Group;\n\n// ========================================\n// VALUE\n// ========================================\n\nconst SelectGlassValue = SelectPrimitive.Value;\n\n// ========================================\n// TRIGGER\n// ========================================\n\nconst SelectGlassTrigger = 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    data-slot=\"select-trigger\"\n    className={cn(\n      // Layout\n      'flex h-10 w-full items-center justify-between gap-2',\n      'rounded-lg border px-3 py-2 text-sm',\n      // Transitions\n      'transition-all duration-300',\n      // Focus state\n      'focus:outline-none',\n      // Disabled state\n      'disabled:cursor-not-allowed disabled:opacity-50',\n      // Text overflow\n      '[&>span]:line-clamp-1',\n      className\n    )}\n    style={{\n      background: 'var(--input-bg)',\n      borderColor: 'var(--input-border)',\n      color: 'var(--input-text)',\n    }}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50 shrink-0\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectGlassTrigger.displayName = 'SelectGlassTrigger';\n\n// ========================================\n// SCROLL UP BUTTON\n// ========================================\n\nconst SelectGlassScrollUpButton = 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    data-slot=\"select-scroll-up-button\"\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    style={{ color: 'var(--text-secondary)' }}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectGlassScrollUpButton.displayName = 'SelectGlassScrollUpButton';\n\n// ========================================\n// SCROLL DOWN BUTTON\n// ========================================\n\nconst SelectGlassScrollDownButton = 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    data-slot=\"select-scroll-down-button\"\n    className={cn('flex cursor-default items-center justify-center py-1', className)}\n    style={{ color: 'var(--text-secondary)' }}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectGlassScrollDownButton.displayName = 'SelectGlassScrollDownButton';\n\n// ========================================\n// CONTENT\n// ========================================\n\nconst SelectGlassContent = 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      data-slot=\"select-content\"\n      position={position}\n      className={cn(\n        dropdownContentClasses,\n        'p-1',\n        // Position-specific styles\n        position === 'popper' &&\n          'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1',\n        className\n      )}\n      style={getDropdownContentStyles()}\n      {...props}\n    >\n      <SelectGlassScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          'p-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      <SelectGlassScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectGlassContent.displayName = 'SelectGlassContent';\n\n// ========================================\n// LABEL\n// ========================================\n\nconst SelectGlassLabel = 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    data-slot=\"select-label\"\n    className={cn(dropdownLabelClasses, className)}\n    {...props}\n  />\n));\nSelectGlassLabel.displayName = 'SelectGlassLabel';\n\n// ========================================\n// ITEM\n// ========================================\n\nconst SelectGlassItem = 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    data-slot=\"select-item\"\n    className={cn(getDropdownItemClasses(), 'relative pl-8 pr-2', className)}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectGlassItem.displayName = 'SelectGlassItem';\n\n// ========================================\n// SEPARATOR\n// ========================================\n\nconst SelectGlassSeparator = 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    data-slot=\"select-separator\"\n    className={cn(dropdownSeparatorClasses, '-mx-1 my-1', className)}\n    {...props}\n  />\n));\nSelectGlassSeparator.displayName = 'SelectGlassSeparator';\n\n// ========================================\n// EXPORTS\n// ========================================\n\nexport {\n  SelectGlass,\n  SelectGlassGroup,\n  SelectGlassValue,\n  SelectGlassTrigger,\n  SelectGlassScrollUpButton,\n  SelectGlassScrollDownButton,\n  SelectGlassContent,\n  SelectGlassLabel,\n  SelectGlassItem,\n  SelectGlassSeparator,\n};\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * shadcn/ui compatible aliases for SelectGlass components\n *\n * @example\n * ```tsx\n * import {\n *   Select,\n *   SelectTrigger,\n *   SelectValue,\n *   SelectContent,\n *   SelectItem,\n * } from 'shadcn-glass-ui'\n *\n * <Select>\n *   <SelectTrigger className=\"w-[180px]\">\n *     <SelectValue placeholder=\"Theme\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"light\">Light</SelectItem>\n *     <SelectItem value=\"dark\">Dark</SelectItem>\n *     <SelectItem value=\"system\">System</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n * @since v2.5.0\n */\nexport const Select = SelectGlass;\nexport const SelectGroup = SelectGlassGroup;\nexport const SelectValue = SelectGlassValue;\nexport const SelectTrigger = SelectGlassTrigger;\nexport const SelectScrollUpButton = SelectGlassScrollUpButton;\nexport const SelectScrollDownButton = SelectGlassScrollDownButton;\nexport const SelectContent = SelectGlassContent;\nexport const SelectLabel = SelectGlassLabel;\nexport const SelectItem = SelectGlassItem;\nexport const SelectSeparator = SelectGlassSeparator;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}