prime-ui-kit 0.6.0 → 0.7.2

package/src/components/empty-page/examples/table-region.tsx

@@ -0,0 +1,35 @@
+import { PackagePlus } from "lucide-react";
+import { Button, EmptyPage } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+/**
+ * Пустое состояние в «области таблицы»: родитель с фиксированной минимальной высотой,
+ * `layout="fill"` растягивает блок и центрирует содержимое.
+ */
+export function EmptyPageTableRegion() {
+  return (
+    <div>
+      <p className={styles.lead}>
+        Имитация тела таблицы или карточки со списком: обводка задаёт границу области данных.
+      </p>
+      <div className={styles.tableRegion}>
+        <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>
+    </div>
+  );
+}

package/src/components/file-upload/examples/full-width.tsx

@@ -26,7 +26,7 @@ export function FileUploadFullWidthExample() {
       >
         Родитель на всю колонку: зона тянется вместе с формой или панелью.
       </p>
-      <FileUpload.Root size="m" appearance="solid" />
+      <FileUpload.Root appearance="solid" />
     </div>
   );
 }

package/src/components/hint/examples/a11y-describedby.tsx

@@ -4,9 +4,7 @@ import { Hint, Label } from "prime-ui-kit";
 export default function HintA11yDescribedbyExample() {
   return (
     <>
-      <Label.Root htmlFor="hint-ex-a11y-volume" size="m">
-        Notification volume
-      </Label.Root>
+      <Label.Root htmlFor="hint-ex-a11y-volume">Notification volume</Label.Root>
       <input
         id="hint-ex-a11y-volume"
         type="range"
@@ -15,7 +13,7 @@ export default function HintA11yDescribedbyExample() {
         defaultValue={40}
         aria-describedby="hint-ex-a11y-volume-help"
       />
-      <Hint.Root id="hint-ex-a11y-volume-help" size="m" variant="default">
+      <Hint.Root id="hint-ex-a11y-volume-help" variant="default">
         Does not affect calls and alarms in the mobile app.
       </Hint.Root>
     </>

package/src/components/hint/examples/controlled-variant.tsx

@@ -13,7 +13,7 @@ export default function HintControlledVariantExample() {
       <Button.Root size="s" variant="error" mode="lighter" onClick={() => setVariant("error")}>
         Show error
       </Button.Root>
-      <Hint.Root size="m" variant={variant}>
+      <Hint.Root variant={variant}>
         {variant === "error"
           ? "Fill the field before saving the draft."
           : "You can save the draft without required fields."}

package/src/components/hint/examples/error-hint.tsx

@@ -6,15 +6,13 @@ export default function ErrorHintExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-error" size="m">
-        Tax ID
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-error" hasError>
+      <Label.Root htmlFor="hint-example-error">Tax ID</Label.Root>
+      <Input.Root id="hint-example-error" hasError>
         <Input.Wrapper>
           <Input.Field type="text" defaultValue="12" aria-describedby={hintId} />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={hintId} size="m" variant="error" role="alert">
+      <Hint.Root id={hintId} variant="error" role="alert">
         Enter 10 or 12 digits.
       </Hint.Root>
     </>

package/src/components/hint/examples/field-help.tsx

@@ -6,10 +6,8 @@ export default function FieldHelpExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-field-help" size="m">
-        Project name
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-field-help">
+      <Label.Root htmlFor="hint-example-field-help">Project name</Label.Root>
+      <Input.Root id="hint-example-field-help">
         <Input.Wrapper>
           <Input.Field
             type="text"
@@ -19,7 +17,7 @@ export default function FieldHelpExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={hintId} size="m" variant="default">
+      <Hint.Root id={hintId} variant="default">
         Visible to everyone in this workspace.
       </Hint.Root>
     </>

package/src/components/hint/examples/field-states.tsx

@@ -4,41 +4,31 @@ import { Hint, Input, Label } from "prime-ui-kit";
 export default function HintFieldStatesExample() {
   return (
     <>
-      <Label.Root htmlFor="hint-ex-st-ok" size="m">
-        Project name
-      </Label.Root>
-      <Input.Root size="m" id="hint-ex-st-ok">
+      <Label.Root htmlFor="hint-ex-st-ok">Project name</Label.Root>
+      <Input.Root id="hint-ex-st-ok">
         <Input.Wrapper>
           <Input.Field type="text" defaultValue="Alpha" />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root size="m" variant="default">
-        Visible to everyone in this workspace.
-      </Hint.Root>
+      <Hint.Root variant="default">Visible to everyone in this workspace.</Hint.Root>
 
-      <Label.Root htmlFor="hint-ex-st-err" size="m">
-        Tax ID
-      </Label.Root>
-      <Input.Root size="m" id="hint-ex-st-err" hasError>
+      <Label.Root htmlFor="hint-ex-st-err">Tax ID</Label.Root>
+      <Input.Root id="hint-ex-st-err" hasError>
         <Input.Wrapper>
           <Input.Field type="text" defaultValue="12" />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root size="m" variant="error">
-        Enter 10 or 12 digits.
-      </Hint.Root>
+      <Hint.Root variant="error">Enter 10 or 12 digits.</Hint.Root>
 
-      <Label.Root htmlFor="hint-ex-st-dis" size="m" disabled>
+      <Label.Root htmlFor="hint-ex-st-dis" disabled>
         Request limit
       </Label.Root>
-      <Input.Root size="m" id="hint-ex-st-dis">
+      <Input.Root id="hint-ex-st-dis">
         <Input.Wrapper>
           <Input.Field type="text" disabled defaultValue="read only" />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root size="m" variant="disabled">
-        Value comes from the plan and cannot be edited.
-      </Hint.Root>
+      <Hint.Root variant="disabled">Value comes from the plan and cannot be edited.</Hint.Root>
     </>
   );
 }

package/src/components/hint/examples/inline-tip-form.tsx

@@ -7,10 +7,8 @@ export default function InlineTipFormExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-form-email" size="m">
-        Billing email
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-form-email">
+      <Label.Root htmlFor="hint-example-form-email">Billing email</Label.Root>
+      <Input.Root id="hint-example-form-email">
         <Input.Wrapper>
           <Input.Field
             type="email"
@@ -19,14 +17,12 @@ export default function InlineTipFormExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={emailHintId} size="m" variant="default">
+      <Hint.Root id={emailHintId} variant="default">
         Invoices and receipts go here; not the same as your login email.
       </Hint.Root>
 
-      <Label.Root htmlFor="hint-example-form-budget" size="m">
-        Monthly budget
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-form-budget">
+      <Label.Root htmlFor="hint-example-form-budget">Monthly budget</Label.Root>
+      <Input.Root id="hint-example-form-budget">
         <Input.Wrapper>
           <Input.Field
             type="text"
@@ -36,7 +32,7 @@ export default function InlineTipFormExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={budgetHintId} size="m" variant="disabled">
+      <Hint.Root id={budgetHintId} variant="disabled">
         Optional — leave empty to use the workspace default.
       </Hint.Root>
     </>

package/src/components/hint/examples/success-confirmation.tsx

@@ -9,10 +9,8 @@ export default function SuccessConfirmationExample() {
 
   return (
     <>
-      <Label.Root htmlFor="hint-example-success" size="m">
-        API token
-      </Label.Root>
-      <Input.Root size="m" id="hint-example-success">
+      <Label.Root htmlFor="hint-example-success">API token</Label.Root>
+      <Input.Root id="hint-example-success">
         <Input.Wrapper>
           <Input.Field
             type="text"
@@ -22,7 +20,7 @@ export default function SuccessConfirmationExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Hint.Root id={hintId} size="m" variant="default">
+      <Hint.Root id={hintId} variant="default">
         Token saved. Rotate it from settings anytime.
       </Hint.Root>
     </>

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

@@ -4,15 +4,9 @@ import { Hint } from "prime-ui-kit";
 export default function HintVariantsExample() {
   return (
     <>
-      <Hint.Root size="m" variant="default">
-        Neutral helper or format guidance.
-      </Hint.Root>
-      <Hint.Root size="m" variant="error">
-        Value does not meet password policy requirements.
-      </Hint.Root>
-      <Hint.Root size="m" variant="disabled">
-        Editing is not available for the selected role.
-      </Hint.Root>
+      <Hint.Root variant="default">Neutral helper or format guidance.</Hint.Root>
+      <Hint.Root variant="error">Value does not meet password policy requirements.</Hint.Root>
+      <Hint.Root variant="disabled">Editing is not available for the selected role.</Hint.Root>
     </>
   );
 }

package/src/components/hint/examples/with-icon.tsx

@@ -3,7 +3,7 @@ import { Hint, Icon } from "prime-ui-kit";
 /** Decorative leading icon; meaning must be repeated in text (`Hint.Icon` is `aria-hidden`). */
 export default function HintWithIconExample() {
   return (
-    <Hint.Root size="m" variant="default">
+    <Hint.Root variant="default">
       <Hint.Icon>
         <Icon name="field.email" tone="subtle" />
       </Hint.Icon>

package/src/components/input/examples/affix-url-and-amount.tsx

@@ -6,14 +6,14 @@ import { Input } from "prime-ui-kit";
 export default function AffixUrlAndAmountExample() {
   return (
     <>
-      <Input.Root size="m" label="Сайт" hint="Поддомен без схемы">
+      <Input.Root label="Сайт" hint="Поддомен без схемы">
         <Input.Wrapper>
           <Input.Affix side="start">https://</Input.Affix>
           <Input.Field placeholder="поддомен" />
           <Input.Affix side="end">.example</Input.Affix>
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root size="m" label="Сумма" hint="Дробная часть через запятую">
+      <Input.Root label="Сумма" hint="Дробная часть через запятую">
         <Input.Wrapper>
           <Input.InlineAffix side="start">₽</Input.InlineAffix>
           <Input.Field placeholder="0,00" inputMode="decimal" />

package/src/components/input/examples/checkout-full-width.tsx

@@ -12,7 +12,7 @@ export default function CheckoutFullWidthExample() {
 
   return (
     <div className={styles.column}>
-      <Input.Root size="m" label="ФИО получателя" hint="Как в паспорте — для доставки">
+      <Input.Root label="ФИО получателя" hint="Как в паспорте — для доставки">
         <Input.Wrapper>
           <Input.Field
             name="fullName"
@@ -23,7 +23,7 @@ export default function CheckoutFullWidthExample() {
           />
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root size="m" label="Адрес доставки" optionalLabel="квартира, подъезд">
+      <Input.Root label="Адрес доставки" optionalLabel="квартира, подъезд">
         <Input.Wrapper>
           <Input.Field
             name="address"

package/src/components/input/examples/login-email.tsx

@@ -8,11 +8,7 @@ export default function LoginEmailExample() {
   const [email, setEmail] = React.useState("");
 
   return (
-    <Input.Root
-      size="m"
-      label="Электронная почта"
-      hint="Мы отправим код подтверждения на этот адрес"
-    >
+    <Input.Root label="Электронная почта" hint="Мы отправим код подтверждения на этот адрес">
       <Input.Wrapper>
         <Input.Icon side="start">
           <Icon name="field.email" size="s" tone="subtle" />

package/src/components/input/examples/password-with-hint.tsx

@@ -8,7 +8,7 @@ export default function PasswordWithHintExample() {
   const [password, setPassword] = React.useState("");
 
   return (
-    <Input.Root size="m" label="Пароль" hint="Не менее 8 символов, буквы и цифры">
+    <Input.Root label="Пароль" hint="Не менее 8 символов, буквы и цифры">
       <Input.Wrapper>
         <Input.Field
           type="password"

package/src/components/input/examples/search.tsx

@@ -9,7 +9,6 @@ export default function SearchExample() {
 
   return (
     <Input.Root
-      size="m"
       label="Поиск по каталогу"
       hint={query ? `Запрос: «${query}»` : "Введите название или артикул"}
     >

package/src/components/kbd/examples/composition-chord-icon.tsx

@@ -24,7 +24,7 @@ export default function KbdCompositionChordIconExample() {
         <Kbd.Root>K</Kbd.Root>
       </div>
       <div style={row}>
-        <Kbd.Root size="m">
+        <Kbd.Root>
           <Icon name="action.close" aria-hidden />
           <span>Esc</span>
         </Kbd.Root>

package/src/components/kbd/examples/toolbar-hints.tsx

@@ -19,11 +19,11 @@ export default function ToolbarHintsExample() {
   return (
     <div role="toolbar" aria-label="Formatting" style={toolbar}>
       <div style={hintCluster}>
-        <Button.Root size="m">Bold</Button.Root>
+        <Button.Root>Bold</Button.Root>
         <Kbd.Root size="s">⌘B</Kbd.Root>
       </div>
       <div style={hintCluster}>
-        <Button.Root size="m">Italic</Button.Root>
+        <Button.Root>Italic</Button.Root>
         <Kbd.Root size="s">⌘I</Kbd.Root>
       </div>
     </div>

package/src/components/label/examples/with-icon.tsx

@@ -4,7 +4,7 @@ import { Icon, Label } from "prime-ui-kit";
 export function WithIconExample() {
   return (
     <>
-      <Label.Root size="m" htmlFor="example-label-icon-upload">
+      <Label.Root htmlFor="example-label-icon-upload">
         <Label.Icon>
           <Icon aria-hidden name="action.upload" />
         </Label.Icon>

package/src/components/link-button/COMPONENT.md

@@ -9,7 +9,7 @@ Text-style **navigation** control: **`LinkButton.Root`** only — control typogr
 ```tsx
 import { LinkButton } from "prime-ui-kit";
 
-<LinkButton.Root href="/settings" size="m">
+<LinkButton.Root href="/settings">
   Settings
 </LinkButton.Root>
 ```

package/src/components/link-button/examples/composition.tsx

@@ -11,15 +11,15 @@ export default function LinkButtonCompositionExample() {
 
   return (
     <div style={rowStyle}>
-      <LinkButton.Root href="#" size="m">
+      <LinkButton.Root href="#">
         <Icon name="field.email" size="s" />
         Link with icon on the left
       </LinkButton.Root>
-      <LinkButton.Root href="#" size="m">
+      <LinkButton.Root href="#">
         Icon on the right
         <Icon name="action.close" size="s" />
       </LinkButton.Root>
-      <LinkButton.Root href="#" size="m" aria-label="Open profile">
+      <LinkButton.Root href="#" aria-label="Open profile">
         <Icon name="field.email" size="s" />
       </LinkButton.Root>
     </div>

package/src/components/link-button/examples/disabled.tsx

@@ -8,10 +8,8 @@ import { LinkButton } from "prime-ui-kit";
 export default function LinkButtonDisabledExample() {
   return (
     <div>
-      <LinkButton.Root href="/available" size="m">
-        Available route
-      </LinkButton.Root>
-      <LinkButton.Root href="/ignored-when-disabled" size="m" disabled>
+      <LinkButton.Root href="/available">Available route</LinkButton.Root>
+      <LinkButton.Root href="/ignored-when-disabled" disabled>
         Coming soon
       </LinkButton.Root>
     </div>

package/src/components/link-button/examples/external.tsx

@@ -5,12 +5,7 @@ export default function LinkButtonExternalExample() {
   return (
     <p>
       Documentation in a separate tab:{" "}
-      <LinkButton.Root
-        href="https://example.com/docs"
-        target="_blank"
-        rel="noopener noreferrer"
-        size="m"
-      >
+      <LinkButton.Root href="https://example.com/docs" target="_blank" rel="noopener noreferrer">
         Open help
       </LinkButton.Root>
     </p>

package/src/components/link-button/examples/inline-text-link.tsx

@@ -5,10 +5,8 @@ export default function LinkButtonInlineTextLinkExample() {
   return (
     <p>
       Need more detail? See{" "}
-      <LinkButton.Root href="/docs/billing" size="m">
-        billing documentation
-      </LinkButton.Root>{" "}
-      for proration rules.
+      <LinkButton.Root href="/docs/billing">billing documentation</LinkButton.Root> for proration
+      rules.
     </p>
   );
 }

package/src/components/link-button/examples/navigation-cluster.tsx

@@ -4,21 +4,13 @@ import { LinkButton } from "prime-ui-kit";
 export default function LinkButtonNavigationClusterExample() {
   return (
     <nav aria-label="Product sections">
-      <LinkButton.Root href="/product/overview" size="m">
-        Overview
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/overview">Overview</LinkButton.Root>
       <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/pricing" size="m">
-        Pricing
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/pricing">Pricing</LinkButton.Root>
       <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/security" size="m">
-        Security
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/security">Security</LinkButton.Root>
       <span aria-hidden> · </span>
-      <LinkButton.Root href="/product/changelog" size="m">
-        Changelog
-      </LinkButton.Root>
+      <LinkButton.Root href="/product/changelog">Changelog</LinkButton.Root>
     </nav>
   );
 }

package/src/components/modal/COMPONENT.md

@@ -12,10 +12,11 @@ Centered overlay dialog with a portal, backdrop, focus trap, scroll lock, and op
 
 ## Composition
 
-- **`Modal.Root`** — holds open state (controlled via **`open`** / **`onOpenChange`** or uncontrolled via **`defaultOpen`**), and options **`closeOnEscape`** / **`closeOnOverlayClick`**. Renders **`children`** only (no DOM wrapper).
+- **`Modal.Root`** — holds open state (controlled via **`open`** / **`onOpenChange`** or uncontrolled via **`defaultOpen`**), and options **`closeOnEscape`** / **`closeOnOverlayClick`**, **`confirmOnEnter`** / **`onEnterConfirm`** (подтверждение по Enter). Renders **`children`** only (no DOM wrapper).
 - **`Modal.Trigger`** — optional; **`React.Children.only`**: pass **exactly one** React element; its **`onClick`** is merged to call **`onOpen`** when the event is not **`defaultPrevented`**.
 - **`Modal.Panel`** — when open: **`createPortal`** (default container `document.body`), fullscreen **`role="presentation"`** overlay, then **`role="dialog"`** with **`aria-modal="true"`**. If **`title`** is set, renders an internal header (**`h2`**, optional description, optional built-in close icon button), wraps **`children`** in an internal body, and optional **`footer`**. Without **`title`**, **`children`** render directly inside the dialog surface—supply **`aria-label`** or **`aria-labelledby`** (and **`aria-describedby`** when needed).
-- **`Modal.Close`** — same single-child contract as **`Trigger`**; merges **`onClick`** to **`onClose`** when not **`defaultPrevented`**. Typical placement: a control inside **`footer`** (for example **Cancel** or **Save** when saving should dismiss the dialog).
+- **`Modal.Close`** — same single-child contract as **`Trigger`**; merges **`onClick`** and **`ref`** to the child so **`Modal.Footer`** **`primary`** can register the DOM node for Enter. Typical placement: a control inside **`Modal.Footer`** (for example **Cancel** or **Save** when saving should dismiss the dialog).
+- **`Modal.Footer`** — **`footer`** prop on **`Modal.Panel`**: предпочтительно **`Modal.Footer`** со слотами **`secondary`** (отмена, слева/раньше в разметке), **`extra`** (дополнительные кнопки между отменой и подтверждением), **`primary`** (основное действие и цель **Enter** при **`confirmOnEnter`**). Порядок в DOM: **`secondary` → `extra` → `primary`** (в LTR с **`justify-content: flex-end`** основная кнопка справа). **`primary`** — один **`React.ReactElement`** (например **`Button.Root`** или **`Modal.Close`** с кнопкой). Произвольная разметка без **`Modal.Footer`** — допустима как **`footer`**, но подтверждение по Enter к целевой кнопке не привязывается.
 - **Order:** **`Modal.Root`** → **`Modal.Trigger`** (if any) and **`Modal.Panel`** as siblings (or only **`Modal.Panel`** in controlled flows).
 
 ### Minimal example
@@ -39,7 +40,7 @@ export function Example() {
 
 ### Canonical example (full shell)
 
-Use this when you want the complete header row (**`title`**, **`description`**, **`icon`**), a form field in the body, and a **`footer`** where at least one control is wrapped in **`Modal.Close`** (here: **Cancel**). The header still shows the built-in icon close button by default (`showClose`).
+Use this when you want the complete header row (**`title`**, **`description`**, **`icon`**), a form field in the body, and a **`Modal.Footer`** with **`secondary`** (**Cancel** via **`Modal.Close`**) and **`primary`**. The header still shows the built-in icon close button by default (`showClose`).
 
 ```tsx
 import { Button, Icon, Input, Modal } from "prime-ui-kit";
@@ -48,7 +49,7 @@ export function InviteTeammateModal() {
   return (
     <Modal.Root>
       <Modal.Trigger>
-        <Button.Root size="m" variant="neutral" mode="stroke">
+        <Button.Root variant="neutral" mode="stroke">
           Open workspace invite
         </Button.Root>
       </Modal.Trigger>
@@ -57,19 +58,23 @@ export function InviteTeammateModal() {
         description="We will send one invitation email. The recipient can accept or decline."
         icon={<Icon name="field.email" tone="subtle" />}
         footer={
-          <>
-            <Modal.Close>
-              <Button.Root size="m" variant="neutral" mode="stroke">
-                Cancel
+          <Modal.Footer
+            primary={
+              <Button.Root variant="primary" type="button">
+                Send invite
               </Button.Root>
-            </Modal.Close>
-            <Button.Root size="m" variant="primary" type="button">
-              Send invite
-            </Button.Root>
-          </>
+            }
+            secondary={
+              <Modal.Close>
+                <Button.Root variant="neutral" mode="stroke">
+                  Cancel
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
       >
-        <Input.Root label="Email address" size="m" hint="Work email preferred">
+        <Input.Root label="Email address" hint="Work email preferred">
           <Input.Wrapper>
             <Input.Field autoComplete="email" placeholder="name@company.com" type="email" />
           </Input.Wrapper>
@@ -116,11 +121,12 @@ Runnable examples use `@/` in the workspace; published consumers import **`prime
 - **Dismiss on primary action:** wrap the confirming button in **`Modal.Close`** when the action should close the dialog immediately (see **edit entity** example). If you must await an API call, keep the dialog open until success, then call **`onOpenChange(false)`** from the parent.
 - **Consent / wizard steps:** set **`closeOnOverlayClick={false}`** (and optionally **`closeOnEscape={false}`**) when accidental dismiss would lose legal or multi-step state; still provide an explicit **`Modal.Close`** (or header close) path where appropriate.
 - **Long body content:** constrain scroll to the body via **`bodyStyle`** / **`bodyClassName`** (see `playground/snippets/modal/features.tsx`); overlay scroll lock remains active.
+- **Enter to confirm:** при **`confirmOnEnter={true}`** (по умолчанию) **Enter** внутри диалога имитирует **`click()`** по элементу из слота **`Modal.Footer`** **`primary`** (логика в **`useModalKeyboard`** вместе с Escape). В шапке (**`header`**) нативное поведение **Enter** на кнопке закрытия сохраняется; в **`textarea`** / **`select`** и ряде типов **`input`** подтверждение по Enter не срабатывает. Полностью своё поведение — **`onEnterConfirm`** на **`Modal.Root`**; отключить — **`confirmOnEnter={false}`**.
 - **Headless dialog surface:** omit **`title`** on **`Modal.Panel`** and supply **`aria-label`** or **`aria-labelledby`** / **`aria-describedby`** yourself; inner body wrapper is not used, so **`bodyClassName`** / **`bodyStyle`** do not apply.
 
 ### Note for LLMs
 
-When generating **Modal** markup for this library: (1) **`Modal.Trigger`** and **`Modal.Close`** each require **exactly one** child element—no fragments or multiple nodes. (2) Prefer **`Modal.Panel`** with **`title`** (and usually **`description`**) so **`aria-labelledby`** / **`aria-describedby`** are wired automatically. (3) Put **Cancel** / **Dismiss** in **`footer`** inside **`Modal.Close`** unless the design relies only on the header icon. (4) Do not wrap kit components to restyle them; use **`size`**, **`variant`**, **`mode`**, and documented props only. (5) For copy-paste starting points, mirror **`examples/canonical-maximal.tsx`** first, then **`examples/pattern-*`** or scenario files; playground **`playground/snippets/modal/*.tsx`** are the live-demo source of truth.
+When generating **Modal** markup for this library: (1) **`Modal.Trigger`** and **`Modal.Close`** each require **exactly one** child element—no fragments or multiple nodes. (2) Prefer **`Modal.Panel`** with **`title`** (and usually **`description`**) so **`aria-labelledby`** / **`aria-describedby`** are wired automatically. (3) Use **`Modal.Footer`** with **`secondary`** (**`Modal.Close`** + cancel) and **`primary`** (main action) unless the design relies only on the header icon. (4) Do not wrap kit components to restyle them; use **`size`**, **`variant`**, **`mode`**, and documented props only. (5) For copy-paste starting points, mirror **`examples/canonical-maximal.tsx`** first, then **`examples/pattern-*`** or scenario files; playground **`playground/snippets/modal/*.tsx`** are the live-demo source of truth.
 
 ## Rules
 
@@ -133,7 +139,7 @@ When generating **Modal** markup for this library: (1) **`Modal.Trigger`** and *
 - **Focus:** focus is trapped inside the dialog while open; initial focus follows browser / trap behavior—ensure a focusable control or manage focus if the first paint is static text only.
 - **`showClose`** (default **`true`** when a header is shown) controls the header icon button; **`closeAriaLabel`** defaults to **`"Close"`**.
 - **`container`** on **`Modal.Panel`** overrides the portal target (for tests or custom stacking); default is **`document.body`**.
-- **`overlayClassName`**, **`footerClassName`**, **`bodyClassName`**, and **`bodyStyle`** target the overlay, **`<footer>`**, and body wrapper respectively; without **`title`**, **`bodyClassName`** / **`bodyStyle`** do not apply (no inner body wrapper).
+- **`overlayClassName`**, **`footerClassName`**, **`bodyClassName`**, and **`bodyStyle`** target the overlay, the **`footer`** element (merged into **`Modal.Footer`** when **`footer`** is **`Modal.Footer`**, else a wrapper **`<footer>`** for arbitrary content), and body wrapper respectively; without **`title`**, **`bodyClassName`** / **`bodyStyle`** do not apply (no inner body wrapper).
 
 ## API
 
@@ -146,6 +152,8 @@ When generating **Modal** markup for this library: (1) **`Modal.Trigger`** and *
 | onOpenChange | `(open: boolean) => void` | — | No | Fires when open state changes |
 | closeOnEscape | `boolean` | `true` | No | Whether Escape closes the dialog |
 | closeOnOverlayClick | `boolean` | `true` | No | Whether a direct backdrop click closes |
+| confirmOnEnter | `boolean` | `true` | No | Whether Enter triggers the default confirmation action (primary button) |
+| onEnterConfirm | `(event: KeyboardEvent) => void` | — | No | Replaces default Enter confirmation; call `event.preventDefault()` if needed to suppress native control behavior |
 | children | `React.ReactNode` | — | No | e.g. `Modal.Trigger` and `Modal.Panel` |
 
 ### Modal.Trigger
@@ -158,7 +166,17 @@ When generating **Modal** markup for this library: (1) **`Modal.Trigger`** and *
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
-| children | `React.ReactElement<{ onClick?: React.MouseEventHandler; className?: string; size?: "s" \| "m" \| "l" \| "xl" }>` | — | Yes | Single element whose `onClick` is composed with close |
+| children | `React.ReactElement<{ onClick?: React.MouseEventHandler; ref?: React.Ref<HTMLElement>; className?: string; size?: "s" \| "m" \| "l" \| "xl" }>` | — | Yes | Single element whose `onClick` and `ref` are composed with close |
+
+### Modal.Footer
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| primary | `React.ReactElement` (e.g. `Button.Root`) | — | No | Main action; target for Enter when `confirmOnEnter` and no `onEnterConfirm` |
+| secondary | `React.ReactNode` | — | No | Usually cancel / `Modal.Close` |
+| extra | `React.ReactNode` | — | No | Additional buttons between `secondary` and `primary` |
+| className | `string` | — | No | Class on the `<footer>` |
+| …rest | `Omit<React.HTMLAttributes<HTMLElement>, "children">` | — | No | Other attributes on `<footer>` |
 
 ### Modal.Panel
 
@@ -170,10 +188,10 @@ When generating **Modal** markup for this library: (1) **`Modal.Trigger`** and *
 | showClose | `boolean` | `true` | No | Header close icon button when `title` is set |
 | closeAriaLabel | `string` | `"Close"` | No | `aria-label` for the header close control |
 | children | `React.ReactNode` | — | No | Main content; wrapped in internal body when `title` is set |
-| footer | `React.ReactNode` | — | No | Rendered in an internal `footer` |
+| footer | `React.ReactNode` | — | No | Prefer **`Modal.Footer`**; arbitrary nodes are wrapped in **`<footer>`** without Enter binding |
 | container | `HTMLElement \| null` | `document.body` | No | Portal mount node |
 | overlayClassName | `string` | — | No | Class on the fullscreen backdrop |
-| footerClassName | `string` | — | No | Class on the `footer` element |
+| footerClassName | `string` | — | No | Merged into **`Modal.Footer`** `className` when **`footer`** is **`Modal.Footer`**; else on wrapper **`<footer>`** |
 | bodyClassName | `string` | — | No | Class on the internal body when `title` is set |
 | bodyStyle | `React.CSSProperties` | — | No | Inline style on the internal body when `title` is set |
 | aria-label | `string` | — | No | Dialog name when there is no `title`-driven label |