prime-ui-kit 0.15.0 → 0.17.0

package/src/components/kanban/examples/columns.tsx

@@ -17,20 +17,18 @@ import styles from "./examples.module.css";
 
 type Deal = { id: string; client: string; amount: number };
 
-/** The column colors offered in the editor: a swatch per palette hue. */
-const COLUMN_COLORS: { color: PaletteColor; value: string; label: string }[] = [
-  { color: "gray", value: "#71717a", label: "Серый" },
-  { color: "blue", value: "#5068f5", label: "Синий" },
-  { color: "teal", value: "#14b8a6", label: "Бирюзовый" },
-  { color: "green", value: "#22c55e", label: "Зелёный" },
-  { color: "yellow", value: "#eab308", label: "Жёлтый" },
-  { color: "orange", value: "#f97316", label: "Оранжевый" },
-  { color: "red", value: "#ef4444", label: "Красный" },
-  { color: "purple", value: "#a855f7", label: "Фиолетовый" },
+/** The stage hues offered in the editor. */
+const STAGE_HUES: PaletteColor[] = [
+  "gray",
+  "blue",
+  "teal",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "purple",
 ];
 
-const PRESETS = COLUMN_COLORS.map(({ value, label }) => ({ value, label }));
-
 const COLUMNS: KanbanColumn[] = [
   {
     id: "lead",
@@ -142,14 +140,11 @@ export default function KanbanColumnsExample() {
                 </Input.Wrapper>
               </Input.Root>
               <ColorSwatches
+                mode="palette"
                 label="Цвет"
-                presets={PRESETS}
-                value={COLUMN_COLORS.find((entry) => entry.color === column.color)?.value ?? null}
-                onValueChange={(value) =>
-                  updateColumn(column.id, {
-                    color: COLUMN_COLORS.find((entry) => entry.value === value)?.color,
-                  })
-                }
+                palette={STAGE_HUES}
+                value={column.color ?? null}
+                onValueChange={(color) => updateColumn(column.id, { color: color ?? undefined })}
               />
               {column.locked ? null : (
                 <Popover.Actions>

package/src/components/kanban/examples/item-link.tsx

@@ -1,4 +1,4 @@
-/** 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`. */
+/** 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`, `onItemOpen`. */
 import { Badge, Kanban, type KanbanValue, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -71,7 +71,7 @@ export default function KanbanItemLinkExample() {
         getLabel={(ticket) => `${ticket.id}: ${ticket.title}`}
         defaultValue={PLACEMENT}
         getItemHref={(ticket) => `/support/${ticket.id}`}
-        onItemClick={(ticket, event) => {
+        onItemOpen={(ticket, event) => {
           // A client-side router goes here (navigate(href)); the page itself never reloads.
           event.preventDefault();
           setOpened(ticket);

package/src/components/kanban/examples/limits.tsx

@@ -51,7 +51,7 @@ export default function KanbanLimitsExample() {
           </Kanban.ItemDescription>
           {ticket.blocked ? (
             <Kanban.ItemBadges>
-              <Badge.Root color="orange">Ждёт клиента</Badge.Root>
+              <Badge.Root tone="warning">Ждёт клиента</Badge.Root>
             </Kanban.ItemBadges>
           ) : null}
         </Kanban.Item>

package/src/components/kanban/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** 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. */
+/** 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 — `Kanban.Root`, `columns`. */
 import { Avatar, Kanban } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/src/components/kanban/examples/screen.module.css

@@ -1,11 +1,10 @@
 /* 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
+   panel (`AppShell.Root fillViewport` + `Page.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 cell: the name over the deal id (the column's `minWidth` keeps it on its lines). */
 .company {
   display: grid;
-  white-space: nowrap;
 }
 
 /* Owner: avatar, then the name. */
@@ -13,5 +12,4 @@
   display: inline-flex;
   align-items: center;
   gap: var(--prime-space-2);
-  white-space: nowrap;
 }

package/src/components/kanban/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** 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`. */
+/** 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 its top bar, 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`, `onItemOpen`. */
 import {
-  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -16,8 +15,7 @@ import {
   type KanbanColumn,
   type KanbanValue,
   matchesSmartFilter,
-  PageContent,
-  PageToolbar,
+  Page,
   type PaletteColor,
   SegmentedControl,
   SmartFilter,
@@ -237,6 +235,7 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
     header: "Компания",
     accessor: "company",
     sortable: true,
+    minWidth: "14rem",
     cell: (row) => (
       <span className={styles.company}>
         <Typography as="span" variant="body-m">
@@ -252,6 +251,7 @@ const COLUMNS: DataTableColumn<DealRow>[] = [
   {
     id: "owner",
     header: "Ответственный",
+    minWidth: "12rem",
     cell: (row) => (
       <span className={styles.owner}>
         {ownerAvatar(row.owner)}
@@ -357,64 +357,51 @@ export default function KanbanScreenExample() {
   const nextStage = STAGES[STAGES.findIndex((stage) => stage.id === dealStage) + 1];
 
   return (
-    <>
-      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
-          the only h1 and the page's tools; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Сделки
-            <AppHeader.Description>
-              {loading ? "Загружаем воронку…" : pipeline}
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root
-            fields={FIELDS}
-            value={filter}
-            onValueChange={setFilter}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <PageToolbar.Root aria-label="Сделки">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.View>
-                <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
-                  <SegmentedControl.Item value="board">
-                    <SegmentedControl.Icon>
-                      <Icon name="view.columns" />
-                    </SegmentedControl.Icon>
-                    Доска
-                  </SegmentedControl.Item>
-                  <SegmentedControl.Item value="list">
-                    <SegmentedControl.Icon>
-                      <Icon name="format.list" />
-                    </SegmentedControl.Icon>
-                    Список
-                  </SegmentedControl.Item>
-                </SegmentedControl.Root>
-              </PageToolbar.View>
-              <PageToolbar.Actions>
-                <Button.Root>
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Новая сделка
-                </Button.Root>
-              </PageToolbar.Actions>
-              <PageToolbar.Chips>
-                <SmartFilter.Chips />
-              </PageToolbar.Chips>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root fill>
-        <PageContent.Body>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root fill>
+        {/* A work screen titles itself in its top bar: the only h1, the search and the filters, the
+          view, the one primary action. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Сделки</Page.Title>
+            <Page.Description>{loading ? "Загружаем воронку…" : pipeline}</Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Сделки">
+            <SmartFilter.Toolbar />
+            <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+              <SegmentedControl.Item value="board">
+                <SegmentedControl.Icon>
+                  <Icon name="view.columns" />
+                </SegmentedControl.Icon>
+                Доска
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value="list">
+                <SegmentedControl.Icon>
+                  <Icon name="format.list" />
+                </SegmentedControl.Icon>
+                Список
+              </SegmentedControl.Item>
+            </SegmentedControl.Root>
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Новая сделка
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>
           <Crossfade state={view} fill>
             {view === "board" ? (
               // `plain` (the default): the board is the page's main region, so the stages are no
@@ -440,7 +427,7 @@ export default function KanbanScreenExample() {
                 }}
                 renderColumnMeta={figures}
                 loading={loading}
-                onItemClick={(item) => openDeal(item.id)}
+                onItemOpen={(item) => openDeal(item.id)}
                 renderItem={(item) => (
                   <Kanban.Item>
                     <Kanban.ItemTitle>{item.company}</Kanban.ItemTitle>
@@ -518,9 +505,9 @@ export default function KanbanScreenExample() {
                     <DescriptionList.Item label="Источник">{deal.source}</DescriptionList.Item>
                     <DescriptionList.Item label="Договор">
                       {deal.contract ? (
-                        <Badge.Root color="green">Подписан</Badge.Root>
+                        <Badge.Root tone="success">Подписан</Badge.Root>
                       ) : (
-                        <Badge.Root color="gray">Не подписан</Badge.Root>
+                        <Badge.Root tone="neutral">Не подписан</Badge.Root>
                       )}
                     </DescriptionList.Item>
                   </DescriptionList.Root>
@@ -565,8 +552,8 @@ export default function KanbanScreenExample() {
               </Drawer.Footer>
             </Drawer.Content>
           </Drawer.Root>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

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

@@ -1,8 +1,5 @@
-/** 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`. */
-import { Badge, Button, Icon, Kanban, Switch } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
+/** Loading draws skeleton cards in the card geometry; an empty column keeps its drop area and a closed order stays in place while the rest move; a read-only board drags nothing — `loading`, `disabled`. */
+import { Badge, Kanban, Typography } from "prime-ui-kit";
 
 type Order = { id: string; title: string; total: string; closed?: boolean };
 
@@ -26,61 +23,43 @@ const PLACEMENT = {
   shipped: ["ORD-5524", "ORD-5518"],
 };
 
-const LOAD_MS = 1200;
+const STATES = [
+  { caption: "loading", loading: true, disabled: false },
+  { caption: "Kanban.Item disabled", loading: false, disabled: false },
+  { caption: "disabled", loading: false, disabled: true },
+];
 
 export default function KanbanStatesExample() {
-  const [loading, setLoading] = React.useState(true);
-  const [readOnly, setReadOnly] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!loading) return;
-    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
-    return () => window.clearTimeout(timer);
-  }, [loading]);
-
-  return (
-    <div className={styles.stage}>
-      <div className={styles.toolbar}>
-        <Switch.Root checked={readOnly} onCheckedChange={setReadOnly}>
-          <Switch.Label>Только просмотр</Switch.Label>
-        </Switch.Root>
-        <div className={styles.spacer} />
-        <Button.Root
-          variant="soft"
-          tone="neutral"
-          loading={loading}
-          onClick={() => setLoading(true)}
-        >
-          <Button.Icon>
-            <Icon name="action.refresh" />
-          </Button.Icon>
-          Обновить
-        </Button.Root>
+  return STATES.map((state) => (
+    <div key={state.caption}>
+      <div>
+        <Kanban.Root
+          aria-label={`Заказы склада: ${state.caption}`}
+          columns={COLUMNS}
+          items={ORDERS}
+          getId={(order) => order.id}
+          getLabel={(order) => order.id}
+          defaultValue={PLACEMENT}
+          loading={state.loading}
+          disabled={state.disabled}
+          renderItem={(order) => (
+            <Kanban.Item disabled={order.closed}>
+              <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
+              <Kanban.ItemDescription>
+                {order.title} · {order.total}
+              </Kanban.ItemDescription>
+              {order.closed ? (
+                <Kanban.ItemBadges>
+                  <Badge.Root color="gray">Закрыт</Badge.Root>
+                </Kanban.ItemBadges>
+              ) : null}
+            </Kanban.Item>
+          )}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          {state.caption}
+        </Typography>
       </div>
-      <Kanban.Root
-        aria-label="Заказы склада"
-        className={styles.board}
-        columns={COLUMNS}
-        items={ORDERS}
-        getId={(order) => order.id}
-        getLabel={(order) => order.id}
-        defaultValue={PLACEMENT}
-        loading={loading}
-        disabled={readOnly}
-        renderItem={(order) => (
-          <Kanban.Item disabled={order.closed}>
-            <Kanban.ItemTitle>{order.id}</Kanban.ItemTitle>
-            <Kanban.ItemDescription>
-              {order.title} · {order.total}
-            </Kanban.ItemDescription>
-            {order.closed ? (
-              <Kanban.ItemBadges>
-                <Badge.Root color="gray">Закрыт</Badge.Root>
-              </Kanban.ItemBadges>
-            ) : null}
-          </Kanban.Item>
-        )}
-      />
     </div>
-  );
+  ));
 }

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

@@ -1,8 +1,6 @@
 /** 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`. */
 import { Badge, Kanban, type KanbanVariant, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Task = { id: string; title: string; due: string; label: string };
 
 const VARIANTS: KanbanVariant[] = ["plain", "line", "well"];
@@ -37,7 +35,6 @@ export default function KanbanVariantsExample() {
       <div>
         <Kanban.Root
           aria-label={`Задачи релиза: ${variant}`}
-          className={styles.board}
           variant={variant}
           columns={COLUMNS}
           items={TASKS}

package/src/components/kbd/COMPONENT.md

@@ -39,7 +39,7 @@ Kbd              <kbd>; one key, its badge tier, children (text, Icon or both)
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "size">` | — | `className`, `title`, `aria-label` and the other `<kbd>` attributes. |
 
 ## Variants
-Kbd has one look: monospace text in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
+Kbd has one look: monospace text (`--prime-font-family-key`: the mono faces, with ⇧ ⌥ ⌃ ⌘ from the system face so they match the letters) in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -60,17 +60,21 @@ Minimum width equals the height, so single-character keys are square.
 | size | `size`, else the surrounding control, else `m` | `data-size` (nominal), `data-tier` (visual tier, drives every dimension) |
 
 ## Layout & spacing
-- Inline-flex, centered content, never shrinks, `vertical-align: middle`.
-- Keys of one chord: `gap: var(--prime-space-1)`; an optional «+» between them is `aria-hidden`.
-- In a hotkey list: action left, keys right (`justify-content: space-between`), rows `gap: var(--prime-space-3)`.
+- Inline-flex, centered content, never shrinks, `vertical-align: middle`. The key owns its line box; a kit `Icon` (or a raw svg) inside takes the tier icon size.
+- Keys of one chord sit 4px apart; an optional «+» between them is `aria-hidden`.
+- In a hotkey list: a `DescriptionList` — the action is the label, its keys the value.
 - In a field, put the key in `Input.InlineAffix side="end"`.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Renders a native `<kbd>`; its text is read as is.
 - Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and `title` («Command», «Shift»).
 - A visual «+» between keys gets `aria-hidden="true"`.
@@ -85,8 +89,8 @@ No `labels`.
 |---|---|
 | [overview.tsx](examples/overview.tsx) | A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. |
 | [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
-| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. |
-| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: action on the left, its keys on the right, an icon inside a key. |
+| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. |
+| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. |
 
 ## Mistakes
 - `<Kbd>⌘ + Shift + P</Kbd>` → one `Kbd` per key with an `aria-hidden` «+» between.
@@ -95,5 +99,5 @@ No `labels`.
 - A `<span>` styled as a key, or a `Badge` used for a key → use `Kbd`.
 
 ## Related
-- **Built from:** —
+- **Built from:** `internal/chipTier` (the Badge tiers)
 - **See also:** [Badge](../badge/COMPONENT.md) (same tiers), [CommandMenu](../command-menu/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md)

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

@@ -14,24 +14,5 @@
   align-items: center;
   justify-content: center;
   gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-/* shortcut-list.tsx: action left, keys right. */
-.list {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: min(100%, var(--prime-modal-width-s));
-  margin: 0;
-}
-
-.listRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-4);
-}
-
-.listRow dd {
-  margin: 0;
+  width: min(100%, var(--prime-layout-form-width-s));
 }

package/src/components/kbd/examples/in-controls.tsx

@@ -1,4 +1,4 @@
-/** Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. */
+/** Inside a button or a field the key takes the tier one step down; an explicit size overrides it — `size`. */
 import { Button, Input, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -16,7 +16,7 @@ export default function KbdInControlsExample() {
         </span>
       </Button.Root>
       <Button.Root tone="neutral">
-        Отправить
+        Применить
         <Kbd size="xs" aria-label="Enter" title="Enter">
           ↵
         </Kbd>

package/src/components/kbd/examples/shortcut-list.tsx

@@ -1,5 +1,5 @@
-/** A hotkey reference: action on the left, its keys on the right, an icon inside a key. */
-import { Icon, Kbd, Typography } from "prime-ui-kit";
+/** A hotkey reference: the action, then its keys, one of them with an icon inside — `aria-label`, `title`. */
+import { DescriptionList, Icon, Kbd } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -14,36 +14,24 @@ const SHORTCUTS = [
 
 export default function KbdShortcutListExample() {
   return (
-    <dl className={styles.list}>
+    <DescriptionList.Root>
       {SHORTCUTS.map((item) => (
-        <div key={item.action} className={styles.listRow}>
-          <dt>
-            <Typography as="span" variant="body-m">
-              {item.action}
-            </Typography>
-          </dt>
-          <dd className={styles.chord}>
+        <DescriptionList.Item key={item.action} label={item.action}>
+          <span className={styles.chord}>
             {item.keys.map((key) => (
               <Kbd key={key} aria-label={KEY_NAMES[key]} title={KEY_NAMES[key]}>
                 {key}
               </Kbd>
             ))}
-          </dd>
-        </div>
+          </span>
+        </DescriptionList.Item>
       ))}
-      <div className={styles.listRow}>
-        <dt>
-          <Typography as="span" variant="body-m">
-            Закрыть окно
-          </Typography>
-        </dt>
-        <dd className={styles.chord}>
-          <Kbd>
-            <Icon name="action.close" />
-            Esc
-          </Kbd>
-        </dd>
-      </div>
-    </dl>
+      <DescriptionList.Item label="Закрыть окно">
+        <Kbd>
+          <Icon name="action.close" />
+          Esc
+        </Kbd>
+      </DescriptionList.Item>
+    </DescriptionList.Root>
   );
 }