@elcrm/components 0.0.1 → 0.1.0

package/dist/Header.d.ts

@@ -1,2 +1,36 @@
-export * from './Header/index'
-export {}
+import { default as React } from 'react';
+/**
+ * Шапка приложения со слотами brand / nav / search / actions.
+ *
+ * Роли: Header = верхняя полоса в Layout; Brand — логотип/название;
+ * рядом — Menu, поиск из `@elcrm/form`, кнопки `@elcrm/button`.
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   brand={<Brand>elCRM</Brand>}
+ *   nav={<Menu items={navItems} />}
+ *   actions={<Button>Выйти</Button>}
+ * />
+ * ```
+ *
+ * Токены: `--shell-*`, узкие `--header-height`, `--header-z`, `--header-margin`, `--header-shadow`, `--header-radius`.
+ */
+export type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+    /** Логотип / название (часто `<Brand />`) */
+    brand?: React.ReactNode;
+    /** Навигация (Menu, ссылки) */
+    nav?: React.ReactNode;
+    /** Поиск или фильтр в шапке */
+    search?: React.ReactNode;
+    /** Действия справа (кнопки, аватар, колокольчик) */
+    actions?: React.ReactNode;
+    /** Доп. контент после слотов */
+    children?: React.ReactNode;
+};
+/**
+ * Шапка приложения со слотами brand / nav / search / actions.
+ *
+ * @see Layout, Brand, Menu, Footer
+ */
+export declare function Header({ brand, nav, search, actions, children, className, ...rest }: HeaderProps): React.JSX.Element;

package/dist/Item.css

@@ -1 +1 @@
-@layer elcrm-components{.cir{display:flex;align-items:center;gap:var(--item-gap);padding:var(--item-padding);color:var(--item-color);background:var(--item-background);border:1px solid var(--item-border);border-radius:var(--item-radius);cursor:default}.cir:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer}.cir:hover{background:var(--item-background-hover)}.cia,.cir[aria-current=true],.cir[data-active=true]{background:var(--item-background-active)}}
+@layer elcrm-components{.cir{display:flex;align-items:center;gap:var(--shell-gap-sm);padding:var(--shell-padding);color:var(--shell-color);background:transparent;border:1px solid transparent;border-radius:var(--shell-radius);cursor:default}.cir:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer}.cir:hover{background:var(--shell-background-hover)}.cia,.cir[aria-current=true],.cir[data-active=true]{background:var(--shell-background-selected)}}

package/dist/Item.d.ts

@@ -1,2 +1,42 @@
-export * from './Item/index'
-export {}
+import { default as React } from 'react';
+type Common = {
+    /** Активное / выбранное состояние */
+    active?: boolean;
+    /** Содержимое элемента */
+    children?: React.ReactNode;
+    /** Доп. CSS-класс */
+    className?: string;
+};
+/**
+ * Элемент списка / строки меню: кнопка, ссылка или `<li>`.
+ *
+ * Роли: Item внутри List / Menu; для групповых списков выбора —
+ * RadioGroup / Dropdown с `items` (не собирайте Item вручную).
+ *
+ * @example
+ * ```tsx
+ * <List>
+ *   <Item as="li" active>Текущий</Item>
+ *   <Item as="a" href="/docs">Документация</Item>
+ * </List>
+ * ```
+ *
+ * Токены: `--shell-*`.
+ */
+export type ItemProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Тег: кнопка (по умолчанию) */
+    as?: "button";
+}) | (Common & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Тег: ссылка */
+    as: "a";
+}) | (Common & React.LiHTMLAttributes<HTMLLIElement> & {
+    /** Тег: элемент списка */
+    as: "li";
+});
+/**
+ * Элемент списка / строки.
+ *
+ * @see List, Menu, Badge
+ */
+export declare function Item(props: ItemProps): React.JSX.Element;
+export {};

package/dist/Layout.css

@@ -1 +1 @@
-@layer elcrm-components{.clr{display:flex;flex-direction:column;min-height:var(--layout-min-height);background:var(--layout-background);gap:var(--layout-gap)}.clm{flex:1;min-width:0}}
+@layer elcrm-components{.clr{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;max-height:100%;overflow:hidden;background:var(--shell-background-muted);gap:0}.clm{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}}

package/dist/Layout.d.ts

