@elcrm/components 0.2.13 → 0.5.1

package/dist/PricingTable-BjpGVAhi.js

@@ -0,0 +1,157 @@
+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,
+  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
+};
+function Z() {
+  return /* @__PURE__ */ l.createElement("span", { className: t.ktick, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement(q, { 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 v({
+  item: e,
+  pill: r
+}) {
+  return e.title == null && !r ? null : /* @__PURE__ */ l.createElement("div", { className: t.name }, e.title != null ? /* @__PURE__ */ l.createElement("h3", { className: t.title }, e.title) : null, r ? /* @__PURE__ */ l.createElement("span", { className: t.gban }, e.badge) : null);
+}
+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({
+  item: e,
+  highlighted: r,
+  selected: i,
+  selectable: o,
+  disabled: u,
+  onSelect: m
+}) {
+  const d = e.badge != null && (e.badgePlacement ?? "pill") === "pill", p = e.badge != null && e.badgePlacement === "banner";
+  return /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      className: t.head,
+      role: o ? "radio" : "columnheader",
+      "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,
+      onClick: () => {
+        o && !u && m();
+      },
+      onKeyDown: (n) => {
+        !o || u || (n.key === "Enter" || n.key === " ") && (n.preventDefault(), m());
+      }
+    },
+    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.actions != null ? /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: t.xact,
+        onClick: (n) => n.stopPropagation(),
+        onMouseDown: (n) => n.preventDefault()
+      },
+      e.actions
+    ) : null
+  );
+}
+function re({
+  items: e,
+  sections: r,
+  footerActions: i = !0,
+  value: o,
+  defaultValue: u,
+  selectable: m = !1,
+  disabled: d = !1,
+  onValueChange: p,
+  className: n,
+  style: b,
+  ...f
+}) {
+  const [k, N] = D(
+    o,
+    u,
+    p
+  ), y = e.length, x = {
+    ...b,
+    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) => {
+    const s = k === a.value, c = !!a.highlighted || s;
+    return /* @__PURE__ */ l.createElement(
+      ee,
+      {
+        key: a.value,
+        item: a,
+        highlighted: c,
+        selected: s,
+        selectable: m && !d && !a.disabled,
+        disabled: d || !!a.disabled,
+        onSelect: () => N(a.value)
+      }
+    );
+  }), r == null ? void 0 : r.map((a, s) => /* @__PURE__ */ l.createElement(l.Fragment, { key: a.value ?? String(a.title) ?? s }, a.title != null ? /* @__PURE__ */ l.createElement("div", { className: t.block, role: "rowheader" }, a.title) : null, a.rows.map((c) => {
+    const P = w++ % 2 === 1;
+    return /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        key: c.key,
+        className: t.yrow,
+        "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",
+        {
+          type: "button",
+          className: t.whint,
+          "aria-label": c.hint
+        },
+        "?"
+      )) : 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] }));
+      })
+    );
+  }))), 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(
+    "div",
+    {
+      className: t.xact,
+      onClick: (s) => s.stopPropagation(),
+      onMouseDown: (s) => s.preventDefault()
+    },
+    a.actions
+  ) : null))) : null);
+}
+export {
+  re as P
+};

package/dist/PricingTable.css

@@ -1 +1 @@
-@layer elcrm-components{.cxr{display:grid;width:100%;column-gap:var(--shell-gap);row-gap:0;align-items:stretch;overflow-x:auto}.cxh{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box;color:var(--shell-color);background:var(--shell-background);border:1px solid transparent;border-radius:var(--shell-radius)}.cxh[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cxm{display:flex;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.4);height:calc(var(--shell-icon-size) * 1.4);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:var(--shell-radius);overflow:hidden}.cxn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cxt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cxg{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight)}.cxp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cxz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.15}.cxo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cxe{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cxd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cxx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cxb{grid-column:1 / -1;margin:var(--shell-gap) 0 var(--shell-gap-sm);padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-accent)}.cxf,.cxy{display:contents}.cxy>*{padding:var(--shell-padding);box-sizing:border-box;border-bottom:1px solid var(--shell-border);background:var(--shell-background)}.cxy[data-alt=true]>*{background:var(--shell-background-muted)}.cxl{display:flex;align-items:center;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cxw{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-status-size);height:var(--shell-status-size);padding:0;border:1px solid var(--shell-border);border-radius:50%;background:transparent;color:var(--shell-color-muted);font-size:9px;line-height:1;cursor:help}.cxc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--shell-font-size-sm);color:var(--shell-color);font-weight:500}.cxk{display:inline-flex;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);color:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.cxv{width:60%;height:60%;display:block}.cxa{color:var(--shell-color-muted)}.cxu{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box}.cxq{min-width:var(--pricing-table-label-width)}}
+@layer elcrm-components{.gtr{display:grid;width:100%;column-gap:var(--shell-gap);row-gap:0;align-items:stretch;overflow-x:auto}.gth{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box;color:var(--shell-color);background:var(--shell-background);border:1px solid transparent;border-radius:var(--shell-radius)}.gth[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.gtm{display:flex;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.4);height:calc(var(--shell-icon-size) * 1.4);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:var(--shell-radius);overflow:hidden}.gtn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.gtt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.gtg{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight)}.gtp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.gtz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.15}.gto{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.gte{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.gtd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.gtx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.gtb{grid-column:1 / -1;margin:var(--shell-gap) 0 var(--shell-gap-sm);padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-accent)}.gtf,.gty{display:contents}.gty>*{padding:var(--shell-padding);box-sizing:border-box;border-bottom:1px solid var(--shell-border);background:var(--shell-background)}.gty[data-alt=true]>*{background:var(--shell-background-muted)}.gtl{display:flex;align-items:center;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.gtw{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-status-size);height:var(--shell-status-size);padding:0;border:1px solid var(--shell-border);border-radius:50%;background:transparent;color:var(--shell-color-muted);font-size:9px;line-height:1;cursor:help}.gtc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--shell-font-size-sm);color:var(--shell-color);font-weight:500}.gtk{display:inline-flex;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);color:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.gtv{width:60%;height:60%;display:block}.gta{color:var(--shell-color-muted)}.gtu{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box}.gtq{min-width:var(--pricing-table-label-width)}}

