prime-ui-kit 0.13.1 → 0.15.0

package/dist/skill/reference/components/input/examples/password-strength.tsx

@@ -1,13 +1,39 @@
-/** A new password with a show toggle and a meter that fills step by step and names the level beside the hint — `Input.RevealButton`, `strength`. */
-import { Input } from "prime-ui-kit";
+/** A new password with a show toggle and a meter that fills step by step and names the level beside the hint, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. */
+import { Input, type PasswordStrength } from "prime-ui-kit";
+
+/** The company rule for service accounts: only the length counts, 16 characters and more is hard. */
+function serviceStrength(value: string): PasswordStrength {
+  if (value.length === 0) return 0;
+  if (value.length < 8) return 1;
+  if (value.length < 12) return 2;
+  if (value.length < 16) return 3;
+  return 4;
+}
 
 export default function InputPasswordStrengthExample() {
   return (
-    <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
-      <Input.Wrapper>
-        <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
-        <Input.RevealButton />
-      </Input.Wrapper>
-    </Input.Root>
+    <>
+      <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
+        <Input.Wrapper>
+          <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
+          <Input.RevealButton />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root
+        label="Пароль сервисного аккаунта"
+        hint="По правилам компании — от 16 символов"
+        strength
+        getStrength={serviceStrength}
+      >
+        <Input.Wrapper>
+          <Input.Field
+            type="password"
+            autoComplete="new-password"
+            defaultValue="export-1c-nightly"
+          />
+          <Input.RevealButton />
+        </Input.Wrapper>
+      </Input.Root>
+    </>
   );
 }

package/dist/skill/reference/components/input/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A default field next to a disabled and a read-only one — `disabled`, `readOnly`. */
+/** A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. */
 import { Icon, Input } from "prime-ui-kit";
 
 export default function InputStatesExample() {
@@ -22,6 +22,11 @@ export default function InputStatesExample() {
           </Input.Icon>
         </Input.Wrapper>
       </Input.Root>
+      <Input.Root label="invalid" invalid>
+        <Input.Wrapper>
+          <Input.Field type="tel" defaultValue="+7 900 12" />
+        </Input.Wrapper>
+      </Input.Root>
     </>
   );
 }

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