@@ -1,2 +1,30 @@
-export * from './Layout/index'
-export {}
+import { default as React } from 'react';
+/**
+ * Оболочка приложения: шапка, основной контент, подвал.
+ *
+ * Роли: Layout = каркас страницы; внутри — Header / Section / PageShell / Footer.
+ * Используйте как корневой каркас маршрута или приложения.
+ *
+ * @example
+ * ```tsx
+ * <Layout header={<Header brand="App" />} footer={<Footer>© 2026</Footer>}>
+ *   <Section title="Главная">…</Section>
+ * </Layout>
+ * ```
+ *
+ * Токены: `--shell-background-muted` (фон main), прочие `--shell-*`.
+ */
+export type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Слот шапки (обычно `<Header />`) */
+    header?: React.ReactNode;
+    /** Слот подвала (обычно `<Footer />`) */
+    footer?: React.ReactNode;
+    /** Основной контент страницы (рендерится в `<main>`) */
+    children?: React.ReactNode;
+};
+/**
+ * Оболочка страницы: header + main + footer.
+ *
+ * @see Header, Footer, Section, PageShell
+ */
+export declare function Layout({ header, footer, children, className, ...rest }: LayoutProps): React.JSX.Element;

package/dist/List.css

@@ -1 +1 @@
-@layer elcrm-components{.csr{display:flex;flex-direction:column;gap:var(--list-gap);padding:var(--list-padding);margin:0;list-style:none}.csh{flex-direction:row;flex-wrap:wrap}}
+@layer elcrm-components{.csr{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:0;margin:0;list-style:none}.csh{flex-direction:row;flex-wrap:wrap}}

package/dist/List.d.ts

@@ -1,2 +1,29 @@
-export * from './List/index'
-export {}
+import { default as React } from 'react';
+/**
+ * Список (`<ul>`) — вертикальный или горизонтальный.
+ *
+ * Роли: List = контейнер; элементы — Item (или свои `<li>`).
+ * Для навигации / меню смотрите Menu, NavSections.
+ *
+ * @example
+ * ```tsx
+ * <List>
+ *   <Item as="li">Первый</Item>
+ *   <Item as="li" active>Второй</Item>
+ * </List>
+ * ```
+ *
+ * Токены: `--shell-gap-sm`.
+ */
+export type ListProps = React.HTMLAttributes<HTMLUListElement> & {
+    /** Горизонтальный список */
+    row?: boolean;
+    /** Элементы списка (обычно `<Item as="li" />`) */
+    children?: React.ReactNode;
+};
+/**
+ * Список (`<ul>`).
+ *
+ * @see Item, Menu, Stack
+ */
+export declare function List({ row, children, className, ...rest }: ListProps): React.JSX.Element;

package/dist/Loading.css

@@ -1 +1 @@
-@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;padding:var(--loading-padding);color:var(--loading-color)}}
+@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;padding:var(--shell-gap-lg);color:var(--shell-color-muted)}}

package/dist/Loading.d.ts

@@ -1,2 +1,24 @@
-export * from './Loading/index'
-export {}
+import { default as React } from 'react';
+/**
+ * Плейсхолдер состояния загрузки (`role="status"`).
+ *
+ * Роли: Loading = индикация ожидания данных;
+ * при пустом результате после загрузки — EmptyState.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <Loading>Загружаем клиентов…</Loading> : <List>…</List>}
+ * ```
+ *
+ * Токены: `--shell-*`.
+ */
+export type LoadingProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Текст или кастомный индикатор (по умолчанию «Загрузка…») */
+    children?: React.ReactNode;
+};
+/**
+ * Плейсхолдер загрузки.
+ *
+ * @see EmptyState, PageShell
+ */
+export declare function Loading({ children, className, ...rest }: LoadingProps): React.JSX.Element;

package/dist/Menu-DRBHvSdJ.js

