@elcrm/components 0.2.9 → 0.2.13

package/README.md

@@ -49,6 +49,11 @@ import {
   RadioGroup,
   PricingGroup,
   PricingTable,
+  Table,
+  CodeBlock,
+  SplitPane,
+  Banner,
+  IconButton,
   Dropdown,
   Breadcrumb,
   PageHead,
@@ -88,18 +93,23 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 | **RadioGroup**         | Выбор одной опции-карточки       | `items`, `value`, `indicator`, `indicatorSide`                                         |
 | **PricingGroup**       | Тарифные карточки в ряд          | `items` (`PricingPlan`), `selectable`, `value`                                         |
 | **PricingTable**       | Сравнение тарифов (таблица)      | те же `items` + `sections`                                                             |
+| **Table**              | Таблица данных со скроллом         | `layout` (`auto`/`fixed`), стандартные props `<table>`                                 |
+| **CodeBlock**          | Блок кода с bar и копированием     | `title`, `code` / `children`, `onCopy`, `actions`                                      |
+| **SplitPane**          | Две панели с разделителем          | `direction`, `ratio`, `onRatioChange`, `first`, `second`, `minFirst` / `minSecond`    |
+| **Banner**             | Статусная полоса                   | `tone` (`info`/`warning`/`danger`/`success`), не toast                               |
+| **IconButton**         | Иконка + tooltip                   | `name`, обязательный `label`, `tooltip` (`false` — без подсказки)                      |
 | **Menu**               | Навигация в шапке (не popover)   | `items` (`value`, `badge`: `0` скрыт), `value`, `onSelect`, `variant` (`plain`/`line`) |
 | **Dropdown**           | Выпадающее меню (items, portal)  | `label`/`trigger`, `items`/`groups`, `onSelect`                                        |
 | **Popover**            | Свой попап в portal              | `trigger`, `children`, `align`, `open`                                                 |
 | **Breadcrumb**         | Хлебные крошки                   | `items`, `separator`, `collapseAfter`                                                  |
-| **Sidebar**            | Левое меню приложения            | `groups`, `value`, `footer` + `footerItems`, `variant`                                 |
+| **Sidebar**            | Левое меню приложения            | `groups`, `value`, `item.items` + `defaultOpen`, `open` / `onOpenChange`, `footerItems` |
 | **PageShell**          | Каркас модуля (скролл + footer)  | `wide`, `scroll`, `footer`, `children`                                                 |
 | **ChatList**           | Колонка диалогов                 | `header`, `footer`, `children` (`List`/`Item`), `bodyRef`                              |
 | **ChatMessages**       | Колонка переписки                | `header`, `footer`, `children`, `bodyRef`, `onBodyScroll`                              |
 | **ChatSplit**          | Список + лента                   | `list`, `messages`                                                                     |
 | **PageHead**           | Заголовок страницы + actions     | `title`, `sup` (текст/Badge), `subtitle`, `actions`, `sticky`, `children`              |
 | **Section**            | Блок контента / auth / подраздел | `title`, `description`, `icon`, `actions`, `variant`                                   |
-| **NavSections**        | Сайдбар + lazy-панель            | `groups` (`value`), `resolveSection`, `defaultValue`                                   |
+| **NavSections**        | Сайдбар + lazy-панель            | `groups`, `item.items` + `defaultOpen`, `open` / `onOpenChange`, `resolveSection`      |
 | **TabSections**        | Горизонтальные вкладки + lazy    | `items` (`value` + `badge`), `resolveSection`                                          |
 | **Card**               | Карточка                         | `title`, `--card-pointer`                                                              |
 | **ActionGroup**        | Ряд иконок в карточке            | `label`, `items` и/или `children`                                                      |
@@ -136,7 +146,17 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
     {
       value: "admin",
       title: "Админ",
-      items: [{ value: "ops", label: "Операции" }],
+      items: [
+        {
+          value: "bridge",
+          label: "VK Bridge",
+          defaultOpen: true,
+          items: [
+            { value: "intro", label: "Введение" },
+            { value: "events", label: "События" },
+          ],
+        },
+      ],
     },
   ]}
   footer={<AvatarName title="Паша" description="mail@…" />}
