@elcrm/components 0.0.3 → 0.1.0

package/dist/RadioGroup-DxoPHPIF.js

@@ -0,0 +1,138 @@
+import e from "react";
+import { c as r } from "./cx-CcykAxZN.js";
+import './RadioGroup.css';const F = "cqr", L = "cqi", M = "cqs", w = "cqp", B = "cqh", I = "cqn", j = "cqm", A = "cqmf", G = "cqc", S = "cqt", T = "cqe", U = "cqd", W = "cqx", $ = "cqy", C = "cqz", H = "cqk", J = "cqkr", K = "cqkc", O = "cqkv", c = {
+  r: F,
+  i: L,
+  s: M,
+  p: w,
+  h: B,
+  n: I,
+  m: j,
+  mf: A,
+  c: G,
+  t: S,
+  e: T,
+  d: U,
+  x: W,
+  y: $,
+  z: C,
+  k: H,
+  kr: J,
+  kc: K,
+  kv: O
+};
+function P() {
+  return /* @__PURE__ */ e.createElement("svg", { className: c.kv, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__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 E({
+  kind: t,
+  selected: l
+}) {
+  const a = t === "radio";
+  return /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: r(c.k, a ? c.kr : c.kc),
+      "data-on": l ? "true" : void 0,
+      "aria-hidden": !0
+    },
+    !a && l ? /* @__PURE__ */ e.createElement(P, null) : null
+  );
+}
+function i({
+  title: t,
+  meta: l,
+  price: a,
+  badge: s
+}) {
+  return t == null && l == null && a == null && s == null ? null : /* @__PURE__ */ e.createElement("div", { className: c.t }, a != null ? /* @__PURE__ */ e.createElement("span", { className: c.z }, a) : null, t ?? null, l != null ? /* @__PURE__ */ e.createElement("span", { className: c.e }, l) : null, s ?? null);
+}
+function f({ children: t }) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: c.x,
+      onClick: (l) => l.stopPropagation(),
+      onMouseDown: (l) => l.preventDefault()
+    },
+    t
+  );
+}
+function Y({
+  items: t,
+  value: l,
+  defaultValue: a,
+  name: s,
+  disabled: m = !1,
+  indicator: p = "check",
+  indicatorSide: q = "end",
+  onValueChange: u,
+  className: N,
+  ...h
+}) {
+  const b = e.useId(), x = s ?? b, [y, g] = e.useState(a), k = l !== void 0, z = k ? l : y, R = (n) => {
+    k || g(n), u == null || u(n);
+  };
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: r(c.r, N),
+      role: "radiogroup",
+      "aria-disabled": m || void 0,
+      ...h
+    },
+    t.map((n) => {
+      const o = z === n.value, D = m || !!n.disabled, d = n.variant === "split", v = n.iconFramed !== !1;
+      return /* @__PURE__ */ e.createElement(
+        "label",
+        {
+          key: n.value,
+          className: r(c.i, o && c.s, d && c.p),
+          "data-selected": o ? "true" : void 0,
+          "data-indicator": d ? void 0 : q
+        },
+        /* @__PURE__ */ e.createElement(
+          "input",
+          {
+            className: c.n,
+            type: "radio",
+            name: x,
+            value: n.value,
+            checked: o,
+            disabled: D,
+            onChange: () => R(n.value)
+          }
+        ),
+        d ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: c.h }, n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: r(c.m, v && c.mf) }, n.icon) : null, /* @__PURE__ */ e.createElement(i, { title: n.title }), /* @__PURE__ */ e.createElement(E, { kind: p, selected: o })), /* @__PURE__ */ e.createElement("div", { className: c.y }, /* @__PURE__ */ e.createElement(
+          i,
+          {
+            price: n.price,
+            meta: n.meta,
+            badge: n.badge
+          }
+        ), n.description != null ? /* @__PURE__ */ e.createElement("p", { className: c.d }, n.description) : null, n.actions != null ? /* @__PURE__ */ e.createElement(f, null, n.actions) : null)) : /* @__PURE__ */ e.createElement(e.Fragment, null, n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: r(c.m, v && c.mf) }, n.icon) : null, /* @__PURE__ */ e.createElement("div", { className: c.c }, /* @__PURE__ */ e.createElement(
+          i,
+          {
+            title: n.title,
+            meta: n.meta,
+            price: n.price,
+            badge: n.badge
+          }
+        ), n.description != null ? /* @__PURE__ */ e.createElement("p", { className: c.d }, n.description) : null, n.actions != null ? /* @__PURE__ */ e.createElement(f, null, n.actions) : null), /* @__PURE__ */ e.createElement(E, { kind: p, selected: o }))
+      );
+    })
+  );
+}
+export {
+  Y as R
+};