@@ -0,0 +1,40 @@
+import u from "react";
+import { c as l } from "./cx-CcykAxZN.js";
+import './Menu.css';const b = "cmr", f = "cmv", i = "cmi", k = "cma", c = {
+  r: b,
+  v: f,
+  i,
+  a: k
+};
+function C({
+  items: r,
+  vertical: t,
+  value: v,
+  onSelect: n,
+  children: d,
+  className: e,
+  ...p
+}) {
+  return /* @__PURE__ */ u.createElement("nav", { className: l(c.r, t && c.v, e), ...p }, r == null ? void 0 : r.map((a) => {
+    const o = a.active ?? (v != null && a.value === v);
+    return /* @__PURE__ */ u.createElement(
+      "button",
+      {
+        key: a.value,
+        type: "button",
+        className: l(c.i, o && c.a),
+        "data-active": o ? "true" : void 0,
+        "aria-current": o ? "page" : void 0,
+        disabled: a.disabled,
+        onClick: () => {
+          var s;
+          (s = a.onClick) == null || s.call(a), n == null || n(a.value);
+        }
+      },
+      a.label
+    );
+  }), d);
+}
+export {
+  C as M
+};

package/dist/Menu.css

@@ -1 +1 @@
-@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--menu-gap);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:var(--menu-item-background);color:var(--menu-item-color);padding:var(--menu-item-padding);border-radius:var(--menu-item-radius);font:inherit;cursor:pointer;text-align:left}.cmi:hover{background:var(--menu-item-background-hover);color:var(--menu-item-color-active)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--menu-item-background-active);color:var(--menu-item-color-active)}}
+@layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--shell-color-muted);padding:var(--shell-padding);border-radius:var(--shell-radius);font:inherit;line-height:1;cursor:pointer;text-align:left}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--shell-background-hover);color:var(--shell-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--shell-background-selected);color:var(--shell-color)}}

package/dist/Menu.d.ts

@@ -1,2 +1,78 @@
-export * from './Menu/index'
-export {}
+import { default as React } from 'react';
+/**
+ * Пункт навигационного меню.
+ *
+ * Идентификатор пункта — всегда поле `value` (не `key`).
+ * Групповой UI: декларативный массив `items`, без compound-слотов (`Menu.Item`).
+ */
+export type MenuItem = {
+    /** Уникальный идентификатор пункта (не `key`). */
+    value: string;
+    /** Подпись пункта (текст или React-узел). */
+    label: React.ReactNode;
+    /**
+     * Явный флаг активного пункта.
+     * Если не задан — активность берётся из `MenuProps.value`.
+     */
+    active?: boolean;
+    /** Обработчик клика по пункту (дополнительно к `onSelect` меню). */
+    onClick?: () => void;
+    /** Недоступный пункт. */
+    disabled?: boolean;
+};
+/**
+ * Props компонента {@link Menu}.
+ *
+ * Предпочтительный API — `items` + `value` / `onSelect`.
+ * `children` — запасной слот для редких кастомных вставок.
+ */
+export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
+    /**
+     * Декларативный список пунктов.
+     * Групповые UI elCRM используют `items`, а не compound-слоты.
+     */
+    items?: MenuItem[];
+    /** Вертикальный ряд пунктов. */
+    vertical?: boolean;
+    /**
+     * Активный `value` пункта (если у item не задан `active`).
+     * Идентификатор — `value`, не `key`.
+     */
+    value?: string;
+    /** Выбор пункта: получает `item.value`. */
+    onSelect?: (value: string) => void;
+    /** Дополнительный контент внутри `<nav>` (редко). */
+    children?: React.ReactNode;
+};
+/**
+ * Навигационное меню в потоке документа (шапка, сайдбар-ряд) — не popover.
+ *
+ * Когда использовать:
+ * - горизонтальная/вертикальная навигация в layout;
+ * - нужно подсветить текущий раздел по `value`.
+ *
+ * Связанные компоненты:
+ * - {@link Dropdown} — выпадающая панель рядом с триггером;
+ * - `@elcrm/overlay` — портальный popover/меню поверх страницы;
+ * - {@link NavSections} / {@link TabSections} — разделы с lazy-контентом.
+ *
+ * API: декларативные `items` (идентификатор — `value`). Compound-слоты не используются.
+ *
+ * CSS-токены: `--shell-*` (цвета/отступы shell-навигации).
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { value: "home", label: "Главная" },
+ *   { value: "team", label: "Команда", disabled: true },
+ * ];
+ *
+ * <Menu
+ *   items={items}
+ *   value={section}
+ *   onSelect={setSection}
+ *   vertical
+ * />
+ * ```
+ */
+export declare function Menu({ items, vertical, value, onSelect, children, className, ...rest }: MenuProps): React.JSX.Element;

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import { M as r } from "./Menu-DS7zKQbY.js";
+import { M as r } from "./Menu-DRBHvSdJ.js";
 export {
   r as Menu
 };

