@elcrm/components 0.1.1 → 0.1.2

package/dist/PageHead.d.ts

@@ -8,8 +8,10 @@ import { default as React } from 'react';
  *
  * @example
  * ```tsx
- * <PageShell>
- *   <PageHead title="Клиенты" subtitle="Все компании" actions={<Button>Создать</Button>} />
+ * <PageShell scroll>
+ *   <PageHead title="Идеи" sup={<Badge size="s" tone="accent">4</Badge>} sticky>
+ *     <Menu items={tabs} value={tab} onSelect={setTab} />
+ *   </PageHead>
  *   …
  * </PageShell>
  * ```
@@ -19,18 +21,38 @@ import { default as React } from 'react';
 export type PageHeadProps = {
     /** Заголовок страницы */
     title: React.ReactNode;
+    /**
+     * Надстрочный слот сразу после title: текст или {@link Badge}.
+     * Пусто / `0` / `false` — не рендерим.
+     */
+    sup?: React.ReactNode;
     /** Подзаголовок */
     subtitle?: React.ReactNode;
     /** Кнопки / поиск справа в одной строке с заголовком */
     actions?: React.ReactNode;
+    /**
+     * Прилипает к верху скролла предка (`PageShell` с `scroll`).
+     * По умолчанию `false`.
+     */
+    sticky?: boolean;
     /** Доп. CSS-класс */
     className?: string;
-    /** Контент под строкой заголовка (фильтры, Breadcrumb) */
+    /**
+     * Контент под строкой заголовка (фильтры, поиск, вкладки).
+     * Между title и children — `--shell-gap`.
+     */
     children?: React.ReactNode;
 };
 /**
- * Заголовок: title слева, actions справа (одна линия).
+ * Заголовок: title слева (+ `sup` сверху), actions справа.
  *
- * @see PageShell, Section, Header
+ * @param props.title — заголовок
+ * @param props.sup — текст или Badge после title (надстрочно)
+ * @param props.subtitle — строка под заголовком
+ * @param props.actions — кнопки справа
+ * @param props.sticky — прилипает к скроллу
+ * @param props.children — фильтры / вкладки под шапкой
+ *
+ * @see PageShell, Section, Header, Badge
  */
-export declare function PageHead({ title, subtitle, actions, className, children, }: PageHeadProps): React.JSX.Element;
+export declare function PageHead({ title, sup, subtitle, actions, sticky, className, children, }: PageHeadProps): React.JSX.Element;

package/dist/PageHead.js

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

package/dist/{PageShell-CghThHS3.js → PageShell-D9EZiO8o.js}

@@ -1,28 +1,30 @@
 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 = {
+import './PageShell.css';const m = "ckr", f = "ckw", i = "ckb", k = "ckf", u = "cko", c = {
   r: m,
-  w: o,
-  b: f,
-  f: i
+  w: f,
+  b: i,
+  f: k,
+  o: u
 };
-function u({
+function d({
   children: s,
-  className: a,
-  wide: n,
+  className: n,
+  wide: o,
+  scroll: r = !0,
   footer: t,
-  ...r
+  ...a
 }) {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ...r,
-      className: l(c.r, n && c.w, a)
+      ...a,
+      className: l(c.r, o && c.w, !r && c.o, n)
     },
     /* @__PURE__ */ e.createElement("div", { className: c.b }, s),
     t != null ? /* @__PURE__ */ e.createElement("div", { className: c.f }, t) : null
   );
 }
 export {
-  u as P
+  d as P
 };

package/dist/PageShell.css

@@ -1 +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)}}
+@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)}.cko{overflow:visible;height:auto}.cko .ckb{overflow:visible;flex:0 1 auto;min-height:auto}}

package/dist/PageShell.d.ts

