@elcrm/components 0.5.4 → 0.5.5

package/dist/{PanelInfo-Db5GCr-c.js → PanelInfo-BTkDUF-p.js}

@@ -1,69 +1,70 @@
-import n, { useRef as E, useId as M } from "react";
+import n, { useRef as E, useId as K } from "react";
+import { Button as M } from "@elcrm/button";
 import { T as Z } from "./TextGroup-236jHxdT.js";
-import { c as z } from "./cx-CcykAxZN.js";
-import { a as O, r as V, p as B } from "./overlayZ-BvHbYC1x.js";
-import { u as G } from "./useControllableValue-BaE0VR5d.js";
-import './PanelInfo.css';const H = "oir", Q = "ois", U = "oih", Y = "oit", _ = "oia", j = "oic", J = "oib", W = "oif", X = "oid", a = {
-  root: H,
-  sheet: Q,
-  header: U,
-  title: Y,
-  actions: _,
-  close: j,
-  body: J,
-  footer: W,
-  dim: X
+import { c as O } from "./cx-CcykAxZN.js";
+import { a as B, r as V, p as G } from "./overlayZ-BvHbYC1x.js";
+import { u as H } from "./useControllableValue-BaE0VR5d.js";
+import './PanelInfo.css';const Q = "oir", U = "ois", Y = "oih", _ = "oit", j = "oia", J = "oic", W = "oib", X = "oif", $ = "oid", a = {
+  root: Q,
+  sheet: U,
+  header: Y,
+  title: _,
+  actions: j,
+  close: J,
+  body: W,
+  footer: X,
+  dim: $
 }, k = "(max-width: 56rem)", I = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function oe({
+function se({
   open: L,
   defaultOpen: N = !1,
-  title: c,
+  title: i,
   onOpenChange: d,
   onClose: u,
-  children: A,
+  children: g,
   footer: b,
-  headerExtra: R,
-  close: S,
-  "aria-label": g,
+  headerExtra: A,
+  close: R,
+  "aria-label": S,
   className: q
 }) {
-  const [o = !1, P] = G(
+  const [r = !1, P] = H(
     L,
     N,
     (t) => {
       d == null || d(t), t || u == null || u();
     }
-  ), f = () => P(!1), T = E(null), m = E(null), v = E(null), p = M(), [r, D] = n.useState(
+  ), f = () => P(!1), T = E(null), m = E(null), v = E(null), h = K(), [o, z] = n.useState(
     () => typeof window < "u" ? window.matchMedia(k).matches : !1
-  ), [i, y] = n.useState();
+  ), [c, y] = n.useState();
   n.useEffect(() => {
-    const t = window.matchMedia(k), e = () => D(t.matches);
+    const t = window.matchMedia(k), e = () => z(t.matches);
     return e(), t.addEventListener("change", e), () => t.removeEventListener("change", e);
   }, []), n.useEffect(() => {
-    if (!o || !r) {
+    if (!r || !o) {
       y(void 0);
       return;
     }
-    const t = O();
+    const t = B();
     return y(t), () => {
       V(t), y(void 0);
     };
-  }, [o, r]), n.useEffect(() => {
-    if (!o) return;
+  }, [r, o]), n.useEffect(() => {
+    if (!r) return;
     const t = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented) return;
-      const s = B();
-      i != null && s !== i || i == null && s > 1e3 || (e.preventDefault(), f());
+      const s = G();
+      c != null && s !== c || c == null && s > 1e3 || (e.preventDefault(), f());
     };
     return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [o, i]), n.useEffect(() => {
-    if (!o || !r) return;
+  }, [r, c]), n.useEffect(() => {
+    if (!r || !o) return;
     const t = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
       document.body.style.overflow = t;
     };
-  }, [o, r]), n.useEffect(() => {
-    if (!o || (v.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, !r)) return;
+  }, [r, o]), n.useEffect(() => {
+    if (!r || (v.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, !o)) return;
     const t = requestAnimationFrame(() => {
       const e = m.current;
       if (!e) return;
@@ -73,8 +74,8 @@ function oe({
       var e, s;
       cancelAnimationFrame(t), (s = (e = v.current) == null ? void 0 : e.focus) == null || s.call(e), v.current = null;
     };
-  }, [o, r]), n.useEffect(() => {
-    if (!o || !r) return;
+  }, [r, o]), n.useEffect(() => {
+    if (!r || !o) return;
     const t = (e) => {
       if (e.key !== "Tab") return;
       const s = m.current;
@@ -86,52 +87,54 @@ function oe({
         e.preventDefault(), s.focus();
         return;
       }
-      const h = l[0], w = l[l.length - 1];
-      e.shiftKey && document.activeElement === h ? (e.preventDefault(), w.focus()) : !e.shiftKey && document.activeElement === w && (e.preventDefault(), h.focus());
+      const p = l[0], w = l[l.length - 1];
+      e.shiftKey && document.activeElement === p ? (e.preventDefault(), w.focus()) : !e.shiftKey && document.activeElement === w && (e.preventDefault(), p.focus());
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [o, r]);
-  const F = g ?? (typeof c == "string" && c.trim() ? c : "Панель"), K = r ? "div" : "aside";
+  }, [r, o]);
+  const D = S ?? (typeof i == "string" && i.trim() ? i : "Панель"), F = o ? "div" : "aside";
   return /* @__PURE__ */ n.createElement(
-    K,
+    F,
     {
       ref: T,
-      className: z(a.root, q),
-      "data-open": o ? "true" : "false",
-      "data-overlay": r ? "true" : "false",
-      "aria-hidden": !o,
-      ...r ? {
-        role: o ? "dialog" : void 0,
-        "aria-modal": o ? !0 : void 0,
-        "aria-labelledby": o ? p : void 0
+      className: O(a.root, q),
+      "data-open": r ? "true" : "false",
+      "data-overlay": o ? "true" : "false",
+      "aria-hidden": !r,
+      ...o ? {
+        role: r ? "dialog" : void 0,
+        "aria-modal": r ? !0 : void 0,
+        "aria-labelledby": r ? h : void 0
       } : {
-        "aria-label": o ? F : void 0
+        "aria-label": r ? D : void 0
       },
-      style: i != null ? { zIndex: i } : void 0
+      style: c != null ? { zIndex: c } : void 0
     },
-    o && r ? /* @__PURE__ */ n.createElement("div", { className: a.dim, role: "presentation", onClick: f }) : null,
+    r && o ? /* @__PURE__ */ n.createElement("div", { className: a.dim, role: "presentation", onClick: f }) : null,
     /* @__PURE__ */ n.createElement(
       "div",
       {
         ref: m,
         className: a.sheet,
-        tabIndex: r ? -1 : void 0
+        tabIndex: o ? -1 : void 0
       },
-      /* @__PURE__ */ n.createElement("div", { className: a.header }, /* @__PURE__ */ n.createElement("div", { className: a.title, id: p }, typeof c == "string" || typeof c == "number" ? /* @__PURE__ */ n.createElement(Z, { title: String(c), size: "m" }) : c), /* @__PURE__ */ n.createElement("div", { className: a.actions }, R, S ?? /* @__PURE__ */ n.createElement(
-        "button",
+      /* @__PURE__ */ n.createElement("div", { className: a.header }, /* @__PURE__ */ n.createElement("div", { className: a.title, id: h }, typeof i == "string" || typeof i == "number" ? /* @__PURE__ */ n.createElement(Z, { title: String(i), size: "m" }) : i), /* @__PURE__ */ n.createElement("div", { className: a.actions }, A, R ?? /* @__PURE__ */ n.createElement(
+        M,
         {
-          type: "button",
+          variant: "ghost",
+          size: "s",
+          width: "s",
           className: a.close,
           "aria-label": "Закрыть",
           onClick: f
         },
         "×"
       ))),
-      /* @__PURE__ */ n.createElement("div", { className: a.body }, A),
+      /* @__PURE__ */ n.createElement("div", { className: a.body }, g),
       b != null ? /* @__PURE__ */ n.createElement("div", { className: a.footer }, b) : null
     )
   );
 }
 export {
-  oe as P
+  se as P
 };

package/dist/PanelInfo.js

@@ -1,4 +1,4 @@
-import { P as e } from "./PanelInfo-Db5GCr-c.js";
+import { P as e } from "./PanelInfo-BTkDUF-p.js";
 export {
   e as PanelInfo
 };

package/dist/Popover.d.ts

@@ -4,7 +4,7 @@ export type PopoverPlacement = "auto" | "top" | "bottom";
 /** Props, которые нужно проставить на интерактивный якорь (кнопку). */
 export type PopoverAnchorProps = {
     "data-elcrm-popover-anchor": "";
-    "aria-haspopup": string;
+    "aria-haspopup": React.AriaAttributes["aria-haspopup"];
     "aria-expanded": boolean;
     "aria-controls"?: string;
     onClick: (event: React.MouseEvent) => void;

package/dist/{PricingTable-BjpGVAhi.js → PricingTable-Dt2wsnEz.js}

@@ -1,37 +1,38 @@
 import l from "react";
-import { c as C } from "./cx-CcykAxZN.js";
-import { u as D } from "./useControllableValue-BaE0VR5d.js";
-import { Tooltip as F } from "@elcrm/tooltip";
-import { C as q } from "./CheckIcon-FdB8fMEF.js";
-import './PricingTable.css';const z = "gtr", T = "gth", B = "gtm", I = "gtn", O = "gtt", V = "gtg", M = "gtp", S = "gtz", H = "gto", K = "gte", R = "gtd", $ = "gtx", j = "gtb", A = "gty", G = "gtl", J = "gtw", L = "gtc", Q = "gtk", U = "gtv", W = "gta", X = "gtu", Y = "gtq", t = {
-  root: z,
+import { Button as C } from "@elcrm/button";
+import { c as D } from "./cx-CcykAxZN.js";
+import { u as F } from "./useControllableValue-BaE0VR5d.js";
+import { Tooltip as q } from "@elcrm/tooltip";
+import { C as z } from "./CheckIcon-FdB8fMEF.js";
+import './PricingTable.css';const B = "gtr", T = "gth", I = "gtm", O = "gtn", V = "gtt", M = "gtg", S = "gtp", H = "gtz", K = "gto", R = "gte", $ = "gtd", j = "gtx", A = "gtb", G = "gty", J = "gtl", L = "gtw", Q = "gtc", U = "gtk", W = "gtv", X = "gta", Y = "gtu", Z = "gtq", t = {
+  root: B,
   head: T,
-  media: B,
-  name: I,
-  title: O,
-  gban: V,
-  price: M,
-  zsum: S,
-  old: H,
-  excerpt: K,
-  desc: R,
-  xact: $,
-  block: j,
-  yrow: A,
-  label: G,
-  whint: J,
-  cell: L,
-  ktick: Q,
-  vtick: U,
-  absent: W,
-  ufoot: X,
-  quad: Y
+  media: I,
+  name: O,
+  title: V,
+  gban: M,
+  price: S,
+  zsum: H,
+  old: K,
+  excerpt: R,
+  desc: $,
+  xact: j,
+  block: A,
+  yrow: G,
+  label: J,
+  whint: L,
+  cell: Q,
+  ktick: U,
+  vtick: W,
+  absent: X,
+  ufoot: Y,
+  quad: Z
 };
-function Z() {
-  return /* @__PURE__ */ l.createElement("span", { className: t.ktick, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement(q, { className: t.vtick }));
+function _() {
+  return /* @__PURE__ */ l.createElement("span", { className: t.ktick, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement(z, { className: t.vtick }));
 }
-function _({ value: e }) {
-  return e === !0 ? /* @__PURE__ */ l.createElement(Z, null) : e === !1 || e == null || e === "" ? /* @__PURE__ */ l.createElement("span", { className: t.absent }, "—") : /* @__PURE__ */ l.createElement(l.Fragment, null, e);
+function ee({ value: e }) {
+  return e === !0 ? /* @__PURE__ */ l.createElement(_, null) : e === !1 || e == null || e === "" ? /* @__PURE__ */ l.createElement("span", { className: t.absent }, "—") : /* @__PURE__ */ l.createElement(l.Fragment, null, e);
 }
 function v({
   item: e,
@@ -42,15 +43,15 @@ function v({
 function h({ item: e }) {
   return e.price == null && e.priceOld == null && e.meta == null ? null : /* @__PURE__ */ l.createElement("div", { className: t.price }, e.priceOld != null ? /* @__PURE__ */ l.createElement("span", { className: t.old }, e.priceOld) : null, e.price != null ? /* @__PURE__ */ l.createElement("span", { className: t.zsum }, e.price) : null, e.meta != null ? /* @__PURE__ */ l.createElement("span", { className: t.excerpt }, e.meta) : null);
 }
-function ee({
+function le({
   item: e,
   highlighted: r,
-  selected: i,
+  selected: d,
   selectable: o,
   disabled: u,
   onSelect: m
 }) {
-  const d = e.badge != null && (e.badgePlacement ?? "pill") === "pill", p = e.badge != null && e.badgePlacement === "banner";
+  const i = e.badge != null && (e.badgePlacement ?? "pill") === "pill", p = e.badge != null && e.badgePlacement === "banner";
   return /* @__PURE__ */ l.createElement(
     "div",
     {
@@ -59,8 +60,8 @@ function ee({
       "data-value": e.value,
       "data-highlighted": r ? "true" : void 0,
       "data-selectable": o ? "true" : void 0,
-      "aria-checked": o ? i : void 0,
-      tabIndex: o && !u ? i ? 0 : -1 : void 0,
+      "aria-checked": o ? d : void 0,
+      tabIndex: o && !u ? d ? 0 : -1 : void 0,
       onClick: () => {
         o && !u && m();
       },
@@ -70,7 +71,7 @@ function ee({
     },
     p ? /* @__PURE__ */ l.createElement("span", { className: t.gban }, e.badge) : null,
     e.icon != null ? /* @__PURE__ */ l.createElement("div", { className: t.media }, e.icon) : null,
-    e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(h, { item: e }), /* @__PURE__ */ l.createElement(v, { item: e, pill: d }), e.description != null ? /* @__PURE__ */ l.createElement("p", { className: t.desc }, e.description) : null) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(v, { item: e, pill: d }), e.descriptionPlacement === "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: t.desc }, e.description) : null, /* @__PURE__ */ l.createElement(h, { item: e }), e.descriptionPlacement !== "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: t.desc }, e.description) : null),
+    e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(h, { item: e }), /* @__PURE__ */ l.createElement(v, { item: e, pill: i }), e.description != null ? /* @__PURE__ */ l.createElement("p", { className: t.desc }, e.description) : null) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(v, { item: e, pill: i }), e.descriptionPlacement === "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: t.desc }, e.description) : null, /* @__PURE__ */ l.createElement(h, { item: e }), e.descriptionPlacement !== "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: t.desc }, e.description) : null),
     e.actions != null ? /* @__PURE__ */ l.createElement(
       "div",
       {
@@ -82,39 +83,39 @@ function ee({
     ) : null
   );
 }
-function re({
+function se({
   items: e,
   sections: r,
-  footerActions: i = !0,
+  footerActions: d = !0,
   value: o,
   defaultValue: u,
   selectable: m = !1,
-  disabled: d = !1,
+  disabled: i = !1,
   onValueChange: p,
   className: n,
-  style: b,
-  ...f
+  style: f,
+  ...b
 }) {
-  const [k, N] = D(
+  const [k, N] = F(
     o,
     u,
     p
   ), y = e.length, x = {
-    ...b,
+    ...f,
     gridTemplateColumns: `var(--pricing-table-label-width) repeat(${y}, minmax(12rem, 1fr))`
   };
   let w = 0;
-  return /* @__PURE__ */ l.createElement("div", { className: C(t.root, n), style: x, role: "table", ...f }, /* @__PURE__ */ l.createElement("div", { className: t.quad, role: "columnheader" }), e.map((a) => {
+  return /* @__PURE__ */ l.createElement("div", { className: D(t.root, n), style: x, role: "table", ...b }, /* @__PURE__ */ l.createElement("div", { className: t.quad, role: "columnheader" }), e.map((a) => {
     const s = k === a.value, c = !!a.highlighted || s;
     return /* @__PURE__ */ l.createElement(
-      ee,
+      le,
       {
         key: a.value,
         item: a,
         highlighted: c,
         selected: s,
-        selectable: m && !d && !a.disabled,
-        disabled: d || !!a.disabled,
+        selectable: m && !i && !a.disabled,
+        disabled: i || !!a.disabled,
         onSelect: () => N(a.value)
       }
     );
@@ -128,10 +129,12 @@ function re({
         "data-alt": P ? "true" : void 0,
         role: "row"
       },
-      /* @__PURE__ */ l.createElement("div", { className: t.label, role: "rowheader" }, /* @__PURE__ */ l.createElement("span", null, c.label), c.hint != null && c.hint !== "" ? /* @__PURE__ */ l.createElement(F, { content: c.hint }, /* @__PURE__ */ l.createElement(
-        "button",
+      /* @__PURE__ */ l.createElement("div", { className: t.label, role: "rowheader" }, /* @__PURE__ */ l.createElement("span", null, c.label), c.hint != null && c.hint !== "" ? /* @__PURE__ */ l.createElement(q, { content: c.hint }, /* @__PURE__ */ l.createElement(
+        C,
         {
-          type: "button",
+          variant: "ghost",
+          size: "s",
+          width: "s",
           className: t.whint,
           "aria-label": c.hint
         },
@@ -139,10 +142,10 @@ function re({
       )) : null),
       e.map((g) => {
         var E;
-        return /* @__PURE__ */ l.createElement("div", { key: g.value, className: t.cell, role: "cell" }, /* @__PURE__ */ l.createElement(_, { value: (E = c.values) == null ? void 0 : E[g.value] }));
+        return /* @__PURE__ */ l.createElement("div", { key: g.value, className: t.cell, role: "cell" }, /* @__PURE__ */ l.createElement(ee, { value: (E = c.values) == null ? void 0 : E[g.value] }));
       })
     );
-  }))), i ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: t.quad }), e.map((a) => /* @__PURE__ */ l.createElement("div", { key: a.value, className: t.ufoot }, a.actions != null ? /* @__PURE__ */ l.createElement(
+  }))), d ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: t.quad }), e.map((a) => /* @__PURE__ */ l.createElement("div", { key: a.value, className: t.ufoot }, a.actions != null ? /* @__PURE__ */ l.createElement(
     "div",
     {
       className: t.xact,
@@ -153,5 +156,5 @@ function re({
   ) : null))) : null);
 }
 export {
-  re as P
+  se as P
 };

package/dist/PricingTable.js

@@ -1,4 +1,4 @@
-import { P as e } from "./PricingTable-BjpGVAhi.js";
+import { P as e } from "./PricingTable-Dt2wsnEz.js";
 export {
   e as PricingTable
 };

package/dist/Section-C5XfBTfd.js

@@ -0,0 +1,48 @@
+import t from "react";
+import { c as l } from "./cx-CcykAxZN.js";
+import { S as w } from "./Stack-BPTehVYc.js";
+import './Section.css';const y = "sep", A = "seu", T = "sek", z = "seh", B = "sec", F = "sei", H = "set", R = "sed", j = "see", q = "seb", C = "ses", D = "sel", e = {
+  page: y,
+  uwrap: A,
+  kcard: T,
+  header: z,
+  center: B,
+  icon: F,
+  title: H,
+  demi: R,
+  excerpt: j,
+  body: q,
+  slot: C,
+  line: D
+};
+function K({
+  title: n,
+  description: s,
+  icon: c,
+  children: r,
+  actions: o,
+  variant: m = "page",
+  align: g,
+  titleSize: E = "lg",
+  titleAs: h,
+  direction: N = "column",
+  gap: k,
+  columns: b,
+  className: u,
+  as: f
+}) {
+  const d = m === "auth", a = m === "block", x = g ?? (d ? "center" : "start"), i = f ?? "section", S = h ?? (a ? "h2" : "div"), v = E ?? (a ? "md" : "lg"), p = /* @__PURE__ */ t.createElement(t.Fragment, null, (c != null || n != null || s != null) && /* @__PURE__ */ t.createElement("header", { className: l(e.header, x === "center" && e.center) }, c != null ? /* @__PURE__ */ t.createElement("div", { className: e.icon }, c) : null, n != null ? /* @__PURE__ */ t.createElement(S, { className: l(e.title, v === "md" && e.demi) }, n) : null, s != null ? /* @__PURE__ */ t.createElement("p", { className: e.excerpt }, s) : null), r != null ? /* @__PURE__ */ t.createElement(
+    w,
+    {
+      className: e.body,
+      direction: N,
+      gap: k,
+      columns: b
+    },
+    r
+  ) : null, o != null ? /* @__PURE__ */ t.createElement("div", { className: e.slot }, o) : null);
+  return d ? /* @__PURE__ */ t.createElement("div", { className: l(e.uwrap, u) }, /* @__PURE__ */ t.createElement(i, { className: e.kcard }, p)) : /* @__PURE__ */ t.createElement(i, { className: l(a ? e.line : e.page, u) }, p);
+}
+export {
+  K as S
+};

package/dist/Section.d.ts

@@ -47,6 +47,13 @@ export type SectionProps = {
     align?: "start" | "center";
     /** Размер заголовка */
     titleSize?: "md" | "lg";
+    /**
+     * HTML-тег заголовка.
+     * По умолчанию — `div` для `page`/`auth` и `h2` для `block`,
+     * чтобы не дублировать `h1` из PageHead.
+     * Явно `h1` — только если Section сам заголовок страницы.
+     */
+    titleAs?: "h1" | "h2" | "h3" | "div";
     /** Раскладка тела: как у Stack (по умолчанию `column`) */
     direction?: StackDirection;
     /** Отступ между детьми тела */
@@ -66,4 +73,4 @@ export type SectionProps = {
  *
  * @see PageHead, PageShell, Layout, Stack, EmptyState
  */
-export declare function Section({ title, description, icon, children, actions, variant, align, titleSize, direction, gap, columns, className, as, }: SectionProps): React.JSX.Element;
+export declare function Section({ title, description, icon, children, actions, variant, align, titleSize, titleAs, direction, gap, columns, className, as, }: SectionProps): React.JSX.Element;

package/dist/Section.js

@@ -1,4 +1,4 @@
-import { S as r } from "./Section-PprWjOvt.js";
+import { S as r } from "./Section-C5XfBTfd.js";
 export {
   r as Section
 };