@elcrm/components 0.0.3 → 0.1.1

package/dist/Avatar-CyNXYvsa.js

@@ -0,0 +1,101 @@
+import a from "react";
+import { c as f } from "./cx-CcykAxZN.js";
+import './Avatar.css';const N = "car", g = "cav", h = "cas", y = "cam", A = "cal", C = "caa", x = "cai", z = "cab", B = "cao", F = "caf", e = {
+  r: N,
+  v: g,
+  s: h,
+  m: y,
+  l: A,
+  a: C,
+  i: x,
+  b: z,
+  o: B,
+  f: F
+};
+function U(t) {
+  const s = t.trim();
+  if (!s) return "?";
+  const n = s.split(/\s+/).filter(Boolean);
+  return n.length >= 2 ? (n[0][0] + n[1][0]).toUpperCase() : s.slice(0, 2).toUpperCase();
+}
+function D({ status: t }) {
+  return /* @__PURE__ */ a.createElement(
+    "span",
+    {
+      className: f(e.b, t === "online" ? e.o : e.f),
+      "data-status": t,
+      "aria-hidden": !0
+    }
+  );
+}
+function R({
+  src: t,
+  label: s,
+  children: n,
+  name: l,
+  status: o
+}) {
+  const c = t != null && t !== "" ? /* @__PURE__ */ a.createElement("img", { className: e.i, src: t, alt: s ?? "", draggable: !1 }) : n ?? (l != null ? U(l) : "?");
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("span", { className: e.v }, c), o != null ? /* @__PURE__ */ a.createElement(D, { status: o }) : null);
+}
+function j(t) {
+  const {
+    src: s,
+    alt: n,
+    name: l,
+    size: o = "m",
+    status: c,
+    active: i,
+    children: p,
+    className: b,
+    as: v = "span",
+    ...m
+  } = t, E = o === "s" ? e.s : o === "l" ? e.l : e.m, u = f(e.r, E, i && e.a, b), r = n ?? l, d = /* @__PURE__ */ a.createElement(
+    R,
+    {
+      src: s,
+      label: r,
+      name: l,
+      status: c,
+      children: p
+    }
+  );
+  return v === "button" ? /* @__PURE__ */ a.createElement(
+    "button",
+    {
+      type: "button",
+      className: u,
+      "aria-label": r,
+      "data-active": i ? "true" : void 0,
+      "data-status": c,
+      ...m
+    },
+    d
+  ) : v === "div" ? /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      className: u,
+      role: r ? "img" : void 0,
+      "aria-label": r,
+      "data-active": i ? "true" : void 0,
+      "data-status": c,
+      ...m
+    },
+    d
+  ) : /* @__PURE__ */ a.createElement(
+    "span",
+    {
+      className: u,
+      role: r ? "img" : void 0,
+      "aria-label": r,
+      "data-active": i ? "true" : void 0,
+      "data-status": c,
+      ...m
+    },
+    d
+  );
+}
+export {
+  j as A,
+  U as i
+};

package/dist/Avatar.css

@@ -1 +1 @@
-@layer elcrm-components{.car{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:var(--avatar-radius);border:var(--avatar-border);background:var(--avatar-background);color:var(--avatar-color);font-weight:var(--avatar-font-weight);line-height:1;-webkit-user-select:none;user-select:none;vertical-align:middle}.car:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font:inherit;font-weight:var(--avatar-font-weight);cursor:pointer}.cas{width:var(--avatar-size-s);height:var(--avatar-size-s);font-size:var(--avatar-font-size-s)}.cam{width:var(--avatar-size-m);height:var(--avatar-size-m);font-size:var(--avatar-font-size-m)}.cal{width:var(--avatar-size-l);height:var(--avatar-size-l);font-size:var(--avatar-font-size-l)}.caa,.car[data-active=true]{outline:var(--avatar-outline-active);outline-offset:var(--avatar-outline-offset)}.cai{width:100%;height:100%;object-fit:cover;display:block}}
+@layer elcrm-components{.car{position:relative;box-sizing:border-box;display:inline-flex;flex-shrink:0;width:fit-content;height:fit-content;border-radius:var(--avatar-radius);-webkit-user-select:none;user-select:none;vertical-align:middle}.car:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font:inherit;cursor:pointer;background:transparent;border:none}.cav{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;width:100%;height:100%;border-radius:inherit;border:var(--avatar-border);background:var(--avatar-background);color:var(--avatar-color);font-weight:var(--avatar-font-weight);line-height:1}.cas{width:var(--avatar-size-s);height:var(--avatar-size-s);font-size:var(--avatar-font-size-s)}.cas .cav{font-size:inherit}.cam{width:var(--avatar-size-m);height:var(--avatar-size-m);font-size:var(--avatar-font-size-m)}.cam .cav{font-size:inherit}.cal{width:var(--avatar-size-l);height:var(--avatar-size-l);font-size:var(--avatar-font-size-l)}.cal .cav{font-size:inherit}.caa .cav,.car[data-active=true] .cav{outline:var(--avatar-outline-active);outline-offset:var(--avatar-outline-offset)}.cai{width:100%;height:100%;object-fit:cover;display:block}.cab{position:absolute;right:0;bottom:0;box-sizing:border-box;width:var(--shell-status-size);height:var(--shell-status-size);border-radius:50%;border:2px solid var(--shell-background);pointer-events:none}.cas .cab{width:8px;height:8px}.cam .cab{width:var(--shell-status-size);height:var(--shell-status-size)}.cal .cab{width:12px;height:12px}.cao{background:var(--shell-color-success)}.caf{background:var(--shell-color-muted)}}

