@elcrm/components 0.1.0 → 0.1.2

package/dist/{Breadcrumb-D0wXkE38.js → Breadcrumb-CAM_e9LN.js}

@@ -1,6 +1,6 @@
 import e from "react";
 import { c as x } from "./cx-CcykAxZN.js";
-import './Breadcrumb.css';const y = "c0r", w = "c0i", B = "c0c", L = "c0n", C = "c0l", F = "c0d", M = "c0s", $ = "c0sv", S = "c0e", l = {
+import './Breadcrumb.css';const y = "c0r", w = "c0i", B = "c0c", L = "c0n", C = "c0l", F = "c0d", M = "c0s", $ = "c0v", S = "c0e", l = {
   r: y,
   i: w,
   c: B,
@@ -8,11 +8,11 @@ import './Breadcrumb.css';const y = "c0r", w = "c0i", B = "c0c", L = "c0n", C =
   l: C,
   d: F,
   s: M,
-  sv: $,
+  v: $,
   e: S
 };
 function Z() {
-  return /* @__PURE__ */ e.createElement("svg", { className: l.sv, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("svg", { className: l.v, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
     "path",
     {
       d: "M4.5 2.5 8 6l-3.5 3.5",

package/dist/Breadcrumb.css

@@ -1 +1 @@
-@layer elcrm-components{.c0r{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm);list-style:none;margin:0;padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.c0i{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);min-width:0;color:inherit}.c0i:is(a,button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:none;background:transparent;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-decoration:none}.c0i:is(a,button):hover{color:var(--shell-color)}.c0c,.c0i[aria-current=page]{color:var(--shell-color-accent);cursor:default}.c0n{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);overflow:hidden;border-radius:calc(var(--shell-radius) * .5);color:inherit}.c0n img{width:100%;height:100%;object-fit:cover;display:block}.c0l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c0d{display:inline-flex;flex-shrink:0;width:.75rem;height:.75rem;color:var(--shell-color-muted)}.c0s{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--shell-color-muted);-webkit-user-select:none;user-select:none}.c0sv{width:.75rem;height:.75rem;display:block}.c0e{display:inline-flex;align-items:center;justify-content:center;min-width:1em;color:var(--shell-color-muted);letter-spacing:.05em}.c0e:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:.15rem .35rem;border:none;border-radius:calc(var(--shell-radius) * .4);background:transparent;font:inherit;color:inherit;cursor:pointer}.c0e:is(button):hover{background:var(--shell-background-hover);color:var(--shell-color)}}
+@layer elcrm-components{.c0r{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm);list-style:none;margin:0;padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.c0i{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);min-width:0;color:inherit}.c0i:is(a,button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:none;background:transparent;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-decoration:none}.c0i:is(a,button):hover{color:var(--shell-color)}.c0c,.c0i[aria-current=page]{color:var(--shell-color-accent);cursor:default}.c0n{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);overflow:hidden;border-radius:calc(var(--shell-radius) * .5);color:inherit}.c0n img{width:100%;height:100%;object-fit:cover;display:block}.c0l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c0d{display:inline-flex;flex-shrink:0;width:.75rem;height:.75rem;color:var(--shell-color-muted)}.c0s{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--shell-color-muted);-webkit-user-select:none;user-select:none}.c0v{width:.75rem;height:.75rem;display:block}.c0e{display:inline-flex;align-items:center;justify-content:center;min-width:1em;color:var(--shell-color-muted);letter-spacing:.05em}.c0e:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:.15rem .35rem;border:none;border-radius:calc(var(--shell-radius) * .4);background:transparent;font:inherit;color:inherit;cursor:pointer}.c0e:is(button):hover{background:var(--shell-background-hover);color:var(--shell-color)}}

package/dist/Breadcrumb.js

@@ -1,4 +1,4 @@
-import { B as e } from "./Breadcrumb-D0wXkE38.js";
+import { B as e } from "./Breadcrumb-CAM_e9LN.js";
 export {
   e as Breadcrumb
 };

package/dist/Card.css

