@elcrm/components 0.2.13 → 0.5.1

package/dist/PanelInfo-Db5GCr-c.js

@@ -0,0 +1,137 @@
+import n, { useRef as E, useId as M } from "react";
+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
+}, k = "(max-width: 56rem)", I = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function oe({
+  open: L,
+  defaultOpen: N = !1,
+  title: c,
+  onOpenChange: d,
+  onClose: u,
+  children: A,
+  footer: b,
+  headerExtra: R,
+  close: S,
+  "aria-label": g,
+  className: q
+}) {
+  const [o = !1, P] = G(
+    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(
+    () => typeof window < "u" ? window.matchMedia(k).matches : !1
+  ), [i, y] = n.useState();
+  n.useEffect(() => {
+    const t = window.matchMedia(k), e = () => D(t.matches);
+    return e(), t.addEventListener("change", e), () => t.removeEventListener("change", e);
+  }, []), n.useEffect(() => {
+    if (!o || !r) {
+      y(void 0);
+      return;
+    }
+    const t = O();
+    return y(t), () => {
+      V(t), y(void 0);
+    };
+  }, [o, r]), n.useEffect(() => {
+    if (!o) 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());
+    };
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [o, i]), n.useEffect(() => {
+    if (!o || !r) 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;
+    const t = requestAnimationFrame(() => {
+      const e = m.current;
+      if (!e) return;
+      (e.querySelector(I) ?? e).focus();
+    });
+    return () => {
+      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;
+    const t = (e) => {
+      if (e.key !== "Tab") return;
+      const s = m.current;
+      if (!s) return;
+      const l = [
+        ...s.querySelectorAll(I)
+      ].filter((x) => !x.hasAttribute("disabled") && x.offsetParent != null);
+      if (l.length === 0) {
+        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());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [o, r]);
+  const F = g ?? (typeof c == "string" && c.trim() ? c : "Панель"), K = r ? "div" : "aside";
+  return /* @__PURE__ */ n.createElement(
+    K,
+    {
+      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
+      } : {
+        "aria-label": o ? F : void 0
+      },
+      style: i != null ? { zIndex: i } : void 0
+    },
+    o && r ? /* @__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
+      },
+      /* @__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",
+        {
+          type: "button",
+          className: a.close,
+          "aria-label": "Закрыть",
+          onClick: f
+        },
+        "×"
+      ))),
+      /* @__PURE__ */ n.createElement("div", { className: a.body }, A),
+      b != null ? /* @__PURE__ */ n.createElement("div", { className: a.footer }, b) : null
+    )
+  );
+}
+export {
+  oe as P
+};

package/dist/PanelInfo.css

@@ -1 +1 @@
-@layer elcrm-components{.pBr{flex:0 0 auto;position:relative;width:0;min-width:0;min-height:0;align-self:stretch;overflow:hidden;opacity:0;pointer-events:none;transition:width .22s ease,opacity .18s ease,min-width .22s ease}.pBr[data-open=true]{width:var(--panel-info-width);min-width:var(--panel-info-width-min);opacity:1;pointer-events:auto}.pBs{display:flex;flex-direction:column;height:100%;min-height:0;width:var(--panel-info-width);min-width:var(--panel-info-width-min);box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-background);color:var(--shell-color)}.pBh{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--shell-gap-sm);padding:var(--shell-gap);border-bottom:var(--chat-border)}.pBt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pBa{flex:0 0 auto;display:flex;align-items:center;gap:.25rem}.pBc{width:2rem;height:2rem;border:0;border-radius:var(--shell-radius);background:transparent;color:var(--shell-color-muted);font-size:1.35rem;line-height:1;cursor:pointer}.pBc:hover{color:var(--shell-color);background:var(--shell-background-muted)}.pBb{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--shell-gap)}.pBf{flex:0 0 auto;padding:var(--shell-gap);border-top:var(--chat-border)}.pBd{display:none}@media (max-width: 56rem){.pBr[data-open=true]{width:0;min-width:0;opacity:1;overflow:visible;pointer-events:none}.pBr[data-open=true] .pBd{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:inherit;pointer-events:auto;background:var(--panel-info-backdrop);cursor:pointer}.pBr[data-open=true] .pBs{position:fixed;top:0;right:0;bottom:0;z-index:inherit;width:min(100vw,var(--panel-info-overlay-max));min-width:0;max-width:100vw;border-radius:0;border-left:var(--chat-border);border-right:none;border-top:none;border-bottom:none;pointer-events:auto;box-shadow:var(--popup-shadow)}}}
+@layer elcrm-components{.oir{flex:0 0 auto;position:relative;width:0;min-width:0;min-height:0;align-self:stretch;overflow:hidden;opacity:0;pointer-events:none;transition:width .22s ease,opacity .18s ease,min-width .22s ease}.oir[data-open=true]{width:var(--panel-info-width);min-width:var(--panel-info-width-min);opacity:1;pointer-events:auto}.ois{display:flex;flex-direction:column;height:100%;min-height:0;width:var(--panel-info-width);min-width:var(--panel-info-width-min);box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-background);color:var(--shell-color)}.oih{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--shell-gap-sm);padding:var(--shell-gap);border-bottom:var(--chat-border)}.oit{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oia{flex:0 0 auto;display:flex;align-items:center;gap:.25rem}.oic{width:2rem;height:2rem;border:0;border-radius:var(--shell-radius);background:transparent;color:var(--shell-color-muted);font-size:1.35rem;line-height:1;cursor:pointer}.oic:hover{color:var(--shell-color);background:var(--shell-background-muted)}.oib{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--shell-gap)}.oif{flex:0 0 auto;padding:var(--shell-gap);border-top:var(--chat-border)}.oid{display:none}@media (max-width: 56rem){.oir[data-open=true]{width:0;min-width:0;opacity:1;overflow:visible;pointer-events:none}.oir[data-open=true] .oid{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:inherit;pointer-events:auto;background:var(--panel-info-backdrop);cursor:pointer}.oir[data-open=true] .ois{position:fixed;top:0;right:0;bottom:0;z-index:inherit;width:min(100vw,var(--panel-info-overlay-max));min-width:0;max-width:100vw;border-radius:0;border-left:var(--chat-border);border-right:none;border-top:none;border-bottom:none;pointer-events:auto;box-shadow:var(--popup-shadow)}}}

