prime-ui-kit 0.16.0 → 0.17.0

package/src/{components/page-content → layout/page}/examples/list-detail.tsx

@@ -1,5 +1,5 @@
-/** A ticket queue as list + detail on a full-height page: side by side on a wide panel, one pane at a time with a back button on a narrow one; the chosen ticket cross-fades in — `PageContent.Split`, `PageContent.Panel`, `PageContent.BackButton`, `fill`. */
-import { Card, Crossfade, List, PageContent, ScrollContainer, Typography } from "prime-ui-kit";
+/** A ticket queue as list + detail on a full-height page: side by side on a wide panel, one pane at a time with a back button on a narrow one; the chosen ticket cross-fades in — `Page.Split`, `Page.List`, `Page.Detail`, `Page.BackButton`, `fill`. */
+import { Card, Crossfade, List, Page, ScrollContainer, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -35,7 +35,7 @@ const TICKETS: Ticket[] = [
   },
 ];
 
-export default function PageContentListDetailExample() {
+export default function PageListDetailExample() {
   const [ticketId, setTicketId] = React.useState<string | null>(null);
   // The last opened ticket stays in the detail while the narrow split goes back to the list.
   const [shown, setShown] = React.useState<Ticket | null>(null);
@@ -47,15 +47,15 @@ export default function PageContentListDetailExample() {
 
   return (
     <div className={styles.fillMain}>
-      <PageContent.Root fill>
-        <PageContent.Body>
-          <PageContent.Split
+      <Page.Root fill>
+        <Page.Body>
+          <Page.Split
             open={ticketId !== null}
             onOpenChange={(next) => {
               if (!next) setTicketId(null);
             }}
           >
-            <PageContent.Panel kind="list" aria-label="Обращения">
+            <Page.List aria-label="Обращения">
               <Card.Root className={styles.paneCard}>
                 <ScrollContainer className={styles.pane}>
                   <List.Root className={styles.tickets}>
@@ -75,12 +75,12 @@ export default function PageContentListDetailExample() {
                   </List.Root>
                 </ScrollContainer>
               </Card.Root>
-            </PageContent.Panel>
+            </Page.List>
 
-            <PageContent.Panel kind="detail" aria-label="Обращение">
+            <Page.Detail aria-label="Обращение">
               <Card.Root className={styles.paneCard}>
                 <div className={styles.threadHeader}>
-                  <PageContent.BackButton />
+                  <Page.BackButton />
                   <Typography as="h2" variant="title-s">
                     {shown ? `${shown.id} · ${shown.subject}` : "Выберите обращение"}
                   </Typography>
@@ -103,10 +103,10 @@ export default function PageContentListDetailExample() {
                   </Crossfade>
                 </ScrollContainer>
               </Card.Root>
-            </PageContent.Panel>
-          </PageContent.Split>
-        </PageContent.Body>
-      </PageContent.Root>
+            </Page.Detail>
+          </Page.Split>
+        </Page.Body>
+      </Page.Root>
     </div>
   );
 }

package/src/layout/page/examples/narrow.tsx

@@ -0,0 +1,75 @@
+/** On a phone the top bar leads with the menu button that opens the navigation by itself, the primary button gives way to its icon and the secondary ones fold into «⋯» — `offCanvas`, `Page.Actions`. */
+import { AppShell, Button, Icon, Page, Sidebar, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const ORDERS = [
+  "№ 4821 · ООО «Север» · 84 000 ₽",
+  "№ 4820 · ИП Котов · 12 500 ₽",
+  "№ 4819 · ООО «Вектор» · 230 000 ₽",
+];
+
+export default function PageNarrowExample() {
+  return (
+    <div className={`${styles.window} ${styles.phone}`}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          {/* `always`: this window is phone-wide on any screen; in an app keep the default `auto`. */}
+          <Sidebar.Root offCanvas="always">
+            <Sidebar.Content>
+              <Sidebar.Item href="#overview">
+                <Sidebar.ItemIcon>
+                  <Icon name="nav.home" />
+                </Sidebar.ItemIcon>
+                Обзор
+              </Sidebar.Item>
+              <Sidebar.Item href="#orders" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.package" />
+                </Sidebar.ItemIcon>
+                Заказы
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Заказы покупателей</Page.Title>
+                <Page.Description>128 в работе · 6 ждут оплаты · 2 возврата</Page.Description>
+              </Page.Heading>
+              <Page.Actions>
+                <Button.Root variant="soft" tone="neutral">
+                  <Button.Icon>
+                    <Icon name="action.download" />
+                  </Button.Icon>
+                  Экспорт
+                </Button.Root>
+                <Button.Root variant="soft" tone="neutral">
+                  <Button.Icon>
+                    <Icon name="action.refresh" />
+                  </Button.Icon>
+                  Обновить
+                </Button.Root>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новый заказ
+                </Button.Root>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
+              {ORDERS.map((order) => (
+                <Typography key={order} variant="body-m">
+                  {order}
+                </Typography>
+              ))}
+            </Page.Body>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
+    </div>
+  );
+}

package/src/layout/page/examples/overview.tsx

@@ -0,0 +1,57 @@
+/** A work page in an app window: the top bar with the title, its line of data and the page's buttons, the body under it — `Page.TopBar`, `Page.Heading`, `Page.Actions`. */
+import { AppShell, Button, Card, Icon, Page, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const ORDERS = [
+  { id: "№ 4821", client: "ООО «Север»", sum: "84 000 ₽" },
+  { id: "№ 4820", client: "ИП Котов", sum: "12 500 ₽" },
+  { id: "№ 4819", client: "ООО «Вектор»", sum: "230 000 ₽" },
+  { id: "№ 4818", client: "АО «Техностиль»", sum: "47 900 ₽" },
+];
+
+export default function PageOverviewExample() {
+  return (
+    <div className={styles.window}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Заказы</Page.Title>
+                <Page.Description>128 в работе · 6 ждут оплаты</Page.Description>
+              </Page.Heading>
+              <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.TopBar>
+            <Page.Body>
+              <Card.Root variant="list">
+                <Card.List>
+                  {ORDERS.map((order) => (
+                    <Card.ListItem key={order.id}>
+                      <Typography as="span" variant="body-m">
+                        {order.id} · {order.client} · {order.sum}
+                      </Typography>
+                    </Card.ListItem>
+                  ))}
+                </Card.List>
+              </Card.Root>
+            </Page.Body>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
+    </div>
+  );
+}

package/src/{components/page-content → layout/page}/examples/screen.module.css

@@ -1,4 +1,4 @@
-/* Settings page: each section is a PageContent.Section layout="aside"; here only the panels' insides. */
+/* Settings page: each section is a Page.Section layout="aside"; here only the panels' insides. */
 
 /* Field → field 20. */
 

package/{dist/skill/reference/components/page-content → src/layout/page}/examples/screen.tsx

@@ -1,11 +1,12 @@
-/** A settings page: 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 — `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, 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`. */
 import {
+  Breadcrumb,
   Button,
   Card,
   ConfirmDialog,
   Fieldset,
   Input,
-  PageContent,
+  Page,
   Select,
   Switch,
   Textarea,
@@ -45,7 +46,7 @@ const ALERTS = [
   },
 ];
 
-export default function PageContentScreenExample() {
+export default function PageScreenExample() {
   const [innError, setInnError] = React.useState<string>();
   const [saving, setSaving] = React.useState(false);
   const [saved, setSaved] = React.useState(false);
@@ -70,15 +71,24 @@ export default function PageContentScreenExample() {
   const removeWorkspace = () => new Promise<void>((resolve) => window.setTimeout(resolve, 1200));
 
   return (
-    <PageContent.Root maxWidth="wide" aria-labelledby="settings-title">
-      <PageContent.Header>
-        <PageContent.Title id="settings-title">Настройки</PageContent.Title>
-        <PageContent.Description>
-          Реквизиты компании, уведомления и управление рабочим пространством.
-        </PageContent.Description>
-      </PageContent.Header>
-      <PageContent.Body>
-        <PageContent.Section
+    <Page.Root maxWidth="wide">
+      <Page.TopBar collapse>
+        <Page.Heading>
+          <Breadcrumb.Root>
+            <Breadcrumb.Item href="#workspace">Прайм Софт</Breadcrumb.Item>
+          </Breadcrumb.Root>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title>Настройки</Page.Title>
+          <Page.Description>
+            Реквизиты компании, уведомления и управление рабочим пространством.
+          </Page.Description>
+        </Page.Heading>
+      </Page.Header>
+      <Page.Body>
+        <Page.Section
           layout="aside"
           label="Компания"
           description="Попадают в счета, акты и письма клиентам."
@@ -135,9 +145,9 @@ export default function PageContentScreenExample() {
               </Card.Footer>
             </Card.Root>
           </form>
-        </PageContent.Section>
+        </Page.Section>
 
-        <PageContent.Section
+        <Page.Section
           layout="aside"
           label="Уведомления"
           description="Включаются сразу, без сохранения."
@@ -158,9 +168,9 @@ export default function PageContentScreenExample() {
               </Fieldset>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
+        </Page.Section>
 
-        <PageContent.Section
+        <Page.Section
           layout="aside"
           label="Рабочее пространство"
           description="Действия, которые нельзя отменить."
@@ -189,8 +199,8 @@ export default function PageContentScreenExample() {
               </div>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
-      </PageContent.Body>
-    </PageContent.Root>
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/src/{components/page-content → layout/page}/examples/sections.tsx

@@ -1,12 +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 — `PageContent.Section`, `label`, `description`, `PageContent.Actions`, `layout`. */
-import {
-  Card,
-  DataTable,
-  type DataTableColumn,
-  LinkButton,
-  PageContent,
-  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, 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";
 
 import styles from "./examples.module.css";
 
@@ -36,33 +29,33 @@ const COLUMNS: DataTableColumn<Invoice>[] = [
   },
 ];
 
-export default function PageContentSectionsExample() {
+export default function PageSectionsExample() {
   return (
     <div className={styles.main}>
-      <PageContent.Body>
-        <PageContent.Grid>
-          <PageContent.Cell span={6}>
+      <Page.Body>
+        <Page.Grid>
+          <Page.Cell span={6}>
             <Card.Root variant="stat-trend">
               <Card.Label>Выставлено</Card.Label>
               <Card.Value>2,4 млн ₽</Card.Value>
               <Card.Delta tone="success">+9% к сентябрю</Card.Delta>
             </Card.Root>
-          </PageContent.Cell>
-          <PageContent.Cell span={6}>
+          </Page.Cell>
+          <Page.Cell span={6}>
             <Card.Root variant="stat-trend">
               <Card.Label>Оплачено</Card.Label>
               <Card.Value>1,9 млн ₽</Card.Value>
               <Card.Delta tone="neutral">79% выставленного</Card.Delta>
             </Card.Root>
-          </PageContent.Cell>
-        </PageContent.Grid>
-        <PageContent.Section label="Последние счета" description="Три последних за октябрь">
-          <PageContent.Actions>
+          </Page.Cell>
+        </Page.Grid>
+        <Page.Section label="Последние счета" description="Три последних за октябрь">
+          <Page.Actions>
             <LinkButton href="#invoices">Все счета</LinkButton>
-          </PageContent.Actions>
+          </Page.Actions>
           <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
-        </PageContent.Section>
-        <PageContent.Section
+        </Page.Section>
+        <Page.Section
           layout="aside"
           label="Реквизиты в счетах"
           description="Попадают в каждый новый счёт."
@@ -74,8 +67,8 @@ export default function PageContentSectionsExample() {
               </Typography>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
-      </PageContent.Body>
+        </Page.Section>
+      </Page.Body>
     </div>
   );
 }

package/src/layout/page/examples/structure.tsx

@@ -0,0 +1,41 @@
+/** A document page in the flow: the path over the large title, its line of data and the page's buttons beside them, then the body with a section — `Page.Header`, `Page.Heading`, `Page.Description`, `Page.Section`. */
+import { Breadcrumb, Button, Card, Page, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function PageStructureExample() {
+  return (
+    <div className={styles.main}>
+      <Page.Root>
+        <Page.Header>
+          <Page.Heading>
+            <Breadcrumb.Root>
+              <Breadcrumb.Item href="#settings">Настройки</Breadcrumb.Item>
+            </Breadcrumb.Root>
+            <Page.Title>Уведомления</Page.Title>
+            <Page.Description>
+              Письма и сообщения, которые получает команда продаж.
+            </Page.Description>
+          </Page.Heading>
+          <Page.Actions>
+            <Button.Root variant="soft" tone="neutral">
+              Сбросить
+            </Button.Root>
+            <Button.Root>Сохранить</Button.Root>
+          </Page.Actions>
+        </Page.Header>
+        <Page.Body>
+          <Page.Section label="Новые заказы" description="Сразу после оформления.">
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Typography variant="body-m" tone="secondary">
+                  Письмо ответственному менеджеру и сводка в канал отдела продаж.
+                </Typography>
+              </Card.Body>
+            </Card.Root>
+          </Page.Section>
+        </Page.Body>
+      </Page.Root>
+    </div>
+  );
+}

package/src/{components/page-toolbar/examples/narrow.tsx → layout/page/examples/tools.tsx}

@@ -1,8 +1,8 @@
-/** A phone-width column: search and filter on top, the primary action on its own row under them, then the active filters, the sections and the period, every row 12 apart — `PageToolbar.Root`. */
+/** The orders page's tools in its top bar: sections with counts, search and filter, the period, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. */
 import {
   Button,
   Icon,
-  PageToolbar,
+  Page,
   SegmentedControl,
   Select,
   SmartFilter,
@@ -11,17 +11,17 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 const SECTIONS = [
   { value: "all", label: "Все", count: 128 },
   { value: "active", label: "В работе", count: 12 },
   { value: "done", label: "Доставлены", count: 96 },
+  { value: "cancelled", label: "Отменены", count: 20 },
 ];
 
 const PERIODS = [
   { value: "7d", label: "7 дней" },
   { value: "30d", label: "30 дней" },
+  { value: "quarter", label: "Квартал" },
 ];
 
 const FIELDS: SmartFilterField[] = [
@@ -31,38 +31,42 @@ const FIELDS: SmartFilterField[] = [
     options: [
       { value: "msk", label: "Москва" },
       { value: "spb", label: "Санкт-Петербург" },
+      { value: "kzn", label: "Казань" },
+    ],
+  },
+  {
+    key: "payment",
+    label: "Оплата",
+    options: [
+      { value: "card", label: "Картой" },
+      { value: "invoice", label: "По счёту" },
     ],
   },
 ];
 
-export default function PageToolbarNarrowExample() {
+export default function PageToolsExample() {
   const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("7d");
+  const [period, setPeriod] = React.useState("30d");
   const [filter, setFilter] = React.useState<SmartFilterValue>({
     city: { include: ["msk"], exclude: [] },
   });
   const [search, setSearch] = React.useState("");
 
   return (
-    <div className={styles.phone}>
-      <SmartFilter.Root
-        fields={FIELDS}
-        value={filter}
-        onValueChange={setFilter}
-        search={search}
-        onSearchChange={setSearch}
-      >
-        <PageToolbar.Root aria-label="Заказы">
-          <PageToolbar.Tools>
-            <SmartFilter.Toolbar />
-          </PageToolbar.Tools>
-          <PageToolbar.Sections>
-            <SegmentedControl.Root
-              fullWidth
-              value={section}
-              onValueChange={setSection}
-              aria-label="Раздел"
-            >
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root>
+        <Page.TopBar sticky={false}>
+          <Page.Heading>
+            <Page.Title>Заказы</Page.Title>
+          </Page.Heading>
+          <Page.Tools aria-label="Заказы">
+            <SegmentedControl.Root value={section} onValueChange={setSection} aria-label="Раздел">
               {SECTIONS.map((item) => (
                 <SegmentedControl.Item key={item.value} value={item.value}>
                   {item.label}
@@ -70,8 +74,7 @@ export default function PageToolbarNarrowExample() {
                 </SegmentedControl.Item>
               ))}
             </SegmentedControl.Root>
-          </PageToolbar.Sections>
-          <PageToolbar.View>
+            <SmartFilter.Toolbar />
             <Select.Root value={period} onValueChange={setPeriod}>
               <Select.Trigger aria-label="Период">
                 <Select.TriggerIcon>
@@ -87,20 +90,20 @@ export default function PageToolbarNarrowExample() {
                 ))}
               </Select.Content>
             </Select.Root>
-          </PageToolbar.View>
-          <PageToolbar.Actions>
+          </Page.Tools>
+          <Page.Actions>
             <Button.Root>
               <Button.Icon>
                 <Icon name="action.add" />
               </Button.Icon>
               Новый заказ
             </Button.Root>
-          </PageToolbar.Actions>
-          <PageToolbar.Chips>
+          </Page.Actions>
+          <Page.Chips>
             <SmartFilter.Chips />
-          </PageToolbar.Chips>
-        </PageToolbar.Root>
-      </SmartFilter.Root>
-    </div>
+          </Page.Chips>
+        </Page.TopBar>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }

package/src/layout/page/examples/top-bar.tsx

@@ -0,0 +1,85 @@
+/** A nested record in the top bar: the path ending in the title, a line of data, the page's tools and its buttons — `Page.TopBar`, `Page.Heading`, `Page.Tools`, `Page.Actions`. */
+import { Breadcrumb, Button, Icon, Input, Page, SegmentedControl } from "prime-ui-kit";
+import * as React from "react";
+
+const SECTIONS = [
+  { value: "all", label: "Все" },
+  { value: "mine", label: "Мои" },
+  { value: "overdue", label: "Просрочены" },
+];
+
+const VIEWS = [
+  { value: "board", label: "Доска" },
+  { value: "list", label: "Список" },
+];
+
+export default function PageTopBarExample() {
+  const [section, setSection] = React.useState("all");
+  const [view, setView] = React.useState("board");
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <Page.Root>
+      <Page.TopBar sticky={false}>
+        <Page.Heading>
+          <Breadcrumb.Root>
+            <Breadcrumb.Item href="#clients">Клиенты</Breadcrumb.Item>
+            <Breadcrumb.Item href="#north">ООО «Север»</Breadcrumb.Item>
+          </Breadcrumb.Root>
+          <Page.Title>Сделка № 2026-418</Page.Title>
+          <Page.Description>7 в работе · 6,5 млн ₽ · обновлено 9:40</Page.Description>
+        </Page.Heading>
+        <Page.Tools aria-label="Сделка № 2026-418">
+          <SegmentedControl.Root value={section} onValueChange={setSection} aria-label="Раздел">
+            {SECTIONS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Icon side="start">
+                <Icon name="action.search" tone="secondary" />
+              </Input.Icon>
+              <Input.Field
+                type="search"
+                aria-label="Поиск по задачам"
+                placeholder="Поиск"
+                value={query}
+                onValueChange={setQuery}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+            {VIEWS.map((item) => (
+              <SegmentedControl.Item key={item.value} value={item.value}>
+                {item.label}
+              </SegmentedControl.Item>
+            ))}
+          </SegmentedControl.Root>
+        </Page.Tools>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.forward" />
+            </Button.Icon>
+            Поделиться
+          </Button.Root>
+          <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.TopBar>
+    </Page.Root>
+  );
+}