@@ -1 +1 @@
-@layer elcrm-components{.cdr{background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);padding:var(--shell-padding);box-shadow:var(--shell-shadow)}.cdt{margin:0 0 var(--shell-gap-sm);font-size:var(--shell-font-size-lg);font-weight:var(--shell-font-weight);color:var(--shell-color)}}
+@layer elcrm-components{.cdr{background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);padding:var(--shell-padding);box-shadow:var(--shell-shadow);cursor:var(--card-pointer, auto)}.cdt{margin:0 0 var(--shell-gap-sm);font-size:var(--shell-font-size-lg);font-weight:var(--shell-font-weight);color:var(--shell-color)}}

package/dist/Card.d.ts

@@ -12,7 +12,14 @@ import { default as React } from 'react';
  * </Card>
  * ```
  *
- * Токены: `--shell-*`.
+ * Токены: `--shell-*`, курсор — `--card-pointer` (по умолчанию `auto`).
+ *
+ * @example
+ * ```tsx
+ * <Card title="Тенанты" style={{ ["--card-pointer" as string]: "pointer" }}>
+ *   12
+ * </Card>
+ * ```
  */
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Заголовок карточки (если нет — только children) */

package/dist/{Column-DDaqX-A7.js → Column-BiogBDf8.js}

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

package/dist/Column.js

@@ -1,4 +1,4 @@
-import { C as r } from "./Column-DDaqX-A7.js";
+import { C as r } from "./Column-BiogBDf8.js";
 export {
   r as Column
 };

package/dist/Dropdown-CQBMF9aR.js

@@ -0,0 +1,151 @@
+import e from "react";
+import { c as s } from "./cx-CcykAxZN.js";
+import { P as I } from "./Popover-g2xTGubK.js";
+import './Dropdown.css';const R = "crr", z = "crt", F = "crc", G = "crp", P = "crh", T = "crg", U = "crd", q = "cri", A = "crn", H = "crk", J = "crl", K = "cru", O = "crm", Q = "crb", V = "cro", X = "crf", Y = "crx", Z = "cry", _ = "crv", n = {
+  r: R,
+  t: z,
+  c: F,
+  p: G,
+  h: P,
+  g: T,
+  d: U,
+  i: q,
+  n: A,
+  k: H,
+  l: J,
+  u: K,
+  m: O,
+  b: Q,
+  o: V,
+  f: X,
+  x: Y,
+  y: Z,
+  v: _
+};
+function $() {
+  return /* @__PURE__ */ e.createElement("svg", { className: n.c, 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 S() {
+  return /* @__PURE__ */ e.createElement("svg", { className: n.m, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M4.5 2.5 8 6l-3.5 3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function b({ className: t }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: s(n.v, t), viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M2.5 6.2 4.8 8.5 9.5 3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function ee({ item: t }) {
+  return t.checkbox ? /* @__PURE__ */ e.createElement("span", { className: s(n.x, t.checked && n.y), "aria-hidden": !0 }, t.checked ? /* @__PURE__ */ e.createElement(b, null) : null) : t.checked ? /* @__PURE__ */ e.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(b, null)) : t.status != null ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: s(n.b, t.status === "online" ? n.o : n.f),
+      "aria-hidden": !0
+    }
+  ) : t.icon != null ? /* @__PURE__ */ e.createElement("span", { className: n.n }, t.icon) : null;
+}
+function ne(t, l, a) {
+  return l != null && l.length > 0 ? a != null && l[0] && l[0].title == null ? [{ ...l[0], title: a }, ...l.slice(1)] : l : t != null && t.length > 0 ? [{ title: a, items: t }] : a != null ? [{ title: a, items: [] }] : [];
+}
+function le({
+  items: t,
+  groups: l,
+  trigger: a,
+  label: u,
+  hideChevron: N = !1,
+  title: x,
+  align: f = "end",
+  open: p,
+  defaultOpen: y = !1,
+  onOpenChange: d,
+  closeOnSelect: L = !0,
+  disabled: i = !1,
+  onSelect: h,
+  className: C
+}) {
+  const [g, w] = e.useState(y), E = p !== void 0, k = E ? p : g, v = (r) => {
+    E || w(r), d == null || d(r);
+  }, B = ne(t, l, x), j = (r) => {
+    var c;
+    if (r.disabled) return;
+    (c = r.onClick) == null || c.call(r), h == null || h(r.value, r), r.checkbox || r.submenu || !L || v(!1);
+  }, D = a ?? /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      className: n.t,
+      "data-open": k ? "true" : void 0,
+      disabled: i,
+      "aria-haspopup": "menu",
+      "aria-expanded": k
+    },
+    u,
+    N ? null : /* @__PURE__ */ e.createElement($, null)
+  );
+  return /* @__PURE__ */ e.createElement(
+    I,
+    {
+      className: s(n.r, C),
+      open: k,
+      onOpenChange: (r) => {
+        i || v(r);
+      },
+      align: f,
+      trigger: D,
+      label: typeof u == "string" ? u : void 0,
+      disabled: i
+    },
+    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": f }, B.map((r, m) => /* @__PURE__ */ e.createElement(e.Fragment, { key: m }, m > 0 ? /* @__PURE__ */ e.createElement("hr", { className: n.d }) : null, /* @__PURE__ */ e.createElement("div", { className: n.g, role: "group" }, r.title != null ? /* @__PURE__ */ e.createElement("p", { className: n.h }, r.title) : null, r.items.map((c) => {
+      const M = r.items.some(
+        (o) => o.checked || o.checkbox || o.status != null || o.icon != null
+      ), W = /* @__PURE__ */ e.createElement(ee, { item: c });
+      return /* @__PURE__ */ e.createElement(
+        "button",
+        {
+          key: c.value,
+          type: "button",
+          role: "menuitem",
+          className: n.i,
+          "data-checked": (c.checked || c.checkbox) && c.checked ? "true" : void 0,
+          "data-danger": c.danger ? "true" : void 0,
+          disabled: c.disabled,
+          "aria-checked": c.checked != null || c.checkbox ? !!c.checked : void 0,
+          onClick: () => j(c)
+        },
+        M ? W ?? /* @__PURE__ */ e.createElement("span", { className: n.n, "aria-hidden": !0 }) : null,
+        c.label != null ? /* @__PURE__ */ e.createElement("span", { className: n.l }, c.label) : null,
+        c.shortcut != null ? /* @__PURE__ */ e.createElement("span", { className: n.u }, c.shortcut) : null,
+        c.submenu ? /* @__PURE__ */ e.createElement(S, null) : null
+      );
+    })))))
+  );
+}
+export {
+  le as D
+};

package/dist/Dropdown.css

@@ -1 +1 @@
-@layer elcrm-components{.crr{position:relative;display:inline-flex;vertical-align:middle}.crt{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:var(--shell-padding);box-sizing:border-box;font:inherit;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);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;line-height:1.2}.crt:hover{background:var(--shell-background-hover)}.crt[data-open=true]{border-color:var(--shell-color-accent);color:var(--shell-color-accent)}.crc{display:inline-flex;width:var(--shell-icon-size);height:var(--shell-icon-size);flex-shrink:0;color:var(--shell-color-muted)}.crt[data-open=true] .crc{color:var(--shell-color-accent)}.crp{position:absolute;top:calc(100% + var(--shell-gap-sm));z-index:var(--shell-z);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height);overflow:auto;padding:var(--shell-gap-sm);box-sizing:border-box;background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow)}.crp[data-align=start]{left:0}.crp[data-align=end]{right:0}.crh{margin:0;padding:var(--shell-padding);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.crg{display:flex;flex-direction:column;gap:2px}.crd{height:0;margin:var(--shell-gap-sm) 0;border:0;border-top:1px solid var(--shell-border)}.cri{display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;font-size:var(--shell-font-size);font-weight:500;color:var(--shell-color);background:transparent;border:none;border-radius:calc(var(--shell-radius) * .7);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}.cri:hover:not(:disabled),.cri:focus-visible:not(:disabled){background:var(--shell-background-hover);outline:none}.cri[data-checked=true]{background:var(--shell-background-selected)}.cri[data-danger=true]{color:var(--shell-color-danger)}.cri:disabled,.cri[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.crn,.crk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crk{color:var(--shell-color-accent)}.crl{flex:1;min-width:0}.cru{flex-shrink:0;margin-left:auto;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.crm{display:inline-flex;flex-shrink:0;margin-left:auto;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crb{display:inline-flex;flex-shrink:0;width:var(--shell-status-size);height:var(--shell-status-size);border-radius:50%}.cro{background:var(--shell-color-success)}.crf{background:var(--shell-color-muted)}.crx{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--shell-check-size);height:var(--shell-check-size);border:1px solid var(--shell-border);border-radius:calc(var(--shell-radius) * .4);background:var(--shell-background);color:#fff}.cry{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.crkv{width:70%;height:70%;display:block}}
+@layer elcrm-components{.crr{position:relative;display:inline-flex;vertical-align:middle}.crt{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:var(--shell-padding);box-sizing:border-box;font:inherit;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);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;line-height:1.2}.crt:hover{background:var(--shell-background-hover)}.crt[data-open=true]{border-color:var(--shell-color-accent);color:var(--shell-color-accent)}.crc{display:inline-flex;width:var(--shell-icon-size);height:var(--shell-icon-size);flex-shrink:0;color:var(--shell-color-muted)}.crt[data-open=true] .crc{color:var(--shell-color-accent)}.crp{min-width:0}.crh{margin:0;padding:var(--shell-padding);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.crg{display:flex;flex-direction:column;gap:2px}.crd{height:0;margin:var(--shell-gap-sm) 0;border:0;border-top:1px solid var(--shell-border)}.cri{display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;font-size:var(--shell-font-size);font-weight:500;color:var(--shell-color);background:transparent;border:none;border-radius:calc(var(--shell-radius) * .7);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}.cri:hover:not(:disabled),.cri:focus-visible:not(:disabled){background:var(--shell-background-hover);outline:none}.cri[data-checked=true]{background:var(--shell-background-selected)}.cri[data-danger=true]{color:var(--shell-color-danger)}.cri:disabled,.cri[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.crn,.crk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crk{color:var(--shell-color-accent)}.crl{flex:1;min-width:0}.cru{flex-shrink:0;margin-left:auto;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.crm{display:inline-flex;flex-shrink:0;margin-left:auto;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crb{display:inline-flex;flex-shrink:0;width:var(--shell-status-size);height:var(--shell-status-size);border-radius:50%}.cro{background:var(--shell-color-success)}.crf{background:var(--shell-color-muted)}.crx{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--shell-check-size);height:var(--shell-check-size);border:1px solid var(--shell-border);border-radius:calc(var(--shell-radius) * .4);background:var(--shell-background);color:#fff}.cry{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.crv{width:70%;height:70%;display:block}}

package/dist/Dropdown.d.ts

@@ -80,14 +80,14 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
     onSelect?: (value: string, item: DropdownItem) => void;
 };
 /**
- * Выпадающее меню: триггер + панель с `groups` / `items` рядом с якорем (не portal).
+ * Выпадающее меню: триггер + панель с `groups` / `items` (portal, {@link Popover}).
  *
  * Когда использовать:
  * - действия строки списка, переключатели колонок, контекстные пункты у кнопки.
  *
  * Отличия:
  * - {@link Menu} — инлайн-навигация в потоке (шапка), без панели;
- * - `@elcrm/overlay` — портальное меню/popover поверх layout (фокус-ловушка, слои).
+ * - {@link Popover} — свой контент в portal, без `items`.
  *
  * API: декларативные `items` / `groups`. Идентификатор пункта — `value` (не `key`).
  * Compound-слоты (`Dropdown.Item`) не используются.
@@ -121,4 +121,4 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
  * />
  * ```
  */
