prime-ui-kit 0.16.0 → 0.18.0

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

@@ -1,5 +1,5 @@
-/** A dashboard board: four KPI tiles, a chart two rows high beside two panels, one gap on both axes — `PageContent.Grid`, `PageContent.Cell`, `span`, `rows`. */
-import { Card, ChartFrame, type ChartFrameSeries, chartColors, PageContent } from "prime-ui-kit";
+/** A dashboard board: four KPI tiles, a chart two rows high beside two panels, one gap on both axes — `Page.Grid`, `Page.Cell`, `span`, `rows`. */
+import { Card, ChartFrame, type ChartFrameSeries, chartColors, Page } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -26,21 +26,21 @@ const MARGIN = { top: 8, right: 8, bottom: 24, left: 8 };
 
 const formatOrders = (value: number) => `${value.toLocaleString("ru-RU")} заказов`;
 
-export default function PageContentGridExample() {
+export default function PageGridExample() {
   return (
     <div className={styles.main}>
-      <PageContent.Body>
-        <PageContent.Grid>
+      <Page.Body>
+        <Page.Grid>
           {KPIS.map((kpi) => (
-            <PageContent.Cell key={kpi.label} span={3}>
+            <Page.Cell key={kpi.label} span={3}>
               <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.Cell span={8} rows={2}>
+          <Page.Cell span={8} rows={2}>
             <ChartFrame.Root series={SERIES} rows={ROWS} formatValue={formatOrders}>
               <ChartFrame.Header>
                 <ChartFrame.Title>Заказы по неделям</ChartFrame.Title>
@@ -87,23 +87,23 @@ export default function PageContentGridExample() {
                 }}
               />
             </ChartFrame.Root>
-          </PageContent.Cell>
-          <PageContent.Cell span={4}>
+          </Page.Cell>
+          <Page.Cell span={4}>
             <Card.Root variant="stat-trend">
               <Card.Label>Новые клиенты</Card.Label>
               <Card.Value>86</Card.Value>
               <Card.Delta tone="success">+14 к сентябрю</Card.Delta>
             </Card.Root>
-          </PageContent.Cell>
-          <PageContent.Cell span={4}>
+          </Page.Cell>
+          <Page.Cell span={4}>
             <Card.Root variant="stat-trend">
               <Card.Label>Ждут оплаты</Card.Label>
               <Card.Value>312 400 ₽</Card.Value>
               <Card.Delta tone="warning">7 счетов</Card.Delta>
             </Card.Root>
-          </PageContent.Cell>
-        </PageContent.Grid>
-      </PageContent.Body>
+          </Page.Cell>
+        </Page.Grid>
+      </Page.Body>
     </div>
   );
 }

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

@@ -0,0 +1,87 @@
+/** A client's card edited on its own page: after an edit a press on the navigation or the path asks before the changes are lost, and while it saves nothing leaves — `Page.Guard`, `dirty`, `busy`. */
+import { AppShell, Breadcrumb, Button, Card, Icon, Input, Page, Sidebar } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const SAVED_NAME = "ООО «Северный ветер»";
+const SAVED_MANAGER = "Анна Морозова";
+
+export default function PageGuardExample() {
+  const [name, setName] = React.useState(SAVED_NAME);
+  const [manager, setManager] = React.useState(SAVED_MANAGER);
+  const [saved, setSaved] = React.useState({ name: SAVED_NAME, manager: SAVED_MANAGER });
+  const [saving, setSaving] = React.useState(false);
+  const formId = React.useId();
+  const dirty = name !== saved.name || manager !== saved.manager;
+
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSaving(true);
+    window.setTimeout(() => {
+      setSaved({ name, manager });
+      setSaving(false);
+    }, 1200);
+  };
+
+  return (
+    <div className={styles.window}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          <Sidebar.Root>
+            <Sidebar.Content>
+              <Sidebar.Item href="#orders">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.package" />
+                </Sidebar.ItemIcon>
+                Заказы
+              </Sidebar.Item>
+              <Sidebar.Item href="#clients" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.users" />
+                </Sidebar.ItemIcon>
+                Клиенты
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.Guard dirty={dirty} busy={saving} />
+            <Page.TopBar>
+              <Page.Heading>
+                <Breadcrumb.Root>
+                  <Breadcrumb.Item href="#clients">Клиенты</Breadcrumb.Item>
+                </Breadcrumb.Root>
+                <Page.Title>{saved.name}</Page.Title>
+              </Page.Heading>
+              <Page.Actions>
+                <Button.Root type="submit" form={formId} loading={saving} disabled={!dirty}>
+                  Сохранить
+                </Button.Root>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
+              <Card.Root>
+                <Card.Body>
+                  <form id={formId} className={styles.fields} onSubmit={save}>
+                    <Input.Root label="Название">
+                      <Input.Wrapper>
+                        <Input.Field value={name} onValueChange={setName} />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Input.Root label="Менеджер">
+                      <Input.Wrapper>
+                        <Input.Field value={manager} onValueChange={setManager} />
+                      </Input.Wrapper>
+                    </Input.Root>
+                  </form>
+                </Card.Body>
+              </Card.Root>
+            </Page.Body>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
+    </div>
+  );
+}

package/dist/skill/reference/{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/dist/skill/reference/layout/page/examples/loading.tsx

@@ -0,0 +1,57 @@
+/** A page whose figures load after it opens: the line of data keeps its place under the title while it loads, so nothing in the bar moves — `loading`. */
+import { Button, Card, Crossfade, Icon, Page, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const ORDERS = [
+  { id: "№ 4821", client: "ООО «Север»", sum: "84 000 ₽" },
+  { id: "№ 4820", client: "ИП Котов", sum: "12 500 ₽" },
+  { id: "№ 4819", client: "ООО «Вектор»", sum: "230 000 ₽" },
+];
+
+const LOAD_MS = 1200;
+
+export default function PageLoadingExample() {
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!loading) return;
+    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+
+  return (
+    <Page.Root>
+      <Page.TopBar sticky={false}>
+        <Page.Heading>
+          <Page.Title>Заказы</Page.Title>
+          <Page.Description loading={loading}>128 в работе · 6 ждут оплаты</Page.Description>
+        </Page.Heading>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral" onClick={() => setLoading(true)}>
+            <Button.Icon>
+              <Icon name="action.refresh" />
+            </Button.Icon>
+            Обновить
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Body>
+        <Card.Root variant="list" aria-busy={loading || undefined}>
+          <Card.Body>
+            <Crossfade state={loading ? "loading" : "data"}>
+              {loading ? (
+                <Skeleton lines={ORDERS.length} />
+              ) : (
+                ORDERS.map((order) => (
+                  <Typography key={order.id} variant="body-m">
+                    {order.id} · {order.client} · {order.sum}
+                  </Typography>
+                ))
+              )}
+            </Crossfade>
+          </Card.Body>
+        </Card.Root>
+      </Page.Body>
+    </Page.Root>
+  );
+}

package/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/{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/{src/components/page-content → dist/skill/reference/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/dist/skill/reference/{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/dist/skill/reference/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>
+  );
+}