@elcrm/components 0.1.1 → 0.2.0

package/dist/RadioGroup-fcXzhvMu.js

@@ -0,0 +1,129 @@
+import e from "react";
+import { C as w } from "./CheckIcon-FdB8fMEF.js";
+import { c as r } from "./cx-CcykAxZN.js";
+import { u as C } from "./useControllableValue-CWqH1kpM.js";
+import './RadioGroup.css';const z = "cqr", R = "cqi", D = "cqs", F = "cqp", I = "cqh", V = "cqn", A = "cqm", B = "cqf", G = "cqc", L = "cqt", M = "cqe", P = "cqd", T = "cqx", $ = "cqy", j = "cqz", H = "cqk", J = "cqo", K = "cqq", O = "cqw", l = {
+  r: z,
+  i: R,
+  s: D,
+  p: F,
+  h: I,
+  n: V,
+  m: A,
+  f: B,
+  c: G,
+  t: L,
+  e: M,
+  d: P,
+  x: T,
+  y: $,
+  z: j,
+  k: H,
+  o: J,
+  q: K,
+  w: O
+};
+function E({
+  kind: a,
+  selected: c
+}) {
+  const t = a === "radio";
+  return /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: r(l.k, t ? l.o : l.q),
+      "data-on": c ? "true" : void 0,
+      "aria-hidden": !0
+    },
+    !t && c ? /* @__PURE__ */ e.createElement(w, { className: l.w }) : null
+  );
+}
+function d({
+  title: a,
+  meta: c,
+  price: t,
+  badge: s
+}) {
+  return a == null && c == null && t == null && s == null ? null : /* @__PURE__ */ e.createElement("div", { className: l.t }, t != null ? /* @__PURE__ */ e.createElement("span", { className: l.z }, t) : null, a ?? null, c != null ? /* @__PURE__ */ e.createElement("span", { className: l.e }, c) : null, s ?? null);
+}
+function q({ children: a }) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: l.x,
+      onClick: (c) => c.stopPropagation(),
+      onMouseDown: (c) => c.preventDefault()
+    },
+    a
+  );
+}
+function X({
+  items: a,
+  value: c,
+  defaultValue: t,
+  name: s,
+  disabled: i = !1,
+  indicator: m = "check",
+  indicatorSide: v = "end",
+  onValueChange: f,
+  className: N,
+  ...k
+}) {
+  const h = e.useId(), b = s ?? h, [g, x] = C(
+    c,
+    t,
+    f
+  );
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: r(l.r, N),
+      role: "radiogroup",
+      "aria-disabled": i || void 0,
+      ...k
+    },
+    a.map((n) => {
+      const o = g === n.value, y = i || !!n.disabled, u = n.variant === "split", p = n.iconFramed !== !1;
+      return /* @__PURE__ */ e.createElement(
+        "label",
+        {
+          key: n.value,
+          className: r(l.i, o && l.s, u && l.p),
+          "data-selected": o ? "true" : void 0,
+          "data-indicator": u ? void 0 : v
+        },
+        /* @__PURE__ */ e.createElement(
+          "input",
+          {
+            className: l.n,
+            type: "radio",
+            name: b,
+            value: n.value,
+            checked: o,
+            disabled: y,
+            onChange: () => x(n.value)
+          }
+        ),
+        u ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: l.h }, n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: r(l.m, p && l.f) }, n.icon) : null, /* @__PURE__ */ e.createElement(d, { title: n.title }), /* @__PURE__ */ e.createElement(E, { kind: m, selected: o })), /* @__PURE__ */ e.createElement("div", { className: l.y }, /* @__PURE__ */ e.createElement(
+          d,
+          {
+            price: n.price,
+            meta: n.meta,
+            badge: n.badge
+          }
+        ), n.description != null ? /* @__PURE__ */ e.createElement("p", { className: l.d }, n.description) : null, n.actions != null ? /* @__PURE__ */ e.createElement(q, null, n.actions) : null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: r(l.m, p && l.f) }, n.icon) : null, /* @__PURE__ */ e.createElement("div", { className: l.c }, /* @__PURE__ */ e.createElement(
+          d,
+          {
+            title: n.title,
+            meta: n.meta,
+            price: n.price,
+            badge: n.badge
+          }
+        ), n.description != null ? /* @__PURE__ */ e.createElement("p", { className: l.d }, n.description) : null, n.actions != null ? /* @__PURE__ */ e.createElement(q, null, n.actions) : null), /* @__PURE__ */ e.createElement(E, { kind: m, selected: o }))
+      );
+    })
+  );
+}
+export {
+  X as R
+};