package/dist/PricingTable.d.ts

@@ -1,15 +1,10 @@
 import { default as React } from 'react';
-import { PricingPlan } from './PricingGroup';
+import { PricingTableCellValue, PricingTableItem } from './PricingTableParts';
 /**
  * Колонка тарифа в таблице — тот же {@link PricingPlan}, что у {@link PricingGroup}.
  * Один массив `items` можно шарить между Group и Table.
  */
-export type PricingTableItem = PricingPlan;
-/**
- * Значение ячейки матрицы:
- * `true` — галочка, `false` / `null` / нет ключа — «—», иначе текст/узел.
- */
-export type PricingTableCellValue = boolean | React.ReactNode | null | undefined;
+export type { PricingTableItem, PricingTableCellValue };
 /**
  * Строка сравнения в секции таблицы.
  *
@@ -32,6 +27,8 @@ export type PricingTableRow = {
  * Секция матрицы сравнения (заголовок + строки).
  */
 export type PricingTableSection = {
+    /** Идентификатор секции (ключ React). */
+    value?: string;
     /** Заголовок секции («Безопасность»). Нет — не рисуем. */
     title?: React.ReactNode;
     /** Строки фич / параметров. */

package/dist/PricingTable.js

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

package/dist/RadioGroup-DI4KKUvZ.js

@@ -0,0 +1,121 @@
+import e from "react";
+import { C as q } from "./CheckIcon-FdB8fMEF.js";
+import { c as o } from "./cx-CcykAxZN.js";
+import { u as w } from "./useControllableValue-BaE0VR5d.js";
+import './RadioGroup.css';const z = "lrr", R = "lri", F = "lrs", I = "lrp", V = "lrh", A = "lrn", B = "lrm", D = "lrf", G = "lrc", L = "lrt", P = "lre", T = "lrd", j = "lrx", H = "lry", J = "lrz", K = "lrk", M = "lro", O = "lrq", Q = "lrw", n = {
+  root: z,
+  item: R,
+  selected: F,
+  psplit: I,
+  head: V,
+  native: A,
+  media: B,
+  framed: D,
+  col: G,
+  title: L,
+  extra: P,
+  desc: T,
+  xact: j,
+  ybody: H,
+  zsum: J,
+  knob: K,
+  oround: M,
+  quad: O,
+  wtick: Q
+};
+function E({
+  kind: t,
+  selected: a
+}) {
+  const c = t === "radio";
+  return /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: o(n.knob, c ? n.oround : n.quad),
+      "data-on": a ? "true" : void 0,
+      "aria-hidden": !0
+    },
+    !c && a ? /* @__PURE__ */ e.createElement(q, { className: n.wtick }) : null
+  );
+}
+function u({
+  title: t,
+  meta: a,
+  price: c,
+  badge: r
+}) {
+  return t == null && a == null && c == null && r == null ? null : /* @__PURE__ */ e.createElement("div", { className: n.title }, c != null ? /* @__PURE__ */ e.createElement("span", { className: n.zsum }, c) : null, t ?? null, a != null ? /* @__PURE__ */ e.createElement("span", { className: n.extra }, a) : null, r ?? null);
+}
+function v({ children: t }) {
+  return /* @__PURE__ */ e.createElement("div", { className: n.xact, onClick: (a) => a.stopPropagation() }, t);
+}
+function Y({
+  items: t,
+  value: a,
+  defaultValue: c,
+  name: r,
+  disabled: i = !1,
+  indicator: m = "check",
+  indicatorSide: f = "end",
+  onValueChange: N,
+  className: k,
+  ...b
+}) {
+  const h = e.useId(), x = r ?? h, [y, g] = w(
+    a,
+    c,
+    N
+  );
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: o(n.root, k),
+      role: "radiogroup",
+      "aria-disabled": i || void 0,
+      ...b
+    },
+    t.map((l) => {
+      const s = y === l.value, C = i || !!l.disabled, d = l.variant === "split", p = l.iconFramed !== !1;
+      return /* @__PURE__ */ e.createElement(
+        "label",
+        {
+          key: l.value,
+          className: o(n.item, s && n.selected, d && n.psplit),
+          "data-selected": s ? "true" : void 0,
+          "data-indicator": d ? void 0 : f
+        },
+        /* @__PURE__ */ e.createElement(
+          "input",
+          {
+            className: n.native,
+            type: "radio",
+            name: x,
+            value: l.value,
+            checked: s,
+            disabled: C,
+            onChange: () => g(l.value)
+          }
+        ),
+        d ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: n.head }, l.icon != null ? /* @__PURE__ */ e.createElement("div", { className: o(n.media, p && n.framed) }, l.icon) : null, /* @__PURE__ */ e.createElement(u, { title: l.title }), /* @__PURE__ */ e.createElement(E, { kind: m, selected: s })), /* @__PURE__ */ e.createElement("div", { className: n.ybody }, /* @__PURE__ */ e.createElement(
+          u,
+          {
+            price: l.price,
+            meta: l.meta,
+            badge: l.badge
+          }
+        ), l.description != null ? /* @__PURE__ */ e.createElement("p", { className: n.desc }, l.description) : null, l.actions != null ? /* @__PURE__ */ e.createElement(v, null, l.actions) : null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, l.icon != null ? /* @__PURE__ */ e.createElement("div", { className: o(n.media, p && n.framed) }, l.icon) : null, /* @__PURE__ */ e.createElement("div", { className: n.col }, /* @__PURE__ */ e.createElement(
+          u,
+          {
+            title: l.title,
+            meta: l.meta,
+            price: l.price,
+            badge: l.badge
+          }
+        ), l.description != null ? /* @__PURE__ */ e.createElement("p", { className: n.desc }, l.description) : null, l.actions != null ? /* @__PURE__ */ e.createElement(v, null, l.actions) : null), /* @__PURE__ */ e.createElement(E, { kind: m, selected: s }))
+      );
+    })
+  );
+}
+export {
+  Y 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: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}}
+@layer elcrm-components{.lrr{display:flex;flex-direction:column;gap:var(--shell-gap)}.lri{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}.lri:hover:not(:disabled){background:var(--shell-background-hover)}.lri:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.lrs,.lri[data-selected=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.lrp{flex-direction:column;align-items:stretch;padding:0;gap:0}.lrp.lrs .lrh,.lrp[data-selected=true] .lrh{border-bottom-color:var(--shell-color-accent)}.lrn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.lrm{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden}.lrf{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)}.lrc{display:flex;flex:1;flex-direction:column;gap:var(--shell-gap-sm);min-width:0}.lrt{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}.lre{font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted)}.lrd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.lrx{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);margin-top:var(--shell-gap-sm)}.lrh{display:flex;align-items:center;gap:var(--shell-gap);padding:var(--shell-padding);border-bottom:1px solid var(--shell-border)}.lrh .lrt{flex:1;min-width:0}.lry{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding)}.lrz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.2}.lrk{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)}.lri[data-indicator=start]>.lrk{margin-left:0;order:-1}.lro{border-radius:50%}.lro[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)}.lrq{border-radius:calc(var(--shell-radius) * .4)}.lrq[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.lrw{width:60%;height:60%;display:block}}