package/dist/RadioGroup.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cqr{display:flex;flex-direction:column;gap:var(--shell-gap)}.cqi{display:flex;align-items:flex-start;gap:var(--shell-gap);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cqi:hover:not(:disabled){background:var(--shell-background-hover)}.cqi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cqs,.cqi[data-selected=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cqp{flex-direction:column;align-items:stretch;padding:0;gap:0}.cqp.cqs .cqh,.cqp[data-selected=true] .cqh{border-bottom-color:var(--shell-color-accent)}.cqn{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cqm{display:flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden}.cqmf{width:var(--shell-icon-size);height:var(--shell-icon-size);padding:var(--shell-gap-sm);box-sizing:content-box;color:var(--shell-color-muted);background:var(--shell-background-muted);border:1px solid var(--shell-border);border-radius:var(--shell-radius)}.cqc{display:flex;flex:1;flex-direction:column;gap:var(--shell-gap-sm);min-width:0}.cqt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm);font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cqe{font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted)}.cqd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cqx{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);margin-top:var(--shell-gap-sm)}.cqh{display:flex;align-items:center;gap:var(--shell-gap);padding:var(--shell-padding);border-bottom:1px solid var(--shell-border)}.cqh .cqt{flex:1;min-width:0}.cqy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding)}.cqz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.2}.cqk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-left:auto;box-sizing:border-box;border:1px solid var(--shell-border);background:var(--shell-background);color:#fff}.cqi[data-indicator=start]>.cqk{margin-left:0;order:-1}.cqkr{border-radius:50%}.cqkr[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent);box-shadow:inset 0 0 0 3px var(--shell-background-selected)}.cqkc{border-radius:calc(var(--shell-radius) * .4)}.cqkc[data-on=true]{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.cqkv{width:60%;height:60%;display:block}}

package/dist/RadioGroup.d.ts

