prime-ui-kit 0.14.0 → 0.15.0

package/dist/skill/reference/layout/app-shell/examples/overview.tsx

@@ -1,14 +1,5 @@
-/** The app frame: Sidebar in the nav column, breadcrumbs in the AppHeader, the page in main; only main scrolls — `fillViewport`. */
-import {
-  AppHeader,
-  AppShell,
-  Breadcrumb,
-  Button,
-  Icon,
-  PageContent,
-  Sidebar,
-  Typography,
-} from "prime-ui-kit";
+/** 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";
 
 import styles from "./examples.module.css";
 
@@ -48,31 +39,25 @@ export default function AppShellOverviewExample() {
         </AppShell.Nav>
         <AppHeader.Root>
           <AppHeader.Start>
-            <Breadcrumb.Root>
-              <Breadcrumb.Item href="#crm">CRM</Breadcrumb.Item>
-              <Breadcrumb.Item current>Обзор</Breadcrumb.Item>
-            </Breadcrumb.Root>
+            <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.Page>
-            <PageContent.Header>
-              {/* In a real app this is PageContent.Title (the page h1). */}
-              <Typography as="h2" variant="heading-m">
-                Обзор
-              </Typography>
-              <PageContent.Actions>
-                <Button.Root>
-                  <Button.Icon>
-                    <Icon name="action.add" />
-                  </Button.Icon>
-                  Новая сделка
-                </Button.Root>
-              </PageContent.Actions>
-            </PageContent.Header>
             <PageContent.Body>
               <Typography variant="body-m" tone="secondary">
-                Выручка за месяц — 4,8 млн ₽, 37 сделок в работе.
+                Выручка за месяц — 4,8 млн ₽, на 12% больше, чем в сентябре.
               </Typography>
             </PageContent.Body>
           </PageContent.Page>

package/dist/skill/reference/layout/app-shell/examples/screen.tsx