package/dist/PanelInfo.d.ts

@@ -1,11 +1,18 @@
 import { default as React } from 'react';
 export type PanelInfoProps = {
-    /** Открыта ли панель. */
-    open: boolean;
+    /** Открыта ли панель (controlled). */
+    open?: boolean;
+    /** Начальное открытие (uncontrolled). */
+    defaultOpen?: boolean;
     /** Заголовок шапки. */
     title: React.ReactNode;
-    /** Закрытие: крестик / фон / Escape. */
-    onClose: () => void;
+    /** Смена open (крестик / фон / Escape). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Закрытие. Эквивалент `onOpenChange(false)`.
+     * Удобный алиас для controlled-режима.
+     */
+    onClose?: () => void;
     /**
      * Тело — форма (`@elcrm/form` поля) или любой контент.
      * Скроллится между шапкой и footer.
@@ -23,7 +30,7 @@ export type PanelInfoProps = {
      * Приложение может подставить `@elcrm/button`.
      */
     close?: React.ReactNode;
-    /** `aria-label` для `<aside>`, если title не строка. */
+    /** `aria-label`, если title не строка. */
     "aria-label"?: string;
     /** Доп. CSS-класс. */
     className?: string;
@@ -31,9 +38,9 @@ export type PanelInfoProps = {
 /**
  * Выезжающая панель справа: шапка / body / footer.
  *
- * Широкий экран — flex-колонка рядом со списком.
- * Узкий (`max-width: 56rem`) — поверх контента с затемнением
- * и `acquireOverlayZIndex`.
+ * Широкий экран — flex-колонка рядом со списком (`aside`).
+ * Узкий (`max-width: 56rem`) — `dialog` + `aria-modal`, затемнение,
+ * focus trap и `acquireOverlayZIndex`.
  *
  * @example
  * ```tsx
@@ -49,4 +56,4 @@ export type PanelInfoProps = {
  *
  * Токены: `--panel-info-width`, `--panel-info-backdrop`, `--shell-*`, `--chat-*`.
  */
-export declare function PanelInfo({ open, title, onClose, children, footer, headerExtra, close, "aria-label": ariaLabel, className, }: PanelInfoProps): React.JSX.Element;
+export declare function PanelInfo({ open: openProp, defaultOpen, title, onOpenChange, onClose, children, footer, headerExtra, close, "aria-label": ariaLabel, className, }: PanelInfoProps): React.JSX.Element;

package/dist/PanelInfo.js

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

package/dist/Popover-xEZoMY-h.js

@@ -0,0 +1,143 @@
+import b, { useRef as w, useId as J, useState as F, useLayoutEffect as S, useEffect as Z } from "react";
+import { createPortal as Q } from "react-dom";
+import { c as K } from "./cx-CcykAxZN.js";
+import { a as U, r as T } from "./overlayZ-BvHbYC1x.js";
+import { u as X } from "./useControllableValue-BaE0VR5d.js";
+import './Popover.css';const Y = "opr", _ = "opt", $ = "opp", C = {
+  root: Y,
+  trigger: _,
+  panel: $
+};
+function ee(e, t) {
+  const a = t == null ? void 0 : t.querySelector("[data-elcrm-popover-anchor]");
+  return a instanceof HTMLElement ? a.getBoundingClientRect() : t ? t.getBoundingClientRect() : e.getBoundingClientRect();
+}
+function te(e, t) {
+  return e != null && e.top === t.top && e.left === t.left && e.minWidth === t.minWidth && e.maxHeight === t.maxHeight;
+}
+function ne(e) {
+  return e === "menu" || e === "listbox" || e === "tree" || e === "grid" ? e : e === "dialog" || e === "alertdialog" ? "dialog" : "true";
+}
+function oe(e, t, a, h) {
+  const l = window.innerHeight - e.bottom - 8 - 8, c = e.top - 8 - 8, y = t > 0 ? t : 160, d = h === "bottom" || h !== "top" && l >= y, E = Math.min(
+    420,
+    Math.max(120, d ? l : c)
+  ), u = Math.max(200, e.width), R = a === "end" ? Math.max(8, Math.min(e.right - u, window.innerWidth - u - 8)) : Math.max(8, Math.min(e.left, window.innerWidth - u - 8));
+  return { top: d ? e.bottom + 8 : Math.max(8, e.top - 8 - (t > 0 ? t : 0)), left: R, minWidth: u, maxHeight: E };
+}
+function le({
+  trigger: e,
+  children: t,
+  open: a,
+  defaultOpen: h = !1,
+  onOpenChange: H,
+  align: x = "end",
+  placement: l = "auto",
+  disabled: c = !1,
+  label: y,
+  role: d,
+  className: E,
+  panelClassName: u,
+  fitContent: R = !1
+}) {
+  const v = w(null), I = w(null), P = w(null), L = J(), [o = !1, V] = X(
+    a,
+    h,
+    H
+  ), [f, z] = F(null), [i, A] = F(null), M = w(null);
+  M.current = i;
+  const j = ne(d), B = typeof e == "function", k = (n) => {
+    c && n || V(n);
+  }, D = () => {
+    c || k(!o);
+  }, N = {
+    "data-elcrm-popover-anchor": "",
+    "aria-haspopup": j,
+    "aria-expanded": o,
+    "aria-controls": o ? L : void 0,
+    onClick: (n) => {
+      n.stopPropagation(), D();
+    }
+  };
+  S(() => {
+    if (o) {
+      i == null && A(U());
+      return;
+    }
+    i != null && (T(i), A(null));
+  }, [o, i]), Z(() => () => {
+    M.current != null && T(M.current);
+  }, []);
+  const W = () => {
+    var p;
+    const n = v.current;
+    if (!n) return;
+    const r = ee(n, I.current), s = ((p = P.current) == null ? void 0 : p.offsetHeight) ?? 0, m = oe(r, s, x, l);
+    z((g) => te(g, m) ? g : m);
+  };
+  S(() => {
+    if (!o) {
+      z(null);
+      return;
+    }
+    W();
+    const n = window.requestAnimationFrame(() => W()), r = () => W();
+    return window.addEventListener("resize", r), window.addEventListener("scroll", r, !0), () => {
+      window.cancelAnimationFrame(n), window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
+    };
+  }, [o, x, l, t]), Z(() => {
+    if (!o) return;
+    const n = (s) => {
+      var p, g;
+      const m = s.target;
+      (p = v.current) != null && p.contains(m) || (g = P.current) != null && g.contains(m) || k(!1);
+    }, r = (s) => {
+      s.key === "Escape" && (s.preventDefault(), s.stopPropagation(), k(!1));
+    };
+    return document.addEventListener("mousedown", n), document.addEventListener("keydown", r, !0), () => {
+      document.removeEventListener("mousedown", n), document.removeEventListener("keydown", r, !0);
+    };
+  }, [o]);
+  const O = o && i != null ? {
+    position: "fixed",
+    zIndex: i,
+    ...f ? {
+      top: f.top,
+      bottom: "auto",
+      left: f.left,
+      minWidth: f.minWidth,
+      ...R ? { maxHeight: "none", overflow: "visible" } : { maxHeight: f.maxHeight }
+    } : { visibility: "hidden", pointerEvents: "none" }
+  } : null, q = O != null ? /* @__PURE__ */ b.createElement(
+    "div",
+    {
+      ref: P,
+      id: L,
+      role: d,
+      "aria-label": y,
+      className: K(C.panel, u),
+      style: O,
+      onMouseDown: (n) => n.stopPropagation()
+    },
+    t
+  ) : null, G = B ? e({ open: o, disabled: c, menuId: L, anchorProps: N }) : e;
+  return /* @__PURE__ */ b.createElement("div", { ref: v, className: K(C.root, E) }, /* @__PURE__ */ b.createElement(
+    "div",
+    {
+      ref: I,
+      className: C.trigger,
+      ...B ? {} : {
+        ...N,
+        role: "button",
+        tabIndex: c ? -1 : 0,
+        onKeyDown: (n) => {
+          (n.key === "Enter" || n.key === " ") && (n.preventDefault(), D());
+        }
+      }
+    },
+    G
+  ), q && typeof document < "u" ? Q(q, document.body) : null);
+}
+export {
+  le as P
+};

package/dist/Popover.css

@@ -1 +1 @@
-@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0;height:auto}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}
+@layer elcrm-components{.opr{position:relative;display:inline-flex;vertical-align:middle}.opt{display:inline-flex;align-items:center;min-width:0;height:auto}.opp{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}

package/dist/Popover.d.ts

@@ -1,33 +1,53 @@
 import { default as React } from 'react';
 /** Куда открывать панель относительно якоря. */
 export type PopoverPlacement = "auto" | "top" | "bottom";
+/** Props, которые нужно проставить на интерактивный якорь (кнопку). */
+export type PopoverAnchorProps = {
+    "data-elcrm-popover-anchor": "";
+    "aria-haspopup": string;
+    "aria-expanded": boolean;
+    "aria-controls"?: string;
+    onClick: (event: React.MouseEvent) => void;
+};
+/** API для `trigger` как render-prop (без cloneElement). */
+export type PopoverTriggerApi = {
+    open: boolean;
+    disabled: boolean;
+    menuId: string;
+    /** Пропы на кнопку/ссылку-якорь */
+    anchorProps: PopoverAnchorProps;
+};
 /**
  * Портал у якоря: Escape, клик снаружи, z-index (`globalThis.elcrm.overlayZ`).
  *
  * Роли: Popover = свой попап (слот `children`).
  * Типовое меню пунктов — {@link Dropdown}.
- * Инлайн-навигация — {@link Menu} (не путать).
  *
- * Бывший `@elcrm/overlay` `Menu` — этот компонент (`Popover`).
+ * Якорь — без `cloneElement`:
+ * - `trigger={(api) => <button {...api.anchorProps}>…</button>}` — канон;
+ * - `trigger={<span>…</span>}` — клик/ARIA на обёртке.
  *
  * @example
  * ```tsx
  * <Popover
- *   trigger={<Button>Ещё</Button>}
+ *   trigger={(api) => (
+ *     <Button {...api.anchorProps}>Ещё</Button>
+ *   )}
  *   label="Действия"
- *   align="end"
+ *   role="dialog"
  * >
- *   <List>
- *     <Item as="button">Скачать</Item>
- *   </List>
+ *   <List><Item as="button">Скачать</Item></List>
  * </Popover>
  * ```
  *
  * Токены: `--shell-*`, `--popup-shadow`, `--dropdown-min-width`.
  */
 export type PopoverProps = {
-    /** Якорь (кнопка / иконка) */
-    trigger: React.ReactNode;
+    /**
+     * Якорь: узел **или** render-prop с {@link PopoverTriggerApi}.
+     * Render-prop — без clone; пропы на кнопку через `anchorProps`.
+     */
+    trigger: React.ReactNode | ((api: PopoverTriggerApi) => React.ReactNode);
     /** Содержимое панели */
     children?: React.ReactNode;
     /** Контролируемое открытие */
@@ -48,15 +68,24 @@ export type PopoverProps = {
     disabled?: boolean;
     /** aria-label панели */
     label?: string;
-    /** role панели */
+    /**
+     * role панели.
+     * По умолчанию без роли (произвольный контент).
+     * Меню пунктов — `role="menu"` ({@link Dropdown}).
+     */
     role?: React.AriaRole;
     className?: string;
     /** Класс панели (portal) */
     panelClassName?: string;
+    /**
+     * Высота по контенту: без `maxHeight` и без внутреннего скролла.
+     * Для меню аккаунта Sidebar (`Dropdown tone="account"`).
+     */
+    fitContent?: boolean;
 };
 /**
  * Панель в portal рядом с триггером.
  *
  * @see Dropdown, Menu
  */
-export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, placement, disabled, label, role, className, panelClassName, }: PopoverProps): React.JSX.Element;
+export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, placement, disabled, label, role, className, panelClassName, fitContent, }: PopoverProps): React.JSX.Element;