@@ -0,0 +1,111 @@
+import { default as React } from 'react';
+/** Вид индикатора выбора: квадрат с галочкой или круг. */
+export type RadioIndicator = "check" | "radio";
+/** Сторона индикатора в row-варианте. */
+export type RadioIndicatorSide = "start" | "end";
+/**
+ * Опция группы выбора {@link RadioGroup}.
+ *
+ * Идентификатор — `value` (не `key`).
+ * Опциональные поля (`icon`, `title`, `description`, …): есть → рисуем, нет → пропускаем.
+ * Внешний вид (индикатор, split) — props item/группы, не отдельные compound-слоты.
+ */
+export type RadioGroupItem = {
+    /** Значение опции (то, что уходит в value / onValueChange). Не `key`. */
+    value: string;
+    /** Заголовок опции. */
+    title?: React.ReactNode;
+    /** Описание под заголовком. */
+    description?: React.ReactNode;
+    /** Иконка / логотип / Avatar — рисуется только если передано. */
+    icon?: React.ReactNode;
+    /**
+     * Рамка вокруг icon (квадрат под иконку/лого).
+     * Для Avatar — `false`. По умолчанию `true`.
+     */
+    iconFramed?: boolean;
+    /** Вторичный текст: @handle, $10/month, per month. */
+    meta?: React.ReactNode;
+    /** Крупная цена (часто с `variant="split"`). */
+    price?: React.ReactNode;
+    /** Метка (Badge и т.п.). */
+    badge?: React.ReactNode;
+    /** Edit / Set as default — клик не меняет выбор. */
+    actions?: React.ReactNode;
+    /** Недоступная опция. */
+    disabled?: boolean;
+    /**
+     * `row` — одна строка (планы, люди, оплата).
+     * `split` — шапка (icon + title) / тело (price + meta + badge + description).
+     */
+    variant?: "row" | "split";
+};
+/**
+ * Props компонента {@link RadioGroup}.
+ *
+ * Групповой UI: `items` + `value` / `onValueChange`, без `RadioGroup.Item`.
+ */
+export type RadioGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /** Декларативный список опций. */
+    items: RadioGroupItem[];
+    /** Выбранное значение (controlled). */
+    value?: string;
+    /** Начальное значение (uncontrolled). */
+    defaultValue?: string;
+    /** `name` для скрытых `input[type=radio]`. */
+    name?: string;
+    /** Заблокировать всю группу. */
+    disabled?: boolean;
+    /** `check` — квадрат с галочкой; `radio` — круг. */
+    indicator?: RadioIndicator;
+    /** Сторона индикатора в row-варианте. */
+    indicatorSide?: RadioIndicatorSide;
+    /** Смена выбора (`next` = `item.value`). */
+    onValueChange?: (value: string) => void;
+};
+/**
+ * Группа выбора одной опции из декларативного массива `items`.
+ *
+ * Когда использовать:
+ * - выбор тарифа, способа оплаты, человека, варианта настроек карточкой;
+ * - нужен check/radio-индикатор и опциональные icon / meta / actions.
+ *
+ * Связанные компоненты:
+ * - {@link PricingGroup} — тарифные карточки без radio-индикатора;
+ * - {@link AvatarName} — часто как `icon` / контент опции «человек».
+ *
+ * API: только `items` + value/onValueChange. Compound-слоты (`RadioGroup.Item`) не используются.
+ * Идентификатор опции — `value` (не `key`).
+ *
+ * CSS-токены: `--shell-*`.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   {
+ *     value: "basic",
+ *     icon: <Icons.Line name="zap" />,
+ *     title: "Basic",
+ *     description: "Для старта",
+ *     meta: "$9/мес",
+ *   },
+ *   {
+ *     value: "pro",
+ *     title: "Pro",
+ *     description: "Для команд",
+ *     price: "$29",
+ *     badge: <Badge>Popular</Badge>,
+ *     variant: "split",
+ *   },
+ * ];
+ *
+ * <RadioGroup
+ *   items={items}
+ *   value={plan}
+ *   onValueChange={setPlan}
+ *   indicator="check"
+ *   indicatorSide="end"
+ * />
+ * ```
+ */
+export declare function RadioGroup({ items, value: valueProp, defaultValue, name: nameProp, disabled, indicator, indicatorSide, onValueChange, className, ...rest }: RadioGroupProps): React.JSX.Element;

package/dist/RadioGroup.js

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

package/dist/Row--HIe6vb9.js

@@ -0,0 +1,8 @@
+import t from "react";
+import { S as o } from "./Stack-b0-XWwQ1.js";
+function c(r) {
+  return /* @__PURE__ */ t.createElement(o, { direction: "row", ...r });
+}
+export {
+  c as R
+};

package/dist/Row.d.ts

@@ -1,8 +1,24 @@
 import { default as React } from 'react';
-export type RowProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Отступ между детьми: число (px) или CSS-строка */
-    gap?: number | string;
-    children?: React.ReactNode;
-};
-/** Горизонтальный ряд. Токены: --row-* */
-export declare function Row({ gap, children, className, style, ...rest }: RowProps): React.JSX.Element;
+import { StackProps } from './Stack';
+/**
+ * @deprecated Используйте `Stack direction="row"`.
+ * Миграция: `elcrm migrate components`.
+ *
+ * Горизонтальный стек (алиас Stack).
+ *
+ * @example
+ * ```tsx
+ * // Было:
+ * <Row gap={8}>…</Row>
+ * // Стало:
+ * <Stack direction="row" gap={8}>…</Stack>
+ * ```
+ */
+export type RowProps = Omit<StackProps, "direction">;
+/**
+ * @deprecated Используйте `Stack direction="row"`.
+ * Миграция: `elcrm migrate components`.
+ *
+ * @see Stack, Block, Column
+ */
+export declare function Row(props: RowProps): React.JSX.Element;

