prime-ui-kit 0.7.11 → 0.9.0

package/src/components/drawer/COMPONENT.md

@@ -1,130 +1,187 @@
 # Drawer
 
-## About
+**Category:** overlays
 
-`Drawer` — модальная боковая панель поверх страницы.
+> A modal side panel that slides in from the edge: filters, forms and record details.
 
-Что делает компонент при `open=true`:
-- рендерится в `Portal`;
-- блокирует скролл страницы;
-- закрывается по `Escape`;
-- закрывается по клику на overlay;
-- показывает шапку (иконка, заголовок, подзаголовок), scroll-body и опциональный footer;
-- воспроизводит анимации `slide-in` / `slide-out`.
+## When to use
+- Editing settings or a record without leaving the page.
+- Filters or navigation on narrow screens (`side="left"`).
+- Read-only details of a list row (order, user, event).
+- Long content (history, logs) that needs a tall scrolling area.
 
-Используйте `Drawer` для вторичных сценариев: фильтры, быстрые формы, детали сущности, action-панели.
+## When not to use
+- Confirmations and short decisions → use [Modal](../modal/COMPONENT.md).
+- A small panel anchored to a button, without blocking the page → use [Popover](../popover/COMPONENT.md).
+- Persistent app navigation → use [Sidebar](../../layout/sidebar/COMPONENT.md).
+- Collapsible content inside the page → use [Accordion](../accordion/COMPONENT.md).
 
-## Breaking Change
-
-Старый compound API удалён полностью.
+## Import
+```tsx
+import { Drawer } from "prime-ui-kit";
+```
 
-Удалены:
-- `Drawer.Root`
-- `Drawer.Trigger`
-- `Drawer.Portal`
-- `Drawer.Overlay`
-- `Drawer.Content`
-- `Drawer.Body`
-- `Drawer.Header`
-- `Drawer.Title`
-- `Drawer.Footer`
-- `Drawer.Close`
+## Anatomy
+```
+Drawer.Root                    state and dismiss policy (no DOM)
+├── Drawer.Trigger             clones its child; opens on click
+└── Drawer.Content             portal + scrim + role="dialog" panel at the edge
+    ├── Drawer.Header          grid: [Icon] [Title + Description] [close button]
+    │   ├── Drawer.Icon
+    │   ├── Drawer.Title       <h2>
+    │   └── Drawer.Description <p>
+    ├── Drawer.Body            the only scrolling zone
+    └── Drawer.Footer          actions, primary last
+        └── Drawer.Close       clones its child; closes on click
+```
 
-Новый API: один компонент `Drawer`.
+## API
 
