prime-ui-kit 0.15.0 → 0.17.0

package/src/components/drawer/COMPONENT.md

@@ -53,12 +53,12 @@ No DOM, no ref. State and dismiss policy.
 | `defaultOpen` | `boolean` | `false` | Initial visibility, uncontrolled. |
 | `onOpenChange` | `(open: boolean) => void` | — | Called on every open and close: trigger, close button, `Close`, Escape, scrim click, code. A `Guard` holds the dismisses (not code). |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the dialog. |
-| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim closes the dialog; turn off for destructive confirms. |
+| `closeOnOutsideClick` | `boolean` | `true` | A click on the scrim closes the dialog. A destructive action is confirmed in a ConfirmDialog; unsaved changes are held by `Guard`. |
 | `labels` | `Partial<DrawerLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — | Trigger and Content. |
 
 ### Drawer.Content
-`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel at the edge; renders while open and during its exit animation, showing the children it had open (a record cleared with `open` does not empty the panel mid-motion).
+`ref` → `HTMLDivElement` (the dialog panel). Portal + scrim + `role="dialog"` panel at the edge, side by side; renders while open and during its exit animation, showing the children it had open (a record cleared with `open` does not empty the panel mid-motion).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -71,15 +71,20 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other attributes of the `role="dialog"` element. |
 
 ### Drawer.Header
-`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [Actions] [close button]. + native `HTMLAttributes<HTMLElement>`.
+`ref` → `HTMLElement`. Renders `<header>`: [Icon] [Title + Description] [Actions] [close button].
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `showClose` | `boolean` | `true` | Built-in square ghost `s` close button named by `labels.close`; disabled in place while a `Guard` is `busy`. |
 | `children` | `ReactNode` | — | Icon, Title, Description, Actions in any order; each goes to its column. A `Tabs.List` (with `Tabs.Root` around header and body) turns the header into a tab strip. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Drawer.Actions
-`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`. + native `<div>` props.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the row. |
 
 ### Drawer.Icon
 `ref` → `HTMLSpanElement`. An `aria-hidden` 40 px tile with a tone fill; around an `Avatar.Root` or a `Thumbnail.Root` (the record's picture) no tile — `data-media`, the avatar sized to 40 px.
@@ -87,24 +92,37 @@ No DOM, no ref. State and dismiss policy.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Soft fill and icon color; not used around a picture. |
-| `children` | `ReactNode` | — (required) | An icon glyph (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
+| `children` | `ReactNode` | — (required) | An `Icon` (sized to the m icon), or the record's picture: an `Avatar.Root` (sized to the tile) or a `Thumbnail.Root`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the tile. |
 
 ### 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`.
+`ref` → `HTMLHeadingElement` / `HTMLParagraphElement`. `<h2>` (title-m) / `<p>` (body-s, muted); their ids name and describe the dialog.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<HTMLAttributes<HTMLHeadingElement \| HTMLParagraphElement>, "id">` | — | `className`, `children` and the other attributes except `id` (the dialog owns it). |
 
 ### Drawer.Body
-`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks. + native `<div>` props.
+`ref` → `HTMLDivElement`. The only scrolling zone (a ScrollContainer), 16 gap between blocks.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the zone. |
 
 ### Drawer.Footer
-`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start. + native `HTMLAttributes<HTMLElement>`.
+`ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start.
 
 | 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. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `className`, `children` and the other attributes of the `<footer>`. |
 
 ### Drawer.Meta
-`ref` → `HTMLParagraphElement`. A `<p>` at the start of the footer: short muted status text («Есть несохранённые изменения»); the buttons keep their width at the end. Not part of the dialog description. + native `<p>` props.
+`ref` → `HTMLParagraphElement`. A `<p>` at the start of the footer: short muted status text («Есть несохранённые изменения»); the buttons keep their width at the end. Not part of the dialog description.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `className`, `children` and the other attributes of the `<p>`. |
 
 ### Drawer.Guard
 No DOM, no ref. Holds the dialog from anywhere inside Content, where the form state lives; renders only the built-in «discard changes?» confirm. Closing from code is never held.
