@elcrm/components 0.1.0 → 0.1.2

package/dist/Menu.d.ts

@@ -19,6 +19,11 @@ export type MenuItem = {
     onClick?: () => void;
     /** Недоступный пункт. */
     disabled?: boolean;
+    /**
+     * Счётчик справа (`Badge`).
+     * `0`, `null`, `""` — не рендерим.
+     */
+    badge?: number | string | null;
 };
 /**
  * Props компонента {@link Menu}.
@@ -34,6 +39,11 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
     items?: MenuItem[];
     /** Вертикальный ряд пунктов. */
     vertical?: boolean;
+    /**
+     * `plain` — пилюли.
+     * `line` — вкладки с нижней чертой (фильтры страницы).
+     */
+    variant?: "plain" | "line";
     /**
      * Активный `value` пункта (если у item не задан `active`).
      * Идентификатор — `value`, не `key`.
@@ -53,18 +63,20 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
  *
  * Связанные компоненты:
  * - {@link Dropdown} — выпадающая панель рядом с триггером;
- * - `@elcrm/overlay` — портальный popover/меню поверх страницы;
+ * - {@link Popover} / {@link Dropdown} — панель в portal;
  * - {@link NavSections} / {@link TabSections} — разделы с lazy-контентом.
  *
  * API: декларативные `items` (идентификатор — `value`). Compound-слоты не используются.
  *
+ * @param variant `plain` (пилюли) или `line` (черта снизу)
+ *
  * CSS-токены: `--shell-*` (цвета/отступы shell-навигации).
  *
  * @example
  * ```tsx
  * const items = [
  *   { value: "home", label: "Главная" },
- *   { value: "team", label: "Команда", disabled: true },
+ *   { value: "team", label: "Команда", badge: 3 },
  * ];
  *
  * <Menu
@@ -75,4 +87,4 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
  * />
  * ```
  */
-export declare function Menu({ items, vertical, value, onSelect, children, className, ...rest }: MenuProps): React.JSX.Element;
+export declare function Menu({ items, vertical, variant, value, onSelect, children, className, ...rest }: MenuProps): React.JSX.Element;

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import { M as r } from "./Menu-DRBHvSdJ.js";
+import { M as r } from "./Menu-DpUvOl8Y.js";
 export {
   r as Menu
 };

package/dist/PageHead-DgaJ1mXY.js

@@ -0,0 +1,31 @@
+import c from "react";
+import { c as o } from "./cx-CcykAxZN.js";
+import './PageHead.css';const u = "ccr", f = "cck", i = "ccw", E = "cct", N = "cch", d = "ccn", h = "ccu", v = "ccs", w = "cca", k = "ccc", e = {
+  r: u,
+  k: f,
+  w: i,
+  t: E,
+  h: N,
+  n: d,
+  u: h,
+  s: v,
+  a: w,
+  c: k
+};
+function p(t) {
+  return !(t == null || t === !1 || t === "" || typeof t == "number" && t === 0 || t === "0");
+}
+function g({
+  title: t,
+  sup: n,
+  subtitle: a,
+  actions: l,
+  sticky: r,
+  className: m,
+  children: s
+}) {
+  return /* @__PURE__ */ c.createElement("div", { className: o(e.r, r && e.k, m) }, /* @__PURE__ */ c.createElement("div", { className: e.w }, /* @__PURE__ */ c.createElement("div", { className: e.t }, /* @__PURE__ */ c.createElement("h1", { className: e.h }, /* @__PURE__ */ c.createElement("span", { className: e.n }, t), p(n) ? /* @__PURE__ */ c.createElement("span", { className: e.u }, n) : null), a != null ? /* @__PURE__ */ c.createElement("p", { className: e.s }, a) : null), l != null ? /* @__PURE__ */ c.createElement("div", { className: e.a }, l) : null), s != null ? /* @__PURE__ */ c.createElement("div", { className: e.c }, s) : null);
+}
+export {
+  g as P
+};

package/dist/PageHead.css