package/dist/{NavSections-CM-VPai2.js → NavSections-NDcIDD6H.js}

@@ -1,58 +1,58 @@
-import e, { useMemo as S, useState as x, Suspense as I } from "react";
+import e, { useMemo as x, useState as I, Suspense as M } from "react";
 import { c as d } from "./cx-CcykAxZN.js";
-import './NavSections.css';const M = "cvr", R = "cvn", j = "cvg", q = "cvl", w = "cvi", z = "cva", A = "cvc", B = "cvt", D = "cvf", F = "cvm", t = {
-  r: M,
-  n: R,
-  g: j,
-  l: q,
-  i: w,
-  a: z,
-  c: A,
-  t: B,
-  f: D,
-  m: F
+import './NavSections.css';const R = "cvr", j = "cvn", q = "cvg", w = "cvl", z = "cvi", A = "cva", B = "cvc", D = "cvt", F = "cvf", G = "cvm", t = {
+  r: R,
+  n: j,
+  g: q,
+  l: w,
+  i: z,
+  a: A,
+  c: B,
+  t: D,
+  f: F,
+  m: G
 };
-function G(l) {
+function H(l) {
   for (const r of l) {
     const n = r.items.find((s) => !s.disabled);
-    if (n) return n.key;
+    if (n) return n.value;
   }
   return "";
 }
 function L({
   groups: l,
   resolveSection: r,
-  activeKey: n,
-  defaultActiveKey: s,
-  onChange: i,
+  value: n,
+  defaultValue: s,
+  onValueChange: i,
   loading: f = null,
   footer: v,
   className: b,
   navLabel: E = "Разделы"
 }) {
-  const N = S(
-    () => s || G(l),
+  const N = x(
+    () => s || H(l),
     [s, l]
-  ), [y, k] = x(N), m = n ?? y, p = (a) => {
-    n == null && k(a), i == null || i(a);
+  ), [k, p] = I(N), m = n ?? k, y = (a) => {
+    n == null && p(a), i == null || i(a);
   }, u = m ? r(m) : null;
-  return /* @__PURE__ */ e.createElement("div", { className: d(t.r, b) }, /* @__PURE__ */ e.createElement("nav", { className: t.n, "aria-label": E }, l.map((a, K) => /* @__PURE__ */ e.createElement("div", { key: K, className: t.g }, a.label != null ? /* @__PURE__ */ e.createElement("div", { className: t.l }, a.label) : null, a.items.map((c) => {
-    const o = c.key === m;
+  return /* @__PURE__ */ e.createElement("div", { className: d(t.r, b) }, /* @__PURE__ */ e.createElement("nav", { className: t.n, "aria-label": E }, l.map((a, S) => /* @__PURE__ */ e.createElement("div", { key: S, className: t.g }, a.label != null ? /* @__PURE__ */ e.createElement("div", { className: t.l }, a.label) : null, a.items.map((c) => {
+    const o = c.value === m;
     return /* @__PURE__ */ e.createElement(
       "button",
       {
-        key: c.key,
+        key: c.value,
         type: "button",
         className: d(t.i, o && t.a),
         "data-active": o ? "true" : void 0,
         "aria-current": o ? "page" : void 0,
         disabled: c.disabled,
-        onClick: () => p(c.key)
+        onClick: () => y(c.value)
       },
       c.icon != null ? /* @__PURE__ */ e.createElement("span", { className: t.c, "aria-hidden": !0 }, c.icon) : null,
       /* @__PURE__ */ e.createElement("span", { className: t.t }, c.label)
     );
-  }))), v != null ? /* @__PURE__ */ e.createElement("div", { className: t.f }, v) : null), /* @__PURE__ */ e.createElement("div", { className: t.m }, u ? /* @__PURE__ */ e.createElement(I, { fallback: f }, e.createElement(u)) : null));
+  }))), v != null ? /* @__PURE__ */ e.createElement("div", { className: t.f }, v) : null), /* @__PURE__ */ e.createElement("div", { className: t.m }, u ? /* @__PURE__ */ e.createElement(M, { fallback: f }, e.createElement(u)) : null));
 }
 export {
   L as N

package/dist/NavSections.css

@@ -1 +1 @@
-@layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--nav-sections-gap);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:1rem;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:.75rem;border-bottom:1px solid var(--nav-sections-group-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--nav-sections-label-color);padding:0 10px 6px}.cvi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;border-radius:var(--nav-sections-item-radius);background:transparent;color:var(--nav-sections-item-color);font:inherit;font-size:14px;padding:var(--nav-sections-item-padding);cursor:pointer;position:relative;transition:background .12s ease,color .12s ease}.cvi:hover:not(:disabled){background:var(--nav-sections-item-background-hover)}.cva{background:var(--nav-sections-item-background-active)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--nav-sections-accent)}.cvi:disabled{opacity:.45;cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--nav-sections-icon-color);line-height:0}.cva .cvc{color:var(--nav-sections-item-color)}.cvt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvf{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--nav-sections-footer-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto;--section-padding: 0}@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:11px;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{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;text-align:left;border:none;border-radius:var(--shell-radius);background:transparent;color:var(--shell-color);font:inherit;font-size:var(--shell-font-size-sm);padding:var(--shell-padding);cursor:pointer;position:relative}.cvi:hover:not(:disabled){background:var(--shell-background-hover)}.cva{background:var(--shell-background-selected)}.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}}}