@@ -112,10 +130,10 @@ No DOM, no ref. Holds the dialog from anywhere inside Content, where the form st
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `busy` | `boolean` | `false` | A request runs: Escape, a press outside, the close button and `Close` do nothing; the close button and the `Close` child stay in place, disabled. |
-| `dirty` | `boolean` | `false` | Unsaved changes: any of those dismisses first asks «Не сохранять изменения?» (a ConfirmDialog with `labels.discard*`); confirming closes the dialog. |
+| `dirty` | `boolean` | `false` | Unsaved changes: any of those dismisses asks «Не сохранять изменения?» (a ConfirmDialog with `labels.discard*`); confirming closes the dialog. |
 
 ### Drawer.Trigger · Drawer.Close
-No DOM: clone the single child and chain its `onClick` (unless the child's handler calls `preventDefault()`). `Close` goes through a `Guard` and makes its child `disabled` while the guard is busy.
+No DOM: each clones its child. `Trigger` and `Close` chain its `onClick` (skipped after `preventDefault()`): open; close through `Guard`, `disabled` while it is busy.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -152,6 +170,7 @@ Below 640px of viewport every size is full width and loses its corners.
 | State | Driven by | DOM |
 |---|---|---|
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the scrim and the panel; mounted until the slide-out ends |
+| dismiss | `closeOnEscape`, `closeOnOutsideClick` (both default `true`) | Escape and a scrim press ask the Root to close; `false` turns that way off |
 | side / size | Content props | `data-side`, `data-size` on the panel |
 | 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 |
 | closing | `open` turns false | the panel keeps showing the children it had open while it slides out |
@@ -174,18 +193,22 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | 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.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- `role="dialog"`, `aria-modal="true"`, named by `Drawer.Title` (or `aria-label`), described by `Drawer.Description`.
 - Focus moves into the panel on open and returns to the opener on close, including after a scrim click.
 - The page behind is `inert`, scroll is locked; only the topmost layer reacts.
 - A drawer opened from a Modal stacks above it.
 - No swipe: the close button, `Drawer.Close`, Escape and the scrim are the ways out.
-- A busy `Guard` keeps the close button and the `Close` child in place, `disabled`; a dirty one opens a `role="alertdialog"` confirm with focus on «Продолжить».
+- A `Guard` that is `busy` keeps the close button and the `Close` child in place, `disabled`; a `dirty` one opens a `role="alertdialog"` confirm with focus on «Продолжить».
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -212,7 +235,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [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 shakes the field and keeps it open until it is filled — `Drawer.Body`, `Drawer.Footer`, `error`. |
-| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in the app header: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. |
+| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in its top bar: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. |
 
 ## Mistakes
 - A drawer without `Drawer.Footer` → add one: «Закрыть» for details, «Отмена» + the submit button for a form. The header × alone is not the end of the panel.
@@ -227,5 +250,5 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 - Padding on a wrapper inside Body → Body already pads and scrolls.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Drawer.Body`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Drawer.Guard` discard confirm), `Icon` (the close glyph)
+- **Built from:** the dialog shared with Modal and Sheet (`internal/overlay/DialogParts`), [Button](../button/COMPONENT.md) (close button), [ScrollContainer](../scroll-container/COMPONENT.md) (`Drawer.Body`), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (a record's picture in `Drawer.Icon`), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (the `Drawer.Guard` discard confirm), `Icon` (the close glyph)
 - **See also:** [Modal](../modal/COMPONENT.md) (the same header, body, footer and `Guard` in the centre), [Sheet](../sheet/COMPONENT.md) (the same parts raised from the bottom edge for a short task), [ConfirmDialog](../confirm-dialog/COMPONENT.md) (a destructive confirm), [Sidebar](../../layout/sidebar/COMPONENT.md), [Popover](../popover/COMPONENT.md), [Avatar](../avatar/COMPONENT.md) (a person's picture in `Drawer.Icon`)

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

@@ -2,8 +2,6 @@
 import { Button, Drawer, Fieldset, Input, Textarea } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 /** Pretends to send the form. */
 function saveTask() {
   return new Promise((resolve) => setTimeout(resolve, 1200));
@@ -43,7 +41,7 @@ export default function DrawerGuardExample() {
         </Drawer.Header>
         <Drawer.Body>
           <Drawer.Guard busy={saving} dirty={dirty} />
-          <form id={formId} className={styles.form} onSubmit={submit}>
+          <form id={formId} onSubmit={submit}>
             <Fieldset disabled={saving}>
               <Input.Root label="Название">
                 <Input.Wrapper>

package/src/components/drawer/examples/header-actions.tsx

@@ -21,7 +21,7 @@ export default function DrawerHeaderActionsExample() {
           <Drawer.Title>{DEAL.title}</Drawer.Title>
           <Drawer.Description>{DEAL.client}</Drawer.Description>
           <Drawer.Actions>
-            <Badge.Root color="green">Выиграна</Badge.Root>
+            <Badge.Root tone="success">Выиграна</Badge.Root>
             <Dropdown.Root>
               <Dropdown.Trigger>
                 <Button.Root variant="ghost" tone="neutral" aria-label="Действия со сделкой">

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

@@ -1,9 +1,7 @@
 /** A settings form in the panel: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Drawer.Body`, `Drawer.Footer`, `error`. */
-import { Button, Drawer, Icon, Input, Select, Switch } from "prime-ui-kit";
+import { Button, Drawer, Fieldset, 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);
@@ -41,34 +39,36 @@ export default function DrawerInFormExample() {
           <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
-                  onValueChange={() => setError(undefined)}
-                />
-              </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 id={formId} noValidate onSubmit={submit}>
+            <Fieldset>
+              <Input.Root label="Название" required error={error} reserveSupportRow>
+                <Input.Wrapper>
+                  <Input.Field
+                    name="name"
+                    defaultValue="Команда продукта"
+                    autoFocus
+                    onValueChange={() => setError(undefined)}
+                  />
+                </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>
+            </Fieldset>
           </form>
         </Drawer.Body>
         <Drawer.Footer>

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

@@ -13,7 +13,7 @@ export default function DrawerPlacementExample() {
         <Drawer.Root key={side}>
           <Drawer.Trigger>
             <Button.Root variant="soft" tone="neutral">
-              {side}
+              {title}
             </Button.Root>
           </Drawer.Trigger>
           <Drawer.Content side={side} size="s">

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

@@ -1,6 +1,5 @@
-/** A create form in a Drawer opened from the primary action in the app header: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. */
+/** A create form in a Drawer opened from the primary action in its top bar: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. */
 import {
-  AppHeader,
   Badge,
   Button,
   Checkbox,
@@ -10,8 +9,7 @@ import {
   Fieldset,
   Icon,
   Input,
-  PageContent,
-  PageToolbar,
+  Page,
   Radio,
   Select,
   SmartFilter,
@@ -128,162 +126,141 @@ export default function DrawerScreenExample() {
   const people = clients.filter((client) => client.kind === "person").length;
 
   return (
-    <>
-      {/* The page lives in the app header: the only h1, the counts under it, search and the one
-          primary action — the Drawer trigger — in the tools row; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Клиенты
-            <AppHeader.Description>
+    <SmartFilter.Root fields={[]} search={search} onSearchChange={setSearch}>
+      <Page.Root>
+        {/* A work screen titles itself in its top bar: the only h1, the counts under it, the search
+          and the one primary action — the Drawer trigger. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Клиенты</Page.Title>
+            <Page.Description>
               {plural(clients.length, CLIENT_WORDS)} ·{" "}
               {plural(clients.length - people, COMPANY_WORDS)} и {people} ИП
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root fields={[]} search={search} onSearchChange={setSearch}>
-            <PageToolbar.Root aria-label="Клиенты">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.Actions>
-                <Drawer.Root open={open} onOpenChange={changeOpen}>
-                  <Drawer.Trigger>
-                    <Button.Root>
-                      <Button.Icon>
-                        <Icon name="action.add" />
-                      </Button.Icon>
-                      Новый клиент
-                    </Button.Root>
-                  </Drawer.Trigger>
-                  <Drawer.Content>
-                    <Drawer.Header>
-                      <Drawer.Title>Новый клиент</Drawer.Title>
-                      <Drawer.Description>
-                        Появится в списке и в выборе клиента при выставлении счёта.
-                      </Drawer.Description>
-                    </Drawer.Header>
-                    <Drawer.Body>
-                      <Drawer.Guard busy={saving} dirty={dirty} />
-                      <form
-                        id={formId}
-                        className={styles.form}
-                        noValidate
-                        onSubmit={submit}
-                        onChange={() => setDirty(true)}
+            </Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Клиенты">
+            <SmartFilter.Toolbar />
+          </Page.Tools>
+          <Page.Actions>
+            <Drawer.Root open={open} onOpenChange={changeOpen}>
+              <Drawer.Trigger>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новый клиент
+                </Button.Root>
+              </Drawer.Trigger>
+              <Drawer.Content>
+                <Drawer.Header>
+                  <Drawer.Title>Новый клиент</Drawer.Title>
+                  <Drawer.Description>
+                    Появится в списке и в выборе клиента при выставлении счёта.
+                  </Drawer.Description>
+                </Drawer.Header>
+                <Drawer.Body>
+                  <Drawer.Guard busy={saving} dirty={dirty} />
+                  <form
+                    id={formId}
+                    className={styles.form}
+                    noValidate
+                    onSubmit={submit}
+                    onChange={() => setDirty(true)}
+                  >
+                    <Fieldset label="Реквизиты" disabled={saving}>
+                      <Radio.Group
+                        name="kind"
+                        label="Тип клиента"
+                        defaultValue="company"
+                        orientation="horizontal"
                       >
-                        <Fieldset label="Реквизиты" disabled={saving}>
-                          <Radio.Group
-                            name="kind"
-                            label="Тип клиента"
-                            defaultValue="company"
-                            orientation="horizontal"
-                          >
-                            <Radio.Root value="company">
-                              <Radio.Label>Компания</Radio.Label>
-                            </Radio.Root>
-                            <Radio.Root value="person">
-                              <Radio.Label>ИП</Radio.Label>
-                            </Radio.Root>
-                          </Radio.Group>
-                          <Input.Root label="Название" error={errors.name}>
-                            <Input.Wrapper>
-                              <Input.Field
-                                name="name"
-                                placeholder="ООО «Ромашка»"
-                                autoComplete="organization"
-                              />
-                            </Input.Wrapper>
-                          </Input.Root>
-                          <div className={styles.pair}>
-                            <Input.Root label="ИНН" error={errors.inn} reserveSupportRow>
-                              <Input.Wrapper>
-                                <Input.Field
-                                  name="inn"
-                                  inputMode="numeric"
-                                  placeholder="7704512908"
-                                />
-                              </Input.Wrapper>
-                            </Input.Root>
-                            <Input.Root label="КПП" optional reserveSupportRow>
-                              <Input.Wrapper>
-                                <Input.Field
-                                  name="kpp"
-                                  inputMode="numeric"
-                                  placeholder="770401001"
-                                />
-                              </Input.Wrapper>
-                            </Input.Root>
-                          </div>
-                        </Fieldset>
-                        <Fieldset label="Контакты" disabled={saving}>
-                          <Input.Root
-                            label="Почта для счетов"
-                            error={errors.email}
-                            hint="На неё уйдут счета и акты"
-                          >
-                            <Input.Wrapper>
-                              <Input.Icon side="start">
-                                <Icon name="field.email" />
-                              </Input.Icon>
-                              <Input.Field
-                                name="email"
-                                type="email"
-                                placeholder="billing@company.ru"
-                              />
-                            </Input.Wrapper>
-                          </Input.Root>
-                          <Select.Root
-                            label="Менеджер"
-                            value={manager}
-                            onValueChange={(next) => {
-                              setManager(next);
-                              setDirty(true);
-                            }}
-                          >
-                            <Select.Trigger>
-                              <Select.Value />
-                            </Select.Trigger>
-                            <Select.Content>
-                              {MANAGERS.map((name) => (
-                                <Select.Item key={name} value={name}>
-                                  {name}
-                                </Select.Item>
-                              ))}
-                            </Select.Content>
-                          </Select.Root>
-                          <Textarea.Root name="note" label="Комментарий" optional rows={2} />
-                          <Checkbox.Root
-                            name="invite"
-                            defaultChecked
-                            hint="Клиент увидит свои счета и акты онлайн"
-                          >
-                            <Checkbox.Label>Пригласить в личный кабинет</Checkbox.Label>
-                          </Checkbox.Root>
-                        </Fieldset>
-                      </form>
-                    </Drawer.Body>
-                    <Drawer.Footer>
-                      <Drawer.Close>
-                        <Button.Root variant="outline" tone="neutral">
-                          Отмена
-                        </Button.Root>
-                      </Drawer.Close>
-                      <Button.Root type="submit" form={formId} loading={saving}>
-                        Добавить клиента
-                      </Button.Root>
-                    </Drawer.Footer>
-                  </Drawer.Content>
-                </Drawer.Root>
-              </PageToolbar.Actions>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root>
-        <PageContent.Body>
+                        <Radio.Root value="company">
+                          <Radio.Label>Компания</Radio.Label>
+                        </Radio.Root>
+                        <Radio.Root value="person">
+                          <Radio.Label>ИП</Radio.Label>
+                        </Radio.Root>
+                      </Radio.Group>
+                      <Input.Root label="Название" error={errors.name}>
+                        <Input.Wrapper>
+                          <Input.Field
+                            name="name"
+                            placeholder="ООО «Ромашка»"
+                            autoComplete="organization"
+                          />
+                        </Input.Wrapper>
+                      </Input.Root>
+                      <div className={styles.pair}>
+                        <Input.Root label="ИНН" error={errors.inn} reserveSupportRow>
+                          <Input.Wrapper>
+                            <Input.Field name="inn" inputMode="numeric" placeholder="7704512908" />
+                          </Input.Wrapper>
+                        </Input.Root>
+                        <Input.Root label="КПП" optional reserveSupportRow>
+                          <Input.Wrapper>
+                            <Input.Field name="kpp" inputMode="numeric" placeholder="770401001" />
+                          </Input.Wrapper>
+                        </Input.Root>
+                      </div>
+                    </Fieldset>
+                    <Fieldset label="Контакты" disabled={saving}>
+                      <Input.Root
+                        label="Почта для счетов"
+                        error={errors.email}
+                        hint="На неё уйдут счета и акты"
+                      >
+                        <Input.Wrapper>
+                          <Input.Icon side="start">
+                            <Icon name="field.email" />
+                          </Input.Icon>
+                          <Input.Field name="email" type="email" placeholder="billing@company.ru" />
+                        </Input.Wrapper>
+                      </Input.Root>
+                      <Select.Root
+                        label="Менеджер"
+                        value={manager}
+                        onValueChange={(next) => {
+                          setManager(next);
+                          setDirty(true);
+                        }}
+                      >
+                        <Select.Trigger>
+                          <Select.Value />
+                        </Select.Trigger>
+                        <Select.Content>
+                          {MANAGERS.map((name) => (
+                            <Select.Item key={name} value={name}>
+                              {name}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Root>
+                      <Textarea.Root name="note" label="Комментарий" optional rows={2} />
+                      <Checkbox.Root
+                        name="invite"
+                        defaultChecked
+                        hint="Клиент увидит свои счета и акты онлайн"
+                      >
+                        <Checkbox.Label>Пригласить в личный кабинет</Checkbox.Label>
+                      </Checkbox.Root>
+                    </Fieldset>
+                  </form>
+                </Drawer.Body>
+                <Drawer.Footer>
+                  <Drawer.Close>
+                    <Button.Root variant="outline" tone="neutral">
+                      Отмена
+                    </Button.Root>
+                  </Drawer.Close>
+                  <Button.Root type="submit" form={formId} loading={saving}>
+                    Добавить клиента
+                  </Button.Root>
+                </Drawer.Footer>
+              </Drawer.Content>
+            </Drawer.Root>
+          </Page.Actions>
+        </Page.TopBar>
+        <Page.Body>
           <DataTable
             columns={COLUMNS}
             rows={shown}
@@ -291,8 +268,8 @@ export default function DrawerScreenExample() {
             paging="none"
             empty="Клиентов не найдено"
           />
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }