prime-ui-kit 0.14.0 → 0.16.0

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

@@ -1,25 +1,31 @@
-/** 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">
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>
           <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 +40,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 +61,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/controlled-open.tsx

@@ -13,9 +13,7 @@ export default function SidebarControlledOpenExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

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

@@ -31,9 +31,7 @@ export default function SidebarControlledExample() {
           <Sidebar.Header>
             <Sidebar.Brand href="#home" description="Отдел продаж">
               <Sidebar.BrandLogo>
-                <span className={styles.logo}>
-                  <Icon name="nav.layoutGrid" />
-                </span>
+                <Icon name="nav.layoutGrid" />
               </Sidebar.BrandLogo>
               Прайм CRM
             </Sidebar.Brand>

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

@@ -0,0 +1,51 @@
+/** 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>
+              <Icon name="nav.layoutGrid" />
+            </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/dismiss.tsx

@@ -0,0 +1,47 @@
+/** An off-canvas panel only its own toggle closes: a press on the scrim and Escape leave it open, a picked item still closes it — `closeOnOutsideClick`, `closeOnEscape`. */
+import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SidebarDismissExample() {
+  return (
+    <div className={styles.stage}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          <Sidebar.Root offCanvas="always" closeOnOutsideClick={false} closeOnEscape={false}>
+            <Sidebar.Header>
+              <Sidebar.Brand href="#home" description="Склад · смена 2">
+                <Sidebar.BrandLogo>
+                  <Icon name="object.package" />
+                </Sidebar.BrandLogo>
+                Терминал сборки
+              </Sidebar.Brand>
+              <Sidebar.Toggle variant="header" />
+            </Sidebar.Header>
+            <Sidebar.Content>
+              <Sidebar.Item href="#picking" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.tasks" />
+                </Sidebar.ItemIcon>
+                Сборка заказов
+                <Sidebar.ItemCount>14</Sidebar.ItemCount>
+              </Sidebar.Item>
+              <Sidebar.Item href="#returns">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.package" />
+                </Sidebar.ItemIcon>
+                Возвраты
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppHeader.Root>
+          <AppHeader.Start>
+            <AppHeader.Title>Сборка заказов</AppHeader.Title>
+          </AppHeader.Start>
+        </AppHeader.Root>
+        <AppShell.Main />
+      </AppShell.Root>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-/* Layout for the Sidebar examples: small "app windows" (the page with a rail one layer above it). Semantic tokens only. */
+/* Layout for the Sidebar examples: small app windows. The preview stage is the page, the rail one layer above it; a window only sizes and clips. Semantic tokens only. */
 
 .stage {
   box-sizing: border-box;
@@ -6,12 +6,6 @@
   width: 100%;
   height: calc(var(--prime-space-24) * 4);
   overflow: hidden;
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-layer-current);
-  /* The window is a page on the preview's page: a hairline keeps its edge visible. */
-  box-shadow:
-    0 0 0 var(--prime-border-width) var(--prime-color-border-subtle),
-    var(--prime-shadow-raised);
 }
 
 /* A window tall enough for a full rail: header, groups, footer and the account. */
@@ -24,36 +18,22 @@
   height: calc(var(--prime-space-24) * 2);
 }
 
