@elcrm/components 0.1.0 → 0.1.2

package/README.md

@@ -17,7 +17,11 @@ import {
   Footer,
   List,
   Item,
+  ItemColumn,
   Card,
+  ActionGroup,
+  TextGroup,
+  Stat,
   Stack,
   Menu,
   Loading,
@@ -37,6 +41,8 @@ import {
   Breadcrumb,
   PageHead,
   PageShell,
+  Sidebar,
+  Popover,
   createLazyResolver,
 } from "@elcrm/components";
 import type { PricingPlan } from "@elcrm/components";
@@ -56,28 +62,34 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 
 |                                  | Назначение                       | Ключевые props                                       |
 | -------------------------------- | -------------------------------- | ---------------------------------------------------- |
-| **Layout**                       | Оболочка страницы                | `header`, `footer`, `children`                       |
+| **Layout**                       | Оболочка страницы                | `sidebar`, `header`, `footer`, `children`            |
 | **Header**                       | Шапка со слотами                 | `brand`, `nav`, `search`, `actions`                  |
 | **Footer**                       | Подвал                           | `children`                                           |
 | **Brand**                        | Название / логотип               | `as`, `children`, `onClick`                          |
-| **Avatar**                       | Фото или инициалы                | `src`, `name` (инициалы), `size`, `status`, `as`     |
-| **AvatarName**                   | Аватар + title + description     | `title`, `description`, `name?`, `size`, `status`    |
+| **Avatar**                       | Фото или инициалы                | `src`, `name`, `size`, `radius`, `status`, `as`      |
+| **AvatarName**                   | Аватар + title + description     | `title`, `description`, `radius`, `--avatar-name-*-color` |
 | **AvatarGroup**                  | Стопка аватаров + «+N»           | `items` (`value`/`title`/`name`), `max`, `add`       |
-| **Badge**                        | Метка / статус                   | `tone`, `children`                                   |
+| **Badge**                        | Метка / статус                   | `tone`, `size`, `dot`, `children`                    |
 | **RadioGroup**                   | Выбор одной опции-карточки       | `items`, `value`, `indicator`, `indicatorSide`       |
 | **PricingGroup**                 | Тарифные карточки в ряд          | `items` (`PricingPlan`), `selectable`, `value`       |
 | **PricingTable**                 | Сравнение тарифов (таблица)      | те же `items` + `sections`                           |
-| **Menu**                         | Навигация в шапке (не popover)   | `items` (`value`), `value`, `onSelect`               |
-| **Dropdown**                     | Выпадающее меню (items)          | `label`/`trigger`, `items`/`groups`, `onSelect`      |
+| **Menu**                         | Навигация в шапке (не popover)   | `items` (`value`, `badge`: `0` скрыт), `value`, `onSelect`, `variant` (`plain`/`line`) |
+| **Dropdown**                     | Выпадающее меню (items, portal)  | `label`/`trigger`, `items`/`groups`, `onSelect`      |
+| **Popover**                      | Свой попап в portal              | `trigger`, `children`, `align`, `open`               |
 | **Breadcrumb**                   | Хлебные крошки                   | `items`, `separator`, `collapseAfter`                |
-| **PageShell**                    | Каркас модуля (скролл + footer)  | `wide`, `footer`, `children`                         |
-| **PageHead**                     | Заголовок страницы + actions     | `title`, `subtitle`, `actions`                       |
+| **Sidebar**                      | Левое меню приложения            | `groups`, `value`, `variant` (`cards`/`plain`)       |
+| **PageShell**                    | Каркас модуля (скролл + footer)  | `wide`, `scroll`, `footer`, `children`               |
+| **PageHead**                     | Заголовок страницы + actions     | `title`, `sup` (текст/Badge), `subtitle`, `actions`, `sticky`, `children` |
 | **Section**                      | Блок контента / auth / подраздел | `title`, `description`, `icon`, `actions`, `variant` |
 | **NavSections**                  | Сайдбар + lazy-панель            | `groups` (`value`), `resolveSection`, `defaultValue` |
 | **TabSections**                  | Горизонтальные вкладки + lazy    | `items` (`value` + `badge`), `resolveSection`        |
-| **Card**                         | Карточка                         | `title`, `children`                                  |
-| **List** / **Item**              | Список и строка                  | List: `row`; Item: `as`, `active`                    |
-| **Stack**                        | Ряд / колонка                    | `direction`, `gap`                                   |
+| **Card**                         | Карточка                         | `title`, `--card-pointer`                            |
+| **ActionGroup**                  | Тулбар действий                  | `label`, `items` и/или `children`                    |
+| **TextGroup**                    | Title + description              | `title`, `description`, `size`                       |
+| **ItemColumn**                   | Иконка + столбик в Item          | `icon`, `title`, `extra`, `aside`, `description`, `footer` / `meta`, `unread` |
+| **Stat**                         | Карточка-метрика                 | `label`, `value`, `tone`, `labelMuted`               |
+| **List** / **Item**              | Список и строка                  | List: `row`; Item: `as`, `active`, `variant` (`plain`/`card`) |
+| **Stack**                        | Ряд / колонка / сетка            | `direction`, `columns` (N или `["1fr", "100px"]`), `gap` |
 | **Loading**                      | Плейсхолдер загрузки             | `children`                                           |
 | **EmptyState**                   | Заглушка «нет данных»            | `title`, `description`, `icon`, `actions`            |
 | **createLazyResolver**           | Кэш `import()` секций            | `(key) => import(…)`                                 |
@@ -86,11 +98,45 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 
 `Block` / `Row` / `Column` — deprecated-обёртки над `Stack`. В проектах: `elcrm migrate components`.
 
+### Sidebar
+
+Левое меню приложения. `variant="cards"` — секции-карточки; `variant="plain"` — плоский список (backoffice). Иконки, колокольчик, тема, карточка пользователя — слоты приложения. Роутер не подключаем.
+
+```tsx
+<Sidebar
+  variant="cards"
+  value={page}
+  onSelect={setPage}
+  brand={<Brand as="strong">App</Brand>}
+  extra={<Notifications.Bell />}
+  groups={[
+    { value: "main", items: [{ value: "home", label: "Обзор", icon: <Icon /> }] },
+    { value: "admin", title: "Админ", items: [{ value: "ops", label: "Операции" }] },
+  ]}
+  footer={<AvatarName title="Паша" description="mail@…" />}
+  version="v 0.2.26"
+/>
+```
+
+Токены: `--sidebar-width`, `--sidebar-item-font-size`, `--sidebar-item-padding`, `--sidebar-icon-size`, `--sidebar-group-font-size`, `--sidebar-item-active`. Для orange active в `plain` переопределите `--sidebar-item-active` в теме приложения.
+
 ### Stack
 
 ```tsx
 <Stack gap="0.75rem">{/* колонка */}</Stack>
 <Stack direction="row" gap={8}>{/* ряд */}</Stack>
+<Stack direction="grid" gap={16}>{/* auto-fit, мин. ширина --stack-grid-min */}</Stack>
+<Stack direction="grid" columns={3} gap={12}>{/* stretch; не height:100% у детей */}</Stack>
+```
+
+### Card
+
+Курсор задаёт приложение токеном `--card-pointer` (`auto` по умолчанию):
+
+```tsx
+<Card title="Тенанты" style={{ ["--card-pointer" as string]: "pointer" }}>
+  12
+</Card>
 ```
 
 ### RadioGroup
@@ -255,13 +301,13 @@ const sections = [
 
 | | Роль |
 | --- | --- |
-| **PageShell** | Каркас модуля: скролл в body, опциональный footer снизу |
-| **PageHead** | Строка title (+ subtitle) слева и actions справа |
+| **PageShell** | Каркас модуля: скролл в body (`scroll`, по умолчанию да), опциональный footer снизу |
+| **PageHead** | Строка title (+ `sup` надстрочно, subtitle) слева и actions справа; `sticky` — прилипает к верху скролла |
 | **Section** | Блок контента / auth-карточка / подраздел с title+description |
 
 ```tsx
-<PageShell footer={<button type="button">Сохранить</button>}>
-  <PageHead title="Товары" subtitle="Каталог" actions={<button>Добавить</button>} />
+<PageShell scroll footer={<button type="button">Сохранить</button>}>
+  <PageHead sticky title="Товары" sup={12} subtitle="Каталог" actions={<button>Добавить</button>} />
   <Section title="Фильтры">{/* … */}</Section>
 </PageShell>
 ```
@@ -407,7 +453,7 @@ const people = [
 
 `Menu` — навигация в шапке (inline, не popover).
 
-**Dropdown vs `@elcrm/overlay`:** в пакете `Dropdown` — готовое меню по `items`/`groups` (контент + поведение выбора). `@elcrm/overlay` — portal, позиционирование и z-index стек, когда нужен свой попап или общий слой поверх страницы. Не смешивать: для типового меню пунктов — `Dropdown`; для кастомного портала — overlay.
+**Dropdown vs Popover:** `Dropdown` — пункты `items`/`groups`. `Popover` — свой `children` в portal (тот же z-стек, что у `@elcrm/form`). `@elcrm/overlay` `Menu` — устаревший алиас `Popover`. Select — `@elcrm/form`, не overlay.
 
 ### Breadcrumb
 
@@ -449,6 +495,7 @@ const people = [
 
 ```tsx
 <Layout
+  sidebar={<Sidebar groups={groups} value={page} onSelect={setPage} />}
   header={
     <Header
       brand={<Brand onClick={() => {}}>App</Brand>}
@@ -563,6 +610,7 @@ const resolve = createLazyResolver((value) => import(`./sections/${value}.tsx`))
 --shell-color-warning
 --shell-border          (= --line, только цвет)
 --shell-background      (= --panel)
+--shell-bg              фон страницы (sticky PageHead)
 --shell-background-muted / -hover / -selected
 --shell-shadow
 ```
@@ -576,6 +624,8 @@ const resolve = createLazyResolver((value) => import(`./sections/${value}.tsx`))
 --avatar-size-s|m|l / --avatar-group-overlap
 --dropdown-min-width / --dropdown-max-width / --dropdown-max-height
 --pricing-card-min-width / --pricing-table-label-width
+--card-pointer
+--stack-grid-min
 --row-gap / --column-gap
 --popup-shadow
 ```

package/dist/ActionGroup-ChKFW0mt.js

@@ -0,0 +1,27 @@
+import e from "react";
+import { c as n } from "./cx-CcykAxZN.js";
+import './ActionGroup.css';const s = "c5r", i = {
+  r: s
+};
+function p({
+  label: r,
+  items: o,
+  children: t,
+  className: a,
+  ...c
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: n(i.r, a),
+      role: "toolbar",
+      "aria-label": r,
+      ...c
+    },
+    o,
+    t
+  );
+}
+export {
+  p as A
+};

package/dist/ActionGroup.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c5r{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--action-group-gap, var(--shell-gap-sm));flex:0 0 auto}}

package/dist/ActionGroup.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+/**
+ * Ряд действий в строке списка / карточке (`role="toolbar"`).
+ *
+ * Роли: тулбар иконок справа в Card. Кнопки — `@elcrm/button` / свои слоты,
+ * не нативный `<button>` в приложении.
+ *
+ * @param label подпись для `aria-label`
+ * @param items массив узлов (если нет — только `children`)
+ * @param children слот кнопок; можно вместе с `items` (сначала items)
+ *
+ * @example
+ * ```tsx
+ * <ActionGroup
+ *   label="Действия: Иван"
+ *   items={[
+ *     <Button key="edit" variant="ghost" onClick={edit}>Изменить</Button>,
+ *     <Button key="del" variant="ghost" onClick={remove}>Удалить</Button>,
+ *   ]}
+ * />
+ *
+ * <ActionGroup label="Ещё">
+ *   <Button variant="ghost">Копировать</Button>
+ * </ActionGroup>
+ * ```
+ *
+ * Токены: `--action-group-gap` (иначе `--shell-gap-sm`).
+ */
+export type ActionGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Подпись тулбара (`aria-label`) */
+    label: string;
+    /** Кнопки массивом узлов */
+    items?: React.ReactNode[];
+    /** Свои кнопки / слоты */
+    children?: React.ReactNode;
+};
+/**
+ * Группа действий: `items` и/или `children`.
+ *
+ * @see Card, Stack, Item
+ */
+export declare function ActionGroup({ label, items, children, className, ...rest }: ActionGroupProps): React.JSX.Element;

package/dist/ActionGroup.js

@@ -0,0 +1,4 @@
+import { A as p } from "./ActionGroup-ChKFW0mt.js";
+export {
+  p as ActionGroup
+};

package/dist/Avatar-loGgFt72.js

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

package/dist/Avatar.css

@@ -1 +1 @@
-@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}.cabo{background:var(--shell-color-success)}.cabf{background:var(--shell-color-muted)}}
+@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

@@ -30,11 +30,18 @@ type Common = {
     status?: AvatarStatus;
     /** Подсветка (например активный пункт шапки). */
     active?: boolean;
+    /**
+     * Скругление. Число — пиксели (`10` → `10px`), строка — любой CSS.
+     * Пишет `--avatar-radius` на корне (дефолт токена — круг, `999px`).
+     */
+    radius?: number | string;
     /** Кастомное содержимое вместо инициалов (если нет `src`). */
     children?: React.ReactNode;
     /** CSS-класс корня. */
     className?: string;
 };
+/** Стиль `--avatar-radius` из пропа `radius`. */
+export declare function avatarRadiusStyle(radius?: number | string): React.CSSProperties | undefined;
 /**
  * Props {@link Avatar}: корень как `button` | `span` | `div`.
  *
@@ -59,7 +66,8 @@ export type AvatarProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement
  *   (`name` у Avatar остаётся только для инициалов);
  * - {@link AvatarGroup} — стопка аватаров из `items`.
  *
- * CSS-токены: `--avatar-*` (в т.ч. `--avatar-size-s|m|l`).
+ * CSS-токены: `--avatar-*` (в т.ч. `--avatar-size-s|m|l`, `--avatar-radius`).
+ * Скругление: `radius={10}` или `style={{ ["--avatar-radius"]: "10px" }}`.
  *
  * @example
  * ```tsx

package/dist/Avatar.js

@@ -1,5 +1,6 @@
-import { A as r, i as m } from "./Avatar-Jzan87XD.js";
+import { A as r, a as s, i as t } from "./Avatar-loGgFt72.js";
 export {
   r as Avatar,
-  m as initialsFromName
+  s as avatarRadiusStyle,
+  t as initialsFromName
 };

package/dist/{AvatarGroup-DUe7-T3B.js → AvatarGroup-D1gnT3Od.js}

@@ -1,5 +1,5 @@
 import n from "react";
-import { A as f } from "./Avatar-Jzan87XD.js";
+import { A as f } from "./Avatar-loGgFt72.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,

package/dist/AvatarGroup.js

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

package/dist/AvatarName-C1sIDPH-.js

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

package/dist/AvatarName.css

@@ -1 +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)}}
+@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(--avatar-name-title-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(--avatar-name-description-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

@@ -20,6 +20,8 @@ type Common = {
     description?: React.ReactNode;
     /** Размер: `s` | `m` | `l`. */
     size?: "s" | "m" | "l";
+    /** Скругление аватара (`10` → `10px`). Токен `--avatar-radius`. */
+    radius?: number | string;
     /** Статус у аватара. */
     status?: AvatarStatus;
     /** CSS-класс корня. */
@@ -50,7 +52,8 @@ export type AvatarNameProps = (Common & React.ButtonHTMLAttributes<HTMLButtonEle
  *
  * Канон: `title` / `description` для UI-текста; `name` — только инициалы.
  *
- * CSS-токены: `--shell-*` (типографика строки), аватар — `--avatar-*`.
+ * CSS-токены: `--avatar-name-title-color`, `--avatar-name-description-color`,
+ * аватар — `--avatar-*`.
  *
  * @example
  * ```tsx

package/dist/AvatarName.js

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

package/dist/Badge-jp-9iNNL.js

@@ -0,0 +1,28 @@
+import t from "react";
+import { c as j } from "./cx-CcykAxZN.js";
+import './Badge.css';const u = "cjr", i = "cjs", p = "cjm", w = "cjl", f = "cjn", g = "cja", N = "cju", h = "cjw", x = "cjd", z = "cjo", s = {
+  r: u,
+  s: i,
+  m: p,
+  l: w,
+  n: f,
+  a: g,
+  u: N,
+  w: h,
+  d: x,
+  o: z
+};
+function E(e) {
+  const {
+    tone: c = "neutral",
+    size: n = "m",
+    dot: o,
+    children: a,
+    className: r,
+    ...l
+  } = e, m = c === "accent" ? s.a : c === "success" ? s.u : c === "warning" ? s.w : c === "danger" ? s.d : s.n, d = n === "s" ? s.s : n === "l" ? s.l : s.m;
+  return /* @__PURE__ */ t.createElement("span", { className: j(s.r, d, m, r), ...l }, o ? /* @__PURE__ */ t.createElement("span", { className: s.o, "aria-hidden": !0 }) : null, a);
+}
+export {
+  E as B
+};

package/dist/Badge.css

@@ -1 +1 @@
-@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)}}
+@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:600;line-height:1;white-space:nowrap}.cjs{padding:2px var(--shell-gap-sm);font-size:var(--shell-font-size-sm);letter-spacing:.04em}.cjm{padding:.2rem .5rem;font-size:var(--shell-font-size-sm)}.cjl{padding:.3rem .65rem;font-size:var(--shell-font-size)}.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)}.cjo{flex-shrink:0;width:.45em;height:.45em;border-radius:50%;background:currentColor}}

package/dist/Badge.d.ts

@@ -1,26 +1,41 @@
 import { default as React } from 'react';
+/** Тон метки — те же смыслы, что у Stat */
+export type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";
+/** Размер метки */
+export type BadgeSize = "s" | "m" | "l";
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * Цвет по смыслу.
+     * `neutral` | `accent` | `success` | `warning` | `danger`
+     */
+    tone?: BadgeTone;
+    /**
+     * Размер пилюли.
+     * `s` — в строке списка; `m` — обычная; `l` — крупнее.
+     * По умолчанию `m`.
+     */
+    size?: BadgeSize;
+    /** Точка статуса слева (цвет = `tone`) */
+    dot?: boolean;
+    /** Текст метки */
+    children?: React.ReactNode;
+};
 /**
- * Компактная метка / статус (тон по смыслу).
+ * Компактная метка / статус (роль, состояние). Не заменяет Button.
  *
- * Роли: Badge рядом с Item, в Card, в PageHead; не заменяет Button.
+ * Props (`BadgeProps`):
+ * - `tone` — `neutral` | `accent` | `success` | `warning` | `danger`
+ * - `size` — `s` | `m` | `l` (по умолчанию `m`)
+ * - `dot` — точка слева (как online / offline)
+ * - `children` — текст метки
+ * - плюс атрибуты `span` (`className`, `style`, …)
  *
  * @example
  * ```tsx
- * <Badge tone="success">Активен</Badge>
- * <Badge tone="danger">Просрочен</Badge>
+ * <Badge tone="accent" size="s">ADMIN</Badge>
+ * <Badge tone="success" size="s" dot>online</Badge>
  * ```
  *
- * Токены: `--shell-*` (tone через color-mix от `--shell-color-*`).
- */
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-    /** Визуальный тон */
-    tone?: "neutral" | "accent" | "success" | "warning" | "danger";
-    /** Текст или содержимое метки */
-    children?: React.ReactNode;
-};
-/**
- * Компактная метка / статус.
- *
- * @see Item, Card, Avatar
+ * @see Item, Card, Stat
  */
-export declare function Badge({ tone, children, className, ...rest }: BadgeProps): React.JSX.Element;
+export declare function Badge(props: BadgeProps): React.JSX.Element;

package/dist/Badge.js

@@ -1,4 +1,4 @@
-import { B as o } from "./Badge-l6nUkl-H.js";
+import { B as o } from "./Badge-jp-9iNNL.js";
 export {
   o as Badge
 };

package/dist/{Block-BAXh0PPp.js → Block-Bu7NEA0g.js}

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

package/dist/Block.js

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