prime-ui-kit 0.7.11 → 0.9.0

package/src/components/digit-input/examples/states.tsx

@@ -1,22 +1,55 @@
-import { DigitInput } from "prime-ui-kit";
+/** Empty, partly filled, filled, invalid and disabled codes. Use it to check every state of a code field. */
+import { DigitInput, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
 
-/**
- * Обычное поле, визуальная ошибка (`hasError`) и отключённый ввод (`disabled`).
- * Паритет с `playground/snippets/digit-input/states.tsx`.
- */
 export default function DigitInputStatesExample() {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        alignItems: "center",
-      }}
-    >
-      <DigitInput.Root length={4} defaultValue="42" />
-      <DigitInput.Root length={4} defaultValue="12" hasError />
-      <DigitInput.Root length={4} defaultValue="99" disabled />
+    <div className={styles.statesGrid}>
+      <div className={styles.cell}>
+        <DigitInput.Root length={4} labels={{ group: "Пустой код" }} />
+        <Typography.Root variant="caption" tone="muted">
+          Пустое
+        </Typography.Root>
+      </div>
+      <div className={styles.cell}>
+        <DigitInput.Root
+          length={4}
+          defaultValue="42"
+          labels={{ group: "Частично введённый код" }}
+        />
+        <Typography.Root variant="caption" tone="muted">
+          Частично заполнено
+        </Typography.Root>
+      </div>
+      <div className={styles.cell}>
+        <DigitInput.Root length={4} defaultValue="4207" labels={{ group: "Введённый код" }} />
+        <Typography.Root variant="caption" tone="muted">
+          Заполнено
+        </Typography.Root>
+      </div>
+      <div className={styles.cell}>
+        <DigitInput.Root
+          invalid
+          length={4}
+          defaultValue="1111"
+          labels={{ group: "Неверный код" }}
+        />
+        <Typography.Root variant="caption" tone="muted">
+          invalid
+        </Typography.Root>
+      </div>
+      <div className={styles.cell}>
+        <DigitInput.Root
+          length={4}
+          defaultValue="99"
+          disabled
+          labels={{ group: "Код недоступен" }}
+        />
+        <Typography.Root variant="caption" tone="muted">
+          disabled
+        </Typography.Root>
+      </div>
     </div>
   );
 }

package/src/components/digit-input/examples/surfaces.tsx

@@ -0,0 +1,6 @@
+/** Cells use the field fill: white on the canvas, `field-bg-surface` inside a card or popover. Place the code field on any surface without overrides. */
+import { DigitInput } from "prime-ui-kit";
+
+export default function DigitInputSurfacesExample() {
+  return <DigitInput.Root length={4} defaultValue="73" labels={{ group: "PIN-код" }} />;
+}

package/src/components/digit-input/examples/verification-step.tsx

@@ -1,21 +1,62 @@
-import { Button, DigitInput, Hint, Label } from "prime-ui-kit";
+/** A sign-in confirmation step in a card: Label, a six-digit code, a Hint that turns into an error, resend and submit actions. Use it as the full OTP screen pattern. */
+import { Button, Card, DigitInput, Hint, Label, Typography } from "prime-ui-kit";
 import * as React from "react";
 