package/dist/Avatar.d.ts

@@ -1,20 +1,45 @@
 import { default as React } from 'react';
 /**
  * Инициалы из имени: «Иван Петров» → «ИП», «admin» → «AD».
+ *
+ * Используется {@link Avatar}, когда нет `src`.
  */
 export declare function initialsFromName(name: string): string;
+/** Статус присутствия у аватара. */
+export type AvatarStatus = "online" | "offline";
+/**
+ * Общие поля аватара (фото / инициалы / статус).
+ *
+ * Важно: `name` — **только** для расчёта инициалов (если нет `src`).
+ * Подпись в списках (ФИО, email) — через {@link AvatarName} (`title` + `description`).
+ */
 type Common = {
-    /** URL картинки; если нет — инициалы из `name` / `children` */
+    /** URL картинки; если нет — инициалы из `name` / `children`. */
     src?: string;
+    /** Доступное имя для `alt` / `aria-label`. */
     alt?: string;
-    /** Имя для инициалов и aria-label по умолчанию */
+    /**
+     * Только для инициалов (если нет `src`).
+     * Не используйте как видимую подпись в UI — для этого {@link AvatarName}
+     * с полями `title` / `description`.
+     */
     name?: string;
+    /** Размер: `s` | `m` | `l`. */
     size?: "s" | "m" | "l";
-    /** Подсветка (например активный пункт шапки) */
+    /** Точка статуса (online / offline). */
+    status?: AvatarStatus;
+    /** Подсветка (например активный пункт шапки). */
     active?: boolean;
+    /** Кастомное содержимое вместо инициалов (если нет `src`). */
     children?: React.ReactNode;
+    /** CSS-класс корня. */
     className?: string;
 };
+/**
+ * Props {@link Avatar}: корень как `button` | `span` | `div`.
+ *
+ * По умолчанию `as="span"`. Для кликабельного аватара — `as="button"`.
+ */
 export type AvatarProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     as?: "button";
 }) | (Common & React.HTMLAttributes<HTMLSpanElement> & {
@@ -23,8 +48,34 @@ export type AvatarProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement
     as: "div";
 });
 /**
- * Аватар: фото или инициалы.
- * Токены: --avatar-*
+ * Аватар: фото или инициалы, опционально статус присутствия.
+ *
+ * Когда использовать:
+ * - круглая миниатюра пользователя без текстовой подписи рядом;
+ * - в шапке, списках, {@link AvatarGroup}.
+ *
+ * Связанные компоненты:
+ * - {@link AvatarName} — аватар + видимые `title` / `description`
+ *   (`name` у Avatar остаётся только для инициалов);
+ * - {@link AvatarGroup} — стопка аватаров из `items`.
+ *
+ * CSS-токены: `--avatar-*` (в т.ч. `--avatar-size-s|m|l`).
+ *
+ * @example
+ * ```tsx
+ * // фото + статус
+ * <Avatar src="/u/42.jpg" alt="Иван Петров" size="m" status="online" />
+ *
+ * // без фото — только инициалы из name
+ * <Avatar name="Иван Петров" size="s" />
+ *
+ * // подпись в UI — через AvatarName (title + description)
+ * <AvatarName
+ *   name="Иван Петров"
+ *   title="Иван Петров"
+ *   description="ivan@elcrm.app"
+ * />
+ * ```
  */
 export declare function Avatar(props: AvatarProps): React.JSX.Element;
 export {};

