prime-ui-kit 0.9.0 → 0.9.2

package/src/components/accordion/COMPONENT.md

@@ -1,17 +1,18 @@
 # Accordion
 
-**Category:** layout
+**Category:** data-display
+**Kind:** navigation
 
 > Collapsible sections: FAQ, settings groups, checkout steps.
 
 ## When to use
 - A list of questions with answers (FAQ).
-- Groups of settings where the user opens one or several at a time.
+- Groups of settings where the user opens one or several at a time (`multiple`).
 - Step-by-step forms where one step stays open (`collapsible={false}`).
 
 ## When not to use
 - Switching between peer views of the same area → use [Tabs](../tabs/COMPONENT.md).
-- A single show/hide toggle next to a field → a [Button](../button/COMPONENT.md) plus conditional content.
+- A single show / hide toggle next to a field → a [Button](../button/COMPONENT.md) plus conditional content.
 - A linear wizard with progress → use [Stepper](../stepper/COMPONENT.md).
 - Floating extra content → use [Popover](../popover/COMPONENT.md).
 - A static separator between groups → use [Divider](../divider/COMPONENT.md).
@@ -23,72 +24,72 @@ import { Accordion } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Accordion.Root               frame (grouped) or column of cards (separate)
-└── Accordion.Item           one section; data-state open/closed
-    ├── Accordion.Header     <h3> wrapper of the trigger
-    │   └── Accordion.Trigger    <button>; holds the label
-    │       ├── Accordion.Icon   optional leading icon
-    │       ├── <span>label</span>
-    │       └── Accordion.Arrow  indicator at the end (chevron or icon / openIcon pair)
-    └── Accordion.Content    <section> panel with height animation
+Accordion.Root                frame (grouped) or column of cards (separate)
+└─ Accordion.Item             one section; data-state open / closed
+   ├─ Accordion.Header        <h3> around the trigger
+   │  └─ Accordion.Trigger    <button>: children, then the chevron (Icon nav.chevronDown)
+   │     └─ Accordion.Icon    optional leading icon
+   └─ Accordion.Content       <section> region; clip <div> → padded body <div>
 ```
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Accordion.Root
-`forwardRef` to `<div>`. The props are a union on `type`.
+`ref` → `HTMLDivElement`. Owns which items are open; sets the size tier and the layout.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `type` | `"single" \| "multiple"` | `"single"` | One open item at a time, or any number. |
-| `value` | `string` (single) · `string[]` (multiple) | — | Open item(s), controlled. In single mode `""` means all closed. |
-| `defaultValue` | `string` (single) · `string[]` (multiple) | — | Initially open item(s), uncontrolled. |
-| `onValueChange` | `(value: string) => void` (single) · `(value: string[]) => void` (multiple) | — | Called on every toggle; single mode passes `""` when the item closes. |
-| `collapsible` | `boolean` | `true` | Single mode only: `false` keeps the open item open when its trigger is clicked again. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Trigger height, text, icon and paddings. |
-| `layout` | `"grouped" \| "separate"` | `"grouped"` | One surface with hairlines between items, or each item as its own card. |
-
-+ native `<div>` props (except `defaultValue`, `onChange`).
+| `multiple` | `boolean` | `false` | Any number of open items; `value` becomes a `string[]`. |
+| `value` | `string \| string[]` | — | Open item (`""` — none), or the list of open items with `multiple` (controlled). |
+| `defaultValue` | `string \| string[]` | — | Initially open item(s) (uncontrolled). |
+| `onValueChange` | `(value: string) => void \| (value: string[]) => void` | — | Called with the new open item, or the new list with `multiple`. |
+| `collapsible` | `boolean` | `true` | Without `multiple`: `false` keeps the open item open on a second click. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of trigger height, text, icon and padding. |
+| `layout` | `"grouped" \| "separate"` | `"grouped"` | `grouped` — one surface with hairlines between items; `separate` — every item is its own card. |
+| `children` | `ReactNode` | — | `Accordion.Item`s. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" \| "onChange">` | — | `className` and the other div attributes. |
 
 ### Accordion.Item
