prime-ui-kit 0.18.0 → 0.20.0

package/dist/skill/reference/layout/page/examples/screen.tsx

@@ -1,4 +1,4 @@
-/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `layout`, `maxWidth`. */
+/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, each section a card with its own heading, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `maxWidth`, `Card.Header`. */
 import {
   Breadcrumb,
   Button,
@@ -88,118 +88,107 @@ export default function PageScreenExample() {
         </Page.Heading>
       </Page.Header>
       <Page.Body>
-        <Page.Section
-          layout="aside"
-          label="Компания"
-          description="Попадают в счета, акты и письма клиентам."
-        >
-          <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
-            <Card.Root variant="panel">
-              <Card.Body>
-                <Fieldset disabled={saving}>
-                  <Input.Root label="Название">
+        <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
+          <Card.Root variant="panel">
+            <Card.Header>
+              <Card.Title as="h2">Компания</Card.Title>
+              <Card.Description>Попадают в счета, акты и письма клиентам.</Card.Description>
+            </Card.Header>
+            <Card.Body>
+              <Fieldset disabled={saving}>
+                <Input.Root label="Название">
+                  <Input.Wrapper>
+                    <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                  </Input.Wrapper>
+                </Input.Root>
+                <div className={styles.pair}>
+                  <Input.Root label="ИНН" error={innError} hint="10 или 12 цифр" reserveSupportRow>
                     <Input.Wrapper>
-                      <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                      <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
                     </Input.Wrapper>
                   </Input.Root>
-                  <div className={styles.pair}>
-                    <Input.Root
-                      label="ИНН"
-                      error={innError}
-                      hint="10 или 12 цифр"
-                      reserveSupportRow
-                    >
-                      <Input.Wrapper>
-                        <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
-                      </Input.Wrapper>
-                    </Input.Root>
-                    <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
-                      <Select.Trigger>
-                        <Select.Value />
-                      </Select.Trigger>
-                      <Select.Content searchable>
-                        {TIMEZONES.map((zone) => (
-                          <Select.Item key={zone.value} value={zone.value}>
-                            {zone.label}
-                          </Select.Item>
-                        ))}
-                      </Select.Content>
-                    </Select.Root>
-                  </div>
-                  <Textarea.Root
-                    name="address"
-                    label="Юридический адрес"
-                    optional
-                    rows={2}
-                    defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
-                  />
-                </Fieldset>
-              </Card.Body>
-              <Card.Footer>
-                <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
-                  Отменить изменения
-                </Button.Root>
-                <Button.Root type="submit" loading={saving}>
-                  {saved ? "Сохранено" : "Сохранить"}
-                </Button.Root>
-              </Card.Footer>
-            </Card.Root>
-          </form>
-        </Page.Section>
-
-        <Page.Section
-          layout="aside"
-          label="Уведомления"
-          description="Включаются сразу, без сохранения."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <Fieldset aria-label="Уведомления">
-                {ALERTS.map((alert) => (
-                  <Switch.Root
-                    key={alert.name}
-                    name={alert.name}
-                    defaultChecked={alert.defaultChecked}
-                    hint={alert.hint}
-                  >
-                    <Switch.Label>{alert.label}</Switch.Label>
-                  </Switch.Root>
-                ))}
+                  <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
+                    <Select.Trigger>
+                      <Select.Value />
+                    </Select.Trigger>
+                    <Select.Content searchable>
+                      {TIMEZONES.map((zone) => (
+                        <Select.Item key={zone.value} value={zone.value}>
+                          {zone.label}
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Root>
+                </div>
+                <Textarea.Root
+                  name="address"
+                  label="Юридический адрес"
+                  optional
+                  rows={2}
+                  defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
+                />
               </Fieldset>
             </Card.Body>
+            <Card.Footer>
+              <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
+                Отменить изменения
+              </Button.Root>
+              <Button.Root type="submit" loading={saving}>
+                {saved ? "Сохранено" : "Сохранить"}
+              </Button.Root>
+            </Card.Footer>
           </Card.Root>
-        </Page.Section>
+        </form>
 
-        <Page.Section
-          layout="aside"
-          label="Рабочее пространство"
-          description="Действия, которые нельзя отменить."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <div className={styles.danger}>
-                <div className={styles.dangerText}>
-                  <Typography variant="title-s">Удалить пространство</Typography>
-                  <Typography variant="body-s" tone="secondary">
-                    Счета, клиенты и история будут удалены для всех участников.
-                  </Typography>
-                </div>
-                <ConfirmDialog.Root
-                  title="Удалить «Прайм Софт»?"
-                  description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
-                  confirmLabel="Удалить пространство"
-                  onConfirm={removeWorkspace}
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title as="h2">Уведомления</Card.Title>
+            <Card.Description>Включаются сразу, без сохранения.</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <Fieldset aria-label="Уведомления">
+              {ALERTS.map((alert) => (
+                <Switch.Root
+                  key={alert.name}
+                  name={alert.name}
+                  defaultChecked={alert.defaultChecked}
+                  hint={alert.hint}
                 >
-                  <ConfirmDialog.Trigger>
-                    <Button.Root variant="outline" tone="danger">
-                      Удалить
-                    </Button.Root>
-                  </ConfirmDialog.Trigger>
-                </ConfirmDialog.Root>
+                  <Switch.Label>{alert.label}</Switch.Label>
+                </Switch.Root>
+              ))}
+            </Fieldset>
+          </Card.Body>
+        </Card.Root>
+
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title as="h2">Рабочее пространство</Card.Title>
+            <Card.Description>Действия, которые нельзя отменить.</Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <div className={styles.danger}>
+              <div className={styles.dangerText}>
+                <Typography variant="title-s">Удалить пространство</Typography>
+                <Typography variant="body-s" tone="secondary">
+                  Счета, клиенты и история будут удалены для всех участников.
+                </Typography>
               </div>
-            </Card.Body>
-          </Card.Root>
-        </Page.Section>
+              <ConfirmDialog.Root
+                title="Удалить «Прайм Софт»?"
+                description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
+                confirmLabel="Удалить пространство"
+                onConfirm={removeWorkspace}
+              >
+                <ConfirmDialog.Trigger>
+                  <Button.Root variant="outline" tone="danger">
+                    Удалить
+                  </Button.Root>
+                </ConfirmDialog.Trigger>
+              </ConfirmDialog.Root>
+            </div>
+          </Card.Body>
+        </Card.Root>
       </Page.Body>
     </Page.Root>
   );

package/dist/skill/reference/layout/page/examples/sections.tsx

@@ -1,5 +1,5 @@
-/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `Page.Section`, `label`, `description`, `Page.Actions`, `layout`. */
-import { Card, DataTable, type DataTableColumn, LinkButton, Page, Typography } from "prime-ui-kit";
+/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading — `Page.Section`, `label`, `description`, `Page.Actions`. */
+import { Card, DataTable, type DataTableColumn, LinkButton, Page } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -55,19 +55,6 @@ export default function PageSectionsExample() {
           </Page.Actions>
           <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
         </Page.Section>
-        <Page.Section
-          layout="aside"
-          label="Реквизиты в счетах"
-          description="Попадают в каждый новый счёт."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <Typography variant="body-m" tone="secondary">
-                ООО «Прайм Софт», ИНН 7701234567, р/с в Т-Банке.
-              </Typography>
-            </Card.Body>
-          </Card.Root>
-        </Page.Section>
       </Page.Body>
     </div>
   );

package/dist/skill/responsive.md

@@ -66,7 +66,7 @@ Use these as they are; never wrap them in your own breakpoints.
 | app navigation | Sidebar: on-canvas from 768px, an off-canvas panel below (`offCanvas="auto"`) opened by the menu button `Page.TopBar` draws by itself while the Sidebar is off-canvas; `BottomNav` in `AppShell.Footer` for 2–6 app sections on phones — flat or a floating glass capsule (`floating`) with an optional round `BottomNav.Action`, icons with or without labels (`iconOnly`); the shell hides it by itself while the Sidebar rail is on screen (from 768px with `offCanvas="auto"`) |
 | page top bar | `Page.TopBar` lays out its groups from their natural widths: one line while they fit, then the tools on a line of their own, then icon-only buttons, then «⋯», and the heading gives last ([below](#the-pages-top-bar--pagetopbar)). `Page.Header` in the flow: actions wrap under the title |
 | switchers | [Switchers](#switchers) never wrap or truncate: they scroll inside themselves |
-| tables | DataTable scrolls inside itself, edge shadows show hidden columns, `stickyFirstColumn`, `DataTable.ColumnsMenu` for a column chooser, the toolbar stacks below a 30rem table, sticky head off on short screens |
+| tables | DataTable scrolls inside itself, edge shadows show hidden columns, `stickyFirstColumn` and `stickyLastColumn` (row actions), a column chooser (`columnsMenu` over the row actions, else `DataTableColumnsMenu` beside the table's search), the `toolbar` lays out as `Page.Tools` — the search on a line of its own and a switcher filling its line below a 36rem table, sticky head off on short screens |
 | floating layers | Popover (opened from a Trigger), Dropdown, Select (and Datepicker, ColorPresets) never wider than the viewport − 16, 8 from the edges, flip when out of room; below 640 they open as a bottom sheet — scrim, grab handle, swipe down to close, page scroll locked; Tooltip and TagSelect stay anchored |
 | dialogs | Modal is a bottom sheet with a handle below 640 (swipe down closes it while `closeOnOutsideClick` allows); footer actions stack on phones and in a dialog narrower than 360px; `Sheet` is a bottom sheet for a short task at every width (centred at 560 on a tablet or desktop) and closes with a swipe down from its handle or header; a Drawer has no swipe — buttons, Escape and the scrim close it |
 | date picking | Datepicker shows two months and side presets only when they fit; otherwise one month and presets above |
@@ -85,9 +85,11 @@ by one plan chosen from their natural widths. As the width runs out it gives way
 in this order, and nothing ever overflows:
 
 1. **One line** — `Page.Heading`, `Page.Tools` and `Page.Actions` side by side while they fit.
-2. **Tools below** — the tools take a line of their own under the first one and fill its width: a
-   search (`SmartFilter.Toolbar`, `Input.Root`) grows first, the switchers and a period
-   (`Datepicker.Root`) share the rest and wrap when one line is not enough. Beside a search that
+2. **Tools below** — the tools take a line of their own under the first one: a search
+   (`SmartFilter.Toolbar`, `Input.Root`) takes the free room, the switchers, a period
+   (`Datepicker.Root`) and buttons keep their width at the end; under 36rem of the line the search
+   takes a line of its own and a switcher fills the next. The DataTable `toolbar` is the same tool
+   row and lays out the same way from the table's width. Beside a search that
    would get too little room the SmartFilter button shows only its icon and count, on the same row.
    The actions stay on the first line beside the heading at every width.
 3. **Icons** — every Button with an icon shows only the icon, the secondary ones first, then the
@@ -187,7 +189,7 @@ export function OrdersPage() {
   inside takes that tier.
 - A Button without an icon keeps its label at every step and leaves the bar less room before it
   folds: give each one a `Button.Icon`.
-- A SegmentedControl or a Datepicker in `Page.Tools` needs no `fullWidth`: the bar sets it.
+- A SegmentedControl or a Datepicker in `Page.Tools` or a DataTable `toolbar` needs no `fullWidth`: the tool row sets it.
 - The primary action is on screen at every width — as its icon at the narrowest; it never folds and
   never disappears.
 - Section totals go into `SegmentedControl.Count`, not into stat cards above the table.
@@ -198,14 +200,16 @@ export function OrdersPage() {
 ## Switchers
 
 - **Three width modes:** by content (`fullWidth` off), full width (`fullWidth`), full width only on
-  a line of its own (a SegmentedControl in `Page.Tools` — the bar decides).
+  a short line (a SegmentedControl in `Page.Tools` or a DataTable `toolbar` — the tool row decides).
 - Sections of a page → SegmentedControl in `Page.Tools`; panels inside a card or a section →
   Tabs (the folder look belongs to its panel).
 - Every switcher — Tabs, SegmentedControl, a horizontal ButtonGroup and BottomNav — scrolls inside
   itself when its items do not fit: never a second line, never a truncated item. Its hidden edges
   fade, a vertical mouse wheel scrolls it sideways, touch pans it, the current item is scrolled into
-  view, and the indicator moves only after a person's choice. A SegmentedControl whose items all have
-  icons collapses to icons (each named by its tooltip) before it scrolls.
+  view, and the indicator moves only after a person's choice. A SegmentedControl first tightens its
+  segments' padding, and one whose items all have icons then collapses to icons (each named by its
+  tooltip) before it scrolls. On a 320px phone two sections with counts fit a line of their own;
+  more, or long labels, scroll — keep the section a person needs first at the start.
 - Your duty as its host: give the switcher a bounded width. A flex or grid child that holds one sets
   `min-width: 0`, otherwise the switcher grows the row instead of scrolling
   ([foundation §9](reference/foundation.md#9-layout-and-responsiveness)).
@@ -223,8 +227,8 @@ export function OrdersPage() {
 
 ## Components on narrow widths — what you still decide
 
-**Tables.** Let DataTable scroll inside itself; offer a column chooser (`DataTable.ColumnsMenu` in
-`toolbar`; the key column `hideable: false`); `stickyFirstColumn` for the name. On phones a table / cards switch in `Page.Tools` is fine — silently dropping columns
+**Tables.** Let DataTable scroll inside itself; offer a column chooser (`columnsMenu` or
+`DataTableColumnsMenu`; the key column `hideable: false`); `stickyFirstColumn` for the name. On phones a table / cards switch in `Page.Tools` is fine — silently dropping columns
 by breakpoint is not. Never ask to rotate the phone.
 
 **Card grids.** [Intrinsic grids](#intrinsic-grids), never a breakpoint. Tiles of a row share one

package/dist/tokens/semantic.d.ts

@@ -22,7 +22,7 @@ export declare const semanticTokens: {
             readonly inverse: "{color.gray.925}";
             readonly scrim: "color-mix(in srgb, {color.gray.925} 44%, transparent)";
             /** Soft shade over an edge that hides scrolled content (DataTable columns). */
-            readonly edgeShadow: "color-mix(in srgb, {color.gray.925} 14%, transparent)";
+            readonly edgeShadow: "color-mix(in srgb, {color.gray.925} 8%, transparent)";
             /**
              * Translucent glass over content (floating BottomNav), always with a strong backdrop blur
              * (`--prime-glass-saturation` lifts the colors under it): dense, as the iOS tab bar — the
@@ -484,7 +484,7 @@ export declare const semanticTokens: {
      * `above`, `top`, `cover` and `front` for each part laid over the last: a hover wash or a handle
      * is `raised`; the marks over a picture (play, duration, check) are `top`; a control spread over
      * those marks is `cover`; a transfer in front of a whole tile is `front`. A component with sticky
-     * parts names them from the same steps (DataTable: first column, group row, header, corner).
+     * parts names them from the same steps (DataTable: pinned columns, group row, head, corner).
      */
     readonly z: {
         readonly below: "{zIndex.below}";

package/dist/tokens/themes/dark.d.ts

@@ -11,7 +11,7 @@ export declare const darkThemeOverrides: {
             readonly inverse: "{color.gray.100}";
             readonly scrim: "color-mix(in srgb, {color.black} 60%, transparent)";
             /** Darker than the scrim's share: a shade on a 900 surface needs more ink to read. */
-            readonly edgeShadow: "color-mix(in srgb, {color.black} 50%, transparent)";
+            readonly edgeShadow: "color-mix(in srgb, {color.black} 28%, transparent)";
             readonly glass: "color-mix(in srgb, {color.gray.875} 76%, transparent)";
             readonly glassEdge: "color-mix(in srgb, {color.white} 28%, transparent)";
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prime-ui-kit",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "packageManager": "bun@1.3.13",
   "description": "React 19 UI kit for product interfaces: 79 composable components on one design contract — forms, selects, tables, overlays, navigation, app shell. CSS Modules, --prime-* tokens, light and dark themes, TypeScript, a11y, Next.js App Router ready. Ships COMPONENT.md docs, copyable examples and an agent skill.",
   "bin": {

package/src/components/confirm-dialog/COMPONENT.md

@@ -134,5 +134,5 @@ The dialog is a Modal `s` with the floating surface, a header and a footer; ther
 - `tone="accent"` for a delete → destructive is always `danger`.
 
 ## Related
-- **Built from:** the dialog Modal stands on (`internal/overlay/ModalDialog` at `s`, the header, body and footer of `internal/overlay/DialogParts`), [ScrollContainer](../scroll-container/COMPONENT.md) (the body), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (pictures the shared icon slot recognises), [Button](../button/COMPONENT.md) (Cancel, the confirm with `loading`), [Banner](../banner/COMPONENT.md) (the failure message), `Icon` (`status.danger` in the Banner)
+- **Built from:** the dialog Modal stands on (`internal/overlay/ModalDialog` at `s`, the header, body and footer of `internal/overlay/DialogParts`), [ScrollContainer](../scroll-container/COMPONENT.md) (the body), [Avatar](../avatar/COMPONENT.md) and [Thumbnail](../thumbnail/COMPONENT.md) (pictures the shared icon slot recognises), [Skeleton](../skeleton/COMPONENT.md) (the shared description's loading line), [Button](../button/COMPONENT.md) (Cancel, the confirm with `loading`), [Banner](../banner/COMPONENT.md) (the failure message), `Icon` (`status.danger` in the Banner)
 - **See also:** [Modal](../modal/COMPONENT.md), [Drawer](../drawer/COMPONENT.md), [Notification](../notification/COMPONENT.md)