@elcrm/components 0.0.1 → 0.1.0

package/dist/PageShell.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+/**
+ * Каркас модуля: скролл в body, опциональный footer прибит к низу.
+ *
+ * Роли: PageShell = внутренний каркас контента в Layout;
+ * сверху часто PageHead / Section, снизу — панель действий.
+ *
+ * @example
+ * ```tsx
+ * <PageShell wide footer={<Footer><Button>Сохранить</Button></Footer>}>
+ *   <PageHead title="Редактор" />
+ *   …
+ * </PageShell>
+ * ```
+ *
+ * Токены: `--shell-*`.
+ */
+export type PageShellProps = {
+    /** Контент модуля (скроллится) */
+    children: React.ReactNode;
+    /** Доп. CSS-класс */
+    className?: string;
+    /** Шире контент (редакторы, таблицы) */
+    wide?: boolean;
+    /** Нижняя панель вне скролла */
+    footer?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className">;
+/**
+ * Каркас модуля: скролл в body, footer прибит к низу.
+ *
+ * @see PageHead, Layout, Section, Footer
+ */
+export declare function PageShell({ children, className, wide, footer, ...rootProps }: PageShellProps): React.JSX.Element;

package/dist/PageShell.js

@@ -0,0 +1,4 @@
+import { P as l } from "./PageShell-CghThHS3.js";
+export {
+  l as PageShell
+};

package/dist/PricingGroup-CiqQtzjd.js

@@ -0,0 +1,126 @@
+import e from "react";
+import { c as i } from "./cx-CcykAxZN.js";
+import './PricingGroup.css';const z = "cur", O = "cui", j = "cus", M = "cub", R = "cug", A = "cugt", G = "cum", I = "cuh", K = "cut", T = "cup", U = "cuz", W = "cuo", $ = "cue", q = "cud", C = "cux", H = "cuf", J = "cuy", Q = "cul", X = "cuu", Y = "cun", Z = "cuc", _ = "cuk", V = "cukv", t = {
+  r: z,
+  i: O,
+  s: j,
+  b: M,
+  g: R,
+  gt: A,
+  m: G,
+  h: I,
+  t: K,
+  p: T,
+  z: U,
+  o: W,
+  e: $,
+  d: q,
+  x: C,
+  f: H,
+  y: J,
+  l: Q,
+  u: X,
+  n: Y,
+  c: Z,
+  k: _,
+  kv: V
+};
+function k() {
+  return /* @__PURE__ */ e.createElement("span", { className: t.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("svg", { className: t.kv, viewBox: "0 0 12 12" }, /* @__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({ feature: l }) {
+  if (l != null && typeof l == "object" && !e.isValidElement(l) && "label" in l) {
+    const c = l;
+    return /* @__PURE__ */ e.createElement("li", { className: t.c }, c.icon != null ? c.icon : /* @__PURE__ */ e.createElement(k, null), /* @__PURE__ */ e.createElement("span", null, c.label));
+  }
+  return /* @__PURE__ */ e.createElement("li", { className: t.c }, /* @__PURE__ */ e.createElement(k, null), /* @__PURE__ */ e.createElement("span", null, l));
+}
+function N({ item: l }) {
+  const c = l.badge != null && (l.badgePlacement ?? "pill") === "pill";
+  return l.title == null && !c ? null : /* @__PURE__ */ e.createElement("div", { className: t.h }, l.title != null ? /* @__PURE__ */ e.createElement("h3", { className: t.t }, l.title) : null, c ? /* @__PURE__ */ e.createElement("span", { className: t.g }, l.badge) : null);
+}
+function h({ item: l }) {
+  return l.price == null && l.priceOld == null && l.meta == null ? null : /* @__PURE__ */ e.createElement("div", { className: t.p }, l.priceOld != null ? /* @__PURE__ */ e.createElement("span", { className: t.o }, l.priceOld) : null, l.price != null ? /* @__PURE__ */ e.createElement("span", { className: t.z }, l.price) : null, l.meta != null ? /* @__PURE__ */ e.createElement("span", { className: t.e }, l.meta) : null);
+}
+function d({ item: l }) {
+  return l.description == null ? null : /* @__PURE__ */ e.createElement("p", { className: t.d }, l.description);
+}
+function le({
+  actions: l,
+  placement: c
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: c === "footer" ? t.f : t.x,
+      onClick: (a) => a.stopPropagation(),
+      onMouseDown: (a) => a.preventDefault()
+    },
+    l
+  );
+}
+function ne({ item: l }) {
+  return l.features == null && l.featuresLabel == null && l.featuresSummary == null ? null : /* @__PURE__ */ e.createElement("div", { className: t.y }, l.featuresLabel != null ? /* @__PURE__ */ e.createElement("p", { className: t.l }, l.featuresLabel) : null, l.featuresSummary != null ? /* @__PURE__ */ e.createElement("p", { className: t.u }, l.featuresSummary) : null, l.features != null && l.features.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: t.n }, l.features.map((c, a) => /* @__PURE__ */ e.createElement(ee, { key: a, feature: c }))) : null);
+}
+function ae({
+  items: l,
+  value: c,
+  defaultValue: a,
+  selectable: y = !1,
+  disabled: P = !1,
+  onValueChange: u,
+  className: x,
+  ...B
+}) {
+  const [D, F] = e.useState(a), m = c !== void 0, w = m ? c : D, f = (n) => {
+    m || F(n), u == null || u(n);
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: i(t.r, x), role: "list", ...B }, l.map((n) => {
+    const p = w === n.value, E = P || !!n.disabled, L = !!n.highlighted || p, g = n.badgePlacement ?? "pill", r = n.actionsPlacement ?? "after", v = n.descriptionPlacement ?? "after-price", s = y && !E, b = n.actions != null ? /* @__PURE__ */ e.createElement(
+      le,
+      {
+        actions: n.actions,
+        placement: r
+      }
+    ) : null, S = /* @__PURE__ */ e.createElement(e.Fragment, null, n.priceFirst ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(h, { item: n }), /* @__PURE__ */ e.createElement(N, { item: n }), /* @__PURE__ */ e.createElement(d, { item: n })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(N, { item: n }), v === "before-price" ? /* @__PURE__ */ e.createElement(d, { item: n }) : null, /* @__PURE__ */ e.createElement(h, { item: n }), v === "after-price" ? /* @__PURE__ */ e.createElement(d, { item: n }) : null));
+    return /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        key: n.value,
+        role: "listitem",
+        className: i(t.i, L && t.s),
+        "data-selected": p ? "true" : void 0,
+        "data-highlighted": n.highlighted ? "true" : void 0,
+        "data-selectable": s ? "true" : void 0,
+        "aria-disabled": E || void 0,
+        tabIndex: s ? 0 : void 0,
+        onClick: () => {
+          s && f(n.value);
+        },
+        onKeyDown: (o) => {
+          s && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), f(n.value));
+        }
+      },
+      n.badge != null && g === "banner" ? /* @__PURE__ */ e.createElement("div", { className: t.b }, n.badge) : null,
+      n.badge != null && g === "float" ? /* @__PURE__ */ e.createElement("div", { className: i(t.g, t.gt) }, n.badge) : null,
+      n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: t.m }, n.icon) : null,
+      S,
+      r === "before" ? b : null,
+      /* @__PURE__ */ e.createElement(ne, { item: n }),
+      r === "after" || r === "footer" ? b : null
+    );
+  }));
+}
+export {
+  ae as P
+};