@@ -1,14 +1,14 @@
 import { default as React } from 'react';
 /**
- * Каркас модуля: скролл в body, опциональный footer прибит к низу.
+ * Каркас модуля: опциональный скролл в body, footer прибит к низу.
  *
  * Роли: PageShell = внутренний каркас контента в Layout;
  * сверху часто PageHead / Section, снизу — панель действий.
  *
  * @example
  * ```tsx
- * <PageShell wide footer={<Footer><Button>Сохранить</Button></Footer>}>
- *   <PageHead title="Редактор" />
+ * <PageShell wide scroll footer={<Footer><Button>Сохранить</Button></Footer>}>
+ *   <PageHead title="Редактор" sticky />
  *   …
  * </PageShell>
  * ```
@@ -16,18 +16,23 @@ import { default as React } from 'react';
  * Токены: `--shell-*`.
  */
 export type PageShellProps = {
-    /** Контент модуля (скроллится) */
+    /** Контент модуля */
     children: React.ReactNode;
     /** Доп. CSS-класс */
     className?: string;
     /** Шире контент (редакторы, таблицы) */
     wide?: boolean;
+    /**
+     * Скролл внутри body. По умолчанию `true`.
+     * `false` — шелл растёт с контентом, крутит предок.
+     */
+    scroll?: boolean;
     /** Нижняя панель вне скролла */
     footer?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className">;
 /**
- * Каркас модуля: скролл в body, footer прибит к низу.
+ * Каркас модуля: скролл в body (если `scroll`), footer прибит к низу.
  *
  * @see PageHead, Layout, Section, Footer
  */
-export declare function PageShell({ children, className, wide, footer, ...rootProps }: PageShellProps): React.JSX.Element;
+export declare function PageShell({ children, className, wide, scroll, footer, ...rootProps }: PageShellProps): React.JSX.Element;

package/dist/PageShell.js

@@ -1,4 +1,4 @@
-import { P as l } from "./PageShell-CghThHS3.js";
+import { P as l } from "./PageShell-D9EZiO8o.js";
 export {
   l as PageShell
 };

package/dist/Popover-g2xTGubK.js

@@ -0,0 +1,123 @@
+import w, { useRef as h, useId as Q, useState as x, useLayoutEffect as S, useEffect as W } from "react";
+import { createPortal as V } from "react-dom";
+import { c as H } from "./cx-CcykAxZN.js";
+import './Popover.css';const N = 1e3, X = 10;
+function E() {
+  const e = globalThis;
+  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
+}
+function Y() {
+  const e = E();
+  e.seq += 1;
+  const r = N + e.seq * X;
+  return e.active.add(r), r;
+}
+function B(e) {
+  const r = E();
+  r.active.delete(e), r.active.size === 0 && (r.seq = 0);
+}
+function oe() {
+  const e = E();
+  return e.active.size === 0 ? N : Math.max(...e.active);
+}
+const _ = "c3r", $ = "c3t", C = "c3p", y = {
+  r: _,
+  t: $,
+  p: C
+};
+function re({
+  trigger: e,
+  children: r,
+  open: L,
+  defaultOpen: D = !1,
+  onOpenChange: m,
+  align: M = "end",
+  disabled: g = !1,
+  label: O,
+  role: T = "menu",
+  className: A,
+  panelClassName: F
+}) {
+  const f = h(null), z = h(null), R = Q(), [K, U] = x(D), Z = L !== void 0, n = Z ? L : K, [c, I] = x(null), [i, P] = x(null), p = h(null);
+  p.current = i;
+  const v = (t) => {
+    g && t || (Z || U(t), m == null || m(t));
+  };
+  S(() => {
+    if (n) {
+      i == null && P(Y());
+      return;
+    }
+    i != null && (B(i), P(null));
+  }, [n, i]), W(() => () => {
+    p.current != null && B(p.current);
+  }, []);
+  const b = () => {
+    const t = f.current;
+    if (!t) return;
+    const o = t.getBoundingClientRect(), s = 8, a = window.innerHeight - o.bottom - s - 8, l = o.top - s - 8, u = a >= 160 || a >= l, q = Math.min(420, Math.max(120, u ? a : l)), d = Math.max(200, o.width), G = u ? o.bottom + s : Math.max(8, o.top - s - q), J = M === "end" ? Math.max(8, Math.min(o.right - d, window.innerWidth - d - 8)) : Math.max(8, Math.min(o.left, window.innerWidth - d - 8));
+    I({ top: G, left: J, minWidth: d, maxHeight: q });
+  };
+  S(() => {
+    if (!n) {
+      I(null);
+      return;
+    }
+    b();
+    const t = () => b();
+    return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
+    };
+  }, [n, M]), W(() => {
+    if (!n) return;
+    const t = (s) => {
+      var l, u;
+      const a = s.target;
+      (l = f.current) != null && l.contains(a) || (u = z.current) != null && u.contains(a) || v(!1);
+    }, o = (s) => {
+      s.key === "Escape" && v(!1);
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", o), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", o);
+    };
+  }, [n]);
+  const j = c ? {
+    position: "fixed",
+    top: c.top,
+    left: c.left,
+    minWidth: c.minWidth,
+    maxHeight: c.maxHeight,
+    zIndex: i ?? 1e3
+  } : void 0, k = n && c ? /* @__PURE__ */ w.createElement(
+    "div",
+    {
+      ref: z,
+      id: R,
+      role: T,
+      "aria-label": O,
+      className: H(y.p, F),
+      style: j,
+      onMouseDown: (t) => t.stopPropagation()
+    },
+    r
+  ) : null;
+  return /* @__PURE__ */ w.createElement("div", { ref: f, className: H(y.r, A) }, /* @__PURE__ */ w.createElement(
+    "div",
+    {
+      className: y.t,
+      "aria-haspopup": "menu",
+      "aria-expanded": n,
+      "aria-controls": n ? R : void 0,
+      onClick: () => {
+        g || v(!n);
+      }
+    },
+    e
+  ), k && typeof document < "u" ? V(k, document.body) : null);
+}
+export {
+  re as P,
+  Y as a,
+  oe as p,
+  B as r
+};

