prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/patterns/screen-states.tsx

@@ -0,0 +1,186 @@
+/** Screen states: a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states. */
+import {
+  Banner,
+  Button,
+  Card,
+  Crossfade,
+  DataTable,
+  type DataTableColumn,
+  EmptyPage,
+  Icon,
+  PageContent,
+  Skeleton,
+  Typography,
+  useNotifications,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen-states.module.css";
+
+type Status = "error" | "loading" | "ready";
+type Payment = { id: string; payer: string; purpose: string; amount: number };
+
+const PAYMENTS: Payment[] = [
+  { id: "b1", payer: "ООО «Гранит»", purpose: "Оплата по сч. 2026-0414", amount: 94_750 },
+  { id: "b2", payer: "ИП Орлов Д. С.", purpose: "Предоплата за обучение", amount: 18_000 },
+  { id: "b3", payer: "АО «Альфа Медиа»", purpose: "Без указания счёта", amount: 380_000 },
+];
+
+const ACCOUNTS = [
+  { name: "Т-Банк, расчётный", balance: "4 812 300 ₽" },
+  { name: "Сбербанк, расчётный", balance: "1 207 950 ₽" },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  { id: "payer", header: "Плательщик", accessor: "payer" },
+  { id: "purpose", header: "Назначение", accessor: "purpose" },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+export default function ScreenStatesPattern() {
+  const { notify } = useNotifications();
+  const [status, setStatus] = React.useState<Status>("error");
+
+  const retry = () => {
+    setStatus("loading");
+    window.setTimeout(() => {
+      setStatus("ready");
+      notify({
+        tone: "success",
+        title: "Выписка получена",
+        description: "3 платежа ждут разнесения",
+      });
+    }, 1500);
+  };
+
+  return (
+    <PageContent.Section aria-labelledby="reconcile-title">
+      <PageContent.Header>
+        <PageContent.Title id="reconcile-title">Сверка с банком</PageContent.Title>
+        <PageContent.Description>
+          Поступления из выписок, которые нужно связать со счетами.
+        </PageContent.Description>
+      </PageContent.Header>
+      <PageContent.Body>
+        {/* The page banner and the panels are one block: the banner, with the 40 below it, comes and
+            goes inside a Crossfade, so the panels glide instead of jumping. */}
+        <div className={styles.lead}>
+          <Crossfade state={status === "error" ? "error" : "ok"}>
+            {status === "error" ? (
+              <div className={styles.bannerSlot}>
+                <Banner.Root tone="danger">
+                  <Banner.Content>
+                    <Banner.Icon>
+                      <Icon name="status.danger" />
+                    </Banner.Icon>
+                    <Banner.Title>Выписка за 7 октября не получена</Banner.Title>
+                    <Banner.Description>
+                      Т-Банк не ответил на запрос. Остатки показаны на 6 октября.
+                    </Banner.Description>
+                    <Banner.Actions>
+                      <Button.Root tone="danger" onClick={retry}>
+                        Повторить
+                      </Button.Root>
+                    </Banner.Actions>
+                  </Banner.Content>
+                </Banner.Root>
+              </div>
+            ) : null}
+          </Crossfade>
+
+          <div className={styles.panels}>
+            <Card.Root variant="panel" aria-busy={status === "loading"}>
+              <Card.Header>
+                <Card.Title as="h2">Остатки</Card.Title>
+                <Typography as="span" variant="caption" tone="muted">
+                  {status === "ready" ? "на 7 октября" : "на 6 октября"}
+                </Typography>
+              </Card.Header>
+              <Card.Body>
+                {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
+                <Crossfade state={status === "loading" ? "loading" : "ready"}>
+                  {status === "loading" ? (
+                    <ul className={styles.accounts}>
+                      {ACCOUNTS.map((account) => (
+                        <li key={account.name} className={styles.account}>
+                          <Skeleton className={styles.nameBar} />
+                          {/* title-m is the l text tier: 16 / 24. */}
+                          <Skeleton size="l" className={styles.balanceBar} />
+                        </li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <ul className={styles.accounts}>
+                      {ACCOUNTS.map((account) => (
+                        <li key={account.name} className={styles.account}>
+                          <Typography as="span" variant="body-m" tone="secondary">
+                            {account.name}
+                          </Typography>
+                          <Typography as="span" variant="title-m" className={styles.amount}>
+                            {account.balance}
+                          </Typography>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </Crossfade>
+              </Card.Body>
+            </Card.Root>
+
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">Правила разнесения</Card.Title>
+              </Card.Header>
+              <Card.Body>
+                <EmptyPage.Root size="s" aria-labelledby="rules-empty">
+                  <EmptyPage.Icon tone="accent">
+                    <Icon name="action.filter" />
+                  </EmptyPage.Icon>
+                  <EmptyPage.Title as="h3" id="rules-empty">
+                    Правил пока нет
+                  </EmptyPage.Title>
+                  <EmptyPage.Description>
+                    Правило свяжет платёж со счётом по ИНН или назначению.
+                  </EmptyPage.Description>
+                  <EmptyPage.Actions>
+                    <Button.Root variant="soft" tone="neutral">
+                      Создать правило
+                    </Button.Root>
+                  </EmptyPage.Actions>
+                </EmptyPage.Root>
+              </Card.Body>
+            </Card.Root>
+          </div>
+        </div>
+
+        <section className={styles.region} aria-labelledby="unmatched-title">
+          <Typography as="h2" variant="title-m" id="unmatched-title">
+            Неразнесённые платежи
+          </Typography>
+          <DataTable
+            columns={COLUMNS}
+            rows={status === "ready" ? PAYMENTS : []}
+            getRowKey={(row) => row.id}
+            paging="none"
+            loading={status === "loading"}
+            loadingRows={3}
+            error={status === "error" ? "Платежи появятся после загрузки выписки" : undefined}
+            empty="Все платежи разнесены"
+          />
+        </section>
+      </PageContent.Body>
+    </PageContent.Section>
+  );
+}

package/dist/skill/patterns/settings-page.module.css

@@ -0,0 +1,47 @@
+/* Settings page: heading column + panel per section; wraps into one column without breakpoints. */
+
+.section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--prime-space-4) var(--prime-space-10);
+}
+
+/* ~16rem of heading and lead text; drops above the panel once the panel would get < 30rem. */
+.lead {
+  display: grid;
+  flex: 1 1 calc(var(--prime-space-16) * 4);
+  gap: var(--prime-space-1);
+  min-width: 0;
+}
+
+.panel {
+  flex: 999 1 calc(var(--prime-space-24) * 5);
+  min-width: 0;
+}
+
+/* Field → field 20. */
+
+/* Two short related fields side by side when there is room; tops aligned. */
+.pair {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 3)), 1fr));
+  align-items: start;
+  gap: var(--prime-space-5);
+}
+
+/* Danger zone row: text takes the room, the button stays at the end and wraps under it. */
+.danger {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+}
+
+.dangerText {
+  display: grid;
+  flex: 1 1 calc(var(--prime-space-16) * 4);
+  gap: var(--prime-space-1);
+  min-width: 0;
+}

package/dist/skill/patterns/settings-page.tsx

@@ -0,0 +1,217 @@
+/** A settings page: sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm. */
+import {
+  Button,
+  Card,
+  ConfirmDialog,
+  Fieldset,
+  Input,
+  PageContent,
+  Select,
+  Switch,
+  Textarea,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./settings-page.module.css";
+
+const TIMEZONES = [
+  { value: "Europe/Kaliningrad", label: "Калининград (UTC+2)" },
+  { value: "Europe/Moscow", label: "Москва (UTC+3)" },
+  { value: "Europe/Samara", label: "Самара (UTC+4)" },
+  { value: "Asia/Yekaterinburg", label: "Екатеринбург (UTC+5)" },
+  { value: "Asia/Novosibirsk", label: "Новосибирск (UTC+7)" },
+  { value: "Asia/Vladivostok", label: "Владивосток (UTC+10)" },
+];
+
+const ALERTS = [
+  {
+    name: "payments",
+    label: "Оплата счетов",
+    hint: "Письмо, когда клиент оплатил счёт.",
+    defaultChecked: true,
+  },
+  {
+    name: "overdue",
+    label: "Просрочка",
+    hint: "Напоминание менеджеру на следующий день после срока.",
+    defaultChecked: true,
+  },
+  {
+    name: "digest",
+    label: "Еженедельная сводка",
+    hint: "По понедельникам в 09:00: выручка, долги, новые клиенты.",
+    defaultChecked: false,
+  },
+];
+
+export default function SettingsPagePattern() {
+  const [innError, setInnError] = React.useState<string>();
+  const [saving, setSaving] = React.useState(false);
+  const [saved, setSaved] = React.useState(false);
+
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const inn = String(new FormData(event.currentTarget).get("inn") ?? "").replace(/\s/g, "");
+    if (!/^\d{10}(\d{2})?$/.test(inn)) {
+      setInnError("ИНН — 10 цифр для компании или 12 для ИП");
+      return;
+    }
+    setInnError(undefined);
+    setSaving(true);
+    setSaved(false);
+    window.setTimeout(() => {
+      setSaving(false);
+      setSaved(true);
+      window.setTimeout(() => setSaved(false), 2000);
+    }, 900);
+  };
+
+  const removeWorkspace = () => new Promise<void>((resolve) => window.setTimeout(resolve, 1200));
+
+  return (
+    <PageContent.Root maxWidth="wide" aria-labelledby="settings-title">
+      <PageContent.Header>
+        <PageContent.Title id="settings-title">Настройки</PageContent.Title>
+        <PageContent.Description>
+          Реквизиты компании, уведомления и управление рабочим пространством.
+        </PageContent.Description>
+      </PageContent.Header>
+      <PageContent.Body>
+        <section className={styles.section} aria-labelledby="company-title">
+          <div className={styles.lead}>
+            <Typography as="h2" variant="title-m" id="company-title">
+              Компания
+            </Typography>
+            <Typography variant="body-m" tone="secondary">
+              Попадают в счета, акты и письма клиентам.
+            </Typography>
+          </div>
+          <form
+            className={styles.panel}
+            noValidate
+            onSubmit={save}
+            onReset={() => setInnError(undefined)}
+          >
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Fieldset disabled={saving}>
+                  <Input.Root label="Название">
+                    <Input.Wrapper>
+                      <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                    </Input.Wrapper>
+                  </Input.Root>
+                  <div className={styles.pair}>
+                    <Input.Root
+                      label="ИНН"
+                      error={innError}
+                      hint="10 или 12 цифр"
+                      reserveSupportRow
+                    >
+                      <Input.Wrapper>
+                        <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
+                      <Select.Trigger>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content searchable>
+                        {TIMEZONES.map((zone) => (
+                          <Select.Item key={zone.value} value={zone.value}>
+                            {zone.label}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select.Root>
+                  </div>
+                  <Textarea.Root
+                    name="address"
+                    label="Юридический адрес"
+                    optional
+                    rows={2}
+                    defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
+                  />
+                </Fieldset>
+              </Card.Body>
+              <Card.Footer>
+                <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
+                  Отменить изменения
+                </Button.Root>
+                <Button.Root type="submit" loading={saving}>
+                  {saved ? "Сохранено" : "Сохранить"}
+                </Button.Root>
+              </Card.Footer>
+            </Card.Root>
+          </form>
+        </section>
+
+        <section className={styles.section} aria-labelledby="alerts-title">
+          <div className={styles.lead}>
+            <Typography as="h2" variant="title-m" id="alerts-title">
+              Уведомления
+            </Typography>
+            <Typography variant="body-m" tone="secondary">
+              Включаются сразу, без сохранения.
+            </Typography>
+          </div>
+          <div className={styles.panel}>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Fieldset aria-labelledby="alerts-title">
+                  {ALERTS.map((alert) => (
+                    <Switch.Root
+                      key={alert.name}
+                      name={alert.name}
+                      defaultChecked={alert.defaultChecked}
+                      hint={alert.hint}
+                    >
+                      <Switch.Label>{alert.label}</Switch.Label>
+                    </Switch.Root>
+                  ))}
+                </Fieldset>
+              </Card.Body>
+            </Card.Root>
+          </div>
+        </section>
+
+        <section className={styles.section} aria-labelledby="danger-title">
+          <div className={styles.lead}>
+            <Typography as="h2" variant="title-m" id="danger-title">
+              Рабочее пространство
+            </Typography>
+            <Typography variant="body-m" tone="secondary">
+              Действия, которые нельзя отменить.
+            </Typography>
+          </div>
+          <div className={styles.panel}>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <div className={styles.danger}>
+                  <div className={styles.dangerText}>
+                    <Typography variant="title-s">Удалить пространство</Typography>
+                    <Typography variant="body-s" tone="secondary">
+                      Счета, клиенты и история будут удалены для всех участников.
+                    </Typography>
+                  </div>
+                  <ConfirmDialog.Root
+                    title="Удалить «Прайм Софт»?"
+                    description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
+                    confirmLabel="Удалить пространство"
+                    onConfirm={removeWorkspace}
+                  >
+                    <ConfirmDialog.Trigger>
+                      <Button.Root variant="outline" tone="danger">
+                        Удалить
+                      </Button.Root>
+                    </ConfirmDialog.Trigger>
+                  </ConfirmDialog.Root>
+                </div>
+              </Card.Body>
+            </Card.Root>
+          </div>
+        </section>
+      </PageContent.Body>
+    </PageContent.Root>
+  );
+}

package/dist/skill/reference/components/accordion/COMPONENT.md

@@ -0,0 +1,175 @@
+# Accordion
+
+**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 (`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 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).
+
+## Import
+```tsx
+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> 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
+`ref` → `HTMLDivElement`. Owns which items are open; sets the size tier and the layout.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `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
+`ref` → `HTMLDivElement`. One section; `data-state="open" | "closed"`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | — (required) | Item id used in `value`. |
+| `disabled` | `boolean` | `false` | The item cannot be toggled; its trigger is disabled. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
+
+### Accordion.Header
+`ref` → `HTMLHeadingElement`. The `<h3>` around the trigger.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLHeadingElement>` | — | `className` and the other heading attributes. |
+
+### Accordion.Trigger
+`ref` → `HTMLButtonElement`. The `<button>` that toggles the item; draws a chevron after its children that turns when open.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `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. |
+
+### Accordion.Icon
+`ref` → `HTMLSpanElement`. Decorative leading icon (`aria-hidden`) of the trigger; the content then lines up with the label.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — (required) | The icon, e.g. `<Icon name="field.calendar" />`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
+
+### Accordion.Content
+`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
+
+### layout
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `grouped` | One surface — a layer of the ladder (`layer-current`) — 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 (`layer-current`, card radius, the raised whisper on the page) with `--prime-space-2` between them | Heavier sections, checkout steps | |
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `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 | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `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 | — |
+
+`collapsible` exists only without `multiple`: passing both is a type error. Do not nest accordions inside accordion panels.
+
+## States
+| 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-muted-hover` (two ladder steps off the accordion's layer, so it never lands on the host's color at the edges) / `fill-strong` |
+| 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.
+- Panel content is a flex column with `--prime-space-3` gap; it reserves `--prime-focus-space` at the top so focus rings of fields inside are not clipped.
+- The root is a layer of the surface ladder (`data-depth`): fields inside panels take that layer's fill automatically.
+- Stack several accordions or an accordion and other blocks with the page gap (`--prime-space-8` between groups).
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves focus between triggers; a disabled one is skipped. |
+| `Enter` · `Space` | Opens or closes the section. |
+
+### 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`.
+
+### 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 `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
+- **Built from:** `Icon` (`nav.chevronDown`)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [Card](../card/COMPONENT.md), [Stepper](../stepper/COMPONENT.md), [Divider](../divider/COMPONENT.md)

package/dist/skill/reference/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>
+  );
+}