package/dist/Avatar.js

@@ -1,4 +1,4 @@
-import { A as r, i as m } from "./Avatar-DHNPaIjZ.js";
+import { A as r, i as m } from "./Avatar-CyNXYvsa.js";
 export {
   r as Avatar,
   m as initialsFromName

package/dist/AvatarGroup-BAWas4pU.js

@@ -0,0 +1,81 @@
+import n from "react";
+import { A as f } from "./Avatar-CyNXYvsa.js";
+import { c as u } from "./cx-CcykAxZN.js";
+import './AvatarGroup.css';const G = "cyr", I = "cyi", M = "cyo", R = "cyd", S = "cys", j = "cym", q = "cyl", l = {
+  r: G,
+  i: I,
+  o: M,
+  d: R,
+  s: S,
+  m: j,
+  l: q
+};
+function w(a) {
+  if (a.name != null && a.name !== "") return a.name;
+  if (a.title != null && a.title !== "") return a.title;
+}
+function F({
+  items: a,
+  max: c,
+  size: s = "m",
+  add: g = !1,
+  addLabel: v = "Добавить",
+  onAdd: r,
+  onItemClick: i,
+  className: E,
+  "aria-label": h = "Аватары",
+  ...N
+}) {
+  const p = s === "s" ? l.s : s === "l" ? l.l : l.m, k = c != null && c >= 0 ? Math.min(c, a.length) : a.length, y = a.slice(0, k), e = a.length - y.length;
+  return /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      className: u(l.r, E),
+      role: "group",
+      "aria-label": h,
+      ...N
+    },
+    y.map((t, o) => {
+      const C = t.value ?? t.title ?? t.name ?? t.src ?? String(o), b = w(t), m = t.alt ?? t.title ?? t.name, P = i != null;
+      return /* @__PURE__ */ n.createElement("span", { key: C, className: l.i, style: { zIndex: o + 1 } }, P ? /* @__PURE__ */ n.createElement(
+        f,
+        {
+          as: "button",
+          src: t.src,
+          name: b,
+          alt: m,
+          size: s,
+          status: t.status,
+          onClick: ($) => {
+            $.stopPropagation(), i(t, o);
+          }
+        }
+      ) : /* @__PURE__ */ n.createElement(
+        f,
+        {
+          src: t.src,
+          name: b,
+          alt: m,
+          size: s,
+          status: t.status
+        }
+      ));
+    }),
+    e > 0 ? /* @__PURE__ */ n.createElement("span", { className: u(l.o, p), "aria-label": `Ещё ${e}` }, "+", e) : null,
+    g ? /* @__PURE__ */ n.createElement(
+      "button",
+      {
+        type: "button",
+        className: u(l.d, p),
+        "aria-label": v,
+        onClick: (t) => {
+          t.stopPropagation(), r == null || r();
+        }
+      },
+      "+"
+    ) : null
+  );
+}
+export {
+  F as A
+};

package/dist/AvatarGroup.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cyr{display:inline-flex;align-items:center;vertical-align:middle}.cyi{position:relative;margin-left:var(--avatar-group-overlap);box-shadow:0 0 0 var(--avatar-group-ring) var(--shell-background);border-radius:var(--avatar-radius)}.cyi:first-child{margin-left:0}.cyo,.cyd{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--avatar-group-overlap);border-radius:var(--avatar-radius);font-weight:var(--avatar-font-weight);line-height:1;-webkit-user-select:none;user-select:none}.cyo{z-index:20;color:var(--shell-color-muted);background:var(--shell-background-muted);border:1px solid var(--shell-border);box-shadow:0 0 0 var(--avatar-group-ring) var(--shell-background)}.cyd{z-index:21;margin-left:var(--shell-gap-sm);color:var(--shell-color-muted);background:var(--shell-background);border:1px dashed var(--shell-border);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;font:inherit;font-weight:var(--avatar-font-weight)}.cyd:hover{background:var(--shell-background-hover)}.cys{width:var(--avatar-size-s);height:var(--avatar-size-s);font-size:var(--avatar-font-size-s)}.cym{width:var(--avatar-size-m);height:var(--avatar-size-m);font-size:var(--avatar-font-size-m)}.cyl{width:var(--avatar-size-l);height:var(--avatar-size-l);font-size:var(--avatar-font-size-l)}}