package/dist/Row.js

@@ -1,4 +1,4 @@
-import { R } from "./Row-CnD7Q7pD.js";
+import { R } from "./Row--HIe6vb9.js";
 export {
   R as Row
 };

package/dist/Section.css

@@ -1 +1 @@
-@layer elcrm-components{.cep{display:flex;flex-direction:column;gap:var(--section-gap);padding:var(--section-padding);flex:1;min-width:0}.ceu{box-sizing:border-box;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-auth-padding)}.cek{box-sizing:border-box;width:100%;max-width:var(--section-auth-card-max-width);padding:var(--section-auth-card-padding);background:var(--section-auth-card-background);border:1px solid var(--section-auth-card-border);border-radius:var(--section-auth-card-radius);box-shadow:var(--section-auth-card-shadow);display:flex;flex-direction:column;gap:var(--section-gap)}.ceh{display:flex;flex-direction:column;gap:.35rem}.cec{text-align:center;align-items:center}.cei{display:flex;margin-bottom:var(--section-icon-gap)}.cec .cei{justify-content:center}.cet{margin:0;font-size:var(--section-title-size);font-weight:600;letter-spacing:-.02em;color:var(--section-title-color);line-height:1.25}.ced{font-size:var(--section-title-size-md)}.cee{margin:0;font-size:var(--section-description-size);color:var(--section-description-color);line-height:1.45}.ceb{display:flex;flex-direction:column;gap:var(--section-body-gap);width:100%;text-align:left}.ces{display:flex;flex-direction:column;gap:var(--section-actions-gap);width:100%}.cel{display:flex;flex-direction:column;gap:var(--section-gap);margin-bottom:var(--section-block-margin-bottom);padding-bottom:var(--section-block-padding-bottom);border-bottom:1px solid var(--section-block-border)}.cel:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.cel .cet{font-size:.95rem;font-weight:600}}
+@layer elcrm-components{.cep{display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--section-padding);flex:1;min-width:0}.ceu{box-sizing:border-box;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-padding)}.cek{box-sizing:border-box;width:100%;max-width:var(--section-auth-card-max-width);padding:var(--shell-gap-lg);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow);display:flex;flex-direction:column;gap:var(--shell-gap)}.ceh{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cec{text-align:center;align-items:center}.cei{display:flex;margin-bottom:var(--shell-gap-sm)}.cec .cei{justify-content:center}.cet{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);letter-spacing:-.02em;color:var(--shell-color);line-height:1.25}.ced{font-size:var(--section-title-size-md)}.cee{margin:0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.ceb{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;text-align:left}.ces{display:flex;flex-direction:column;gap:var(--shell-gap-sm);width:100%}.cel{display:flex;flex-direction:column;gap:var(--shell-gap);margin-bottom:var(--shell-gap-lg);padding-bottom:var(--shell-gap-lg);border-bottom:1px solid var(--shell-border)}.cel:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.cel .cet{font-size:var(--shell-font-size);font-weight:var(--shell-font-weight)}}

package/dist/Section.d.ts

@@ -1,11 +1,28 @@
 import { default as React } from 'react';