@@ -150,7 +170,7 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 />
 ```
 
-Токены: `--sidebar-width`, `--sidebar-item-font-size`, `--sidebar-item-padding`, `--sidebar-icon-size`, `--sidebar-group-font-size`, `--sidebar-item-active`. Для orange active в `plain` переопределите `--sidebar-item-active` в теме приложения.
+Токены: `--sidebar-width`, `--sidebar-item-font-size`, `--sidebar-item-padding`, `--sidebar-icon-size`, `--sidebar-group-font-size`, `--sidebar-indent`, `--sidebar-item-active`. Для orange active в `plain` переопределите `--sidebar-item-active` в теме приложения.
 
 ### Stack
 
@@ -656,6 +676,15 @@ const resolve = createLazyResolver(
       label: "Личное",
       items: [
         { value: "Profile", label: "Профиль" },
+        {
+          value: "bridge",
+          label: "VK Bridge",
+          defaultOpen: true,
+          items: [
+            { value: "Intro", label: "Введение" },
+            { value: "Events", label: "События" },
+          ],
+        },
         { value: "Appearance", label: "Оформление" },
       ],
     },
@@ -741,6 +770,10 @@ const resolve = createLazyResolver(
 --stack-grid-min
 --toolbar-gap
 --healthmap-cell / --healthmap-gap / --healthmap-l0…l4
+--table-font-size / --table-cell-padding / --table-head-font-size / --table-code-font-size
+--code-block-bg / --code-block-padding / --code-block-font-size
+--split-handle-size / --split-handle-bg / --split-handle-bg-hover
+--banner-padding / --banner-bg / --banner-border
 --panel-info-width / --panel-info-width-min / --panel-info-overlay-max / --panel-info-backdrop
 --row-gap / --column-gap
 --popup-shadow

package/dist/Banner-B72lcEMo.js

@@ -0,0 +1,34 @@
+import e from "react";
+import { c as a } from "./cx-CcykAxZN.js";
+import './Banner.css';const i = "cLr", d = "cLi", m = "cLw", f = "cLd", w = "cLs", s = {
+  r: i,
+  i: d,
+  w: m,
+  d: f,
+  s: w
+}, L = {
+  info: s.i,
+  warning: s.w,
+  danger: s.d,
+  success: s.s
+};
+function p({
+  tone: c = "info",
+  className: n,
+  role: t = "status",
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: a(s.r, L[c], n),
+      role: t,
+      ...r
+    },
+    o
+  );
+}
+export {
+  p as B
+};

package/dist/Banner.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cLr{margin:0;padding:var(--banner-padding);border:1px solid var(--banner-border);border-radius:var(--shell-radius);background:var(--banner-bg);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.45}.cLi{--banner-bg: color-mix(in srgb, var(--shell-color-accent) 8%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-accent) 35%, var(--shell-border))}.cLw{--banner-bg: color-mix(in srgb, var(--shell-color-warning) 10%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-warning) 40%, var(--shell-border))}.cLd{--banner-bg: color-mix(in srgb, var(--shell-color-danger) 10%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-danger) 40%, var(--shell-border))}.cLs{--banner-bg: color-mix(in srgb, var(--shell-color-success) 10%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-success) 40%, var(--shell-border))}.cLr code{font-size:.92em}}

package/dist/Banner.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type BannerTone = "info" | "warning" | "danger" | "success";
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Визуальный акцент */
+    tone?: BannerTone;
+};
+/**
+ * Статусная полоса (offline, maintenance). Не toast — не путать с Notice.
+ *
+ * @example
+ * ```tsx
+ * <Banner tone="info" role="status">
+ *   Каталог из снимка <code>kit-catalog.json</code>
+ * </Banner>
+ * ```
+ *
+ * Токены: `--banner-*`, `--shell-bg`.
+ */
+export declare function Banner({ tone, className, role, children, ...rest }: BannerProps): React.JSX.Element;

package/dist/Banner.js

@@ -0,0 +1,4 @@
+import { B as e } from "./Banner-B72lcEMo.js";
+export {
+  e as Banner
+};

package/dist/CodeBlock-CRzVopIv.js

@@ -0,0 +1,25 @@
+import e from "react";
+import { c as u } from "./cx-CcykAxZN.js";
+import './CodeBlock.css';const p = "cEr", b = "cEb", d = "cEp", i = "cEa", N = "cEc", c = {
+  r: p,
+  b,
+  p: d,
+  a: i,
+  c: N
+};
+function k({
+  title: l,
+  code: n,
+  children: s,
+  onCopy: t,
+  copyLabel: r = "Копировать",
+  actions: a,
+  className: m,
+  ...o
+}) {
+  const E = s ?? (n != null ? /* @__PURE__ */ e.createElement("code", null, n) : null);
+  return /* @__PURE__ */ e.createElement("div", { className: u(c.r, m), ...o }, l != null || t || a ? /* @__PURE__ */ e.createElement("div", { className: c.b }, /* @__PURE__ */ e.createElement("span", null, l ?? "Код"), /* @__PURE__ */ e.createElement("div", { className: c.a }, a, t ? /* @__PURE__ */ e.createElement("button", { type: "button", className: c.c, onClick: t }, r) : null)) : null, /* @__PURE__ */ e.createElement("pre", { className: c.p }, E));
+}
+export {
+  k as C
+};

package/dist/CodeBlock.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cEr{border:1px solid var(--shell-border);border-radius:var(--shell-radius);background:var(--code-block-bg);overflow:hidden}.cEb{display:flex;justify-content:space-between;align-items:center;gap:var(--shell-gap-sm);padding:var(--code-block-bar-padding);border-bottom:1px solid var(--shell-border);font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cEp{margin:0;padding:var(--code-block-padding);overflow:auto;font-family:var(--code-block-font-family);font-size:var(--code-block-font-size);line-height:var(--code-block-line-height);color:var(--shell-color);white-space:pre}.cEa{display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0}.cEc{border:0;background:transparent;color:var(--shell-color-accent);cursor:pointer;font:inherit;padding:0}.cEc:hover,.cEc:focus-visible{text-decoration:underline}}

package/dist/CodeBlock.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export type CodeBlockProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Заголовок в полосе над кодом */
+    title?: React.ReactNode;
+    /** Текст без подсветки (если нет children) */
+    code?: string;
+    /** Подсветка / разметка — свой рендер в pre */
+    children?: React.ReactNode;
+    /** Кнопка «Копировать»; без onCopy не показывается */
+    onCopy?: () => void;
+    /** Подпись кнопки копирования */
+    copyLabel?: string;
+    /** Доп. действия справа в bar */
+    actions?: React.ReactNode;
+};
+/**
+ * Блок кода: bar + pre. Подсветку передаёт приложение через `children`.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock title="Пример" code={snippet} onCopy={() => copy(snippet)} />
+ * ```
+ *
+ * Токены: `--code-block-*`, `--shell-border`.
+ */
+export declare function CodeBlock({ title, code, children, onCopy, copyLabel, actions, className, ...rest }: CodeBlockProps): React.JSX.Element;

