Accordion

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/accordion v1.2.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/accordion
7// What changed since: https://ds.interlace.tools/c/accordion#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — Accordion
12 *
13 * A disclosure stack: a column of headers whose panels open and close. Wraps
14 * @base-ui/react/accordion — Base UI owns the open state (single or multiple),
15 * the keyboard model and every piece of the accordion ARIA.
16 *
17 * We own the item divider, the trigger row, and the chevron that rotates on
18 * `data-panel-open`.
19 *
20 * ## Anatomy
21 *
22 *   Accordion                        (Base UI Accordion.Root — data-min-viewport=320)
23 *     └─ AccordionItem               (border-b, dropped on the last item)
24 *          ├─ AccordionTrigger       (Accordion.Header > Accordion.Trigger + ChevronDownIcon)
25 *          └─ AccordionContent       (Accordion.Panel > div)
26 *
27 * Every node above carries a `data-slot`, including the two that used not to:
28 * the `Accordion.Header` around the trigger button (`accordion-header`) and the
29 * padding `div` inside the panel (`accordion-content-inner`).
30 *
31 * ## Where `className` lands
32 *
33 * `AccordionContent` forwards the caller's `className` to the `Panel` — the box
34 * that owns `overflow-hidden` and the open/close animation — not to the inner
35 * padding `div`. It used to be the other way round, which left the animated box
36 * unreachable from a call site. `primitive-api-contract-lock` pins it.
37 *
38 * ## MIN_VIEWPORT — 320
39 *
40 * A disclosure stack is full-width by construction: the trigger row is
41 * `flex-1` and the chevron is `shrink-0`, so a long heading wraps inside the
42 * row instead of pushing the chevron off a 320px screen.
43 *
44 * | Rule | Concept                          | Where in this file                                          |
45 * | ---- | -------------------------------- | ----------------------------------------------------------- |
46 * | R4   | Extends Base UI part props       | every wrapper is `React.ComponentProps<typeof BaseAccordion.*>` |
47 * | R6   | data-slot per part               | accordion / -item / -header / -trigger / -content / -content-inner |
48 * | R7   | cn + ...rest                     | `cn('border-b last:border-b-0', className)` + `{...props}`  |
49// … truncated