Split Layout Accordion

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * SplitLayoutGlass Accordion Components
4 *
5 * Mobile-specific components that render content in accordion pattern.
6 * Details expand below the selected item instead of showing in a separate panel.
7 *
8 * @module split-layout-accordion
9 */
10 
11import { forwardRef, type ReactNode, useId, useRef, useEffect, useCallback, useState } from 'react';
12import { ChevronDown } from 'lucide-react';
13import { cn } from '@/lib/utils';
14import { GlassCard } from '@/components/glass/ui/glass-card';
15import { useSplitLayout, useSplitLayoutOptional } from './split-layout-context';
16 
17// ========================================
18// ACCORDION ROOT
19// ========================================
20 
21/**
22 * Props for SplitLayoutAccordion.Root component
23 * Container for accordion items in mobile view
24 */
25export interface SplitLayoutAccordionRootProps extends React.HTMLAttributes<HTMLDivElement> {
26  children: ReactNode;
27  /**
28   * ARIA label for the accordion region
29   * @default "Content accordion"
30   */
31  label?: string;
32}
33 
34const SplitLayoutAccordionRoot = forwardRef<HTMLDivElement, SplitLayoutAccordionRootProps>(
35  ({ children, label = 'Content accordion', className, ...props }, ref) => {
36    const context = useSplitLayoutOptional();
37    const intensity = context?.intensity ?? 'medium';
38 
39    return (
40      <GlassCard
41        asChild
42        intensity={intensity}
43        padding="none"
44        className={cn('divide-y divide-white/10', className)}
45      >
46        <div ref={ref} role="region" aria-label={label} data-split-accordion="" {...props}>
47          {children}
48        </div>
49      </GlassCard>
50    );
51  }
52);
53 
54SplitLayoutAccordionRoot.displayName = 'SplitLayoutAccordion.Root';
55 
56// ========================================
57// ACCORDION ITEM
58// ========================================
59 
60/**
61 * Props for SplitLayoutAccordion.Item component
62 * A single accordion item with trigger and collapsible content
63 */
64export interface SplitLayoutAccordionItemProps extends Omit<
65  React.HTMLAttributes<HTMLDivElement>,
66  'children'
67> {
68  /**
69   * Unique key for this item (used for selection)
70   */
71  itemKey: string;
72  /**
73   * Content shown in the trigger/header area
74   */
75  trigger: ReactNode;
76  /**
77   * Content shown when expanded (details)
78   */
79  children: ReactNode;
80  /**
81   * Disable this item
82   * @default false
83   */
84  disabled?: boolean;
85}
86 
87const SplitLayoutAccordionItem = forwardRef<HTMLDivElement, SplitLayoutAccordionItemProps>(
88// … truncated