+/**
+ * Единая секция страницы: заголовок, описание, иконка, контент, действия.
+ *
+ * Роли: Section = блок модуля / панель / auth-карточка;
+ * для строки «title + actions» на странице — PageHead;
+ * каркас со скроллом — PageShell.
+ *
+ * @example
+ * ```tsx
+ * <Section title="Настройки" description="Профиль и безопасность" variant="page">
+ *   <Stack gap={16}>…</Stack>
+ * </Section>
+ * ```
+ *
+ * Токены: `--shell-*`, узкие `--section-padding`, `--section-title-size`, `--section-title-size-md`, `--section-auth-card-max-width`.
+ */
 export type SectionProps = {
-    /** Заголовок */
+    /** Заголовок секции */
     title?: React.ReactNode;
     /** Подзаголовок / описание */
     description?: React.ReactNode;
     /** Иконка / логотип над или рядом с заголовком */
     icon?: React.ReactNode;
+    /** Основной контент секции */
     children?: React.ReactNode;
     /** Блок действий (кнопки под контентом или в шапке) */
     actions?: React.ReactNode;
@@ -15,15 +32,18 @@ export type SectionProps = {
      * `auth` — центрированная карточка входа.
      */
     variant?: "page" | "block" | "auth";
-    /** Выравнивание шапки */
+    /** Выравнивание шапки (`start` по умолчанию, для `auth` — `center`) */
     align?: "start" | "center";
     /** Размер заголовка */
     titleSize?: "md" | "lg";
+    /** Доп. CSS-класс */
     className?: string;
+    /** HTML-тег корня (`main` / `section` / `div`) */
     as?: "section" | "main" | "div";
 };
 /**
  * Единая секция страницы: title + description + icon + children.
- * Токены: --section-*
+ *
+ * @see PageHead, PageShell, Stack, EmptyState
  */
 export declare function Section({ title, description, icon, children, actions, variant, align, titleSize, className, as, }: SectionProps): React.JSX.Element;

package/dist/Stack-b0-XWwQ1.js

@@ -0,0 +1,31 @@
+import m from "react";
+import { c as u } from "./cx-CcykAxZN.js";
+import './Stack.css';function a(t) {
+  if (t != null)
+    return { gap: typeof t == "number" ? `${t}px` : t };
+}
+const i = "c1r", l = "c1h", r = {
+  r: i,
+  h: l
+};
+function p({
+  direction: t = "column",
+  gap: c,
+  children: e,
+  className: n,
+  style: o,
+  ...s
+}) {
+  return /* @__PURE__ */ m.createElement(
+    "div",
+    {
+      className: u(r.r, t === "row" && r.h, n),
+      style: { ...a(c), ...o },
+      ...s
+    },
+    e
+  );
+}
+export {
+  p as S
+};

package/dist/Stack.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c1r{display:flex;flex-direction:column;gap:var(--shell-gap)}.c1h{flex-direction:row;flex-wrap:wrap;align-items:center}}

package/dist/Stack.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+/** Направление раскладки стека */
+export type StackDirection = "row" | "column";
+/**
+ * Универсальный стек (ряд / колонка) с отступами между детьми.
+ *
+ * Роли: Stack = базовая раскладка; заменяет устаревшие Block / Row / Column.
+ * Внутри Section, Card, форм и списков действий.
+ *
+ * @example
+ * ```tsx
+ * <Stack direction="row" gap={12}>
+ *   <Button>Отмена</Button>
+ *   <Button>Сохранить</Button>
+ * </Stack>
+ * ```
+ *
+ * Токены: `--shell-gap` (если `gap` не задан); при `gap` — inline-стиль.
+ */
+export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Направление: по умолчанию `column` */
+    direction?: StackDirection;
+    /** Отступ между детьми: число (px) или CSS-строка */
+    gap?: number | string;
+    /** Дочерние элементы стека */
+    children?: React.ReactNode;
+};
+/**
+ * Универсальный стек (ряд / колонка).
+ * Вместо устаревших Block / Row / Column.
+ *
+ * @see Block, Row, Column
+ */
+export declare function Stack({ direction, gap, children, className, style, ...rest }: StackProps): React.JSX.Element;

package/dist/Stack.js

@@ -0,0 +1,4 @@
+import { S as r } from "./Stack-b0-XWwQ1.js";
+export {
+  r as Stack
+};

package/dist/TabSections-DL7DufKU.js