package/dist/AvatarGroup.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+/**
+ * Элемент стопки {@link AvatarGroup}.
+ *
+ * Предпочтительный идентификатор — `value` (как у остальных group-UI).
+ * `name` — только для инициалов; видимую подпись в списках даёт {@link AvatarName}.
+ */
+export type AvatarGroupItem = {
+    /** Уникальный id (предпочтительно; не React `key`). */
+    value?: string;
+    /** URL фото. */
+    src?: string;
+    /** Только для инициалов (если нет `src`). */
+    name?: string;
+    /** Подпись / aria; также fallback для инициалов, если нет `name`. */
+    title?: string;
+    /** `alt` у картинки. */
+    alt?: string;
+    /** Точка статуса. */
+    status?: "online" | "offline";
+};
+/**
+ * Props {@link AvatarGroup}.
+ *
+ * Групповой UI: декларативный `items` (+ `max` / `add`), без compound-слотов.
+ */
+export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Список людей / аватаров. */
+    items: AvatarGroupItem[];
+    /** Сколько аватаров показать до «+N». По умолчанию все. */
+    max?: number;
+    /** Размер аватаров: `s` | `m` | `l`. */
+    size?: "s" | "m" | "l";
+    /** Кнопка «+» справа. */
+    add?: boolean;
+    /** Подпись для кнопки добавления (`aria-label`). */
+    addLabel?: string;
+    /** Клик по кнопке добавления. */
+    onAdd?: () => void;
+    /** Клик по аватару. */
+    onItemClick?: (item: AvatarGroupItem, index: number) => void;
+};
+/**
+ * Стопка аватаров с оверлапом, счётчиком «+N» и опциональной кнопкой добавления.
+ *
+ * Когда использовать:
+ * - участники задачи / канала / сделки в одну строку;
+ * - нужно ограничить видимое число (`max`) и добавить «+».
+ *
+ * Связанные компоненты:
+ * - {@link Avatar} — одиночный аватар;
+ * - {@link AvatarName} — аватар с текстовой подписью (`title` / `description`).
+ *
+ * API: декларативные `items`. Идентификатор предпочтительно `value` (не `key`).
+ * Compound-слоты не используются.
+ *
+ * CSS-токены: `--avatar-group-*`, размеры из `--avatar-size-*`.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { value: "u1", name: "Иван Петров", src: "/u/1.jpg", status: "online" },
+ *   { value: "u2", name: "Мария Смирнова" },
+ *   { value: "u3", name: "Алексей" },
+ * ];
+ *
+ * <AvatarGroup
+ *   items={items}
+ *   max={5}
+ *   size="m"
+ *   add
+ *   onAdd={() => openInvite()}
+ *   onItemClick={(item) => openProfile(item.value)}
+ * />
+ * ```
+ */
+export declare function AvatarGroup({ items, max, size, add, addLabel, onAdd, onItemClick, className, "aria-label": ariaLabel, ...rest }: AvatarGroupProps): React.JSX.Element;

package/dist/AvatarGroup.js

@@ -0,0 +1,4 @@
+import { A as o } from "./AvatarGroup-BAWas4pU.js";
+export {
+  o as AvatarGroup
+};

package/dist/AvatarName-DhD3TytF.js

@@ -0,0 +1,56 @@
+import t from "react";
+import { A as v } from "./Avatar-CyNXYvsa.js";
+import { c as b } from "./cx-CcykAxZN.js";
+import './AvatarName.css';const g = "czr", y = "czc", A = "czt", h = "czd", x = "czs", C = "czm", F = "czl", e = {
+  r: g,
+  c: y,
+  t: A,
+  d: h,
+  s: x,
+  m: C,
+  l: F
+};
+function I(s, n) {
+  if (s != null && s !== "") return s;
+  if (typeof n == "string") return n;
+}
+function j(s) {
+  const {
+    src: n,
+    name: c,
+    title: m,
+    description: i,
+    size: a = "m",
+    status: f,
+    className: p,
+    children: z,
+    as: u = "div",
+    ...r
+  } = s, E = a === "s" ? e.s : a === "l" ? e.l : e.m, l = b(e.r, E, p), d = m ?? (typeof c == "string" ? c : void 0), N = I(c, m), o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(v, { src: n, name: N, size: a, status: f }), /* @__PURE__ */ t.createElement("span", { className: e.c }, d != null ? /* @__PURE__ */ t.createElement("span", { className: e.t }, d) : null, i != null ? /* @__PURE__ */ t.createElement("span", { className: e.d }, i) : null, z));
+  return u === "button" ? /* @__PURE__ */ t.createElement(
+    "button",
+    {
+      type: "button",
+      className: l,
+      ...r
+    },
+    o
+  ) : u === "a" ? /* @__PURE__ */ t.createElement(
+    "a",
+    {
+      className: l,
+      ...r
+    },
+    o
+  ) : /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: l,
+      ...r
+    },
+    o
+  );
+}
+export {
+  j as A
+};

