prime-ui-kit 0.16.0 → 0.18.0

package/src/layout/app-shell/examples/footer.tsx

@@ -1,5 +1,5 @@
 /** A phone app without a Sidebar: the bar in the footer stays at the bottom while main scrolls under it — `AppShell.Footer`. */
-import { AppHeader, AppShell, BottomNav, Icon, PageContent, Typography } from "prime-ui-kit";
+import { AppShell, BottomNav, Icon, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -25,21 +25,21 @@ export default function AppShellFooterExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Счета</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Счета</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               {INVOICES.map((invoice) => (
                 <Typography key={invoice} variant="body-m">
                   {invoice}
                 </Typography>
               ))}
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>

package/src/layout/app-shell/examples/overview.tsx

@@ -1,5 +1,5 @@
-/** The app frame: Sidebar in the nav column, the page title and its action in the AppHeader, the page in main; only main scrolls — `fillViewport`. */
-import { AppHeader, AppShell, Button, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
+/** The app frame: Sidebar in the nav column, the page in main with its title and action in its top bar; only main scrolls — `fillViewport`. */
+import { AppShell, Button, Icon, Page, Sidebar, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -35,30 +35,28 @@ export default function AppShellOverviewExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>
-              Обзор
-              <AppHeader.Description>Октябрь · 37 сделок в работе</AppHeader.Description>
-            </AppHeader.Title>
-          </AppHeader.Start>
-          <AppHeader.Actions>
-            <Button.Root>
-              <Button.Icon>
-                <Icon name="action.add" />
-              </Button.Icon>
-              Новая сделка
-            </Button.Root>
-          </AppHeader.Actions>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Обзор</Page.Title>
+                <Page.Description>Октябрь · 37 сделок в работе</Page.Description>
+              </Page.Heading>
+              <Page.Actions>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новая сделка
+                </Button.Root>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
               <Typography variant="body-m" tone="secondary">
                 Выручка за месяц — 4,8 млн ₽, на 12% больше, чем в сентябре.
               </Typography>
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
       </AppShell.Root>
     </div>

package/src/layout/app-shell/examples/screen.module.css

@@ -1,5 +1,5 @@
-/* App shell: the frame (Sidebar / BottomNav / AppHeader) lays itself out; this file only places the
-   home page's blocks. The rhythm comes from PageContent.Body, the tiles from PageContent.Grid. */
+/* App shell: the frame (Sidebar / BottomNav / the page's top bar) lays itself out; this file only
+   places the home page's blocks. The rhythm comes from Page.Body, the tiles from Page.Grid. */
 
 /* A list row: the text at the start, the meta (time, sum) at the end. */
 .row {

package/src/layout/app-shell/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone whose More item opens the Sidebar, the AppHeader with the menu button it draws by itself, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`, `useAppShellNav`. */
+/** The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone whose More item opens the Sidebar, the page top bar with the menu button it draws by itself, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`, `useAppShellNav`. */
 import {
-  AppHeader,
   AppShell,
   BottomNav,
   Card,
@@ -8,7 +7,7 @@ import {
   Crossfade,
   Icon,
   type IconName,
-  PageContent,
+  Page,
   Sidebar,
   Typography,
   useAppShellNav,
@@ -168,22 +167,6 @@ export default function AppShellScreenExample() {
           <Sidebar.Footer>{MORE.map(sidebarItem)}</Sidebar.Footer>
         </Sidebar.Root>
       }
-      header={
-        <AppHeader.Root>
-          {/* On a phone the header leads with the menu button that opens the Sidebar by itself. */}
-          <AppHeader.Start>
-            {/* Every page titles itself here: the only h1 and a line of data under it. */}
-            <AppHeader.Title>
-              {section.label}
-              <AppHeader.Description>
-                {current === "today"
-                  ? `Среда, 14 октября · открытых задач: ${openTasks}`
-                  : PAGES[current].description}
-              </AppHeader.Description>
-            </AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-      }
       footer={
         <BottomNav.Root floating>
           {MAIN.map((item) => (
@@ -202,23 +185,35 @@ export default function AppShellScreenExample() {
         </BottomNav.Root>
       }
     >
-      {/* Another section is another page: it cross-fades instead of flipping. */}
-      <Crossfade state={current}>
-        <PageContent.Root as="section">
-          <PageContent.Body>
+      <Page.Root>
+        {/* On a phone the bar leads with the menu button that opens the Sidebar by itself. */}
+        <Page.TopBar>
+          {/* Every page titles itself here: the only h1 and a line of data under it. */}
+          <Page.Heading>
+            <Page.Title>{section.label}</Page.Title>
+            <Page.Description>
+              {current === "today"
+                ? `Среда, 14 октября · открытых задач: ${openTasks}`
+                : PAGES[current].description}
+            </Page.Description>
+          </Page.Heading>
+        </Page.TopBar>
+        {/* Another section is another page: it cross-fades instead of flipping. */}
+        <Crossfade state={current}>
+          <Page.Body>
             {current === "today" ? (
               <>
-                <PageContent.Grid>
+                <Page.Grid>
                   {KPIS.map((kpi) => (
-                    <PageContent.Cell key={kpi.label} span={4}>
+                    <Page.Cell key={kpi.label} span={4}>
                       <Card.Root variant="stat-trend">
                         <Card.Label>{kpi.label}</Card.Label>
                         <Card.Value>{kpi.value}</Card.Value>
                         <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
                       </Card.Root>
-                    </PageContent.Cell>
+                    </Page.Cell>
                   ))}
-                </PageContent.Grid>
+                </Page.Grid>
                 <Card.Root variant="list">
                   <Card.Header>
                     <Card.Title as="h2">Задачи на сегодня</Card.Title>
@@ -260,9 +255,9 @@ export default function AppShellScreenExample() {
                 </Card.List>
               </Card.Root>
             )}
-          </PageContent.Body>
-        </PageContent.Root>
-      </Crossfade>
+          </Page.Body>
+        </Crossfade>
+      </Page.Root>
     </AppShell.Template>
   );
 }

package/src/layout/app-shell/examples/template.tsx

@@ -1,5 +1,5 @@
-/** Root, nav, header and main in one component; main scrolls back to the top whenever the page changes — `AppShell.Template`, `scrollResetKey`. */
-import { AppHeader, AppShell, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
+/** Root, nav, main and footer in one component; main scrolls back to the top whenever the page changes — `AppShell.Template`, `scrollResetKey`. */
+import { AppShell, Icon, Page, Sidebar, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -33,7 +33,7 @@ export default function AppShellTemplateExample() {
         className={styles.shell}
         scrollResetKey={pageId}
         nav={
-          <Sidebar.Root offCanvas="never">
+          <Sidebar.Root>
             <Sidebar.Content>
               {PAGES.map((item) => (
                 <Sidebar.Item
@@ -50,24 +50,20 @@ export default function AppShellTemplateExample() {
             </Sidebar.Content>
           </Sidebar.Root>
         }
-        header={
-          <AppHeader.Root>
-            <AppHeader.Start>
-              <AppHeader.Title>
-                {page.label}
-                <AppHeader.Description>{page.text}</AppHeader.Description>
-              </AppHeader.Title>
-            </AppHeader.Start>
-          </AppHeader.Root>
-        }
       >
-        <PageContent.Root as="section">
-          <PageContent.Body>
+        <Page.Root>
+          <Page.TopBar>
+            <Page.Heading>
+              <Page.Title>{page.label}</Page.Title>
+              <Page.Description>{page.text}</Page.Description>
+            </Page.Heading>
+          </Page.TopBar>
+          <Page.Body>
             <Typography variant="body-m" tone="secondary">
               {page.note}
             </Typography>
-          </PageContent.Body>
-        </PageContent.Root>
+          </Page.Body>
+        </Page.Root>
       </AppShell.Template>
     </div>
   );

package/src/layout/bottom-nav/COMPONENT.md

@@ -12,7 +12,7 @@
 ## When not to use
 - More than six destinations or nested sections → use [Sidebar](../sidebar/COMPONENT.md) (off-canvas on a phone), put the rest under «Ещё».
 - Switching views inside one page → use [Tabs](../../components/tabs/COMPONENT.md) or [SegmentedControl](../../components/segmented-control/COMPONENT.md).
-- Several actions (create, filter, export) → use [Button](../../components/button/COMPONENT.md) in the page header; the bar holds at most one main action (`BottomNav.Action`).
+- Several actions (create, filter, export) → use [Button](../../components/button/COMPONENT.md) in the page's top bar ([Page](../page/COMPONENT.md): `Page.Actions`); the bar holds at most one main action (`BottomNav.Action`).
 
 ## Import
 ```tsx
@@ -107,6 +107,7 @@ Without flags the bar is flat at the screen edge on the surface, with a faint to
 | State | Driven by | DOM |
 |---|---|---|
 | current | `current` or a router link setting `aria-current` | `aria-current="page"` on the item; flat, its glyph on a `fill-muted` pill |
+| held | a `Page.Guard` that is `busy` or `dirty` on the page | a press on an item stops before it navigates (a router link included); `dirty` asks first, then repeats it |
 | pressed | pointer down | the glyph scales to `--prime-motion-press-scale-compact` (`internal/press`), flat and floating |
 | overflow | items wider than the bar | the items scroll inside the bar with faded edges; no label is cut |
 | focus | keyboard | focus ring inside the item edge |
@@ -162,14 +163,14 @@ Motion: the color of the icon and the label and the flat pill change over `fast`
 | [floating.tsx](examples/floating.tsx) | A glass capsule over the page across the width: the client list scrolls under its blur, the selection glides to a tapped section, with labels or icons alone — `floating`, `iconOnly`. |
 | [floating-action.tsx](examples/floating-action.tsx) | A round action beside the glass capsule for the screen's main action, with labels or icons alone — `BottomNav.Action`, `floating`. |
 | [router.tsx](examples/router.tsx) | A router link as the item: the router marks the open section and the item shows it as current; render it inside a router — `asChild`. |
-| [in-app-shell.tsx](examples/in-app-shell.tsx) | The app frame on a phone: the AppHeader, the page and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. |
+| [in-app-shell.tsx](examples/in-app-shell.tsx) | The app frame on a phone: the page with its top bar and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. |
 
 ## Mistakes
 - Seven or more items → keep 2–6; the rest goes to a «Ещё» section or Sidebar.
 - Long labels («Управление заказами») → one word; a long label widens its column and the bar scrolls.
 - `iconOnly` with icons that need a caption to be understood → keep the labels.
 - A floating bar outside a positioned container → it sits at the bottom of the nearest positioned ancestor; put it in `AppShell.Footer`.
-- An action as an item («Создать» among the sections) → items navigate; put the screen's one main action in `BottomNav.Action` beside the bar, the rest in the page header.
+- An action as an item («Создать» among the sections) → items navigate; put the screen's one main action in `BottomNav.Action` beside the bar, the rest in the page's top bar.
 - `BottomNav.Action` without `aria-label` → the button has no name; it is required.
 - The bar outside `AppShell.Footer` (in Main, Root or `position: fixed` on the page) → it never leaves and shows next to the Sidebar on a desktop; put it in `AppShell.Footer` (or the Template `footer` prop).
 - Hiding the bar with your own media query → the shell already hides the footer while the Sidebar rail is on screen.

package/src/layout/bottom-nav/examples/floating-action.tsx

@@ -1,14 +1,5 @@
 /** A round action beside the glass capsule for the screen's main action, with labels or icons alone — `BottomNav.Action`, `floating`. */
-import {
-  AppHeader,
-  AppShell,
-  Avatar,
-  BottomNav,
-  Icon,
-  PageContent,
-  Switch,
-  Typography,
-} from "prime-ui-kit";
+import { AppShell, Avatar, BottomNav, Icon, Page, Switch, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -37,14 +28,14 @@ export default function BottomNavFloatingActionExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Клиенты</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Клиенты</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               <div className={styles.options}>
                 <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
                   <Switch.Label>Только иконки</Switch.Label>
@@ -63,8 +54,8 @@ export default function BottomNavFloatingActionExample() {
                   </div>
                 </div>
               ))}
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root floating iconOnly={iconOnly}>

package/src/layout/bottom-nav/examples/floating.tsx

@@ -1,14 +1,5 @@
 /** A glass capsule over the page across the width: the client list scrolls under its blur, the selection glides to a tapped section, with labels or icons alone — `floating`, `iconOnly`. */
-import {
-  AppHeader,
-  AppShell,
-  Avatar,
-  BottomNav,
-  Icon,
-  PageContent,
-  Switch,
-  Typography,
-} from "prime-ui-kit";
+import { AppShell, Avatar, BottomNav, Icon, Page, Switch, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -38,14 +29,14 @@ export default function BottomNavFloatingExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Клиенты</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Клиенты</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               <div className={styles.options}>
                 <Switch.Root checked={iconOnly} onCheckedChange={setIconOnly}>
                   <Switch.Label>Только иконки</Switch.Label>
@@ -64,8 +55,8 @@ export default function BottomNavFloatingExample() {
                   </div>
                 </div>
               ))}
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root floating iconOnly={iconOnly}>

package/src/layout/bottom-nav/examples/in-app-shell.tsx

@@ -1,13 +1,5 @@
-/** The app frame on a phone: the AppHeader, the page and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. */
-import {
-  AppHeader,
-  AppShell,
-  BottomNav,
-  Button,
-  Icon,
-  PageContent,
-  Typography,
-} from "prime-ui-kit";
+/** The app frame on a phone: the page with its top bar and the bar in the footer, which gives way to the Sidebar rail once one is on screen — `AppShell.Footer`. */
+import { AppShell, BottomNav, Button, Icon, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -24,14 +16,14 @@ export default function BottomNavInAppShellExample() {
   return (
     <div className={styles.phone}>
       <AppShell.Root fillViewport className={styles.shell}>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>Заказы</AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
         <AppShell.Main>
-          <PageContent.Root as="section">
-            <PageContent.Body>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Заказы</Page.Title>
+              </Page.Heading>
+            </Page.TopBar>
+            <Page.Body>
               {ORDERS.map((order) => (
                 <Typography key={order} variant="body-m">
                   {order}
@@ -43,8 +35,8 @@ export default function BottomNavInAppShellExample() {
                 </Button.Icon>
                 Новый заказ
               </Button.Root>
-            </PageContent.Body>
-          </PageContent.Root>
+            </Page.Body>
+          </Page.Root>
         </AppShell.Main>
         <AppShell.Footer>
           <BottomNav.Root>