-`forwardRef` to `<div>`.
+`ref` → `HTMLDivElement`. One section; `data-state="open" | "closed"`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `value` | `string` | — (required) | Item id used in `value`. |
-| `disabled` | `boolean` | `false` | The trigger is disabled and the item cannot be toggled. |
-
-+ native `<div>` props.
+| `disabled` | `boolean` | `false` | The item cannot be toggled; its trigger is disabled. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
 ### Accordion.Header
-`forwardRef` to `<h3>`. + native heading props.
+`ref` → `HTMLHeadingElement`. The `<h3>` around the trigger.
 
-### Accordion.Trigger
-`forwardRef` to `<button>` (`type="button"` unless set). `id`, `disabled`, `aria-controls`, `aria-expanded` are set by the item. A custom `onClick` runs first; calling `event.preventDefault()` cancels the toggle. + native `<button>` props.
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLHeadingElement>` | — | `className` and the other heading attributes. |
 
-### Accordion.Icon
-Polymorphic, no ref.
+### Accordion.Trigger
+`ref` → `HTMLButtonElement`. The `<button>` that toggles the item; draws a chevron after its children that turns when open.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `as` | `ElementType` | `"div"` | Element or icon component to render (e.g. a lucide icon). |
-| `className` | `string` | — | Extra class. |
-| `children` | `ReactNode` | — | Icon glyph when `as` is a wrapper. |
+| `children` | `ReactNode` | — | Optional `Accordion.Icon`, then the label. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">` | — | `onClick` (runs first; `preventDefault()` stops the toggle), `className` and the other button attributes. |
 
-+ props of the `as` element. Sized to the tier icon; content panel aligns with the label text when present.
-
-### Accordion.Arrow
-No ref; renders a `<span>` at the end of the trigger.
+### Accordion.Icon
+`ref` → `HTMLSpanElement`. Decorative leading icon (`aria-hidden`) of the trigger; the content then lines up with the label.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `icon` | `ElementType<{ className?; strokeWidth? }>` | `ChevronDown` | Glyph; rotates 180° when the item opens. |
-| `openIcon` | `ElementType<{ className?; strokeWidth? }>` | — | Glyph shown instead of `icon` while open (e.g. `Plus` → `Minus`); disables the rotation. |
-
-+ native `<span>` props.
+| `children` | `ReactNode` | — (required) | The icon, e.g. `<Icon name="field.calendar" />`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### Accordion.Content
-`forwardRef` to the outer `<section>`. `className` goes to the inner padded block; `style` and other props go to the `<section>`. + native `<div>` props.
+`ref` → `HTMLElement`. The `<section>` region; closed content is `inert` (out of the tab order and the accessibility tree). `className` goes to the padded inner block.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Panel content. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | Attributes of the `<section>`. |
 
 ## Variants
 
@@ -98,42 +99,33 @@ No ref; renders a `<span>` at the end of the trigger.
 | `grouped` | One `card-bg` surface with card radius, `border-subtle` hairlines between items, no shadow of its own | FAQ, short settings lists | yes |
 | `separate` | Each item is a separate card (`card-bg`, card radius, `card-shadow`) with `--prime-space-2` between them | Heavier sections, checkout steps | |
 
-### type
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `single` | Opening one item closes the other | FAQ, step-by-step forms | yes |
-| `multiple` | Items open independently | Settings the user compares side by side | |
-
-### collapsible (single only)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `true` | Clicking the open item closes it | Most lists | yes |
-| `false` | One item always stays open | Checkout / step forms | |
-
-### Arrow
+### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| default chevron | Muted chevron rotating 180° on open | Most accordions | yes |
-| `icon` + `openIcon` | Two glyphs swapped on open, no rotation | «+ / −» style | |
+| `xs` | trigger min height 36, control text xs, panel caption 12/16, padding-x 12 | dense side panels | |
+| `s` | 40, control text s, panel body-s 13/20, padding-x 12 | compact settings | |
+| `m` | 52, control text m, panel body-m 14/20, padding-x 16 | default | yes |
+| `l` | 56, control text l, panel body-m, padding-x 20 | spacious pages | |
+| `xl` | 64, control text xl, panel body-l 16/24, padding-x 24 | landing-like FAQ | |
 
-### Leading icon
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| no `Accordion.Icon` | Label starts at the padding edge | Text-only lists | yes |
-| with `Accordion.Icon` | Secondary-colored tier icon before the label; panel text indents to the label | Settings groups with category icons | |
+| `multiple` | items open independently; `value` is a list | settings the user compares side by side | off |
+| `collapsible={false}` | without `multiple`: one item always stays open | checkout / step forms | `true` |
+| with `Accordion.Icon` | secondary-colored tier icon before the label; panel text indents to the label | settings groups with category icons | — |
 