package/dist/Popover.js

@@ -1,4 +1,4 @@
-import { P as e } from "./Popover-DWdvZTuA.js";
+import { P as e } from "./Popover-xEZoMY-h.js";
 export {
   e as Popover
 };

package/dist/PricingGroup-CWy47MlE.js

@@ -0,0 +1,138 @@
+import e, { useRef as R } from "react";
+import { c as m } from "./cx-CcykAxZN.js";
+import { h as S } from "./rovingKeys-Di9N1Nct.js";
+import { u as z } from "./useControllableValue-BaE0VR5d.js";
+import { C as K } from "./CheckIcon-FdB8fMEF.js";
+import './PricingGroup.css';const L = "ggr", O = "ggi", V = "ggs", I = "ggb", j = "ggg", A = "gga", G = "ggm", M = "ggh", T = "ggt", q = "ggp", H = "ggz", J = "ggo", Q = "gge", U = "ggd", W = "ggx", X = "ggf", Y = "ggy", Z = "ggl", _ = "ggu", $ = "ggn", ee = "ggc", le = "ggk", ne = "ggw", a = {
+  root: L,
+  item: O,
+  selected: V,
+  banner: I,
+  gfloat: j,
+  above: A,
+  media: G,
+  head: M,
+  title: T,
+  price: q,
+  zsum: H,
+  old: J,
+  extra: Q,
+  desc: U,
+  xact: W,
+  feat: X,
+  ylist: Y,
+  label: Z,
+  usum: _,
+  note: $,
+  check: ee,
+  ktick: le,
+  wtick: ne
+};
+function y() {
+  return /* @__PURE__ */ e.createElement("span", { className: a.ktick, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(K, { className: a.wtick }));
+}
+function ae({ feature: l }) {
+  if (l != null && typeof l == "object" && !e.isValidElement(l) && "label" in l) {
+    const t = l;
+    return /* @__PURE__ */ e.createElement("li", { className: a.check }, t.icon != null ? t.icon : /* @__PURE__ */ e.createElement(y, null), /* @__PURE__ */ e.createElement("span", null, t.label));
+  }
+  return /* @__PURE__ */ e.createElement("li", { className: a.check }, /* @__PURE__ */ e.createElement(y, null), /* @__PURE__ */ e.createElement("span", null, l));
+}
+function P({ item: l }) {
+  const t = l.badge != null && (l.badgePlacement ?? "pill") === "pill";
+  return l.title == null && !t ? null : /* @__PURE__ */ e.createElement("div", { className: a.head }, l.title != null ? /* @__PURE__ */ e.createElement("h3", { className: a.title }, l.title) : null, t ? /* @__PURE__ */ e.createElement("span", { className: a.gfloat }, l.badge) : null);
+}
+function x({ item: l }) {
+  return l.price == null && l.priceOld == null && l.meta == null ? null : /* @__PURE__ */ e.createElement("div", { className: a.price }, l.priceOld != null ? /* @__PURE__ */ e.createElement("span", { className: a.old }, l.priceOld) : null, l.price != null ? /* @__PURE__ */ e.createElement("span", { className: a.zsum }, l.price) : null, l.meta != null ? /* @__PURE__ */ e.createElement("span", { className: a.extra }, l.meta) : null);
+}
+function f({ item: l }) {
+  return l.description == null ? null : /* @__PURE__ */ e.createElement("p", { className: a.desc }, l.description);
+}
+function te({
+  actions: l,
+  placement: t
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: t === "footer" ? a.feat : a.xact,
+      onClick: (c) => c.stopPropagation(),
+      onMouseDown: (c) => c.preventDefault()
+    },
+    l
+  );
+}
+function ce({ item: l }) {
+  return l.features == null && l.featuresLabel == null && l.featuresSummary == null ? null : /* @__PURE__ */ e.createElement("div", { className: a.ylist }, l.featuresLabel != null ? /* @__PURE__ */ e.createElement("p", { className: a.label }, l.featuresLabel) : null, l.featuresSummary != null ? /* @__PURE__ */ e.createElement("p", { className: a.usum }, l.featuresSummary) : null, l.features != null && l.features.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: a.note }, l.features.map((t, c) => /* @__PURE__ */ e.createElement(ae, { key: c, feature: t }))) : null);
+}
+function ge({
+  items: l,
+  value: t,
+  defaultValue: c,
+  selectable: r = !1,
+  disabled: p = !1,
+  onValueChange: w,
+  className: D,
+  ...B
+}) {
+  const [i, g] = z(
+    t,
+    c,
+    w
+  ), E = R(null), v = l.filter((n) => !(p || n.disabled)).map((n) => n.value);
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: E,
+      className: m(a.root, D),
+      role: r ? "radiogroup" : "list",
+      onKeyDown: r ? (n) => S(n, {
+        values: v,
+        value: i,
+        onSelect: g,
+        focusRoot: E.current
+      }) : void 0,
+      ...B
+    },
+    l.map((n) => {
+      const s = i === n.value, b = p || !!n.disabled, C = !!n.highlighted || s, h = n.badgePlacement ?? "pill", o = n.actionsPlacement ?? "after", k = n.descriptionPlacement ?? "after-price", u = r && !b, N = n.actions != null ? /* @__PURE__ */ e.createElement(
+        te,
+        {
+          actions: n.actions,
+          placement: o
+        }
+      ) : null, F = /* @__PURE__ */ e.createElement(e.Fragment, null, n.priceFirst ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(x, { item: n }), /* @__PURE__ */ e.createElement(P, { item: n }), /* @__PURE__ */ e.createElement(f, { item: n })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(P, { item: n }), k === "before-price" ? /* @__PURE__ */ e.createElement(f, { item: n }) : null, /* @__PURE__ */ e.createElement(x, { item: n }), k === "after-price" ? /* @__PURE__ */ e.createElement(f, { item: n }) : null));
+      return /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          key: n.value,
+          role: r ? "radio" : "listitem",
+          className: m(a.item, C && a.selected),
+          "data-value": n.value,
+          "data-selected": s ? "true" : void 0,
+          "data-highlighted": n.highlighted ? "true" : void 0,
+          "data-selectable": u ? "true" : void 0,
+          "aria-checked": r ? s : void 0,
+          "aria-disabled": b || void 0,
+          tabIndex: u ? s || !i && n.value === v[0] ? 0 : -1 : void 0,
+          onClick: () => {
+            u && g(n.value);
+          },
+          onKeyDown: (d) => {
+            u && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), g(n.value));
+          }
+        },
+        n.badge != null && h === "banner" ? /* @__PURE__ */ e.createElement("div", { className: a.banner }, n.badge) : null,
+        n.badge != null && h === "float" ? /* @__PURE__ */ e.createElement("div", { className: m(a.gfloat, a.above) }, n.badge) : null,
+        n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: a.media }, n.icon) : null,
+        F,
+        o === "before" ? N : null,
+        /* @__PURE__ */ e.createElement(ce, { item: n }),
+        o === "after" || o === "footer" ? N : null
+      );
+    })
+  );
+}
+export {
+  ge as P
+};