package/dist/Popover.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width, 200px);max-width:var(--dropdown-max-width, min(360px, calc(100vw - 16px) ));max-height:var(--dropdown-max-height, 420px)}}

package/dist/Popover.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+/**
+ * Портал у якоря: Escape, клик снаружи, z-index (`globalThis.elcrm.overlayZ`).
+ *
+ * Роли: Popover = свой попап (слот `children`).
+ * Типовое меню пунктов — {@link Dropdown}.
+ * Инлайн-навигация — {@link Menu} (не путать).
+ *
+ * Бывший `@elcrm/overlay` `Menu` — этот компонент (`Popover`).
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Ещё</Button>}
+ *   label="Действия"
+ *   align="end"
+ * >
+ *   <List>
+ *     <Item as="button">Скачать</Item>
+ *   </List>
+ * </Popover>
+ * ```
+ *
+ * Токены: `--shell-*`, `--popup-shadow`, `--dropdown-min-width`.
+ */
+export type PopoverProps = {
+    /** Якорь (кнопка / иконка) */
+    trigger: React.ReactNode;
+    /** Содержимое панели */
+    children?: React.ReactNode;
+    /** Контролируемое открытие */
+    open?: boolean;
+    /** Начальное открытие */
+    defaultOpen?: boolean;
+    /** Смена open */
+    onOpenChange?: (open: boolean) => void;
+    /** Выравнивание панели */
+    align?: "start" | "end";
+    /** Не открывать по клику на якорь */
+    disabled?: boolean;
+    /** aria-label панели */
+    label?: string;
+    /** role панели */
+    role?: React.AriaRole;
+    className?: string;
+    /** Класс панели (portal) */
+    panelClassName?: string;
+};
+/**
+ * Панель в portal рядом с триггером.
+ *
+ * @see Dropdown, Menu
+ */
+export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, disabled, label, role, className, panelClassName, }: PopoverProps): React.JSX.Element;

package/dist/Popover.js

@@ -0,0 +1,4 @@
+import { P as e } from "./Popover-g2xTGubK.js";
+export {
+  e as Popover
+};