package/dist/CodeBlock.js

@@ -0,0 +1,4 @@
+import { C as r } from "./CodeBlock-CRzVopIv.js";
+export {
+  r as CodeBlock
+};

package/dist/IconButton-DPjpBKJn.js

@@ -0,0 +1,32 @@
+import t from "react";
+import { IconButton as f } from "@elcrm/button/IconButton";
+import { Icons as p } from "@elcrm/icons";
+import { Tooltip as u } from "@elcrm/tooltip";
+const I = {
+  s: 16,
+  m: 18,
+  l: 20
+};
+function C({
+  name: c,
+  label: n,
+  tooltip: o,
+  iconSize: m,
+  size: e = "m",
+  tooltipPlacement: i,
+  ...s
+}) {
+  const a = m ?? I[e], r = /* @__PURE__ */ t.createElement(
+    f,
+    {
+      label: n,
+      size: e,
+      icon: /* @__PURE__ */ t.createElement(p.Line, { name: c, size: a }),
+      ...s
+    }
+  );
+  return o === !1 ? r : /* @__PURE__ */ t.createElement(u, { content: o ?? n, placement: i }, r);
+}
+export {
+  C as I
+};

package/dist/IconButton.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { TIconButton } from '@elcrm/button/IconButton';
+import { TButtonSize } from '@elcrm/button';
+import { TooltipPlacement } from '@elcrm/tooltip';
+export type IconButtonProps = Omit<TIconButton, "icon" | "label" | "size"> & {
+    /** Имя из `icons update` / `Icons.Line` (в приложении — `IconLineName`) */
+    name: string;
+    /** Подпись: `aria-label` и текст tooltip по умолчанию */
+    label: string;
+    size?: TButtonSize;
+    /** Подсказка; `false` — без Tooltip (например, внутри toolbar с aria-label) */
+    tooltip?: React.ReactNode | false;
+    /** Размер SVG; по умолчанию от `size` кнопки */
+    iconSize?: number;
+    /** Сторона tooltip */
+    tooltipPlacement?: TooltipPlacement;
+};
+/**
+ * Иконка-кнопка: `Icons.Line` + {@link ShellIconButton} + {@link Tooltip}.
+ *
+ * @example
+ * ```tsx
+ * <IconButton name="power" label="Выход" onClick={logout} />
+ * <IconButton name="copy_01" label="Копировать" tooltip="Скопировать CSS" onClick={copy} />
+ * ```
+ */
+export declare function IconButton({ name, label, tooltip, iconSize, size, tooltipPlacement, ...rest }: IconButtonProps): React.JSX.Element;