package/dist/RadioGroup.css

@@ -1 +1 @@
-@layer elcrm-components{.cqr{display:flex;flex-direction:column;gap:var(--shell-gap)}.cqi{display:flex;align-items:flex-start;gap:var(--shell-gap);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cqi:hover:not(:disabled){background:var(--shell-background-hover)}.cqi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cqs,.cqi[data-selected=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cqp{flex-direction:column;align-items:stretch;padding:0;gap:0}.cqp.cqs .cqh,.cqp[data-selected=true] .cqh{border-bottom-color:var(--shell-color-accent)}.cqn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cqm{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden}.cqf{width:var(--shell-icon-size);height:var(--shell-icon-size);padding:var(--shell-gap-sm);box-sizing:content-box;color:var(--shell-color-muted);background:var(--shell-background-muted);border:1px solid var(--shell-border);border-radius:var(--shell-radius)}.cqc{display:flex;flex:1;flex-direction:column;gap:var(--shell-gap-sm);min-width:0}.cqt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm);font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cqe{font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted)}.cqd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cqx{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);margin-top:var(--shell-gap-sm)}.cqh{display:flex;align-items:center;gap:var(--shell-gap);padding:var(--shell-padding);border-bottom:1px solid var(--shell-border)}.cqh .cqt{flex:1;min-width:0}.cqy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding)}.cqz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.2}.cqk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-left:auto;box-sizing:border-box;border:1px solid var(--shell-border);background:var(--shell-background);color:#fff}.cqi[data-indicator=start]>.cqk{margin-left:0;order:-1}.cqo{border-radius:50%}.cqo[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent);box-shadow:inset 0 0 0 3px var(--shell-background-selected)}.cqq{border-radius:calc(var(--shell-radius) * .4)}.cqq[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.cqw{width:60%;height:60%;display:block}}
+@layer elcrm-components{.cqr{display:flex;flex-direction:column;gap:var(--shell-gap)}.cqi{display:flex;align-items:flex-start;gap:var(--shell-gap);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cqi:hover:not(:disabled){background:var(--shell-background-hover)}.cqi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cqs,.cqi[data-selected=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cqp{flex-direction:column;align-items:stretch;padding:0;gap:0}.cqp.cqs .cqh,.cqp[data-selected=true] .cqh{border-bottom-color:var(--shell-color-accent)}.cqn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cqm{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden}.cqf{width:var(--shell-icon-size);height:var(--shell-icon-size);padding:var(--shell-gap-sm);box-sizing:content-box;color:var(--shell-color-muted);background:var(--shell-background-muted);border:1px solid var(--shell-border);border-radius:var(--shell-radius)}.cqc{display:flex;flex:1;flex-direction:column;gap:var(--shell-gap-sm);min-width:0}.cqt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm);font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cqe{font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted)}.cqd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cqx{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);margin-top:var(--shell-gap-sm)}.cqh{display:flex;align-items:center;gap:var(--shell-gap);padding:var(--shell-padding);border-bottom:1px solid var(--shell-border)}.cqh .cqt{flex:1;min-width:0}.cqy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding)}.cqz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.2}.cqk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-left:auto;box-sizing:border-box;border:1px solid var(--shell-border);background:var(--shell-background);color:var(--avatar-color)}.cqi[data-indicator=start]>.cqk{margin-left:0;order:-1}.cqo{border-radius:50%}.cqo[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent);box-shadow:inset 0 0 0 3px var(--shell-background-selected)}.cqq{border-radius:calc(var(--shell-radius) * .4)}.cqq[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.cqw{width:60%;height:60%;display:block}}

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-import { R as a } from "./RadioGroup-D2UUOTkY.js";
+import { R as a } from "./RadioGroup-fcXzhvMu.js";
 export {
   a as RadioGroup
 };

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-CBYq1ad6.js