@@ -0,0 +1,262 @@
+/** The app frame for desktop and phone: the Sidebar rail on a wide screen, the floating BottomNav in the footer on a phone, the AppHeader with the menu button, the page title with a line of data, and a simple home page that swaps with the current section — `fillViewport`, `scrollResetKey`. */
+import {
+  AppHeader,
+  AppShell,
+  BottomNav,
+  Card,
+  Checkbox,
+  Crossfade,
+  Icon,
+  type IconName,
+  PageContent,
+  Sidebar,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type SectionId = "today" | "deals" | "clients" | "tasks" | "reports" | "settings";
+type Section = { id: SectionId; label: string; icon: IconName };
+type Row = { id: string; title: string; meta: string };
+
+/** The main sections: the Sidebar's first group on a wide screen, the bar on a phone. */
+const MAIN: Section[] = [
+  { id: "today", label: "Сегодня", icon: "nav.home" },
+  { id: "deals", label: "Сделки", icon: "object.funnel" },
+  { id: "clients", label: "Клиенты", icon: "object.users" },
+  { id: "tasks", label: "Задачи", icon: "object.tasks" },
+];
+
+/** The rest of the map: in the Sidebar footer; on a phone «Ещё» opens the Sidebar panel. */
+const MORE: Section[] = [
+  { id: "reports", label: "Отчёты", icon: "object.chart" },
+  { id: "settings", label: "Настройки", icon: "action.settings" },
+];
+
+const SECTIONS = [...MAIN, ...MORE];
+
+/** Open deals: an informational count, plain in the Sidebar. */
+const OPEN_DEALS = 12;
+
+const KPIS = [
+  { label: "Сделки в работе", value: "37", delta: "+4 за неделю", tone: "success" },
+  { label: "Выручка за октябрь", value: "4,8 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+  { label: "Ждут ответа", value: "5 клиентов", delta: "2 дольше суток", tone: "danger" },
+] as const;
+
+const TASKS: Row[] = [
+  { id: "t1", title: "Позвонить в ООО «Север» по договору поставки", meta: "10:30" },
+  { id: "t2", title: "Отправить КП для АО «Меридиан»", meta: "12:00" },
+  { id: "t3", title: "Согласовать скидку для ИП Котова", meta: "15:00" },
+  { id: "t4", title: "Подготовить отчёт по воронке за неделю", meta: "17:30" },
+];
+
+/** What every section other than «Сегодня» lists. */
+const PAGES: Record<Exclude<SectionId, "today">, { description: string; rows: Row[] }> = {
+  deals: {
+    description: "12 сделок в работе · 9,6 млн ₽",
+    rows: [
+      { id: "d1", title: "ООО «Север» · поставка оборудования", meta: "2 400 000 ₽" },
+      { id: "d2", title: "АО «Меридиан» · годовой сервис", meta: "1 180 000 ₽" },
+      { id: "d3", title: "ООО «Вектор» · внедрение CRM", meta: "860 000 ₽" },
+    ],
+  },
+  clients: {
+    description: "248 клиентов · 5 ждут ответа",
+    rows: [
+      { id: "c1", title: "ООО «Север»", meta: "4 сделки" },
+      { id: "c2", title: "АО «Меридиан»", meta: "2 сделки" },
+      { id: "c3", title: "ИП Котов", meta: "1 сделка" },
+    ],
+  },
+  tasks: {
+    description: "4 задачи на сегодня",
+    rows: TASKS.map((task) => ({ ...task, meta: `сегодня, ${task.meta}` })),
+  },
+  reports: {
+    description: "2 отчёта · обновлены сегодня",
+    rows: [
+      { id: "r1", title: "Воронка продаж", meta: "обновлён сегодня" },
+      { id: "r2", title: "План и факт по менеджерам", meta: "октябрь" },
+    ],
+  },
+  settings: {
+    description: "8 человек в команде · 2 интеграции",
+    rows: [
+      { id: "s1", title: "Команда и роли", meta: "8 человек" },
+      { id: "s2", title: "Почта и телефония", meta: "подключены" },
+    ],
+  },
+};
+
+const isMore = (id: SectionId) => MORE.some((section) => section.id === id);
+
+export default function AppShellScreenExample() {
+  const [current, setCurrent] = React.useState<SectionId>("today");
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [done, setDone] = React.useState<ReadonlySet<string>>(() => new Set(["t1"]));
+
+  const openTasks = TASKS.length - done.size;
+  const section = SECTIONS.find((item) => item.id === current) ?? SECTIONS[0];
+
+  // One handler for every way into a section: the Sidebar and the bar.
+  const go = (id: SectionId) => {
+    setCurrent(id);
+    setMenuOpen(false);
+  };
+
+  const toggleTask = (id: string, checked: boolean) =>
+    setDone((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const countOf = (id: SectionId) => {
+    if (id === "deals") return <Sidebar.ItemCount>{OPEN_DEALS}</Sidebar.ItemCount>;
+    if (id === "tasks" && openTasks > 0) {
+      return <Sidebar.ItemCount color="red">{openTasks}</Sidebar.ItemCount>;
+    }
+    return null;
+  };
+
+  const sidebarItem = (item: Section) => (
+    <Sidebar.Item key={item.id} current={item.id === current} onClick={() => go(item.id)}>
+      <Sidebar.ItemIcon>
+        <Icon name={item.icon} />
+      </Sidebar.ItemIcon>
+      {item.label}
+      {countOf(item.id)}
+    </Sidebar.Item>
+  );
+
+  return (
+    <AppShell.Template
+      fillViewport
+      scrollResetKey={current}
+      nav={
+        <Sidebar.Root open={menuOpen} onOpenChange={setMenuOpen}>
+          <Sidebar.Header>
+            <Sidebar.Brand description="Отдел продаж">
+              <Sidebar.BrandLogo>
+                <Icon name="object.funnel" />
+              </Sidebar.BrandLogo>
+              Acme CRM
+            </Sidebar.Brand>
+            <Sidebar.Toggle variant="header" />
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Group>{MAIN.map(sidebarItem)}</Sidebar.Group>
+          </Sidebar.Content>
+          <Sidebar.Footer>{MORE.map(sidebarItem)}</Sidebar.Footer>
+        </Sidebar.Root>
+      }
+      header={
+        <AppHeader.Root>
+          <AppHeader.Start>
+            <AppHeader.MenuButton aria-expanded={menuOpen} onClick={() => setMenuOpen(true)} />
+            {/* 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) => (
+            <BottomNav.Item key={item.id} current={item.id === current} onClick={() => go(item.id)}>
+              <BottomNav.ItemIcon>
+                <Icon name={item.icon} />
+              </BottomNav.ItemIcon>
+              {item.id === "tasks" && openTasks > 0 ? (
+                <BottomNav.ItemCount>{openTasks}</BottomNav.ItemCount>
+              ) : null}
+              {item.label}
+            </BottomNav.Item>
+          ))}
+          {/* The rest of the map lives in the Sidebar: «Ещё» opens it as a panel. */}
+          <BottomNav.Item
+            current={isMore(current)}
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen(true)}
+          >
+            <BottomNav.ItemIcon>
+              <Icon name="action.more" />
+            </BottomNav.ItemIcon>
+            Ещё
+          </BottomNav.Item>
+        </BottomNav.Root>
+      }
+    >
+      {/* Another section is another page: it cross-fades instead of flipping. */}
+      <Crossfade state={current}>
+        <PageContent.Page>
+          <PageContent.Body>
+            {current === "today" ? (
+              <>
+                <PageContent.Grid>
+                  {KPIS.map((kpi) => (
+                    <PageContent.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>
+                  ))}
+                </PageContent.Grid>
+                <Card.Root variant="list">
+                  <Card.Header>
+                    <Card.Title as="h2">Задачи на сегодня</Card.Title>
+                  </Card.Header>
+                  <Card.List>
+                    {TASKS.map((task) => (
+                      <Card.ListItem key={task.id}>
+                        <span className={styles.row}>
+                          <Checkbox.Root
+                            checked={done.has(task.id)}
+                            onCheckedChange={(checked) => toggleTask(task.id, checked)}
+                          >
+                            <Checkbox.Label>{task.title}</Checkbox.Label>
+                          </Checkbox.Root>
+                          <Typography as="span" variant="caption" tone="muted">
+                            {task.meta}
+                          </Typography>
+                        </span>
+                      </Card.ListItem>
+                    ))}
+                  </Card.List>
+                </Card.Root>
+              </>
+            ) : (
+              <Card.Root variant="list">
+                <Card.List>
+                  {PAGES[current].rows.map((row) => (
+                    <Card.ListItem key={row.id}>
+                      <span className={styles.row}>
+                        <Typography as="span" variant="body-m" truncate>
+                          {row.title}
+                        </Typography>
+                        <Typography as="span" variant="caption" tone="muted">
+                          {row.meta}
+                        </Typography>
+                      </span>
+                    </Card.ListItem>
+                  ))}
+                </Card.List>
+              </Card.Root>
+            )}
+          </PageContent.Body>
+        </PageContent.Page>
+      </Crossfade>
+    </AppShell.Template>
+  );
+}

package/dist/skill/reference/layout/app-shell/examples/template.tsx

@@ -1,12 +1,24 @@
 /** Root, nav, header and main in one component; main scrolls back to the top whenever the page changes — `AppShell.Template` with `scrollResetKey`. */
-import { AppShell, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
+import { AppHeader, AppShell, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const PAGES = [
-  { id: "mailings", label: "Рассылки", icon: "field.email", text: "3 активные кампании." },
-  { id: "calendar", label: "Календарь", icon: "field.calendar", text: "5 событий на неделе." },
+  {
+    id: "mailings",
+    label: "Рассылки",
+    icon: "field.email",
+    text: "3 активные кампании",
+    note: "Последняя рассылка ушла вчера в 10:00, её открыли 42% получателей.",
+  },
+  {
+    id: "calendar",
+    label: "Календарь",
+    icon: "field.calendar",
+    text: "5 событий на неделе",
+    note: "Ближайшее — созвон с ООО «Север» сегодня в 15:00.",
+  },
 ] as const;
 
 export default function AppShellTemplateExample() {
@@ -38,15 +50,23 @@ 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.Page>
-          <PageContent.Header>
-            {/* In a real app this is PageContent.Title (the page h1). */}
-            <Typography as="h2" variant="heading-m">
-              {page.label}
+          <PageContent.Body>
+            <Typography variant="body-m" tone="secondary">
+              {page.note}
             </Typography>
-            <PageContent.Description>{page.text}</PageContent.Description>
-          </PageContent.Header>
+          </PageContent.Body>
         </PageContent.Page>
       </AppShell.Template>
     </div>

package/dist/skill/reference/layout/sidebar/COMPONENT.md

@@ -372,14 +372,17 @@ Leaving the narrow viewport closes the off-canvas panel; navigating from an `hre
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Everything the app navigation holds: brand and collapse toggle, groups that fold, a nested list, counts, the footer and the account — `Sidebar.Brand`, `Sidebar.Group`, `Sidebar.Sub`, `Sidebar.ItemCount`, `Sidebar.Account`, `Sidebar.Toggle`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: item height, text, icon and counter follow the tier; the rail width stays — `size`. |
-| [structure.tsx](examples/structure.tsx) | Labelled groups and the optional item parts: a plain count, a coloured badge, a key hint, a trailing icon, a row action and a disabled section — `Sidebar.Group`, `Sidebar.ItemCount`, `color`, `Sidebar.ItemShortcut`, `Sidebar.ItemAction`, `disabled`. |
+| [structure.tsx](examples/structure.tsx) | Labelled groups and the optional item parts: a plain count, coloured and solid badges, a key hint, a trailing icon, row actions with the default and an own glyph and a disabled section — `Sidebar.Group`, `Sidebar.ItemCount`, `color`, `variant`, `Sidebar.ItemShortcut`, `Sidebar.ItemAction`, `disabled`. |
 | [brand-header.tsx](examples/brand-header.tsx) | A brand block with the collapse toggle at the end of the header; in compact mode the logo stays and the toggle moves onto the rail edge — `Sidebar.Brand`, `Sidebar.BrandLogo`, `description`, `variant`. |
-| [collapsible-groups.tsx](examples/collapsible-groups.tsx) | Group headings that fold their items away, with a chevron at the end of the heading; on the compact rail a folded group becomes one row whose items open in a flyout — `collapsible`, `defaultOpen`. |
+| [collapsible-groups.tsx](examples/collapsible-groups.tsx) | Group headings that fold their items away, one group open at a time, with a chevron at the end of the heading; on the compact rail a folded group becomes one row whose items open in a flyout — `collapsible`, `open`, `onOpenChange`. |
 | [nested-items.tsx](examples/nested-items.tsx) | A parent item with child items on a guide line: a current child opens it and marks the parent; on the compact rail the children open in a flyout — `Sidebar.Sub`, `Sidebar.SubTrigger`, `Sidebar.SubContent`. |
-| [account.tsx](examples/account.tsx) | Footer items above the signed-in person: avatar, name and email open the account menu; collapse the rail and only the avatar stays, on the icon axis — `Sidebar.Footer`, `Sidebar.Account`, `description`, `Sidebar.Toggle`. |
-| [router.tsx](examples/router.tsx) | A router link as the item: the router sets `aria-current` and the item shows as current; render it inside a router — `asChild`. |
+| [account.tsx](examples/account.tsx) | Footer items and the collapse row above the signed-in person: avatar, name and email open the account menu; collapse the rail from that row and only the avatar stays, on the icon axis — `Sidebar.Footer`, `Sidebar.Account`, `description`, `Sidebar.Toggle`. |
+| [router.tsx](examples/router.tsx) | Router links as the brand and the items: the router sets `aria-current` and the item shows as current; render it inside a router — `asChild`. |
+| [persist.tsx](examples/persist.tsx) | The first visit opens on the icon rail; the mode and the folded groups are remembered and come back after a reload — `persistKey`, `defaultMode`. |
+| [custom-part.tsx](examples/custom-part.tsx) | A part of your own in the footer reads the rail state: the storage meter shows on the full rail and in the off-canvas panel and steps aside on the icon rail — `useSidebar`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the rail mode: expanded, an icon rail with tooltips, or hidden; every switch is one synchronous movement — `mode`, `onModeChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | Navigation behind a menu button at any width: the parent opens the off-canvas panel, the scrim, Escape, the header toggle or a navigation closes it — `offCanvas`, `open`, `onOpenChange`. |
+| [narrow.tsx](examples/narrow.tsx) | Below 768px the rail leaves the layout and slides in over the page from the menu button; from 768px it is the rail again, and the button leaves — `offCanvas`, `labels`. |
 
 ## Mistakes
 - `icon={…}` / `badge={…}` props → use the `Sidebar.ItemIcon` and `Sidebar.ItemCount` parts.

package/dist/skill/reference/layout/sidebar/examples/account.tsx

@@ -1,4 +1,4 @@
-/** Footer items above the signed-in person: avatar, name and email open the account menu; collapse the rail and only the avatar stays, on the icon axis — `Sidebar.Footer`, `Sidebar.Account`, `description`, `Sidebar.Toggle`. */
+/** Footer items and the collapse row above the signed-in person: avatar, name and email open the account menu; collapse the rail from that row and only the avatar stays, on the icon axis — `Sidebar.Footer`, `Sidebar.Account`, `description`, `Sidebar.Toggle`. */
 import { Avatar, Dropdown, Icon, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -16,7 +16,6 @@ export default function SidebarAccountExample() {
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>
-          <Sidebar.Toggle variant="header" />
         </Sidebar.Header>
         <Sidebar.Content>
           <Sidebar.Item current>
@@ -54,6 +53,7 @@ export default function SidebarAccountExample() {
             </Sidebar.ItemIcon>
             Пригласить команду
           </Sidebar.Item>
+          <Sidebar.Toggle />
           <Dropdown.Root>
             <Dropdown.Trigger>
               <Sidebar.Account description="anna@company.ru">

package/dist/skill/reference/layout/sidebar/examples/collapsible-groups.tsx

@@ -1,9 +1,17 @@
-/** Group headings that fold their items away, with a chevron at the end of the heading; on the compact rail a folded group becomes one row whose items open in a flyout — `collapsible`, `defaultOpen`. */
+/** Group headings that fold their items away, one group open at a time, with a chevron at the end of the heading; on the compact rail a folded group becomes one row whose items open in a flyout — `collapsible`, `open`, `onOpenChange`. */
 import { Icon, Sidebar } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function SidebarCollapsibleGroupsExample() {
+  const [openGroup, setOpenGroup] = React.useState<string | null>("overview");
+  const groupProps = (id: string) => ({
+    collapsible: true,
+    open: openGroup === id,
+    onOpenChange: (open: boolean) => setOpenGroup(open ? id : null),
+  });
+
   return (
     <div className={`${styles.stage} ${styles.stageTall}`}>
       <Sidebar.Root offCanvas="never">
@@ -19,7 +27,7 @@ export default function SidebarCollapsibleGroupsExample() {
           <Sidebar.Toggle variant="header" />
         </Sidebar.Header>
         <Sidebar.Content>
-          <Sidebar.Group label="Обзор" collapsible>
+          <Sidebar.Group label="Обзор" {...groupProps("overview")}>
             <Sidebar.Item current>
               <Sidebar.ItemIcon>
                 <Icon name="nav.home" />
@@ -34,7 +42,7 @@ export default function SidebarCollapsibleGroupsExample() {
               <Sidebar.ItemCount color="red">7</Sidebar.ItemCount>
             </Sidebar.Item>
           </Sidebar.Group>
-          <Sidebar.Group label="Инструменты" collapsible>
+          <Sidebar.Group label="Инструменты" {...groupProps("tools")}>
             <Sidebar.Item>
               <Sidebar.ItemIcon>
                 <Icon name="object.tasks" />
@@ -55,7 +63,7 @@ export default function SidebarCollapsibleGroupsExample() {
               Клиенты
             </Sidebar.Item>
           </Sidebar.Group>
-          <Sidebar.Group label="Метрики" collapsible defaultOpen={false}>
+          <Sidebar.Group label="Метрики" {...groupProps("metrics")}>
             <Sidebar.Item>
               <Sidebar.ItemIcon>
                 <Icon name="object.chart" />

package/dist/skill/reference/layout/sidebar/examples/custom-part.tsx

@@ -0,0 +1,53 @@
+/** A part of your own in the footer reads the rail state: the storage meter shows on the full rail and in the off-canvas panel and steps aside on the icon rail — `useSidebar`. */
+import { Icon, ProgressBar, Sidebar, useSidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Calls `useSidebar`, so it must render inside `Sidebar.Root`. */
+function StorageUsage() {
+  const { mode, offCanvas } = useSidebar();
+  if (mode === "compact" && !offCanvas) return null;
+  return (
+    <div className={styles.footerBlock}>
+      <ProgressBar value={72} label="Хранилище · 7,2 из 10 ГБ" />
+    </div>
+  );
+}
+
+export default function SidebarCustomPartExample() {
+  return (
+    <div className={styles.stage}>
+      <Sidebar.Root offCanvas="never">
+        <Sidebar.Header>
+          <Sidebar.Brand href="#home" description="Отдел продаж">
+            <Sidebar.BrandLogo>
+              <span className={styles.logo}>
+                <Icon name="nav.layoutGrid" />
+              </span>
+            </Sidebar.BrandLogo>
+            Прайм CRM
+          </Sidebar.Brand>
+          <Sidebar.Toggle variant="header" />
+        </Sidebar.Header>
+        <Sidebar.Content>
+          <Sidebar.Item current>
+            <Sidebar.ItemIcon>
+              <Icon name="object.file" />
+            </Sidebar.ItemIcon>
+            Документы
+          </Sidebar.Item>
+          <Sidebar.Item>
+            <Sidebar.ItemIcon>
+              <Icon name="object.image" />
+            </Sidebar.ItemIcon>
+            Медиатека
+          </Sidebar.Item>
+        </Sidebar.Content>
+        <Sidebar.Footer>
+          <StorageUsage />
+        </Sidebar.Footer>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

package/dist/skill/reference/layout/sidebar/examples/examples.module.css

@@ -42,6 +42,11 @@
   color: var(--prime-color-accent-fg);
 }
 
+/* custom-part.tsx: an own block in the footer, inset like the item labels. */
+.footerBlock {
+  padding: var(--prime-space-2);
+}
+
 .sizes {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(calc(var(--prime-space-24) * 2.5), 1fr));

package/dist/skill/reference/layout/sidebar/examples/narrow.tsx

@@ -0,0 +1,53 @@
+/** Below 768px the rail leaves the layout and slides in over the page from the menu button; from 768px it is the rail again, and the button leaves — `offCanvas`, `labels`. */
+import { AppHeader, Icon, Sidebar } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const LABELS = { close: "Закрыть меню" };
+
+export default function SidebarNarrowExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className={styles.stage}>
+      <Sidebar.Root open={open} onOpenChange={setOpen} labels={LABELS}>
+        <Sidebar.Header>
+          <Sidebar.Brand href="#home" description="Отдел продаж">
+            <Sidebar.BrandLogo>
+              <span className={styles.logo}>
+                <Icon name="nav.layoutGrid" />
+              </span>
+            </Sidebar.BrandLogo>
+            Прайм CRM
+          </Sidebar.Brand>
+          <Sidebar.Toggle variant="header" />
+        </Sidebar.Header>
+        <Sidebar.Content>
+          <Sidebar.Item href="#deals" current>
+            <Sidebar.ItemIcon>
+              <Icon name="object.document" />
+            </Sidebar.ItemIcon>
+            Сделки
+          </Sidebar.Item>
+          <Sidebar.Item href="#clients">
+            <Sidebar.ItemIcon>
+              <Icon name="object.users" />
+            </Sidebar.ItemIcon>
+            Клиенты
+          </Sidebar.Item>
+          <Sidebar.Item href="#tasks">
+            <Sidebar.ItemIcon>
+              <Icon name="object.tasks" />
+            </Sidebar.ItemIcon>
+            Задачи
+            <Sidebar.ItemCount>5</Sidebar.ItemCount>
+          </Sidebar.Item>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content}>
+        <AppHeader.MenuButton aria-expanded={open} onClick={() => setOpen(true)} />
+      </div>
+    </div>
+  );
+}

package/dist/skill/reference/layout/sidebar/examples/persist.tsx

@@ -0,0 +1,57 @@
+/** The first visit opens on the icon rail; the mode and the folded groups are remembered and come back after a reload — `persistKey`, `defaultMode`. */
+import { Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SidebarPersistExample() {
+  return (
+    <div className={`${styles.stage} ${styles.stageTall}`}>
+      <Sidebar.Root offCanvas="never" defaultMode="compact" persistKey="crm-navigation">
+        <Sidebar.Header>
+          <Sidebar.Brand href="#home" description="Отдел продаж">
+            <Sidebar.BrandLogo>
+              <span className={styles.logo}>
+                <Icon name="nav.layoutGrid" />
+              </span>
+            </Sidebar.BrandLogo>
+            Прайм CRM
+          </Sidebar.Brand>
+          <Sidebar.Toggle variant="header" />
+        </Sidebar.Header>
+        <Sidebar.Content>
+          <Sidebar.Group label="Продажи" collapsible>
+            <Sidebar.Item current>
+              <Sidebar.ItemIcon>
+                <Icon name="object.document" />
+              </Sidebar.ItemIcon>
+              Сделки
+              <Sidebar.ItemCount>24</Sidebar.ItemCount>
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.users" />
+              </Sidebar.ItemIcon>
+              Клиенты
+            </Sidebar.Item>
+          </Sidebar.Group>
+          <Sidebar.Group label="Финансы" collapsible defaultOpen={false}>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.receipt" />
+              </Sidebar.ItemIcon>
+              Счета
+              <Sidebar.ItemCount color="orange">2</Sidebar.ItemCount>
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.wallet" />
+              </Sidebar.ItemIcon>
+              Платежи
+            </Sidebar.Item>
+          </Sidebar.Group>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}