-export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, ...rest }: DropdownProps): React.JSX.Element;
+export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, }: DropdownProps): React.JSX.Element;

package/dist/Dropdown.js

@@ -1,4 +1,4 @@
-import { D as p } from "./Dropdown-Cw5LKpcT.js";
+import { D as p } from "./Dropdown-CQBMF9aR.js";
 export {
   p as Dropdown
 };

package/dist/Item-D4okhsfW.js

@@ -0,0 +1,46 @@
+import r from "react";
+import { c as m } from "./cx-CcykAxZN.js";
+import './Item.css';const u = "cir", d = "cia", v = "cic", i = {
+  r: u,
+  a: d,
+  c: v
+};
+function N(s) {
+  const {
+    active: t,
+    variant: o = "plain",
+    children: a,
+    className: l,
+    as: n = "button",
+    ...e
+  } = s, c = m(i.r, o === "card" && i.c, t && i.a, l);
+  return n === "a" ? /* @__PURE__ */ r.createElement(
+    "a",
+    {
+      className: c,
+      "data-active": t ? "true" : void 0,
+      ...e
+    },
+    a
+  ) : n === "li" ? /* @__PURE__ */ r.createElement(
+    "li",
+    {
+      className: c,
+      "data-active": t ? "true" : void 0,
+      ...e
+    },
+    a
+  ) : /* @__PURE__ */ r.createElement(
+    "button",
+    {
+      type: "button",
+      className: c,
+      "data-active": t ? "true" : void 0,
+      ...e
+    },
+    a
+  );
+}
+export {
+  N as I
+};