-/* Content plane next to the rail, like AppShell: the page itself, edge to edge. */
+/* narrow.tsx: the app shell fills the window frame instead of the viewport. */
+.shell {
+  height: 100%;
+}
+
+/* The page plane next to the rail, like AppShell.Main. */
 .content {
   box-sizing: border-box;
   flex: 1 1 auto;
   min-width: 0;
   padding: var(--prime-space-4);
-  background: var(--prime-color-layer-current);
-}
-
-/* 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));
-  gap: var(--prime-space-4);
-  width: 100%;
-}
-
-.sizeColumn {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
+/* custom-part.tsx: an own block in the footer, inset like the item labels. */
+.footerBlock {
+  padding: var(--prime-space-2);
 }
 
 .column {

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

@@ -0,0 +1,55 @@
+/** Below 768px the rail leaves the layout and slides in over the page from the menu button the header draws by itself; from 768px it is the rail again, and the button leaves — `AppShell`, `labels`. */
+import { AppHeader, AppShell, Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const LABELS = { close: "Закрыть меню" };
+
+export default function SidebarNarrowExample() {
+  return (
+    <div className={styles.stage}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          <Sidebar.Root labels={LABELS}>
+            <Sidebar.Header>
+              <Sidebar.Brand href="#home" description="Отдел продаж">
+                <Sidebar.BrandLogo>
+                  <Icon name="nav.layoutGrid" />
+                </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>
+        </AppShell.Nav>
+        <AppHeader.Root>
+          <AppHeader.Start>
+            <AppHeader.Title>Сделки</AppHeader.Title>
+          </AppHeader.Start>
+        </AppHeader.Root>
+        <AppShell.Main />
+      </AppShell.Root>
+    </div>
+  );
+}

package/dist/skill/reference/layout/sidebar/examples/nested-items.tsx

@@ -17,9 +17,7 @@ export default function SidebarNestedItemsExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

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

@@ -10,9 +10,7 @@ export default function SidebarOverviewExample() {
         <Sidebar.Header>
           <Sidebar.Brand href="#home" description="Отдел продаж">
             <Sidebar.BrandLogo>
-              <span className={styles.logo}>
-                <Icon name="nav.layoutGrid" />
-              </span>
+              <Icon name="nav.layoutGrid" />
             </Sidebar.BrandLogo>
             Прайм CRM
           </Sidebar.Brand>

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

@@ -0,0 +1,55 @@
+/** 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>
+              <Icon name="nav.layoutGrid" />
+            </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>
+  );
+}

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

@@ -1,25 +1,36 @@
-/** 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";
+/** Router links as the brand and the items: the router marks the current link and the item shows it as current; render it inside a router — `asChild`. */
+import { Icon, type IconName, Sidebar } from "prime-ui-kit";
+import { Link, 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" },
+const LINKS: { to: string; label: string; icon: IconName }[] = [
+  { to: "/", label: "Обзор", icon: "nav.home" },
+  { to: "/deals", label: "Сделки", icon: "object.funnel" },
+  { to: "/clients", label: "Клиенты", icon: "object.users" },
 ];
 
 export default function SidebarRouterExample() {
   return (
     <div className={styles.stage}>
       <Sidebar.Root offCanvas="never">
+        <Sidebar.Header>
+          <Sidebar.Brand asChild description="Отдел продаж">
+            <Link to="/">
+              <Sidebar.BrandLogo>
+                <Icon name="nav.layoutGrid" />
+              </Sidebar.BrandLogo>
+              Прайм CRM
+            </Link>
+          </Sidebar.Brand>
+        </Sidebar.Header>
         <Sidebar.Content>
           {LINKS.map((link) => (
             <Sidebar.Item key={link.to} asChild>
-              <NavLink to={link.to}>
+              {/* `end`: the overview is current only on its own page, not under every route. */}
+              <NavLink to={link.to} end={link.to === "/"}>
                 <Sidebar.ItemIcon>
-                  <Icon name="nav.layoutGrid" />
+                  <Icon name={link.icon} />
                 </Sidebar.ItemIcon>
                 {link.label}
               </NavLink>

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

@@ -7,12 +7,9 @@ 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 as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
           <div className={`${styles.stage} ${styles.stageShort}`}>
             <Sidebar.Root size={size} offCanvas="never">
               <Sidebar.Content>
@@ -32,8 +29,11 @@ export default function SidebarSizesExample() {
               </Sidebar.Content>
             </Sidebar.Root>
           </div>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -1,4 +1,4 @@
-/** 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`. */
+/** 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`. */
 import { Icon, Kbd, Sidebar } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -29,7 +29,9 @@ export default function SidebarStructureExample() {
                 <Icon name="object.bell" />
               </Sidebar.ItemIcon>
               Уведомления
-              <Sidebar.ItemCount color="red">7</Sidebar.ItemCount>
+              <Sidebar.ItemCount color="red" variant="solid">
+                7
+              </Sidebar.ItemCount>
             </Sidebar.Item>
           </Sidebar.Group>
           <Sidebar.Group label="Работа">
@@ -54,6 +56,9 @@ export default function SidebarStructureExample() {
               </Sidebar.ItemIcon>
               Интеграции
               <Sidebar.ItemCount color="orange">!</Sidebar.ItemCount>
+              <Sidebar.ItemAction label="Синхронизировать интеграции" onClick={() => {}}>
+                <Icon name="action.refresh" />
+              </Sidebar.ItemAction>
             </Sidebar.Item>
           </Sidebar.Group>
           <Sidebar.Group label="Администрирование">