@@ -1 +1 @@
-@layer elcrm-components{.ccr{margin:0 0 var(--shell-gap-lg)}.ccw{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--shell-gap)}.cct{min-width:0;max-width:36rem}.cch{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.25}.ccs{margin:var(--shell-gap-sm) 0 0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.cca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}}
+@layer elcrm-components{.ccr{display:flex;flex-direction:column;gap:var(--shell-gap);margin:0 0 var(--shell-gap)}.cck{position:sticky;top:0;z-index:var(--shell-z);background:var(--shell-bg, var(--shell-background-muted))}.ccw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--shell-gap-sm)}.cct{min-width:0;max-width:36rem}.cch{margin:0;display:flex;align-items:flex-start;gap:.4em;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.15}.ccn{min-width:0}.ccu{display:inline-flex;align-items:center;margin-top:.12em;font-size:.7rem;font-weight:600;line-height:1;color:var(--shell-color-muted)}.ccs{margin:var(--shell-gap-sm) 0 0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.cca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.ccc{display:flex;flex-direction:column;gap:var(--shell-gap);min-width:0}}

package/dist/PageHead.d.ts

@@ -8,8 +8,10 @@ import { default as React } from 'react';
  *
  * @example
  * ```tsx
- * <PageShell>
- *   <PageHead title="Клиенты" subtitle="Все компании" actions={<Button>Создать</Button>} />
+ * <PageShell scroll>
+ *   <PageHead title="Идеи" sup={<Badge size="s" tone="accent">4</Badge>} sticky>
+ *     <Menu items={tabs} value={tab} onSelect={setTab} />
+ *   </PageHead>
  *   …
  * </PageShell>
  * ```
@@ -19,18 +21,38 @@ import { default as React } from 'react';
 export type PageHeadProps = {
     /** Заголовок страницы */
     title: React.ReactNode;
+    /**
+     * Надстрочный слот сразу после title: текст или {@link Badge}.
+     * Пусто / `0` / `false` — не рендерим.
+     */
+    sup?: React.ReactNode;
     /** Подзаголовок */
     subtitle?: React.ReactNode;
     /** Кнопки / поиск справа в одной строке с заголовком */
     actions?: React.ReactNode;
+    /**
+     * Прилипает к верху скролла предка (`PageShell` с `scroll`).
+     * По умолчанию `false`.
+     */
+    sticky?: boolean;
     /** Доп. CSS-класс */
     className?: string;
-    /** Контент под строкой заголовка (фильтры, Breadcrumb) */
+    /**
+     * Контент под строкой заголовка (фильтры, поиск, вкладки).
+     * Между title и children — `--shell-gap`.
+     */
     children?: React.ReactNode;
 };
 /**
- * Заголовок: title слева, actions справа (одна линия).
+ * Заголовок: title слева (+ `sup` сверху), actions справа.
  *
- * @see PageShell, Section, Header
+ * @param props.title — заголовок
+ * @param props.sup — текст или Badge после title (надстрочно)
+ * @param props.subtitle — строка под заголовком
+ * @param props.actions — кнопки справа
+ * @param props.sticky — прилипает к скроллу
+ * @param props.children — фильтры / вкладки под шапкой
+ *
+ * @see PageShell, Section, Header, Badge
  */
-export declare function PageHead({ title, subtitle, actions, className, children, }: PageHeadProps): React.JSX.Element;
+export declare function PageHead({ title, sup, subtitle, actions, sticky, className, children, }: PageHeadProps): React.JSX.Element;

package/dist/PageHead.js

@@ -1,4 +1,4 @@
-import { P as o } from "./PageHead-Baz9BLuA.js";
+import { P as o } from "./PageHead-DgaJ1mXY.js";
 export {
   o as PageHead
 };

package/dist/{PageShell-CghThHS3.js → PageShell-D9EZiO8o.js}

@@ -1,28 +1,30 @@
 import e from "react";
 import { c as l } from "./cx-CcykAxZN.js";