package/dist/NavSections.d.ts

@@ -1,2 +1,101 @@
-export * from './NavSections/index'
-export {}
+import { default as React } from 'react';
+import { LazyRouteChunk } from './lazyRoute';
+/**
+ * Пункт боковой навигации {@link NavSections}.
+ *
+ * Идентификатор — `value` (обычно совпадает с именем файла секции).
+ * Не используйте `key` как бизнес-идентификатор.
+ */
+export type NavSectionsItem = {
+    /** Уникальный идентификатор раздела (не `key`). */
+    value: string;
+    /** Подпись в сайдбаре. */
+    label: React.ReactNode;
+    /** Иконка слева; нет поля — не рисуем. */
+    icon?: React.ReactNode;
+    /** Недоступный пункт. */
+    disabled?: boolean;
+};
+/**
+ * Группа пунктов сайдбара (опциональный заголовок + `items`).
+ *
+ * Декларативный API: группа собирается из данных, без compound-слотов.
+ */
+export type NavSectionsGroup = {
+    /** Подпись группы (например «Личное»). Нет — заголовок не рисуется. */
+    label?: React.ReactNode;
+    /** Пункты группы (`value` — идентификатор). */
+    items: NavSectionsItem[];
+};
+/**
+ * Props компонента {@link NavSections}.
+ *
+ * Групповой UI: `groups` → внутри каждой группы декларативные `items`.
+ */
+export type NavSectionsProps = {
+    /** Группы бокового меню. */
+    groups: NavSectionsGroup[];
+    /**
+     * Резолвер панели справа по `value`.
+     * Обычно: `createLazyResolver((v) => import(\`./sections/${v}.tsx\`))`.
+     */
+    resolveSection: (value: string) => LazyRouteChunk | React.ComponentType;
+    /** Контролируемый активный `value`. */
+    value?: string;
+    /** Начальный `value` в неконтролируемом режиме. */
+    defaultValue?: string;
+    /** Смена активного раздела (`next` = `item.value`). */
+    onValueChange?: (value: string) => void;
+    /** Fallback для `<Suspense>` при ленивой загрузке секции. */
+    loading?: React.ReactNode;
+    /** Низ сайдбара (например кнопка «Назад»). */
+    footer?: React.ReactNode;
+    /** CSS-класс корня. */
+    className?: string;
+    /** `aria-label` для `<nav>`. */
+    navLabel?: string;
+};
+/**
+ * Макет «настройки / профиль»: вертикальный сайдбар + lazy-секция справа.
+ *
+ * Когда использовать:
+ * - страницы с несколькими разделами и боковым меню;
+ * - контент секции грузится по `value` через `resolveSection`.
+ *
+ * Связанные компоненты:
+ * - {@link TabSections} — то же, но вкладки горизонтально;
+ * - {@link createLazyResolver} из `lazyRoute` — кэш lazy-импортов;
+ * - {@link Menu} — простая навигация без панелей.
+ *
+ * API: декларативные `groups` / `items`. Идентификатор раздела — `value` (не `key`).
+ * Compound-слоты (`NavSections.Item`) не используются.
+ *
+ * CSS-токены: `--shell-*`, `--nav-sections-padding`, `--nav-sections-nav-width`,
+ * `--nav-sections-main-max-width`.
+ *
+ * @example
+ * ```tsx
+ * const groups = [
+ *   {
+ *     label: "Личное",
+ *     items: [
+ *       { value: "profile", label: "Профиль", icon: <Icons.Line name="user" /> },
+ *       { value: "security", label: "Безопасность" },
+ *     ],
+ *   },
+ * ];
+ *
+ * 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;

package/dist/NavSections.js

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

package/dist/PageHead-Baz9BLuA.js

@@ -0,0 +1,22 @@
+import c from "react";
+import { c as r } from "./cx-CcykAxZN.js";
+import './PageHead.css';const m = "ccr", o = "ccw", E = "cct", N = "cch", d = "ccs", h = "cca", e = {
+  r: m,
+  w: o,
+  t: E,
+  h: N,
+  s: d,
+  a: h
+};
+function p({
+  title: s,
+  subtitle: a,
+  actions: t,
+  className: l,
+  children: n
+}) {
+  return /* @__PURE__ */ c.createElement("div", { className: r(e.r, l) }, /* @__PURE__ */ c.createElement("div", { className: e.w }, /* @__PURE__ */ c.createElement("div", { className: e.t }, /* @__PURE__ */ c.createElement("h1", { className: e.h }, s), a != null ? /* @__PURE__ */ c.createElement("p", { className: e.s }, a) : null), t != null ? /* @__PURE__ */ c.createElement("div", { className: e.a }, t) : null), n);
+}
+export {
+  p as P
+};

