prime-ui-kit 0.7.1 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/button/examples/destructive-confirm.tsx

@@ -17,16 +17,20 @@ export default function DestructiveConfirmExample() {
       <Modal.Panel
         title="Delete this project?"
         footer={
-          <>
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke">
-                Cancel
+          <Modal.Footer
+            primary={
+              <Button.Root variant="error" mode="filled" onClick={() => setOpen(false)}>
+                Delete
               </Button.Root>
-            </Modal.Close>
-            <Button.Root variant="error" mode="filled" onClick={() => setOpen(false)}>
-              Delete
-            </Button.Root>
-          </>
+            }
+            secondary={
+              <Modal.Close>
+                <Button.Root variant="neutral" mode="stroke">
+                  Cancel
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
       >
         <p style={{ margin: 0 }}>This permanently removes the project and its data.</p>

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";
@@ -57,16 +58,20 @@ 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 variant="neutral" mode="stroke">
-                Cancel
+          <Modal.Footer
+            primary={
+              <Button.Root variant="primary" type="button">
+                Send invite
               </Button.Root>
-            </Modal.Close>
-            <Button.Root 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" hint="Work email preferred">
@@ -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 |

package/src/components/modal/examples/canonical-maximal.tsx

@@ -18,16 +18,20 @@ export default function ModalCanonicalMaximalExample() {
       <Modal.Panel
         description="We will send one invitation email. The recipient can accept or decline."
         footer={
-          <>
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke">
-                Cancel
+          <Modal.Footer
+            primary={
+              <Button.Root variant="primary" type="button">
+                Send invite
               </Button.Root>
-            </Modal.Close>
-            <Button.Root variant="primary" type="button">
-              Send invite
-            </Button.Root>
-          </>
+            }
+            secondary={
+              <Modal.Close>
+                <Button.Root variant="neutral" mode="stroke">
+                  Cancel
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
         icon={<Icon name="field.email" tone="subtle" />}
         title="Invite teammate"

package/src/components/modal/examples/pattern-close-behavior.tsx

@@ -34,11 +34,15 @@ export default function ModalPatternCloseBehaviorExample() {
         <Modal.Panel
           description="With both flags false, only buttons dismiss the dialog."
           footer={
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke">
-                OK
-              </Button.Root>
-            </Modal.Close>
+            <Modal.Footer
+              primary={
+                <Modal.Close>
+                  <Button.Root variant="neutral" mode="stroke">
+                    OK
+                  </Button.Root>
+                </Modal.Close>
+              }
+            />
           }
           icon={<Icon name="status.locked" />}
           showClose={false}

package/src/components/modal/examples/pattern-controlled.tsx

@@ -22,9 +22,13 @@ export default function ModalPatternControlledExample() {
           closeAriaLabel="Close"
           description="Open and close are driven by `open` and `onOpenChange` on the root."
           footer={
-            <Modal.Close>
-              <Button.Root variant="primary">Done</Button.Root>
-            </Modal.Close>
+            <Modal.Footer
+              primary={
+                <Modal.Close>
+                  <Button.Root variant="primary">Done</Button.Root>
+                </Modal.Close>
+              }
+            />
           }
           icon={<Icon name="action.copy" />}
           title="Externally controlled"

package/src/components/modal/examples/pattern-portal-and-scroll.tsx

@@ -63,9 +63,13 @@ export default function ModalPatternPortalAndScrollExample() {
           closeAriaLabel="Close"
           description="Cap the body height with `bodyStyle` (or `bodyClassName`) so only the panel scrolls."
           footer={
-            <Modal.Close>
-              <Button.Root variant="primary">Close</Button.Root>
-            </Modal.Close>
+            <Modal.Footer
+              primary={
+                <Modal.Close>
+                  <Button.Root variant="primary">Close</Button.Root>
+                </Modal.Close>
+              }
+            />
           }
           icon={<Icon name="nav.itemDot" />}
           title="Scroll inside panel"

package/src/components/modal/examples/scenario-confirm-delete.tsx

@@ -15,16 +15,20 @@ export default function ModalConfirmDeleteExample() {
       <Modal.Panel
         description="This removes the project, its boards, and history. Connected integrations will stop receiving events."
         footer={
-          <>
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke">
-                Cancel
+          <Modal.Footer
+            primary={
+              <Button.Root variant="error" type="button">
+                Delete permanently
               </Button.Root>
-            </Modal.Close>
-            <Button.Root variant="error" type="button">
-              Delete permanently
-            </Button.Root>
-          </>
+            }
+            secondary={
+              <Modal.Close>
+                <Button.Root variant="neutral" mode="stroke">
+                  Cancel
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
         icon={<Icon name="action.close" tone="subtle" />}
         title="Delete “Northwind rollout”?"

package/src/components/modal/examples/scenario-edit-entity.tsx

@@ -19,18 +19,22 @@ export default function ModalEditEntityExample() {
       <Modal.Panel
         description="The new name appears on invoices and in the member directory."
         footer={
-          <>
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke">
-                Cancel
-              </Button.Root>
-            </Modal.Close>
-            <Modal.Close>
-              <Button.Root variant="primary" type="button">
-                Save changes
-              </Button.Root>
-            </Modal.Close>
-          </>
+          <Modal.Footer
+            primary={
+              <Modal.Close>
+                <Button.Root variant="primary" type="button">
+                  Save changes
+                </Button.Root>
+              </Modal.Close>
+            }
+            secondary={
+              <Modal.Close>
+                <Button.Root variant="neutral" mode="stroke">
+                  Cancel
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
         icon={<Icon name="nav.layoutGrid" tone="subtle" />}
         title="Edit account name"

package/src/components/modal/examples/scenario-legal-consent.tsx

@@ -15,11 +15,15 @@ export default function ModalLegalConsentExample() {
       <Modal.Panel
         description="Please read the following before continuing to use the service."
         footer={
-          <Modal.Close>
-            <Button.Root variant="primary" type="button">
-              I agree
-            </Button.Root>
-          </Modal.Close>
+          <Modal.Footer
+            primary={
+              <Modal.Close>
+                <Button.Root variant="primary" type="button">
+                  I agree
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
         icon={<Icon name="status.locked" tone="subtle" />}
         title="Terms and data processing"

package/src/components/modal/examples/scenario-multi-field-form.tsx

@@ -24,16 +24,20 @@ export default function ModalMultiFieldFormExample() {
       <Modal.Panel
         description="Include enough detail for our team to reproduce or route the issue."
         footer={
-          <>
-            <Modal.Close>
-              <Button.Root variant="neutral" mode="stroke">
-                Cancel
+          <Modal.Footer
+            primary={
+              <Button.Root variant="primary" type="submit" form="modal-ticket-form">
+                Submit ticket
               </Button.Root>
-            </Modal.Close>
-            <Button.Root variant="primary" type="submit" form="modal-ticket-form">
-              Submit ticket
-            </Button.Root>
-          </>
+            }
+            secondary={
+              <Modal.Close>
+                <Button.Root variant="neutral" mode="stroke">
+                  Cancel
+                </Button.Root>
+              </Modal.Close>
+            }
+          />
         }
         icon={<Icon name="nav.itemDot" tone="subtle" />}
         title="Contact support"