prime-ui-kit 0.13.1 → 0.15.0

package/src/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/src/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/src/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/src/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>
+  );
+}

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

@@ -1,6 +1,6 @@
-/** A router link as the item: the router sets `aria-current` and the item shows as current; render it inside a router — `asChild`. */
+/** 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`. */
 import { Icon, Sidebar } from "prime-ui-kit";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 
 import styles from "./examples.module.css";
 
@@ -14,6 +14,18 @@ export default function SidebarRouterExample() {
   return (
     <div className={styles.stage}>
       <Sidebar.Root offCanvas="never">
+        <Sidebar.Header>
+          <Sidebar.Brand asChild description="Документация">
+            <Link to="/">
+              <Sidebar.BrandLogo>
+                <span className={styles.logo}>
+                  <Icon name="object.book" />
+                </span>
+              </Sidebar.BrandLogo>
+              Prime UI
+            </Link>
+          </Sidebar.Brand>
+        </Sidebar.Header>
         <Sidebar.Content>
           {LINKS.map((link) => (
             <Sidebar.Item key={link.to} asChild>

package/src/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="Администрирование">

package/src/styles/theme-light.css

@@ -342,6 +342,7 @@
   --prime-layout-sidebar-collapsed-width: var(--prime-ref-space-14);
   --prime-layout-sidebar-width: 15.5rem;
   --prime-media-disk-blur: var(--prime-ref-space-1);
+  --prime-media-viewer-bar-width: 40rem;
   --prime-media-viewer-inset: var(--prime-ref-space-4);
   --prime-media-viewer-page-gap: var(--prime-ref-space-6);
   --prime-message-card-width: 16rem;

package/dist/skill/patterns/app-shell.tsx

@@ -1,301 +0,0 @@
-/** 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 title and search that opens the CommandMenu, and a simple home page that swaps with the current section. */
-import {
-  AppHeader,
-  AppShell,
-  BottomNav,
-  Card,
-  Checkbox,
-  CommandMenu,
-  Crossfade,
-  Icon,
-  type IconName,
-  PageContent,
-  Sidebar,
-  Typography,
-} from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./app-shell.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: "Все задачи команды по срокам.",
-    rows: TASKS.map((task) => ({ ...task, meta: `сегодня, ${task.meta}` })),
-  },
-  reports: {
-    description: "Сводки по продажам и работе менеджеров.",
-    rows: [
-      { id: "r1", title: "Воронка продаж", meta: "обновлён сегодня" },
-      { id: "r2", title: "План и факт по менеджерам", meta: "октябрь" },
-    ],
-  },
-  settings: {
-    description: "Компания, команда и интеграции.",
-    rows: [
-      { id: "s1", title: "Команда и роли", meta: "8 человек" },
-      { id: "s2", title: "Почта и телефония", meta: "подключены" },
-    ],
-  },
-};
-
-const isMore = (id: SectionId) => MORE.some((section) => section.id === id);
-
-export default function AppShellPattern() {
-  const [current, setCurrent] = React.useState<SectionId>("today");
-  const [menuOpen, setMenuOpen] = React.useState(false);
-  const [searchOpen, setSearchOpen] = 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, the bar and the search.
-  const go = (id: SectionId) => {
-    setCurrent(id);
-    setMenuOpen(false);
-    setSearchOpen(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;
-    });
-
-  // ⌘K opens the same search as the header field.
-  React.useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        setSearchOpen((open) => !open);
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, []);
-
-  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)} />
-              <AppHeader.Title>{section.label}</AppHeader.Title>
-            </AppHeader.Start>
-            <AppHeader.Search onClick={() => setSearchOpen(true)}>
-              Поиск сделок и клиентов
-            </AppHeader.Search>
-          </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.Section aria-labelledby="page-title">
-            <PageContent.Header>
-              <PageContent.Title id="page-title">{section.label}</PageContent.Title>
-              <PageContent.Description>
-                {current === "today"
-                  ? `Среда, 14 октября · открытых задач: ${openTasks}`
-                  : PAGES[current].description}
-              </PageContent.Description>
-            </PageContent.Header>
-            <PageContent.Body>
-              {current === "today" ? (
-                <>
-                  <div className={styles.kpis}>
-                    {KPIS.map((kpi) => (
-                      <Card.Root key={kpi.label} 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>
-                    ))}
-                  </div>
-                  <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.Section>
-        </Crossfade>
-      </AppShell.Template>
-
-      <CommandMenu.Root open={searchOpen} onOpenChange={setSearchOpen} aria-label="Поиск">
-        <CommandMenu.Input placeholder="Раздел, сделка или клиент" />
-        <CommandMenu.List>
-          <CommandMenu.Empty />
-          <CommandMenu.Group label="Разделы">
-            {SECTIONS.map((item) => (
-              <CommandMenu.Item key={item.id} value={item.label} onSelect={() => go(item.id)}>
-                <CommandMenu.ItemIcon>
-                  <Icon name={item.icon} />
-                </CommandMenu.ItemIcon>
-                {item.label}
-              </CommandMenu.Item>
-            ))}
-          </CommandMenu.Group>
-        </CommandMenu.List>
-      </CommandMenu.Root>
-    </>
-  );
-}

package/dist/skill/patterns/chat.module.css

@@ -1,8 +0,0 @@
-/* Chat: the page fills the app panel (`AppShell.Root fillViewport` + `PageContent.Root fill`); each
-   pane is a card with a scrolling region. */
-
-.paneCard {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}

package/dist/skill/patterns/dashboard.module.css

@@ -1,44 +0,0 @@
-/* Dashboard: blocks 40 apart come from PageContent.Body; tiles inside a block 16 apart. */
-
-/* KPI row: as many ~14rem tiles as fit, one column on a phone. */
-.kpis {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-14) * 4)), 1fr));
-  gap: var(--prime-space-4);
-}
-
-/* Panels: two columns from ~40rem of width; neighbours share one height. */
-.panels {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-20) * 4)), 1fr));
-  align-items: stretch;
-  gap: var(--prime-space-4);
-}
-
-/* Bars inside a panel: 20 apart, like fields. */
-.bars {
-  display: grid;
-  gap: var(--prime-space-5);
-}
-
-/* A section without a card: heading row 16 above the table. */
-.recent {
-  display: grid;
-  gap: var(--prime-space-4);
-  min-width: 0;
-}
-
-.recentHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--prime-space-2) var(--prime-space-4);
-}
-
-.client {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-2);
-}