-## Minimal Example
+### Drawer.Root
+No DOM, no ref.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `open` | `boolean` | — | Controlled visibility. |
+| `defaultOpen` | `boolean` | `false` | Initial visibility, uncontrolled. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called on trigger, close button, Close, Escape and scrim click. |
+| `closeOnEscape` | `boolean` | `true` | Escape closes the drawer. |
+| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim closes the drawer. |
+| `labels` | `Partial<DrawerLabels>` | `{ close: "Закрыть" }` | Built-in strings. |
+| `children` | `ReactNode` | — | Trigger and Content. |
+
+### Drawer.Trigger
+No DOM: clones the single child and chains `onClick`; opens unless the child's handler calls `preventDefault()`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactElement` | — (required) | One element, usually a Button. |
+
+### Drawer.Content
+No ref. Renders in a portal (`document.body`) while open and during its exit animation.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `side` | `"left" \| "right"` | `"right"` | Edge the panel slides from. |
+| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | Width: 360 · 480 · 640 · 800. |
+| `overlayClassName` | `string` | — | Class on the scrim. |
+| `aria-label` | `string` | — | Dialog name when there is no Title. |
+| `aria-labelledby` | `string` | — | Overrides the Title id. |
+| `aria-describedby` | `string` | — | Overrides the Description id. |
+| `className` | `string` | — | Class on the panel. |
+
++ native `<div>` props (on the panel).
+
+### Drawer.Header · Icon · Title · Description · Body · Footer · Close
+The same parts as Modal ([Modal API](../modal/COMPONENT.md#api)):
+
+| Part | Props |
+|---|---|
+| `Drawer.Header` | `showClose?: boolean` (default `true`) + native `<header>` props |
+| `Drawer.Icon` | `tone?: "neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` (default `"neutral"`), `children` (required), `className` |
+| `Drawer.Title` / `Drawer.Description` | native `<h2>` / `<p>` props except `id` |
+| `Drawer.Body` | native `<div>` props; a ScrollContainer |
+| `Drawer.Footer` | `layout?: "fill" \| "end"` (default `"end"`) + native `<footer>` props |
+| `Drawer.Close` | `children: ReactElement` (required) |
+
+Drawer has no `Confirm` part and no Enter-confirm.
+
+### DrawerLabels
+| Key | Default | Used for |
+|---|---|---|
+| `close` | `"Закрыть"` | `aria-label` of the header close button |
+
+## Variants
+The panel: `bg-raised`, `shadow-modal`, `--prime-modal-radius` only on the edge facing the page, full height, on a `bg-scrim`.
+
+### side (Content)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `right` | Slides from the right, rounded on its left edge | Details and forms | yes |
+| `left` | Slides from the left, rounded on its right edge | Filters, mobile navigation | |
+
+### size (Content)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `s` | 360 wide | Details, short help | |
+| `m` | 480 wide | Settings forms | yes |
+| `l` | 640 wide | Wide forms | |
+| `xl` | 800 wide | Tables, previews | |
+
+Below 640px of viewport every size is full width with square corners.
+
+### layout (Footer)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `end` | Auto-width buttons at the end, gap 8 | Most drawers | yes |
+| `fill` | Equal-width buttons in one row, gap 12 | One full-width action («Понятно») | |
+
+### tone (Icon)
+Same values as Modal.Icon: `neutral` (default) · `accent` · `success` · `warning` · `danger` · `info` — soft tile fill and icon color of the tone.
+
+### Structure flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `showClose` | Close button in the header | Default | `true` |
+| no Footer | No bottom zone | Read-only details | |
+
+**Combinations** — forms: Footer with outline neutral «Отмена» in `Drawer.Close` and a solid primary with `loading`. Read-only details: no Footer, header close only.
+
+**Hierarchy** — one primary action, last in the footer.
+
+## States
+- Closed / open: `open` / `defaultOpen` / `onOpenChange`. `data-state` on the scrim and the panel, `data-side`, `data-size` on the panel, `data-nested-in-modal="true"` when opened from a Modal (it then stacks above the Modal).
+- While open: focus is trapped inside, page scroll is locked, siblings of the portal are `inert`.
+- Header `data-has-description`, Footer `data-layout`, Icon `data-tone` as in Modal.
+
+## Layout & spacing
+- Zone padding `--prime-drawer-padding` (24); header 24 / 20, body 20 with a 16 gap, footer 20 / 24; hairlines between zones.
+- Full viewport height; only the body scrolls.
+- Fields inside get the surface field fill; cards inside become sunken tiles; group fields 20 apart.
+
+## Accessibility
+- `role="dialog"`, `aria-modal="true"`, named by Title (or `aria-label`), described by Description.
+- Focus moves into the panel on open and returns to the opener on close, including after a scrim click.
+- Escape closes (`closeOnEscape`); only the topmost layer reacts.
+- `labels.close` — `"Закрыть"`: `aria-label` of the header close button.
+
+## Examples
+| File | Scenario | When to use this pattern |
+|---|---|---|
+| [sizes.tsx](examples/sizes.tsx) | `size` s · m · l · xl | Choosing the width |
+| [composition.tsx](examples/composition.tsx) | Settings form with Select, SegmentedControl, Switches and a loading Save | Editing settings |
+| [variants-sides.tsx](examples/variants-sides.tsx) | `side` left · right | Filters vs details |
+| [states.tsx](examples/states.tsx) | Read-only details without Footer, success icon | Record details |
+| [features.tsx](examples/features.tsx) | Long scrolling body between fixed header and footer | Histories, logs |
+| [controlled.tsx](examples/controlled.tsx) | `open` from a LinkButton, custom `labels.close`, `layout="fill"` | Opening from any element |
 
 ```tsx
-import * as React from "react";
 import { Button, Drawer } from "prime-ui-kit";
 
-export function DrawerMinimal() {
-  const [open, setOpen] = React.useState(false);
-
+export function Example() {
   return (
-    <>
-      <Button.Root type="button" onClick={() => setOpen(true)}>
-        Open drawer
-      </Button.Root>
-
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Edit workspace"
-        description="Update settings and save changes"
-        footer={
-          <>
-            <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(false)}>
-              Cancel
-            </Button.Root>
-            <Button.Root variant="primary" onClick={() => setOpen(false)}>
-              Save
-            </Button.Root>
-          </>
-        }
-      >
-        <p>Body content</p>
-      </Drawer>
-    </>
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Детали
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content size="s">
+        <Drawer.Header>
+          <Drawer.Title>Заказ № 1042</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Body>Собирается на складе.</Drawer.Body>
+      </Drawer.Content>
+    </Drawer.Root>
   );
 }
 ```
 
-## API
-
-### Drawer
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `open` | `boolean` | — | Yes | Контролируемое состояние открытия. |
-| `onOpenChange` | `(open: boolean) => void` | — | Yes | Вызывается при закрытии/открытии (Esc, overlay, крестик, внешние действия). |
-| `title` | `React.ReactNode` | — | Yes | Заголовок в шапке. |
-| `description` | `React.ReactNode` | — | No | Подзаголовок в шапке. |
-| `icon` | `React.ReactNode` | — | No | Иконка слева в шапке. |
-| `children` | `React.ReactNode` | — | Yes | Контент body внутри `ScrollContainer`. |
-| `footer` | `React.ReactNode` | — | No | Контент футера (обычно кнопки `Cancel` / `Save`). |
-| `side` | `'left' \| 'right'` | `'right'` | No | Сторона выезда панели. |
-| `className` | `string` | — | No | Дополнительный класс панели. |
-| `overlayClassName` | `string` | — | No | Дополнительный класс overlay. |
-
-## Rules
-
-- Компонент только контролируемый: состояние хранится в родителе (`open`, `onOpenChange`).
-- `side` поддерживает только `left` и `right`.
-- Шапка всегда содержит кнопку закрытия (крестик) справа.
-- Footer опционален: если `footer` не передан, нижняя зона не рендерится.
-- Для доступности `aria-labelledby`/`aria-describedby` формируются автоматически из `title`/`description`.
-
-## Playground snippets
-
-Source of truth: `playground/snippets/drawer/*.tsx`.
-
-| File | Intent |
-|------|--------|
-| `controlled.tsx` | Базовый контролируемый сценарий `open` / `onOpenChange`. |
-| `composition.tsx` | Форма в body + действия в footer. |
-| `variants-sides.tsx` | Сравнение `side='left'` и `side='right'`. |
-| `states.tsx` | Варианты с footer и без footer. |
-| `full-width.tsx` | Вертикальный стек `fullWidth` кнопок в footer. |
-| `responsive.tsx` | Поведение ширины панели (`min(28rem, 90vw)`). |
-| `trigger-link.tsx` | Открытие из `LinkButton` через внешний `setOpen(true)`. |
-| `features.tsx` | Длинный scroll-body и шапка с иконкой/description. |
-| `sizes.tsx` | Паттерны расположения и действий для левой/правой панели. |
-
-## Examples (`examples/`)
-
-| File | Intent |
-|------|--------|
-| `examples/filters-panel.tsx` | Левая панель фильтров с действиями Apply/Reset. |
-| `examples/cart-preview.tsx` | Правая панель корзины с checkout-действиями. |
-| `examples/settings-side.tsx` | Правая панель настроек формы. |
-| `examples/mobile-nav-sheet.tsx` | Навигационные действия с закрытием по клику на пункт. |
-| `examples/explicit-panel.tsx` | Канонический сценарий новой шапки/body/footer. |
+## Mistakes
+- A delete confirmation in a Drawer → use Modal.
+- Expecting Enter to submit via `Drawer.Confirm` → Drawer has no Confirm; use a form `onSubmit` or the button.
+- `side="top"` / `"bottom"` → only `left` and `right`.
+- Padding on a wrapper inside Body → Body already pads and scrolls.
 
 ## Related
-
-- [Button](../button/COMPONENT.md)
-- [Link button](../link-button/COMPONENT.md)
-- [Modal](../modal/COMPONENT.md)
-- [Input](../input/COMPONENT.md)
-- [Checkbox](../checkbox/COMPONENT.md)
+[Modal](../modal/COMPONENT.md) · [Sidebar](../../layout/sidebar/COMPONENT.md) · [Popover](../popover/COMPONENT.md)

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

@@ -0,0 +1,94 @@
+/** Settings drawer: a grouped form in the body, Cancel / Save in the footer with a loading state. Use for editing settings or a record next to the page. */
+import { Settings } from "lucide-react";
+import { Button, Drawer, Input, Label, SegmentedControl, Select, Switch } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function DrawerCompositionExample() {
+  const [open, setOpen] = React.useState(false);
+  const [saving, setSaving] = React.useState(false);
+  const languageId = React.useId();
+
+  const save = () => {
+    setSaving(true);
+    window.setTimeout(() => {
+      setSaving(false);
+      setOpen(false);
+    }, 1000);
+  };
+
+  return (
+    <Drawer.Root open={open} onOpenChange={setOpen}>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Settings />
+          </Button.Icon>
+          Настройки рабочего пространства
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Icon>
+            <Settings />
+          </Drawer.Icon>
+          <Drawer.Title>Рабочее пространство</Drawer.Title>
+          <Drawer.Description>Изменения увидят все участники</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          <div className={styles.form}>
+            <Input.Root label="Название" required>
+              <Input.Wrapper>
+                <Input.Field defaultValue="Команда продукта" />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root label="Адрес" hint="Только латиница, цифры и дефис">
+              <Input.Wrapper>
+                <Input.Field defaultValue="product-team" />
+              </Input.Wrapper>
+            </Input.Root>
+            <div className={styles.field}>
+              <Label.Root id={languageId}>Язык интерфейса</Label.Root>
+              <Select.Root defaultValue="ru">
+                <Select.Trigger aria-labelledby={languageId}>
+                  <Select.Value />
+                </Select.Trigger>
+                <Select.Content>
+                  <Select.Item value="ru">Русский</Select.Item>
+                  <Select.Item value="en">English</Select.Item>
+                  <Select.Item value="kk">Қазақша</Select.Item>
+                </Select.Content>
+              </Select.Root>
+            </div>
+            <div className={styles.field}>
+              <Label.Root>Начало недели</Label.Root>
+              <SegmentedControl.Root defaultValue="mon" fullWidth aria-label="Начало недели">
+                <SegmentedControl.Item value="mon">Понедельник</SegmentedControl.Item>
+                <SegmentedControl.Item value="sun">Воскресенье</SegmentedControl.Item>
+              </SegmentedControl.Root>
+            </div>
+            <div className={styles.group}>
+              <Switch.Root defaultChecked>
+                <Switch.Label>Письма о новых задачах</Switch.Label>
+              </Switch.Root>
+              <Switch.Root>
+                <Switch.Label>Еженедельная сводка</Switch.Label>
+              </Switch.Root>
+            </div>
+          </div>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close>
+            <Button.Root variant="outline" tone="neutral" disabled={saving}>
+              Отмена
+            </Button.Root>
+          </Drawer.Close>
+          <Button.Root loading={saving} onClick={save}>
+            Сохранить
+          </Button.Root>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

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

@@ -0,0 +1,42 @@
+/** Controlled drawer opened from a link: `open` + `onOpenChange` on Drawer.Root, a custom close label and `layout="fill"` in the footer. Use when any element, not a trigger, opens the panel. */
+import { Button, Drawer, LinkButton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function DrawerControlledExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className={styles.row}>
+      <LinkButton.Root
+        href="#help"
+        onClick={(event) => {
+          event.preventDefault();
+          setOpen(true);
+        }}
+      >
+        Как это работает?
+      </LinkButton.Root>
+      <Drawer.Root open={open} onOpenChange={setOpen} labels={{ close: "Закрыть справку" }}>
+        <Drawer.Content size="s">
+          <Drawer.Header>
+            <Drawer.Title>Справка</Drawer.Title>
+          </Drawer.Header>
+          <Drawer.Body>
+            <Typography.Root variant="body-m" tone="secondary">
+              Состояние хранит родитель: open и onOpenChange на Drawer.Root, триггер не нужен.
+            </Typography.Root>
+          </Drawer.Body>
+          <Drawer.Footer layout="fill">
+            <Drawer.Close>
+              <Button.Root variant="outline" tone="neutral">
+                Понятно
+              </Button.Root>
+            </Drawer.Close>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+/* Layout for the Drawer examples: layout only, text goes through Typography. */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prime-space-3);
+}
+
+/* Field groups get 20 between them, a step above plain body blocks. */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-5);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-control-m-label-gap);
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+}
+
+/* Term / value grid; the text inside goes through Typography. */
+.details {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--prime-space-2) var(--prime-space-4);
+  margin: 0;
+}
+
+/* Reset of the native <dd> indent. */
+.details dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}