package/dist/IconButton.js

@@ -0,0 +1,4 @@
+import { I as n } from "./IconButton-DPjpBKJn.js";
+export {
+  n as IconButton
+};

package/dist/NavSections-D6rDEtT1.js

@@ -0,0 +1,142 @@
+import e, { useMemo as B, Suspense as D } from "react";
+import { c as K } from "./cx-CcykAxZN.js";
+import { I as F } from "./Item-D4okhsfW.js";
+import { f as I, c as M, a as O, b as P, i as V } from "./navTree-BRyaILN9.js";
+import { h as j } from "./rovingKeys-CGlfTtNQ.js";
+import { u as y } from "./useControllableValue-CWqH1kpM.js";
+import './NavSections.css';const A = "cvr", W = "cvn", $ = "cvg", q = "cvl", z = "cvi", G = "cva", H = "cvc", J = "cvt", Q = "cve", T = "cvs", U = "cvf", X = "cvm", c = {
+  r: A,
+  n: W,
+  g: $,
+  l: q,
+  i: z,
+  a: G,
+  c: H,
+  t: J,
+  e: Q,
+  s: T,
+  f: U,
+  m: X
+};
+function Y({ className: a }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: a, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M2.5 4.5 6 8l3.5-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function C({
+  items: a,
+  value: d,
+  open: f,
+  onSelect: m,
+  onToggle: E
+}) {
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, a.map((t) => {
+    const v = t.items, s = v != null && v.length > 0, u = s && f.includes(t.value), r = !s && t.value === d;
+    return /* @__PURE__ */ e.createElement(e.Fragment, { key: t.value }, /* @__PURE__ */ e.createElement(
+      F,
+      {
+        as: "button",
+        active: r,
+        className: K(c.i, r && c.a),
+        "data-active": r ? "true" : void 0,
+        "data-open": u ? "true" : void 0,
+        "aria-current": r ? "page" : void 0,
+        "aria-expanded": s ? u : void 0,
+        disabled: t.disabled,
+        onClick: () => {
+          s ? E(t.value) : m(t.value);
+        }
+      },
+      t.icon != null ? /* @__PURE__ */ e.createElement("span", { className: c.c, "aria-hidden": !0 }, t.icon) : null,
+      /* @__PURE__ */ e.createElement("span", { className: c.t }, t.label),
+      s ? /* @__PURE__ */ e.createElement(Y, { className: c.e }) : null
+    ), s && u ? /* @__PURE__ */ e.createElement("div", { className: c.s }, /* @__PURE__ */ e.createElement(
+      C,
+      {
+        items: v,
+        value: d,
+        open: f,
+        onSelect: m,
+        onToggle: E
+      }
+    )) : null);
+  }));
+}
+function le({
+  groups: a,
+  resolveSection: d,
+  value: f,
+  defaultValue: m,
+  onValueChange: E,
+  open: t,
+  defaultOpen: v,
+  onOpenChange: s,
+  loading: u = null,
+  footer: r,
+  className: R,
+  navLabel: S = "Разделы"
+}) {
+  const g = B(
+    () => m || I(a),
+    [m, a]
+  ), [l, b] = y(
+    f,
+    g,
+    E
+  ), [o = [], N] = y(
+    t,
+    M(a, v, l),
+    s
+  ), x = O(a).map((n) => n.value), p = e.useRef(l);
+  e.useEffect(() => {
+    if (l == null || l === p.current) {
+      p.current = l;
+      return;
+    }
+    p.current = l;
+    const i = P(a, l).filter((w) => !o.includes(w));
+    i.length && N([...o, ...i]);
+  }, [l, a, o, N]);
+  const h = (n) => {
+    N(
+      o.includes(n) ? o.filter((i) => i !== n) : [...o, n]
+    );
+  }, L = (n) => {
+    V(a, n) ? h(n) : b(n);
+  }, k = l ? d(l) : null;
+  return /* @__PURE__ */ e.createElement("div", { className: K(c.r, R) }, /* @__PURE__ */ e.createElement(
+    "nav",
+    {
+      className: c.n,
+      "aria-label": S,
+      onKeyDown: (n) => j(n, {
+        values: x,
+        value: l,
+        onSelect: L,
+        vertical: !0
+      })
+    },
+    a.map((n, i) => /* @__PURE__ */ e.createElement("div", { key: i, className: c.g }, n.label != null ? /* @__PURE__ */ e.createElement("div", { className: c.l }, n.label) : null, /* @__PURE__ */ e.createElement(
+      C,
+      {
+        items: n.items,
+        value: l,
+        open: o,
+        onSelect: b,
+        onToggle: h
+      }
+    ))),
+    r != null ? /* @__PURE__ */ e.createElement("div", { className: c.f }, r) : null
+  ), /* @__PURE__ */ e.createElement("div", { className: c.m }, k ? /* @__PURE__ */ e.createElement(D, { fallback: u }, e.createElement(k)) : null));
+}
+export {
+  le as N
+};