package/dist/AvatarName.css

@@ -0,0 +1 @@
+@layer elcrm-components{.czr{display:inline-flex;align-items:center;gap:var(--shell-gap);max-width:100%;text-align:left;vertical-align:middle}.czr:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-decoration:none}.czc{display:flex;flex-direction:column;gap:2px;min-width:0}.czt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.czd{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.czs{gap:var(--shell-gap-sm)}.czs .czt{font-size:var(--shell-font-size-sm)}.czm{gap:var(--shell-gap)}.czl{gap:var(--shell-gap-lg)}.czl .czt{font-size:var(--shell-font-size-lg)}.czl .czd{font-size:var(--shell-font-size)}}

package/dist/AvatarName.d.ts

@@ -0,0 +1,76 @@
+import { default as React } from 'react';
+import { AvatarStatus } from './Avatar';
+/**
+ * Общие поля блока «аватар + текст».
+ *
+ * Канон подписей: видимые `title` и `description`.
+ * `name` уходит в {@link Avatar} **только** для инициалов (если нет `src`).
+ */
+type Common = {
+    /** URL фото. */
+    src?: string;
+    /**
+     * Только для инициалов (если нет `src`).
+     * Не заменяет видимый заголовок — для него `title`.
+     */
+    name?: string;
+    /** Заголовок (имя пользователя и т.п.) — видимый текст. */
+    title?: React.ReactNode;
+    /** Подпись: email, роль… */
+    description?: React.ReactNode;
+    /** Размер: `s` | `m` | `l`. */
+    size?: "s" | "m" | "l";
+    /** Статус у аватара. */
+    status?: AvatarStatus;
+    /** CSS-класс корня. */
+    className?: string;
+    /** Доп. контент в текстовой колонке. */
+    children?: React.ReactNode;
+};
+/**
+ * Props {@link AvatarName}: корень как `button` | `a` | `div`.
+ */
+export type AvatarNameProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: "button";
+}) | (Common & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as: "a";
+}) | (Common & React.HTMLAttributes<HTMLDivElement> & {
+    as: "div";
+});
+/**
+ * Аватар + видимые `title` и `description` в одну строку.
+ *
+ * Когда использовать:
+ * - строка пользователя в списке / меню / карточке;
+ * - нужна подпись рядом с фото (не только инициалы).
+ *
+ * Связанные компоненты:
+ * - {@link Avatar} — только круг (без текста); `name` там лишь для инициалов;
+ * - {@link AvatarGroup} — стопка без подписей.
+ *
+ * Канон: `title` / `description` для UI-текста; `name` — только инициалы.
+ *
+ * CSS-токены: `--shell-*` (типографика строки), аватар — `--avatar-*`.
+ *
+ * @example
+ * ```tsx
+ * <AvatarName
+ *   src="/u/42.jpg"
+ *   name="Иван Петров"
+ *   title="Иван Петров"
+ *   description="ivan@elcrm.app"
+ *   size="m"
+ *   status="online"
+ * />
+ *
+ * <AvatarName
+ *   as="button"
+ *   name="Мария"
+ *   title="Мария Смирнова"
+ *   description="Менеджер"
+ *   onClick={() => openProfile()}
+ * />
+ * ```
+ */
+export declare function AvatarName(props: AvatarNameProps): React.JSX.Element;
+export {};

package/dist/AvatarName.js

@@ -0,0 +1,4 @@
+import { A as e } from "./AvatarName-DhD3TytF.js";
+export {
+  e as AvatarName
+};