package/dist/PageHead.css

@@ -0,0 +1 @@
+@layer elcrm-components{.ccr{margin:0 0 var(--shell-gap-lg)}.ccw{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--shell-gap)}.cct{min-width:0;max-width:36rem}.cch{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.25}.ccs{margin:var(--shell-gap-sm) 0 0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.cca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}}

package/dist/PageHead.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/**
+ * Заголовок страницы: title слева, actions справа в одной линии.
+ *
+ * Роли: PageHead = шапка контента внутри PageShell / Section;
+ * для полноценной секции с description/icon — Section;
+ * глобальная шапка приложения — Header.
+ *
+ * @example
+ * ```tsx
+ * <PageShell>
+ *   <PageHead title="Клиенты" subtitle="Все компании" actions={<Button>Создать</Button>} />
+ *   …
+ * </PageShell>
+ * ```
+ *
+ * Токены: `--shell-*`, `--section-title-size`.
+ */
+export type PageHeadProps = {
+    /** Заголовок страницы */
+    title: React.ReactNode;
+    /** Подзаголовок */
+    subtitle?: React.ReactNode;
+    /** Кнопки / поиск справа в одной строке с заголовком */
+    actions?: React.ReactNode;
+    /** Доп. CSS-класс */
+    className?: string;
+    /** Контент под строкой заголовка (фильтры, Breadcrumb) */
+    children?: React.ReactNode;
+};
+/**
+ * Заголовок: title слева, actions справа (одна линия).
+ *
+ * @see PageShell, Section, Header
+ */
+export declare function PageHead({ title, subtitle, actions, className, children, }: PageHeadProps): React.JSX.Element;

package/dist/PageHead.js

@@ -0,0 +1,4 @@
+import { P as o } from "./PageHead-Baz9BLuA.js";
+export {
+  o as PageHead
+};

package/dist/PageShell-CghThHS3.js

@@ -0,0 +1,28 @@
+import e from "react";
+import { c as l } from "./cx-CcykAxZN.js";
+import './PageShell.css';const m = "ckr", o = "ckw", f = "ckb", i = "ckf", c = {
+  r: m,
+  w: o,
+  b: f,
+  f: i
+};
+function u({
+  children: s,
+  className: a,
+  wide: n,
+  footer: t,
+  ...r
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ...r,
+      className: l(c.r, n && c.w, a)
+    },
+    /* @__PURE__ */ e.createElement("div", { className: c.b }, s),
+    t != null ? /* @__PURE__ */ e.createElement("div", { className: c.f }, t) : null
+  );
+}
+export {
+  u as P
+};

package/dist/PageShell.css

@@ -0,0 +1 @@
+@layer elcrm-components{.ckr{flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--shell-padding);overflow:hidden}.ckw{max-width:none}.ckb{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--shell-gap)}.ckf{flex:0 0 auto;padding-top:var(--shell-gap-sm)}}