@elcrm/components 0.5.4 → 0.5.5

package/README.md

@@ -86,6 +86,17 @@ import { Avatar } from "@elcrm/components/Avatar";
 import { RadioGroup } from "@elcrm/components/RadioGroup";
 ```
 
+## Темы
+
+Готовые пресеты тем живут в отдельном пакете `@elcrm/style`:
+
+```ts
+import "@elcrm/style/panel.css"; // или @elcrm/style/orbit.css
+```
+
+Тема переключается атрибутом `data-theme="light" | "dark"`.
+Токены и геометрия — там же; `@elcrm/components` fallback-цвета не задаёт.
+
 ## Компоненты
 
 |                        | Назначение                       | Ключевые props                                                                         |

package/dist/{AvatarGroup-Dq-UrOaC.js → AvatarGroup-DeceOhGV.js}

@@ -1,11 +1,12 @@
 import e from "react";
+import { Button as y } from "@elcrm/button";
 import { A as f } from "./Avatar-eGdLrMCv.js";
 import { c } from "./cx-CcykAxZN.js";
-import './AvatarGroup.css';const C = "lar", I = "lai", P = "lao", x = "lad", G = "las", M = "lam", R = "lal", t = {
-  root: C,
-  item: I,
-  overflow: P,
-  dadd: x,
+import './AvatarGroup.css';const I = "lar", P = "lai", x = "lao", B = "lad", G = "las", M = "lam", R = "lal", t = {
+  root: I,
+  item: P,
+  overflow: x,
+  dadd: B,
   small: G,
   middle: M,
   large: R
@@ -14,30 +15,30 @@ function $(a) {
   if (a.name != null && a.name !== "") return a.name;
   if (a.title != null && a.title !== "") return a.title;
 }
-function B({
+function F({
   items: a,
   max: s,
   size: n = "m",
   add: v = !1,
-  addLabel: b = "Добавить",
+  addLabel: g = "Добавить",
   onAdd: r,
-  onValueChange: u,
-  className: g,
-  "aria-label": E = "Аватары",
-  ...h
+  onValueChange: i,
+  className: b,
+  "aria-label": h = "Аватары",
+  ...E
 }) {
-  const i = n === "s" ? t.small : n === "l" ? t.large : t.middle, k = s != null && s >= 0 ? Math.min(s, a.length) : a.length, m = a.slice(0, k), o = a.length - m.length;
+  const u = n === "s" ? t.small : n === "l" ? t.large : t.middle, k = s != null && s >= 0 ? Math.min(s, a.length) : a.length, m = a.slice(0, k), o = a.length - m.length;
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: c(t.root, g),
+      className: c(t.root, b),
       role: "group",
-      "aria-label": E,
-      ...h
+      "aria-label": h,
+      ...E
     },
-    m.map((l, N) => {
-      const p = $(l), d = l.alt ?? l.title ?? l.name, w = u != null;
-      return /* @__PURE__ */ e.createElement("span", { key: l.value, className: t.item, style: { zIndex: N + 1 } }, w ? /* @__PURE__ */ e.createElement(
+    m.map((l, w) => {
+      const p = $(l), d = l.alt ?? l.title ?? l.name, N = i != null;
+      return /* @__PURE__ */ e.createElement("span", { key: l.value, className: t.item, style: { zIndex: w + 1 } }, N ? /* @__PURE__ */ e.createElement(
         f,
         {
           as: "button",
@@ -46,8 +47,8 @@ function B({
           alt: d,
           size: n,
           status: l.status,
-          onClick: (y) => {
-            y.stopPropagation(), u(l.value);
+          onClick: (C) => {
+            C.stopPropagation(), i(l.value);
           }
         }
       ) : /* @__PURE__ */ e.createElement(
@@ -61,13 +62,15 @@ function B({
         }
       ));
     }),
-    o > 0 ? /* @__PURE__ */ e.createElement("span", { className: c(t.overflow, i), "aria-label": `Ещё ${o}` }, "+", o) : null,
+    o > 0 ? /* @__PURE__ */ e.createElement("span", { className: c(t.overflow, u), "aria-label": `Ещё ${o}` }, "+", o) : null,
     v ? /* @__PURE__ */ e.createElement(
-      "button",
+      y,
       {
-        type: "button",
-        className: c(t.dadd, i),
-        "aria-label": b,
+        variant: "ghost",
+        size: n,
+        width: "s",
+        className: c(t.dadd, u),
+        "aria-label": g,
         onClick: (l) => {
           l.stopPropagation(), r == null || r();
         }
@@ -77,5 +80,5 @@ function B({
   );
 }
 export {
-  B as A
+  F as A
 };

package/dist/AvatarGroup.js

@@ -1,4 +1,4 @@
-import { A as o } from "./AvatarGroup-Dq-UrOaC.js";
+import { A as o } from "./AvatarGroup-DeceOhGV.js";
 export {
   o as AvatarGroup
 };

package/dist/{Breadcrumb-DM_hWw5n.js → Breadcrumb-BexTTfCV.js}

@@ -1,13 +1,14 @@
 import e from "react";
+import { Button as k } from "@elcrm/button";
 import { c as x } from "./cx-CcykAxZN.js";
-import './Breadcrumb.css';const g = "lbr", y = "lbi", B = "lbc", L = "lbn", C = "lbl", F = "lbd", M = "lbs", I = "lbv", S = "lbe", l = {
-  root: g,
+import './Breadcrumb.css';const B = "lbr", y = "lbi", L = "lbc", C = "lbn", F = "lbl", M = "lbd", z = "lbs", I = "lbv", S = "lbe", l = {
+  root: B,
   item: y,
-  current: B,
-  nicon: L,
-  label: C,
-  dropdown: F,
-  sep: M,
+  current: L,
+  nicon: C,
+  label: F,
+  dropdown: M,
+  sep: z,
   vbar: I,
   ellipsis: S
 };
@@ -38,11 +39,11 @@ function j(t) {
 }
 function D(t, a) {
   if (a == null || a < 1 || t.length <= a + 1)
-    return t.map((r, c) => ({ kind: "item", item: r, index: c }));
-  const p = t.slice(0, a).map((r, c) => ({
+    return t.map((r, s) => ({ kind: "item", item: r, index: s }));
+  const p = t.slice(0, a).map((r, s) => ({
     kind: "item",
     item: r,
-    index: c
+    index: s
   })), o = t[t.length - 1];
   return [
     ...p,
@@ -50,49 +51,61 @@ function D(t, a) {
     { kind: "item", item: o, index: t.length - 1 }
   ];
 }
-function W({
+function q({
   items: t,
   separator: a = "chevron",
   collapseAfter: p,
   onEllipsisClick: o,
   onValueChange: r,
-  className: c,
-  ...k
+  className: s,
+  ...v
 }) {
-  const v = D(t, p), N = t.length - 1;
-  return /* @__PURE__ */ e.createElement("nav", { "aria-label": "Breadcrumb", className: c, ...k }, /* @__PURE__ */ e.createElement("ol", { className: l.root }, v.map((E, b) => {
-    const s = [];
-    if (b > 0 && s.push(
+  const N = D(t, p), w = t.length - 1;
+  return /* @__PURE__ */ e.createElement("nav", { "aria-label": "Breadcrumb", className: s, ...v }, /* @__PURE__ */ e.createElement("ol", { className: l.root }, N.map((h, b) => {
+    const c = [];
+    if (b > 0 && c.push(
       /* @__PURE__ */ e.createElement("li", { key: `sep-${b}`, className: l.sep, "aria-hidden": !0 }, j(a))
-    ), E.kind === "ellipsis")
-      return s.push(
+    ), h.kind === "ellipsis")
+      return c.push(
         /* @__PURE__ */ e.createElement("li", { key: "ellipsis" }, o ? /* @__PURE__ */ e.createElement(
-          "button",
+          k,
           {
-            type: "button",
+            variant: "ghost",
+            size: "s",
+            width: "s",
             className: l.ellipsis,
             "aria-label": "Показать путь",
             onClick: o
           },
           "…"
         ) : /* @__PURE__ */ e.createElement("span", { className: l.ellipsis }, "…"))
-      ), /* @__PURE__ */ e.createElement(e.Fragment, { key: `frag-${b}` }, s);
-    const { item: n, index: w } = E, m = w === N, u = /* @__PURE__ */ e.createElement(e.Fragment, null, n.icon != null ? /* @__PURE__ */ e.createElement("span", { className: l.nicon }, n.icon) : null, n.label != null ? /* @__PURE__ */ e.createElement("span", { className: l.label }, n.label) : null, n.dropdown ? /* @__PURE__ */ e.createElement($, null) : null), d = x(l.item, m && l.current), f = () => {
-      var h;
-      n.disabled || m || ((h = n.onClick) == null || h.call(n), r == null || r(n.value));
+      ), /* @__PURE__ */ e.createElement(e.Fragment, { key: `frag-${b}` }, c);
+    const { item: n, index: g } = h, m = g === w, d = /* @__PURE__ */ e.createElement(e.Fragment, null, n.icon != null ? /* @__PURE__ */ e.createElement("span", { className: l.nicon }, n.icon) : null, n.label != null ? /* @__PURE__ */ e.createElement("span", { className: l.label }, n.label) : null, n.dropdown ? /* @__PURE__ */ e.createElement($, null) : null), u = x(l.item, m && l.current), E = () => {
+      var f;
+      n.disabled || m || ((f = n.onClick) == null || f.call(n), r == null || r(n.value));
     };
     let i;
     return m || n.disabled ? i = /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: d,
+        className: u,
         "aria-current": m ? "page" : void 0,
         "aria-disabled": n.disabled || void 0
       },
-      u
-    ) : n.href != null ? i = /* @__PURE__ */ e.createElement("a", { className: d, href: n.href, onClick: f }, u) : n.onClick != null || r != null || n.dropdown ? i = /* @__PURE__ */ e.createElement("button", { type: "button", className: d, onClick: f }, u) : i = /* @__PURE__ */ e.createElement("span", { className: d }, u), s.push(/* @__PURE__ */ e.createElement("li", { key: n.value }, i)), /* @__PURE__ */ e.createElement(e.Fragment, { key: n.value }, s);
+      d
+    ) : n.href != null ? i = /* @__PURE__ */ e.createElement("a", { className: u, href: n.href, onClick: E }, d) : n.onClick != null || r != null || n.dropdown ? i = /* @__PURE__ */ e.createElement(
+      k,
+      {
+        variant: "ghost",
+        size: "s",
+        width: "s",
+        className: u,
+        onClick: E
+      },
+      d
+    ) : i = /* @__PURE__ */ e.createElement("span", { className: u }, d), c.push(/* @__PURE__ */ e.createElement("li", { key: n.value }, i)), /* @__PURE__ */ e.createElement(e.Fragment, { key: n.value }, c);
   })));
 }
 export {
-  W as B
+  q as B
 };

package/dist/Breadcrumb.js

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

package/dist/CodeBlock-CZFC4r35.js

@@ -0,0 +1,37 @@
+import e from "react";
+import { Button as p } from "@elcrm/button";
+import { c as u } from "./cx-CcykAxZN.js";
+import './CodeBlock.css';const E = "dcr", f = "dcb", N = "dcp", b = "dca", v = "dcc", t = {
+  root: E,
+  bar: f,
+  pre: N,
+  actions: b,
+  copy: v
+};
+function k({
+  title: a,
+  code: n,
+  children: l,
+  onCopy: c,
+  copyLabel: r = "Копировать",
+  actions: o,
+  className: m,
+  ...i
+}) {
+  const s = typeof r == "string" && r.trim() ? r.trim() : "Копировать", d = l ?? (n != null ? /* @__PURE__ */ e.createElement("code", null, n) : null);
+  return /* @__PURE__ */ e.createElement("div", { className: u(t.root, m), ...i }, a != null || c || o ? /* @__PURE__ */ e.createElement("div", { className: t.bar }, /* @__PURE__ */ e.createElement("span", null, a ?? "Код"), /* @__PURE__ */ e.createElement("div", { className: t.actions }, o, c ? /* @__PURE__ */ e.createElement(
+    p,
+    {
+      variant: "ghost",
+      size: "s",
+      width: "s",
+      className: t.copy,
+      "aria-label": s,
+      onClick: c
+    },
+    s
+  ) : null)) : null, /* @__PURE__ */ e.createElement("pre", { className: t.pre }, d));
+}
+export {
+  k as C
+};

package/dist/CodeBlock.js

@@ -1,4 +1,4 @@
-import { C as r } from "./CodeBlock-B3wvMejv.js";
+import { C as r } from "./CodeBlock-CZFC4r35.js";
 export {
   r as CodeBlock
 };

package/dist/Dropdown-C9rbsSgR.js

@@ -0,0 +1,190 @@
+import n, { useRef as K, useEffect as T } from "react";
+import { Button as S } from "@elcrm/button";
+import { c as u } from "./cx-CcykAxZN.js";
+import { P as W } from "./Popover-xEZoMY-h.js";
+import { h as G } from "./rovingKeys-Di9N1Nct.js";
+import { u as H } from "./Toolbar-Bl9-5Mis.js";
+import { u as $ } from "./useControllableValue-BaE0VR5d.js";
+import { C as w } from "./CheckIcon-FdB8fMEF.js";
+import './Dropdown.css';const J = "ldr", Q = "lda", U = "ldt", X = "ldc", Y = "ldp", Z = "ldh", _ = "ldg", V = "ldd", ee = "ldi", ne = "ldn", te = "ldm", ae = "ldk", le = "ldl", ce = "ldu", oe = "ldb", re = "ldo", se = "ldf", ue = "ldx", de = "ldy", ie = "ldv", fe = "lde", he = "lds", a = {
+  root: J,
+  anchor: Q,
+  trigger: U,
+  chevron: X,
+  panel: Y,
+  heading: Z,
+  group: _,
+  divider: V,
+  item: ee,
+  none: ne,
+  more: te,
+  kcheck: ae,
+  label: le,
+  ushort: ce,
+  bead: oe,
+  online: re,
+  foff: se,
+  xbox: ue,
+  yes: de,
+  vtick: ie,
+  elevated: fe,
+  surface: he
+};
+function me() {
+  return /* @__PURE__ */ n.createElement("svg", { className: a.chevron, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ n.createElement(
+    "path",
+    {
+      d: "M2.5 4.5 6 8l3.5-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function ve() {
+  return /* @__PURE__ */ n.createElement("svg", { className: a.more, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ n.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 ke({ item: l }) {
+  return l.checkbox ? /* @__PURE__ */ n.createElement("span", { className: u(a.xbox, l.checked && a.yes), "aria-hidden": !0 }, l.checked ? /* @__PURE__ */ n.createElement(w, { className: a.vtick }) : null) : l.checked ? /* @__PURE__ */ n.createElement("span", { className: a.kcheck, "aria-hidden": !0 }, /* @__PURE__ */ n.createElement(w, { className: a.vtick })) : l.status != null ? /* @__PURE__ */ n.createElement(
+    "span",
+    {
+      className: u(a.bead, l.status === "online" ? a.online : a.foff),
+      "aria-hidden": !0
+    }
+  ) : l.icon != null ? /* @__PURE__ */ n.createElement("span", { className: a.none }, l.icon) : null;
+}
+function pe(l, o, c) {
+  return o != null && o.length > 0 ? c != null && o[0] && o[0].title == null ? [{ ...o[0], title: c }, ...o.slice(1)] : o : l != null && l.length > 0 ? [{ title: c, items: l }] : c != null ? [{ title: c, items: [] }] : [];
+}
+function we({
+  items: l,
+  groups: o,
+  trigger: c,
+  label: d,
+  hideChevron: L = !1,
+  title: R,
+  align: N = "end",
+  placement: z = "auto",
+  open: B,
+  defaultOpen: D = !1,
+  onOpenChange: M,
+  closeOnSelect: O = !0,
+  disabled: i = !1,
+  size: P,
+  tone: x = "default",
+  onValueChange: f,
+  className: F
+}) {
+  const h = H(), m = P ?? (h == null ? void 0 : h.size), [v = !1, C] = $(
+    B,
+    D,
+    M
+  ), y = pe(l, o, R), k = K(null), p = y.flatMap((e) => e.items).filter((e) => !e.disabled).map((e) => e.value), [g, E] = n.useState(p[0] ?? ""), b = x === "account";
+  T(() => {
+    if (!v) return;
+    const e = p[0];
+    e && (E(e), requestAnimationFrame(() => {
+      var t;
+      const r = (t = k.current) == null ? void 0 : t.querySelector(
+        `[data-value="${typeof CSS < "u" && CSS.escape ? CSS.escape(e) : e.replace(/"/g, '\\"')}"]`
+      );
+      r instanceof HTMLElement && r.focus();
+    }));
+  }, [v]);
+  const I = (e) => {
+    var t;
+    if (e.disabled) return;
+    (t = e.onClick) == null || t.call(e), f == null || f(e.value, e), e.checkbox || e.submenu || !O || C(!1);
+  };
+  return /* @__PURE__ */ n.createElement(
+    W,
+    {
+      className: u(a.root, F),
+      open: v,
+      onOpenChange: (e) => {
+        i || C(e);
+      },
+      align: N,
+      placement: z,
+      label: typeof d == "string" ? d : void 0,
+      disabled: i,
+      role: "menu",
+      panelClassName: b ? a.elevated : void 0,
+      fitContent: b,
+      trigger: (e) => typeof c == "function" ? c(e) : c != null ? /* @__PURE__ */ n.createElement("span", { className: a.anchor, ...e.anchorProps }, c) : /* @__PURE__ */ n.createElement(
+        S,
+        {
+          variant: "ghost",
+          size: m,
+          width: "s",
+          className: a.trigger,
+          "data-size": m,
+          "data-open": e.open ? "true" : void 0,
+          disabled: i,
+          ...e.anchorProps
+        },
+        d,
+        L ? null : /* @__PURE__ */ n.createElement(me, null)
+      )
+    },
+    /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        ref: k,
+        className: u(a.panel, b && a.surface),
+        "data-align": N,
+        "data-tone": x,
+        onKeyDown: (e) => G(e, {
+          values: p,
+          value: g,
+          vertical: !0,
+          focusRoot: k.current,
+          onSelect: E
+        })
+      },
+      y.map((e, r) => /* @__PURE__ */ n.createElement(n.Fragment, { key: e.value ?? r }, r > 0 ? /* @__PURE__ */ n.createElement("hr", { className: a.divider }) : null, /* @__PURE__ */ n.createElement("div", { className: a.group, role: "group" }, e.title != null ? /* @__PURE__ */ n.createElement("p", { className: a.heading }, e.title) : null, e.items.map((t) => {
+        const j = e.items.some(
+          (s) => s.checked || s.checkbox || s.status != null || s.icon != null
+        ), q = /* @__PURE__ */ n.createElement(ke, { item: t }), A = t.checkbox === !0 || t.checked != null;
+        return /* @__PURE__ */ n.createElement(
+          S,
+          {
+            key: t.value,
+            variant: "ghost",
+            size: m,
+            width: "s",
+            role: t.checkbox ? "menuitemcheckbox" : "menuitem",
+            className: a.item,
+            "data-value": t.value,
+            "data-checked": (t.checked || t.checkbox) && t.checked ? "true" : void 0,
+            "data-danger": t.danger ? "true" : void 0,
+            tabIndex: t.value === g ? 0 : -1,
+            disabled: t.disabled,
+            "aria-checked": A ? !!t.checked : void 0,
+            onClick: () => I(t),
+            onFocus: () => E(t.value)
+          },
+          j ? q ?? /* @__PURE__ */ n.createElement("span", { className: a.none, "aria-hidden": !0 }) : null,
+          t.label != null ? /* @__PURE__ */ n.createElement("span", { className: a.label }, t.label) : null,
+          t.shortcut != null ? /* @__PURE__ */ n.createElement("span", { className: a.ushort }, t.shortcut) : null,
+          t.submenu ? /* @__PURE__ */ n.createElement(ve, null) : null
+        );
+      }))))
+    )
+  );
+}
+export {
+  we as D
+};

package/dist/Dropdown.js

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