Accordion

1"use client"
2 
3import * as React from "react"
4import { ChevronDown } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7export interface AccordionItem {
8  id: string
9  title: React.ReactNode
10  content: React.ReactNode
11}
12 
13export interface AccordionProps {
14  items: AccordionItem[]
15  /** "single" (default) closes the previously open item when a new one opens; "multiple" toggles items independently */
16  type?: "single" | "multiple"
17  /** item ids expanded on mount */
18  defaultOpen?: string[]
19  className?: string
20}
21 
22export function Accordion({ items, type = "single", defaultOpen, className }: AccordionProps) {
23  const uid = React.useId()
24  const [open, setOpen] = React.useState<string[]>(defaultOpen ?? [])
25  const triggerRefs = React.useRef<(HTMLButtonElement | null)[]>([])
26 
27  const toggle = (id: string) => {
28    setOpen(prev => {
29      if (prev.includes(id)) return prev.filter(v => v !== id)
30      return type === "single" ? [id] : [...prev, id]
31    })
32  }
33 
34  // APG accordion pattern: headers stay in the normal Tab sequence; arrow keys
35  // move focus between them and Home/End jump to the first/last header.
36  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
37    const triggers = triggerRefs.current
38    let next: number | null = null
39    if (e.key === "ArrowDown") next = (index + 1) % triggers.length
40    else if (e.key === "ArrowUp") next = (index - 1 + triggers.length) % triggers.length
41    else if (e.key === "Home") next = 0
42    else if (e.key === "End") next = triggers.length - 1
43    if (next !== null) {
44      e.preventDefault()
45      triggers[next]?.focus()
46    }
47  }
48 
49  return (
50    <div className={cn("flex w-full flex-col", className)}>
51      {items.map((item, index) => {
52        const isOpen = open.includes(item.id)
53        const triggerId = `${uid}-trigger-${item.id}`
54        const panelId = `${uid}-panel-${item.id}`
55        return (
56          <div className="border-b" key={item.id}>
57            <h3 className="flex">
58              <button
59                aria-controls={panelId}
60                aria-expanded={isOpen}
61                className={cn(
62                  "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium",
63                  "hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
64                )}
65                id={triggerId}
66                onClick={() => toggle(item.id)}
67// … truncated