package/dist/Item.css

@@ -1 +1 @@
-@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)}}
+@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)}.cic{align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--shell-border);border-radius:14px;background:var(--shell-background-muted);flex-shrink:0}.cic:hover,.cic.cia,.cic[data-active=true]{background:color-mix(in srgb,var(--shell-color-accent) 12%,var(--shell-background-muted));border-color:color-mix(in srgb,var(--shell-color-accent) 35%,transparent)}}

package/dist/Item.d.ts

@@ -2,6 +2,11 @@ import { default as React } from 'react';
 type Common = {
     /** Активное / выбранное состояние */
     active?: boolean;
+    /**
+     * `plain` — строка списка.
+     * `card` — карточка (идеи / тикеты): рамка, muted-фон, hover.
+     */
+    variant?: "plain" | "card";
     /** Содержимое элемента */
     children?: React.ReactNode;
     /** Доп. CSS-класс */
@@ -13,11 +18,13 @@ type Common = {
  * Роли: Item внутри List / Menu; для групповых списков выбора —
  * RadioGroup / Dropdown с `items` (не собирайте Item вручную).
  *
+ * @param variant `plain` (строка) или `card` (рамка, muted-фон)
+ *
  * @example
  * ```tsx
  * <List>
  *   <Item as="li" active>Текущий</Item>
- *   <Item as="a" href="/docs">Документация</Item>
+ *   <Item as="button" variant="card" active>Карточка</Item>
  * </List>
  * ```
  *

package/dist/Item.js

@@ -1,4 +1,4 @@
-import { I as o } from "./Item-CaU4RW2G.js";
+import { I as o } from "./Item-D4okhsfW.js";
 export {
   o as Item
 };

package/dist/ItemColumn-M7a9L8CI.js

@@ -0,0 +1,41 @@
+import e from "react";
+import { c as N } from "./cx-CcykAxZN.js";
+import './ItemColumn.css';const h = "c7r", v = "c7i", k = "c7b", b = "c7h", x = "c7t", g = "c7x", C = "c7d", F = "c7f", I = "c7p", y = "c7a", L = "c7s", M = "c7l", R = "c7k", l = {
+  r: h,
+  i: v,
+  b: k,
+  h: b,
+  t: x,
+  x: g,
+  d: C,
+  f: F,
+  p: I,
+  a: y,
+  s: L,
+  l: M,
+  k: R
+};
+function $({ items: a }) {
+  const t = a.filter((n) => n != null && n !== !1 && n !== "");
+  return t.length === 0 ? null : /* @__PURE__ */ e.createElement(e.Fragment, null, t.map((n, c) => /* @__PURE__ */ e.createElement(e.Fragment, { key: c }, c > 0 ? /* @__PURE__ */ e.createElement("span", { className: l.p, "aria-hidden": !0 }, "·") : null, /* @__PURE__ */ e.createElement("span", null, n))));
+}
+function w({
+  icon: a,
+  title: t,
+  extra: n,
+  aside: c,
+  description: s,
+  footer: o,
+  meta: m,
+  size: r = "m",
+  unread: i,
+  children: E,
+  className: d,
+  ...p
+}) {
+  const f = r === "s" ? l.s : r === "l" ? l.l : void 0, u = o ?? (m != null ? /* @__PURE__ */ e.createElement($, { items: m }) : null);
+  return /* @__PURE__ */ e.createElement("div", { className: N(l.r, f, i && l.k, d), ...p }, a != null ? /* @__PURE__ */ e.createElement("span", { className: l.i, "aria-hidden": !0 }, a) : null, /* @__PURE__ */ e.createElement("div", { className: l.b }, t != null || n != null ? /* @__PURE__ */ e.createElement("div", { className: l.h }, t != null ? /* @__PURE__ */ e.createElement("span", { className: l.t }, t) : null, n != null ? /* @__PURE__ */ e.createElement("span", { className: l.x }, n) : null) : null, s != null ? /* @__PURE__ */ e.createElement("div", { className: l.d }, s) : null, u != null ? /* @__PURE__ */ e.createElement("div", { className: l.f }, u) : null, E), c != null ? /* @__PURE__ */ e.createElement("div", { className: l.a }, c) : null);
+}
+export {
+  w as I
+};

package/dist/ItemColumn.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c7r{display:flex;align-items:flex-start;gap:var(--item-column-gap, 12px);min-width:0;width:100%;text-align:left}.c7i{flex-shrink:0;box-sizing:border-box;width:var(--item-column-icon-size, 40px);height:var(--item-column-icon-size, 40px);border-radius:var(--item-column-icon-radius, 999px);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--shell-color-accent) 14%,transparent);color:var(--shell-color-accent)}.c7b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.c7h{display:flex;align-items:center;gap:8px;min-width:0}.c7t{flex:1;min-width:0;margin:0;font-size:var(--item-column-title-size, var(--shell-font-size));font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:var(--item-column-title-line, 1.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c7x{flex-shrink:0;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.c7d{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.c7f{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:12px;color:var(--shell-color-muted);line-height:1.35}.c7p{opacity:.5;-webkit-user-select:none;user-select:none}.c7a{flex-shrink:0;display:inline-flex;align-items:flex-start}.c7s .c7t{font-size:var(--shell-font-size-sm)}.c7s .c7d{font-size:12px}.c7l .c7t{font-size:var(--shell-font-size-lg)}.c7l .c7d{font-size:var(--shell-font-size)}.c7k .c7t{font-weight:700}}

package/dist/ItemColumn.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+/**
+ * Колонка содержимого строки списка: иконка слева, текст столбиком, слоты справа.
+ *
+ * Роли: внутри {@link Item} / {@link Card} (идеи, тикеты, inbox).
+ * Не заменяет Item (клик / active) и не AvatarName (там фото).
+ *
+ * @param icon кружок слева (иконка приложения)
+ * @param title первая строка
+ * @param extra бейджи в правом верхнем углу строки title
+ * @param aside колонка справа на всю высоту (дата, действия)
+ * @param description превью / вторая строка
+ * @param footer третья строка (мета)
+ * @param meta куски футера через «·» (если нет footer)
+ * @param size `s` | `m` | `l`
+ * @param unread жирный title (непрочитанное)
+ *
+ * @example
+ * ```tsx
+ * <Item as="button" onClick={open}>
+ *   <ItemColumn
+ *     icon={<Icon />}
+ *     title="Тема"
+ *     extra={<Badge size="s" tone="accent">Новые</Badge>}
+ *     description="Превью текста…"
+ *     meta={["★ 2", "3 комм.", "Иван"]}
+ *   />
+ * </Item>
+ * ```
+ *
+ * Токены: `--item-column-gap`, `--item-column-icon-size`, `--item-column-icon-radius`,
+ * `--item-column-title-size`, `--item-column-title-line`.
+ */
+export type ItemColumnProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Иконка слева */
+    icon?: React.ReactNode;
+    /** Заголовок */
+    title?: React.ReactNode;
+    /** Справа сверху у title (Badge, счётчик) */
+    extra?: React.ReactNode;
+    /** Правая колонка (верхний край) */
+    aside?: React.ReactNode;
+    /** Описание / превью */
+    description?: React.ReactNode;
+    /** Подвал целиком */
+    footer?: React.ReactNode;
+    /** Куски подвала через точку — если нет `footer` */
+    meta?: React.ReactNode[];
+    /** Размер текста */
+    size?: "s" | "m" | "l";
+    /** Жирный title (непрочитанное) */
+    unread?: boolean;
+    /** Доп. строки под footer */
+    children?: React.ReactNode;
+};
+/**
+ * Иконка + колонка title / description / footer (+ extra / aside).
+ *
+ * @see Item, TextGroup, AvatarName, Badge
+ */
+export declare function ItemColumn({ icon, title, extra, aside, description, footer, meta, size, unread, children, className, ...rest }: ItemColumnProps): React.JSX.Element;

package/dist/ItemColumn.js

@@ -0,0 +1,4 @@
+import { I as e } from "./ItemColumn-M7a9L8CI.js";
+export {
+  e as ItemColumn
+};

package/dist/Layout-BQwEaeO0.js

@@ -0,0 +1,22 @@
+import e from "react";
+import { c as s } from "./cx-CcykAxZN.js";
+import './Layout.css';const i = "clr", u = "clm", E = "cls", b = "clb", t = {
+  r: i,
+  m: u,
+  s: E,
+  b
+};
+function p({
+  sidebar: c,
+  header: a,
+  footer: l,
+  children: o,
+  className: n,
+  ...m
+}) {
+  const r = /* @__PURE__ */ e.createElement(e.Fragment, null, a, /* @__PURE__ */ e.createElement("main", { className: t.m }, o), l);
+  return c != null ? /* @__PURE__ */ e.createElement("div", { className: s(t.r, t.s, n), ...m }, c, /* @__PURE__ */ e.createElement("div", { className: t.b }, r)) : /* @__PURE__ */ e.createElement("div", { className: s(t.r, n), ...m }, r);
+}
+export {
+  p as L
+};

package/dist/Layout.css

@@ -1 +1 @@
-@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}}
+@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}.cls{flex-direction:row;align-items:stretch}.clb{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}}