-**Combinations** — `layout="separate"` + `collapsible={false}` for checkouts; `type="multiple"` + leading icons for settings. `collapsible` exists only on the single variant: passing it with `type="multiple"` is a type error.
-
-**Sizes** — trigger min height = control height + 8 (xs 36, s 40) or + 16 (**m 52**, l 56, xl 64); trigger text = the control text of the tier; panel text: xs caption 12/16, s body-s 13/20, m body-m 14/20, l body-m 14/20, xl body-l 16/24. Horizontal padding: xs/s 12, m 16, l 20, xl 24.
-
-**Hierarchy** — one accordion per content block; do not nest accordions inside accordion panels.
+`collapsible` exists only without `multiple`: passing both is a type error. Do not nest accordions inside accordion panels.
 
 ## States
-- Open/closed: driven by `value` / `defaultValue` + `onValueChange`. `data-state="open" | "closed"` on Item, Trigger and Content; `aria-expanded` on Trigger; `aria-hidden` on a closed Content.
-- Disabled item: `disabled` on Item → `data-disabled` on Item and Trigger, native `disabled` on the button, text in `text-disabled`, `cursor: not-allowed`.
-- Hover: trigger gets `fill-subtle`; active `fill-subtle-active`; focus-visible: inset focus ring inside the trigger.
-- Root: `data-size`, `data-layout`.
-- Height animates with motion tokens; no transition under `prefers-reduced-motion`.
+| State | Driven by | DOM |
+|---|---|---|
+| open / closed | `value` / `defaultValue` + `onValueChange` | `data-state="open" \| "closed"` on Item, Trigger and Content; `aria-expanded` on Trigger; `inert` on a closed Content |
+| disabled | `disabled` on Item | `data-disabled` on Item and Trigger, native `disabled`, `text-disabled`, `cursor: not-allowed` |
+| hover / active | pointer | trigger `fill-subtle` / `fill-subtle-active` |
+| focus-visible | keyboard | inset focus ring inside the trigger |
+
+Root: `data-size`, `data-layout`. The panel height transitions through `grid-template-rows: 0fr → 1fr` (no JS measuring, follows content that resizes while open) and the body fades in while settling by `--prime-space-1`; open uses `base` + `enter`, close `fast` + `exit`. The chevron rotates over `base`. Instant under `prefers-reduced-motion`.
 
 ## Layout & spacing
 - Takes the full width of its parent (`width: 100%`); the parent sets the measure.
@@ -142,44 +134,42 @@ No ref; renders a `<span>` at the end of the trigger.
 - Stack several accordions or an accordion and other blocks with the page gap (`--prime-space-8` between groups).
 
 ## Accessibility
-- The trigger is a native `<button>` inside an `<h3>`: Tab moves between triggers, Enter / Space toggles. No arrow-key navigation.
-- `aria-expanded` and `aria-controls` on the trigger; the panel is a `<section>` with `aria-labelledby` pointing at the trigger.
-- Arrow icons are `aria-hidden`.
-- No `labels`.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [layouts.tsx](examples/layouts.tsx) | FAQ in `grouped` and `separate` | Choosing the frame |
-| [sizes.tsx](examples/sizes.tsx) | `size` xs → xl | Matching the density of the screen |
-| [states.tsx](examples/states.tsx) | Leading icons, «+ / −» arrow, controlled `type="multiple"`, disabled item | Settings groups |
-| [checkout.tsx](examples/checkout.tsx) | `separate` + `collapsible={false}` with form fields | Step-by-step forms |
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves focus between triggers; a disabled one is skipped. |
+| `Enter` · `Space` | Opens or closes the section. |
 