@@ -32,7 +32,7 @@ import {
 ```
 Kanban.Root                          board: horizontal strip of columns, its own Dnd.Root if none above
 └─ <ul> (Dnd.Sortable, axis x)       the columns in `columnOrder`
-   └─ <li> column (from `columns`)   `fill-muted` well (one ladder step off the board's surface)
+   └─ <li> column (from `columns`)   no well with a header plate (`plain`) or a header line (`line`), or a `fill-muted` well (`well`)
       ├─ header                      title (h3) · count Badge (the stage color) · renderColumnActions(column) · [grip Dnd.Handle, a lock when `locked`]
       │  ├─ description              muted line under the title (`column.description`)
       │  └─ meta                     the stage's figures (`renderColumnMeta(column)`)
@@ -73,7 +73,7 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 | `renderColumnActions` | `(column: KanbanColumn) => ReactNode` | — | Trailing actions of a column header (add a card, a menu); kit controls inside take the `s` tier. |
 | `renderColumnMeta` | `(column: KanbanColumn) => ReactNode` | — | The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). |
 | `canDrop` | `(id: string, columnId: string) => boolean \| string` | — | A workflow rule: refuses card `id` in column `columnId` — `false`, or a string that says why (spoken and shown under the carried card). |
-| `variant` | `"well" \| "plain"` | `"well"` | `well`: every column is a filled well with its cards inside. `plain`: no wells — a filled header plate and wider cards carry the column. |
+| `variant` | `"plain" \| "line" \| "well"` | `"plain"` | No wells: `plain` — a filled header plate over the cards, `line` — a bare header over a faint line; cards stand on the host. `well`: every column is a filled well holding its cards (bounded queues). |
 | `loading` | `boolean` | `false` | Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off. |
 | `disabled` | `boolean` | `false` | Read-only board: no drag, no keyboard moves, no column grips; `onItemClick` and `getItemHref` still open cards. |
 | `labels` | `Partial<KanbanLabels>` | — | Built-in strings, see Labels. |
@@ -126,8 +126,11 @@ Generic `Kanban.Root<T>`; `ref` → `HTMLDivElement`. The board: a strip of colu
 
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `well` | every column is a filled well (`fill-muted`, radius `l`), cards inside it | the default board; columns must read as areas | yes |
-| `plain` | no wells: the column is its header — a filled plate (`fill-muted`, radius `l`) as wide as the cards — and its cards, which widen to almost the full column, so neighbouring columns stand closer | a lighter board on a page that already has its own surface | |
+| `plain` | no wells: the column is its header — a filled plate as wide as the cards (title, count) — and its cards, which stand on the board's host, each a surface one ladder step off it (white on the light page), as a Card on the page | the board is the page's main region (a pipeline, a task board, a queue screen) or sits in a Card or Drawer — one level of nesting, cards are the only boxes | yes |
+| `line` | no wells, like `plain`, but the header is bare: title and count over a faint inset hairline as wide as the cards | the same places as `plain` when the headers should stay quiet — many columns, a calm board, the column headers are not the focus | |
+| `well` | every column is a filled well (`fill-muted`, radius `l`) holding its cards (the selected step of the well) | columns must read as bounded queues: WIP limits and capacity, many sparse or empty columns whose drop area must show, a dense board of many narrow columns | |
+
+Do not wrap a `plain` board's columns in your own boxes, and do not put a `well` board inside a filled box of your own — both are the double nesting the variants exist to avoid.
 
 ### Flags
 | Value | Looks like | Use when | Default |
@@ -167,11 +170,11 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - Give the root a height (`className`): columns span it and every column body scrolls on its own; without one the columns take the height of the tallest.
 - The board is a size container. From 40rem of its own width columns keep a fixed 18rem; below it a column takes 85% of the board and snaps (`scroll-snap-type: x mandatory`), so the next column peeks. Snapping is off while a drag auto-scrolls the strip.
 - The strip scrolls sideways inside the board, never the page. Cards sit at the top of their column; the drop area runs to the bottom of the column, so a card can be released anywhere in it.
-- `well`: column gap `--prime-space-3`, cards inset `--prime-space-2` from the column edge, column radius `l`. `plain`: column gap `--prime-space-3`, cards inset `--prime-space-1` (room for the focus ring). Card gap `--prime-space-2`, card padding `--prime-space-3`, card radius `m`.
+- `plain` / `line`: column gap `--prime-space-3`, cards inset `--prime-space-1` (room for the focus ring); a card sets `data-depth` one above the board's host and paints `--prime-color-layer-current`, so it keeps its color in flight too. `well`: column gap `--prime-space-3`, cards inset `--prime-space-2` from the column edge, column radius `l`. Card gap `--prime-space-2`, card padding `--prime-space-3`, card radius `m`.
 - The column title is `title-m`; the header is at least a control `m` tall, its text starts where the card text does.
-- A faint inset hairline (`--prime-color-border-faint`, as in a dialog header) separates the header from the cards.
+- `well` and `line`: a faint inset hairline (`--prime-color-border-faint`, as in a dialog header) separates the header from the cards. `plain`: the header is a filled plate (`--prime-color-fill-muted`, `--prime-radius-l`) as wide as the cards, in place of the hairline.
 - The header is a grid: the title, the count, the actions and the grip at the end on the first row; the description under the title on the second, the meta line under it (`--prime-space-1` above, caption, `text-secondary`).
-- A card is `--prime-color-control-selected` (two ladder steps off its column; white in light) on `--prime-shadow-raised`.
+- A card is on `--prime-shadow-raised`: in `plain` / `line` the next layer of the board's host (`--prime-color-layer-current` of its own depth), in `well` `--prime-color-control-selected` (two ladder steps off its well; white in light).
 - `Kanban.ItemHeader` is a muted caption row over a faint hairline (`--prime-color-border-faint`); a card without it starts with its title or a full-width `Thumbnail` cover.
 - Header actions get the `s` tier; inside a card, kit controls take the `m` host tier (a `Badge` is `s`). Pick a small `Avatar` (`size="s"`).
 
@@ -215,16 +218,17 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A release board: cards move within and between columns by drag, a touch hold or Alt + arrows; a card shows its meta line, labels, comments and assignee — `Kanban.Root`, `Kanban.Item`, `renderItem`, `renderColumnActions`. |
-| [variants.tsx](examples/variants.tsx) | The same release board in both looks: columns as filled wells, and bare columns where the header and wider cards carry each column — `variant`. |
+| [variants.tsx](examples/variants.tsx) | The same release board in three looks: no wells with a header plate, no wells with a header over a line, and columns as filled wells holding their cards — `variant`. |
 | [structure.tsx](examples/structure.tsx) | Cards take only the parts they need: a title alone, a meta line, labels, a footer with counts and an assignee — `Kanban.ItemTitle`, `Kanban.ItemDescription`, `Kanban.ItemBadges`, `Kanban.ItemFooter`, `Kanban.ItemCount`. |
 | [cards.tsx](examples/cards.tsx) | Three kinds of cards on one board: a plain note, a ticket with a header row of key and priority, a design task with a cover — `Kanban.ItemHeader`, `Thumbnail`, `Kanban.ItemFooter`. |
-| [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. |
-| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
+| [limits.tsx](examples/limits.tsx) | A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. |
+| [columns.tsx](examples/columns.tsx) | A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. |
 | [saving.tsx](examples/saving.tsx) | Every move is saved on the server: the card waits busy in its new place, and an invoice the server refuses to close glides back to its column — `onValueChange`. |
 | [item-link.tsx](examples/item-link.tsx) | Tickets that open: each card is a link to its page, so ⌘-click or a middle click opens a new tab, a plain click, Enter or Space opens it in place, and a drag only moves it — `getItemHref`, `onItemClick`. |
-| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a read-only board drags nothing — `loading`, `disabled`. |
+| [states.tsx](examples/states.tsx) | Loading draws skeleton cards in the card geometry and cross-fades the cards in; an empty column keeps its drop area; a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The placement lives in the parent: every move arrives with its source, target and position to save, and a button resets the board — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | On a phone-width screen a column takes 85% of the board and snaps into place, so the next one peeks; the strip scrolls inside the board, never the page. |
+| [screen.tsx](examples/screen.tsx) | A sales pipeline as a work screen: the title with the open deals and their sum, search, filter, the board / list switch and the one primary action in the app header, a full-height Kanban of deals by stage with totals, moves saved on the server that can be refused, and the deal in a Drawer — `value`, `onValueChange`, `renderColumnMeta`, `onItemClick`. |
 
 ## Mistakes
 - Returning something other than `Kanban.Item` from `renderItem` → the card does not drag and Alt + arrows do nothing.
@@ -234,6 +238,7 @@ A card's own `onKeyDown` runs before the board's: `preventDefault()` in it keeps
 - A hover-only action on a card → touch has no hover; put the action in the card or open the card on click (`onItemClick`).
 - `onClick` / `onKeyDown` on `Kanban.Item` to open a card → `onItemClick` (click, Enter, Space, never after a drag) or `getItemHref` for a page of its own.
 - `getItemHref` without `getLabel` → the link is named by the card id; pass a human name.
+- Drawing your own box (a Card, a filled `div`) around each column, or around a `well` board → pick the `variant`: `plain` or `line` for one level of nesting, `well` when columns must read as bounded queues.
 - Styling a card from an ancestor (`.board .card`) → the flying clone is portalled to `<body>` and loses it; put the class on `Kanban.Item`.
 - Keeping the column order in `columns` and reordering that array → pass `columnOrder` / `onColumnOrderChange`; `columns` stays the data.
 - Putting a system stage back first after every move → `locked: true` on that column.

package/dist/skill/reference/components/kanban/examples/columns.tsx

@@ -1,4 +1,4 @@
-/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover — `reorderableColumns`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
+/** A sales pipeline whose stages move by the grip in their header while the first and the last stay locked; each stage carries its color on the count, a rule and its figures under the title, and is edited in a popover; the page keeps the order — `reorderableColumns`, `columnOrder`, `onColumnOrderChange`, `locked`, `color`, `description`, `renderColumnMeta`, `renderColumnActions`. */
 import {
   Button,
   ColorSwatches,
@@ -52,6 +52,8 @@ const DEALS: Deal[] = [
   { id: "DL-296", client: "ГК «Меридиан»", amount: 2_750_000 },
 ];
 
+const INITIAL_ORDER = COLUMNS.map((column) => column.id);
+
 const PLACEMENT: KanbanValue = {
   lead: ["DL-318", "DL-322"],
   demo: ["DL-309"],
@@ -77,7 +79,7 @@ const dealsWord = (count: number) => {
 export default function KanbanColumnsExample() {
   const [columns, setColumns] = React.useState(COLUMNS);
   const [placement, setPlacement] = React.useState<KanbanValue>(PLACEMENT);
-  const [savedOrder, setSavedOrder] = React.useState<readonly string[] | null>(null);
+  const [order, setOrder] = React.useState<readonly string[]>(INITIAL_ORDER);
 
   const updateColumn = (id: string, patch: Partial<KanbanColumn>) =>
     setColumns((current) =>
@@ -95,8 +97,8 @@ export default function KanbanColumnsExample() {
   return (
     <div className={styles.stage}>
       <Typography as="span" variant="body-s" tone="muted" aria-live="polite">
-        {savedOrder
-          ? `Порядок этапов сохранён: ${savedOrder.map(titleOf).filter(Boolean).join(" → ")}`
+        {order !== INITIAL_ORDER
+          ? `Порядок этапов сохранён: ${order.map(titleOf).filter(Boolean).join(" → ")}`
           : "Перетащите этап за ручку в шапке или нажмите на ней Alt + ← / →"}
       </Typography>
       <Kanban.Root
@@ -109,7 +111,8 @@ export default function KanbanColumnsExample() {
         value={placement}
         onValueChange={setPlacement}
         reorderableColumns
-        onColumnOrderChange={setSavedOrder}
+        columnOrder={order}
+        onColumnOrderChange={setOrder}
         renderColumnMeta={figures}
         renderColumnActions={(column) => (
           <Popover.Root>

package/dist/skill/reference/components/kanban/examples/limits.tsx

@@ -1,4 +1,4 @@
-/** A support queue with a work-in-progress limit and a workflow rule: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`. */
+/** A support queue with a work-in-progress limit and a workflow rule, its columns drawn as wells so each reads as a bounded queue: a full column and a blocked ticket are refused before the release with the reason under the card, from the keyboard too — `limit`, `canDrop`, `variant`. */
 import { Badge, Kanban } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -33,6 +33,7 @@ export default function KanbanLimitsExample() {
     <Kanban.Root
       aria-label="Очередь поддержки"
       className={styles.board}
+      variant="well"
       columns={COLUMNS}
       items={TICKETS}
       getId={(ticket) => ticket.id}

package/dist/skill/reference/components/kanban/examples/screen.module.css

@@ -0,0 +1,17 @@
+/* Kanban board: a work screen — the header carries the title and the tools, the page fills the app
+   panel (`AppShell.Root fillViewport` + `PageContent.Root fill`) and the board or the list takes
+   the free height; every column scrolls inside the board, never the page. */
+
+/* Company cell: the name over the deal id. */
+.company {
+  display: grid;
+  white-space: nowrap;
+}
+
+/* Owner: avatar, then the name. */
+.owner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  white-space: nowrap;
+}