package/dist/RadioGroup.js

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

package/dist/Section-PprWjOvt.js

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

package/dist/Section.css

@@ -1 +1 @@
-@layer elcrm-components{.cep{display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--section-padding);flex:1;min-width:0}.ceu{box-sizing:border-box;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-padding)}.cek{box-sizing:border-box;width:100%;max-width:var(--section-auth-card-max-width);padding:var(--shell-gap-lg);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow);display:flex;flex-direction:column;gap:var(--shell-gap)}.ceh{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cec{text-align:center;align-items:center}.cei{display:flex;margin-bottom:var(--shell-gap-sm)}.cec .cei{justify-content:center}.cet{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);letter-spacing:-.02em;color:var(--shell-color);line-height:1.25}.ced{font-size:var(--section-title-size-md)}.cee{margin:0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.ceb{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;text-align:left}.ces{display:flex;flex-direction:column;gap:var(--shell-gap-sm);width:100%}.cel{display:flex;flex-direction:column;gap:var(--shell-gap);margin-bottom:var(--shell-gap-lg);padding-bottom:var(--shell-gap-lg);border-bottom:1px solid var(--shell-border)}.cel:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.cel .cet{font-size:var(--shell-font-size);font-weight:var(--shell-font-weight)}}
+@layer elcrm-components{.sep{display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--section-padding);flex:1;min-width:0}.seu{box-sizing:border-box;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-padding)}.sek{box-sizing:border-box;width:100%;max-width:var(--section-auth-card-max-width);padding:var(--shell-gap-lg);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow);display:flex;flex-direction:column;gap:var(--shell-gap)}.seh{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.sec{text-align:center;align-items:center}.sei{display:flex;margin-bottom:var(--shell-gap-sm)}.sec .sei{justify-content:center}.set{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);letter-spacing:-.02em;color:var(--shell-color);line-height:1.25}.sed{font-size:var(--section-title-size-md)}.see{margin:0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.seb{width:100%;text-align:left}.ses{display:flex;flex-direction:column;gap:var(--shell-gap-sm);width:100%}.sel{display:flex;flex-direction:column;gap:var(--shell-gap);margin-bottom:var(--shell-gap-lg);padding-bottom:var(--shell-gap-lg);border-bottom:1px solid var(--shell-border)}.sel:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.sel .set{font-size:var(--shell-font-size);font-weight:var(--shell-font-weight)}}