@@ -0,0 +1,50 @@
+import t, { useMemo as S, useState as y, Suspense as T } from "react";
+import { c as b } from "./cx-CcykAxZN.js";
+import './TabSections.css';const x = "ctr", I = "ctb", M = "ctn", R = "ctt", $ = "cta", g = "cte", j = "cts", q = "ctm", a = {
+  r: x,
+  b: I,
+  n: M,
+  t: R,
+  a: $,
+  e: g,
+  s: j,
+  m: q
+};
+function A({
+  items: l,
+  resolveSection: d,
+  value: o,
+  defaultValue: n,
+  onValueChange: s,
+  loading: v = null,
+  actions: m,
+  className: i,
+  navLabel: E = "Вкладки"
+}) {
+  const p = S(() => {
+    var e;
+    return n || (((e = l.find((c) => !c.disabled)) == null ? void 0 : e.value) ?? "");
+  }, [n, l]), [N, f] = y(p), r = o ?? N, k = (e) => {
+    o == null && f(e), s == null || s(e);
+  }, u = r ? d(r) : null;
+  return /* @__PURE__ */ t.createElement("div", { className: b(a.r, i) }, /* @__PURE__ */ t.createElement("div", { className: a.b }, /* @__PURE__ */ t.createElement("nav", { className: a.n, "aria-label": E }, l.map((e) => {
+    const c = e.value === r;
+    return /* @__PURE__ */ t.createElement(
+      "button",
+      {
+        key: e.value,
+        type: "button",
+        className: b(a.t, c && a.a),
+        "data-active": c ? "true" : void 0,
+        "aria-current": c ? "page" : void 0,
+        disabled: e.disabled,
+        onClick: () => k(e.value)
+      },
+      /* @__PURE__ */ t.createElement("span", null, e.label),
+      e.badge != null && e.badge !== "" ? /* @__PURE__ */ t.createElement("em", { className: a.e }, e.badge) : null
+    );
+  })), m != null ? /* @__PURE__ */ t.createElement("div", { className: a.s }, m) : null), /* @__PURE__ */ t.createElement("div", { className: a.m }, u ? /* @__PURE__ */ t.createElement(T, { fallback: v }, t.createElement(u)) : null));
+}
+export {
+  A as T
+};

package/dist/TabSections.css

@@ -1 +1 @@
-@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--tab-sections-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:1rem;border-bottom:1px solid var(--tab-sections-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--tab-sections-tab-gap);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;margin:0 0 -1px;padding:var(--tab-sections-tab-padding);border:none;border-bottom:2px solid transparent;background:transparent;color:var(--tab-sections-color);font:inherit;font-size:.95rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .12s ease,border-color .12s ease}.ctt:hover:not(:disabled){color:var(--tab-sections-color-active)}.cta{color:var(--tab-sections-color-active);border-bottom-color:var(--tab-sections-accent)}.ctt:disabled{opacity:.45;cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--tab-sections-badge-background);color:var(--tab-sections-badge-color);font-size:var(--tab-sections-badge-size);font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:.35rem}.ctm{min-width:0;width:100%}}
+@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:#fff;font-size:11px;font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ctm{min-width:0;width:100%}}

package/dist/TabSections.d.ts

@@ -1,31 +1,87 @@
 import { default as React } from 'react';
 import { LazyRouteChunk } from './lazyRoute';
+/**
+ * Пункт горизонтальных вкладок {@link TabSections}.
+ *
+ * Идентификатор — `value` (часто имя файла секции). Не путать с React `key`.
+ */
 export type TabSectionsItem = {
-    key: string;
+    /** Уникальный идентификатор вкладки (не `key`). */
+    value: string;
+    /** Подпись вкладки. */
     label: React.ReactNode;
-    /** Бейдж справа от подписи (число / текст) */
+    /** Бейдж справа от подписи (число / текст). Нет — не рисуем. */
     badge?: React.ReactNode;
+    /** Недоступная вкладка. */
     disabled?: boolean;
 };
