prime-ui-kit 0.10.0 → 0.11.1

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

@@ -0,0 +1,31 @@
+/** A closed conversation is disabled, a slow send keeps the text with a busy button until the server answers — `disabled`, `onSend`. */
+import { Composer, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SLOW_SEND_MS = 2500;
+
+const slowSend = () => new Promise<void>((resolve) => window.setTimeout(resolve, SLOW_SEND_MS));
+
+export default function ComposerStatesExample() {
+  return (
+    <>
+      <div className={styles.cell}>
+        <Composer.Root disabled defaultValue="Обращение закрыто">
+          <Composer.Attach />
+        </Composer.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          disabled
+        </Typography>
+      </div>
+      <div className={styles.cell}>
+        <Composer.Root defaultValue="Нажмите Enter — отправка займёт пару секунд" onSend={slowSend}>
+          <Composer.Attach />
+        </Composer.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          onSend → Promise
+        </Typography>
+      </div>
+    </>
+  );
+}

package/dist/skill/reference/components/composer/examples/typing.tsx

@@ -0,0 +1,24 @@
+/** The other side's status line follows what you do: typing, recording a voice or a video message, then nothing — `onActivityChange`. */
+import { Composer, type ComposerActivity, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ACTIVITY_TEXT: Record<ComposerActivity, string> = {
+  typing: "Анна видит: «печатает…»",
+  voice: "Анна видит: «записывает голосовое…»",
+  video: "Анна видит: «записывает видео…»",
+};
+
+export default function ComposerTypingExample() {
+  const [activity, setActivity] = React.useState<ComposerActivity | null>(null);
+
+  return (
+    <div className={styles.chat}>
+      <Typography as="p" variant="body-s" tone="secondary" aria-live="polite">
+        {activity ? ACTIVITY_TEXT[activity] : "Анна видит: «в сети»"}
+      </Typography>
+      <Composer.Root onActivityChange={setActivity} onSend={() => {}} onSendVoice={() => {}} />
+    </div>
+  );
+}

package/dist/skill/reference/components/composer/examples/voice.tsx

@@ -0,0 +1,21 @@
+/** Voice and round video messages: hold the button to record and release to send, slide left to cancel, slide up or tap to record hands-free; a double tap or double click switches voice and video — `onSendVoice`, `onSendVideoNote`, `recordMode`. */
+import { Composer, type ComposerRecordMode } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function ComposerVoiceExample() {
+  const [recordMode, setRecordMode] = React.useState<ComposerRecordMode>("voice");
+
+  return (
+    <div className={`${styles.chat} ${styles.withPreview}`}>
+      <Composer.Root
+        recordMode={recordMode}
+        onRecordModeChange={setRecordMode}
+        onSendVoice={() => {}}
+        onSendVideoNote={() => {}}
+        onSend={() => {}}
+      />
+    </div>
+  );
+}

package/dist/skill/reference/components/confirm-dialog/COMPONENT.md

@@ -0,0 +1,124 @@
+# ConfirmDialog
+
+**Category:** overlays
+**Kind:** overlay
+
+> The confirm of a destructive or weighty action in one piece: the question, the consequence, Cancel and an action that runs its own request.
+
+## When to use
+- Deleting, revoking, cancelling or overwriting something that cannot be undone («Удалить проект?»).
+- A weighty but safe action that should not happen by accident (send an invoice, publish to everyone) — `tone="accent"`.
+- Any confirm from a button, a Dropdown item or a table row action: the request, its pending state and its failure live inside.
+
+## When not to use
+- A form, a choice or more than one sentence of content → use [Modal](../modal/COMPONENT.md).
+- An action that can be undone → do it at once and offer «Отменить» in a [Notification](../notification/COMPONENT.md).
+- A hold-to-confirm right on the button (no dialog) → `holdToConfirm` on [Button](../button/COMPONENT.md).
+- Unsaved changes in a Modal or Drawer form → `Modal.Guard` / `Drawer.Guard dirty` (it opens this dialog itself).
+
+## Import
+```tsx
+import { ConfirmDialog } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+ConfirmDialog.Root            state; renders the trigger and the dialog
+├── ConfirmDialog.Trigger     clones its child; opens on click
+└── (Modal s)                 portal + scrim + role="alertdialog"
+    ├── header                title (names it) · description (describes it) · close button
+    ├── (message)             a danger Banner with role="alert" after a failure
+    └── footer                Cancel (focused first) · the confirm (solid, loading while it runs)
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### ConfirmDialog.Root
+No ref (state root). Renders its Trigger and a Modal `s` with `role="alertdialog"`: the title, the description, an inline danger message after a failure, Cancel (focused first) and the confirm. A press outside never closes it; while `onConfirm` runs nothing closes it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `open` | `boolean` | — | Controlled visibility; together with `onOpenChange`. |
+| `defaultOpen` | `boolean` | `false` | Initial visibility, uncontrolled. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called on open and close: the Trigger, Cancel, the close button, Escape, a resolved `onConfirm`. |
+| `title` | `ReactNode` | — (required) | The question as a heading («Удалить проект?»); names the dialog. |
+| `description` | `ReactNode` | — | What happens and what cannot be undone; describes the dialog. |
+| `confirmLabel` | `ReactNode` | — (required) | The confirm button: the action as a verb («Удалить»), never «Да» or «ОК». |
+| `tone` | `"danger" \| "accent"` | `"danger"` | `danger`: a destructive action, solid danger confirm. `accent`: a weighty but safe one (send, publish), solid accent confirm. |
+| `onConfirm` | `() => unknown` | — (required) | The action. A Promise keeps the dialog busy: the confirm shows `loading`, Cancel and the close button are disabled, Escape is ignored. Resolve closes the dialog; reject keeps it open with `error` (else `labels.error`). |
+| `error` | `ReactNode` | — | Why the action failed, from the owner; shown under the text while set. |
+| `labels` | `Partial<ConfirmDialogLabels>` | — | Built-in strings, see Labels. |
+| `children` | `ReactNode` | — | `ConfirmDialog.Trigger`; nothing when `open` comes from code. |
+
+### ConfirmDialog.Trigger
+No DOM: clones the single child and chains its `onClick` to open the dialog (unless the child's handler calls `preventDefault()`); focus returns to it on close.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactElement` | — (required) | One element, usually a Button with `tone="danger"`. |
+
+## Variants
+The dialog is a Modal `s` with the floating surface, a header and a footer; there is no icon tile.
+
+### tone
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `danger` | solid danger confirm | Delete, revoke, cancel for good | yes |
+| `accent` | solid accent confirm | Send, publish, charge — weighty but safe | |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the scrim and the dialog (closed while the exit motion plays) |
+| running | `onConfirm` returned a pending Promise | the confirm `data-loading="true"` and `aria-busy="true"`; Cancel and the close button `disabled` in place; Escape ignored |
+| failed | `onConfirm` rejected, or `error` set | a danger Banner with `role="alert"` drops in under the header; the confirm is ready again |
+
+## Layout & spacing
+- Modal `s`: 440 wide, the footer fills with two equal buttons; a bottom sheet below 640px of viewport, buttons stacked full width.
+- The failure message is the dialog body (20 around it); without it the header meets the footer.
+- Write the title as a question with the object («Удалить тег «VIP»?»), the description as the consequence in one or two sentences, the confirm as the verb.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` · `Shift+Tab` | Cycles focus inside the dialog; Cancel is focused first. |
+| `Enter` | On a button presses it; from the dialog itself presses the confirm. |
+| `Escape` | Closes the dialog unless the action runs; focus returns to the trigger. |
+
+### ARIA
+- `role="alertdialog"`, `aria-modal="true"`, named by `title`, described by `description`.
+- Cancel takes focus first — the least destructive choice.
+- While the action runs the confirm has `aria-busy="true"`; Cancel and the close button are disabled.
+- The failure message is `role="alert"`, read at once.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `cancel` | `"Отмена"` | The cancel button. |
+| `close` | `"Закрыть"` | `aria-label` of the header close button. |
+| `error` | `"Не получилось. Попробуйте ещё раз."` | The message after a rejected `onConfirm` when there is no `error`. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | Deleting a project: the danger confirm runs the request with a spinner and nothing closes the dialog until it ends — `ConfirmDialog.Trigger`, `onConfirm`. |
+| [variants.tsx](examples/variants.tsx) | A destructive action gets the danger confirm; a weighty but safe one, such as sending an invoice, the accent one — `tone`. |
+| [failure.tsx](examples/failure.tsx) | The server refuses: the dialog stays open with the owner's reason under the text and the confirm ready to try again — `error`, `onConfirm`. |
+| [controlled-open.tsx](examples/controlled-open.tsx) | A menu item opens the confirm from code: the dialog has no trigger of its own and the parent owns its state — `open`, `onOpenChange`. |
+
+## Mistakes
+- A hand-built Modal with `closeOnOutsideClick={false}`, a loading flag and a disabled Cancel → ConfirmDialog does all of it.
+- `onConfirm` that catches its own error and resolves → the dialog closes as if it worked; rethrow (or reject) to keep it open.
+- «Да» / «ОК» on the confirm → the verb of the action («Удалить», «Отправить»).
+- A success message inside the dialog → it closes on success; say «Удалено» with a Notification.
+- `tone="accent"` for a delete → destructive is always `danger`.
+
+## Related
+- **Built from:** [Modal](../modal/COMPONENT.md) (`s`, the header and footer parts), [Button](../button/COMPONENT.md) (Cancel, the confirm with `loading`), [Banner](../banner/COMPONENT.md) (the failure message), `Icon` (`status.danger` in the Banner)
+- **See also:** [Modal](../modal/COMPONENT.md), [Drawer](../drawer/COMPONENT.md), [Notification](../notification/COMPONENT.md)

package/dist/skill/reference/components/confirm-dialog/examples/controlled-open.tsx

@@ -0,0 +1,35 @@
+/** A menu item opens the confirm from code: the dialog has no trigger of its own and the parent owns its state — `open`, `onOpenChange`. */
+import { Button, ConfirmDialog, Dropdown, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+export default function ConfirmDialogControlledOpenExample() {
+  const [confirming, setConfirming] = React.useState(false);
+
+  return (
+    <>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root variant="ghost" tone="neutral" aria-label="Действия со счётом">
+            <Button.Icon>
+              <Icon name="action.more" />
+            </Button.Icon>
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Скачать PDF</Dropdown.Item>
+          <Dropdown.Item tone="danger" onSelect={() => setConfirming(true)}>
+            Аннулировать счёт
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+      <ConfirmDialog.Root
+        open={confirming}
+        onOpenChange={setConfirming}
+        title="Аннулировать счёт №318?"
+        description="Клиент увидит счёт как недействительный; выставить его снова не получится."
+        confirmLabel="Аннулировать"
+        onConfirm={() => new Promise((resolve) => setTimeout(resolve, 900))}
+      />
+    </>
+  );
+}

package/dist/skill/reference/components/confirm-dialog/examples/failure.tsx

@@ -0,0 +1,37 @@
+/** The server refuses: the dialog stays open with the owner's reason under the text and the confirm ready to try again — `error`, `onConfirm`. */
+import { Button, ConfirmDialog } from "prime-ui-kit";
+import * as React from "react";
+
+/** Pretends the server refuses: the tag is still in use. */
+function deleteTag() {
+  return new Promise((_, reject) => setTimeout(() => reject(new Error("in use")), 900));
+}
+
+export default function ConfirmDialogFailureExample() {
+  const [error, setError] = React.useState<string>();
+
+  return (
+    <ConfirmDialog.Root
+      title="Удалить тег «VIP»?"
+      description="Тег снимется со всех клиентов."
+      confirmLabel="Удалить тег"
+      error={error}
+      onOpenChange={() => setError(undefined)}
+      onConfirm={async () => {
+        setError(undefined);
+        try {
+          await deleteTag();
+        } catch (reason) {
+          setError("Тег используется в 12 активных сделках — сначала снимите его с них.");
+          throw reason;
+        }
+      }}
+    >
+      <ConfirmDialog.Trigger>
+        <Button.Root variant="soft" tone="danger">
+          Удалить тег
+        </Button.Root>
+      </ConfirmDialog.Trigger>
+    </ConfirmDialog.Root>
+  );
+}

package/dist/skill/reference/components/confirm-dialog/examples/overview.tsx

@@ -0,0 +1,24 @@
+/** Deleting a project: the danger confirm runs the request with a spinner and nothing closes the dialog until it ends — `ConfirmDialog.Trigger`, `onConfirm`. */
+import { Button, ConfirmDialog } from "prime-ui-kit";
+
+/** Pretends to delete the project on the server. */
+function deleteProject() {
+  return new Promise((resolve) => setTimeout(resolve, 1200));
+}
+
+export default function ConfirmDialogOverviewExample() {
+  return (
+    <ConfirmDialog.Root
+      title="Удалить проект «Запуск в регионах»?"
+      description="Проект, его задачи и файлы удалятся без возможности восстановления."
+      confirmLabel="Удалить проект"
+      onConfirm={deleteProject}
+    >
+      <ConfirmDialog.Trigger>
+        <Button.Root variant="outline" tone="danger">
+          Удалить проект
+        </Button.Root>
+      </ConfirmDialog.Trigger>
+    </ConfirmDialog.Root>
+  );
+}

package/dist/skill/reference/components/confirm-dialog/examples/variants.tsx

@@ -0,0 +1,44 @@
+/** A destructive action gets the danger confirm; a weighty but safe one, such as sending an invoice, the accent one — `tone`. */
+import { Button, ConfirmDialog, Typography } from "prime-ui-kit";
+
+export default function ConfirmDialogVariantsExample() {
+  return (
+    <div>
+      <div>
+        <ConfirmDialog.Root
+          title="Отозвать доступ Анны Соколовой?"
+          description="Она потеряет доступ к проектам команды сразу."
+          confirmLabel="Отозвать"
+          onConfirm={() => {}}
+        >
+          <ConfirmDialog.Trigger>
+            <Button.Root variant="outline" tone="danger">
+              Отозвать доступ
+            </Button.Root>
+          </ConfirmDialog.Trigger>
+        </ConfirmDialog.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          danger
+        </Typography>
+      </div>
+      <div>
+        <ConfirmDialog.Root
+          tone="accent"
+          title="Отправить счёт №318 клиенту?"
+          description="Счёт на 480 000 ₽ уйдёт на office@nwind.ru."
+          confirmLabel="Отправить"
+          onConfirm={() => {}}
+        >
+          <ConfirmDialog.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              Отправить счёт
+            </Button.Root>
+          </ConfirmDialog.Trigger>
+        </ConfirmDialog.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          accent
+        </Typography>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,118 @@
+# Crossfade
+
+**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.
+
+Continuous state change is a foundation of the kit (foundation §1 rule 7): a region never flips from
+one state to another. Crossfade is the mechanic for regions; its loading state is a
+[Skeleton](../skeleton/COMPONENT.md) in the shape of the coming content.
+
+## When to use
+- A card, panel or page region that switches between loading, data, empty and error states of its own content — every such region, not only the prominent ones.
+- A detail panel that shows one record at a time: key it by the record id.
+- Any in-place swap of one block for another where an instant flip would be jarring.
+- A region as high as its panel (a board, a chat, a full-height table) that swaps states: `fill`.
+- An optional block (a notice, a bulk-action bar) that comes and goes in a grid or a flex column: empty children leave no box, so the gap closes too.
+
+## When not to use
+- A table loading, empty or failing → set `loading`, `empty`, `error` on [DataTable](../data-table/COMPONENT.md); its body already cross-fades between them.
+- Content that only updates (new numbers, one more row) → render it in place; keep the same `state`.
+- Panels the user switches between → [Tabs](../tabs/COMPONENT.md).
+- Showing and hiding a block (disclosure) → [Accordion](../accordion/COMPONENT.md).
+- Floating layers → overlays carry their own motion ([Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md)).
+
+## Import
+```tsx
+import { Crossfade } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+Crossfade          <div>; holds the region's height while it changes
+├─ leaving layer   the previous state, laid over the new one while it fades out (aria-hidden, inert)
+└─ current layer   children of the current state, in flow
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Crossfade
+`ref` → `HTMLDivElement`. A region that cross-fades its content when `state` changes and glides to the new height; still on the first render, instant under reduced motion.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `state` | `string \| number` | — (required) | Key of what the region shows: `"loading"`, `"ready"`, `"empty"`, `"error"` or a record id. A new value cross-fades the old content into the new one; the same value updates in place. |
+| `fill` | `boolean` | `false` | The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides. |
+| `children` | `ReactNode` | — | Content of the current `state`. Nothing (`null`, `false`) leaves no box once the old state has faded: no gap in a grid or a flex column. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `aria-busy`, `aria-live`, `role` and the other div attributes. |
+
+## Variants
+Crossfade has no variants: one treatment, keyed by `state`.
+
+### Flags
+| Flag | Looks like when on | Use when | Default |
+|---|---|---|---|
+| `fill` | the root takes its parent's height; each state's content stretches to it; the leaving layer covers the whole root; no height glide | a full-height region: a board, a chat, a pane in a fixed-height page | `false` |
+
+### state
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| a status (`"loading"`, `"ready"`, `"empty"`, `"error"`) | the old content fades out over the new one fading in; the height glides | a region's screen states | — |
+| a record id | the same cross-fade between two records | a detail panel showing one record at a time | — |
+| the same value with new children | updated in place, no motion | data refreshes inside one state | — |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| first render | mount | one layer, `data-state="open"`, no motion |
+| swapping | `state` changes | previous layer `data-state="closed"`, `aria-hidden`, `inert`, absolutely placed, fades out over `fast` with `exit` easing and unmounts on `animationend` (timeout fallback); the new layer fades in over `base` with `enter` easing |
+| resizing | the new state has another height | root `data-resizing="true"`: height glides from the old to the new value over `base` with `standard` easing, clipped with a `--prime-focus-space` margin, then returns to `auto` |
+| reduced motion | `prefers-reduced-motion: reduce` | instant swap: no leaving layer, no glide |
+| empty | the current state renders nothing (`null`, `false`, `""`) | no current layer; once nothing is leaving the root is `:empty` and `display: none` — no box and no gap in its grid or flex parent |
+| filling | `fill` | `data-fill="true"`; the root is a one-cell grid (`flex: 1`, `height: 100%`, `min-height: 0`), layers stretch to it |
+
+Motion is opacity only, so nothing shifts under the pointer; the leaving content keeps its instance (no remount, no repeated effects) until it is gone.
+
+## Layout & spacing
+- No padding, gap or fill of its own: it sits where the swapped content would sit (inside `Card.Body`, a page section, a panel).
+- Width follows the parent; height is the current content's height except while gliding — or, with `fill`, the parent's height (the parent needs one: a flex or grid column with a height, `PageContent.Root fill`).
+- An empty Crossfade has no box: an optional block above a list keeps the page rhythm whether it is there or not.
+- The loading state is a `Skeleton` with the geometry of the data it stands for (same rows, same line heights), so the swap to data changes neither layout nor height.
+
+## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
+- Renders a plain `<div>`; pass `aria-busy` while the region loads and `aria-live` or `role` when its changes must be announced.
+- The leaving layer is `aria-hidden` and `inert`: screen readers and Tab never reach content that is going away.
+- Move focus yourself when the focused control was in the old state (e.g. the retry button of an error).
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A card region that cross-fades between loading, data, empty and error and glides to the new height — `state`. |
+| [record-switch.tsx](examples/record-switch.tsx) | A detail panel keyed by the record id: picking another client cross-fades the details of a different height — `state`. |
+| [fill.tsx](examples/fill.tsx) | A deal board that fills its panel's height while it swaps between loading and data, and a notice slot above it that takes no room while empty — `fill`, `state`. |
+
+## Mistakes
+- A new `state` on every data refresh (`state={Date.now()}`) → key by what the region shows, not by when it was fetched.
+- Switching states with `{loading ? <Spinner /> : <List />}` and no wrapper → wrap the region in `Crossfade state={status}` and show a `Skeleton` of the list while it loads.
+- A spinner block for content of known shape → a `Skeleton` of that shape; a spinner is for loading with no shape to hold (a button, a status line).
+- Wrapping a DataTable to animate its loading / empty / error → the table body already cross-fades; use its props.
+- Hand-written `opacity` transitions or `height` animations for a state swap → Crossfade owns both, with tokens and reduced motion.
+- `height: 100%` on the content of a full-height region → `fill` on the Crossfade; its layers stretch.
+- Rendering an optional block conditionally outside Crossfade (`{notice && <Banner />}`) → it pops in and out; keep the Crossfade and pass `null` when there is nothing to show.
+
+## Related
+- **Built from:** —
+- **See also:** [Skeleton](../skeleton/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Spinner](../spinner/COMPONENT.md), [Banner](../banner/COMPONENT.md)

package/dist/skill/reference/components/crossfade/examples/examples.module.css

@@ -0,0 +1,93 @@
+/* Layout of the Crossfade scenarios: semantic tokens only. */
+
+.stack {
+  display: grid;
+  justify-items: start;
+  gap: var(--prime-space-4);
+  width: min(100%, calc(var(--prime-space-24) * 5));
+}
+
+.stack > * {
+  justify-self: stretch;
+}
+
+.stack > :first-child {
+  justify-self: start;
+  max-width: 100%;
+}
+
+/* Placeholder rows share the data rows' geometry: the swap to data does not change the height. */
+.payerBar {
+  width: 55%;
+}
+
+.amountBar {
+  width: 20%;
+}
+
+.list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.listRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+  padding-block: var(--prime-space-3);
+  border-bottom: var(--prime-border-width) solid var(--prime-color-border-subtle);
+}
+
+.listRow:last-child {
+  border-bottom: 0;
+}
+
+.amount {
+  font-variant-numeric: tabular-nums;
+}
+
+.facts {
+  display: grid;
+  gap: var(--prime-space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* fill.tsx: a page panel of a fixed height; the board region takes what the rows above leave. */
+.fillPage {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: 100%;
+  height: calc(var(--prime-space-24) * 4);
+}
+
+.fillPage > :first-child {
+  align-self: flex-start;
+}
+
+.fillSkeleton {
+  height: 100%;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 2)), 1fr));
+  gap: var(--prime-space-4);
+  min-height: 0;
+}
+
+.column {
+  align-self: stretch;
+}
+
+.fact {
+  display: grid;
+  grid-template-columns: calc(var(--prime-space-24) + var(--prime-space-4)) minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--prime-space-4);
+}

