Collapsible

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/collapsible v1.0.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/collapsible
7// What changed since: https://ds.interlace.tools/c/collapsible#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — Collapsible
12 *
13 * A single open/close disclosure surface. Wraps Base UI's `Collapsible.Root`,
14 * `Collapsible.Trigger`, `Collapsible.Panel` so consumers get the controlled /
15 * uncontrolled state machine, ARIA wiring (`aria-controls`, `aria-expanded`,
16 * `id`), keyboard semantics (Enter / Space on the trigger), and Base UI's
17 * built-in panel sizing — for free. Reduced-motion is honoured globally via
18 * `preflight.css` (every animation collapses to 0.01ms when
19 * `prefers-reduced-motion: reduce`), so this file owns no motion timing.
20 *
21 * ## Anatomy
22 *
23 *   Collapsible (Base.Root, data-min-viewport)
24 *     ├─ CollapsibleTrigger (Base.Trigger — button surface)
25 *     └─ CollapsiblePanel   (Base.Panel — height-animated container)
26 *
27 * ## MIN_VIEWPORT — 320
28 *
29 * A disclosure is one of the smallest interactive surfaces a page can offer:
30 * a single trigger + a single content region. It works down to the 320 CSS-px
31 * iPhone SE viewport — the trigger inherits focus-visible / target-size
32 * affordances from `preflight.css`, and the panel is width-constrained by its
33 * parent, never the viewport. Below 320, preflight's dev-mode outline warns.
34 *
35 * | Rule | Concept                          | Where in this file                                                  |
36 * | ---- | -------------------------------- | ------------------------------------------------------------------- |
37 * | R4   | Extends Base UI part props       | Each part: `React.ComponentProps<typeof BaseCollapsible.X>`         |
38 * | R6   | data-slot on every part          | data-slot="collapsible" / "collapsible-trigger" / "collapsible-panel" |
39 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}` on every part                  |
40 * | R10  | Composition seam                 | Base UI parts are renderable / slot-friendly out of the box         |
41 * | R13  | Ecosystem first                  | Base UI Collapsible — no bespoke disclosure state machine           |
42 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const         |
43// … truncated