prime-ui-kit 0.9.0 → 0.9.1

package/src/layout/sidebar/examples/brand-header.tsx

@@ -0,0 +1,45 @@
+/** 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`. */
+import { Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SidebarBrandHeaderExample() {
+  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="nav.home" />
+            </Sidebar.ItemIcon>
+            Обзор
+          </Sidebar.Item>
+          <Sidebar.Item>
+            <Sidebar.ItemIcon>
+              <Icon name="object.users" />
+            </Sidebar.ItemIcon>
+            Клиенты
+          </Sidebar.Item>
+          <Sidebar.Item>
+            <Sidebar.ItemIcon>
+              <Icon name="object.document" />
+            </Sidebar.ItemIcon>
+            Сделки
+          </Sidebar.Item>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

package/src/layout/sidebar/examples/collapsible-groups.tsx

@@ -0,0 +1,77 @@
+/** 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`. */
+import { Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SidebarCollapsibleGroupsExample() {
+  return (
+    <div className={`${styles.stage} ${styles.stageTall}`}>
+      <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.Group label="Обзор" collapsible>
+            <Sidebar.Item current>
+              <Sidebar.ItemIcon>
+                <Icon name="nav.home" />
+              </Sidebar.ItemIcon>
+              Сводка
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.bell" />
+              </Sidebar.ItemIcon>
+              Уведомления
+              <Sidebar.ItemCount color="red">7</Sidebar.ItemCount>
+            </Sidebar.Item>
+          </Sidebar.Group>
+          <Sidebar.Group label="Инструменты" collapsible>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.tasks" />
+              </Sidebar.ItemIcon>
+              Задачи
+              <Sidebar.ItemCount>48</Sidebar.ItemCount>
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="field.calendar" />
+              </Sidebar.ItemIcon>
+              Календарь
+            </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.chart" />
+              </Sidebar.ItemIcon>
+              Воронка продаж
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.document" />
+              </Sidebar.ItemIcon>
+              Отчёты
+            </Sidebar.Item>
+          </Sidebar.Group>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

package/src/layout/sidebar/examples/controlled-open.tsx

@@ -0,0 +1,55 @@
+/** 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`. */
+import { Button, Icon, Sidebar } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SidebarControlledOpenExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className={styles.stage}>
+      <Sidebar.Root offCanvas="always" open={open} onOpenChange={setOpen}>
+        <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="#home" current>
+            <Sidebar.ItemIcon>
+              <Icon name="nav.home" />
+            </Sidebar.ItemIcon>
+            Главная
+          </Sidebar.Item>
+          <Sidebar.Item href="#inbox">
+            <Sidebar.ItemIcon>
+              <Icon name="field.email" />
+            </Sidebar.ItemIcon>
+            Входящие
+            <Sidebar.ItemCount>2</Sidebar.ItemCount>
+          </Sidebar.Item>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content}>
+        <Button.Root
+          variant="soft"
+          tone="neutral"
+          aria-expanded={open}
+          onClick={() => setOpen(true)}
+        >
+          <Button.Icon>
+            <Icon name="nav.sidebarExpand" />
+          </Button.Icon>
+          Меню
+        </Button.Root>
+      </div>
+    </div>
+  );
+}

package/src/layout/sidebar/examples/controlled.tsx

@@ -0,0 +1,68 @@
+/** The parent owns the rail mode: expanded, an icon rail with tooltips, or hidden; every switch is one synchronous movement — `mode`, `onModeChange`. */
+import { Icon, SegmentedControl, Sidebar, type SidebarMode } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const MODES: { value: SidebarMode; label: string }[] = [
+  { value: "expanded", label: "Развёрнут" },
+  { value: "compact", label: "Компактный" },
+  { value: "hidden", label: "Скрыт" },
+];
+
+export default function SidebarControlledExample() {
+  const [mode, setMode] = React.useState<SidebarMode>("expanded");
+
+  return (
+    <div className={styles.column}>
+      <SegmentedControl.Root
+        value={mode}
+        onValueChange={(next) => setMode(next as SidebarMode)}
+        aria-label="Режим навигации"
+      >
+        {MODES.map((item) => (
+          <SegmentedControl.Item key={item.value} value={item.value}>
+            {item.label}
+          </SegmentedControl.Item>
+        ))}
+      </SegmentedControl.Root>
+      <div className={styles.stage}>
+        <Sidebar.Root mode={mode} onModeChange={setMode} 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="nav.home" />
+              </Sidebar.ItemIcon>
+              Главная
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="field.email" />
+              </Sidebar.ItemIcon>
+              Входящие
+              <Sidebar.ItemCount>3</Sidebar.ItemCount>
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="nav.layoutGrid" />
+              </Sidebar.ItemIcon>
+              Отчёты
+            </Sidebar.Item>
+          </Sidebar.Content>
+        </Sidebar.Root>
+        <div className={styles.content} />
+      </div>
+    </div>
+  );
+}

package/src/layout/sidebar/examples/examples.module.css

@@ -14,9 +14,14 @@
     var(--prime-shadow-raised);
 }
 
-/* A window that hugs its rail (size comparison). */
-.stageAuto {
-  height: auto;
+/* A window tall enough for a full rail: header, groups, footer and the account. */
+.stageTall {
+  height: calc(var(--prime-space-24) * 6);
+}
+
+/* A short window for the size comparison: the rail fills its parent's height, it never hugs. */
+.stageShort {
+  height: calc(var(--prime-space-24) * 2);
 }
 
 /* Content plane next to the rail, like AppShell: surface fill, edge to edge. */
@@ -28,6 +33,15 @@
   background: var(--prime-color-bg-surface);
 }
 
+/* The product mark inside `Sidebar.BrandLogo`: an accent tile with a glyph. */
+.logo {
+  display: grid;
+  place-items: center;
+  border-radius: var(--prime-radius-m);
+  background: var(--prime-color-accent-default);
+  color: var(--prime-color-accent-fg);
+}
+
 .sizes {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(calc(var(--prime-space-24) * 2.5), 1fr));

package/src/layout/sidebar/examples/nested-items.tsx

@@ -0,0 +1,74 @@
+/** 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`. */
+import { Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const STAGES = [
+  { href: "#backlog", label: "Бэклог", count: 24 },
+  { href: "#in-progress", label: "В работе", count: 4 },
+  { href: "#review", label: "На проверке", count: 7, current: true },
+  { href: "#done", label: "Готово", count: 13 },
+];
+
+export default function SidebarNestedItemsExample() {
+  return (
+    <div className={`${styles.stage} ${styles.stageTall}`}>
+      <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 href="#overview">
+            <Sidebar.ItemIcon>
+              <Icon name="nav.home" />
+            </Sidebar.ItemIcon>
+            Обзор
+          </Sidebar.Item>
+          <Sidebar.Sub>
+            <Sidebar.SubTrigger>
+              <Sidebar.ItemIcon>
+                <Icon name="object.tasks" />
+              </Sidebar.ItemIcon>
+              Задачи
+            </Sidebar.SubTrigger>
+            <Sidebar.SubContent>
+              {STAGES.map((stage) => (
+                <Sidebar.Item key={stage.href} href={stage.href} current={stage.current}>
+                  {stage.label}
+                  <Sidebar.ItemCount>{stage.count}</Sidebar.ItemCount>
+                </Sidebar.Item>
+              ))}
+            </Sidebar.SubContent>
+          </Sidebar.Sub>
+          <Sidebar.Sub>
+            <Sidebar.SubTrigger>
+              <Sidebar.ItemIcon>
+                <Icon name="object.users" />
+              </Sidebar.ItemIcon>
+              Клиенты
+            </Sidebar.SubTrigger>
+            <Sidebar.SubContent>
+              <Sidebar.Item href="#companies">Компании</Sidebar.Item>
+              <Sidebar.Item href="#contacts">Контакты</Sidebar.Item>
+            </Sidebar.SubContent>
+          </Sidebar.Sub>
+          <Sidebar.Item href="#calendar">
+            <Sidebar.ItemIcon>
+              <Icon name="field.calendar" />
+            </Sidebar.ItemIcon>
+            Календарь
+          </Sidebar.Item>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+/** 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`. */
+import { Avatar, Dropdown, Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SidebarOverviewExample() {
+  return (
+    <div className={`${styles.stage} ${styles.stageTall}`}>
+      <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.Group>
+            <Sidebar.Item current>
+              <Sidebar.ItemIcon>
+                <Icon name="nav.home" />
+              </Sidebar.ItemIcon>
+              Обзор
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.inbox" />
+              </Sidebar.ItemIcon>
+              Входящие
+              <Sidebar.ItemCount color="blue">8</Sidebar.ItemCount>
+            </Sidebar.Item>
+          </Sidebar.Group>
+          <Sidebar.Group label="Продажи" collapsible>
+            <Sidebar.Sub defaultOpen>
+              <Sidebar.SubTrigger>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.document" />
+                </Sidebar.ItemIcon>
+                Сделки
+              </Sidebar.SubTrigger>
+              <Sidebar.SubContent>
+                <Sidebar.Item>
+                  Новые
+                  <Sidebar.ItemCount>12</Sidebar.ItemCount>
+                </Sidebar.Item>
+                <Sidebar.Item>
+                  В работе
+                  <Sidebar.ItemCount>5</Sidebar.ItemCount>
+                </Sidebar.Item>
+                <Sidebar.Item>Закрытые</Sidebar.Item>
+              </Sidebar.SubContent>
+            </Sidebar.Sub>
+            <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.message" />
+              </Sidebar.ItemIcon>
+              Обращения
+              <Sidebar.ItemCount color="red">3</Sidebar.ItemCount>
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.book" />
+              </Sidebar.ItemIcon>
+              База знаний
+            </Sidebar.Item>
+          </Sidebar.Group>
+        </Sidebar.Content>
+        <Sidebar.Footer>
+          <Sidebar.Item href="#help" target="_blank" rel="noreferrer">
+            <Sidebar.ItemIcon>
+              <Icon name="status.info" />
+            </Sidebar.ItemIcon>
+            Справка
+            <Sidebar.ItemIcon>
+              <Icon name="action.externalLink" />
+            </Sidebar.ItemIcon>
+          </Sidebar.Item>
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Sidebar.Account description="anna@company.ru">
+                <Avatar.Root color="purple">
+                  <Avatar.Fallback>АС</Avatar.Fallback>
+                </Avatar.Root>
+                Анна Смирнова
+              </Sidebar.Account>
+            </Dropdown.Trigger>
+            <Dropdown.Content side="right" align="end">
+              <Dropdown.Item>
+                <Dropdown.ItemIcon>
+                  <Icon name="object.user" />
+                </Dropdown.ItemIcon>
+                Профиль
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <Dropdown.ItemIcon>
+                  <Icon name="action.settings" />
+                </Dropdown.ItemIcon>
+                Настройки аккаунта
+              </Dropdown.Item>
+              <Dropdown.Separator />
+              <Dropdown.Item>
+                <Dropdown.ItemIcon>
+                  <Icon name="action.logout" />
+                </Dropdown.ItemIcon>
+                Выйти
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Sidebar.Footer>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

package/src/layout/sidebar/examples/router.tsx

@@ -1,24 +1,30 @@
-/** `asChild` with a router NavLink: the router sets `aria-current="page"` and the item shows as active. Use inside a react-router app; the links must be rendered within a router. */
-import { LayoutTemplate, PanelLeft, PanelTop } from "lucide-react";
-import { Sidebar } from "prime-ui-kit";
+/** A router link as the item: the router sets `aria-current` and the item shows as current; render it inside a router — `asChild`. */
+import { Icon, Sidebar } from "prime-ui-kit";
 import { NavLink } from "react-router-dom";
 
 import styles from "./examples.module.css";
 
+const LINKS = [
+  { to: "/app-shell", label: "AppShell" },
+  { to: "/page-content", label: "PageContent" },
+  { to: "/sidebar", label: "Sidebar" },
+];
+
 export default function SidebarRouterExample() {
   return (
     <div className={styles.stage}>
-      <Sidebar.Root responsive={false}>
+      <Sidebar.Root offCanvas="never">
         <Sidebar.Content>
-          <Sidebar.Item asChild icon={<LayoutTemplate />}>
-            <NavLink to="/app-shell">AppShell</NavLink>
-          </Sidebar.Item>
-          <Sidebar.Item asChild icon={<PanelTop />}>
-            <NavLink to="/page-content">PageContent</NavLink>
-          </Sidebar.Item>
-          <Sidebar.Item asChild icon={<PanelLeft />}>
-            <NavLink to="/sidebar">Sidebar</NavLink>
-          </Sidebar.Item>
+          {LINKS.map((link) => (
+            <Sidebar.Item key={link.to} asChild>
+              <NavLink to={link.to}>
+                <Sidebar.ItemIcon>
+                  <Icon name="nav.layoutGrid" />
+                </Sidebar.ItemIcon>
+                {link.label}
+              </NavLink>
+            </Sidebar.Item>
+          ))}
         </Sidebar.Content>
       </Sidebar.Root>
       <div className={styles.content} />

package/src/layout/sidebar/examples/sizes.tsx

@@ -1,29 +1,34 @@
-/** Sidebar `size` xs → xl: item height, text and icon of the control tier; the rail width stays the same. Match the density of the app. */
-import { Home, Inbox, Settings } from "lucide-react";
-import { type ControlSize, Sidebar, Typography } from "prime-ui-kit";
+/** Every size tier: item height, text, icon and counter follow the tier; the rail width stays — `size`. */
+import { Icon, Sidebar, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-const SIZES: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function SidebarSizesExample() {
   return (
     <div className={styles.sizes}>
       {SIZES.map((size) => (
         <div key={size} className={styles.sizeColumn}>
-          <Typography.Root variant="caption" tone="muted">
-            size="{size}"
-          </Typography.Root>
-          <div className={`${styles.stage} ${styles.stageAuto}`}>
-            <Sidebar.Root size={size} responsive={false}>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+          <div className={`${styles.stage} ${styles.stageShort}`}>
+            <Sidebar.Root size={size} offCanvas="never">
               <Sidebar.Content>
-                <Sidebar.Item icon={<Home />} active>
+                <Sidebar.Item current>
+                  <Sidebar.ItemIcon>
+                    <Icon name="nav.home" />
+                  </Sidebar.ItemIcon>
                   Главная
                 </Sidebar.Item>
-                <Sidebar.Item icon={<Inbox />} badge={4}>
+                <Sidebar.Item>
+                  <Sidebar.ItemIcon>
+                    <Icon name="field.email" />
+                  </Sidebar.ItemIcon>
                   Входящие
+                  <Sidebar.ItemCount>4</Sidebar.ItemCount>
                 </Sidebar.Item>
-                <Sidebar.Item icon={<Settings />}>Настройки</Sidebar.Item>
               </Sidebar.Content>
             </Sidebar.Root>
           </div>

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

@@ -0,0 +1,81 @@
+/** 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`. */
+import { Icon, Kbd, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SidebarStructureExample() {
+  return (
+    <div className={`${styles.stage} ${styles.stageTall}`}>
+      <Sidebar.Root offCanvas="never">
+        <Sidebar.Content>
+          <Sidebar.Group>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="action.search" />
+              </Sidebar.ItemIcon>
+              Поиск
+              <Sidebar.ItemShortcut>
+                <Kbd>⌘K</Kbd>
+              </Sidebar.ItemShortcut>
+            </Sidebar.Item>
+            <Sidebar.Item current>
+              <Sidebar.ItemIcon>
+                <Icon name="nav.home" />
+              </Sidebar.ItemIcon>
+              Обзор
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.bell" />
+              </Sidebar.ItemIcon>
+              Уведомления
+              <Sidebar.ItemCount color="red">7</Sidebar.ItemCount>
+            </Sidebar.Item>
+          </Sidebar.Group>
+          <Sidebar.Group label="Работа">
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.document" />
+              </Sidebar.ItemIcon>
+              Сделки
+              <Sidebar.ItemCount>24</Sidebar.ItemCount>
+              <Sidebar.ItemAction label="Создать сделку" onClick={() => {}} />
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="field.calendar" />
+              </Sidebar.ItemIcon>
+              Встречи
+              <Sidebar.ItemCount color="green">3</Sidebar.ItemCount>
+            </Sidebar.Item>
+            <Sidebar.Item>
+              <Sidebar.ItemIcon>
+                <Icon name="object.package" />
+              </Sidebar.ItemIcon>
+              Интеграции
+              <Sidebar.ItemCount color="orange">!</Sidebar.ItemCount>
+            </Sidebar.Item>
+          </Sidebar.Group>
+          <Sidebar.Group label="Администрирование">
+            <Sidebar.Item disabled>
+              <Sidebar.ItemIcon>
+                <Icon name="status.locked" />
+              </Sidebar.ItemIcon>
+              Доступы
+            </Sidebar.Item>
+            <Sidebar.Item href="#help" target="_blank" rel="noreferrer">
+              <Sidebar.ItemIcon>
+                <Icon name="status.info" />
+              </Sidebar.ItemIcon>
+              Справка
+              <Sidebar.ItemIcon>
+                <Icon name="action.externalLink" />
+              </Sidebar.ItemIcon>
+            </Sidebar.Item>
+          </Sidebar.Group>
+        </Sidebar.Content>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

package/src/styles/fonts.css

@@ -0,0 +1,4 @@
+/* Opt-in (`prime-ui-kit/fonts.css`): the kit's faces from Google Fonts.
+   Golos Text: interface face with full Cyrillic; JetBrains Mono: code and IDs.
+   Self-host them instead and the token stacks pick them up by family name. */
+@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");