// @ts-nocheck import { AccordionV2 } from "./accordion-v2" const docs = `### Overview Compound accordion built on Kobalte's \`Accordion\` primitive. The trigger automatically renders a chevron that rotates open. ### API - \`AccordionV2\` — root; forwards Kobalte props (\`multiple\`, \`collapsible\`, \`value\`, \`defaultValue\`, \`onChange\`, etc.). - \`AccordionV2.Item\` — one expandable row; requires a unique \`value: string\`. - \`AccordionV2.Header\` — wraps the trigger; preserves heading semantics. - \`AccordionV2.Trigger\` — auto-renders a trailing chevron; pass \`hideChevron\` to opt out. - \`AccordionV2.Content\` — body shown when the item is expanded; height-animated. ### Behavior - Single-select by default (\`collapsible\` allows closing the active item). Use \`multiple\` to let several items open at once. - Open/closed state is reflected on items, triggers, and content via \`data-expanded\` / \`data-closed\`. - Content height animates using Kobalte's \`--kb-collapsible-content-height\` variable. ` export default { title: "UI V2/Accordion", id: "components-accordion-v2", component: AccordionV2, tags: ["autodocs"], parameters: { frameBackground: "#f5f5f5", docs: { description: { component: docs, }, }, }, } const frame = { width: "346px", "font-family": "var(--v2-font-family-sans)", "font-size": "13px" } as const export const Basic = { render: () => (

Is it accessible? Yes. It follows the WAI-ARIA Accordion pattern and ships with full keyboard support. Is it styled? Yeah Is it animated? Yes. Height animates via Kobalte's collapsible height variable.

), } export const Multiple = { render: () => (

Section A Multiple items can be open at once. Section B Open me too. Section C Already open by default.

), } export const Disabled = { render: () => (

Enabled item Body content. Disabled item You can't open this one. Another enabled item Body content.

), } export const LongContent = { render: () => (

What's inside?

Accordions are useful for compressing dense content into scannable sections. They preserve heading semantics and announce open/closed state to screen readers.

The body can hold arbitrary content — paragraphs, lists, even nested components.

Keyboard navigable
Animated
Themeable via CSS variables

One more Short body.

), } export const NoChevron = { render: () => (

Trigger without chevron Pass hideChevron on the trigger. Default trigger Chevron renders by default.

), }