prime-ui-kit 0.9.0 → 0.9.2

package/src/components/drawer/COMPONENT.md

@@ -1,14 +1,16 @@
 # Drawer
 
 **Category:** overlays
+**Kind:** overlay
 
-> A modal side panel that slides in from the edge: filters, forms and record details.
+> A modal panel that slides in from the edge: filters, forms and record details at the side, a bottom sheet on a phone.
 
 ## 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.
+- A short task on a phone — pick a date, choose an action, fill two fields — in a bottom sheet (`side="bottom"`).
 
 ## When not to use
 - Confirmations and short decisions → use [Modal](../modal/COMPONENT.md).
@@ -24,164 +26,171 @@ import { Drawer } from "prime-ui-kit";
 ## 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
+├─ Drawer.Trigger              clones its child; opens on click
+└─ Drawer.Content              portal + scrim + role="dialog" panel at the edge
+   ├─ (grab handle)            side="bottom" only: aria-hidden bar, a drag starts here
+   ├─ Drawer.Header            grid: [Icon] [Title + Description] [close Button]
+   │  ├─ Drawer.Icon
+   │  ├─ Drawer.Title          <h2>
+   │  └─ Drawer.Description    <p>
+   ├─ Drawer.Body              the only scrolling zone (ScrollContainer)
+   └─ Drawer.Footer            actions, primary last
+      └─ Drawer.Close          clones its child; closes on click
 ```
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Drawer.Root
-No DOM, no ref.
+No DOM, no ref. State and dismiss policy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `open` | `boolean` | — | Controlled visibility. |
+| `open` | `boolean` | — | Controlled visibility; together with `onOpenChange`. |
 | `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. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: trigger, close button, `Close`, Escape, scrim click, code. |
+| `closeOnEscape` | `boolean` | `true` | Escape closes the dialog. |
+| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim (and a swipe on a bottom sheet) closes the dialog; turn off for destructive confirms. |
+| `labels` | `Partial<DrawerLabels>` | — | Built-in strings, see Labels. |
 | `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.
+`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel at the edge; renders 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. |
+| `side` | `"left" \| "right" \| "bottom"` | `"right"` | Edge the panel slides from; rounded only on the edge facing the page. `bottom` is a sheet: a grab handle on top, height by content. A swipe toward the edge closes the panel (with `closeOnOutsideClick`): a bottom sheet from its handle or header, a side drawer by touch anywhere (by mouse from the header). |
+| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | Width: 360 · 480 · 640 · 800; a bottom sheet is centred and at least 560 (`--prime-sheet-min-width`). Below 640 px of viewport — full width; side drawers lose their corners. |
 | `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. |
+| `overlayClassName` | `string` | — | Class on the scrim. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other attributes of the `role="dialog"` element. |
 
-+ native `<div>` props (on the panel).
+### Drawer.Header
+`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [close button]. + native `HTMLAttributes<HTMLElement>`.
 
