prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/reference/components/dropdown/examples/match-trigger-width.tsx

@@ -0,0 +1,23 @@
+/** Under a full-width button the menu is at least as wide as the trigger — `matchTriggerWidth`. */
+import { Button, Dropdown } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function DropdownMatchTriggerWidthExample() {
+  return (
+    <div className={styles.column}>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root variant="soft" tone="neutral" fullWidth>
+            Экспортировать отчёт
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content matchTriggerWidth>
+          <Dropdown.Item>PDF</Dropdown.Item>
+          <Dropdown.Item>Excel (.xlsx)</Dropdown.Item>
+          <Dropdown.Item>CSV</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/dropdown/examples/overview.tsx

@@ -0,0 +1,41 @@
+/** An icon-only button opens the row actions; picking an item runs it and closes the menu — `Dropdown.Item`, `onSelect`. */
+import { Button, Dropdown, Icon, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function DropdownOverviewExample() {
+  const [status, setStatus] = React.useState("Счёт № 4821 · черновик");
+
+  return (
+    <div className={styles.row}>
+      <Typography as="span" variant="body-m">
+        {status}
+      </Typography>
+      <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 onSelect={() => setStatus("Счёт № 4821 · отправлен")}>
+            Отправить клиенту
+          </Dropdown.Item>
+          <Dropdown.Item onSelect={() => setStatus("Счёт № 4822 · копия")}>
+            Дублировать
+          </Dropdown.Item>
+          <Dropdown.Item onSelect={() => setStatus("Счёт № 4821 · скачан")}>
+            Скачать PDF
+          </Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item tone="danger" onSelect={() => setStatus("Счёт № 4821 · удалён")}>
+            Удалить счёт
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/dropdown/examples/placement.tsx

@@ -0,0 +1,33 @@
+/** Every side and alignment relative to the trigger; near the viewport edge the menu flips and shifts — `side`, `align`. */
+import { Button, Dropdown } from "prime-ui-kit";
+
+const PLACEMENTS = [
+  { side: "bottom", align: "start" },
+  { side: "bottom", align: "center" },
+  { side: "bottom", align: "end" },
+  { side: "top", align: "start" },
+  { side: "top", align: "center" },
+  { side: "top", align: "end" },
+  { side: "left", align: "start" },
+  { side: "right", align: "start" },
+] as const;
+
+export default function DropdownPlacementExample() {
+  return (
+    <>
+      {PLACEMENTS.map(({ side, align }) => (
+        <Dropdown.Root key={`${side}-${align}`}>
+          <Dropdown.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              {side} · {align}
+            </Button.Root>
+          </Dropdown.Trigger>
+          <Dropdown.Content side={side} align={align}>
+            <Dropdown.Item>Экспорт в PDF и печатная версия</Dropdown.Item>
+            <Dropdown.Item>Дублировать в проект</Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/dropdown/examples/sizes.tsx

@@ -0,0 +1,43 @@
+/** Every size tier with icons, key hints and a destructive item; the menu takes the tier of its trigger — `size`. */
+import { Button, Dropdown, Icon } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function DropdownSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <Dropdown.Root key={size}>
+          <Dropdown.Trigger>
+            <Button.Root variant="soft" tone="neutral" size={size}>
+              {size}
+            </Button.Root>
+          </Dropdown.Trigger>
+          <Dropdown.Content size={size}>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon>
+                <Icon name="action.copy" />
+              </Dropdown.ItemIcon>
+              Дублировать
+              <Dropdown.ItemShortcut>⌘D</Dropdown.ItemShortcut>
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon>
+                <Icon name="action.download" />
+              </Dropdown.ItemIcon>
+              Скачать
+              <Dropdown.ItemShortcut>⌘S</Dropdown.ItemShortcut>
+            </Dropdown.Item>
+            <Dropdown.Separator />
+            <Dropdown.Item tone="danger">
+              <Dropdown.ItemIcon>
+                <Icon name="action.delete" />
+              </Dropdown.ItemIcon>
+              Удалить
+            </Dropdown.Item>
+          </Dropdown.Content>
+        </Dropdown.Root>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,35 @@
+/** A regular, a disabled and a destructive item; arrow keys skip the disabled one — `disabled`, `tone`. */
+import { Button, Dropdown, Icon } from "prime-ui-kit";
+
+export default function DropdownStatesExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Документ
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.copy" />
+          </Dropdown.ItemIcon>
+          Дублировать
+        </Dropdown.Item>
+        <Dropdown.Item disabled>
+          <Dropdown.ItemIcon>
+            <Icon name="status.locked" />
+          </Dropdown.ItemIcon>
+          Архивировать — нет прав
+        </Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item tone="danger">
+          <Dropdown.ItemIcon>
+            <Icon name="action.delete" />
+          </Dropdown.ItemIcon>
+          Удалить
+        </Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/dist/skill/reference/components/dropdown/examples/structure.tsx

@@ -0,0 +1,56 @@
+/** Optional parts of an account menu: a header with an avatar, a labelled group, item icons, key hints and separators — `Dropdown.Header`, `Dropdown.Group`, `Dropdown.ItemIcon`, `Dropdown.ItemShortcut`. */
+import { Avatar, Badge, Button, Dropdown, Icon } from "prime-ui-kit";
+
+export default function DropdownStructureExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Анна Петрова
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <Dropdown.Header>
+          <Avatar.Root size="l">
+            <Avatar.Fallback>АП</Avatar.Fallback>
+          </Avatar.Root>
+          <Dropdown.Title>Анна Петрова</Dropdown.Title>
+          <Dropdown.Description>anna.petrova@example.com</Dropdown.Description>
+          <Badge.Root color="purple" size="s">
+            PRO
+          </Badge.Root>
+        </Dropdown.Header>
+        <Dropdown.Separator />
+        <Dropdown.Group label="Аккаунт">
+          <Dropdown.Item>
+            <Dropdown.ItemIcon>
+              <Icon name="object.user" />
+            </Dropdown.ItemIcon>
+            Профиль
+            <Dropdown.ItemShortcut>⌘P</Dropdown.ItemShortcut>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon>
+              <Icon name="action.settings" />
+            </Dropdown.ItemIcon>
+            Настройки
+            <Dropdown.ItemShortcut>⌘,</Dropdown.ItemShortcut>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon>
+              <Icon name="object.book" />
+            </Dropdown.ItemIcon>
+            Руководство
+          </Dropdown.Item>
+        </Dropdown.Group>
+        <Dropdown.Separator />
+        <Dropdown.Item>
+          <Dropdown.ItemIcon>
+            <Icon name="action.logout" />
+          </Dropdown.ItemIcon>
+          Выйти
+        </Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/dist/skill/reference/components/empty-page/COMPONENT.md

@@ -0,0 +1,167 @@
+# EmptyPage
+
+**Category:** status
+**Kind:** composite
+
+> Empty or failed state of a page, a block or a menu: icon, title, explanation and an action — a retry for a failed load.
+
+## When to use
+- A list, table or page has no data yet (first run) and the user should know what to do.
+- A search or filter returned nothing (`layout="compact"` inside menus and lists).
+- A region failed to load and the user can retry (`tone="danger"` + `EmptyPage.RetryButton`) — the region error of every data block.
+- Inside a card or data region that should keep its height (`layout="fill"`).
+
+## When not to use
+- A message about the page while data is present (a failed refresh over shown data) → use [Banner](../banner/COMPONENT.md); the data stays.
+- A transient result of an action → use [Notification](../notification/COMPONENT.md).
+- Loading in progress → a [Skeleton](../skeleton/COMPONENT.md) of the content (a [Spinner](../spinner/COMPONENT.md) when there is no shape to hold), not an empty state; [Crossfade](../crossfade/COMPONENT.md) swaps it for the data or the empty state.
+
+## Import
+```tsx
+import { EmptyPage } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+EmptyPage.Root               centered column; size, layout, tone (role="alert" when danger)
+├─ EmptyPage.Icon            tile with one icon; tone (default: the root's)
+├─ EmptyPage.Title           <h2> (as)
+├─ EmptyPage.Description     <p>
+└─ EmptyPage.Actions         row of buttons
+   └─ EmptyPage.RetryButton  the kit's «Повторить» (Button outline neutral + refresh icon); onRetry
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### EmptyPage.Root
+`ref` → `HTMLDivElement`. A centered column: icon tile, title, description, actions; parts rise in one after another on first render.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Icon tile, title type and padding; given to the controls inside. |
+| `layout` | `"default" \| "fill" \| "compact"` | `"default"` | `default` sizes by content; `fill` stretches to the parent's height and centers; `compact` — a quiet state inside a menu or list: smaller text and icon, no entrance motion. |
+| `tone` | `"neutral" \| "danger"` | `"neutral"` | `neutral` — nothing here (yet); `danger` — the region failed to load: the icon tile turns danger and the root is `role="alert"` unless you pass a `role`. |
+| `labels` | `Partial<EmptyPageLabels>` | — | Built-in strings, see Labels. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `role` (`status` in a filtered list), `aria-labelledby` and the other div attributes. |
+
+### EmptyPage.Icon
+`ref` → `HTMLDivElement`. A `<div>` tile holding one icon.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"neutral" \| "accent" \| "danger"` | `the root's `tone`` | `neutral` — no data yet, `accent` — a first run and a call to start, `danger` — a failed load. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (the icon), `className` and the other div attributes. |
+
+### EmptyPage.Title · EmptyPage.Description
+`ref` → the element. `<h2>` (or `as`) and `<p>`, both capped at the reading width.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `"h2" \| "h3" \| "h4" \| "p"` | `"h2"` | Title: tag that fits the outline; the look does not change. `p` inside menus, lists and table cells. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `id` (for `aria-labelledby`), `className` and the other attributes. |
+
+### EmptyPage.Actions
+`ref` → `HTMLDivElement`. A `<div>` row of buttons that wraps when narrow.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children` (Buttons in the same `size`), `className` and the other div attributes. |
+
+### EmptyPage.RetryButton
+`ref` → `HTMLButtonElement`. The kit's retry of a failed region: an outline neutral Button with the refresh icon and `labels.retry`, in the root's tier. Put it in `EmptyPage.Actions`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `onRetry` | `() => void \| Promise<void>` | — (required) | Loads the region again. A returned Promise keeps the button loading until it settles; on reject the error state stays and the button is ready again. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" \| "type">` | — | `children` (text instead of `labels.retry`), `disabled`, `className` and the other button attributes. |
+
+## Variants
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` · `s` | small tile, title-s, compact padding | inside cards, tables, side panels | |
+| `m` | 48px tile, title-m, body-m description | regions and pages | yes |
+| `l` · `xl` | large tile, title-l / heading-s, roomy padding | whole empty pages, onboarding | |
+
+### layout
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `default` | sized by its content | most cases | yes |
+| `fill` | stretches to the parent's height, centered | a card or data region that keeps its height | |
+| `compact` | panel padding, body-s title, caption description, small tile, no entrance motion | menus, listboxes, command lists that filter to nothing | |
+
+### tone (Root)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | muted tile | nothing here (yet) | yes |
+| `danger` | danger-soft tile; the root announces itself (`role="alert"`) | the region failed to load | |
+
+### tone (Icon, overrides the root's)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | muted tile | no data yet | the root's tone |
+| `accent` | accent-soft tile | first run, a call to start | |
+| `danger` | danger-soft tile | failed to load | |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| first render | mount (not `compact`) | parts rise in (`enterMotion`), `--prime-motion-stagger` apart; collapses under reduced motion |
+| layout | `layout` | `data-layout="fill" \| "compact"` (none for `default`) |
+| size | `size` | `data-size`; controls inside get the same tier |
+| error | `tone="danger"` | `data-tone="danger"`, `role="alert"` (unless a `role` is passed), the icon tile danger |
+| retrying | `onRetry` returned a Promise that is pending | the RetryButton shows its loading state (`aria-busy`, spinner in place of the icon, same width) and ignores presses; resolve — the owner swaps the region (Crossfade), reject — the error stays and the button is ready |
+
+## Layout & spacing
+- Centered column, gap `--prime-space-2`; icon → title adds `--prime-space-2`, actions sit `--prime-space-3` lower.
+- Title and description are capped at the reading width; actions wrap.
+- Buttons in Actions take the root's tier from context (`EmptyPage.RetryButton` too).
+- A region error fills its region like the data would (`layout="fill"` in a card), so the swap to data does not move the page.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Enter` · `Space` | On `EmptyPage.RetryButton`: retry the load; while the retry runs the button is loading and ignores presses. |
+
+### ARIA
+- `tone="danger"` makes the root `role="alert"`, so the failure is announced when it appears; a `role` you pass replaces it.
+- The title is an `<h2>` (`as` picks `h3` / `h4` by the outline, `p` inside menus, lists and table cells); link the root to it with `aria-labelledby` when the empty state replaces a whole region.
+- In a filtered menu or list set `role="status"`, so screen readers announce «Ничего не найдено».
+- The icon is decorative: pass it with `aria-hidden`.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `retry` | `"Повторить"` | Text of `EmptyPage.RetryButton`. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | An empty search result: icon, title, description and two actions — `EmptyPage.Icon`, `EmptyPage.Actions`. |
+| [variants.tsx](examples/variants.tsx) | The tone tells why the area is empty: no data yet, a first run, or a failed load with a retry — `tone`, `EmptyPage.RetryButton`. |
+| [sizes.tsx](examples/sizes.tsx) | Every tier changes the icon tile, the title and the padding; buttons in Actions take the same size — `size`. |
+| [data-region.tsx](examples/data-region.tsx) | An empty data region: the empty state stretches over the rest of a card with a header — `layout`. |
+| [region-error.tsx](examples/region-error.tsx) | A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`. |
+| [compact.tsx](examples/compact.tsx) | The quiet empty state of a search panel: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. |
+| [narrow.tsx](examples/narrow.tsx) | In a 320 px side panel the text wraps under the tile and the actions wrap to a second line. |
+
+## Mistakes
+- Buttons in a non-`m` EmptyPage without `size` → they take the root's tier from context; do not pass another one.
+- A failed load drawn as a neutral empty state → `tone="danger"` on the root; the icon follows.
+- A hand-made «Повторить» with its own pending flag → `EmptyPage.RetryButton` with an async `onRetry`.
+- Clearing the error the moment the retry starts → keep the error state until the retry settles; the button shows the wait.
+- Showing an empty state while data is loading → show loading first.
+- Several primary buttons → one primary, placed last.
+- A default empty state inside a menu → use `layout="compact"`; the entrance motion on every keystroke is noise.
+- An `<h2>` title inside a menu, listbox or table cell → `EmptyPage.Title as="p"`.
+
+## Related
+- **Built from:** [Button](../button/COMPONENT.md) (RetryButton), Icon (`action.refresh`)
+- **See also:** [Crossfade](../crossfade/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Notification](../notification/COMPONENT.md), [Card](../card/COMPONENT.md)

package/dist/skill/reference/components/empty-page/examples/compact.tsx

@@ -0,0 +1,23 @@
+/** The quiet empty state of a search panel: no entrance motion, smaller text, a paragraph title, one action — `layout`, `as`. */
+import { Button, EmptyPage, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function EmptyPageCompactExample() {
+  return (
+    <div className={styles.panel}>
+      <EmptyPage.Root layout="compact" size="s" role="status">
+        <EmptyPage.Icon>
+          <Icon name="action.search" />
+        </EmptyPage.Icon>
+        <EmptyPage.Title as="p">Ничего не найдено</EmptyPage.Title>
+        <EmptyPage.Description>Нет клиентов с названием «Северный»</EmptyPage.Description>
+        <EmptyPage.Actions>
+          <Button.Root variant="soft" tone="neutral" size="s">
+            Сбросить поиск
+          </Button.Root>
+        </EmptyPage.Actions>
+      </EmptyPage.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/empty-page/examples/data-region.tsx

@@ -0,0 +1,32 @@
+/** An empty data region: the empty state stretches over the rest of a card with a header — `layout`. */
+import { Button, Card, EmptyPage, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function EmptyPageDataRegionExample() {
+  return (
+    <Card.Root role="region" aria-labelledby="orders-region-title" className={styles.region}>
+      <Card.Header>
+        <Card.Title id="orders-region-title">Заказы</Card.Title>
+        <Button.Root variant="outline" tone="neutral" size="s">
+          Импорт
+        </Button.Root>
+      </Card.Header>
+      <EmptyPage.Root layout="fill" aria-labelledby="orders-empty-title">
+        <EmptyPage.Icon tone="accent">
+          <Icon name="object.package" />
+        </EmptyPage.Icon>
+        <EmptyPage.Title id="orders-empty-title">Заказов пока нет</EmptyPage.Title>
+        <EmptyPage.Description>
+          Создайте заказ вручную или подключите магазин — заказы начнут появляться автоматически.
+        </EmptyPage.Description>
+        <EmptyPage.Actions>
+          <Button.Root variant="outline" tone="neutral">
+            Подключить магазин
+          </Button.Root>
+          <Button.Root>Создать заказ</Button.Root>
+        </EmptyPage.Actions>
+      </EmptyPage.Root>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/empty-page/examples/examples.module.css

@@ -0,0 +1,54 @@
+/* Layout of the EmptyPage scenarios: semantic tokens only. */
+
+/* sizes.tsx, variants.tsx: cells of 16rem that wrap; an odd last cell stays centered. */
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--prime-space-6);
+  width: 100%;
+  min-width: 0;
+}
+
+.grid > * {
+  flex: 0 1 calc(var(--prime-space-16) * 4);
+  min-width: 0;
+}
+
+/* data-region.tsx, region-error.tsx: the Card's minimum height that the state fills. */
+.region {
+  min-height: calc(var(--prime-space-24) * 3);
+}
+
+/* region-error.tsx: the loaded rows — client and amount at the two ends. */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+  min-width: 0;
+}
+
+/* compact.tsx: a floating panel (menu / listbox) the compact empty state sits in. */
+.panel {
+  box-sizing: border-box;
+  width: min(100%, var(--prime-panel-min-width));
+  padding: var(--prime-panel-padding);
+  border-radius: var(--prime-panel-radius);
+  background: var(--prime-color-layer-floating-bg);
+  box-shadow: var(--prime-shadow-overlay);
+}
+
+/* narrow.tsx: a 320px side panel (the Card's width). */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+}

package/dist/skill/reference/components/empty-page/examples/narrow.tsx

@@ -0,0 +1,26 @@
+/** In a 320 px side panel the text wraps under the tile and the actions wrap to a second line. */
+import { Button, Card, EmptyPage, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function EmptyPageNarrowExample() {
+  return (
+    <Card.Root className={styles.narrow}>
+      <EmptyPage.Root size="s" aria-labelledby="empty-narrow-title">
+        <EmptyPage.Icon>
+          <Icon name="action.filter" />
+        </EmptyPage.Icon>
+        <EmptyPage.Title id="empty-narrow-title">Нет подходящих поставщиков</EmptyPage.Title>
+        <EmptyPage.Description>
+          Под выбранные регион и категорию никто не подходит. Ослабьте фильтры.
+        </EmptyPage.Description>
+        <EmptyPage.Actions>
+          <Button.Root variant="outline" tone="neutral" size="s">
+            Сбросить фильтры
+          </Button.Root>
+          <Button.Root size="s">Пригласить поставщика</Button.Root>
+        </EmptyPage.Actions>
+      </EmptyPage.Root>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/empty-page/examples/overview.tsx

@@ -0,0 +1,22 @@
+/** An empty search result: icon, title, description and two actions — `EmptyPage.Icon`, `EmptyPage.Actions`. */
+import { Button, EmptyPage, Icon } from "prime-ui-kit";
+
+export default function EmptyPageOverviewExample() {
+  return (
+    <EmptyPage.Root aria-labelledby="empty-search-title">
+      <EmptyPage.Icon>
+        <Icon name="action.search" />
+      </EmptyPage.Icon>
+      <EmptyPage.Title id="empty-search-title">Ничего не найдено</EmptyPage.Title>
+      <EmptyPage.Description>
+        По запросу «монитор 32″» нет товаров. Измените фильтры или сбросьте поиск.
+      </EmptyPage.Description>
+      <EmptyPage.Actions>
+        <Button.Root variant="outline" tone="neutral">
+          Сбросить фильтры
+        </Button.Root>
+        <Button.Root>Новый поиск</Button.Root>
+      </EmptyPage.Actions>
+    </EmptyPage.Root>
+  );
+}

package/dist/skill/reference/components/empty-page/examples/region-error.tsx

@@ -0,0 +1,86 @@
+/** A data region that failed to load: the error state takes the region, the retry shows its loading until the data cross-fades in — `tone`, `layout`, `EmptyPage.RetryButton`, `onRetry`. */
+import { Button, Card, Crossfade, EmptyPage, Icon, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type RegionState = "loading" | "error" | "ready";
+
+const INVOICES = [
+  { id: "inv-4821", client: "ООО «Гранит»", amount: "94 750 ₽" },
+  { id: "inv-4822", client: "АО «Альфа Медиа»", amount: "380 000 ₽" },
+  { id: "inv-4823", client: "ИП Орлов Д. С.", amount: "18 000 ₽" },
+];
+
+const RESPONSE_MS = 1200;
+
+const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));
+
+export default function EmptyPageRegionErrorExample() {
+  const [state, setState] = React.useState<RegionState>("loading");
+
+  // The first request fails, as a server that is down would.
+  React.useEffect(() => {
+    if (state !== "loading") return;
+    const id = window.setTimeout(() => setState("error"), RESPONSE_MS);
+    return () => window.clearTimeout(id);
+  }, [state]);
+
+  const retry = async () => {
+    await wait(RESPONSE_MS);
+    setState("ready");
+  };
+
+  return (
+    <Card.Root role="region" aria-labelledby="invoices-title" className={styles.region}>
+      <Card.Header>
+        <Card.Title id="invoices-title">Счета к оплате</Card.Title>
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          size="s"
+          disabled={state === "loading"}
+          onClick={() => setState("loading")}
+        >
+          <Button.Icon>
+            <Icon name="action.refresh" />
+          </Button.Icon>
+          Обновить
+        </Button.Root>
+      </Card.Header>
+      <Card.Body>
+        <Crossfade state={state} aria-busy={state === "loading"}>
+          {state === "loading" ? (
+            <Skeleton lines={3} />
+          ) : state === "error" ? (
+            <EmptyPage.Root layout="fill" size="s" tone="danger" aria-labelledby="invoices-error">
+              <EmptyPage.Icon>
+                <Icon name="status.offline" />
+              </EmptyPage.Icon>
+              <EmptyPage.Title as="h4" id="invoices-error">
+                Не удалось загрузить счета
+              </EmptyPage.Title>
+              <EmptyPage.Description>Сервер не ответил. Данные не потеряны.</EmptyPage.Description>
+              <EmptyPage.Actions>
+                <EmptyPage.RetryButton onRetry={retry} />
+              </EmptyPage.Actions>
+            </EmptyPage.Root>
+          ) : (
+            <ul className={styles.list}>
+              {INVOICES.map((invoice) => (
+                <li key={invoice.id} className={styles.row}>
+                  <Typography as="span" variant="body-m">
+                    {invoice.client}
+                  </Typography>
+                  <Typography as="span" variant="body-m" tone="secondary">
+                    {invoice.amount}
+                  </Typography>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Crossfade>
+      </Card.Body>
+    </Card.Root>
+  );
+}