@elcrm/components 0.1.1 → 0.1.2

package/dist/light.css

@@ -13,12 +13,22 @@ body[data-theme="light"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
+  --shell-bg: var(--bg);
   --shell-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
   --shell-background-selected: color-mix(in srgb, var(--accent) 10%, transparent);
   --shell-shadow: var(--shadow);
 
+  --sidebar-block-bg: var(--shell-background);
+  --sidebar-block-border: var(--shell-border);
+  --sidebar-block-shadow: none;
+  --sidebar-item-active: var(--shell-color);
+  --sidebar-item-active-bg: var(--shell-background-selected);
+  --sidebar-icon-active: var(--shell-color-accent);
+
   --avatar-background: var(--shell-color-accent);
   --avatar-color: var(--button-primary-fg);
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);

package/dist/overlayZ.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Счётчик z-index оверлеев — тот же `globalThis.elcrm.overlayZ`, что у `@elcrm/form`.
+ */
+/** Выделить z-index поверх текущего стека оверлеев */
+export declare function acquireOverlayZIndex(): number;
+/** Освободить слой; при пустом стеке сброс счётчика */
+export declare function releaseOverlayZIndex(z: number): void;
+/** Текущий верхний активный слой (или FLOOR, если стек пуст) */
+export declare function peekOverlayZIndex(): number;

package/dist/tokens.css

@@ -48,10 +48,29 @@
   --avatar-outline-offset: 0;
   --avatar-group-overlap: -0.4rem;
   --avatar-group-ring: 2px;
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
 
   --dropdown-min-width: 12rem;
   --dropdown-max-width: 20rem;
   --dropdown-max-height: 20rem;
   --pricing-card-min-width: 16rem;
   --pricing-table-label-width: 10rem;
+
+  --card-pointer: auto;
+  --stack-grid-min: 180px;
+  /* Задаётся Stack через style при columns=…; дефолт — одна колонка */
+  --stack-columns-template: minmax(0, 1fr);
+  --item-column-gap: 12px;
+  --item-column-icon-size: 40px;
+  --item-column-icon-radius: 999px;
+
+  --sidebar-width: 248px;
+  --sidebar-pad-x: 12px;
+  --sidebar-pad-y: 16px;
+  --sidebar-block-radius: 14px;
+  --sidebar-item-font-size: 13px;
+  --sidebar-item-padding: 6px 10px;
+  --sidebar-icon-size: 16px;
+  --sidebar-group-font-size: 11px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elcrm/components",
-  "version": "0.1.1",
-  "description": "Shell UI elCRM: Layout, Header, PageHead, PageShell, Section, Stack, RadioGroup, Avatar и др.",
+  "version": "0.1.2",
+  "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, PageHead, PageShell, Section, Stack, Stat, ActionGroup, TextGroup, ItemColumn и др.",
   "type": "module",
   "author": "MaSkal <dev@elcrm.online>",
   "license": "MIT",

package/dist/Avatar-CyNXYvsa.js

@@ -1,101 +0,0 @@
-import a from "react";
-import { c as f } from "./cx-CcykAxZN.js";
-import './Avatar.css';const N = "car", g = "cav", h = "cas", y = "cam", A = "cal", C = "caa", x = "cai", z = "cab", B = "cao", F = "caf", e = {
-  r: N,
-  v: g,
-  s: h,
-  m: y,
-  l: A,
-  a: C,
-  i: x,
-  b: z,
-  o: B,
-  f: F
-};
-function U(t) {
-  const s = t.trim();
-  if (!s) return "?";
-  const n = s.split(/\s+/).filter(Boolean);
-  return n.length >= 2 ? (n[0][0] + n[1][0]).toUpperCase() : s.slice(0, 2).toUpperCase();
-}
-function D({ status: t }) {
-  return /* @__PURE__ */ a.createElement(
-    "span",
-    {
-      className: f(e.b, t === "online" ? e.o : e.f),
-      "data-status": t,
-      "aria-hidden": !0
-    }
-  );
-}
-function R({
-  src: t,
-  label: s,
-  children: n,
-  name: l,
-  status: o
-}) {
-  const c = t != null && t !== "" ? /* @__PURE__ */ a.createElement("img", { className: e.i, src: t, alt: s ?? "", draggable: !1 }) : n ?? (l != null ? U(l) : "?");
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("span", { className: e.v }, c), o != null ? /* @__PURE__ */ a.createElement(D, { status: o }) : null);
-}
-function j(t) {
-  const {
-    src: s,
-    alt: n,
-    name: l,
-    size: o = "m",
-    status: c,
-    active: i,
-    children: p,
-    className: b,
-    as: v = "span",
-    ...m
-  } = t, E = o === "s" ? e.s : o === "l" ? e.l : e.m, u = f(e.r, E, i && e.a, b), r = n ?? l, d = /* @__PURE__ */ a.createElement(
-    R,
-    {
-      src: s,
-      label: r,
-      name: l,
-      status: c,
-      children: p
-    }
-  );
-  return v === "button" ? /* @__PURE__ */ a.createElement(
-    "button",
-    {
-      type: "button",
-      className: u,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": c,
-      ...m
-    },
-    d
-  ) : v === "div" ? /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      className: u,
-      role: r ? "img" : void 0,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": c,
-      ...m
-    },
-    d
-  ) : /* @__PURE__ */ a.createElement(
-    "span",
-    {
-      className: u,
-      role: r ? "img" : void 0,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": c,
-      ...m
-    },
-    d
-  );
-}
-export {
-  j as A,
-  U as i
-};