@@ -0,0 +1,107 @@
+import e from "react";
+import { B as h } from "./Badge-jp-9iNNL.js";
+import { D as w } from "./Dropdown-4yUB2tk1.js";
+import { I as y } from "./Item-D4okhsfW.js";
+import { b as C } from "./badgeText-CRzlIzi3.js";
+import { c as u } from "./cx-CcykAxZN.js";
+import './Sidebar.css';const q = "c2r", B = "c2b", D = "c2x", T = "c2g", z = "c2s", F = "c2p", I = "c2h", M = "c2n", R = "c2i", V = "c2a", $ = "c2o", j = "c2l", A = "c2d", G = "c2f", H = "c2q", J = "c2w", K = "c2u", L = "c2k", O = "c2v", l = {
+  r: q,
+  b: B,
+  x: D,
+  g: T,
+  s: z,
+  p: F,
+  h: I,
+  n: M,
+  i: R,
+  a: V,
+  o: $,
+  l: j,
+  d: A,
+  f: G,
+  q: H,
+  w: J,
+  u: K,
+  k: L,
+  v: O
+};
+function P({ className: c }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: c, viewBox: "0 0 16 16", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }), /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }), /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" }));
+}
+function Q({
+  footer: c,
+  className: E,
+  ...a
+}) {
+  const r = /* @__PURE__ */ e.createElement(P, { className: l.k });
+  if (e.isValidElement(c) && typeof c.type != "string") {
+    const n = c.props;
+    return e.cloneElement(c, {
+      as: "button",
+      extra: n.extra ?? r,
+      className: u(n.className, E),
+      ...a,
+      onClick: (i) => {
+        var m, t;
+        (m = n.onClick) == null || m.call(n, i), (t = a.onClick) == null || t.call(a, i);
+      }
+    });
+  }
+  return /* @__PURE__ */ e.createElement("button", { type: "button", className: u(l.u, E), ...a }, /* @__PURE__ */ e.createElement("span", { className: l.w }, c), r);
+}
+function S({
+  groups: c,
+  items: E,
+  value: a,
+  onSelect: r,
+  variant: n = "cards",
+  brand: i,
+  extra: m,
+  footer: t,
+  footerItems: d,
+  onFooterSelect: v,
+  footerMenuLabel: g = "Меню аккаунта",
+  version: p,
+  className: k,
+  "aria-label": x = "Основное меню"
+}) {
+  const f = c ?? E ?? [];
+  return /* @__PURE__ */ e.createElement(
+    "aside",
+    {
+      className: u(l.r, n === "plain" && l.p, k),
+      "aria-label": x
+    },
+    i != null || m != null ? /* @__PURE__ */ e.createElement("div", { className: l.b }, i, m != null ? /* @__PURE__ */ e.createElement("div", { className: l.x }, m) : null) : null,
+    /* @__PURE__ */ e.createElement("div", { className: l.g }, f.map((o) => /* @__PURE__ */ e.createElement("nav", { key: o.value, className: l.s, "aria-label": o.title ?? "Навигация" }, o.title ? /* @__PURE__ */ e.createElement("div", { className: l.h }, o.title) : null, /* @__PURE__ */ e.createElement("ul", { className: l.n }, (o.items ?? []).map((s) => {
+      const b = C(s.badge), N = a === s.value;
+      return /* @__PURE__ */ e.createElement("li", { key: s.value }, /* @__PURE__ */ e.createElement(
+        y,
+        {
+          as: "button",
+          active: N,
+          className: u(l.i, N && l.a),
+          "aria-current": N ? "page" : void 0,
+          onClick: () => r == null ? void 0 : r(s.value)
+        },
+        s.icon != null ? /* @__PURE__ */ e.createElement("span", { className: l.o, "aria-hidden": !0 }, s.icon) : null,
+        /* @__PURE__ */ e.createElement("span", { className: l.l }, s.label),
+        b != null ? /* @__PURE__ */ e.createElement(h, { className: l.d, tone: "accent", size: "s" }, b) : null
+      ));
+    }))))),
+    t != null || p != null ? /* @__PURE__ */ e.createElement("div", { className: u(l.s, l.f) }, t != null && d != null && d.length > 0 ? /* @__PURE__ */ e.createElement(
+      w,
+      {
+        className: l.q,
+        align: "start",
+        label: g,
+        trigger: /* @__PURE__ */ e.createElement(Q, { footer: t, className: l.w }),
+        items: d,
+        onSelect: v
+      }
+    ) : t, p != null ? /* @__PURE__ */ e.createElement("div", { className: l.v }, p) : null) : null
+  );
+}
+export {
+  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:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y) var(--sidebar-pad-x);gap:var(--shell-gap-sm);color:var(--shell-color);align-self:stretch}.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);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);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);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);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);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.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}.c2q{display:flex;width:100%;min-width:0}.c2q>*{display:flex;width:100%;min-width:0}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.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,99 @@
+import { default as React } from 'react';
+import { DropdownItem } from './Dropdown';
+/** Вид колонки: карточки (консоль) или плоский список (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@…" />}
+ *   footerItems={[
+ *     { value: "home", label: "Главная", icon: <Icon /> },
+ *     { value: "theme", label: "Тема", submenu: true },
+ *     { value: "logout", label: "Выйти", danger: true },
+ *   ]}
+ *   onFooterSelect={(value) => console.log(value)}
+ *   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;
+    /**
+     * Меню по клику на `footer` (Dropdown).
+     * Есть пункты → футер становится триггером, справа ⋮.
+     */
+    footerItems?: DropdownItem[];
+    /** Выбор пункта меню аккаунта */
+    onFooterSelect?: (value: string, item: DropdownItem) => void;
+    /** `aria-label` панели меню аккаунта */
+    footerMenuLabel?: string;
+    /** Версия под футером */
+    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, footerItems, onFooterSelect, footerMenuLabel, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;