package/dist/{Row--HIe6vb9.js → Row-DsQOVn18.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { S as o } from "./Stack-b0-XWwQ1.js";
+import { S as o } from "./Stack-XkmPSswj.js";
 function c(r) {
   return /* @__PURE__ */ t.createElement(o, { direction: "row", ...r });
 }

package/dist/Row.js

@@ -1,4 +1,4 @@
-import { R } from "./Row--HIe6vb9.js";
+import { R } from "./Row-DsQOVn18.js";
 export {
   R as Row
 };

package/dist/Sidebar-DeqxYgxn.js

@@ -0,0 +1,69 @@
+import l from "react";
+import { B as h } from "./Badge-jp-9iNNL.js";
+import { I as x } from "./Item-D4okhsfW.js";
+import { c as u } from "./cx-CcykAxZN.js";
+import './Sidebar.css';const k = "c2r", g = "c2b", y = "c2x", B = "c2g", I = "c2s", w = "c2p", z = "c2h", C = "c2n", R = "c2i", T = "c2a", $ = "c2o", j = "c2l", q = "c2d", A = "c2f", D = "c2v", e = {
+  r: k,
+  b: g,
+  x: y,
+  g: B,
+  s: I,
+  p: w,
+  h: z,
+  n: C,
+  i: R,
+  a: T,
+  o: $,
+  l: j,
+  d: q,
+  f: A,
+  v: D
+};
+function F(n) {
+  if (n == null || n === "") return null;
+  const c = Number(n);
+  return !Number.isNaN(c) && c === 0 ? null : !Number.isNaN(c) && c > 99 ? "99+" : String(n);
+}
+function L({
+  groups: n,
+  items: c,
+  value: v,
+  onSelect: s,
+  variant: E = "cards",
+  brand: o,
+  extra: r,
+  footer: N,
+  version: m,
+  className: f,
+  "aria-label": b = "Основное меню"
+}) {
+  const p = n ?? c ?? [];
+  return /* @__PURE__ */ l.createElement(
+    "aside",
+    {
+      className: u(e.r, E === "plain" && e.p, f),
+      "aria-label": b
+    },
+    o != null || r != null ? /* @__PURE__ */ l.createElement("div", { className: e.b }, o, r != null ? /* @__PURE__ */ l.createElement("div", { className: e.x }, r) : null) : null,
+    /* @__PURE__ */ l.createElement("div", { className: e.g }, p.map((t) => /* @__PURE__ */ l.createElement("nav", { key: t.value, className: e.s, "aria-label": t.title ?? "Навигация" }, t.title ? /* @__PURE__ */ l.createElement("div", { className: e.h }, t.title) : null, /* @__PURE__ */ l.createElement("ul", { className: e.n }, (t.items ?? []).map((a) => {
+      const d = F(a.badge), i = v === a.value;
+      return /* @__PURE__ */ l.createElement("li", { key: a.value }, /* @__PURE__ */ l.createElement(
+        x,
+        {
+          as: "button",
+          active: i,
+          className: u(e.i, i && e.a),
+          "aria-current": i ? "page" : void 0,
+          onClick: () => s == null ? void 0 : s(a.value)
+        },
+        a.icon != null ? /* @__PURE__ */ l.createElement("span", { className: e.o, "aria-hidden": !0 }, a.icon) : null,
+        /* @__PURE__ */ l.createElement("span", { className: e.l }, a.label),
+        d != null ? /* @__PURE__ */ l.createElement(h, { className: e.d, tone: "accent", size: "s" }, d) : null
+      ));
+    }))))),
+    N != null || m != null ? /* @__PURE__ */ l.createElement("div", { className: u(e.s, e.f) }, N, m != null ? /* @__PURE__ */ l.createElement("div", { className: e.v }, m) : null) : null
+  );
+}
+export {
+  L as S
+};

package/dist/Sidebar.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:0 0 var(--sidebar-width);width:var(--sidebar-width);min-height:100svh;max-height:100svh;padding:var(--sidebar-pad-y) var(--sidebar-pad-x);gap:var(--shell-gap-sm);color:var(--shell-color);position:sticky;top:0;align-self:flex-start}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg, var(--shell-background));border:1px solid var(--sidebar-block-border, var(--shell-border));border-radius:var(--sidebar-block-radius, var(--shell-radius));box-shadow:var(--sidebar-block-shadow, none)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size, 11px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding, 6px 10px);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size, 13px);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active, var(--shell-color));background:var(--sidebar-item-active-bg, var(--shell-background-selected))}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size, 16px);height:var(--sidebar-icon-size, 16px);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size, 16px);height:var(--sidebar-icon-size, 16px)}.c2a .c2o{color:var(--sidebar-icon-active, var(--shell-color-accent))}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2f{margin-top:auto}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{flex:0 0 72px;width:72px;padding:12px 8px}.c2l,.c2h,.c2v{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}

