prime-ui-kit 0.16.0 → 0.17.0

package/dist/skill/reference/components/crossfade/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** Screen states: the title and the date of the statement in the app header, a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states — `state`. */
+/** Screen states: the title and the date of the statement in its top bar, a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states — `state`. */
 import {
-  AppHeader,
   Banner,
   Button,
   Card,
@@ -10,7 +9,7 @@ import {
   DescriptionList,
   EmptyPage,
   Icon,
-  PageContent,
+  Page,
   Skeleton,
   Typography,
   useNotifications,
@@ -68,119 +67,115 @@ export default function CrossfadeScreenExample() {
   };
 
   return (
-    <>
-      {/* The header carries the page: the only h1 and a line of data, here the date of the last
-          statement — it moves on once the statement arrives. Main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Сверка с банком
-            <AppHeader.Description>
-              2 счёта · выписка на {status === "ready" ? "7" : "6"} октября
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-      </AppHeader.Root>
+    <Page.Root>
+      {/* A work screen titles itself in its top bar: the only h1 and a line of data, here the date of
+          the last statement — it moves on once the statement arrives. */}
 
-      <PageContent.Root>
-        <PageContent.Body>
-          {/* The page banner and the panels are one block: the banner, with the 40 below it, comes and
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Сверка с банком</Page.Title>
+          <Page.Description>
+            2 счёта · выписка на {status === "ready" ? "7" : "6"} октября
+          </Page.Description>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Body>
+        {/* The page banner and the panels are one block: the banner, with the 40 below it, comes and
             goes inside a Crossfade, so the panels glide instead of jumping. */}
-          <div className={styles.lead}>
-            <Crossfade state={status === "error" ? "error" : "ok"}>
-              {status === "error" ? (
-                <div className={styles.bannerSlot}>
-                  <Banner.Root tone="danger">
-                    <Banner.Content>
-                      <Banner.Icon>
-                        <Icon name="status.danger" />
-                      </Banner.Icon>
-                      <Banner.Title>Выписка за 7 октября не получена</Banner.Title>
-                      <Banner.Description>
-                        Т-Банк не ответил на запрос. Остатки показаны на 6 октября.
-                      </Banner.Description>
-                      <Banner.Actions>
-                        <Button.Root tone="danger" onClick={retry}>
-                          Повторить
-                        </Button.Root>
-                      </Banner.Actions>
-                    </Banner.Content>
-                  </Banner.Root>
-                </div>
-              ) : null}
-            </Crossfade>
+        <div className={styles.lead}>
+          <Crossfade state={status === "error" ? "error" : "ok"}>
+            {status === "error" ? (
+              <div className={styles.bannerSlot}>
+                <Banner.Root tone="danger">
+                  <Banner.Content>
+                    <Banner.Icon>
+                      <Icon name="status.danger" />
+                    </Banner.Icon>
+                    <Banner.Title>Выписка за 7 октября не получена</Banner.Title>
+                    <Banner.Description>
+                      Т-Банк не ответил на запрос. Остатки показаны на 6 октября.
+                    </Banner.Description>
+                    <Banner.Actions>
+                      <Button.Root tone="danger" onClick={retry}>
+                        Повторить
+                      </Button.Root>
+                    </Banner.Actions>
+                  </Banner.Content>
+                </Banner.Root>
+              </div>
+            ) : null}
+          </Crossfade>
 
-            <PageContent.Grid>
-              <PageContent.Cell span={6}>
-                <Card.Root variant="panel" aria-busy={status === "loading"}>
-                  <Card.Header>
-                    <Card.Title as="h2">Остатки</Card.Title>
-                    <Typography as="span" variant="caption" tone="muted">
-                      {status === "ready" ? "на 7 октября" : "на 6 октября"}
-                    </Typography>
-                  </Card.Header>
-                  <Card.Body>
-                    {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
-                    <Crossfade state={status === "loading" ? "loading" : "ready"}>
-                      {/* The accounts are known: only their balances wait, as bars of the value. */}
-                      <DescriptionList.Root>
-                        {ACCOUNTS.map((account) => (
-                          <DescriptionList.Item key={account.name} label={account.name}>
-                            {status === "loading" ? (
-                              <Skeleton className={styles.balanceBar} />
-                            ) : (
-                              account.balance
-                            )}
-                          </DescriptionList.Item>
-                        ))}
-                      </DescriptionList.Root>
-                    </Crossfade>
-                  </Card.Body>
-                </Card.Root>
-              </PageContent.Cell>
+          <Page.Grid>
+            <Page.Cell span={6}>
+              <Card.Root variant="panel" aria-busy={status === "loading"}>
+                <Card.Header>
+                  <Card.Title as="h2">Остатки</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    {status === "ready" ? "на 7 октября" : "на 6 октября"}
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
+                  <Crossfade state={status === "loading" ? "loading" : "ready"}>
+                    {/* The accounts are known: only their balances wait, as bars of the value. */}
+                    <DescriptionList.Root>
+                      {ACCOUNTS.map((account) => (
+                        <DescriptionList.Item key={account.name} label={account.name}>
+                          {status === "loading" ? (
+                            <Skeleton className={styles.balanceBar} />
+                          ) : (
+                            account.balance
+                          )}
+                        </DescriptionList.Item>
+                      ))}
+                    </DescriptionList.Root>
+                  </Crossfade>
+                </Card.Body>
+              </Card.Root>
+            </Page.Cell>
 
-              <PageContent.Cell span={6}>
-                <Card.Root variant="panel">
-                  <Card.Header>
-                    <Card.Title as="h2">Правила разнесения</Card.Title>
-                  </Card.Header>
-                  <Card.Body>
-                    <EmptyPage.Root size="s" aria-labelledby="rules-empty">
-                      <EmptyPage.Icon tone="accent">
-                        <Icon name="action.filter" />
-                      </EmptyPage.Icon>
-                      <EmptyPage.Title as="h3" id="rules-empty">
-                        Правил пока нет
-                      </EmptyPage.Title>
-                      <EmptyPage.Description>
-                        Правило свяжет платёж со счётом по ИНН или назначению.
-                      </EmptyPage.Description>
-                      <EmptyPage.Actions>
-                        <Button.Root variant="soft" tone="neutral">
-                          Создать правило
-                        </Button.Root>
-                      </EmptyPage.Actions>
-                    </EmptyPage.Root>
-                  </Card.Body>
-                </Card.Root>
-              </PageContent.Cell>
-            </PageContent.Grid>
-          </div>
+            <Page.Cell span={6}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">Правила разнесения</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <EmptyPage.Root size="s" aria-labelledby="rules-empty">
+                    <EmptyPage.Icon tone="accent">
+                      <Icon name="action.filter" />
+                    </EmptyPage.Icon>
+                    <EmptyPage.Title as="h3" id="rules-empty">
+                      Правил пока нет
+                    </EmptyPage.Title>
+                    <EmptyPage.Description>
+                      Правило свяжет платёж со счётом по ИНН или назначению.
+                    </EmptyPage.Description>
+                    <EmptyPage.Actions>
+                      <Button.Root variant="soft" tone="neutral">
+                        Создать правило
+                      </Button.Root>
+                    </EmptyPage.Actions>
+                  </EmptyPage.Root>
+                </Card.Body>
+              </Card.Root>
+            </Page.Cell>
+          </Page.Grid>
+        </div>
 
-          <PageContent.Section label="Неразнесённые платежи">
-            <DataTable
-              columns={COLUMNS}
-              rows={status === "ready" ? PAYMENTS : []}
-              getRowKey={(row) => row.id}
-              paging="none"
-              loading={status === "loading"}
-              loadingRows={3}
-              loadError={status === "error" ? "Платежи появятся после загрузки выписки" : undefined}
-              empty="Все платежи разнесены"
-            />
-          </PageContent.Section>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        <Page.Section label="Неразнесённые платежи">
+          <DataTable
+            columns={COLUMNS}
+            rows={status === "ready" ? PAYMENTS : []}
+            getRowKey={(row) => row.id}
+            paging="none"
+            loading={status === "loading"}
+            loadingRows={3}
+            loadError={status === "error" ? "Платежи появятся после загрузки выписки" : undefined}
+            empty="Все платежи разнесены"
+          />
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/dist/skill/reference/components/data-table/COMPONENT.md

@@ -98,7 +98,7 @@ Generic `DataTable<Row>`; `ref` → `HTMLDivElement`. A card-fill block with an
 | `stickyHeader` | `boolean` | `false` | The head sticks while the body scrolls (with `scrollHeight`); on screens lower than 480px it scrolls with the rows. |
 | `stickyFirstColumn` | `boolean` | `false` | The first visible column (with the selection and toggle columns) sticks while scrolling sideways; the start edge shadow falls from its end edge. |
 | `showHeader` | `boolean` | `true` | Render `<thead>`. |
-| `fullWidth` | `boolean` | `true` | The table spans its container; `false` sizes it by its content. |
+| `fullWidth` | `boolean` | `true` | The table spans its container; `false` sizes the table and its surface by its content (up to the container's width, then it scrolls). |
 | `rowDividers` | `boolean` | `true` | Hairlines between rows. |
 | `columnDividers` | `boolean` | `true` | Hairlines between content columns. |
 | `striped` | `boolean` | `false` | Every second row one opaque step off the table fill. |
@@ -193,7 +193,7 @@ on screen.
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | a number / a CSS length | the viewport grows with the rows up to that height, then scrolls | a table inside a card or a dashboard block | 360 with `paging="infinite"`, else none |
-| `"fill"` | the table takes the height of its flex / grid parent (or a sized block); toolbar and footer keep theirs, the rows scroll | a log or a register that takes the rest of the page (`PageContent.Root fill`), a pane | |
+| `"fill"` | the table takes the height of its flex / grid parent (or a sized block); toolbar and footer keep theirs, the rows scroll | a log or a register that takes the rest of the page (`Page.Root fill`), a pane | |
 
 ### Opening a row
 | Value | Looks like | Use when | Default |
@@ -275,7 +275,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 - The empty and error content stands in a sticky box of the visible width: a wide table centres it in the viewport, and it stays there while the table scrolls sideways.
 - A trend per row: a compact [Sparkline](../sparkline/COMPONENT.md) (`layout="compact"`) in a cell fits the row height; its pointer and keys never open the row.
 - Long data needs no slicing: past 100 rows a body in a bounded viewport (`scrollHeight`, `"fill"`, `paging="infinite"`) renders only the rows around the view; spacer rows keep the scrollbar exact, the focused row stays rendered, rows carry `aria-rowindex` and the table `aria-rowcount`. Grouped (`getRowGroup`), reorderable (`onReorder`) and `renderExpanded` bodies, and a table the page scrolls, render every row. The browser's find-in-page sees only rendered rows: give a long table a search in `toolbar`.
-- `scrollHeight="fill"` needs a parent with a height: a flex or grid column with `min-height: 0`, `PageContent.Root fill` in an `AppShell.Root fillViewport`, or a sized pane.
+- `scrollHeight="fill"` needs a parent with a height: a flex or grid column with `min-height: 0`, `Page.Root fill` in an `AppShell.Root fillViewport`, or a sized pane.
 - The sticky head stops sticking on screens lower than 480px (landscape phones), so it never takes a large share of the height.
 - Cell content: text, two-line text (title + `caption`), an Avatar with text, a Badge, or a control one tier down (`s` in an `m` table). Toolbar controls use `s` in an `m` table.
 - Column widths: `width` / `minWidth` / `maxWidth` strings; never size cells with custom CSS.
@@ -358,7 +358,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | [states.tsx](examples/states.tsx) | Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `loadError`. |
 | [controlled.tsx](examples/controlled.tsx) | Sort, page and the column choice owned by the parent (a URL or a store): a header click goes asc → desc → none, a new sort returns to page 1 — `sort`, `onSortChange`, `page`, `onPageChange`, `hiddenColumns`, `onHiddenColumnsChange`. |
 | [narrow.tsx](examples/narrow.tsx) | A 320 px support queue: columns scroll inside the table with the first one pinned, the toolbar and footer reflow and the pager turns compact — `stickyFirstColumn`, `size`. |
-| [screen.tsx](examples/screen.tsx) | A list page: the title, a line of figures, search, filters and the one primary action in the app header, a DataTable of invoices with statuses, row actions, pages and a filtered empty state — `empty`, `pageSize`, `stickyFirstColumn`. |
+| [screen.tsx](examples/screen.tsx) | A list page: the title, a line of figures, search, filters and the one primary action in its top bar, a DataTable of invoices with statuses, row actions, pages and a filtered empty state — `empty`, `pageSize`, `stickyFirstColumn`. |
 
 ## Mistakes
 - No `getRowKey` with `selectable`, expansion or sorting → selection follows positions, not records.
@@ -389,4 +389,4 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 
 ## Related
 - **Built from:** [Checkbox](../checkbox/COMPONENT.md), [Button](../button/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md) (`DataTable.ColumnsMenu`), [Pagination](../pagination/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [VisuallyHidden](../visually-hidden/COMPONENT.md) (loading status, selection announcement), [Skeleton](../skeleton/COMPONENT.md) (loading rows, in the table tier), [Dnd](../dnd/COMPONENT.md) (`onReorder`: `Dnd.Sortable as="tbody"`, `Dnd.Handle`), [Tooltip](../tooltip/COMPONENT.md) (handle hint), Icon (sort arrows, the expand chevron, the `DataTable.ColumnsMenu` trigger); `useVirtualRows` (the window of a long body)
-- **See also:** [Sparkline](../sparkline/COMPONENT.md) (`layout="compact"` in a cell), [SmartFilter](../smart-filter/COMPONENT.md), [PageToolbar](../page-toolbar/COMPONENT.md), [Gantt](../gantt/COMPONENT.md), [Kanban](../kanban/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Card](../card/COMPONENT.md)
+- **See also:** [Sparkline](../sparkline/COMPONENT.md) (`layout="compact"` in a cell), [SmartFilter](../smart-filter/COMPONENT.md), [Page](../../layout/page/COMPONENT.md) (`Page.Tools`, `Page.Chips`), [Gantt](../gantt/COMPONENT.md), [Kanban](../kanban/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Card](../card/COMPONENT.md)

package/dist/skill/reference/components/data-table/examples/examples.module.css

@@ -11,6 +11,15 @@
   min-width: 0;
 }
 
+/* A SmartFilter in the toolbar: the search and filter row over the applied filters. */
+.filterColumn {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
 .filters {
   display: flex;
   flex: 1 1 auto;

package/dist/skill/reference/components/data-table/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A list page: the title, a line of figures, search, filters and the one primary action in the app header, a DataTable of invoices with statuses, row actions, pages and a filtered empty state — `empty`, `pageSize`, `stickyFirstColumn`. */
+/** A list page: the title, a line of figures, search, filters and the one primary action in its top bar, a DataTable of invoices with statuses, row actions, pages and a filtered empty state — `empty`, `pageSize`, `stickyFirstColumn`. */
 import {
-  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -10,8 +9,7 @@ import {
   EmptyPage,
   Icon,
   matchesSmartFilter,
-  PageContent,
-  PageToolbar,
+  Page,
   SmartFilter,
   type SmartFilterField,
   type SmartFilterValue,
@@ -278,51 +276,43 @@ export default function DataTableScreenExample() {
   };
 
   return (
-    <>
-      {/* The page lives in the app header: the only h1, a line of figures under it, and the page's
-          tools — search, filters, export, the one primary action; main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Счета
-            <AppHeader.Description>{SUMMARY}</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <SmartFilter.Root
-            fields={FIELDS}
-            value={filter}
-            onValueChange={setFilter}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <PageToolbar.Root aria-label="Счета">
-              <PageToolbar.Tools>
-                <SmartFilter.Toolbar />
-              </PageToolbar.Tools>
-              <PageToolbar.Actions>
-                <Button.Root variant="soft" tone="neutral" aria-label="Экспорт в Excel">
-                  <Button.Icon>
-                    <Icon name="action.download" />
-                  </Button.Icon>
-                </Button.Root>
-                <Button.Root>
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Новый счёт
-                </Button.Root>
-              </PageToolbar.Actions>
-              <PageToolbar.Chips>
-                <SmartFilter.Chips />
-              </PageToolbar.Chips>
-            </PageToolbar.Root>
-          </SmartFilter.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root>
-        <PageContent.Body>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root>
+        {/* A work screen titles itself in its top bar: the only h1, a line of figures under it, the
+            page's search and filters, then export and the one primary action. */}
+        <Page.TopBar>
+          <Page.Heading>
+            <Page.Title>Счета</Page.Title>
+            <Page.Description>{SUMMARY}</Page.Description>
+          </Page.Heading>
+          <Page.Tools aria-label="Счета">
+            <SmartFilter.Toolbar />
+          </Page.Tools>
+          <Page.Actions>
+            <Button.Root variant="soft" tone="neutral">
+              <Button.Icon>
+                <Icon name="action.download" />
+              </Button.Icon>
+              Экспорт
+            </Button.Root>
+            <Button.Root>
+              <Button.Icon>
+                <Icon name="action.add" />
+              </Button.Icon>
+              Новый счёт
+            </Button.Root>
+          </Page.Actions>
+          <Page.Chips>
+            <SmartFilter.Chips />
+          </Page.Chips>
+        </Page.TopBar>
+        <Page.Body>
           <DataTable
             columns={COLUMNS}
             rows={rows}
@@ -348,8 +338,8 @@ export default function DataTableScreenExample() {
               </EmptyPage.Root>
             }
           />
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        </Page.Body>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/dist/skill/reference/components/data-table/examples/server.tsx

@@ -11,6 +11,8 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
+import styles from "./examples.module.css";
+
 type Stage = "new" | "talks" | "won" | "lost";
 type Deal = { id: number; client: string; manager: string; stage: Stage; amount: number };
 type DealsRequest = {
@@ -172,8 +174,10 @@ export default function DataTableServerExample() {
           search={search}
           onSearchChange={changeSearch}
         >
-          <SmartFilter.Toolbar />
-          <SmartFilter.Chips />
+          <div className={styles.filterColumn}>
+            <SmartFilter.Toolbar />
+            <SmartFilter.Chips />
+          </div>
         </SmartFilter.Root>
       }
     />

package/dist/skill/reference/components/datepicker/examples/examples.module.css

@@ -21,3 +21,9 @@
   width: calc(var(--prime-space-20) * 4);
   max-width: 100%;
 }
+
+/* inline-panel.tsx: a booking card of a page column, room for two months; narrower, one. */
+.booking {
+  width: calc(var(--prime-space-20) * 8);
+  max-width: 100%;
+}

package/dist/skill/reference/components/datepicker/examples/inline-panel.tsx

@@ -2,10 +2,12 @@
 import { Card, Datepicker, type DatepickerRange } from "prime-ui-kit";
 import * as React from "react";
 
+import styles from "./examples.module.css";
+
 export default function DatepickerInlinePanelExample() {
   const [stay, setStay] = React.useState<DatepickerRange>({ from: null, to: null });
   return (
-    <Card.Root>
+    <Card.Root className={styles.booking}>
       <Card.Body>
         <Datepicker.Panel mode="range" value={stay} onValueChange={setStay} months={2} prompt />
       </Card.Body>

package/dist/skill/reference/components/description-list/COMPONENT.md

@@ -134,7 +134,7 @@ No motion: the list is static text; a row action has the Button's own press and
 | [vertical.tsx](examples/vertical.tsx) | Labels above their values at any width, for a side panel of a record — `orientation`. |
 | [totals.tsx](examples/totals.tsx) | The totals of an invoice: every amount at the end of its row in tabular figures, the amount due a step larger — `align`. |
 | [narrow.tsx](examples/narrow.tsx) | In a 320 px card the list is narrower than 24rem: each label moves above its value and long values wrap — `DescriptionList.Item`, `label`. |
-| [screen.tsx](examples/screen.tsx) | A nested record: the path, the title with its status and due date and the record's actions by weight in the app header, a main column with the line items and their totals and a side column with the client's details and the history — `align`, `orientation`. |
+| [screen.tsx](examples/screen.tsx) | A nested record: the path, the title with its status and due date and the record's actions by weight in its top bar, a main column with the line items and their totals and a side column with the client's details and the history — `align`, `orientation`. |
 
 ## Mistakes
 - A grid of `Typography` pairs or a two-column table for record details → `DescriptionList`: the `<dl>` semantics and the stacking come with it.