{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-glass",
  "type": "registry:ui",
  "title": "Dropdown Glass",
  "description": "Glass-themed dropdown menu with simple and compound APIs for maximum flexibility.\n * Wrapper around DropdownMenuGlass for quick menu creation.\n *\n * ## Features",
  "dependencies": [
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "primitives"
  ],
  "files": [
    {
      "path": "components/glass/ui/dropdown-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * DropdownGlass Component\n *\n * Glass-themed dropdown menu with simple and compound APIs for maximum flexibility.\n * Wrapper around DropdownMenuGlass for quick menu creation.\n *\n * ## Features\n * - Two APIs: Simple (items prop) and Compound (DropdownMenuGlass.*)\n * - Theme-aware glassmorphism styling (glass/light/aurora)\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Focus management and trap\n * - Icon support for menu items\n * - Danger/destructive item variant\n * - Left/right alignment options\n * - Dividers for visual grouping\n * - Uses `--dropdown-*` CSS variables\n *\n * ## APIs\n * **1. Simple API (items prop)** - Quick setup for basic dropdowns\n * **2. Compound API (DropdownMenuGlass.*)** - Full shadcn/ui pattern for complex menus\n *\n * ## CSS Variables\n * Inherits from DropdownMenuGlass:\n * - `--dropdown-bg` - Background color (glass theme: `rgba(255,255,255,0.08)`)\n * - `--dropdown-border` - Border color (glass theme: `rgba(255,255,255,0.15)`)\n * - `--dropdown-item-hover` - Item hover background\n * - `--dropdown-item-text` - Item text color\n * - `--dropdown-icon` - Icon color\n * - `--dropdown-icon-hover` - Icon color on hover\n * - `--dropdown-divider` - Divider background\n * - `--dropdown-glow` - Box shadow with glow effect\n *\n * @example Simple API (recommended for basic dropdowns)\n * ```tsx\n * import { DropdownGlass } from 'shadcn-glass-ui'\n *\n * <DropdownGlass\n *   trigger={<ButtonGlass><MoreVertical /></ButtonGlass>}\n *   items={[\n *     { label: 'Edit', icon: Edit, onClick: handleEdit },\n *     { divider: true },\n *     { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }\n *   ]}\n * />\n * ```\n *\n * @example Compound API (for complex dropdowns)\n * ```tsx\n * import {\n *   DropdownMenuGlass,\n *   DropdownMenuGlassTrigger,\n *   DropdownMenuGlassContent,\n *   DropdownMenuGlassItem,\n *   DropdownMenuGlassSeparator,\n * } from 'shadcn-glass-ui'\n *\n * <DropdownMenuGlass>\n *   <DropdownMenuGlassTrigger asChild>\n *     <ButtonGlass>Open Menu</ButtonGlass>\n *   </DropdownMenuGlassTrigger>\n *   <DropdownMenuGlassContent>\n *     <DropdownMenuGlassItem>Edit</DropdownMenuGlassItem>\n *     <DropdownMenuGlassSeparator />\n *     <DropdownMenuGlassItem variant=\"destructive\">Delete</DropdownMenuGlassItem>\n *   </DropdownMenuGlassContent>\n * </DropdownMenuGlass>\n * ```\n *\n * @example With alignment\n * ```tsx\n * <DropdownGlass\n *   trigger={<ButtonGlass>Menu</ButtonGlass>}\n *   items={items}\n *   align=\"right\"\n * />\n * ```\n *\n * @example Text-only items (no icons)\n * ```tsx\n * <DropdownGlass\n *   trigger={<ButtonGlass>Options</ButtonGlass>}\n *   items={[\n *     { label: 'Option 1', onClick: () => {} },\n *     { label: 'Option 2', onClick: () => {} },\n *     { label: 'Option 3', onClick: () => {} },\n *   ]}\n * />\n * ```\n *\n * @accessibility\n * - **Keyboard Navigation:** Arrow keys navigate, Enter/Space activates, Escape closes (WCAG 2.1.1)\n * - **Focus Management:** Focus trapped within menu when open (WCAG 2.4.3)\n * - **Screen Readers:** Uses `role=\"menu\"` and `role=\"menuitem\"` (WCAG 4.1.3)\n * - **Touch Targets:** All items meet minimum 44x44px (WCAG 2.5.5)\n *\n * @since v1.0.0\n * @see ./dropdown-menu-glass.tsx for compound component exports\n */\n\n'use client';\n\nimport * as React from 'react';\nimport type { LucideIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport {\n  DropdownMenuGlass,\n  DropdownMenuGlassTrigger,\n  DropdownMenuGlassContent,\n  DropdownMenuGlassItem,\n  DropdownMenuGlassSeparator,\n} from './dropdown-menu-glass';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport interface DropdownItem {\n  readonly label?: string;\n  readonly icon?: LucideIcon;\n  readonly onClick?: () => void;\n  readonly danger?: boolean;\n  readonly divider?: boolean;\n}\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for the DropdownGlass component (Simple API).\n *\n * @example\n * ```tsx\n * const props: DropdownGlassProps = {\n *   trigger: <ButtonGlass>Menu</ButtonGlass>,\n *   items: [\n *     { label: 'Edit', icon: Edit, onClick: handleEdit },\n *     { divider: true },\n *     { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }\n *   ],\n *   align: 'left',\n * };\n * ```\n */\nexport interface DropdownGlassProps {\n  /** Trigger element (button, etc.) */\n  readonly trigger: React.ReactNode;\n  /** Menu items array */\n  readonly items: readonly DropdownItem[];\n  /**\n   * Dropdown alignment.\n   *\n   * @default \"left\"\n   */\n  readonly align?: 'left' | 'right';\n  /** Additional className */\n  readonly className?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n/**\n * DropdownGlass - Simple API wrapper\n *\n * For complex dropdowns with checkboxes, radio groups, sub-menus, etc.,\n * use the compound components from dropdown-menu-glass.tsx directly.\n */\nexport const DropdownGlass = React.forwardRef<HTMLDivElement, DropdownGlassProps>(\n  ({ trigger, items, align = 'left', className }, ref) => {\n    return (\n      <div ref={ref} data-slot=\"dropdown\" className={cn('relative inline-block', className)}>\n        <DropdownMenuGlass>\n          <DropdownMenuGlassTrigger asChild>{trigger}</DropdownMenuGlassTrigger>\n\n          <DropdownMenuGlassContent align={align === 'left' ? 'start' : 'end'}>\n            {items.map((item, idx) =>\n              item.divider ? (\n                <DropdownMenuGlassSeparator key={`divider-${idx}`} />\n              ) : (\n                <DropdownMenuGlassItem\n                  key={`item-${idx}`}\n                  variant={item.danger ? 'destructive' : 'default'}\n                  onSelect={item.onClick}\n                >\n                  {item.icon && (\n                    <item.icon\n                      className={cn(\n                        ICON_SIZES.md,\n                        'shrink-0',\n                        item.danger\n                          ? 'text-(--alert-danger-text)'\n                          : 'text-(--dropdown-icon) group-data-highlighted:text-(--dropdown-icon-hover)'\n                      )}\n                    />\n                  )}\n                  <span className=\"font-medium\">{item.label}</span>\n                </DropdownMenuGlassItem>\n              )\n            )}\n          </DropdownMenuGlassContent>\n        </DropdownMenuGlass>\n      </div>\n    );\n  }\n);\n\nDropdownGlass.displayName = 'DropdownGlass';\n\n// ========================================\n// RE-EXPORTS (for convenience)\n// ========================================\n\nexport {\n  DropdownMenuGlass,\n  DropdownMenuGlassTrigger,\n  DropdownMenuGlassContent,\n  DropdownMenuGlassItem,\n  DropdownMenuGlassSeparator,\n} from './dropdown-menu-glass';\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"
    }
  }
}