package/dist/Section.d.ts

@@ -1,15 +1,26 @@
 import { default as React } from 'react';
+import { StackColumns, StackDirection } from './Stack';
 /**
  * Единая секция страницы: заголовок, описание, иконка, контент, действия.
  *
- * Роли: Section = блок модуля / панель / auth-карточка;
- * для строки «title + actions» на странице — PageHead;
- * каркас со скроллом — PageShell.
+ * Роли (не путать):
+ * - `Layout` — оболочка приложения (`<main>` внутри);
+ * - `PageShell` — каркас модуля (скролл + footer);
+ * - `PageHead` — строка title + actions на странице;
+ * - `Section` — блок контента / auth / подраздел.
+ *
+ * Тело (`children`) — тот же ряд/колонка/сетка, что у `Stack`
+ * (`direction` / `gap` / `columns`). Ряд кнопок в `actions` —
+ * оберни в `<Stack direction="row">`.
  *
  * @example
  * ```tsx
- * <Section title="Настройки" description="Профиль и безопасность" variant="page">
- *   <Stack gap={16}>…</Stack>
+ * <Section title="Фильтры" direction="row" gap={12}>
+ *   <SearchField name="q" />
+ *   <Button>Найти</Button>
+ * </Section>
+ * <Section title="Карточки" direction="grid" columns={3} gap={16}>
+ *   <Stat label="Всего" value={10} />
  * </Section>
  * ```
  *
@@ -24,7 +35,7 @@ export type SectionProps = {
     icon?: React.ReactNode;
     /** Основной контент секции */
     children?: React.ReactNode;
-    /** Блок действий (кнопки под контентом или в шапке) */
+    /** Блок действий под контентом (колонка; для ряда — Stack direction="row") */
     actions?: React.ReactNode;
     /**
      * `page` — секция модуля / панель настроек.
@@ -36,14 +47,23 @@ export type SectionProps = {
     align?: "start" | "center";
     /** Размер заголовка */
     titleSize?: "md" | "lg";
+    /** Раскладка тела: как у Stack (по умолчанию `column`) */
+    direction?: StackDirection;
+    /** Отступ между детьми тела */
+    gap?: number | string;
+    /** Сетка тела: число колонок или треки (только при `direction="grid"`) */
+    columns?: StackColumns;
     /** Доп. CSS-класс */
     className?: string;
-    /** HTML-тег корня (`main` / `section` / `div`) */
+    /**
+     * HTML-тег корня. По умолчанию `section` (Layout уже даёт `<main>`).
+     * Явно `main` — только если Section сам корень страницы без Layout.
+     */
     as?: "section" | "main" | "div";
 };
 /**
  * Единая секция страницы: title + description + icon + children.
  *
- * @see PageHead, PageShell, Stack, EmptyState
+ * @see PageHead, PageShell, Layout, Stack, EmptyState
  */
-export declare function Section({ title, description, icon, children, actions, variant, align, titleSize, className, as, }: SectionProps): React.JSX.Element;
+export declare function Section({ title, description, icon, children, actions, variant, align, titleSize, direction, gap, columns, className, as, }: SectionProps): React.JSX.Element;

package/dist/Section.js

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