package/dist/NavSections.css

@@ -1 +1 @@
-@layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--shell-gap-lg);width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:var(--nav-sections-padding)}.cvn{display:flex;flex-direction:column;gap:var(--shell-gap);flex:0 0 var(--nav-sections-nav-width);width:var(--nav-sections-nav-width);min-width:var(--nav-sections-nav-width);box-sizing:border-box}.cvg{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--shell-gap);border-bottom:1px solid var(--shell-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:var(--sidebar-group-font-size);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted);padding:0 var(--shell-padding-inline) var(--shell-gap-sm)}.cvi:is(button){position:relative;font-size:var(--shell-font-size-sm)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--shell-color-accent)}.cvi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--shell-color-muted);line-height:0}.cva .cvc{color:var(--shell-color)}.cvt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvf{margin-top:auto;padding-top:var(--shell-gap);border-top:1px solid var(--shell-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto}@media (max-width: 720px){.cvr{flex-direction:column}.cvn{flex:none;width:100%;min-width:0;max-width:none}}}
+@layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--shell-gap-lg);width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:var(--nav-sections-padding)}.cvn{display:flex;flex-direction:column;gap:var(--shell-gap);flex:0 0 var(--nav-sections-nav-width);width:var(--nav-sections-nav-width);min-width:var(--nav-sections-nav-width);box-sizing:border-box}.cvg{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--shell-gap);border-bottom:1px solid var(--shell-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:var(--sidebar-group-font-size);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted);padding:0 var(--shell-padding-inline) var(--shell-gap-sm)}.cvi:is(button){position:relative;display:flex;width:100%;align-items:center;font-size:var(--shell-font-size-sm)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--shell-color-accent)}.cvi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--shell-color-muted);line-height:0}.cva .cvc{color:var(--shell-color)}.cvt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cve{flex-shrink:0;width:12px;height:12px;margin-left:auto;color:var(--shell-color-muted);transition:transform .15s ease}.cvi:is(button)[data-open=true] .cve{transform:rotate(180deg);color:inherit}.cvs{display:flex;flex-direction:column;gap:2px;padding-inline-start:var(--sidebar-indent)}.cvf{margin-top:auto;padding-top:var(--shell-gap);border-top:1px solid var(--shell-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto}@media (max-width: 720px){.cvr{flex-direction:column}.cvn{flex:none;width:100%;min-width:0;max-width:none}}}