package/dist/Sidebar.js

@@ -0,0 +1,4 @@
+import { S as e } from "./Sidebar-CBYq1ad6.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
 };

package/dist/Stat-C5iZyEoo.js

@@ -0,0 +1,27 @@
+import a from "react";
+import { C as u } from "./Card-hn37Opo3.js";
+import { c as t } from "./cx-CcykAxZN.js";
+import './Stat.css';const d = "c4r", p = "c4l", i = "c4le", w = "c4v", f = "c4a", v = "c4u", C = "c4w", E = "c4d", c = {
+  r: d,
+  l: p,
+  le: i,
+  v: w,
+  a: f,
+  u: v,
+  w: C,
+  d: E
+};
+function S({
+  label: e,
+  value: n,
+  tone: s = "neutral",
+  labelMuted: r = !0,
+  className: l,
+  ...o
+}) {
+  const m = s === "accent" ? c.a : s === "success" ? c.u : s === "warning" ? c.w : s === "danger" ? c.d : c.n;
+  return /* @__PURE__ */ a.createElement(u, { className: t(c.r, m, l), ...o }, /* @__PURE__ */ a.createElement("span", { className: t(c.l, !r && c.le) }, e), /* @__PURE__ */ a.createElement("span", { className: c.v }, n));
+}
+export {
+  S
+};

package/dist/Stat.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c4r{display:flex;flex-direction:column;gap:6px}.c4l{font-size:var(--shell-font-size-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted);line-height:1.2}.c4le{color:var(--shell-color)}.c4v{font-size:var(--stat-value-size);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--shell-color)}.c4a .c4v{color:var(--shell-color-accent)}.c4u .c4v{color:var(--shell-color-success)}.c4w .c4v{color:var(--shell-color-warning)}.c4d .c4v{color:var(--shell-color-danger)}}