package/dist/Badge.css

@@ -1 +1 @@
-@layer elcrm-components{.cjr{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:var(--badge-padding);border-radius:var(--badge-radius);border:var(--badge-border);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);line-height:1;white-space:nowrap}.cjn{background:var(--badge-neutral-background);color:var(--badge-neutral-color)}.cja{background:var(--badge-accent-background);color:var(--badge-accent-color)}.cju{background:var(--badge-success-background);color:var(--badge-success-color)}.cjw{background:var(--badge-warning-background);color:var(--badge-warning-color)}.cjd{background:var(--badge-danger-background);color:var(--badge-danger-color)}}
+@layer elcrm-components{.cjr{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;border:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);line-height:1;white-space:nowrap}.cjn{background:var(--shell-background-hover);color:var(--shell-color)}.cja{background:color-mix(in srgb,var(--shell-color-accent) 16%,transparent);color:var(--shell-color-accent)}.cju{background:color-mix(in srgb,var(--shell-color-success) 16%,transparent);color:var(--shell-color-success)}.cjw{background:color-mix(in srgb,var(--shell-color-warning) 16%,transparent);color:var(--shell-color-warning)}.cjd{background:color-mix(in srgb,var(--shell-color-danger) 16%,transparent);color:var(--shell-color-danger)}}

package/dist/Badge.d.ts

@@ -1,11 +1,26 @@
 import { default as React } from 'react';
+/**
+ * Компактная метка / статус (тон по смыслу).
+ *
+ * Роли: Badge рядом с Item, в Card, в PageHead; не заменяет Button.
+ *
+ * @example
+ * ```tsx
+ * <Badge tone="success">Активен</Badge>
+ * <Badge tone="danger">Просрочен</Badge>
+ * ```
+ *
+ * Токены: `--shell-*` (tone через color-mix от `--shell-color-*`).
+ */
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
     /** Визуальный тон */
     tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+    /** Текст или содержимое метки */
     children?: React.ReactNode;
 };
 /**
  * Компактная метка / статус.
- * Токены: --badge-*
+ *
+ * @see Item, Card, Avatar
  */
 export declare function Badge({ tone, children, className, ...rest }: BadgeProps): React.JSX.Element;

package/dist/Block-BAXh0PPp.js

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

package/dist/Block.d.ts

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

package/dist/Block.js

@@ -1,4 +1,4 @@
-import { B } from "./Block-CVKukh1e.js";
+import { B } from "./Block-BAXh0PPp.js";
 export {
   B as Block
 };

package/dist/Brand.css

@@ -1 +1 @@
-@layer elcrm-components{.cnr{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:0;background:transparent;font:inherit;font-weight:var(--brand-font-weight);letter-spacing:var(--brand-letter-spacing);color:var(--brand-color);white-space:nowrap;cursor:pointer;text-decoration:none}.cnr:hover{color:var(--brand-color-hover)}}
+@layer elcrm-components{.cnr{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:0;background:transparent;font:inherit;font-weight:700;letter-spacing:.02em;color:var(--shell-color);white-space:nowrap;cursor:pointer;text-decoration:none}.cnr:hover{color:var(--shell-color-accent)}}

package/dist/Brand.d.ts

@@ -1,18 +1,37 @@
 import { default as React } from 'react';
 type Common = {
+    /** Текст или логотип бренда */
     children?: React.ReactNode;
+    /** Доп. CSS-класс */
     className?: string;
 };
+/**
+ * Название / логотип в шапке.
+ *
+ * Роли: Brand = кликабельный или статичный бренд в Header;
+ * рендерится как `button` (по умолчанию), `a` или `strong`.
+ *
+ * @example
+ * ```tsx
+ * <Header brand={<Brand as="a" href="/">elCRM</Brand>} />
+ * ```
+ *
+ * Токены: `--shell-color`, `--shell-color-accent`.
+ */
 export type BrandProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Тег: кнопка (по умолчанию) */
     as?: "button";
 }) | (Common & React.HTMLAttributes<HTMLElement> & {
+    /** Тег: статичный заголовок без клика */
     as: "strong";
 }) | (Common & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Тег: ссылка на главную */
     as: "a";
 });
 /**
  * Название / логотип в шапке.
- * Токены: --brand-*
+ *
+ * @see Header, Layout
  */
 export declare function Brand(props: BrandProps): React.JSX.Element;
 export {};