package/dist/PricingGroup.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cur{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pricing-card-min-width),1fr));gap:var(--shell-gap-lg);align-items:stretch}.cui{position:relative;display:flex;flex-direction:column;gap:var(--shell-gap);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);box-shadow:var(--shell-shadow)}.cui[data-selectable=true]{cursor:pointer}.cui:disabled,.cui[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cus,.cui[data-selected=true],.cui[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected);box-shadow:var(--shell-shadow)}.cub{display:flex;align-items:center;justify-content:center;margin:calc(-1 * var(--shell-padding-block)) calc(-1 * var(--shell-padding-inline)) 0;padding:var(--shell-gap-sm) var(--shell-padding-inline);border-radius:var(--shell-radius) var(--shell-radius) 0 0;background:var(--shell-color-accent);color:#fff;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);text-align:center}.cug{display:inline-flex;align-items:center;width:fit-content;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);line-height:1.2}.cugt{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.cum{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.6);height:calc(var(--shell-icon-size) * 1.6);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:50%;overflow:hidden}.cuh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cut{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cup{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cuz{font-size:calc(var(--shell-font-size-lg) * 1.35);font-weight:700;color:var(--shell-color);line-height:1.15}.cui[data-highlighted=true] .cuz,.cui[data-selected=true] .cuz{color:var(--shell-color-accent)}.cuo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cue{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cud{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cux{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cuf{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:auto calc(-1 * var(--shell-padding-inline)) calc(-1 * var(--shell-padding-block));padding:var(--shell-padding);background:var(--shell-background-muted);border-top:1px solid var(--shell-border);border-radius:0 0 var(--shell-radius) var(--shell-radius)}.cuy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin-top:auto}.cul{margin:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted)}.cuu{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.4}.cun{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cuc{display:flex;align-items:flex-start;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cuk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-top:.1em;color:#fff;background:var(--shell-color-success);border-radius:50%}.cukv{width:60%;height:60%;display:block}}

package/dist/PricingGroup.d.ts

@@ -0,0 +1,130 @@
+import { default as React } from 'react';
+/**
+ * Фича тарифа: простой узел или объект с подписью и опциональной иконкой.
+ */
+export type PricingFeature = React.ReactNode | {
+    /** Текст фичи. */
+    label: React.ReactNode;
+    /** Своя иконка; иначе — галочка из коробки. */
+    icon?: React.ReactNode;
+};
+/**
+ * Общий тип тарифного плана для {@link PricingGroup} и {@link PricingTable}.
+ *
+ * Один массив `items` (`PricingPlan[]`) можно переиспользовать в обоих компонентах.
+ * Идентификатор плана — `value` (не `key`).
+ * Опциональные поля: нет → соответствующий блок не рисуется.
+ * Декларативный API `items`, без compound-слотов.
+ */
+export type PricingPlan = {
+    /** Уникальный идентификатор плана (не `key`). */
+    value: string;
+    /** Название тарифа. */
+    title?: React.ReactNode;
+    /** Краткое описание. */
+    description?: React.ReactNode;
+    /** Иконка сверху — только если передана. */
+    icon?: React.ReactNode;
+    /** Цена. */
+    price?: React.ReactNode;
+    /** Старая цена (зачёркнутая). */
+    priceOld?: React.ReactNode;
+    /** «per month», «Billed annually», «в месяц…». */
+    meta?: React.ReactNode;
+    /** Popular / Рекомендуем / Most popular plan. */
+    badge?: React.ReactNode;
+    /**
+     * Расположение badge:
+     * `banner` — полоса сверху;
+     * `pill` — рядом с title;
+     * `float` — над верхней гранью по центру.
+     */
+    badgePlacement?: "banner" | "pill" | "float";
+    /** Цена выше title (макет «Most popular»). */
+    priceFirst?: boolean;
+    /** description до или после блока цены. */
+    descriptionPlacement?: "before-price" | "after-price";
+    /** Список фич. */
+    features?: PricingFeature[];
+    /** Заголовок блока фич («FEATURES»). */
+    featuresLabel?: React.ReactNode;
+    /** Сводка («Everything in Starter plus…»). */
+    featuresSummary?: React.ReactNode;
+    /** Кнопки (приложение даёт `@elcrm/button` и т.п.). */
+    actions?: React.ReactNode;
+    /**
+     * Куда ставить actions:
+     * `after` — под фичами (по умолчанию);
+     * `before` — над фичами;
+     * `footer` — в подложке внизу.
+     */
+    actionsPlacement?: "before" | "after" | "footer";
+    /** Акцентная рамка / «рекомендуем». */
+    highlighted?: boolean;
+    /** Недоступный план. */
+    disabled?: boolean;
+};
+/** @deprecated используй {@link PricingPlan} */
+export type PricingGroupItem = PricingPlan;
+/**
+ * Props компонента {@link PricingGroup}.
+ *
+ * Групповой UI: `items: PricingPlan[]` + опциональный выбор по `value`.
+ */
+export type PricingGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /** Тарифные карточки — тот же shape, что у {@link PricingTable}. */
+    items: PricingPlan[];
+    /** Выбранный план (controlled), сравнивается с `item.value`. */
+    value?: string;
+    /** Начальный выбранный план (uncontrolled). */
+    defaultValue?: string;
+    /** Клик по карточке выбирает value (actions не трогают выбор). */
+    selectable?: boolean;
+    /** Заблокировать выбор. */
+    disabled?: boolean;
+    /** Смена выбранного плана. */
+    onValueChange?: (value: string) => void;
+};
+/**
+ * Горизонтальная группа тарифных карточек из декларативного `items`.
+ *
+ * Когда использовать:
+ * - страница тарифов / upgrade без матрицы сравнения;
+ * - один и тот же массив {@link PricingPlan} позже уйдёт в {@link PricingTable}.
+ *
+ * Связанные компоненты:
+ * - {@link PricingTable} — сравнительная матрица поверх тех же `items`;
+ * - {@link RadioGroup} — выбор опции с индикатором, не обязательно тариф.
+ *
+ * Общий тип плана — {@link PricingPlan}. Идентификатор — `value` (не `key`).
+ * Compound-слоты не используются.
+ *
+ * CSS-токены: `--shell-*`, узкие `--pricing-card-min-width`.
+ *
+ * @example
+ * ```tsx
+ * const items: PricingPlan[] = [
+ *   {
+ *     value: "starter",
+ *     title: "Starter",
+ *     price: "$9",
+ *     meta: "в месяц",
+ *     features: ["1 проект", "Email-поддержка"],
+ *     actions: <Button onSend={…}>Выбрать</Button>,
+ *   },
+ *   {
+ *     value: "pro",
+ *     title: "Pro",
+ *     price: "$29",
+ *     badge: "Popular",
+ *     badgePlacement: "float",
+ *     highlighted: true,
+ *     features: ["Безлимит", "SSO"],
+ *     actions: <Button onSend={…}>Выбрать</Button>,
+ *   },
+ * ];
+ *
+ * <PricingGroup items={items} selectable value={plan} onValueChange={setPlan} />
+ * ```
+ */
+export declare function PricingGroup({ items, value: valueProp, defaultValue, selectable, disabled, onValueChange, className, ...rest }: PricingGroupProps): React.JSX.Element;