+/**
+ * Props компонента {@link TabSections}.
+ *
+ * Групповой UI: декларативный массив `items` + `value` / `onValueChange`.
+ */
 export type TabSectionsProps = {
-    /** Горизонтальные вкладки (ключ = файл секции) */
+    /**
+     * Горизонтальные вкладки.
+     * `value` пункта обычно = имя файла секции для `resolveSection`.
+     */
     items: TabSectionsItem[];
     /**
-     * Резолвер: обычно `createLazyResolver((k) => import(\`./sections/${k}.tsx\`))`.
+     * Резолвер панели по `value`.
+     * Обычно: `createLazyResolver((v) => import(\`./sections/${v}.tsx\`))`.
      */
-    resolveSection: (key: string) => LazyRouteChunk | React.ComponentType;
-    activeKey?: string;
-    defaultActiveKey?: string;
-    onChange?: (key: string) => void;
+    resolveSection: (value: string) => LazyRouteChunk | React.ComponentType;
+    /** Контролируемый активный `value`. */
+    value?: string;
+    /** Начальный `value` (неконтролируемый режим). */
+    defaultValue?: string;
+    /** Смена вкладки (`next` = `item.value`). */
+    onValueChange?: (value: string) => void;
+    /** Fallback для `<Suspense>`. */
     loading?: React.ReactNode;
-    /** Справа в ряду вкладок (фильтр, сортировка…) */
+    /** Справа в ряду вкладок (фильтр, сортировка…). */
     actions?: React.ReactNode;
+    /** CSS-класс корня. */
     className?: string;
+    /** `aria-label` для `<nav>` вкладок. */
     navLabel?: string;
 };
 /**
- * Как NavSections, но вкладки горизонтально. Без своего заголовка —
- * оборачивайте в Section.
- * Токены: --tab-sections-*
+ * Как {@link NavSections}, но вкладки горизонтально; без собственного заголовка —
+ * обычно оборачивают в `Section` / `PageHead`.
+ *
+ * Когда использовать:
+ * - несколько панелей на одной странице с горизонтальным переключением;
+ * - контент грузится lazy по `value`.
+ *
+ * Связанные компоненты:
+ * - {@link NavSections} — сайдбар + секции;
+ * - {@link createLazyResolver} — кэш lazy-импортов;
+ * - `Section` — обёртка с заголовком страницы.
+ *
+ * API: декларативные `items`. Идентификатор — `value` (не `key`).
+ * Compound-слоты не используются.
+ *
+ * CSS-токены: `--shell-*`.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { value: "members", label: "Участники", badge: 12 },
+ *   { value: "invites", label: "Приглашения" },
+ * ];
+ *
+ * const resolveSection = createLazyResolver(
+ *   (v) => import(`./sections/${v}.tsx`),
+ * );
+ *
+ * <TabSections
+ *   items={items}
+ *   resolveSection={resolveSection}
+ *   value={tab}
+ *   onValueChange={setTab}
+ *   actions={<Button size="s">Фильтр</Button>}
+ * />
+ * ```
  */
-export declare function TabSections({ items, resolveSection, activeKey: activeKeyProp, defaultActiveKey, onChange, loading, actions, className, navLabel, }: TabSectionsProps): React.JSX.Element;
+export declare function TabSections({ items, resolveSection, value: valueProp, defaultValue, onValueChange, loading, actions, className, navLabel, }: TabSectionsProps): React.JSX.Element;

package/dist/TabSections.js

@@ -1,4 +1,4 @@
-import { T as e } from "./TabSections-oeEBx0nM.js";
+import { T as e } from "./TabSections-DL7DufKU.js";
 export {
   e as TabSections
 };

package/dist/cx.d.ts

@@ -1,2 +1,9 @@
-/** Склейка className без лишних пробелов */
+/**
+ * Склейка CSS className без лишних пробелов и falsy-значений.
+ *
+ * @example
+ * ```ts
+ * cx(s.r, active && s.a, className) // → "cr c a my"
+ * ```
+ */
 export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/dark.css

@@ -0,0 +1,24 @@
+/**
+ * Цвета shell (@elcrm/components) для тёмной темы — `elcrm css`.
+ */
+html[data-theme="dark"],
+body[data-theme="dark"] {
+  --shell-color: var(--text);
+  --shell-color-muted: var(--muted);
+  --shell-color-accent: var(--accent);
+  --shell-color-danger: var(--danger);
+  --shell-color-success: var(--success);
+  --shell-color-warning: var(--warning);
+  --shell-border: var(--line);
+  --shell-background: var(--panel);
+  --shell-background-muted: var(--bg);
+  --shell-background-hover: color-mix(in srgb, var(--text) 8%, transparent);
+  --shell-background-selected: color-mix(in srgb, var(--accent) 14%, transparent);
+  --shell-shadow: var(--shadow);
+
+  --avatar-background: var(--shell-color-accent);
+  --avatar-color: var(--button-primary-fg);
+  --avatar-border: 1px solid var(--shell-border);
+  --avatar-outline-active: 2px solid
+    color-mix(in srgb, var(--accent) 70%, white);
+}