package/src/components/drawer/examples/features.tsx

@@ -0,0 +1,48 @@
+/** A long body that scrolls between the fixed header and footer. Use for logs, histories and long details. */
+import { History } from "lucide-react";
+import { Button, Drawer, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const EVENTS = Array.from({ length: 24 }, (_, i) => ({
+  id: i,
+  text: `${String(9 + Math.floor(i / 4)).padStart(2, "0")}:${String((i % 4) * 15).padStart(2, "0")} — статус заказа обновлён`,
+}));
+
+export default function DrawerFeaturesExample() {
+  return (
+    <div className={styles.row}>
+      <Drawer.Root>
+        <Drawer.Trigger>
+          <Button.Root variant="soft" tone="neutral">
+            История изменений
+          </Button.Root>
+        </Drawer.Trigger>
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Icon>
+              <History />
+            </Drawer.Icon>
+            <Drawer.Title>История изменений</Drawer.Title>
+            <Drawer.Description>24 события за сегодня</Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Body>
+            {EVENTS.map((event) => (
+              <Typography.Root key={event.id} variant="body-m" tone="secondary">
+                {event.text}
+              </Typography.Root>
+            ))}
+          </Drawer.Body>
+          <Drawer.Footer>
+            <Drawer.Close>
+              <Button.Root variant="outline" tone="neutral">
+                Закрыть
+              </Button.Root>
+            </Drawer.Close>
+            <Button.Root>Экспорт</Button.Root>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+/** Drawer.Content widths s · m · l · xl. Below 640px of viewport the panel always takes the full width. */
+import { Button, Drawer, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIZES = [
+  { size: "s", width: "360 px" },
+  { size: "m", width: "480 px" },
+  { size: "l", width: "640 px" },
+  { size: "xl", width: "800 px" },
+] as const;
+
+export default function DrawerSizesExample() {
+  return (
+    <div className={styles.row}>
+      {SIZES.map(({ size, width }) => (
+        <Drawer.Root key={size}>
+          <Drawer.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              Размер {size}
+            </Button.Root>
+          </Drawer.Trigger>
+          <Drawer.Content size={size}>
+            <Drawer.Header>
+              <Drawer.Title>Панель размера {size}</Drawer.Title>
+              <Drawer.Description>Ширина {width}</Drawer.Description>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Typography.Root variant="body-m" tone="secondary">
+                Ширина берётся из{" "}
+                <Typography.Root as="span" variant="code" tone="secondary">
+                  --prime-drawer-width-{size}
+                </Typography.Root>
+                . На экране уже 640 px панель занимает всю ширину и теряет скругления.
+              </Typography.Root>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Root>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+/** A read-only details drawer without Drawer.Footer and with a success icon in the header. Use to show the details of a record without actions. */
+import { Package } from "lucide-react";
+import { Button, Drawer, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const DETAILS = [
+  { term: "Клиент", value: "Анна Смирнова" },
+  { term: "Сумма", value: "12 480 ₽" },
+  { term: "Доставка", value: "Курьер, 5 октября" },
+  { term: "Статус", value: "Собирается на складе" },
+];
+
+export default function DrawerStatesExample() {
+  return (
+    <div className={styles.row}>
+      <Drawer.Root>
+        <Drawer.Trigger>
+          <Button.Root variant="soft" tone="neutral">
+            Заказ № 1042
+          </Button.Root>
+        </Drawer.Trigger>
+        <Drawer.Content size="s">
+          <Drawer.Header>
+            <Drawer.Icon tone="success">
+              <Package />
+            </Drawer.Icon>
+            <Drawer.Title>Заказ № 1042</Drawer.Title>
+            <Drawer.Description>Оформлен 3 октября</Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Body>
+            <dl className={styles.details}>
+              {DETAILS.map(({ term, value }) => (
+                <React.Fragment key={term}>
+                  <dt>
+                    <Typography.Root as="span" variant="body-m" tone="muted">
+                      {term}
+                    </Typography.Root>
+                  </dt>
+                  <dd>
+                    <Typography.Root as="span" variant="body-m">
+                      {value}
+                    </Typography.Root>
+                  </dd>
+                </React.Fragment>
+              ))}
+            </dl>
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer.Root>
+    </div>
+  );
+}

package/src/components/drawer/examples/variants-sides.tsx

@@ -0,0 +1,36 @@
+/** `side="left"` and `side="right"`: right (default) for details and forms, left for filters and navigation. */
+import { Button, Drawer, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIDES = [
+  { side: "left", label: "Слева", title: "Фильтры" },
+  { side: "right", label: "Справа", title: "Детали заказа" },
+] as const;
+
+export default function DrawerVariantsSidesExample() {
+  return (
+    <div className={styles.row}>
+      {SIDES.map(({ side, label, title }) => (
+        <Drawer.Root key={side}>
+          <Drawer.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              {label}
+            </Button.Root>
+          </Drawer.Trigger>
+          <Drawer.Content side={side} size="s">
+            <Drawer.Header>
+              <Drawer.Title>{title}</Drawer.Title>
+              <Drawer.Description>side="{side}"</Drawer.Description>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Typography.Root variant="body-m" tone="secondary">
+                Скругление только со стороны страницы, подложка затемняет остальное.
+              </Typography.Root>
+            </Drawer.Body>
+          </Drawer.Content>
+        </Drawer.Root>
+      ))}
+    </div>
+  );
+}