-### Drawer.Header · Icon · Title · Description · Body · Footer · Close
-The same parts as Modal ([Modal API](../modal/COMPONENT.md#api)):
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `showClose` | `boolean` | `true` | Built-in square ghost `s` close button named by `labels.close`. |
+| `children` | `ReactNode` | — | Icon, Title, Description in any order; the icon goes to the leading slot. |
 
-| 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.Icon
+`ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill.
 
-Drawer has no `Confirm` part and no Enter-confirm.
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color. |
+| `children` | `ReactNode` | — (required) | Icon glyph (sized to the m icon). |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the tile. |
 
-### DrawerLabels
-| Key | Default | Used for |
-|---|---|---|
-| `close` | `"Закрыть"` | `aria-label` of the header close button |
+### Drawer.Title · Drawer.Description
+`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog. + native props except `id`.
+
+### Drawer.Body
+`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks. + native `<div>` props.
+
+### Drawer.Footer
+`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last. + native `HTMLAttributes<HTMLElement>`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `layout` | `"fill" \| "end"` | `"end"` | `fill`: equal-width buttons in one row; `end`: auto width, at the end. Stacked on phones (viewport below 640 px) and in a dialog narrower than 360 px. |
+
+### Drawer.Trigger · Drawer.Close
+No DOM: clone the single child and chain its `onClick` (unless the child's handler calls `preventDefault()`).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactElement` | — (required) | One element, usually a 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 | |
+| `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 | |
+| `bottom` | rises from the bottom, rounded on top, grab handle, height by content | a short task on a phone | |
 
 ### 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 | |
+| `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.
+A bottom sheet is centred at its width, never narrower than 560 (`--prime-sheet-min-width`), so a tablet gets a real sheet. Below 640px of viewport every size is full width; side drawers lose their corners, the sheet keeps its top radius.
 
 ### 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 («Понятно») | |
+| `end` | auto-width buttons at the end | most drawers | yes |
+| `fill` | equal-width buttons in one row | 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.
+`neutral` (default) · `accent` · `success` · `warning` · `danger` · `info` — soft tile fill and icon color, as in Modal.
 
 ## 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.
+| State | Driven by | DOM |
+|---|---|---|
+| open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the scrim and the panel; mounted until the slide-out ends |
+| side / size | Content props | `data-side`, `data-size` on the panel |
+| swiping | a drag toward the edge (with `closeOnOutsideClick`) | `data-swiping` and `--swipe-offset` on the panel while the pointer drags it; `data-swipe-dismissed` while it glides out after a closing release; `--swipe-progress` (0…1) on the scrim |
+| open: trapped | while open | focus trapped, page scroll locked, siblings of the portal `inert` (the toast region stays usable); a drawer opened from a Modal or another drawer stacks above it |
+
+Motion: the scrim fades, the panel slides from its side over `slow` and leaves over `base` (`overlayMotion`); under `prefers-reduced-motion` it unmounts at once. A swipe moves the panel with the pointer; on release it closes past 30% of its size or on a quick flick and glides the rest of the way out from where it was let go, otherwise it glides back — both over `base` on the `emphasized` (iOS sheet) curve. A pull the other way meets growing resistance and stops at 24; the panel's fill continues that far past the screen edge, so it never comes away from it. The scrim follows the panel: its fill thins in proportion to how far out the panel is, tracks the finger while dragging and glides with the panel on release. A bottom sheet drags from its handle or header; a side drawer by touch anywhere (not on text fields, sliders or sideways scrollers), by mouse from the header.
 
 ## 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.
+- Zone padding `--prime-drawer-padding`; hairlines between header, body and footer.
+- Full viewport height; only the body scrolls, with its own side padding.
+- Bottom sheet: width by `size`, at least `--prime-sheet-min-width` (560); height by content up to `100dvh − --prime-sheet-top-gap`, radius `--prime-sheet-radius`, a `--prime-sheet-handle-area` strip with the handle bar, the bottom safe-area inset below the content.
+- Fields inside get the surface field fill.
 
 ## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Escape` | Closes the drawer (`closeOnEscape`); focus returns to the trigger. |
+| `Tab` · `Shift+Tab` | Cycle focus inside the drawer. |
+
+### ARIA
 - `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.
+- The page behind is `inert`, scroll is locked; only the topmost layer reacts.
+- A drawer opened from a Modal stacks above it.
+- A swipe toward the edge is an extra way out; the close button and Escape stay. The grab handle is `aria-hidden`.
 
-## Examples
-| File | Scenario | When to use this pattern |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
 |---|---|---|
-| [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 |
+| `close` | `"Закрыть"` | `aria-label` of the header close button. |
 
-```tsx
-import { Button, Drawer } from "prime-ui-kit";
-
-export function Example() {
-  return (
-    <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>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | Order details next to the list: a trigger, a header with a close button and a read-only body — `Drawer.Trigger`, `Drawer.Body`. |
+| [structure.tsx](examples/structure.tsx) | Optional parts: an icon tile in the header and one full-width action in the footer — `Drawer.Icon`, `Drawer.Footer`, `layout`. |
+| [sizes.tsx](examples/sizes.tsx) | Every panel width, 360 to 800 px; below 640 px of viewport the panel takes the full width — `size`. |
+| [placement.tsx](examples/placement.tsx) | The panel slides from the right for details, from the left for filters and up from the bottom as a sheet — `side`. |
+| [date-sheet.tsx](examples/date-sheet.tsx) | A date picked in a bottom sheet: a grab handle on top, a swipe down or a pick closes it — `side`, `Drawer.Body`. |
+| [long-content.tsx](examples/long-content.tsx) | A long body scrolls on its own while the header and the footer stay in place — `Drawer.Body`. |
+| [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
+| [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and opens the drawer from a link, without a trigger — `open`, `onOpenChange`. |
+| [in-form.tsx](examples/in-form.tsx) | A settings form in the panel: the footer button submits the form and an empty name keeps it open — `Drawer.Body`, `Drawer.Footer`, `error`. |
 
 ## 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`.
+- Expecting Enter to submit via `Drawer.Confirm` → Drawer has no Confirm; use a `<form>` with a submit button.
+- `side="top"` → only `left`, `right` and `bottom`.
+- Swipe as the only way to close → keep `Drawer.Header` with its close button (or `Drawer.Close`); a swipe is an extra gesture.
 - Padding on a wrapper inside Body → Body already pads and scrolls.
 
 ## Related
-[Modal](../modal/COMPONENT.md) · [Sidebar](../../layout/sidebar/COMPONENT.md) · [Popover](../popover/COMPONENT.md)
+- **Built from:** Button, Icon, ScrollContainer
+- **See also:** [Modal](../modal/COMPONENT.md), [Sidebar](../../layout/sidebar/COMPONENT.md), [Popover](../popover/COMPONENT.md)

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

@@ -0,0 +1,33 @@
+/** The parent owns the state and opens the drawer from a link, without a trigger — `open`, `onOpenChange`. */
+import { Drawer, LinkButton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+export default function DrawerControlledOpenExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <LinkButton
+        href="#help"
+        onClick={(event) => {
+          event.preventDefault();
+          setOpen(true);
+        }}
+      >
+        Как формируется счёт?
+      </LinkButton>
+      <Drawer.Root open={open} onOpenChange={setOpen}>
+        <Drawer.Content size="s">
+          <Drawer.Header>
+            <Drawer.Title>Счёт на оплату</Drawer.Title>
+          </Drawer.Header>
+          <Drawer.Body>
+            <Typography variant="body-m" tone="secondary">
+              Счёт формируется 1-го числа по тарифу и числу активных пользователей за прошлый месяц.
+            </Typography>
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer.Root>
+    </>
+  );
+}

package/src/components/drawer/examples/date-sheet.tsx

@@ -0,0 +1,41 @@
+/** A date picked in a bottom sheet: a grab handle on top, a swipe down or a pick closes it — `side`, `Drawer.Body`. */
+import { Button, Datepicker, Drawer, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const FORMAT = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", year: "numeric" });
+
+export default function DrawerDateSheetExample() {
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState<Date | null>(new Date(2026, 2, 8));
+
+  return (
+    <Drawer.Root open={open} onOpenChange={setOpen}>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Icon name="field.calendar" />
+          </Button.Icon>
+          {date ? `Отгрузка ${FORMAT.format(date)}` : "Дата отгрузки"}
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content side="bottom">
+        <Drawer.Header>
+          <Drawer.Title>Дата отгрузки</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Body>
+          <Datepicker.Panel
+            mode="single"
+            className={styles.calendar}
+            value={date}
+            onValueChange={(next) => {
+              setDate(next);
+              setOpen(false);
+            }}
+          />
+        </Drawer.Body>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

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

@@ -0,0 +1,55 @@
+/** An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. */
+import { Button, Drawer, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+export default function DrawerDismissExample() {
+  const [open, setOpen] = React.useState(false);
+  const [importing, setImporting] = React.useState(false);
+
+  const start = () => {
+    setImporting(true);
+    window.setTimeout(() => {
+      setImporting(false);
+      setOpen(false);
+    }, 1200);
+  };
+
+  return (
+    <Drawer.Root
+      open={open}
+      onOpenChange={setOpen}
+      closeOnOutsideClick={false}
+      closeOnEscape={!importing}
+    >
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Импорт товаров
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content size="s">
+        <Drawer.Header showClose={!importing}>
+          <Drawer.Title>Импорт товаров</Drawer.Title>
+          <Drawer.Description>catalog-october.xlsx · 1 240 строк</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          <Typography variant="body-m" tone="secondary">
+            Товары с совпадающим артикулом обновятся, новые добавятся в каталог.
+          </Typography>
+          <Typography variant="body-m" tone="secondary">
+            Панель закрывается только кнопками: случайный клик мимо не сбросит настройки импорта.
+          </Typography>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close>
+            <Button.Root variant="outline" tone="neutral" disabled={importing}>
+              Отмена
+            </Button.Root>
+          </Drawer.Close>
+          <Button.Root loading={importing} onClick={start}>
+            Импортировать
+          </Button.Root>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

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

@@ -1,33 +1,13 @@
-/* Layout for the Drawer examples: layout only, text goes through Typography. */
+/* Layout of the Drawer scenarios: semantic tokens only. */
 
-.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. */
+/* in-form.tsx: 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. */
+/* overview.tsx: a term / value grid. */
 .details {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -35,8 +15,12 @@
   margin: 0;
 }
 
-/* Reset of the native <dd> indent. */
 .details dd {
   margin: 0;
   font-variant-numeric: tabular-nums;
 }
+
+/* date-sheet.tsx: the calendar keeps its own width, centred in the sheet. */
+.calendar {
+  align-self: center;
+}

package/src/components/drawer/examples/in-form.tsx

@@ -0,0 +1,82 @@
+/** A settings form in the panel: the footer button submits the form and an empty name keeps it open — `Drawer.Body`, `Drawer.Footer`, `error`. */
+import { Button, Drawer, Icon, Input, Select, Switch } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function DrawerInFormExample() {
+  const formId = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const name = String(new FormData(event.currentTarget).get("name") ?? "").trim();
+    if (!name) {
+      setError("Введите название пространства");
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Drawer.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setError(undefined);
+      }}
+    >
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Настройки пространства
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Icon>
+            <Icon name="nav.layoutGrid" />
+          </Drawer.Icon>
+          <Drawer.Title>Рабочее пространство</Drawer.Title>
+          <Drawer.Description>Изменения увидят все участники</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          <form id={formId} className={styles.form} noValidate onSubmit={submit}>
+            <Input.Root label="Название" required error={error} reserveSupportRow>
+              <Input.Wrapper>
+                <Input.Field name="name" defaultValue="Команда продукта" autoFocus />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root label="Адрес" hint="Только латиница, цифры и дефис">
+              <Input.Wrapper>
+                <Input.Field name="slug" defaultValue="product-team" />
+              </Input.Wrapper>
+            </Input.Root>
+            <Select.Root label="Язык интерфейса" defaultValue="ru">
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Content>
+                <Select.Item value="ru">Русский</Select.Item>
+                <Select.Item value="en">English</Select.Item>
+              </Select.Content>
+            </Select.Root>
+            <Switch.Root name="digest" defaultChecked>
+              <Switch.Label>Еженедельная сводка на почту</Switch.Label>
+            </Switch.Root>
+          </form>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Отмена
+            </Button.Root>
+          </Drawer.Close>
+          <Button.Root type="submit" form={formId}>
+            Сохранить
+          </Button.Root>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}

package/src/components/drawer/examples/long-content.tsx

@@ -0,0 +1,40 @@
+/** A long body scrolls on its own while the header and the footer stay in place — `Drawer.Body`. */
+import { Button, Drawer, Typography } from "prime-ui-kit";
+
+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 DrawerLongContentExample() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          История изменений
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>История изменений</Drawer.Title>
+          <Drawer.Description>24 события за сегодня</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          {EVENTS.map((event) => (
+            <Typography key={event.id} variant="body-m" tone="secondary">
+              {event.text}
+            </Typography>
+          ))}
+        </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>
+  );
+}

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

@@ -0,0 +1,48 @@
+/** Order details next to the list: a trigger, a header with a close button and a read-only body — `Drawer.Trigger`, `Drawer.Body`. */
+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 DrawerOverviewExample() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Заказ № 1042
+        </Button.Root>
+      </Drawer.Trigger>
+      <Drawer.Content size="s">
+        <Drawer.Header>
+          <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 as="span" variant="body-m" tone="muted">
+                    {term}
+                  </Typography>
+                </dt>
+                <dd>
+                  <Typography as="span" variant="body-m">
+                    {value}
+                  </Typography>
+                </dd>
+              </React.Fragment>
+            ))}
+          </dl>
+        </Drawer.Body>
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}