package/dist/PricingGroup.js

@@ -0,0 +1,4 @@
+import { P as i } from "./PricingGroup-CiqQtzjd.js";
+export {
+  i as PricingGroup
+};

package/dist/PricingTable-DYTJG4AU.js

@@ -0,0 +1,158 @@
+import l from "react";
+import { c as z } from "./cx-CcykAxZN.js";
+import './PricingTable.css';const B = "cxr", C = "cxh", M = "cxm", O = "cxn", T = "cxt", I = "cxg", L = "cxp", S = "cxz", j = "cxo", H = "cxe", K = "cxd", R = "cxx", U = "cxb", W = "cxy", $ = "cxl", A = "cxw", G = "cxc", J = "cxk", Q = "cxkv", X = "cxa", Y = "cxft", Z = "cxq", n = {
+  r: B,
+  h: C,
+  m: M,
+  n: O,
+  t: T,
+  g: I,
+  p: L,
+  z: S,
+  o: j,
+  e: H,
+  d: K,
+  x: R,
+  b: U,
+  y: W,
+  l: $,
+  w: A,
+  c: G,
+  k: J,
+  kv: Q,
+  a: X,
+  ft: Y,
+  q: Z
+};
+function _() {
+  return /* @__PURE__ */ l.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement("svg", { className: n.kv, viewBox: "0 0 12 12" }, /* @__PURE__ */ l.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 V({ value: e }) {
+  return e === !0 ? /* @__PURE__ */ l.createElement(_, null) : e === !1 || e == null || e === "" ? /* @__PURE__ */ l.createElement("span", { className: n.a }, "—") : /* @__PURE__ */ l.createElement(l.Fragment, null, e);
+}
+function ee({
+  item: e,
+  highlighted: r,
+  selectable: o,
+  disabled: u,
+  onSelect: d
+}) {
+  const i = e.badge != null && (e.badgePlacement ?? "pill") === "pill", m = e.badge != null && e.badgePlacement === "banner";
+  return /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      className: n.h,
+      "data-highlighted": r ? "true" : void 0,
+      "data-selectable": o ? "true" : void 0,
+      tabIndex: o && !u ? 0 : void 0,
+      onClick: () => {
+        o && !u && d();
+      },
+      onKeyDown: (a) => {
+        !o || u || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), d());
+      }
+    },
+    m ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null,
+    e.icon != null ? /* @__PURE__ */ l.createElement("div", { className: n.m }, e.icon) : null,
+    e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(f, { item: e }), /* @__PURE__ */ l.createElement(x, { item: e, pill: i }), e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(x, { item: e, pill: i }), e.descriptionPlacement === "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null, /* @__PURE__ */ l.createElement(f, { item: e }), e.descriptionPlacement !== "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null),
+    e.actions != null ? /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        className: n.x,
+        onClick: (a) => a.stopPropagation(),
+        onMouseDown: (a) => a.preventDefault()
+      },
+      e.actions
+    ) : null
+  );
+}
+function x({
+  item: e,
+  pill: r
+}) {
+  return e.title == null && !r ? null : /* @__PURE__ */ l.createElement("div", { className: n.n }, e.title != null ? /* @__PURE__ */ l.createElement("h3", { className: n.t }, e.title) : null, r ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null);
+}
+function f({ item: e }) {
+  return e.price == null && e.priceOld == null && e.meta == null ? null : /* @__PURE__ */ l.createElement("div", { className: n.p }, e.priceOld != null ? /* @__PURE__ */ l.createElement("span", { className: n.o }, e.priceOld) : null, e.price != null ? /* @__PURE__ */ l.createElement("span", { className: n.z }, e.price) : null, e.meta != null ? /* @__PURE__ */ l.createElement("span", { className: n.e }, e.meta) : null);
+}
+function te({
+  items: e,
+  sections: r,
+  footerActions: o = !0,
+  value: u,
+  defaultValue: d,
+  selectable: i = !1,
+  disabled: m = !1,
+  onValueChange: a,
+  className: N,
+  style: g,
+  ...h
+}) {
+  const [k, b] = l.useState(d), p = u !== void 0, y = p ? u : k, w = (t) => {
+    p || b(t), a == null || a(t);
+  }, P = e.length, D = {
+    ...g,
+    gridTemplateColumns: `var(--pricing-table-label-width) repeat(${P}, minmax(12rem, 1fr))`
+  };
+  let F = 0;
+  return /* @__PURE__ */ l.createElement("div", { className: z(n.r, N), style: D, role: "table", ...h }, /* @__PURE__ */ l.createElement("div", { className: n.q, role: "columnheader" }), e.map((t) => {
+    const s = y === t.value, c = !!t.highlighted || s;
+    return /* @__PURE__ */ l.createElement(
+      ee,
+      {
+        key: t.value,
+        item: t,
+        highlighted: c,
+        selectable: i && !m && !t.disabled,
+        disabled: m || !!t.disabled,
+        onSelect: () => w(t.value)
+      }
+    );
+  }), r == null ? void 0 : r.map((t, s) => /* @__PURE__ */ l.createElement(l.Fragment, { key: s }, t.title != null ? /* @__PURE__ */ l.createElement("div", { className: n.b, role: "rowheader" }, t.title) : null, t.rows.map((c) => {
+    const q = F++ % 2 === 1;
+    return /* @__PURE__ */ l.createElement(
+      "div",
+      {
+        key: c.key,
+        className: n.y,
+        "data-alt": q ? "true" : void 0,
+        role: "row"
+      },
+      /* @__PURE__ */ l.createElement("div", { className: n.l, role: "rowheader" }, /* @__PURE__ */ l.createElement("span", null, c.label), c.hint != null && c.hint !== "" ? /* @__PURE__ */ l.createElement(
+        "button",
+        {
+          type: "button",
+          className: n.w,
+          title: c.hint,
+          "aria-label": c.hint
+        },
+        "?"
+      ) : null),
+      e.map((E) => {
+        var v;
+        return /* @__PURE__ */ l.createElement("div", { key: E.value, className: n.c, role: "cell" }, /* @__PURE__ */ l.createElement(V, { value: (v = c.values) == null ? void 0 : v[E.value] }));
+      })
+    );
+  }))), o ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: n.q }), e.map((t) => /* @__PURE__ */ l.createElement("div", { key: t.value, className: n.ft }, t.actions != null ? /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      className: n.x,
+      onClick: (s) => s.stopPropagation(),
+      onMouseDown: (s) => s.preventDefault()
+    },
+    t.actions
+  ) : null))) : null);
+}
+export {
+  te as P
+};