package/dist/AvatarName-DhD3TytF.js

@@ -1,56 +0,0 @@
-import t from "react";
-import { A as v } from "./Avatar-CyNXYvsa.js";
-import { c as b } from "./cx-CcykAxZN.js";
-import './AvatarName.css';const g = "czr", y = "czc", A = "czt", h = "czd", x = "czs", C = "czm", F = "czl", e = {
-  r: g,
-  c: y,
-  t: A,
-  d: h,
-  s: x,
-  m: C,
-  l: F
-};
-function I(s, n) {
-  if (s != null && s !== "") return s;
-  if (typeof n == "string") return n;
-}
-function j(s) {
-  const {
-    src: n,
-    name: c,
-    title: m,
-    description: i,
-    size: a = "m",
-    status: f,
-    className: p,
-    children: z,
-    as: u = "div",
-    ...r
-  } = s, E = a === "s" ? e.s : a === "l" ? e.l : e.m, l = b(e.r, E, p), d = m ?? (typeof c == "string" ? c : void 0), N = I(c, m), o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(v, { src: n, name: N, size: a, status: f }), /* @__PURE__ */ t.createElement("span", { className: e.c }, d != null ? /* @__PURE__ */ t.createElement("span", { className: e.t }, d) : null, i != null ? /* @__PURE__ */ t.createElement("span", { className: e.d }, i) : null, z));
-  return u === "button" ? /* @__PURE__ */ t.createElement(
-    "button",
-    {
-      type: "button",
-      className: l,
-      ...r
-    },
-    o
-  ) : u === "a" ? /* @__PURE__ */ t.createElement(
-    "a",
-    {
-      className: l,
-      ...r
-    },
-    o
-  ) : /* @__PURE__ */ t.createElement(
-    "div",
-    {
-      className: l,
-      ...r
-    },
-    o
-  );
-}
-export {
-  j as A
-};

package/dist/Badge-l6nUkl-H.js

@@ -1,22 +0,0 @@
-import o from "react";
-import { c as e } from "./cx-CcykAxZN.js";
-import './Badge.css';const u = "cjr", d = "cjn", j = "cja", m = "cju", w = "cjw", i = "cjd", c = {
-  r: u,
-  n: d,
-  a: j,
-  u: m,
-  w,
-  d: i
-};
-function f({
-  tone: n = "neutral",
-  children: s,
-  className: a,
-  ...t
-}) {
-  const r = n === "accent" ? c.a : n === "success" ? c.u : n === "warning" ? c.w : n === "danger" ? c.d : c.n;
-  return /* @__PURE__ */ o.createElement("span", { className: e(c.r, r, a), ...t }, s);
-}
-export {
-  f as B
-};

package/dist/Dropdown-DQlDiWCR.js

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

package/dist/Item-CaU4RW2G.js

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

package/dist/Layout-Xb3-xsmA.js

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

package/dist/Menu-DRBHvSdJ.js

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

package/dist/PageHead-Baz9BLuA.js

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

package/dist/Stack-b0-XWwQ1.js

@@ -1,31 +0,0 @@
-import m from "react";
-import { c as u } from "./cx-CcykAxZN.js";
-import './Stack.css';function a(t) {
-  if (t != null)
-    return { gap: typeof t == "number" ? `${t}px` : t };
-}
-const i = "c1r", l = "c1h", r = {
-  r: i,
-  h: l
-};
-function p({
-  direction: t = "column",
-  gap: c,
-  children: e,
-  className: n,
-  style: o,
-  ...s
-}) {
-  return /* @__PURE__ */ m.createElement(
-    "div",
-    {
-      className: u(r.r, t === "row" && r.h, n),
-      style: { ...a(c), ...o },
-      ...s
-    },
-    e
-  );
-}
-export {
-  p as S
-};