-```tsx
-import { Accordion } from "prime-ui-kit";
+### ARIA
+- The trigger is a native `<button>` inside an `<h3>` with `aria-expanded` and `aria-controls`.
+- The panel is a `<section>` with `aria-labelledby`; closed content is `inert`, so it leaves the tab order and the accessibility tree.
+- The chevron and `Accordion.Icon` are `aria-hidden`.
 
-export function Example() {
-  return (
-    <Accordion.Root defaultValue="delivery">
-      <Accordion.Item value="delivery">
-        <Accordion.Header>
-          <Accordion.Trigger>
-            <span>Сколько идёт доставка?</span>
-            <Accordion.Arrow />
-          </Accordion.Trigger>
-        </Accordion.Header>
-        <Accordion.Content>По Москве — 1–2 дня.</Accordion.Content>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-}
-```
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A FAQ where one answer is open at a time — `defaultValue`. |
+| [variants.tsx](examples/variants.tsx) | One surface with hairlines between items, or every item as its own card — `layout`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier: trigger height, text, icon and padding grow together — `size`. |
+| [states.tsx](examples/states.tsx) | A disabled section that cannot be opened, next to regular ones — `disabled`. |
+| [with-icon.tsx](examples/with-icon.tsx) | A leading icon per section; the content lines up with the label after it — `Accordion.Icon`. |
+| [multiple.tsx](examples/multiple.tsx) | Several sections stay open at once; the value is a list — `multiple`. |
+| [collapsible.tsx](examples/collapsible.tsx) | Checkout steps where one step always stays open — `collapsible`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the open sections and opens or closes all of them at once — `value`, `onValueChange`. |
 
 ## Mistakes
 - Trigger without `Accordion.Header` → wrap it so the section has a heading.
-- `value={["a"]}` without `type="multiple"` → arrays only in multiple mode.
+- `value={["a"]}` without `multiple` → arrays only with `multiple`.
+- Adding a chevron icon to the trigger → the trigger draws one itself.
 - Expecting `className` on Content to style the `<section>` → it styles the inner padded block.
 - Accordion used for tab-like switching → use Tabs.
 
 ## Related
-[Tabs](../tabs/COMPONENT.md) · [Card](../card/COMPONENT.md) · [Stepper](../stepper/COMPONENT.md) · [Divider](../divider/COMPONENT.md)
+- **Built from:** Icon (`nav.chevronDown`)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [Card](../card/COMPONENT.md), [Stepper](../stepper/COMPONENT.md), [Divider](../divider/COMPONENT.md)

package/src/components/accordion/examples/collapsible.tsx

@@ -0,0 +1,27 @@
+/** Checkout steps where one step always stays open — `collapsible`. */
+import { Accordion } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const STEPS = [
+  { value: "address", title: "1. Адрес доставки", text: "Москва, Тверская, 7, офис 12." },
+  { value: "payment", title: "2. Оплата", text: "Картой онлайн или по счёту для юрлиц." },
+  { value: "confirm", title: "3. Подтверждение", text: "Проверьте состав заказа и сумму." },
+];
+
+export default function AccordionCollapsibleExample() {
+  return (
+    <div className={styles.panel}>
+      <Accordion.Root layout="separate" defaultValue="address" collapsible={false}>
+        {STEPS.map((step) => (
+          <Accordion.Item key={step.value} value={step.value}>
+            <Accordion.Header>
+              <Accordion.Trigger>{step.title}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>{step.text}</Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </div>
+  );
+}

package/src/components/accordion/examples/controlled.tsx

@@ -0,0 +1,36 @@
+/** The parent owns the open sections and opens or closes all of them at once — `value`, `onValueChange`. */
+import { Accordion, Button } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const SECTIONS = [
+  { value: "general", title: "Общие", text: "Название компании, часовой пояс и валюта." },
+  { value: "team", title: "Команда", text: "12 сотрудников, 3 приглашения ждут ответа." },
+  { value: "billing", title: "Оплата", text: "Тариф «Бизнес», следующий счёт 12 ноября." },
+];
+
+const ALL = SECTIONS.map((section) => section.value);
+
+export default function AccordionControlledExample() {
+  const [open, setOpen] = React.useState<string[]>(["general"]);
+  const allOpen = open.length === ALL.length;
+
+  return (
+    <div className={styles.panel}>
+      <Button.Root variant="ghost" tone="neutral" onClick={() => setOpen(allOpen ? [] : ALL)}>
+        {allOpen ? "Свернуть все" : "Развернуть все"}
+      </Button.Root>
+      <Accordion.Root multiple value={open} onValueChange={setOpen}>
+        {SECTIONS.map((section) => (
+          <Accordion.Item key={section.value} value={section.value}>
+            <Accordion.Header>
+              <Accordion.Trigger>{section.title}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>{section.text}</Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </div>
+  );
+}

package/src/components/accordion/examples/examples.module.css

@@ -1,43 +1,10 @@
-/* Layout for the Accordion examples: layout only, text goes through Typography. */
+/* Layout of the Accordion scenarios: semantic tokens only. */
 
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-8);
-  width: min(100%, calc(var(--prime-space-10) * 16));
-  min-width: 0;
-}
-
-.grid {
+/* A readable column for the accordion (the root itself is always full width), with whatever
+   sits above it (a caption, a toolbar button) kept at its own width. */
+.panel {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 3)), 1fr));
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
+  justify-items: start;
   gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
-  padding-top: var(--prime-space-1);
-}
-
-.choices {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-}
-
-.row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-10) * 4)), 1fr));
-  gap: var(--prime-space-3);
+  width: min(100%, calc(var(--prime-space-24) * 5));
 }