package/dist/Stat.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+/** Тон числа — те же смыслы, что у Badge */
+export type StatTone = "neutral" | "accent" | "success" | "warning" | "danger";
+/**
+ * Карточка-метрика: подпись сверху, крупное число снизу.
+ *
+ * Роли: сводка на PageHead / над списком. Не заменяет Card с произвольным контентом.
+ *
+ * @param label подпись (обычно uppercase в CSS)
+ * @param value число или короткий текст
+ * @param tone цвет значения
+ * @param labelMuted приглушённая подпись (выключить для «всего»)
+ *
+ * @example
+ * ```tsx
+ * <Stack direction="grid" gap={12}>
+ *   <Stat label="Всего" value={10} labelMuted={false} />
+ *   <Stat label="Admin" value={6} tone="accent" />
+ * </Stack>
+ * ```
+ *
+ * Токены: `--shell-*`, размер числа — `--stat-value-size`.
+ */
+export type StatProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Подпись метрики */
+    label: React.ReactNode;
+    /** Значение */
+    value: React.ReactNode;
+    /** Цвет числа */
+    tone?: StatTone;
+    /** Приглушить подпись (по умолчанию да) */
+    labelMuted?: boolean;
+};
+/**
+ * Карточка-метрика (обёртка над Card).
+ *
+ * @see Card, Stack, Badge
+ */
+export declare function Stat({ label, value, tone, labelMuted, className, ...rest }: StatProps): React.JSX.Element;

package/dist/Stat.js

@@ -0,0 +1,4 @@
+import { S as o } from "./Stat-C5iZyEoo.js";
+export {
+  o as Stat
+};

package/dist/TabSections-DN7yVJoF.js

@@ -0,0 +1,69 @@
+import a, { useMemo as g, Suspense as k } from "react";
+import { c as b } from "./cx-CcykAxZN.js";
+import { h as y } from "./rovingKeys-CGlfTtNQ.js";
+import { u as x } from "./useControllableValue-CWqH1kpM.js";
+import './TabSections.css';const S = "ctr", h = "ctb", C = "ctn", K = "ctt", R = "cta", T = "cte", w = "cts", D = "ctm", l = {
+  r: S,
+  b: h,
+  n: C,
+  t: K,
+  a: R,
+  e: T,
+  s: w,
+  m: D
+};
+function j({
+  items: n = [],
+  resolveSection: m,
+  value: d,
+  defaultValue: s,
+  onValueChange: v,
+  loading: i = null,
+  actions: r,
+  className: p,
+  navLabel: E = "Вкладки"
+}) {
+  const f = g(() => {
+    var e;
+    return s || (((e = n.find((t) => !t.disabled)) == null ? void 0 : e.value) ?? "");
+  }, [s, n]), [c, o] = x(
+    d,
+    f,
+    v
+  ), N = n.filter((e) => !e.disabled).map((e) => e.value), u = c ? m(c) : null;
+  return /* @__PURE__ */ a.createElement("div", { className: b(l.r, p) }, /* @__PURE__ */ a.createElement("div", { className: l.b }, /* @__PURE__ */ a.createElement(
+    "nav",
+    {
+      className: l.n,
+      "aria-label": E,
+      role: "tablist",
+      onKeyDown: (e) => y(e, {
+        values: N,
+        value: c,
+        onSelect: o
+      })
+    },
+    n.map((e) => {
+      const t = e.value === c;
+      return /* @__PURE__ */ a.createElement(
+        "button",
+        {
+          key: e.value,
+          type: "button",
+          role: "tab",
+          className: b(l.t, t && l.a),
+          "data-active": t ? "true" : void 0,
+          "aria-selected": t,
+          tabIndex: t ? 0 : -1,
+          disabled: e.disabled,
+          onClick: () => o(e.value)
+        },
+        /* @__PURE__ */ a.createElement("span", null, e.label),
+        e.badge != null && e.badge !== "" ? /* @__PURE__ */ a.createElement("em", { className: l.e }, e.badge) : null
+      );
+    })
+  ), r != null ? /* @__PURE__ */ a.createElement("div", { className: l.s }, r) : null), /* @__PURE__ */ a.createElement("div", { className: l.m, role: "tabpanel" }, u ? /* @__PURE__ */ a.createElement(k, { fallback: i }, a.createElement(u)) : null));
+}
+export {
+  j as T
+};

package/dist/TabSections.css

@@ -1 +1 @@
-@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:#fff;font-size:11px;font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ctm{min-width:0;width:100%}}
+@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:var(--avatar-color);font-size:var(--sidebar-group-font-size);font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ctm{min-width:0;width:100%}}

package/dist/TabSections.js

@@ -1,4 +1,4 @@
-import { T as e } from "./TabSections-DL7DufKU.js";
+import { T as e } from "./TabSections-DN7yVJoF.js";
 export {
   e as TabSections
 };