-import './PageShell.css';const m = "ckr", o = "ckw", f = "ckb", i = "ckf", c = {
+import './PageShell.css';const m = "ckr", f = "ckw", i = "ckb", k = "ckf", u = "cko", c = {
   r: m,
-  w: o,
-  b: f,
-  f: i
+  w: f,
+  b: i,
+  f: k,
+  o: u
 };
-function u({
+function d({
   children: s,
-  className: a,
-  wide: n,
+  className: n,
+  wide: o,
+  scroll: r = !0,
   footer: t,
-  ...r
+  ...a
 }) {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ...r,
-      className: l(c.r, n && c.w, a)
+      ...a,
+      className: l(c.r, o && c.w, !r && c.o, n)
     },
     /* @__PURE__ */ e.createElement("div", { className: c.b }, s),
     t != null ? /* @__PURE__ */ e.createElement("div", { className: c.f }, t) : null
   );
 }
 export {
-  u as P
+  d as P
 };

package/dist/PageShell.css

@@ -1 +1 @@
-@layer elcrm-components{.ckr{flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--shell-padding);overflow:hidden}.ckw{max-width:none}.ckb{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--shell-gap)}.ckf{flex:0 0 auto;padding-top:var(--shell-gap-sm)}}
+@layer elcrm-components{.ckr{flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--shell-padding);overflow:hidden}.ckw{max-width:none}.ckb{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--shell-gap)}.ckf{flex:0 0 auto;padding-top:var(--shell-gap-sm)}.cko{overflow:visible;height:auto}.cko .ckb{overflow:visible;flex:0 1 auto;min-height:auto}}

package/dist/PageShell.d.ts

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

package/dist/PageShell.js

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

package/dist/Popover-g2xTGubK.js

@@ -0,0 +1,123 @@
+import w, { useRef as h, useId as Q, useState as x, useLayoutEffect as S, useEffect as W } from "react";
+import { createPortal as V } from "react-dom";
+import { c as H } from "./cx-CcykAxZN.js";
+import './Popover.css';const N = 1e3, X = 10;
+function E() {
+  const e = globalThis;
+  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
+}
+function Y() {
+  const e = E();
+  e.seq += 1;
+  const r = N + e.seq * X;
+  return e.active.add(r), r;
+}
+function B(e) {
+  const r = E();
+  r.active.delete(e), r.active.size === 0 && (r.seq = 0);
+}
+function oe() {
+  const e = E();
+  return e.active.size === 0 ? N : Math.max(...e.active);
+}
+const _ = "c3r", $ = "c3t", C = "c3p", y = {
+  r: _,
+  t: $,
+  p: C
+};
+function re({
+  trigger: e,
+  children: r,
+  open: L,
+  defaultOpen: D = !1,
+  onOpenChange: m,
+  align: M = "end",
+  disabled: g = !1,
+  label: O,
+  role: T = "menu",
+  className: A,
+  panelClassName: F
+}) {
+  const f = h(null), z = h(null), R = Q(), [K, U] = x(D), Z = L !== void 0, n = Z ? L : K, [c, I] = x(null), [i, P] = x(null), p = h(null);
+  p.current = i;
+  const v = (t) => {
+    g && t || (Z || U(t), m == null || m(t));
+  };
+  S(() => {
+    if (n) {
+      i == null && P(Y());
+      return;
+    }
+    i != null && (B(i), P(null));
+  }, [n, i]), W(() => () => {
+    p.current != null && B(p.current);
+  }, []);
+  const b = () => {
+    const t = f.current;
+    if (!t) return;
+    const o = t.getBoundingClientRect(), s = 8, a = window.innerHeight - o.bottom - s - 8, l = o.top - s - 8, u = a >= 160 || a >= l, q = Math.min(420, Math.max(120, u ? a : l)), d = Math.max(200, o.width), G = u ? o.bottom + s : Math.max(8, o.top - s - q), J = M === "end" ? Math.max(8, Math.min(o.right - d, window.innerWidth - d - 8)) : Math.max(8, Math.min(o.left, window.innerWidth - d - 8));
+    I({ top: G, left: J, minWidth: d, maxHeight: q });
+  };
+  S(() => {
+    if (!n) {
+      I(null);
+      return;
+    }
+    b();
+    const t = () => b();
+    return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
+    };
+  }, [n, M]), W(() => {
+    if (!n) return;
+    const t = (s) => {
+      var l, u;
+      const a = s.target;
+      (l = f.current) != null && l.contains(a) || (u = z.current) != null && u.contains(a) || v(!1);
+    }, o = (s) => {
+      s.key === "Escape" && v(!1);
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", o), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", o);
+    };
+  }, [n]);
+  const j = c ? {
+    position: "fixed",
+    top: c.top,
+    left: c.left,
+    minWidth: c.minWidth,
+    maxHeight: c.maxHeight,
+    zIndex: i ?? 1e3
+  } : void 0, k = n && c ? /* @__PURE__ */ w.createElement(
+    "div",
+    {
+      ref: z,
+      id: R,
+      role: T,
+      "aria-label": O,
+      className: H(y.p, F),
+      style: j,
+      onMouseDown: (t) => t.stopPropagation()
+    },
+    r
+  ) : null;
+  return /* @__PURE__ */ w.createElement("div", { ref: f, className: H(y.r, A) }, /* @__PURE__ */ w.createElement(
+    "div",
+    {
+      className: y.t,
+      "aria-haspopup": "menu",
+      "aria-expanded": n,
+      "aria-controls": n ? R : void 0,
+      onClick: () => {
+        g || v(!n);
+      }
+    },
+    e
+  ), k && typeof document < "u" ? V(k, document.body) : null);
+}
+export {
+  re as P,
+  Y as a,
+  oe as p,
+  B as r
+};