package/dist/Layout.d.ts

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

package/dist/Layout.js

@@ -1,4 +1,4 @@
-import { L as r } from "./Layout-Xb3-xsmA.js";
+import { L as r } from "./Layout-BQwEaeO0.js";
 export {
   r as Layout
 };

package/dist/Menu-DpUvOl8Y.js

@@ -0,0 +1,58 @@
+import l from "react";
+import { B as p } from "./Badge-jp-9iNNL.js";
+import { c as i } from "./cx-CcykAxZN.js";
+import './Menu.css';const b = "cmr", m = "cmv", k = "cmi", x = "cmd", E = "cma", g = "cmu", c = {
+  r: b,
+  v: m,
+  i: k,
+  d: x,
+  a: E,
+  u: g
+};
+function y(a) {
+  if (a == null || a === "") return null;
+  const r = Number(a);
+  return !Number.isNaN(r) && r === 0 ? null : !Number.isNaN(r) && r > 99 ? "99+" : String(a);
+}
+function h({
+  items: a,
+  vertical: r,
+  variant: v = "plain",
+  value: o,
+  onSelect: u,
+  children: d,
+  className: N,
+  ...f
+}) {
+  return /* @__PURE__ */ l.createElement(
+    "nav",
+    {
+      className: i(c.r, r && c.v, v === "line" && c.u, N),
+      ...f
+    },
+    a == null ? void 0 : a.map((n) => {
+      const t = n.active ?? (o != null && n.value === o), s = y(n.badge);
+      return /* @__PURE__ */ l.createElement(
+        "button",
+        {
+          key: n.value,
+          type: "button",
+          className: i(c.i, t && c.a),
+          "data-active": t ? "true" : void 0,
+          "aria-current": t ? "page" : void 0,
+          disabled: n.disabled,
+          onClick: () => {
+            var e;
+            (e = n.onClick) == null || e.call(n), u == null || u(n.value);
+          }
+        },
+        n.label,
+        s != null ? /* @__PURE__ */ l.createElement(p, { className: c.d, tone: "accent", size: "s" }, s) : null
+      );
+    }),
+    d
+  );
+}
+export {
+  h as M
+};

package/dist/Menu.css

@@ -1 +1 @@
-@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)}}
+@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;gap:6px}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.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)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}