prime-ui-kit 0.20.1 → 0.21.1

package/src/layout/page/examples/tools.tsx

@@ -1,10 +1,9 @@
-/** The orders page's tools in its top bar: sections with counts, search and filter, the period, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. */
+/** The orders page's tools in its top bar: sections with counts, the search and filter that narrow both views, the view, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. */
 import {
   Button,
   Icon,
   Page,
   SegmentedControl,
-  Select,
   SmartFilter,
   type SmartFilterField,
   type SmartFilterValue,
@@ -18,10 +17,9 @@ const SECTIONS = [
   { value: "cancelled", label: "Отменены", count: 20 },
 ];
 
-const PERIODS = [
-  { value: "7d", label: "7 дней" },
-  { value: "30d", label: "30 дней" },
-  { value: "quarter", label: "Квартал" },
+const VIEWS = [
+  { value: "list", label: "Список" },
+  { value: "board", label: "Доска" },
 ];
 
 const FIELDS: SmartFilterField[] = [
@@ -46,7 +44,7 @@ const FIELDS: SmartFilterField[] = [
 
 export default function PageToolsExample() {
   const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("30d");
+  const [view, setView] = React.useState("list");
   const [filter, setFilter] = React.useState<SmartFilterValue>({
     city: { include: ["msk"], exclude: [] },
   });
@@ -75,21 +73,13 @@ export default function PageToolsExample() {
               ))}
             </SegmentedControl.Root>
             <SmartFilter.Toolbar />
-            <Select.Root value={period} onValueChange={setPeriod}>
-              <Select.Trigger aria-label="Период">
-                <Select.TriggerIcon>
-                  <Icon name="field.calendar" />
-                </Select.TriggerIcon>
-                <Select.Value />
-              </Select.Trigger>
-              <Select.Content>
-                {PERIODS.map((item) => (
-                  <Select.Item key={item.value} value={item.value}>
-                    {item.label}
-                  </Select.Item>
-                ))}
-              </Select.Content>
-            </Select.Root>
+            <SegmentedControl.Root value={view} onValueChange={setView} aria-label="Вид">
+              {VIEWS.map((item) => (
+                <SegmentedControl.Item key={item.value} value={item.value}>
+                  {item.label}
+                </SegmentedControl.Item>
+              ))}
+            </SegmentedControl.Root>
           </Page.Tools>
           <Page.Actions>
             <Button.Root>

package/src/layout/sidebar/COMPONENT.md

@@ -26,7 +26,10 @@ same place. Structure it by what people do, not by how the backend is split.
   it stays folded; its `…` row marks the page).
 - **One level of nesting.** `Sidebar.Sub` is one section with 2–6 views of the same objects
   (Сделки → Новые · В работе · Закрытые). The parent only discloses; an overview page is the first
-  child («Все сделки»). Never a sub-list inside a sub-list — split the section or use page tabs.
+  child («Все сделки»). Never a sub-list inside a sub-list — split the section. Facets of one section
+  («Мессенджеры» → «Каналы» · «Статистика») are no sub-list: they are route links in the page's
+  `Page.Tools`, and the section's item stays `current` on every sub-route (a `NavLink` without `end`,
+  or `current={pathname.startsWith("/messengers")}`).
 - **Icons.** Every top-level item and every sub-list parent has a distinct icon (on the rail the
   icon is all that is left); children of a sub-list have none.
 - **Numbers and dots.** A plain `Sidebar.ItemCount` is information (12 new deals): it leaves the
@@ -70,7 +73,7 @@ Sidebar.Root                       rail wrapper; renders <nav> inside; size tier
 │        ├─ Sidebar.SubTrigger     disclosure row, chevron at the end
 │        └─ Sidebar.SubContent     child Items on a guide line (a flyout on the compact rail)
 └─ Sidebar.Footer                  bottom items, the item Toggle, the account
-   └─ Sidebar.Account              avatar + name + muted line; a Dropdown.Trigger child
+   └─ Sidebar.Account              avatar + name + muted line; a ↕ chevron as a Dropdown.Trigger child
 useSidebar()                       state hook for custom parts inside Root (useAppShellNav outside it, in a shell)
 ```
 
@@ -220,7 +223,7 @@ useSidebar()                       state hook for custom parts inside Root (useA
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "role">` | — | `children` (Items), `className` (on the list) and the other div attributes. |
 
 ### Sidebar.Account
-`ref` → `HTMLButtonElement`. The signed-in person at the bottom of `Sidebar.Footer`: avatar, name, a muted line and a ↕ chevron. A button, so it is a `Dropdown.Trigger` child; in compact mode only the avatar stays, with the name as a tooltip.
+`ref` → `HTMLButtonElement`. The signed-in person at the bottom of `Sidebar.Footer`: avatar, name, a muted line; a ↕ chevron only as a `Dropdown.Trigger` child. In compact mode only the avatar stays, with the name as a tooltip.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -311,6 +314,7 @@ Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header,
 | flyout | hover / click / keyboard on a SubTrigger, or on the `…` row of a folded group, in compact mode | the row `aria-haspopup="dialog"`, `aria-expanded`; a Popover `role="dialog"` |
 | attention dot | a coloured `Sidebar.ItemCount` inside a folded Sub (always on the rail) or a folded Group | `Badge.Dot` with `data-attention="shown" \| "hidden"` on the parent row / heading / `…` row |
 | persisted | `persistKey` on Root | the mode and the open state of collapsible groups and sub-lists are read from and written to `localStorage` |
+| account menu | `Sidebar.Account` inside a `Dropdown.Trigger` (`aria-haspopup="menu"`) | the ↕ chevron at the end of the row; without a menu (a plain `onClick`, a `Drawer.Trigger`) no chevron |
 | disabled | `disabled` | Item `disabled` / `aria-disabled`, `data-disabled` |
 
 `persistKey` stores collapsible groups and sub-lists by their `id`, else by their label text — give an `id` when labels are translated or change. The stored state wins over `defaultMode` / `defaultOpen`; controlled `mode` / `open` are not stored, and unavailable storage is ignored. A hidden rail is stored as the mode it left, so a reload never strands a person on a hidden rail.
@@ -388,6 +392,7 @@ Leaving the narrow viewport closes the off-canvas panel; activating an item (a l
 | [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 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`. |
+| [account-profile.tsx](examples/account-profile.tsx) | The signed-in person opens a profile panel, not a menu, so the row draws no chevron — `Sidebar.Account`, `description`. |
 | [router.tsx](examples/router.tsx) | 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`. |
 | [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`. |

package/src/layout/sidebar/examples/account-profile.tsx

@@ -0,0 +1,66 @@
+/** The signed-in person opens a profile panel, not a menu, so the row draws no chevron — `Sidebar.Account`, `description`. */
+import { Avatar, Button, DescriptionList, Drawer, Icon, Sidebar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const PROFILE = [
+  { term: "Почта", value: "anna@company.ru" },
+  { term: "Роль", value: "Руководитель отдела продаж" },
+  { term: "Часовой пояс", value: "Москва, UTC+3" },
+];
+
+export default function SidebarAccountProfileExample() {
+  return (
+    <div className={styles.stage}>
+      <Sidebar.Root offCanvas="never">
+        <Sidebar.Content>
+          <Sidebar.Item current>
+            <Sidebar.ItemIcon>
+              <Icon name="nav.home" />
+            </Sidebar.ItemIcon>
+            Обзор
+          </Sidebar.Item>
+          <Sidebar.Item>
+            <Sidebar.ItemIcon>
+              <Icon name="object.document" />
+            </Sidebar.ItemIcon>
+            Сделки
+          </Sidebar.Item>
+        </Sidebar.Content>
+        <Sidebar.Footer>
+          <Drawer.Root>
+            <Drawer.Trigger>
+              <Sidebar.Account description="anna@company.ru">
+                <Avatar.Root color="purple">
+                  <Avatar.Fallback>АС</Avatar.Fallback>
+                </Avatar.Root>
+                Анна Смирнова
+              </Sidebar.Account>
+            </Drawer.Trigger>
+            <Drawer.Content size="s">
+              <Drawer.Header>
+                <Drawer.Title>Анна Смирнова</Drawer.Title>
+                <Drawer.Description>Профиль</Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                <DescriptionList.Root>
+                  {PROFILE.map(({ term, value }) => (
+                    <DescriptionList.Item key={term} label={term}>
+                      {value}
+                    </DescriptionList.Item>
+                  ))}
+                </DescriptionList.Root>
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Button.Root variant="outline" tone="neutral">
+                  Выйти
+                </Button.Root>
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </Sidebar.Footer>
+      </Sidebar.Root>
+      <div className={styles.content} />
+    </div>
+  );
+}

package/src/styles/theme-dark.css

@@ -130,6 +130,7 @@
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-950);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
   --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-100) 10%, transparent);
+  --prime-color-success-border: var(--prime-ref-color-green-400);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
   --prime-color-success-hover: var(--prime-ref-color-green-300);

package/src/styles/theme-light.css

@@ -205,6 +205,7 @@
   --prime-color-palette-yellow-solid-fg: var(--prime-ref-color-gray-925);
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
   --prime-color-skeleton-fill: color-mix(in srgb, var(--prime-ref-color-gray-925) 6%, transparent);
+  --prime-color-success-border: var(--prime-ref-color-green-500);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
   --prime-color-success-hover: var(--prime-ref-color-green-800);