package/dist/Popover.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0}.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, 200px);max-width:var(--dropdown-max-width, min(360px, calc(100vw - 16px) ));max-height:var(--dropdown-max-height, 420px)}}

package/dist/Popover.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+/**
+ * Портал у якоря: Escape, клик снаружи, z-index (`globalThis.elcrm.overlayZ`).
+ *
+ * Роли: Popover = свой попап (слот `children`).
+ * Типовое меню пунктов — {@link Dropdown}.
+ * Инлайн-навигация — {@link Menu} (не путать).
+ *
+ * Бывший `@elcrm/overlay` `Menu` — этот компонент (`Popover`).
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Ещё</Button>}
+ *   label="Действия"
+ *   align="end"
+ * >
+ *   <List>
+ *     <Item as="button">Скачать</Item>
+ *   </List>
+ * </Popover>
+ * ```
+ *
+ * Токены: `--shell-*`, `--popup-shadow`, `--dropdown-min-width`.
+ */
+export type PopoverProps = {
+    /** Якорь (кнопка / иконка) */
+    trigger: React.ReactNode;
+    /** Содержимое панели */
+    children?: React.ReactNode;
+    /** Контролируемое открытие */
+    open?: boolean;
+    /** Начальное открытие */
+    defaultOpen?: boolean;
+    /** Смена open */
+    onOpenChange?: (open: boolean) => void;
+    /** Выравнивание панели */
+    align?: "start" | "end";
+    /** Не открывать по клику на якорь */
+    disabled?: boolean;
+    /** aria-label панели */
+    label?: string;
+    /** role панели */
+    role?: React.AriaRole;
+    className?: string;
+    /** Класс панели (portal) */
+    panelClassName?: string;
+};
+/**
+ * Панель в portal рядом с триггером.
+ *
+ * @see Dropdown, Menu
+ */
+export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, disabled, label, role, className, panelClassName, }: PopoverProps): React.JSX.Element;

package/dist/Popover.js

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