package/dist/Sidebar.d.ts

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+/** Вид колонки: карточки (консоль) или плоский список (backoffice) */
+export type SidebarVariant = "cards" | "plain";
+/** Пункт бокового меню. Идентификатор — `value`. */
+export type SidebarItem = {
+    value: string;
+    /** Подпись */
+    label: string;
+    /** Иконка (слот приложения) */
+    icon?: React.ReactNode;
+    /** Счётчик справа */
+    badge?: number | string | null;
+};
+/** Группа пунктов. `title` — «Аккаунт» / «Админ». */
+export type SidebarGroup = {
+    value: string;
+    title?: string;
+    items: SidebarItem[];
+};
+/**
+ * Левая колонка приложения: бренд, группы меню, футер.
+ *
+ * Роли: Sidebar = навигация приложения; не путать с NavSections
+ * (сайдбар внутри страницы + lazy-панель).
+ *
+ * `variant="cards"` — секции-карточки (elWMS Console).
+ * `variant="plain"` — плоский список и заголовок группы (backoffice).
+ *
+ * Иконки, колокольчик, тема, выход — слоты приложения
+ * (`brand`, `extra`, `footer`). Роутер не подключаем.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   variant="cards"
+ *   value={page}
+ *   onSelect={setPage}
+ *   brand={<Brand as="strong">App</Brand>}
+ *   extra={<Notifications.Bell />}
+ *   groups={[
+ *     { value: "main", items: [{ value: "home", label: "Обзор", icon: <Icon /> }] },
+ *     { value: "admin", title: "Админ", items: [{ value: "users", label: "Люди" }] },
+ *   ]}
+ *   footer={<AvatarName title="Паша" description="mail@…" />}
+ *   version="v 0.2.26"
+ * />
+ * ```
+ *
+ * Токены: `--sidebar-*`, цвета — `--shell-*`.
+ */
+export type SidebarProps = {
+    /** Группы пунктов (`value` + `items`) */
+    groups?: SidebarGroup[];
+    /** То же, что `groups` (совместимость) */
+    items?: SidebarGroup[];
+    /** Текущий пункт */
+    value?: string;
+    /** Выбор пункта */
+    onSelect?: (value: string) => void;
+    /**
+     * `cards` — блоки-карточки.
+     * `plain` — плоский список.
+     * @default "cards"
+     */
+    variant?: SidebarVariant;
+    /** Логотип / название */
+    brand?: React.ReactNode;
+    /** Справа от бренда (колокольчик) */
+    extra?: React.ReactNode;
+    /** Низ: тема, выход или карточка пользователя */
+    footer?: React.ReactNode;
+    /** Версия под футером */
+    version?: React.ReactNode;
+    /** Подпись колонки */
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * Левая навигация приложения.
+ *
+ * @see Layout, Brand, Item, Badge, NavSections
+ */
+export declare function Sidebar({ groups, items, value, onSelect, variant, brand, extra, footer, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;

package/dist/Sidebar.js

@@ -0,0 +1,4 @@
+import { S as e } from "./Sidebar-DeqxYgxn.js";
+export {
+  e as Sidebar
+};

package/dist/Stack-XkmPSswj.js

@@ -0,0 +1,53 @@
+import m from "react";
+import { c as f } from "./cx-CcykAxZN.js";
+import './Stack.css';function l(t) {
+  if (t != null)
+    return { gap: typeof t == "number" ? `${t}px` : t };
+}
+const i = "c1r", p = "c1c", g = "c1g", h = "c1h", v = "c1n", r = {
+  r: i,
+  c: p,
+  g,
+  h,
+  n: v
+};
+function x(t) {
+  if (typeof t == "number")
+    return t <= 0 ? void 0 : `repeat(${t}, minmax(0, 1fr))`;
+  if (t.length !== 0)
+    return t.map((n) => typeof n == "number" ? `${n}px` : n).join(" ");
+}
+function k({
+  direction: t = "column",
+  columns: n,
+  gap: c,
+  children: o,
+  className: a,
+  style: s,
+  ...u
+}) {
+  const e = t === "grid" && n != null ? x(n) : void 0;
+  return /* @__PURE__ */ m.createElement(
+    "div",
+    {
+      className: f(
+        r.r,
+        t === "column" && r.c,
+        t === "row" && r.h,
+        t === "grid" && (e ? r.n : r.g),
+        a
+      ),
+      style: {
+        ...l(c),
+        ...e ? { "--stack-columns-template": e } : null,
+        ...s
+      },
+      ...u
+    },
+    o
+  );
+}
+export {
+  k as S,
+  x as s
+};

package/dist/Stack.css

@@ -1 +1 @@
-@layer elcrm-components{.c1r{display:flex;flex-direction:column;gap:var(--shell-gap)}.c1h{flex-direction:row;flex-wrap:wrap;align-items:center}}
+@layer elcrm-components{.c1r{box-sizing:border-box;min-width:0;gap:var(--shell-gap)}.c1c,.c1g{width:100%}.c1c{display:flex;flex-direction:column}.c1h{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:100%}.c1g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--stack-grid-min)),1fr))}.c1n{display:grid;width:100%;align-items:stretch;grid-template-columns:var(--stack-columns-template)}}

