prime-ui-kit 0.6.0 → 0.7.1

package/src/components/drawer/examples/cart-preview.tsx

@@ -15,13 +15,13 @@ export default function DrawerExampleCartPreview() {
   return (
     <Drawer.Root>
       <Drawer.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Cart (3)
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay />
-        <Drawer.Content side="right" size="m" aria-labelledby="drawer-cart-title">
+        <Drawer.Content side="right" aria-labelledby="drawer-cart-title">
           <Drawer.Header>
             <Drawer.Title id="drawer-cart-title">Your cart</Drawer.Title>
           </Drawer.Header>
@@ -38,12 +38,12 @@ export default function DrawerExampleCartPreview() {
           </Drawer.Body>
           <Drawer.Footer className={styles.footerActions}>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+              <Button.Root type="button" variant="neutral" mode="stroke">
                 View cart
               </Button.Root>
             </Drawer.Close>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="primary">
+              <Button.Root type="button" variant="primary">
                 Checkout
               </Button.Root>
             </Drawer.Close>

package/src/components/drawer/examples/explicit-panel.tsx

@@ -10,13 +10,13 @@ export default function DrawerExampleExplicitPanel() {
   return (
     <Drawer.Root>
       <Drawer.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Open explicit panel
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay />
-        <Drawer.Panel side="right" size="m" aria-labelledby="drawer-explicit-title">
+        <Drawer.Panel side="right" aria-labelledby="drawer-explicit-title">
           <Drawer.Header>
             <Drawer.Title id="drawer-explicit-title">Details</Drawer.Title>
           </Drawer.Header>
@@ -28,7 +28,7 @@ export default function DrawerExampleExplicitPanel() {
           </Drawer.Content>
           <Drawer.Footer>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+              <Button.Root type="button" variant="neutral" mode="stroke">
                 Close
               </Button.Root>
             </Drawer.Close>

package/src/components/drawer/examples/filters-panel.tsx

@@ -11,37 +11,37 @@ export default function DrawerExampleFiltersPanel() {
   return (
     <Drawer.Root>
       <Drawer.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Filters
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay />
-        <Drawer.Content side="left" size="m" aria-labelledby="drawer-filters-title">
+        <Drawer.Content side="left" aria-labelledby="drawer-filters-title">
           <Drawer.Header>
             <Drawer.Title id="drawer-filters-title">Filters</Drawer.Title>
           </Drawer.Header>
           <Drawer.Body>
             <div className={styles.filterStack}>
-              <Checkbox.Root size="m" defaultChecked>
+              <Checkbox.Root defaultChecked>
                 <Checkbox.Label>In stock only</Checkbox.Label>
               </Checkbox.Root>
-              <Checkbox.Root size="m">
+              <Checkbox.Root>
                 <Checkbox.Label>On sale</Checkbox.Label>
               </Checkbox.Root>
-              <Checkbox.Root size="m">
+              <Checkbox.Root>
                 <Checkbox.Label>Ships today</Checkbox.Label>
               </Checkbox.Root>
             </div>
           </Drawer.Body>
           <Drawer.Footer className={styles.footerActions}>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+              <Button.Root type="button" variant="neutral" mode="stroke">
                 Reset
               </Button.Root>
             </Drawer.Close>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="primary">
+              <Button.Root type="button" variant="primary">
                 Apply
               </Button.Root>
             </Drawer.Close>

package/src/components/drawer/examples/mobile-nav-sheet.tsx

@@ -12,13 +12,13 @@ export default function DrawerExampleMobileNavSheet() {
   return (
     <Drawer.Root>
       <Drawer.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Menu
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay />
-        <Drawer.Content side="bottom" size="m" aria-labelledby="drawer-nav-title">
+        <Drawer.Content side="bottom" aria-labelledby="drawer-nav-title">
           <Drawer.Header>
             <Drawer.Title id="drawer-nav-title">Navigate</Drawer.Title>
           </Drawer.Header>
@@ -26,7 +26,7 @@ export default function DrawerExampleMobileNavSheet() {
             <nav className={styles.nav} aria-label="Primary">
               {items.map((label) => (
                 <Drawer.Close key={label}>
-                  <Button.Root type="button" size="m" variant="neutral" mode="ghost" fullWidth>
+                  <Button.Root type="button" variant="neutral" mode="ghost" fullWidth>
                     {label}
                   </Button.Root>
                 </Drawer.Close>

package/src/components/drawer/examples/settings-side.tsx

@@ -11,24 +11,24 @@ export default function DrawerExampleSettingsSide() {
   return (
     <Drawer.Root>
       <Drawer.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Workspace settings
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Overlay />
-        <Drawer.Content side="right" size="m" aria-labelledby="drawer-settings-title">
+        <Drawer.Content side="right" aria-labelledby="drawer-settings-title">
           <Drawer.Header>
             <Drawer.Title id="drawer-settings-title">Workspace</Drawer.Title>
           </Drawer.Header>
           <Drawer.Body>
             <div className={styles.settingsStack}>
-              <Input.Root label="Workspace name" size="m">
+              <Input.Root label="Workspace name">
                 <Input.Wrapper>
                   <Input.Field defaultValue="Acme Design" />
                 </Input.Wrapper>
               </Input.Root>
-              <Input.Root label="Default timezone" size="m" hint="Used for scheduled reports.">
+              <Input.Root label="Default timezone" hint="Used for scheduled reports.">
                 <Input.Wrapper>
                   <Input.Field defaultValue="Europe/Berlin" />
                 </Input.Wrapper>
@@ -37,12 +37,12 @@ export default function DrawerExampleSettingsSide() {
           </Drawer.Body>
           <Drawer.Footer className={styles.footerActions}>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+              <Button.Root type="button" variant="neutral" mode="stroke">
                 Cancel
               </Button.Root>
             </Drawer.Close>
             <Drawer.Close>
-              <Button.Root type="button" size="m" variant="primary">
+              <Button.Root type="button" variant="primary">
                 Save changes
               </Button.Root>
             </Drawer.Close>

package/src/components/dropdown/COMPONENT.md

@@ -6,7 +6,7 @@
 
 **What:** `Dropdown` is a **portaled action menu** (`role="menu"`): one trigger toggles a floating list of **`menuitem`** rows. **`Dropdown.Trigger`** clones **exactly one** child element and merges **`aria-expanded`**, **`aria-haspopup="menu"`**, **`aria-controls`**, **`id`**, ref, and toggle **`onClick`**. **`Dropdown.Content`** renders **only when open**, applies focus trap, Escape/outside close, and arrow-key roving focus among items.
 
-**Parts:** `Root` → `Trigger` + `Content`. Inside `Content`: optional `Inset`, `Block`, `Header` (+ `HeaderRow`, `HeaderLeading`, `HeaderMain`, `HeaderTitle`, `HeaderDescription`, `HeaderTrailing`), `Group` + `GroupLabel`, `Separator`, `Item` (+ `ItemIcon`).
+**Parts:** `Root` → `Trigger` + `Content`. Inside `Content`: `Block`, `Header` (+ `HeaderRow`, `HeaderLeading`, `HeaderMain`, `HeaderTitle`, `HeaderDescription`, `HeaderTrailing`), `Group` + `GroupLabel`, `Separator`, `Item` (+ `ItemIcon`).
 
 **State:** Uncontrolled: **`defaultOpen`** on `Root`. Controlled: **`open`** + **`onOpenChange`**. **`Item.onSelect`** runs on activation, then the menu closes unless **`disabled`**.
 
@@ -26,7 +26,6 @@
 | [`playground/snippets/dropdown/composition.tsx`](../../../playground/snippets/dropdown/composition.tsx) | **`Block`**, header slots, **`GroupLabel`**, **`ItemIcon`**, nested trailing **Button** |
 | [`playground/snippets/dropdown/full-width.tsx`](../../../playground/snippets/dropdown/full-width.tsx) | **`sameMinWidthAsTrigger`** with narrow trigger |
 | [`playground/snippets/dropdown/as-child.tsx`](../../../playground/snippets/dropdown/as-child.tsx) | **`Trigger`** merges props into a single child (e.g. link) |
-| [`playground/snippets/dropdown/inset.tsx`](../../../playground/snippets/dropdown/inset.tsx) | **`Inset`** **`padding`** / **`gap`** variants |
 
 **Package `examples/`** (same folder as this file; `@/` imports in-repo, **`prime-ui-kit`** for consumers):
 
@@ -40,9 +39,8 @@
 | [`examples/composition.tsx`](examples/composition.tsx) | `composition.tsx` | Same as playground composition |
 | [`examples/full-width.tsx`](examples/full-width.tsx) | `full-width.tsx` | Same as playground full-width |
 | [`examples/as-child.tsx`](examples/as-child.tsx) | `as-child.tsx` | Same as playground as-child |
-| [`examples/inset.tsx`](examples/inset.tsx) | `inset.tsx` | Same as playground inset |
 | [`examples/actions-menu.tsx`](examples/actions-menu.tsx) | — | Icon-only trigger, row icons, separator, **`destructive`** |
-| [`examples/account-menu.tsx`](examples/account-menu.tsx) | — | Header + avatar, **`Inset`**, **`sameMinWidthAsTrigger`**, sign out |
+| [`examples/account-menu.tsx`](examples/account-menu.tsx) | — | Header + avatar, **`sameMinWidthAsTrigger`**, sign out |
 | [`examples/select-like-list.tsx`](examples/select-like-list.tsx) | — | Trigger shows choice; still **`role="menu"`** (not **Select**) |
 
 Shared layout tokens for some examples: [`examples/dropdown-examples.module.css`](examples/dropdown-examples.module.css) (mirrors [`playground/snippets/dropdown/dropdown-snippets.module.css`](../../../playground/snippets/dropdown/dropdown-snippets.module.css)).
@@ -56,7 +54,7 @@ export function Example() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Actions
         </Button.Root>
       </Dropdown.Trigger>
@@ -89,8 +87,7 @@ A composite **action menu**: the trigger toggles a portaled panel with commands,
 
 - **`Dropdown.Root`** wraps everything and owns open state (controlled or uncontrolled).
 - **`Dropdown.Trigger`** must wrap **exactly one** React element; refs, `id`, `aria-*`, and toggle `onClick` are merged into that child.
-- **`Dropdown.Content`** renders **only when open** (portal + `role="menu"`). Put **`Dropdown.Inset`** or direct **`Dropdown.Block`** / **`Dropdown.Group`** / **`Dropdown.Item`** children inside it.
-- **`Dropdown.Inset`** optional wrapper: padding and vertical gap between **direct** children.
+- **`Dropdown.Content`** renders **only when open** (portal + `role="menu"`). Put **`Dropdown.Block`** / **`Dropdown.Group`** / **`Dropdown.Item`** children inside it.
 - **`Dropdown.Block`** — generic section; **`Dropdown.Header`** and **`HeaderRow`**, **`HeaderLeading`**, **`HeaderMain`**, **`HeaderTitle`**, **`HeaderDescription`**, **`HeaderTrailing`** compose a header area inside the panel.
 - **`Dropdown.Item`** — actionable row (`role="menuitem"`); may include **`Dropdown.ItemIcon`** before text.
 - **`Dropdown.Group`** + **`Dropdown.GroupLabel`** label a set of items; **`Dropdown.Separator`** is an `hr` between blocks.
@@ -135,17 +132,7 @@ A composite **action menu**: the trigger toggles a portaled panel with commands,
 | sameMinWidthAsTrigger | `boolean` | `false` | No | Panel minimum width is not less than the trigger width. |
 | size | `"s" \| "m" \| "l" \| "xl"` | `"m"` | No | Tier for panel metrics, rows, group labels, and default icon size. |
 | className | `string` | — | No | Extra class on the portaled menu container. |
-| children | `React.ReactNode` | — | Yes | Menu body: inset, blocks, groups, items, etc. |
-
-#### Dropdown.Inset
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| padding | `"none" \| "x1" \| "x2" \| "x3"` | `"x2"` | No | Inner padding from the content edge. |
-| gap | `"none" \| "x2" \| "x3" \| "x4"` | `"x3"` | No | Vertical gap between direct children. |
-| className | `string` | — | No | Extra class. |
-| children | `React.ReactNode` | — | Yes | Nested blocks and items. |
-| …rest | `React.HTMLAttributes<HTMLDivElement>` | — | No | Other `div` attributes. |
+| children | `React.ReactNode` | — | Yes | Menu body: blocks, groups, items, etc. |
 
 #### Dropdown.Block
 

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

@@ -8,44 +8,42 @@ export default function DropdownAccountMenuExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Аккаунт
         </Button.Root>
       </Dropdown.Trigger>
       <Dropdown.Content align="end" sameMinWidthAsTrigger>
-        <Dropdown.Inset>
-          <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>
-                    ivan.petrov@example.com
-                  </Dropdown.HeaderDescription>
-                </Dropdown.HeaderMain>
-              </Dropdown.HeaderRow>
-              <Dropdown.Separator />
-            </Dropdown.Header>
-            <Dropdown.Item>
-              <Dropdown.ItemIcon as={UserRound} strokeWidth={2} />
-              Профиль
-            </Dropdown.Item>
-            <Dropdown.Item>
-              <Dropdown.ItemIcon as={Settings} strokeWidth={2} />
-              Настройки
-            </Dropdown.Item>
-          </Dropdown.Block>
-          <Dropdown.Separator />
-          <Dropdown.Item destructive>
-            <Dropdown.ItemIcon as={LogOut} strokeWidth={2} />
-            Выйти
+        <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>
+                  ivan.petrov@example.com
+                </Dropdown.HeaderDescription>
+              </Dropdown.HeaderMain>
+            </Dropdown.HeaderRow>
+            <Dropdown.Separator />
+          </Dropdown.Header>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={UserRound} strokeWidth={2} />
+            Профиль
           </Dropdown.Item>
-        </Dropdown.Inset>
+          <Dropdown.Item>
+            <Dropdown.ItemIcon as={Settings} strokeWidth={2} />
+            Настройки
+          </Dropdown.Item>
+        </Dropdown.Block>
+        <Dropdown.Separator />
+        <Dropdown.Item destructive>
+          <Dropdown.ItemIcon as={LogOut} strokeWidth={2} />
+          Выйти
+        </Dropdown.Item>
       </Dropdown.Content>
     </Dropdown.Root>
   );

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

@@ -11,7 +11,6 @@ export default function DropdownActionsMenuExample() {
           type="button"
           variant="neutral"
           mode="stroke"
-          size="m"
           aria-label="Действия с документом"
         >
           ⋯

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

@@ -9,7 +9,7 @@ export default function DropdownCompositionExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Меню пользователя
         </Button.Root>
       </Dropdown.Trigger>

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

@@ -13,7 +13,7 @@ export default function DropdownControlledExample() {
     <div className={styles.controlledRow}>
       <Dropdown.Root open={open} onOpenChange={setOpen}>
         <Dropdown.Trigger>
-          <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+          <Button.Root type="button" variant="neutral" mode="stroke">
             Шаг 2 из 4
           </Button.Root>
         </Dropdown.Trigger>

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

@@ -27,7 +27,3 @@
     var(--prime-sys-spacing-xs)
   );
 }
-
-.insetNoteTight {
-  padding-inline: var(--prime-sys-spacing-x2);
-}

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

@@ -10,7 +10,6 @@ export default function DropdownFullWidthExample() {
       <Dropdown.Trigger>
         <Button.Root
           type="button"
-          size="m"
           variant="neutral"
           mode="stroke"
           aria-label="Действия со строкой"

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

@@ -15,7 +15,7 @@ export default function DropdownSelectLikeListExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Пространство: {workspace}
         </Button.Root>
       </Dropdown.Trigger>

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

@@ -6,7 +6,7 @@ export default function DropdownStatesExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="stroke">
+        <Button.Root type="button" variant="neutral" mode="stroke">
           Доступ к отчёту
         </Button.Root>
       </Dropdown.Trigger>

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

@@ -6,7 +6,7 @@ export default function DropdownVariantsExample() {
   return (
     <Dropdown.Root>
       <Dropdown.Trigger>
-        <Button.Root type="button" size="m" variant="neutral" mode="lighter">
+        <Button.Root type="button" variant="neutral" mode="lighter">
           Документ
         </Button.Root>
       </Dropdown.Trigger>

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>
+  );
+}

package/src/components/empty-page/examples/examples-demos.module.css

@@ -0,0 +1,25 @@
+/* Раскладка для runnable-примеров EmptyPage (зеркало playground/snippets/empty-page/*.module.css). */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-2xl);
+  width: 100%;
+}
+
+.tableRegion {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: var(--prime-sys-unit-18rem);
+  max-width: 100%;
+  border: var(--prime-sys-unit-1px) solid var(--prime-sys-color-border-subtle);
+  border-radius: var(--prime-sys-shape-radius-l);
+  background: var(--prime-sys-color-surface-default);
+}
+
+.lead {
+  margin: 0 0 var(--prime-sys-spacing-m);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  color: var(--prime-sys-color-content-secondary);
+}

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

@@ -0,0 +1,23 @@
+import { Inbox } from "lucide-react";
+import { EmptyPage, type EmptyPageSize } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+const sizes = ["s", "m", "l", "xl"] as const satisfies readonly EmptyPageSize[];
+
+/** Лестница размеров `s`–`xl`: иконка, кегль и отступы согласованы. */
+export function EmptyPageSizes() {
+  return (
+    <div className={styles.stack}>
+      {sizes.map((size) => (
+        <EmptyPage.Root key={size} size={size} aria-labelledby={`empty-size-${size}`}>
+          <EmptyPage.Icon aria-hidden>
+            <Inbox strokeWidth={2} aria-hidden />
+          </EmptyPage.Icon>
+          <EmptyPage.Title id={`empty-size-${size}`}>Размер {size}</EmptyPage.Title>
+          <EmptyPage.Description>Одинаковая структура, разная шкала.</EmptyPage.Description>
+        </EmptyPage.Root>
+      ))}
+    </div>
+  );
+}