package/dist/PricingGroup-DgcdVSq8.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 = "cua", 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 = "cuw", c = {
+  r: z,
+  i: O,
+  s: j,
+  b: M,
+  g: R,
+  a: 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: _,
+  w: V
+};
+function N() {
+  return /* @__PURE__ */ e.createElement("span", { className: c.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("svg", { className: c.w, 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 t = l;
+    return /* @__PURE__ */ e.createElement("li", { className: c.c }, t.icon != null ? t.icon : /* @__PURE__ */ e.createElement(N, null), /* @__PURE__ */ e.createElement("span", null, t.label));
+  }
+  return /* @__PURE__ */ e.createElement("li", { className: c.c }, /* @__PURE__ */ e.createElement(N, null), /* @__PURE__ */ e.createElement("span", null, l));
+}
+function h({ item: l }) {
+  const t = l.badge != null && (l.badgePlacement ?? "pill") === "pill";
+  return l.title == null && !t ? null : /* @__PURE__ */ e.createElement("div", { className: c.h }, l.title != null ? /* @__PURE__ */ e.createElement("h3", { className: c.t }, l.title) : null, t ? /* @__PURE__ */ e.createElement("span", { className: c.g }, l.badge) : null);
+}
+function k({ item: l }) {
+  return l.price == null && l.priceOld == null && l.meta == null ? null : /* @__PURE__ */ e.createElement("div", { className: c.p }, l.priceOld != null ? /* @__PURE__ */ e.createElement("span", { className: c.o }, l.priceOld) : null, l.price != null ? /* @__PURE__ */ e.createElement("span", { className: c.z }, l.price) : null, l.meta != null ? /* @__PURE__ */ e.createElement("span", { className: c.e }, l.meta) : null);
+}
+function d({ item: l }) {
+  return l.description == null ? null : /* @__PURE__ */ e.createElement("p", { className: c.d }, l.description);
+}
+function le({
+  actions: l,
+  placement: t
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: t === "footer" ? c.f : c.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: c.y }, l.featuresLabel != null ? /* @__PURE__ */ e.createElement("p", { className: c.l }, l.featuresLabel) : null, l.featuresSummary != null ? /* @__PURE__ */ e.createElement("p", { className: c.u }, l.featuresSummary) : null, l.features != null && l.features.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: c.n }, l.features.map((t, a) => /* @__PURE__ */ e.createElement(ee, { key: a, feature: t }))) : null);
+}
+function ae({
+  items: l,
+  value: t,
+  defaultValue: a,
+  selectable: y = !1,
+  disabled: P = !1,
+  onValueChange: u,
+  className: w,
+  ...x
+}) {
+  const [B, D] = e.useState(a), m = t !== void 0, F = m ? t : B, f = (n) => {
+    m || D(n), u == null || u(n);
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: i(c.r, w), role: "list", ...x }, l.map((n) => {
+    const p = F === n.value, E = P || !!n.disabled, L = !!n.highlighted || p, b = n.badgePlacement ?? "pill", r = n.actionsPlacement ?? "after", g = n.descriptionPlacement ?? "after-price", s = y && !E, v = 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(k, { item: n }), /* @__PURE__ */ e.createElement(h, { item: n }), /* @__PURE__ */ e.createElement(d, { item: n })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(h, { item: n }), g === "before-price" ? /* @__PURE__ */ e.createElement(d, { item: n }) : null, /* @__PURE__ */ e.createElement(k, { item: n }), g === "after-price" ? /* @__PURE__ */ e.createElement(d, { item: n }) : null));
+    return /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        key: n.value,
+        role: "listitem",
+        className: i(c.i, L && c.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 && b === "banner" ? /* @__PURE__ */ e.createElement("div", { className: c.b }, n.badge) : null,
+      n.badge != null && b === "float" ? /* @__PURE__ */ e.createElement("div", { className: i(c.g, c.a) }, n.badge) : null,
+      n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: c.m }, n.icon) : null,
+      S,
+      r === "before" ? v : null,
+      /* @__PURE__ */ e.createElement(ne, { item: n }),
+      r === "after" || r === "footer" ? v : null
+    );
+  }));
+}
+export {
+  ae 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:#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}}
+@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}.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:#fff;background:var(--shell-color-success);border-radius:50%}.cuw{width:60%;height:60%;display:block}}

package/dist/PricingGroup.js

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