package/dist/Stack.d.ts

@@ -1,6 +1,10 @@
 import { default as React } from 'react';
 /** Направление раскладки стека */
-export type StackDirection = "row" | "column";
+export type StackDirection = "row" | "column" | "grid";
+/** Сетка: число равных колонок или треки (`1fr`, `100px`, …). Число в массиве — px. */
+export type StackColumns = number | Array<number | string>;
+/** CSS `grid-template-columns` из пропа `columns`. */
+export declare function stackColumnsTemplate(columns: StackColumns): string | undefined;
 /**
  * Универсальный стек (ряд / колонка) с отступами между детьми.
  *
@@ -13,13 +17,21 @@ export type StackDirection = "row" | "column";
  *   <Button>Отмена</Button>
  *   <Button>Сохранить</Button>
  * </Stack>
+ * <Stack direction="grid" columns={["1fr", "100px", "100px"]} gap={12} />
  * ```
  *
- * Токены: `--shell-gap` (если `gap` не задан); при `gap` — inline-стиль.
+ * Токены: `--shell-gap` (если `gap` не задан); сетка — `--stack-grid-min`.
+ * `columns` — число равных колонок или массив треков (`--stack-columns-template`).
+ * Явные колонки: `align-items: stretch` (несколько рядов). Центр в одном ряду — `style={{ alignItems: "center" }}`.
  */
 export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Направление: по умолчанию `column` */
+    /** Направление: по умолчанию `column`. `grid` — сетка */
     direction?: StackDirection;
+    /**
+     * Сетка: `4` — четыре равные колонки;
+     * `["1fr", "100px", "auto"]` — свои треки (число в массиве = px).
+     */
+    columns?: StackColumns;
     /** Отступ между детьми: число (px) или CSS-строка */
     gap?: number | string;
     /** Дочерние элементы стека */
@@ -31,4 +43,4 @@ export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
  *
  * @see Block, Row, Column
  */
-export declare function Stack({ direction, gap, children, className, style, ...rest }: StackProps): React.JSX.Element;
+export declare function Stack({ direction, columns, gap, children, className, style, ...rest }: StackProps): React.JSX.Element;

package/dist/Stack.js

@@ -1,4 +1,5 @@
-import { S as r } from "./Stack-b0-XWwQ1.js";
+import { S as t, s as e } from "./Stack-XkmPSswj.js";
 export {
-  r as Stack
+  t as Stack,
+  e as stackColumnsTemplate
 };