package/dist/PricingTable.css

@@ -0,0 +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:#fff;background:var(--shell-color-success);border-radius:50%}.cxkv{width:60%;height:60%;display:block}.cxa{color:var(--shell-color-muted)}.cxft{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)}}

package/dist/PricingTable.d.ts

@@ -0,0 +1,108 @@
+import { default as React } from 'react';
+import { PricingPlan } from './PricingGroup';
+/**
+ * Колонка тарифа в таблице — тот же {@link PricingPlan}, что у {@link PricingGroup}.
+ * Один массив `items` можно шарить между Group и Table.
+ */
+export type PricingTableItem = PricingPlan;
+/**
+ * Значение ячейки матрицы:
+ * `true` — галочка, `false` / `null` / нет ключа — «—», иначе текст/узел.
+ */
+export type PricingTableCellValue = boolean | React.ReactNode | null | undefined;
+/**
+ * Строка сравнения в секции таблицы.
+ *
+ * Ключи в `values` — это `item.value` планов (не React `key` колонки).
+ */
+export type PricingTableRow = {
+    /** Стабильный ключ строки в секции (React key / id строки). */
+    key: string;
+    /** Подпись слева. */
+    label: React.ReactNode;
+    /** Подсказка у «?» рядом с label. */
+    hint?: string;
+    /**
+     * Значения по `item.value` плана.
+     * `true` — галочка, `false` / `null` / нет ключа — «—», иначе текст/node.
+     */
+    values?: Record<string, PricingTableCellValue>;
+};
+/**
+ * Секция матрицы сравнения (заголовок + строки).
+ */
+export type PricingTableSection = {
+    /** Заголовок секции («Безопасность»). Нет — не рисуем. */
+    title?: React.ReactNode;
+    /** Строки фич / параметров. */
+    rows: PricingTableRow[];
+};
+/**
+ * Props компонента {@link PricingTable}.
+ *
+ * `items` — колонки планов ({@link PricingPlan}); `sections` — матрица сравнения.
+ */
+export type PricingTableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /** Колонки планов — тот же shape, что у {@link PricingGroup}. */
+    items: PricingTableItem[];
+    /** Матрица сравнения (секции → строки → values по plan.value). */
+    sections?: PricingTableSection[];
+    /** Повторить actions внизу таблицы (как на макетах). */
+    footerActions?: boolean;
+    /** Выбранный план (controlled). */
+    value?: string;
+    /** Начальный план (uncontrolled). */
+    defaultValue?: string;
+    /** Клик по шапке колонки выбирает план. */
+    selectable?: boolean;
+    /** Заблокировать выбор. */
+    disabled?: boolean;
+    /** Смена выбранного плана (`item.value`). */
+    onValueChange?: (value: string) => void;
+};
+/**
+ * Сравнительная таблица тарифов: колонки из `items` + матрица `sections`.
+ *
+ * Когда использовать:
+ * - страница сравнения фич между планами;
+ * - те же {@link PricingPlan} уже используются в {@link PricingGroup}.
+ *
+ * Связанные компоненты:
+ * - {@link PricingGroup} — карточки без матрицы;
+ * - общий тип — {@link PricingPlan}.
+ *
+ * API: декларативные `items` (+ `sections`). Идентификатор плана — `value` (не `key`).
+ * Compound-слоты не используются.
+ *
+ * CSS-токены: `--shell-*`, узкие `--pricing-table-label-width`, `--pricing-card-min-width`.
+ *
+ * @example
+ * ```tsx
+ * const items: PricingPlan[] = [
+ *   { value: "starter", title: "Starter", price: "$9", actions: <Button>…</Button> },
+ *   { value: "pro", title: "Pro", price: "$29", highlighted: true, actions: <Button>…</Button> },
+ * ];
+ *
+ * const sections = [
+ *   {
+ *     title: "Команда",
+ *     rows: [
+ *       {
+ *         key: "seats",
+ *         label: "Участники",
+ *         values: { starter: "3", pro: "Безлимит" },
+ *       },
+ *       {
+ *         key: "sso",
+ *         label: "SSO",
+ *         hint: "Единый вход",
+ *         values: { starter: false, pro: true },
+ *       },
+ *     ],
+ *   },
+ * ];
+ *
+ * <PricingTable items={items} sections={sections} selectable />
+ * ```
+ */
+export declare function PricingTable({ items, sections, footerActions, value: valueProp, defaultValue, selectable, disabled, onValueChange, className, style, ...rest }: PricingTableProps): React.JSX.Element;

package/dist/PricingTable.js

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