package/dist/NavSections.d.ts

@@ -15,6 +15,17 @@ export type NavSectionsItem = {
     icon?: React.ReactNode;
     /** Недоступный пункт. */
     disabled?: boolean;
+    /**
+     * Вложенные пункты — есть → шеврон и раскрытие.
+     * Клик по родителю только открывает/закрывает, панель не меняем.
+     */
+    items?: NavSectionsItem[];
+    /**
+     * Подменю открыто при первом рендере.
+     * Если выбран потомок — ветка откроется сама.
+     * @default false
+     */
+    defaultOpen?: boolean;
 };
 /**
  * Группа пунктов сайдбара (опциональный заголовок + `items`).
@@ -46,6 +57,17 @@ export type NavSectionsProps = {
     defaultValue?: string;
     /** Смена активного раздела (`next` = `item.value`). */
     onValueChange?: (value: string) => void;
+    /**
+     * Раскрытые родители (их `value`). Контролируемый режим.
+     * Вместе с `onOpenChange`.
+     */
+    open?: string[];
+    /**
+     * Начально раскрытые (плюс `item.defaultOpen` и предки выбранного).
+     */
+    defaultOpen?: string[];
+    /** Смена набора раскрытых родителей */
+    onOpenChange?: (open: string[]) => void;
     /** Fallback для `<Suspense>` при ленивой загрузке секции. */
     loading?: React.ReactNode;
     /** Низ сайдбара (например кнопка «Назад»). */
@@ -68,34 +90,40 @@ export type NavSectionsProps = {
  * - {@link Menu} — простая навигация без панелей.
  *
  * API: декларативные `groups` / `items`. Идентификатор раздела — `value` (не `key`).
+ * У пункта `items` + `defaultOpen` — раскрываемое подменю (как у Sidebar).
  * Compound-слоты (`NavSections.Item`) не используются.
  *
  * CSS-токены: `--shell-*`, `--nav-sections-padding`, `--nav-sections-nav-width`,
- * `--nav-sections-main-max-width`.
+ * `--nav-sections-main-max-width`, `--sidebar-indent`.
  *
  * @example
  * ```tsx
  * const groups = [
  *   {
- *     label: "Личное",
+ *     label: "Документация",
  *     items: [
- *       { value: "profile", label: "Профиль", icon: <Icons.Line name="user" /> },
- *       { value: "security", label: "Безопасность" },
+ *       {
+ *         value: "bridge",
+ *         label: "VK Bridge",
+ *         defaultOpen: true,
+ *         items: [
+ *           { value: "intro", label: "Введение" },
+ *           { value: "events", label: "События", items: [
+ *             { value: "evt-init", label: "VKWebAppInit" },
+ *           ] },
+ *         ],
+ *       },
+ *       { value: "auth", label: "Авторизация VK" },
  *     ],
  *   },
  * ];
  *
- * const resolveSection = createLazyResolver(
- *   (v) => import(`./sections/${v}.tsx`),
- * );
- *
  * <NavSections
  *   groups={groups}
  *   resolveSection={resolveSection}
  *   value={section}
  *   onValueChange={setSection}
- *   footer={<Button onSend={() => navigate(-1)}>Назад</Button>}
  * />
  * ```
  */
-export declare function NavSections({ groups, resolveSection, value: valueProp, defaultValue, onValueChange, loading, footer, className, navLabel, }: NavSectionsProps): React.JSX.Element;
+export declare function NavSections({ groups, resolveSection, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, loading, footer, className, navLabel, }: NavSectionsProps): React.JSX.Element;

package/dist/NavSections.js

@@ -1,4 +1,4 @@
-import { N as e } from "./NavSections-BpyZPimZ.js";
+import { N as e } from "./NavSections-D6rDEtT1.js";
 export {
   e as NavSections
 };