-/** Шаг подтверждения: кнопка «Продолжить» активна только после ввода полного кода. */
-export default function VerificationStepExample() {
+import styles from "./examples.module.css";
+
+const VALID_CODE = "123456";
+
+export default function DigitInputVerificationStepExample() {
+  const id = React.useId();
   const [code, setCode] = React.useState("");
-  const isComplete = code.length === 6;
+  const [error, setError] = React.useState(false);
+
+  const verify = (value: string) => setError(value !== VALID_CODE);
 
   return (
-    <>
-      <Label.Root>Код из письма</Label.Root>
-      <DigitInput.Root length={6} value={code} onChange={setCode} />
-      <Button.Root disabled={!isComplete} type="button" variant="primary">
-        Продолжить
-      </Button.Root>
-      <Hint.Root variant="default">
-        Введите шестизначный код со страницы подтверждения email.
-      </Hint.Root>
-    </>
+    <Card.Root variant="panel" className={styles.card}>
+      <Card.SectionHeader>
+        <Card.SectionTitle>Подтвердите вход</Card.SectionTitle>
+      </Card.SectionHeader>
+      <Card.Body>
+        <form
+          className={styles.form}
+          onSubmit={(e) => {
+            e.preventDefault();
+            verify(code);
+          }}
+        >
+          <Typography.Root variant="body-s" tone="muted">
+            Мы отправили код на +7 900 ••• 12 34. Для демо подходит {VALID_CODE}.
+          </Typography.Root>
+          <div className={styles.field}>
+            <Label.Root>Код из SMS</Label.Root>
+            <DigitInput.Root
+              invalid={error}
+              length={6}
+              value={code}
+              onValueChange={(value) => {
+                setCode(value);
+                setError(false);
+              }}
+              onComplete={verify}
+              labels={{ group: "Код из SMS" }}
+              aria-describedby={`${id}-hint`}
+            />
+            <Hint.Root invalid={error} id={`${id}-hint`}>
+              {error ? "Неверный код. Проверьте SMS и введите снова." : "Код действует 5 минут."}
+            </Hint.Root>
+          </div>
+          <div className={styles.actions}>
+            <Button.Root variant="ghost" tone="neutral" type="button" onClick={() => setCode("")}>
+              Отправить код ещё раз
+            </Button.Root>
+            <Button.Root type="submit" disabled={code.length < 6}>
+              Подтвердить
+            </Button.Root>
+          </div>
+        </form>
+      </Card.Body>
+    </Card.Root>
   );
 }

package/src/components/divider/COMPONENT.md

@@ -1,102 +1,104 @@
 # Divider
 
-## Canonical
+**Category:** layout
 
-- **What:** `Divider.Root` draws a horizontal or vertical separator (pseudo-element lines) with optional **children** (label, icon + text). Nested controls inherit **`size`** via **`ControlSizeProvider`**.
-- **Defaults:** `orientation="horizontal"`, `variant="default"`, `size="m"`. **`align`** defaults to **`start`** for **`variant="text"`**, otherwise **`center`**.
-- **Import:** `import { Divider } from "prime-ui-kit"`.
+> A hairline separator, horizontal or vertical, with or without a label.
 
+## When to use
+- Separate rows of a list or groups inside one panel, menu or card.
+- An «или» between two alternative actions (sign in / get a link by email).
+- A section heading drawn on a line (`align="start"`).
+- A vertical break between groups of buttons in a toolbar row.
+
+## When not to use
+- To separate cards or panels from each other → use fill and spacing ([Card](../card/COMPONENT.md), [PageContent](../page-content/COMPONENT.md) sections), never a line.
+- Separators inside a dropdown menu → use `Dropdown.Separator` ([Dropdown](../dropdown/COMPONENT.md)).
+- Row lines of a table → [DataTable](../data-table/COMPONENT.md) draws them itself.
+- Collapsible sections → use [Accordion](../accordion/COMPONENT.md).
+
+## Import
 ```tsx
 import { Divider } from "prime-ui-kit";
-
-export function Example() {
-  return <Divider.Root />;
-}
 ```
 
-## Extended
-
-### About
-
-`Divider` is a non-interactive visual separator: a line built from `::before` / `::after`, optionally wrapping a label or icon. **`Icon`** inside **`children`** does not use its own size classes — glyph size follows **`--prime-divider-icon`** from the root **`data-size`**.
+## API
 
-**When to use**
+### Divider.Root
+`forwardRef` to `<div>`. No `asChild`.
 
-- Separate blocks in a form, card, or settings column without an extra bordered panel.
-- Full-width rows in a list-like shell (`examples/list-separators.tsx`).
-- Section-style labels inline with the line (`variant="text"`) — see `examples/section-breaks.tsx`.
-- Between flex children in a column when rhythm comes from the parent **`gap`** (`variant="line-spacing"`) — see `examples/line-spacing-column.tsx`.
-- A vertical bar between toolbar actions (`orientation="vertical"`); parent row should **`align-items: stretch`** so the line gets height.
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Full-width line in a column, or a vertical line that stretches to the height of a flex row. |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Position of the label on the line. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of the surrounding content: label type, gap and icon size. |
+| `children` | `ReactNode` | — | Label (text, or icon + text). Without children the divider is a plain line. An `Icon` inside is sized by the divider, not by its own `size`. |
+| `role` | `string` | `"separator"` | Use `"presentation"` for decorative lines between rows of an already structured list. |
+| `className` | `string` | — | Extra class on the root. |
 
-**When not to use**
++ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
 
-- As the only semantic boundary for document structure — use real headings / **`section`** (and **`hr`** when a thematic break is appropriate).
-- For switchable or collapsible grouping — use [Tabs](../tabs/COMPONENT.md) or [Accordion](../accordion/COMPONENT.md).
-- **`orientation="vertical"`** in a row with no definite height — the vertical line needs stretch from the parent.
-- Purely decorative repetition next to text that already states structure — hide from AT (**`role="presentation"`**, **`aria-hidden`**) per **Rules**.
+## Variants
 
-### Composition
+### orientation
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `horizontal` | 1px `border-subtle` line across the full row width | Between rows or groups stacked in a column | yes |
+| `vertical` | 1px line stretched to the row height (`align-self: stretch`) | Between groups of buttons in a toolbar | |
 
-- Single public part: **`Divider.Root`** — optional **`children`** render in an inner **`span`** (**`styles.content`**).
-- Place **`Divider.Root`** in document order where the break should appear; no required child structure beyond optional slot content.
+### align (only with children)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `start` | Label flush with the start edge, line fills the rest | Section heading on a line («Безопасность») | |
+| `center` | Line – label – line | «или» between alternatives | yes |
+| `end` | Line fills the start, label flush with the end edge | Trailing meta label (rare) | |
 
-### Examples (source)
+### Content
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| no children | One plain line, no gap | List rows, groups | yes |
+| text / icon + text | Muted medium-weight label between line segments, tier gap | Headings, «или» | |
 
-| Scenario | File |
-|----------|------|
-| Section breaks (`variant="text"`) | [`examples/section-breaks.tsx`](examples/section-breaks.tsx) |
-| Splits inside one card | [`examples/card-splits.tsx`](examples/card-splits.tsx) |
-| List row separators | [`examples/list-separators.tsx`](examples/list-separators.tsx) |
-| Inset copy in a stack, full-bleed rules | [`examples/inset-stack.tsx`](examples/inset-stack.tsx) |
-| `line-spacing` + vertical toolbar | [`examples/line-spacing-column.tsx`](examples/line-spacing-column.tsx) |
+**Combinations**
+- Recommended: plain horizontal line in a `gap` column; `align="start"` + icon + text as a section heading; `align="center"` + «или».
+- Pointless: `orientation="vertical"` with a long label; `align` without children (has no effect).
 
-Shared layout tokens for the examples: [`examples/divider-examples.module.css`](examples/divider-examples.module.css).
+**Sizes** — label / gap / icon per tier: xs 12/16 · 4 · 14, s 12/16 · 8 · 16, **m 13/20 · 8 · 16**, l 14/20 · 8 · 20, xl 16/24 · 12 · 20. Match the tier of the controls or text around it.
 
-Playground snippets (same demos as `playground/sections/DividerSection.tsx`):
+**Hierarchy** — lines are the only separators in the system and stay `border-subtle`; do not stack several labelled dividers in a row, use one heading per group.
 
-- **`variants.tsx`** — empty horizontal line; **`default`** with centered label; **`variant="text"`**; **`line-spacing`** between rows in a column; **`orientation="vertical"`** between toolbar-style buttons; full-width line between list rows (**`size="s"`**).
-- **`sizes.tsx`** — **`variant="text"`** at **`size`** **`s`**, **`m`**, and **`xl`** (three steps to compare label scale and spacing).
-- **`composition.tsx`** — **`Icon`** + label inside **`variant="text"`** **`size="m"`**; second divider at **`size="xl"`** with icon + label.
+## States
+Static component. DOM: `data-orientation`, `data-align`, `data-size` on the root; `aria-orientation="vertical"` only for vertical dividers.
 
-### Rules
+## Layout & spacing
+- Has no margins: the spacing around a line comes from the parent `gap` (e.g. `--prime-space-3` in a list column, `--prime-space-2` in a toolbar).
+- A horizontal divider takes `width: 100%` of a flex column; a vertical one needs a flex row parent to get height.
+- A long label wraps (`overflow-wrap: anywhere`).
 
-- **Non-interactive:** no disabled/loading/focus states; behavior is plain **`div`** semantics unless you set **`role`** / **`aria-*`**.
-- **`variant="default"`** — full-width line; optional centered label unless **`align`** overrides.
-- **`variant="text"`** — uppercase section label styling; **`align`** defaults to **`start`**.
-- **`variant="line-spacing"`** — **`flex: 0 0 auto`** so it does not act as a flex grow spacer; spacing is the parent’s **`gap`**.
-- **Semantics:** default **`role="separator"`**; for **`orientation="vertical"`**, **`aria-orientation="vertical"`** is set automatically.
-- **Decoration:** redundant lines → **`role="presentation"`** (or **`none`**) and **`aria-hidden`** (see list example).
-- **Sizing:** match adjacent controls with the same **`size`** prop; do not patch stroke width with ad hoc pixels.
+## Accessibility
+- `role="separator"` by default; vertical dividers add `aria-orientation="vertical"`.
+- Use `role="presentation"` when the line is purely decorative inside a structured list.
+- No keyboard interaction, no `labels`.
 
-### API
+## Examples
+| File | Scenario | When to use this pattern |
+|---|---|---|
+| [variants.tsx](examples/variants.tsx) | Plain line, `align` start · center · end, line in a gap column, vertical in a toolbar | Picking the right shape |
+| [sizes.tsx](examples/sizes.tsx) | `size` xs → xl with a start label | Matching the label to the content tier |
+| [composition.tsx](examples/composition.tsx) | «или» between buttons, heading with icon, presentation lines in a settings list | Separators inside one surface |
 
-#### Divider.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| orientation | `"horizontal"` \| `"vertical"` | `"horizontal"` | No | Line direction. |
-| align | `"start"` \| `"center"` \| `"end"` | `center` for `default` / `line-spacing`; `start` for `text` | No | Balance of `::before` / `::after` stubs around content. |
-| variant | `"default"` \| `"line-spacing"` \| `"text"` | `"default"` | No | Visual mode and flex participation. |
-| size | `"s"` \| `"m"` \| `"l"` \| `"xl"` | `"m"` | No | Gap, label type, icon scale, **`ControlSizeProvider`** value. |
-| children | `React.ReactNode` | — | No | Label, icon + text, or omit for a solid line. |
-| className | `string` | — | No | Extra class on the root. |
-| role | `string` | `"separator"` | No | Override for decorative separators. |
-| …rest | `React.HTMLAttributes<HTMLDivElement>` | — | No | `aria-*`, `data-*`, etc. |
-
-### Related
+```tsx
+import { Divider } from "prime-ui-kit";
 
-- [Typography](../typography/COMPONENT.md)
-- [Button](../button/COMPONENT.md)
-- [Link button](../link-button/COMPONENT.md)
-- [Tabs](../tabs/COMPONENT.md)
-- [Accordion](../accordion/COMPONENT.md)
+export function Example() {
+  return <Divider.Root>или</Divider.Root>;
+}
+```
 
-## LLM note
+## Mistakes
+- Margins on the divider → spacing via the parent `gap`.
+- Lines between cards → separate cards by fill and spacing.
+- `<Icon size="l" />` inside the label → leave the size to the divider.
+- Vertical divider in a block container (no height) → place it in a flex row.
 
-- One export shape: **`Divider.Root`** only; no subcomponents.
-- **`variant` × `align` defaults:** `text` → **`align` `start`**; else **`center`** (explicit **`align`** always wins).
-- **`line-spacing`:** use only when the parent flex column uses **`gap`** for vertical rhythm; divider must not be relied on for layout height.
-- **Vertical:** requires ancestor **`align-items: stretch`** (or explicit height) so `::before`/`::after` flex segments fill the row.
-- **Children:** toggles inner **`span`** and **`ControlSizeProvider`**; **`Icon`** ignores its own **`size`** when inside divider content.
-- **a11y:** default **`separator`** is announced; for decorative list lines between items, mirror **`examples/list-separators.tsx`**: **`ul`/`li`**, separator **`li`** with **`aria-hidden`**, **`Divider.Root`** with **`role="presentation"`**.
-- **Playground alignment:** `variants.tsx` is one frame (empty line, `default` label, `text`, `line-spacing` column, vertical toolbar, list-row separator); `sizes.tsx` is `text` at **s / m / xl**; `composition.tsx` is icon + text at **m** and **xl**.
+## Related
+[Dropdown](../dropdown/COMPONENT.md) · [Card](../card/COMPONENT.md) · [PageContent](../page-content/COMPONENT.md)

package/src/components/divider/examples/composition.tsx

@@ -0,0 +1,49 @@
+/** An «или» divider between sign-in options, a section heading with an icon and presentation lines between list rows. Use when lines separate content inside one surface. */
+import { Button, Divider, Icon, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const rows = [
+  { label: "Пароль", value: "Изменён 12 дней назад" },
+  { label: "Двухфакторный вход", value: "Включён" },
+  { label: "Активные сессии", value: "3 устройства" },
+];
+
+export default function DividerCompositionExample() {
+  return (
+    <div className={styles.column}>
+      <div className={styles.stack}>
+        <Button.Root fullWidth>Войти</Button.Root>
+        <Divider.Root>или</Divider.Root>
+        <Button.Root variant="outline" tone="neutral" fullWidth>
+          <Button.Icon>
+            <Icon name="field.email" />
+          </Button.Icon>
+          Получить ссылку на почту
+        </Button.Root>
+      </div>
+
+      <div>
+        <Divider.Root align="start">
+          <Icon name="status.locked" />
+          Безопасность
+        </Divider.Root>
+        <div className={styles.list}>
+          {rows.map((row, index) => (
+            <div key={row.label}>
+              {index > 0 ? <Divider.Root role="presentation" /> : null}
+              <div className={styles.listRow}>
+                <Typography.Root as="span" variant="body-m">
+                  {row.label}
+                </Typography.Root>
+                <Typography.Root as="span" variant="body-m" tone="secondary">
+                  {row.value}
+                </Typography.Root>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+/* Layout for the Divider examples: layout only, text goes through Typography. */
+
+.column {
+  display: grid;
+  gap: var(--prime-space-6);
+  width: 100%;
+  max-width: var(--prime-modal-width-s);
+}
+
+.group {
+  display: grid;
+  gap: var(--prime-space-2);
+}
+
+.lineSpacingColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  width: fit-content;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.listRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+  padding-block: var(--prime-space-3);
+}
+
+.stack {
+  display: grid;
+  gap: var(--prime-space-3);
+}

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

@@ -0,0 +1,18 @@
+/** Divider label at every size tier xs → xl. Match `size` to the tier of the surrounding content. */
+import { Divider } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const sizes = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function DividerSizesExample() {
+  return (
+    <div className={styles.column}>
+      {sizes.map((size) => (
+        <Divider.Root align="start" key={size} size={size}>
+          Раздел · {size}
+        </Divider.Root>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+/** Plain line, label positions (start · center · end), a line inside a gap column and a vertical divider between toolbar groups. Use as a reference for every Divider shape. */
+import { Button, Divider, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function DividerVariantsExample() {
+  return (
+    <div className={styles.column}>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          без подписи
+        </Typography.Root>
+        <Divider.Root />
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          align: start · center · end
+        </Typography.Root>
+        <Divider.Root align="start">Начало</Divider.Root>
+        <Divider.Root>По центру</Divider.Root>
+        <Divider.Root align="end">Конец</Divider.Root>
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          align=&quot;start&quot; — заголовок секции
+        </Typography.Root>
+        <Divider.Root align="start">Уведомления</Divider.Root>
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          в колонке — ритм задаёт gap родителя
+        </Typography.Root>
+        <div className={styles.lineSpacingColumn}>
+          <Typography.Root as="span" variant="body-m" tone="secondary">
+            Первый пункт
+          </Typography.Root>
+          <Divider.Root />
+          <Typography.Root as="span" variant="body-m" tone="secondary">
+            Второй пункт
+          </Typography.Root>
+        </div>
+      </div>
+      <div className={styles.group}>
+        <Typography.Root variant="caption" tone="muted">
+          orientation=&quot;vertical&quot; — между группами в ряду
+        </Typography.Root>
+        <div className={styles.toolbar}>
+          <Button.Root variant="ghost" tone="neutral">
+            Вырезать
+          </Button.Root>
+          <Button.Root variant="ghost" tone="neutral">
+            Копировать
+          </Button.Root>
+          <Divider.Root orientation="vertical" />
+          <Button.Root variant="ghost" tone="neutral">
+            Удалить
+          </Button.Root>
+        </div>
+      </div>
+    </div>
+  );
+}