prime-ui-kit 0.9.1 → 0.9.3

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

@@ -24,7 +24,7 @@ export default function CardVariantsExample() {
 
       <Card.Root variant="stat-trend">
         <Card.Label>Выручка за месяц</Card.Label>
-        <Card.Value>₽ 4,2 млн</Card.Value>
+        <Card.Value>4,2 млн ₽</Card.Value>
         <Card.Delta tone="success">+18% к сентябрю</Card.Delta>
       </Card.Root>
 

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

@@ -41,7 +41,7 @@
   width: min(100%, var(--prime-panel-min-width));
   padding: var(--prime-panel-padding);
   border-radius: var(--prime-panel-radius);
-  background: var(--prime-color-bg-raised);
+  background: var(--prime-color-layer-floating-bg);
   box-shadow: var(--prime-shadow-overlay);
 }
 
@@ -57,8 +57,10 @@
     var(--prime-motion-easing-standard);
 }
 
-.option:hover {
-  background: var(--prime-color-fill-subtle);
+@media (hover: hover) {
+  .option:hover {
+    background: var(--prime-color-fill-subtle);
+  }
 }
 
 .option:focus-visible {

package/src/components/code-block/COMPONENT.md

@@ -3,7 +3,7 @@
 **Category:** data-display
 **Kind:** primitive
 
-> A static TypeScript / TSX snippet with syntax highlighting, on a sunken panel or bare inside a host.
+> A static TypeScript / TSX snippet with syntax highlighting, on a filled panel or bare inside a host.
 
 ## When to use
 - Code samples in docs, settings («API key usage») and onboarding.
@@ -37,7 +37,7 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `code` | `string` | — (required) | TS / TSX source; trailing whitespace is trimmed, then highlighted. |
-| `variant` | `"soft" \| "ghost"` | `"soft"` | `soft` — sunken panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. |
+| `variant` | `"soft" \| "ghost"` | `"soft"` | `soft` — a filled panel (one ladder step off its host) with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. |
 | `colorScheme` | `"light" \| "dark"` | — | Fixes the theme for this block only (`data-theme`). Omit to follow the page theme. |
 | `tabIndex` | `number` | — | Default `0` for `soft` (a scrolling block stays reachable from the keyboard), none for `ghost`; pass `-1` when it never overflows. |
 | `…rest` | `Omit<HTMLAttributes<HTMLPreElement>, "children" \| "dangerouslySetInnerHTML">` | — | `className`, `aria-label` and the other `<pre>` attributes. |
@@ -54,8 +54,8 @@ CodeBlock        <pre>; variant, colorScheme (data-theme)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | — (omitted) | token colors and fill follow the page theme | normal case | yes |
-| `light` | light palette; the soft fill becomes that scheme's `bg-raised` | a light sample inside a dark page | |
-| `dark` | dark palette; the soft fill becomes that scheme's `bg-raised` | a terminal-like sample inside a light page | |
+| `light` | light palette; the soft fill becomes that scheme's floating layer (`layer-floating-bg`) | a light sample inside a dark page | |
+| `dark` | dark palette; the soft fill becomes that scheme's floating layer (`layer-floating-bg`) | a terminal-like sample inside a light page | |
 
 Syntax tokens: keywords purple (weight 500), strings teal, numbers orange, JSX tags blue, comments muted italic — palette text tokens, readable in both themes.
 
@@ -92,8 +92,8 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | An API response sample on a sunken panel, named for screen readers — `code`, `aria-label`. |
-| [variants.tsx](examples/variants.tsx) | A sunken panel and a bare block that takes type and background from its host — `variant`. |
+| [overview.tsx](examples/overview.tsx) | An API response sample on a filled panel, named for screen readers — `code`, `aria-label`. |
+| [variants.tsx](examples/variants.tsx) | A filled panel and a bare block that takes type and background from its host — `variant`. |
 | [color-scheme.tsx](examples/color-scheme.tsx) | A block fixed to one scheme looks the same in both page themes — `colorScheme`. |
 | [narrow.tsx](examples/narrow.tsx) | In a narrow column a long line scrolls inside the block and never wraps; Tab, then arrow keys. |
 

package/src/components/code-block/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** An API response sample on a sunken panel, named for screen readers — `code`, `aria-label`. */
+/** An API response sample on a filled panel, named for screen readers — `code`, `aria-label`. */
 import { CodeBlock } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/src/components/code-block/examples/variants.tsx

@@ -1,4 +1,4 @@
-/** A sunken panel and a bare block that takes type and background from its host — `variant`. */
+/** A filled panel and a bare block that takes type and background from its host — `variant`. */
 import { CodeBlock, Typography } from "prime-ui-kit";
 
 const SAMPLE = `const total = formatPrice(14990);`;

package/src/components/color-picker/COMPONENT.md

@@ -211,7 +211,7 @@ No `variant` / `tone` / `color`.
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `none` | parts stacked with a 12px gap, no own background | inside a Popover or a Card | yes |
-| `raised` | `bg-raised`, panel radius and padding, `shadow-overlay`; fields switch to `field-bg-surface` | a standalone panel on the page | |
+| `raised` | the floating layer of the ladder (`data-depth="floating"`), panel radius and padding, `shadow-overlay`; fields take that layer's fill | a standalone panel on the page | |
 
 ### defaultFormat (ColorPicker.Root)
 | Value | Looks like | Use when | Default |

package/src/components/color-swatches/COMPONENT.md

@@ -48,7 +48,7 @@ ColorSwatches                 field frame: label → swatches → hint | error
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the swatches. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
-| `invalid` | `boolean` | — | Danger selection ring and `aria-invalid`. A non-empty `error` implies it. |
+| `invalid` | `boolean` | — | Danger inner edge on every swatch and `aria-invalid`. A non-empty `error` implies it. |
 | `disabled` | `boolean` | `false` | Disables every swatch (grey, half transparent). |
 | `allowEmpty` | `boolean` | `false` | Adds the «no color» checkerboard swatch after the presets (value `null`). |
 | `name` | `string` | — | Form field name: a hidden input submits the selected color (empty string for no color). |
@@ -76,7 +76,7 @@ ColorSwatches                 field frame: label → swatches → hint | error
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `allowEmpty` | an extra checkerboard swatch «Без цвета» at the end | the color is optional | `false` |
-| `invalid` | the selection ring turns danger | the message is shown elsewhere; otherwise pass `error` | — |
+| `invalid` | the inner edge of every swatch turns danger | the message is shown elsewhere; otherwise pass `error` | — |
 | `disabled` | every swatch grey at half opacity | the choice is unavailable | `false` |
 
 **Combinations**
@@ -87,17 +87,17 @@ ColorSwatches                 field frame: label → swatches → hint | error
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| selected | `value` / `defaultValue` | `aria-checked="true"`, `data-state="checked"` on the radio; 2px accent ring with a 2px gap and a check mark (light or dark by color contrast) |
+| selected | `value` / `defaultValue` | `aria-checked="true"`, `data-state="checked"` on the radio; the check mark (light or dark by color contrast) scales in from half size (`base` · emphasized) and leaves faster (`fast` · exit); no ring — the check is the selection |
 | hover | pointer | the swatch scales to 1.08 (fine pointers only) |
 | focus-visible | keyboard | focus ring outside the swatch |
-| invalid | `invalid` / `error` | `aria-invalid`, `data-invalid` on the group; the selected ring turns `danger-border` |
+| invalid | `invalid` / `error` | `aria-invalid`, `data-invalid` on the group; the inner edge of every swatch turns `danger-border` |
 | disabled | `disabled` | native `disabled` on every radio, `aria-disabled` and `data-disabled` on the group |
 
 Controlled with `value` + `onValueChange`; uncontrolled with `defaultValue`.
 
 ## Layout & spacing
 - The swatches take the container width and wrap to new rows by themselves; no column count to set. In a content-sized container they stay in one row.
-- The selection / focus rings sit outside the swatches; kit hosts (Modal / Drawer body, panels, cards) already keep `--prime-focus-space` padding, so the rings are never clipped. In your own `overflow` container, keep that padding.
+- The keyboard focus ring sits outside the swatches; kit hosts (Modal / Drawer body, panels, cards) already keep `--prime-focus-space` padding, so the ring is never clipped. In your own `overflow` container, keep that padding.
 - Label → swatches and swatches → hint use the tier `label-gap` / `hint-gap`; field → field 20.
 
 ## Accessibility

package/src/components/command-menu/COMPONENT.md

@@ -111,7 +111,7 @@ CommandMenu.Root                 Modal + top-aligned palette panel, query state
 | `keys` | `ReactNode[]` | — (required) | FooterHint: the keys (text or icons). |
 
 ## Variants
-One look: `bg-raised`, `--prime-modal-radius`, `shadow-modal`, `--prime-modal-width-l` wide, placed in the top part of the viewport so the search row never jumps while the list filters.
+One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radius`, `shadow-modal`, `--prime-modal-width-l` wide, placed in the top part of the viewport so the search row never jumps while the list filters.
 
 ### size (Root)
 | Value | Looks like | Use when | Default |

package/src/components/crossfade/COMPONENT.md

@@ -1,6 +1,6 @@
 # Crossfade
 
-**Category:** feedback
+**Category:** status
 **Kind:** layout
 
 > A region that cross-fades between its states (loading → data → empty → error) and glides to the new height, so the page below does not jump.

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

@@ -16,9 +16,9 @@ import styles from "./examples.module.css";
 type Status = "loading" | "ready" | "empty" | "error";
 
 const PAYMENTS = [
-  { id: "p1", payer: "ООО «Гранит»", amount: "₽ 94 750" },
-  { id: "p2", payer: "ИП Орлов Д. С.", amount: "₽ 18 000" },
-  { id: "p3", payer: "АО «Альфа Медиа»", amount: "₽ 380 000" },
+  { id: "p1", payer: "ООО «Гранит»", amount: "94 750 ₽" },
+  { id: "p2", payer: "ИП Орлов Д. С.", amount: "18 000 ₽" },
+  { id: "p3", payer: "АО «Альфа Медиа»", amount: "380 000 ₽" },
 ];
 
 export default function CrossfadeOverviewExample() {

package/src/components/data-table/COMPONENT.md

@@ -10,6 +10,7 @@
 - Data that needs sorting, paging, bulk selection or a filter toolbar.
 - Hierarchical rows (`getRowChildren`) or rows with a detail panel (`renderExpanded`).
 - Wide numeric reports with a sticky head and first column.
+- Wide records on narrow screens: let people choose the columns (`hiddenColumns`) instead of dropping them.
 
 ## When not to use
 - One or two KPIs → use [Card](../card/COMPONENT.md).
@@ -28,7 +29,7 @@ Exported types: `DataTableColumn<Row>`, `DataTableProps<Row>`, `DataTableSortSta
 ```
 DataTable                           card-fill block, radius 12, clips its content
 ├── toolbar                         optional panel above the table (search, filters, bulk actions)
-├── scroll viewport                 ScrollContainer, both axes
+├── scroll viewport                 ScrollContainer, both axes, in a frame that holds the edge shadows
 │   └── table
 │       ├── thead                   [select all] [toggle] head cells; sortable heads hold a button
 │       └── tbody                   rows · sub-rows · detail rows · skeleton / empty / error row
@@ -46,6 +47,7 @@ Generic over `Row`; `ref` → `HTMLDivElement`. A card-fill block with an option
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `columns` | `DataTableColumn<Row>[]` | — (required) | Column definitions, see `DataTableColumn<Row>`. |
+| `hiddenColumns` | `string[]` | — | Ids of columns that are not rendered (head, body, skeleton and state rows); widths are measured again. A column with `hideable: false` stays. The list and the control that changes it (a column chooser in `toolbar`) belong to the consumer; sorting by a hidden column keeps the row order. |
 | `rows` | `Row[]` | — (required) | Data; sorted in memory when a sort is set. |
 | `getRowKey` | `(row: Row, index: number) => Key` | — | Stable row id (position by default); selection, expansion and the enter animation of new rows are keyed by it. Pass it whenever sorting, selection or expansion is used. |
 | `getRowLabel` | `(row: Row) => string` | — | Human row name for the checkbox and toggle names (`{label}` in `labels`). |
@@ -78,8 +80,8 @@ Generic over `Row`; `ref` → `HTMLDivElement`. A card-fill block with an option
 | `loadingMore` | `boolean` | `false` | A server batch is loading: footer status, `aria-busy`. |
 | `onLoadMore` | `() => void \| Promise<void>` | — | Called at the end when every loaded row is shown and `hasMore` is set. |
 | `scrollHeight` | `number \| string` | `360 with paging="infinite"` | Max height of the scroll viewport (number = px). |
-| `stickyHeader` | `boolean` | `false` | The head sticks while the body scrolls. |
-| `stickyFirstColumn` | `boolean` | `false` | The first column (with the selection and toggle columns) sticks while scrolling sideways. |
+| `stickyHeader` | `boolean` | `false` | The head sticks while the body scrolls (with `scrollHeight`); on screens lower than 480px it scrolls with the rows. |
+| `stickyFirstColumn` | `boolean` | `false` | The first visible column (with the selection and toggle columns) sticks while scrolling sideways; the start edge shadow falls from its end edge. |
 | `showHeader` | `boolean` | `true` | Render `<thead>`. |
 | `fullWidth` | `boolean` | `true` | The table spans its container; `false` sizes it by its content. |
 | `rowDividers` | `boolean` | `true` | Hairlines between rows. |
@@ -108,6 +110,7 @@ One column of `columns`: data, not a part.
 | `numeric` | `boolean` | — | Tabular figures, no wrapping, end alignment unless `align` is set. |
 | `truncate` | `boolean` | — | One line with an ellipsis; width from `maxWidth` (or `width`); string values get a `title`. |
 | `grow` | `boolean` | — | Takes the free width and wraps its text; the table then fills its container. With `minWidth` it never gets narrower: below that the table scrolls instead of cells overlapping. |
+| `hideable` | `boolean` | `true` | The column can be hidden through `hiddenColumns`; `false` for the key column that names the row. |
 | `width · minWidth · maxWidth` | `string` | — | CSS sizes of the column (`"14rem"`). |
 
 ## Variants
@@ -147,9 +150,10 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | `rowDividers` | hairlines between rows | default; off together with `striped` | `true` |
 | `columnDividers` | hairlines between content columns (none inside the lead columns) | default; off for 2–3 column key/value lists | `true` |
 | `striped` | every second row one opaque step off the fill | long numeric grids | `false` |
-| `highlightRowOnHover` | `fill-subtle` wash on the hovered row | interactive lists | `true` |
-| `highlightColumnOnHover` | `fill-subtle` wash on the hovered column | comparison tables | `false` |
-| `stickyHeader` · `stickyFirstColumn` | opaque sticky head / first column with a hairline edge | long / wide tables in a `scrollHeight` window | `false` |
+| `highlightRowOnHover` | `fill-subtle-active` wash on the hovered row (stronger than a zebra step, so a hovered row never takes a zebra row's color) | interactive lists | `true` |
+| `highlightColumnOnHover` | `fill-subtle-active` wash on the hovered column | comparison tables | `false` |
+| `stickyHeader` · `stickyFirstColumn` | opaque sticky head / first column with a hairline edge; on screens lower than 480px the head scrolls with the rows | long / wide tables in a `scrollHeight` window | `false` |
+| column `hideable` | `false`: the column stays even when listed in `hiddenColumns` | the key column that names the row | `true` |
 | `showHeader` | head row shown | off only for self-explanatory key/value tables | `true` |
 | `fullWidth` | spans the container; `false` = content width | `false` for short lookup tables in wide layouts | `true` |
 | column `numeric` | tabular figures, end-aligned, no wrap | numbers, money | — |
@@ -165,16 +169,22 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | sorted | `sort` / `defaultSort` | `aria-sort` and `data-sorted` on the head; the sort icon: unsorted `text-disabled`, hover `text-muted`, sorted `text-secondary` — never accent |
 | selected | `selected` / `defaultSelected` | `aria-selected` rows with `accent-soft` fill; polite `labels.selectedCount` |
 | expanded | `expanded` / `defaultExpanded` | `data-expanded` on the parent row (one step darker); toggle `aria-expanded`, chevron turns 90° |
-| new rows | rows mounted by an expand or new in `rows` (by `getRowKey`) | `data-animate`: cells drop in from above (`enterMotion`); detail panels open and close through `grid-template-rows` (`data-state` on the detail row; it unmounts after the close) |
+| new rows | rows new in `rows` (by `getRowKey`) | `data-animate`: top-level cells drop in from above (`enterMotion`) |
+| sub-rows and detail panels | an expand / a collapse | both fold open and shut through `grid-template-rows` (0fr ↔ 1fr) with the fade on the same `base` curve; the row height and padding live inside the track, so nothing is left to jump. Sub-rows: `data-fold` on the row (`opening` · `open` · `closed`); a collapsed row's sub-rows stay mounted until the fold ends. Detail row: `data-state`; it unmounts after the close |
+| overflowing sideways | the table is wider than its viewport | `data-overflow-start` (scrolled from the start) and `data-overflow-end` (more to the end) on the root: a soft shadow over that edge, from the end edge of the sticky first column for the start; fades in and out over `fast` |
+| hidden columns | `hiddenColumns` | the listed columns (except `hideable: false`) are not rendered in the head, rows, skeleton or state rows; widths are measured again |
 | state swap | the body moves between loading, rows, empty and error | the body fades in over `base` (opacity only, the same swap motion as [Crossfade](../crossfade/COMPONENT.md)); the head stays still; nothing moves on the first render |
 
-Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data-sticky-header`, `data-sticky-first-column`, `data-table-width` (`fill` · `auto` · `grow`), `data-highlight-row`, `data-highlight-column`, `data-striped`, `data-loading`, `data-selectable`, `data-expandable`, `data-dragging` (while drag-selecting). Sorting and paging swap rows instantly; everything is still under `prefers-reduced-motion`.
+Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data-sticky-header`, `data-sticky-first-column`, `data-table-width` (`fill` · `auto` · `grow`), `data-highlight-row`, `data-highlight-column`, `data-striped`, `data-loading`, `data-selectable`, `data-expandable`, `data-dragging` (while drag-selecting), `data-overflow-start` · `data-overflow-end` (edges that hide columns). Sorting and paging swap rows instantly; everything is still under `prefers-reduced-motion`.
 
 ## Layout & spacing
-- The root fills its container on `--prime-color-card-bg`, radius 12, and clips full-bleed head and rows; on a card or a modal it becomes a sunken block — never wrap it in a Card.
+- The root is a layer of the surface ladder (`data-depth`, one above its host): it fills its container on `--prime-color-layer-current`, radius 12, and clips full-bleed head and rows; zebra rows and the sticky column are one ladder step off it, the head two. On a card or in a modal it is the next layer by itself — never wrap it in a Card.
 - Toolbar padding `--prime-space-3` × cell padding, items `gap: --prime-space-2`; below 30rem of table width toolbar and footer stack.
 - The footer has a hairline on top: range on the left, Pagination on the right. The range shows only with more than one page or with infinite scroll.
-- Columns scroll sideways inside the table; pin the identifying column with `stickyFirstColumn`. Works from 320 px.
+- Columns scroll sideways inside the table, never the page; pin the identifying column with `stickyFirstColumn`. Works from 320 px.
+- While columns are hidden past an edge, that edge shows a `--prime-space-4` shadow (the theme scrim at 40%) over the content; it takes no space and follows RTL. With `stickyFirstColumn` the start shadow falls from the pinned column's end edge.
+- Fewer columns, less scrolling: put a column chooser in `toolbar` (a Dropdown with a `Dropdown.CheckboxItem` per column, the key column `hideable: false` shown checked and disabled) and pass `hiddenColumns`. Never hide columns silently by width.
+- The sticky head stops sticking on screens lower than 480px (landscape phones), so it never takes a large share of the height.
 - Cell content: text, two-line text (title + `caption`), an Avatar with text, a Badge, or a control one tier down (`s` in an `m` table). Toolbar controls use `s` in an `m` table.
 - Column widths: `width` / `minWidth` / `maxWidth` strings; never size cells with custom CSS.
 - Sub-rows indent by `--dt-indent` per level (avatar of the tier + gap); override it on the root for other leading content.
@@ -225,6 +235,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | [nested-rows.tsx](examples/nested-rows.tsx) | Partners with their expense lines: sub-rows indented under the parent's name, a chevron toggle, together with selection and sorting — `getRowChildren`, `expanded`, `onExpandedChange`. |
 | [detail-panel.tsx](examples/detail-panel.tsx) | Order details in a full-width row under an expanded order, aligned with the first content column — `renderExpanded`, `defaultExpanded`. |
 | [sticky.tsx](examples/sticky.tsx) | Monthly sales by region in a 280 px window: the head and the region column stay while scrolling both ways — `stickyHeader`, `stickyFirstColumn`, `scrollHeight`. |
+| [columns-visibility.tsx](examples/columns-visibility.tsx) | Orders with a column chooser in the toolbar: fewer columns, less sideways scrolling; the order number always stays — `hiddenColumns`, `hideable`, `toolbar`. |
 | [infinite-scroll.tsx](examples/infinite-scroll.tsx) | An audit log that reveals loaded rows in batches and then asks the server for more — `paging`, `infiniteBatchSize`, `hasMore`, `loadingMore`, `onLoadMore`. |
 | [states.tsx](examples/states.tsx) | Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | Sort and page owned by the parent (a URL or a store): a header click goes asc → desc → none, a new sort returns to page 1 — `sort`, `onSortChange`, `page`, `onPageChange`. |
@@ -239,6 +250,9 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 - A custom checkbox column → use `selectable` (range, drag and announcements built in).
 - A long table in a `scrollHeight` window without `stickyHeader` → the head scrolls away.
 - `paging="none"` for hundreds of rows → use `pages` or `infinite`.
+- Dropping columns below a breakpoint → people lose data without knowing it; offer a column chooser with `hiddenColumns`.
+- Letting the key column be hidden → set `hideable: false` on it, so every row keeps its name.
+- Wrapping the table in an `overflow-x` box of your own → it already scrolls inside and shows the edge shadows.
 
 ## Related
 - **Built from:** [Checkbox](../checkbox/COMPONENT.md), [Button](../button/COMPONENT.md), [Pagination](../pagination/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md) (loading rows, in the table tier)

package/src/components/data-table/examples/columns-visibility.tsx

@@ -0,0 +1,167 @@
+/** Orders with a column chooser in the toolbar: fewer columns, less sideways scrolling; the order number always stays — `hiddenColumns`, `hideable`, `toolbar`. */
+import {
+  Badge,
+  Button,
+  DataTable,
+  type DataTableColumn,
+  Dropdown,
+  Icon,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Status = "paid" | "shipped" | "waiting";
+type Order = {
+  id: string;
+  client: string;
+  manager: string;
+  city: string;
+  status: Status;
+  date: string;
+  items: number;
+  total: number;
+};
+
+const STATUS: Record<Status, { label: string; color: "green" | "blue" | "orange" }> = {
+  paid: { label: "Оплачен", color: "green" },
+  shipped: { label: "Отгружен", color: "blue" },
+  waiting: { label: "Ждёт оплаты", color: "orange" },
+};
+
+const ORDERS: Order[] = [
+  {
+    id: "№ 1040",
+    client: "ООО «Северный ветер»",
+    manager: "Ольга Смирнова",
+    city: "Москва",
+    status: "paid",
+    date: "02.10.2026",
+    items: 12,
+    total: 184_500,
+  },
+  {
+    id: "№ 1041",
+    client: "ИП Козлов",
+    manager: "Игорь Волков",
+    city: "Казань",
+    status: "waiting",
+    date: "03.10.2026",
+    items: 3,
+    total: 27_900,
+  },
+  {
+    id: "№ 1042",
+    client: "АО «Технопарк»",
+    manager: "Ольга Смирнова",
+    city: "Санкт-Петербург",
+    status: "shipped",
+    date: "04.10.2026",
+    items: 40,
+    total: 612_000,
+  },
+  {
+    id: "№ 1043",
+    client: "ООО «Лето»",
+    manager: "Мария Орлова",
+    city: "Екатеринбург",
+    status: "paid",
+    date: "05.10.2026",
+    items: 7,
+    total: 58_350,
+  },
+  {
+    id: "№ 1044",
+    client: "ООО «Гранит»",
+    manager: "Игорь Волков",
+    city: "Новосибирск",
+    status: "shipped",
+    date: "06.10.2026",
+    items: 18,
+    total: 241_800,
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", hideable: false },
+  { id: "client", header: "Клиент", accessor: "client" },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+  { id: "city", header: "Город", accessor: "city" },
+  {
+    id: "status",
+    header: "Статус",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true },
+  { id: "items", header: "Позиций", accessor: "items", numeric: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableColumnsVisibilityExample() {
+  const [hidden, setHidden] = React.useState<string[]>(["city", "items"]);
+  const shown = COLUMNS.length - hidden.length;
+
+  const toggle = (id: string, visible: boolean) =>
+    setHidden((current) => (visible ? current.filter((c) => c !== id) : [...current, id]));
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      hiddenColumns={hidden}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      stickyFirstColumn
+      toolbar={
+        <div className={styles.toolbar}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Заказы за неделю: {ORDERS.length}
+          </Typography>
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Button.Root variant="outline" tone="neutral" size="s">
+                <Button.Icon>
+                  <Icon name="view.preview" />
+                </Button.Icon>
+                Колонки: {shown} из {COLUMNS.length}
+              </Button.Root>
+            </Dropdown.Trigger>
+            <Dropdown.Content align="end" size="s">
+              <Dropdown.Group label="Колонки таблицы">
+                {COLUMNS.map((column) => (
+                  <Dropdown.CheckboxItem
+                    key={column.id}
+                    checked={!hidden.includes(column.id)}
+                    disabled={column.hideable === false}
+                    onCheckedChange={(visible) => toggle(column.id, visible)}
+                  >
+                    {column.header}
+                  </Dropdown.CheckboxItem>
+                ))}
+              </Dropdown.Group>
+              <Dropdown.Separator />
+              <Dropdown.Item disabled={hidden.length === 0} onSelect={() => setHidden([])}>
+                Показать все
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </div>
+      }
+    />
+  );
+}

package/src/components/digit-input/COMPONENT.md

@@ -37,19 +37,20 @@ DigitInput            field frame: label row → cells → support row (hint | e
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `length` | `number` | `4` | Number of cells. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier: the cell is a square with the side of the control height (28 · 32 · 36 · 40 · 48); label and hint follow it. Without it the tier of its host (LoginForm, a panel), else `m`. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier: the cell is a square on its own scale, two steps above the control heights (36 · 40 · 48 · 56 · 64); label and hint follow the field tier. Without it the tier of its host (LoginForm, a panel), else `m`. |
 | `label` | `ReactNode` | — | Label above the cells; names the group (`aria-labelledby`) and focuses the first cell on click. Without it the group is named by `labels.group`. |
 | `required` | `boolean` | — | Red `*` after the label and native `required` on every cell. |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the cells. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | — | Danger ring and danger digits on every cell, `aria-invalid`. A non-empty `error` implies it. |
+| `success` | `boolean` | `false` | The code was accepted (after the server checked it): the cells turn success one after another. Ignored while invalid. Say it in words too (`hint`). |
 | `disabled` | `boolean` | — | Disables the fieldset and every cell. |
 | `value` | `string` | — | Controlled code; non-digits are dropped, extra digits cut to `length`. |
 | `defaultValue` | `string` | `""` | Initial code when uncontrolled. |
 | `onValueChange` | `(value: string) => void` | — | Called with the joined digits on every change. |
 | `onComplete` | `(value: string) => void` | — | Called once when the last empty cell is filled (typing, paste or autofill). |
-| `fullWidth` | `boolean` | `false` | Cells share the container width and keep the tier height; otherwise square cells and the field hugs them. |
+| `fullWidth` | `boolean` | `false` | Cells share the container width up to 1.5 × their side (the row centres beyond that) and keep the tier height; otherwise square cells and the field hugs them. |
 | `groupSize` | `number` | — | Splits the cells into groups of this size with a wider gap (`3` → 123 456). |
 | `mask` | `boolean` | `false` | Hides the digits (PIN): cells are `type="password"`. |
 | `name` | `string` | — | Name of a hidden input that carries the joined code in a native form submit. |
@@ -66,18 +67,18 @@ No `variant` or `tone`.
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | 28 × 28 cells, radius 6, digits 12/16, gap 4 | Inline confirmation inside dense tables or popovers | |
-| `s` | 32 × 32 cells, radius 8, digits 14/20, gap 8 | Compact dialogs | |
-| `m` | 36 × 36 cells, radius 8, digits 16/24, gap 8 | Regular forms and modals | yes |
-| `l` | 40 × 40 cells, radius 10, digits 18/24, gap 8 | Standalone verification screens | |
-| `xl` | 48 × 48 cells, radius 12, digits 20/28, gap 12 | Full-page sign-in, mobile-first screens | |
+| `xs` | 36 × 36 cells, radius 8, digits 16/24, gap 8 | A code inside a popover or a dense panel | |
+| `s` | 40 × 40 cells, radius 10, digits 18/24, gap 8 | Compact dialogs | |
+| `m` | 48 × 48 cells, radius 12, digits 20/28, gap 12 | Regular forms, modals, LoginForm | yes |
+| `l` | 56 × 56 cells, radius 12, digits 24/32, gap 12 | Standalone verification screens | |
+| `xl` | 64 × 64 cells, radius 16, digits 30/36, gap 16 | Full-page sign-in, mobile-first screens | |
 
-**Sizes:** digits are semibold and tabular, one type step larger than the tier text (`xs` uses the tier text). A cell of size T is as high as Input and Button of size T; the label and the hint take the same tier.
+**Sizes:** cells have their own scale, two steps above the control heights: a code is the one thing on its screen and a small cell is hard to hit and to read (cell `xs` = control `m`, `s` = control `l`, `m` = control `xl`). Digits are semibold and tabular and grow with the cell; the label and the hint keep the field tier.
 
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `fullWidth` | one row, cells share the width, tier height | cards, forms and narrow phone columns where a full-width button follows | `false` |
+| `fullWidth` | one row, cells share the width up to 1.5 × their side, then the row centres; tier height | narrow phone columns where a full-width button follows | `false` |
 | `groupSize` | an extra gap before every group (`3` → 123 456) | codes of six digits and longer | — |
 | `mask` | dots instead of digits | PIN codes | `false` |
 | `required` / `optional` | red `*` / muted «необязательно» after the label | mark the minority of the form | — |
@@ -92,8 +93,9 @@ No `variant` or `tone`.
 | State | Driven by | DOM |
 |---|---|---|
 | hover | — | cell fill darkens (not on focused or disabled cells) |
-| focus | keyboard / click | focused cell: focus fill + inset focus ring; its content is selected so a new digit replaces it |
-| filled cell | a digit in the cell | `data-filled="true"` on the cell |
+| focus | keyboard / click | focused cell: focus fill and its content selected so a new digit replaces it; one inset ring for the row appears on the cell and glides to the next one (`fast` · emphasized) instead of each cell drawing its own |
+| filled cell | a digit in the cell | `data-filled="true"` on the cell; the digit fades in as it lands |
+| success | `success` (not while invalid) | `data-success="true"` on the fieldset; the cells turn `success-soft` one after another, half a stagger step apart |
 | full width | `fullWidth` | `data-full-width="true"` on the fieldset |
 | group start | `groupSize` | `data-group-start="true"` on the first cell of every group |
 | invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the fieldset and the frame, `aria-invalid="true"` on cells |
@@ -137,12 +139,12 @@ No `variant` or `tone`.
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A six-digit code from SMS with its label and a hint — `label`, `hint`, `length`. |
-| [sizes.tsx](examples/sizes.tsx) | Every size; the cell is a square with the side of the control height — `size`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size; the cell is a square on its own scale, two steps above the control heights — `size`. |
 | [states.tsx](examples/states.tsx) | A default code next to a disabled one — `disabled`. |
 | [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint and an error that replaces it — `required`, `optional`, `hint`, `error`. |
 | [grouped.tsx](examples/grouped.tsx) | A long code read in chunks with a wider gap between groups — `groupSize`. |
 | [full-width.tsx](examples/full-width.tsx) | Cells that share the container width and keep the tier height, above a full-width button — `fullWidth`. |
-| [on-complete.tsx](examples/on-complete.tsx) | The code is checked as soon as the last cell is filled; a wrong code turns the hint into an error — `onComplete`, `error`. |
+| [on-complete.tsx](examples/on-complete.tsx) | The code is checked as soon as the last cell is filled: a right one turns the cells success, a wrong one turns the hint into an error — `onComplete`, `success`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the code and clears it with a button — `value`, `onValueChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A masked card PIN submitted with a form; a short PIN shows an error — `name`, `mask`, `required`, `error`. |
 

package/src/components/digit-input/examples/examples.module.css

@@ -8,6 +8,14 @@
   width: min(100%, var(--prime-modal-width-s));
 }
 
+/* in-form.tsx: the form hugs the cells; as a grid item the button stretches to the code's width. */
+.form {
+  display: grid;
+  gap: var(--prime-space-6);
+  width: fit-content;
+  max-width: 100%;
+}
+
 /* controlled.tsx: the code and its action on one line, bottoms aligned. */
 .row {
   display: flex;

package/src/components/digit-input/examples/in-form.tsx

@@ -16,20 +16,17 @@ export default function DigitInputInFormExample() {
   };
 
   return (
-    <form className={styles.panel} noValidate onSubmit={submit}>
+    <form className={styles.form} noValidate onSubmit={submit}>
       <DigitInput
         label="PIN-код карты"
         name="pin"
         length={PIN_LENGTH}
         mask
         required
-        fullWidth
         error={error}
         onValueChange={() => setError(undefined)}
       />
-      <Button.Root type="submit" fullWidth>
-        Привязать карту
-      </Button.Root>
+      <Button.Root type="submit">Привязать карту</Button.Root>
     </form>
   );
 }

package/src/components/digit-input/examples/on-complete.tsx

@@ -1,20 +1,21 @@
-/** The code is checked as soon as the last cell is filled; a wrong code turns the hint into an error — `onComplete`, `error`. */
+/** The code is checked as soon as the last cell is filled: a right one turns the cells success, a wrong one turns the hint into an error — `onComplete`, `success`, `error`. */
 import { DigitInput } from "prime-ui-kit";
 import * as React from "react";
 
 const VALID_CODE = "123456";
 
 export default function DigitInputOnCompleteExample() {
-  const [error, setError] = React.useState<string>();
+  const [result, setResult] = React.useState<"accepted" | "rejected">();
 
   return (
     <DigitInput
       label="Код подтверждения входа"
       length={6}
-      hint={`Для проверки подходит ${VALID_CODE}`}
-      error={error}
-      onValueChange={() => setError(undefined)}
-      onComplete={(code) => setError(code === VALID_CODE ? undefined : "Неверный код")}
+      hint={result === "accepted" ? "Код подтверждён" : `Для проверки подходит ${VALID_CODE}`}
+      error={result === "rejected" ? "Неверный код" : undefined}
+      success={result === "accepted"}
+      onValueChange={() => setResult(undefined)}
+      onComplete={(code) => setResult(code === VALID_CODE ? "accepted" : "rejected")}
     />
   );
 }

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

@@ -1,4 +1,4 @@
-/** Every size; the cell is a square with the side of the control height — `size`. */
+/** Every size; the cell is a square on its own scale, two steps above the control heights — `size`. */
 import { DigitInput } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;

package/src/components/divider/COMPONENT.md

@@ -1,6 +1,6 @@
 # Divider
 
-**Category:** layout
+**Category:** page
 **Kind:** primitive
 
 > A hairline separator inside one surface, horizontal or vertical, with or without a label.