{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-header-glass",
  "type": "registry:component",
  "title": "Expandable Header Glass",
  "description": "Collapsible section header with animated chevron for accordion-style interfaces.\n * Provides accessible expand/collapse controls with theme-aware styling.\n *\n * ## Features",
  "dependencies": [
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/atomic/expandable-header-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * ExpandableHeaderGlass Component\n *\n * Collapsible section header with animated chevron for accordion-style interfaces.\n * Provides accessible expand/collapse controls with theme-aware styling.\n *\n * ## Features\n * - **Chevron Animation:** Smooth rotation between ChevronUp/ChevronDown icons\n * - **Optional Leading Icon:** Customizable icon with configurable color\n * - **Controlled State:** Requires `expanded` prop for external state management\n * - **Hover Effect:** Subtle background highlight on hover (`bg-white/5`)\n * - **Theme-Aware:** Uses CSS variables for text and icon colors\n * - **ARIA Compliance:** `aria-expanded` attribute for screen readers\n * - **Keyboard Accessible:** Native button element with focus states\n * - **Flexible Layout:** Full-width button with space-between alignment\n * - **Atomic Component:** Extracted from FlagsSectionGlass for reusability\n *\n * ## CSS Variables\n * Uses inline theme CSS variables (no component-specific variables):\n * - `--text-primary` - Header title text color\n * - `--text-muted` - Chevron icon color\n * - `--text-accent` - Leading icon color (default, customizable via `iconColor`)\n *\n * @example Basic usage\n * ```tsx\n * import { ExpandableHeaderGlass } from 'shadcn-glass-ui'\n * import { Flag } from 'lucide-react'\n *\n * function CollapsibleSection() {\n *   const [expanded, setExpanded] = useState(false)\n *\n *   return (\n *     <>\n *       <ExpandableHeaderGlass\n *         title=\"Flags\"\n *         icon={Flag}\n *         expanded={expanded}\n *         onToggle={() => setExpanded(!expanded)}\n *       />\n *       {expanded && <div>Section content...</div>}\n *     </>\n *   )\n * }\n * ```\n *\n * @example Without icon\n * ```tsx\n * <ExpandableHeaderGlass\n *   title=\"Additional Information\"\n *   expanded={isExpanded}\n *   onToggle={handleToggle}\n * />\n * ```\n *\n * @example With custom icon color\n * ```tsx\n * import { AlertTriangle } from 'lucide-react'\n *\n * <ExpandableHeaderGlass\n *   title=\"Warnings\"\n *   icon={AlertTriangle}\n *   iconColor=\"oklch(65% 0.19 29)\" // Orange warning color\n *   expanded={warningsExpanded}\n *   onToggle={() => setWarningsExpanded(!warningsExpanded)}\n * />\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <ExpandableHeaderGlass\n *   title=\"Advanced Settings\"\n *   expanded={settingsExpanded}\n *   onToggle={toggleSettings}\n *   className=\"bg-white/10 border border-white/20\"\n * />\n * ```\n *\n * @accessibility\n * - Uses semantic `<button>` element for proper keyboard support\n * - `aria-expanded` attribute indicates current state to screen readers\n * - Chevron icon change provides visual feedback for state\n * - Native focus states for keyboard navigation\n * - `type=\"button\"` prevents form submission\n * - Space and Enter keys trigger toggle\n * - WCAG 2.1 AA compliant color contrast\n *\n * @since v1.0.0\n */\n\n// ========================================\n// EXPANDABLE HEADER GLASS - ATOMIC COMPONENT\n// Collapsible section header with icon and chevron\n// Level 2: Atomic (extracted from FlagsSectionGlass)\n// ========================================\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type CSSProperties } from 'react';\nimport { ChevronUp, ChevronDown, type LucideIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n/**\n * Props for ExpandableHeaderGlass component.\n *\n * Extends standard button attributes (excluding `title` to avoid conflict with\n * the component's `title` prop). This is a controlled component requiring\n * `expanded` state management.\n *\n * @example\n * ```tsx\n * import { Flag } from 'lucide-react'\n *\n * const props: ExpandableHeaderGlassProps = {\n *   title: 'Warnings',\n *   icon: Flag,\n *   iconColor: 'var(--text-accent)',\n *   expanded: true,\n *   onToggle: () => console.log('Toggled'),\n * }\n * ```\n */\nexport interface ExpandableHeaderGlassProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'title'\n> {\n  /**\n   * Header title.\n   *\n   * Accepts any valid React node (string, JSX, etc.). Displayed with\n   * `font-medium` weight for emphasis.\n   *\n   * @example\n   * ```tsx\n   * <ExpandableHeaderGlass title=\"Flags\" ... />\n   * <ExpandableHeaderGlass title={<span>Custom <b>Title</b></span>} ... />\n   * ```\n   */\n  readonly title: ReactNode;\n\n  /**\n   * Leading icon component.\n   *\n   * Optional Lucide icon displayed before the title. Icon color controlled\n   * via `iconColor` prop.\n   *\n   * @example\n   * ```tsx\n   * import { Flag, AlertTriangle, Settings } from 'lucide-react'\n   *\n   * <ExpandableHeaderGlass icon={Flag} title=\"Flags\" ... />\n   * <ExpandableHeaderGlass icon={AlertTriangle} title=\"Warnings\" ... />\n   * ```\n   */\n  readonly icon?: LucideIcon;\n\n  /**\n   * Icon color (CSS variable or color value).\n   *\n   * Accepts CSS variables or direct OKLCH/hex/rgb values. Defaults to\n   * `--text-accent` for theme consistency.\n   *\n   * @default 'var(--text-accent)'\n   *\n   * @example\n   * ```tsx\n   * <ExpandableHeaderGlass iconColor=\"var(--text-accent)\" ... />\n   * <ExpandableHeaderGlass iconColor=\"oklch(65% 0.19 29)\" ... />\n   * ```\n   */\n  readonly iconColor?: string;\n\n  /**\n   * Expanded state.\n   *\n   * Controls chevron direction and `aria-expanded` attribute. This is a\n   * controlled component - manage state externally with `useState` or similar.\n   *\n   * - `true`: Shows ChevronUp icon\n   * - `false`: Shows ChevronDown icon\n   *\n   * @example\n   * ```tsx\n   * const [expanded, setExpanded] = useState(false)\n   *\n   * <ExpandableHeaderGlass\n   *   expanded={expanded}\n   *   onToggle={() => setExpanded(!expanded)}\n   * />\n   * ```\n   */\n  readonly expanded: boolean;\n\n  /**\n   * Toggle callback.\n   *\n   * Called when button is clicked. Use to update `expanded` state. Button\n   * is still functional without this prop (e.g., for display-only headers).\n   *\n   * @example\n   * ```tsx\n   * <ExpandableHeaderGlass\n   *   expanded={isExpanded}\n   *   onToggle={() => {\n   *     setIsExpanded(!isExpanded)\n   *     trackAnalytics('section_toggled')\n   *   }}\n   * />\n   * ```\n   */\n  readonly onToggle?: () => void;\n}\n\nexport const ExpandableHeaderGlass = forwardRef<HTMLButtonElement, ExpandableHeaderGlassProps>(\n  (\n    {\n      title,\n      icon: Icon,\n      iconColor = 'var(--text-accent)',\n      expanded,\n      onToggle,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const textStyles: CSSProperties = {\n      color: 'var(--text-primary)',\n    };\n\n    const chevronStyles: CSSProperties = {\n      color: 'var(--text-muted)',\n    };\n\n    const iconStyles: CSSProperties = {\n      color: iconColor,\n    };\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onToggle}\n        aria-expanded={expanded}\n        className={cn(\n          'w-full p-4 flex items-center justify-between rounded-2xl transition-colors hover:bg-white/5',\n          className\n        )}\n        style={textStyles}\n        {...props}\n      >\n        <div className=\"flex items-center gap-2\">\n          {Icon && <Icon className=\"w-5 h-5\" style={iconStyles} />}\n          <span className=\"font-medium\">{title}</span>\n        </div>\n        {expanded ? (\n          <ChevronUp className=\"w-5 h-5\" style={chevronStyles} />\n        ) : (\n          <ChevronDown className=\"w-5 h-5\" style={chevronStyles} />\n        )}\n      </button>\n    );\n  }\n);\n\nExpandableHeaderGlass.displayName = 'ExpandableHeaderGlass';\n"
    }
  ],
  "categories": [
    "atomic"
  ]
}