prime-ui-kit 0.0.1

package/src/components/dropdown/examples/actions-menu.tsx

@@ -0,0 +1,36 @@
+import { Copy, Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+/** Меню действий над сущностью: безопасные операции и отдельный деструктивный блок. */
+export default function DropdownActionsMenuExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root
+          type="button"
+          variant="neutral"
+          mode="stroke"
+          aria-label="Действия с документом"
+        >
+          ⋯
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content align="end">
+        <Dropdown.Item>
+          <Dropdown.ItemIcon as={Pencil} strokeWidth={2} />
+          Редактировать
+        </Dropdown.Item>
+        <Dropdown.Item>
+          <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
+          Дублировать
+        </Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item destructive>
+          <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
+          Удалить
+        </Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/src/components/dropdown/examples/as-child.tsx

@@ -0,0 +1,26 @@
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+import styles from "./dropdown-examples.module.css";
+
+/** Триггер как единственный ребёнок: aria и клик сливаются с ссылкой — как в `playground/snippets/dropdown/as-child.tsx`. */
+export default function DropdownAsChildExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <a
+          href="/playground"
+          className={styles.linkTrigger}
+          onClick={(e) => {
+            e.preventDefault();
+          }}
+        >
+          Открыть как ссылка-триггер
+        </a>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <Dropdown.Item>Пункт 1</Dropdown.Item>
+        <Dropdown.Item>Пункт 2</Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/src/components/dropdown/examples/composition.tsx

@@ -0,0 +1,93 @@
+import { BookOpen, HelpCircle, LayoutGrid, LogOut, Settings, UserRound } from "lucide-react";
+import { Avatar } from "@/components/avatar/Avatar";
+import { Badge } from "@/components/badge/Badge";
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+/** Block, Header, GroupLabel, ItemIcon, вложенная кнопка в трейлинге — как в `playground/snippets/dropdown/composition.tsx`. */
+export default function DropdownCompositionExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root type="button" variant="neutral" mode="stroke">
+          Меню пользователя
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content align="end">
+        <Dropdown.Block>
+          <Dropdown.Header>
+            <Dropdown.HeaderRow>
+              <Dropdown.HeaderLeading>
+                <Avatar.Root size="l">
+                  <Avatar.Fallback>АП</Avatar.Fallback>
+                </Avatar.Root>
+              </Dropdown.HeaderLeading>
+              <Dropdown.HeaderMain>
+                <Dropdown.HeaderTitle>Анна Петрова</Dropdown.HeaderTitle>
+                <Dropdown.HeaderDescription truncate>
+                  anna.petrova@example.com
+                </Dropdown.HeaderDescription>
+              </Dropdown.HeaderMain>
+              <Dropdown.HeaderTrailing>
+                <Badge.Root color="red" variant="light" size="s">
+                  PRO
+                </Badge.Root>
+              </Dropdown.HeaderTrailing>
+            </Dropdown.HeaderRow>
+            <Dropdown.Separator />
+          </Dropdown.Header>
+          <Dropdown.Group>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={UserRound} strokeWidth={2} />
+              Профиль и безопасность
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={LayoutGrid} strokeWidth={2} />
+              Интеграции
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={Settings} strokeWidth={2} />
+              Настройки
+            </Dropdown.Item>
+          </Dropdown.Group>
+        </Dropdown.Block>
+
+        <Dropdown.Block>
+          <Dropdown.Group>
+            <Dropdown.GroupLabel>Поддержка</Dropdown.GroupLabel>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={BookOpen} strokeWidth={2} />
+              Руководство
+            </Dropdown.Item>
+            <Dropdown.Item>
+              <Dropdown.ItemIcon as={HelpCircle} strokeWidth={2} />
+              Справочный центр
+            </Dropdown.Item>
+          </Dropdown.Group>
+        </Dropdown.Block>
+
+        <Dropdown.Separator />
+        <Dropdown.Block>
+          <Dropdown.Header>
+            <Dropdown.HeaderRow>
+              <Dropdown.HeaderMain>
+                <Dropdown.HeaderTitle>Бесплатный план</Dropdown.HeaderTitle>
+                <Dropdown.HeaderDescription>12 000 просмотров в месяц</Dropdown.HeaderDescription>
+              </Dropdown.HeaderMain>
+              <Dropdown.HeaderTrailing alignSelf="center">
+                <Button.Root type="button" size="s" variant="primary" mode="stroke">
+                  Апгрейд
+                </Button.Root>
+              </Dropdown.HeaderTrailing>
+            </Dropdown.HeaderRow>
+            <Dropdown.Separator />
+          </Dropdown.Header>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={LogOut} strokeWidth={2} />
+            Выйти
+          </Dropdown.Item>
+        </Dropdown.Block>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/src/components/dropdown/examples/controlled.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+import { Typography } from "@/components/typography/Typography";
+
+import styles from "./dropdown-examples.module.css";
+
+/** Контролируемое `open` / `onOpenChange` — как в `playground/snippets/dropdown/controlled.tsx`. */
+export default function DropdownControlledExample() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={styles.controlledRow}>
+      <Dropdown.Root open={open} onOpenChange={setOpen}>
+        <Dropdown.Trigger>
+          <Button.Root type="button" variant="neutral" mode="stroke">
+            Шаг 2 из 4
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content align="start">
+          <Dropdown.Item onSelect={() => setOpen(false)}>Шаг 1</Dropdown.Item>
+          <Dropdown.Item onSelect={() => setOpen(false)}>Шаг 2</Dropdown.Item>
+          <Dropdown.Item onSelect={() => setOpen(false)}>Шаг 3</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+      <Typography.Root as="span" variant="body-small" tone="muted">
+        Меню {open ? "открыто" : "закрыто"}
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/dropdown/examples/dropdown-examples.module.css

@@ -0,0 +1,29 @@
+/* Примеры Dropdown: только var(--prime-sys-*), без инлайнов. */
+
+.controlledRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-sys-spacing-m);
+}
+
+.sizeRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--prime-sys-spacing-m);
+}
+
+.linkTrigger {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.iconTriggerMin {
+  min-width: calc(
+    var(--prime-sys-spacing-4xl) +
+    var(--prime-sys-spacing-3xl) +
+    var(--prime-sys-spacing-m) +
+    var(--prime-sys-spacing-xs)
+  );
+}

package/src/components/dropdown/examples/full-width.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+import styles from "./dropdown-examples.module.css";
+
+/** `sameMinWidthAsTrigger` — как в `playground/snippets/dropdown/full-width.tsx`. */
+export default function DropdownFullWidthExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root
+          type="button"
+          variant="neutral"
+          mode="stroke"
+          aria-label="Действия со строкой"
+          className={styles.iconTriggerMin}
+        >
+          ⋮
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content sameMinWidthAsTrigger>
+        <Dropdown.Item>Очень длинная подпись пункта меню в одну строку</Dropdown.Item>
+        <Dropdown.Item>Второй пункт</Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/src/components/dropdown/examples/placement-demo.tsx

@@ -0,0 +1,59 @@
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+const longLabel = "Экспорт в PDF и печатная версия";
+
+/** Предпочтения `align` и `side`; у края вьюпорта панель может переноситься. */
+export default function DropdownPlacementDemoExample() {
+  return (
+    <>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="s" variant="neutral" mode="stroke">
+            align start
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content align="start">
+          <Dropdown.Item>{longLabel}</Dropdown.Item>
+          <Dropdown.Item>Дублировать в проект</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="s" variant="neutral" mode="stroke">
+            align center
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content align="center">
+          <Dropdown.Item>{longLabel}</Dropdown.Item>
+          <Dropdown.Item>Дублировать в проект</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="s" variant="neutral" mode="stroke">
+            align end
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content align="end">
+          <Dropdown.Item>{longLabel}</Dropdown.Item>
+          <Dropdown.Item>Дублировать в проект</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="s" variant="neutral" mode="stroke">
+            side top
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content side="top">
+          <Dropdown.Item>Пункт выше триггера</Dropdown.Item>
+          <Dropdown.Item>Второй пункт</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </>
+  );
+}

package/src/components/dropdown/examples/select-like-list.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+const WORKSPACES = ["Команда дизайна", "Продукт Альфа", "Внутренние"] as const;
+
+/**
+ * Быстрый переключатель контекста: триггер показывает текущий выбор.
+ * Семантика остаётся `role="menu"` / `menuitem`, не комбобокс — для поля формы с одним значением
+ * и связью label/value используйте Select.
+ */
+export default function DropdownSelectLikeListExample() {
+  const [workspace, setWorkspace] = useState<(typeof WORKSPACES)[number]>(WORKSPACES[0]);
+
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root type="button" variant="neutral" mode="stroke">
+          Пространство: {workspace}
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content sameMinWidthAsTrigger>
+        {WORKSPACES.map((name) => (
+          <Dropdown.Item key={name} onSelect={() => setWorkspace(name)}>
+            {name}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/src/components/dropdown/examples/sizes.tsx

@@ -0,0 +1,99 @@
+import { Copy, Edit, Trash2 } from "lucide-react";
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+/** Ярус `size` на `Dropdown.Content`: s, m, l, xl — как в `playground/snippets/dropdown/sizes.tsx`. */
+export default function DropdownSizesExample() {
+  return (
+    <>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="s" variant="neutral" mode="stroke">
+            size=&quot;s&quot;
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content size="s">
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
+            Редактировать
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
+            Дублировать
+          </Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item destructive>
+            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
+            Удалить
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+            size=&quot;m&quot;
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content size="m">
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
+            Редактировать
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
+            Дублировать
+          </Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item destructive>
+            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
+            Удалить
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="l" variant="neutral" mode="stroke">
+            size=&quot;l&quot;
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content size="l">
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
+            Редактировать
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
+            Дублировать
+          </Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item destructive>
+            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
+            Удалить
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root type="button" size="xl" variant="neutral" mode="stroke">
+            size=&quot;xl&quot;
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content size="xl">
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Edit} strokeWidth={2} />
+            Редактировать
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Copy} strokeWidth={2} />
+            Дублировать
+          </Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item destructive>
+            <Dropdown.ItemIcon as={Trash2} strokeWidth={2} />
+            Удалить
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    </>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+/** Недоступный пункт через `disabled` — как в `playground/snippets/dropdown/states.tsx`. */
+export default function DropdownStatesExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root type="button" variant="neutral" mode="stroke">
+          Доступ к отчёту
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <Dropdown.Item>Скачать PDF</Dropdown.Item>
+        <Dropdown.Item disabled>Экспорт в Excel (нет прав)</Dropdown.Item>
+        <Dropdown.Item>Отправить на почту</Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { Button } from "@/components/button/Button";
+import { Dropdown } from "@/components/dropdown/Dropdown";
+
+/** Обычные пункты и `destructive` на `Dropdown.Item` — как в `playground/snippets/dropdown/variants.tsx`. */
+export default function DropdownVariantsExample() {
+  return (
+    <Dropdown.Root>
+      <Dropdown.Trigger>
+        <Button.Root type="button" variant="neutral" mode="lighter">
+          Документ
+        </Button.Root>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <Dropdown.Item>Переименовать</Dropdown.Item>
+        <Dropdown.Item>Переместить…</Dropdown.Item>
+        <Dropdown.Separator />
+        <Dropdown.Item destructive>Удалить безвозвратно</Dropdown.Item>
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+}

package/src/components/empty-page/COMPONENT.md

@@ -0,0 +1,143 @@
+# EmptyPage
+
+## About
+
+Центрированный блок **пустого состояния**: **`EmptyPage.Icon`** (область под глиф), **`EmptyPage.Title`** (**`<h2>`**), **`EmptyPage.Description`**, **`EmptyPage.Actions`** (ряд кнопок). Ось **`size`** (`s`–`xl`) задаёт иконку, кегль и отступы и пробрасывается в **`ControlSizeProvider`** для дочерних **`Button`**.
+
+- **Используйте** на странице списка, в теле таблицы, в карточке или в **`ScrollContainer`**, когда данных нет и нужен явный призыв к действию.
+- **`layout="fill"`** — блок растягивается по высоте **flex**-родителя с заданной **`min-height`** (типично «область таблицы»); **`default`** — компактный блок по содержимому.
+- **Не** подменяйте **`Title`** на **`PageContent.Title`** (**`<h1>`**): пустое состояние — регион страницы, заголовок вью остаётся один на маршруте.
+
+## Composition
+
+- **`EmptyPage.Root`** — колонка по центру, **`text-align: center`**; **`size`**, **`layout`** через `data-*`.
+- **`EmptyPage.Icon`** — подложка под глиф в духе иконки шапки [**`Modal.Panel`**](../modal/COMPONENT.md) (`headerIcon`): скругление **`--prime-sys-size-control-*-radius`**, фон **`--prime-sys-color-status-error-background`**, цвет глифа **`--prime-sys-color-status-error-foreground`** (не «сырой» красный). Внутрь — **`lucide-react`** или **`Icon`** с **`aria-hidden`**.
+- **`EmptyPage.Title`** — **`h2`**; связывайте с **`aria-labelledby`** на корне.
+- **`EmptyPage.Description`** — **`p`**, вторичный цвет контента.
+- **`EmptyPage.Actions`** — **`flex`**-ряд с **`gap`** по размеру; внутри — **`Button`**, **`ButtonGroup`**, **`LinkButton`**.
+
+### Canonical example
+
+```tsx
+import { Search } from "lucide-react";
+import { Button, EmptyPage } from "prime-ui-kit";
+
+export function EmptySearchResults() {
+  return (
+    <EmptyPage.Root aria-labelledby="empty-heading">
+      <EmptyPage.Icon aria-hidden>
+        <Search strokeWidth={2} aria-hidden />
+      </EmptyPage.Icon>
+      <EmptyPage.Title id="empty-heading">Ничего не найдено</EmptyPage.Title>
+      <EmptyPage.Description>
+        Измените фильтры или сбросьте поиск — тогда мы снова покажем результаты.
+      </EmptyPage.Description>
+      <EmptyPage.Actions>
+        <Button.Root type="button" variant="primary">
+          Сбросить фильтры
+        </Button.Root>
+      </EmptyPage.Actions>
+    </EmptyPage.Root>
+  );
+}
+```
+
+### Пустое состояние в области таблицы
+
+Родитель с **`min-height`** (и обычно рамкой области данных) + **`layout="fill"`** — контент визуально по центру «подложки».
+
+```tsx
+import { PackagePlus } from "lucide-react";
+import { Button, EmptyPage } from "prime-ui-kit";
+
+export function OrdersTableEmpty() {
+  return (
+    <div className="ordersTableBodyRegion">
+      <EmptyPage.Root layout="fill" aria-labelledby="empty-table-heading">
+        <EmptyPage.Icon aria-hidden>
+          <PackagePlus strokeWidth={2} aria-hidden />
+        </EmptyPage.Icon>
+        <EmptyPage.Title id="empty-table-heading">Пока нет позиций</EmptyPage.Title>
+        <EmptyPage.Description>Добавьте первую строку или импортируйте каталог.</EmptyPage.Description>
+        <EmptyPage.Actions>
+          <Button.Root type="button" variant="primary">
+            Добавить позицию
+          </Button.Root>
+        </EmptyPage.Actions>
+      </EmptyPage.Root>
+    </div>
+  );
+}
+```
+
+### Связь с DataTable
+
+У **`DataTable`** пустой набор строк может отображаться через **`emptyText`** (строка в таблице). Для **богатого** пустого состояния с кнопкой и иконкой не подставляйте разметку внутрь **`emptyText`**: рендерите **`EmptyPage`** **вместо** таблицы или **в** ячейке-обёртке с **`layout="fill"`**, когда **`rows.length === 0`** и не **`loading`**.
+
+### Playground
+
+Живые примеры: **`playground/sections/EmptyPageSection.tsx`**.
+
+## Extended examples
+
+| Playground (сниппет) | Runnable (`examples/*.tsx`) |
+|----------------------|------------------------------|
+| [`canonical.tsx`](../../../playground/snippets/empty-page/canonical.tsx) | [`examples/canonical.tsx`](./examples/canonical.tsx) |
+| [`sizes.tsx`](../../../playground/snippets/empty-page/sizes.tsx) | [`examples/sizes.tsx`](./examples/sizes.tsx) |
+| [`table-region.tsx`](../../../playground/snippets/empty-page/table-region.tsx) | [`examples/table-region.tsx`](./examples/table-region.tsx) |
+
+## Rules
+
+- Заголовок вью — один **`h1`** ([`PageContent.Title`](../page-content/COMPONENT.md)); в **`EmptyPage`** используйте **`Title`** (**`h2`**).
+- Иконка декоративная — **`aria-hidden`** на обёртке или SVG.
+- Размеры кнопок в **`Actions`** наследуются от **`ControlSizeProvider`** на **`Root`**; при необходимости оберните действия в отдельный **`ControlSizeProvider`**.
+
+## API
+
+### EmptyPage.Root
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| size | `s` \| `m` \| `l` \| `xl` | `m` | No | Шкала иконки, текста, отступов; `ControlSizeProvider` для потомков. |
+| layout | `default` \| `fill` | `default` | No | `fill` — растянуть по высоте flex-родителя (пустое тело таблицы / панели). |
+| className | `string` | — | No | Дополнительный класс корня. |
+| children | `React.ReactNode` | — | No | Icon, Title, Description, Actions. |
+| …rest | `React.HTMLAttributes<HTMLDivElement>` | — | No | В т.ч. `ref` (`forwardRef`), `aria-*`. |
+
+### EmptyPage.Icon
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| className | `string` | — | No | Класс подложки под иконку. |
+| children | `React.ReactNode` | — | No | Глиф (например из `lucide-react`). |
+| …rest | `React.HTMLAttributes<HTMLDivElement>` | — | No | Атрибуты обёртки. |
+
+### EmptyPage.Title
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| className | `string` | — | No | Класс на **`h2`**. |
+| children | `React.ReactNode` | — | No | Заголовок блока. |
+| …rest | `React.HTMLAttributes<HTMLHeadingElement>` | — | No | В т.ч. `ref` (`forwardRef`), `id` для `aria-labelledby`. |
+
+### EmptyPage.Description
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| className | `string` | — | No | Класс на **`p`**. |
+| children | `React.ReactNode` | — | No | Пояснение. |
+| …rest | `React.HTMLAttributes<HTMLParagraphElement>` | — | No | В т.ч. `ref` (`forwardRef`). |
+
+### EmptyPage.Actions
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| className | `string` | — | No | Класс на flex-контейнере действий. |
+| children | `React.ReactNode` | — | No | Кнопки и т.п. |
+| …rest | `React.HTMLAttributes<HTMLDivElement>` | — | No | Атрибуты **`div`**. |
+
+## Related
+
+- [PageContent](../page-content/COMPONENT.md) — шапка маршрута (**`h1`**).
+- [DataTable](../data-table/COMPONENT.md) — **`emptyText`** vs отдельный **`EmptyPage`**.
+- [Button](../button/COMPONENT.md) — действия в **`Actions`**.

package/src/components/empty-page/examples/canonical.tsx

@@ -0,0 +1,22 @@
+import { Search } from "lucide-react";
+import { Button, EmptyPage } from "prime-ui-kit";
+
+/** Полный блок: иконка, заголовок, описание, кнопка. */
+export function EmptyPageCanonical() {
+  return (
+    <EmptyPage.Root aria-labelledby="empty-heading">
+      <EmptyPage.Icon aria-hidden>
+        <Search strokeWidth={2} aria-hidden />
+      </EmptyPage.Icon>
+      <EmptyPage.Title id="empty-heading">Ничего не найдено</EmptyPage.Title>
+      <EmptyPage.Description>
+        Измените фильтры или сбросьте поиск — тогда мы снова покажем результаты.
+      </EmptyPage.Description>
+      <EmptyPage.Actions>
+        <Button.Root type="button" variant="primary">
+          Сбросить фильтры
+        </Button.Root>
+      </EmptyPage.Actions>
+    </EmptyPage.Root>
+  );
+}