package/src/components/accordion/examples/multiple.tsx

@@ -0,0 +1,31 @@
+/** Several sections stay open at once; the value is a list — `multiple`. */
+import { Accordion } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SECTIONS = [
+  { value: "profile", title: "Профиль", text: "Имя, фото и язык интерфейса." },
+  {
+    value: "notifications",
+    title: "Уведомления",
+    text: "Письма о заказах и сводка по понедельникам.",
+  },
+  { value: "integrations", title: "Интеграции", text: "1С, Битрикс24 и вебхуки." },
+];
+
+export default function AccordionMultipleExample() {
+  return (
+    <div className={styles.panel}>
+      <Accordion.Root multiple defaultValue={["profile", "notifications"]}>
+        {SECTIONS.map((section) => (
+          <Accordion.Item key={section.value} value={section.value}>
+            <Accordion.Header>
+              <Accordion.Trigger>{section.title}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>{section.text}</Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </div>
+  );
+}

package/src/components/accordion/examples/overview.tsx

@@ -0,0 +1,39 @@
+/** A FAQ where one answer is open at a time — `defaultValue`. */
+import { Accordion } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const FAQ = [
+  {
+    value: "delivery",
+    question: "Сколько идёт доставка?",
+    answer: "По Москве — 1–2 дня, по России — от 3 до 7 рабочих дней.",
+  },
+  {
+    value: "return",
+    question: "Как вернуть товар?",
+    answer: "Оформите возврат в личном кабинете в течение 14 дней после получения.",
+  },
+  {
+    value: "payment",
+    question: "Какие способы оплаты есть?",
+    answer: "Карта, СБП и счёт для юрлиц. Оплата при получении — в пунктах выдачи.",
+  },
+];
+
+export default function AccordionOverviewExample() {
+  return (
+    <div className={styles.panel}>
+      <Accordion.Root defaultValue="delivery">
+        {FAQ.map((item) => (
+          <Accordion.Item key={item.value} value={item.value}>
+            <Accordion.Header>
+              <Accordion.Trigger>{item.question}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>{item.answer}</Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </div>
+  );
+}

package/src/components/accordion/examples/sizes.tsx

@@ -1,39 +1,28 @@
-/** Accordion at every size tier xs → xl. Match `size` to the density of the surrounding screen. */
-import { Accordion, type ControlSize, Typography } from "prime-ui-kit";
+/** Every size tier: trigger height, text, icon and padding grow together — `size`. */
+import { Accordion, Typography } from "prime-ui-kit";
+
 import styles from "./examples.module.css";
 
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function AccordionSizesExample() {
   return (
-    <div className={styles.grid}>
-      {sizes.map((size) => (
-        <div key={size} className={styles.group}>
-          <Typography.Root variant="code" tone="muted">
-            size="{size}"
-          </Typography.Root>
-          <Accordion.Root size={size} defaultValue="a">
-            <Accordion.Item value="a">
+    <>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.panel}>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+          <Accordion.Root size={size}>
+            <Accordion.Item value="plan">
               <Accordion.Header>
-                <Accordion.Trigger>
-                  <span>Тариф</span>
-                  <Accordion.Arrow />
-                </Accordion.Trigger>
+                <Accordion.Trigger>Тариф и продление</Accordion.Trigger>
               </Accordion.Header>
               <Accordion.Content>«Бизнес», продление 12 ноября.</Accordion.Content>
             </Accordion.Item>
-            <Accordion.Item value="b">
-              <Accordion.Header>
-                <Accordion.Trigger>
-                  <span>Счета</span>
-                  <Accordion.Arrow />
-                </Accordion.Trigger>
-              </Accordion.Header>
-              <Accordion.Content>Последний счёт оплачен.</Accordion.Content>
-            </Accordion.Item>
           </Accordion.Root>
         </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/accordion/examples/states.tsx

@@ -1,56 +1,31 @@
-/** Leading icons, a custom «+ / −» arrow, controlled `type="multiple"` and a disabled item. Use for settings groups where several sections can stay open. */
-
-import { Lock, Minus, Plus, Shield, User } from "lucide-react";
-import { Accordion, Typography } from "prime-ui-kit";
-import * as React from "react";
+/** A disabled section that cannot be opened, next to regular ones — `disabled`. */
+import { Accordion } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function AccordionStatesExample() {
-  const [open, setOpen] = React.useState<string[]>(["profile", "security"]);
-
   return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          <Typography.Root as="span" variant="code" tone="muted">
-            type="multiple"
-          </Typography.Root>{" "}
-          · открыто: {open.length ? open.join(", ") : "ничего"}
-        </Typography.Root>
-        <Accordion.Root type="multiple" value={open} onValueChange={(v) => setOpen(v as string[])}>
-          <Accordion.Item value="profile">
-            <Accordion.Header>
-              <Accordion.Trigger>
-                <Accordion.Icon as={User} />
-                <span>Профиль</span>
-                <Accordion.Arrow icon={Plus} openIcon={Minus} />
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>Имя, фото и язык интерфейса.</Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item value="security">
-            <Accordion.Header>
-              <Accordion.Trigger>
-                <Accordion.Icon as={Shield} />
-                <span>Безопасность</span>
-                <Accordion.Arrow icon={Plus} openIcon={Minus} />
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>Пароль, двухфакторная защита и активные сессии.</Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item value="sso" disabled>
-            <Accordion.Header>
-              <Accordion.Trigger>
-                <Accordion.Icon as={Lock} />
-                <span>Единый вход (SSO) — на тарифе «Корпоративный»</span>
-                <Accordion.Arrow icon={Plus} openIcon={Minus} />
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>Недоступно.</Accordion.Content>
-          </Accordion.Item>
-        </Accordion.Root>
-      </div>
+    <div className={styles.panel}>
+      <Accordion.Root defaultValue="profile">
+        <Accordion.Item value="profile">
+          <Accordion.Header>
+            <Accordion.Trigger>Профиль</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Имя, фото и язык интерфейса.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="security">
+          <Accordion.Header>
+            <Accordion.Trigger>Безопасность</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Пароль, двухфакторная защита и активные сессии.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="sso" disabled>
+          <Accordion.Header>
+            <Accordion.Trigger>Единый вход (SSO) — на тарифе «Корпоративный»</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Подключите тариф, чтобы настроить единый вход.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
     </div>
   );
 }

package/src/components/accordion/examples/variants.tsx

@@ -0,0 +1,35 @@
+/** One surface with hairlines between items, or every item as its own card — `layout`. */
+import { Accordion, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const LAYOUTS = ["grouped", "separate"] as const;
+
+const SECTIONS = [
+  { value: "plan", title: "Тариф", text: "«Бизнес», продление 12 ноября." },
+  { value: "invoices", title: "Счета", text: "Последний счёт оплачен 1 октября." },
+];
+
+export default function AccordionVariantsExample() {
+  return (
+    <>
+      {LAYOUTS.map((layout) => (
+        <div key={layout} className={styles.panel}>
+          <Typography as="span" variant="caption" tone="muted">
+            {layout}
+          </Typography>
+          <Accordion.Root layout={layout} defaultValue="plan">
+            {SECTIONS.map((section) => (
+              <Accordion.Item key={section.value} value={section.value}>
+                <Accordion.Header>
+                  <Accordion.Trigger>{section.title}</Accordion.Trigger>
+                </Accordion.Header>
+                <Accordion.Content>{section.text}</Accordion.Content>
+              </Accordion.Item>
+            ))}
+          </Accordion.Root>
+        </div>
+      ))}
+    </>
+  );
+}