package/dist/skill/reference/components/crossfade/examples/fill.tsx

@@ -0,0 +1,79 @@
+/** A deal board that fills its panel's height while it swaps between loading and data, and a notice slot above it that takes no room while empty — `fill`, `state`. */
+import {
+  Banner,
+  Button,
+  Card,
+  Crossfade,
+  ScrollContainer,
+  Skeleton,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const STAGES = [
+  { id: "new", title: "Новые", deals: ["Поставка серверов", "Годовая лицензия"] },
+  { id: "talks", title: "Переговоры", deals: ["Внедрение CRM"] },
+  { id: "won", title: "Выиграны", deals: ["Обучение отдела", "Аудит склада", "Поддержка 24/7"] },
+];
+
+export default function CrossfadeFillExample() {
+  const [status, setStatus] = React.useState<"loading" | "ready">("ready");
+  const [notice, setNotice] = React.useState<string | null>(null);
+
+  const refresh = () => {
+    setNotice(null);
+    setStatus("loading");
+    window.setTimeout(() => {
+      setStatus("ready");
+      setNotice("Доска обновлена: 2 новые сделки");
+    }, 900);
+  };
+
+  return (
+    <div className={styles.fillPage}>
+      <Button.Root variant="soft" tone="neutral" onClick={refresh} disabled={status === "loading"}>
+        Обновить доску
+      </Button.Root>
+
+      {/* Empty: no box at all, so the page gap does not open above the board. */}
+      <Crossfade state={notice ? "notice" : "none"}>
+        {notice ? (
+          <Banner.Root tone="success" onDismiss={() => setNotice(null)}>
+            <Banner.Content>
+              <Banner.Title>{notice}</Banner.Title>
+            </Banner.Content>
+          </Banner.Root>
+        ) : null}
+      </Crossfade>
+
+      <Crossfade state={status} fill aria-busy={status === "loading"}>
+        {status === "loading" ? (
+          <Skeleton shape="block" className={styles.fillSkeleton} />
+        ) : (
+          <ScrollContainer className={styles.board}>
+            {STAGES.map((stage) => (
+              <Card.Root key={stage.id} className={styles.column}>
+                <Card.Body>
+                  <Typography as="h3" variant="title-s">
+                    {stage.title} · {stage.deals.length}
+                  </Typography>
+                  <ul className={styles.facts}>
+                    {stage.deals.map((deal) => (
+                      <li key={deal}>
+                        <Typography as="span" variant="body-m">
+                          {deal}
+                        </Typography>
+                      </li>
+                    ))}
+                  </ul>
+                </Card.Body>
+              </Card.Root>
+            ))}
+          </ScrollContainer>
+        )}
+      </Crossfade>
+    </div>
+  );
+}