package/dist/PricingGroup.css

@@ -1 +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:var(--avatar-color);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}.cua{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:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.cuw{width:60%;height:60%;display:block}}
+@layer elcrm-components{.ggr{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pricing-card-min-width),1fr));gap:var(--shell-gap-lg);align-items:stretch}.ggi{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)}.ggi[data-selectable=true]{cursor:pointer}.ggi:disabled,.ggi[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.ggs,.ggi[data-selected=true],.ggi[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected);box-shadow:var(--shell-shadow)}.ggb{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:var(--avatar-color);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);text-align:center}.ggg{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}.gga{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.ggm{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}.ggh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.ggt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.ggp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.ggz{font-size:calc(var(--shell-font-size-lg) * 1.35);font-weight:700;color:var(--shell-color);line-height:1.15}.ggi[data-highlighted=true] .ggz,.ggi[data-selected=true] .ggz{color:var(--shell-color-accent)}.ggo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.gge{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.ggd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.ggx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.ggf{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)}.ggy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin-top:auto}.ggl{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)}.ggu{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.4}.ggn{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.ggc{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}.ggk{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:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.ggw{width:60%;height:60%;display:block}}

package/dist/PricingGroup.d.ts

@@ -64,8 +64,6 @@ export type PricingPlan = {
     /** Недоступный план. */
     disabled?: boolean;
 };
-/** @deprecated используй {@link PricingPlan} */
-export type PricingGroupItem = PricingPlan;
 /**
  * Props компонента {@link PricingGroup}.
  *

package/dist/PricingGroup.js

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