@elcrm/components 0.2.13 → 0.5.1

package/README.md

@@ -2,7 +2,9 @@
 
 Shell UI для elCRM: `Layout`, `Header`, `Section`, `Stack`, `NavSections`, `TabSections` и др.
 
-Стили — CSS Modules с короткими уникальными классами; значения токенов задаёт приложение (`theme-dark.css` / `theme-light.css`). Fallback в пакете нет.
+Стили — CSS Modules. В DOM className всегда **3 буквы** `{семья}{компонент}{первая буква локального}` (короткий код вроде c8s, только a–z): List `.root` → `llr`, Layout `.root` → `slr`, Sidebar `.root` → `nsr`. В исходнике — слова (`.root`, `.icon`). Семьи: `l` lists, `n` nav, `s` shell, `k` kit, `t` type, `a` avatar, `o` overlay, `g` pricing, `h` healthmap, `d` data. Значения токенов задаёт приложение (`theme-dark.css` / `theme-light.css`). Fallback в пакете нет.
+
+**Локаль:** дефолтные подписи UI — на русском (`navLabel`, `label`, `copyLabel`, `aria-label` и т.п. можно переопределить). Пакет не тянет i18n-runtime.
 
 ## Визуальный стенд
 
@@ -33,6 +35,7 @@ import {
   ActionGroup,
   Toolbar,
   TextGroup,
+  Text,
   Stat,
   Stack,
   Menu,
@@ -63,13 +66,18 @@ import {
   ChatSplit,
   Sidebar,
   Popover,
+  Healthmap,
+  PanelInfo,
   createLazyResolver,
+  acquireOverlayZIndex,
 } from "@elcrm/components";
-import type { PricingPlan } from "@elcrm/components";
+import type { PricingPlan, HealthmapData, NavTreeItem } from "@elcrm/components";
 // CSS подтягивается с чанками; при необходимости единый файл:
 // import "@elcrm/components/style.css";
 ```
 
+Слоты `Header` заполняет приложение: поиск — `@elcrm/form` (`Search`), кнопки — `@elcrm/button`.
+
 Точечный импорт:
 
 ```ts
@@ -88,44 +96,65 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 | **Brand**              | Название / логотип               | `as`, `children`, `onClick`                                                            |
 | **Avatar**             | Фото или инициалы                | `src`, `name`, `size`, `radius`, `status`, `as`                                        |
 | **AvatarName**         | Аватар + title + description     | `title`, `description`, `radius`, `--avatar-name-*-color`                              |
-| **AvatarGroup**        | Стопка аватаров + «+N»           | `items` (`value`/`title`/`name`), `max`, `add`                                         |
+| **AvatarGroup**        | Стопка аватаров + «+N»           | `items` (`value` обязателен), `max`, `add`, `onValueChange`                            |
 | **Badge**              | Метка / статус                   | `tone`, `size`, `dot`, `children`                                                      |
-| **RadioGroup**         | Выбор одной опции-карточки       | `items`, `value`, `indicator`, `indicatorSide`                                         |
-| **PricingGroup**       | Тарифные карточки в ряд          | `items` (`PricingPlan`), `selectable`, `value`                                         |
+| **RadioGroup**         | Выбор одной опции-карточки       | `items`, `value`, `onValueChange`, `indicator`, `indicatorSide`                        |
+| **PricingGroup**       | Тарифные карточки в ряд          | `items` (`PricingPlan`), `selectable`, `value`, `onValueChange`                        |
 | **PricingTable**       | Сравнение тарифов (таблица)      | те же `items` + `sections`                                                             |
-| **Table**              | Таблица данных со скроллом         | `layout` (`auto`/`fixed`), стандартные props `<table>`                                 |
+| **Table**              | Таблица данных со скроллом         | `layout`, `stickyHeader`, `<caption>`                                                  |
 | **CodeBlock**          | Блок кода с bar и копированием     | `title`, `code` / `children`, `onCopy`, `actions`                                      |
-| **SplitPane**          | Две панели с разделителем          | `direction`, `ratio`, `onRatioChange`, `first`, `second`, `minFirst` / `minSecond`    |
+| **SplitPane**          | Две панели с разделителем          | `direction`, `ratio` / `defaultRatio`, `onRatioChange`, `first`, `second`              |
 | **Banner**             | Статусная полоса                   | `tone` (`info`/`warning`/`danger`/`success`), не toast                               |
 | **IconButton**         | Иконка + tooltip                   | `name`, обязательный `label`, `tooltip` (`false` — без подсказки)                      |
-| **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`                                                  |
-| **Sidebar**            | Левое меню приложения            | `groups`, `value`, `item.items` + `defaultOpen`, `open` / `onOpenChange`, `footerItems` |
+| **Menu**               | Навигация в шапке (не popover)   | `items`, `value` / `defaultValue`, `onValueChange`, `variant` (`plain`/`line`)         |
+| **Dropdown**           | Выпадающее меню (items, portal)  | `label`/`trigger`, `items`/`groups`, `onValueChange`                                   |
+| **Popover**            | Свой попап в portal              | `trigger` (render-prop `anchorProps` или узел), `children`, `align`, `open`            |
+| **Breadcrumb**         | Хлебные крошки                   | `items`, `separator`, `collapseAfter`, `onValueChange`                                 |
+| **Sidebar**            | Левое меню приложения            | `groups`, `value` / `defaultValue`, `onValueChange`, `footerItems` + `onFooterValueChange` |
 | **PageShell**          | Каркас модуля (скролл + footer)  | `wide`, `scroll`, `footer`, `children`                                                 |
 | **ChatList**           | Колонка диалогов                 | `header`, `footer`, `children` (`List`/`Item`), `bodyRef`                              |
 | **ChatMessages**       | Колонка переписки                | `header`, `footer`, `children`, `bodyRef`, `onBodyScroll`                              |
 | **ChatSplit**          | Список + лента                   | `list`, `messages`                                                                     |
 | **PageHead**           | Заголовок страницы + actions     | `title`, `sup` (текст/Badge), `subtitle`, `actions`, `sticky`, `children`              |
-| **Section**            | Блок контента / auth / подраздел | `title`, `description`, `icon`, `actions`, `variant`                                   |
-| **NavSections**        | Сайдбар + lazy-панель            | `groups`, `item.items` + `defaultOpen`, `open` / `onOpenChange`, `resolveSection`      |
-| **TabSections**        | Горизонтальные вкладки + lazy    | `items` (`value` + `badge`), `resolveSection`                                          |
+| **Section**            | Блок контента / auth / подраздел | `title`, `description`, `icon`, `actions`, `variant`, `direction`/`gap`/`columns` (тело = Stack) |
+| **NavSections**        | Сайдбар + lazy-панель            | `groups` (`value`), `resolveSection?`, `children` (готовая панель)                     |
+| **TabSections**        | Горизонтальные вкладки + lazy    | `items`, `resolveSection?`, `children`                                                 |
 | **Card**               | Карточка                         | `title`, `--card-pointer`                                                              |
-| **ActionGroup**        | Ряд иконок в карточке            | `label`, `items` и/или `children`                                                      |
-| **Toolbar**            | Фильтры одной высоты             | `size`, `width` (`l` = 100%, `s` = по контенту), `align`, `label`, `children`          |
+| **ActionGroup**        | Ряд иконок в карточке            | `label`, `actions` и/или `children` (не декларативные `items`)                         |
+| **Toolbar**            | Фильтры одной высоты             | `size` → `useToolbar` + `data-size`, `width`, `align`, `label`, `children`             |
 | **TextGroup**          | Title + description              | `title`, `description`, `size`                                                         |
+| **Text**               | Короткий текст                   | `tone` (`default`/`muted`), `as`                                                       |
 | **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`)                          |
+| **List** / **Item**    | Список и строка                  | List: `row`; Item: по умолчанию `li`, кликабельный — `as="button"`                     |
 | **Stack**              | Ряд / колонка / сетка            | `direction`, `columns` (N или `["1fr", "100px"]`), `gap`                               |
-| **Loading**            | Плейсхолдер загрузки             | `children`                                                                             |
-| **EmptyState**         | Заглушка «нет данных»            | `title`, `description`, `icon`, `actions`                                              |
-| **createLazyResolver** | Кэш `import()` секций            | `(key) => import(…)`                                                                   |
-
-Слоты `Header` заполняет приложение: поиск — `@elcrm/search`, кнопки — `@elcrm/button`, и т.д.
-
-`Block` / `Row` / `Column` — deprecated-обёртки над `Stack`. В проектах: `elcrm migrate components`.
+| **Loading**            | Плейсхолдер загрузки             | `children`; `--loading-min-height`                                                     |
+| **EmptyState**         | Пустой / ошибка                  | `title`, `description`, `icon`, `actions`; `--empty-*`                                 |
+| **PanelInfo**          | Выезд справа                     | `open` / `defaultOpen`, `onOpenChange`                                                 |
+| **createLazyResolver** | Кэш `import()` секций            | `(key) => import(…)`; `.clear(segment?)` при ошибке / retry                            |
+
+Раскладка — только `Stack` (или `Section` с `direction`/`gap`/`columns`). `Block` / `Row` / `Column` **удалены** из пакета; в проектах: `elcrm migrate components`.
+
+### Кто когда (роли)
+
+Не сливаем компоненты — выбирай по слою:
+
+| Слой | Компоненты | Не путать с |
+| --- | --- | --- |
+| Оболочка app | `Layout` (+ Header / Footer / Sidebar) | PageShell |
+| Каркас модуля | `PageShell` | Section |
+| Шапка страницы | `PageHead` | Section title |
+| Блок контента | `Section` (`direction` / `gap` / `columns` как у Stack) | PageHead |
+| Нав app | `Sidebar` | NavSections (страница + lazy-панель) |
+| Вкладки | `Menu variant="line"` = только табы; `TabSections` = табы + lazy-панель | |
+| Две колонки | `SplitPane` = resize; `ChatSplit` = чат list+messages без resize | |
+| Чат | `ChatList` / `ChatMessages` / `ChatSplit`; `ChatFrame` — deep `@elcrm/components/ChatFrame` | |
+| Таблица | `Table` (`stickyHeader`) | PricingTable |
+| Выбор планов | `PricingGroup` / `PricingTable`; `RadioGroup variant="split"` — общий radio-UI | |
+| Toolbar | `Toolbar` = фильтры одной высоты; `ActionGroup` = иконки в карточке | |
+| Текст | `Text` / `TextGroup` / `AvatarName` (+аватар) | |
+| Статус | `Badge` метка; `Banner` полоса; `EmptyState` пустой экран | |
+| Раскладка | `Stack` | Block / Row / Column |
 
 ### Sidebar
 
@@ -135,8 +164,8 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 <Sidebar
   variant="cards"
   value={page}
-  onSelect={setPage}
-  brand={<Brand as="strong">App</Brand>}
+  onValueChange={setPage}
+  brand={<Brand>App</Brand>}
   extra={<Notifications.Bell />}
   groups={[
     {
@@ -165,7 +194,7 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
     { value: "theme", label: "Тема", submenu: true },
     { value: "logout", label: "Выйти", danger: true },
   ]}
-  onFooterSelect={(value) => console.log(value)}
+  onFooterValueChange={(value) => console.log(value)}
   version="v 0.2.26"
 />
 ```
@@ -357,18 +386,24 @@ const sections = [
 | ------------- | -------------------------------------------------------------------------------------------------------- |
 | **PageShell** | Каркас модуля: скролл в body (`scroll`, по умолчанию да), опциональный footer снизу                      |
 | **PageHead**  | Строка title (+ `sup` надстрочно, subtitle) слева и actions справа; `sticky` — прилипает к верху скролла |
-| **Section**   | Блок контента / auth-карточка / подраздел с title+description                                            |
+| **Section**   | Блок контента / auth / подраздел. Корень по умолчанию `<section>` (не `<main>` — его даёт Layout). Тело: `direction` / `gap` / `columns` как у Stack |
 
 ```tsx
-<PageShell scroll footer={<button type="button">Сохранить</button>}>
+<PageShell scroll footer={<Button>Сохранить</Button>}>
   <PageHead
     sticky
     title="Товары"
     sup={12}
     subtitle="Каталог"
-    actions={<button>Добавить</button>}
+    actions={<Button>Добавить</Button>}
   />
-  <Section title="Фильтры">{/* … */}</Section>
+  <Section title="Фильтры" direction="row" gap={12}>
+    <SearchField name="q" />
+    <Button>Найти</Button>
+  </Section>
+  <Section title="Метрики" direction="grid" columns={3} gap={16}>
+    <Stat label="Всего" value={10} />
+  </Section>
 </PageShell>
 ```
 
@@ -431,11 +466,11 @@ const people = [
   max={5}
   add
   onAdd={() => {}}
-  onItemClick={(item) => console.log(item)}
+  onValueChange={(value) => console.log(value)}
 />
 ```
 
-`max` — сколько показать; остаток → «+N». `add` — кнопка «+» справа.
+`max` — сколько показать; остаток → «+N». `add` — кнопка «+» справа. У каждого пункта обязателен `value`.
 
 ### Avatar / AvatarName
 
@@ -491,7 +526,7 @@ const people = [
       items: [{ value: "details", label: "View details", submenu: true }],
     },
   ]}
-  onSelect={(value) => console.log(value)}
+  onValueChange={(value) => console.log(value)}
 />;
 
 {
@@ -566,13 +601,13 @@ const people = [
     },
     { value: "brand", label: "Бренд", checkbox: true, checked: false },
   ]}
-  onSelect={(value) => toggleColumn(value)}
+  onValueChange={(value) => toggleColumn(value)}
 />;
 ```
 
 `Menu` — навигация в шапке (inline, не popover).
 
-**Dropdown vs Popover:** `Dropdown` — пункты `items`/`groups`. `Popover` — свой `children` в portal (тот же z-стек, что у `@elcrm/form`). `@elcrm/overlay` `Menu` — устаревший алиас `Popover`. Select — `@elcrm/form`, не overlay.
+**Dropdown vs Popover:** `Dropdown` — пункты `items`/`groups`. `Popover` — свой `children` в portal; канон `trigger={(api) => <button {...api.anchorProps}>…</button>}` (без cloneElement). `@elcrm/overlay` `Menu` — устаревший алиас `Popover`. Select — `@elcrm/form`, не overlay.
 
 ### Breadcrumb
 
@@ -619,7 +654,7 @@ const people = [
 ```tsx
 <Layout
   fixed={["header", "footer", "sidebar"]}
-  sidebar={<Sidebar groups={groups} value={page} onSelect={setPage} />}
+  sidebar={<Sidebar groups={groups} value={page} onValueChange={setPage} />}
   header={
     <Header
       brand={<Brand onClick={() => {}}>App</Brand>}
@@ -673,6 +708,7 @@ const resolve = createLazyResolver(
   resolveSection={resolve}
   groups={[
     {
+      value: "personal",
       label: "Личное",
       items: [
         { value: "Profile", label: "Профиль" },
@@ -774,6 +810,8 @@ const resolve = createLazyResolver(
 --code-block-bg / --code-block-padding / --code-block-font-size
 --split-handle-size / --split-handle-bg / --split-handle-bg-hover
 --banner-padding / --banner-bg / --banner-border
+--loading-min-height
+--empty-max-width / --empty-padding
 --panel-info-width / --panel-info-width-min / --panel-info-overlay-max / --panel-info-backdrop
 --row-gap / --column-gap
 --popup-shadow

package/dist/ActionGroup-DcApj_Mz.js

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

package/dist/ActionGroup.css

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

package/dist/ActionGroup.d.ts

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

package/dist/ActionGroup.js

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

package/dist/Avatar-eGdLrMCv.js

@@ -0,0 +1,113 @@
+import a from "react";
+import { c as p } from "./cx-CcykAxZN.js";
+import './Avatar.css';const x = "aar", h = "aav", A = "aas", C = "aam", S = "aal", z = "aaa", B = "aai", F = "aab", R = "aao", U = "aaf", e = {
+  root: x,
+  vtext: h,
+  small: A,
+  middle: C,
+  large: S,
+  active: z,
+  img: B,
+  bead: F,
+  online: R,
+  foff: U
+};
+function D(t) {
+  const n = t.trim();
+  if (!n) return "?";
+  const l = n.split(/\s+/).filter(Boolean);
+  return l.length >= 2 ? (l[0][0] + l[1][0]).toUpperCase() : n.slice(0, 2).toUpperCase();
+}
+function $(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.bead, t === "online" ? e.online : e.foff),
+      "data-status": t,
+      "aria-hidden": !0
+    }
+  );
+}
+function k({
+  src: t,
+  label: n,
+  children: l,
+  name: r,
+  status: i
+}) {
+  const s = t != null && t !== "" ? /* @__PURE__ */ a.createElement("img", { className: e.img, src: t, alt: n ?? "", draggable: !1 }) : l ?? (r != null ? D(r) : "?");
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("span", { className: e.vtext }, s), i != null ? /* @__PURE__ */ a.createElement(j, { status: i }) : null);
+}
+function G(t) {
+  const {
+    src: n,
+    alt: l,
+    name: r,
+    size: i = "m",
+    status: s,
+    active: c,
+    children: b,
+    className: g,
+    radius: y,
+    as: v = "span",
+    style: E,
+    ...m
+  } = t, N = i === "s" ? e.small : i === "l" ? e.large : e.middle, u = p(e.root, N, c && e.active, g), o = l ?? r, d = { ...$(y), ...E }, f = /* @__PURE__ */ a.createElement(
+    k,
+    {
+      src: n,
+      label: o,
+      name: r,
+      status: s,
+      children: b
+    }
+  );
+  return v === "button" ? /* @__PURE__ */ a.createElement(
+    "button",
+    {
+      type: "button",
+      className: u,
+      "aria-label": o,
+      "data-active": c ? "true" : void 0,
+      "data-status": s,
+      style: d,
+      ...m
+    },
+    f
+  ) : v === "div" ? /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      className: u,
+      role: o ? "img" : void 0,
+      "aria-label": o,
+      "data-active": c ? "true" : void 0,
+      "data-status": s,
+      style: d,
+      ...m
+    },
+    f
+  ) : /* @__PURE__ */ a.createElement(
+    "span",
+    {
+      className: u,
+      role: o ? "img" : void 0,
+      "aria-label": o,
+      "data-active": c ? "true" : void 0,
+      "data-status": s,
+      style: d,
+      ...m
+    },
+    f
+  );
+}
+export {
+  G as A,
+  $ as a,
+  D 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}.cao{background:var(--shell-color-success)}.caf{background:var(--shell-color-muted)}}
+@layer elcrm-components{.aar{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}.aar:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;font:inherit;cursor:pointer;background:transparent;border:none}.aav{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}.aas{width:var(--avatar-size-s);height:var(--avatar-size-s);font-size:var(--avatar-font-size-s)}.aas .aav{font-size:inherit}.aam{width:var(--avatar-size-m);height:var(--avatar-size-m);font-size:var(--avatar-font-size-m)}.aam .aav{font-size:inherit}.aal{width:var(--avatar-size-l);height:var(--avatar-size-l);font-size:var(--avatar-font-size-l)}.aal .aav{font-size:inherit}.aaa .aav,.aar[data-active=true] .aav{outline:var(--avatar-outline-active);outline-offset:var(--avatar-outline-offset)}.aai{width:100%;height:100%;object-fit:cover;display:block}.aab{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}.aas .aab{width:8px;height:8px}.aam .aab{width:var(--shell-status-size);height:var(--shell-status-size)}.aal .aab{width:12px;height:12px}.aao{background:var(--shell-color-success)}.aaf{background:var(--shell-color-muted)}}

package/dist/Avatar.d.ts

@@ -48,10 +48,10 @@ export declare function avatarRadiusStyle(radius?: number | string): React.CSSPr
  *
  * По умолчанию `as="span"`. Для кликабельного аватара — `as="button"`.
  */
-export type AvatarProps = (Common & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    as?: "button";
-}) | (Common & React.HTMLAttributes<HTMLSpanElement> & {
-    as: "span";
+export type AvatarProps = (Common & React.HTMLAttributes<HTMLSpanElement> & {
+    as?: "span";
+}) | (Common & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as: "button";
 }) | (Common & React.HTMLAttributes<HTMLDivElement> & {
     as: "div";
 });

package/dist/Avatar.js

@@ -1,4 +1,4 @@
-import { A as r, a as s, i as t } from "./Avatar-loGgFt72.js";
+import { A as r, a as s, i as t } from "./Avatar-eGdLrMCv.js";
 export {
   r as Avatar,
   s as avatarRadiusStyle,

package/dist/AvatarGroup-Dq-UrOaC.js

@@ -0,0 +1,81 @@
+import e from "react";
+import { A as f } from "./Avatar-eGdLrMCv.js";
+import { c } from "./cx-CcykAxZN.js";
+import './AvatarGroup.css';const C = "lar", I = "lai", P = "lao", x = "lad", G = "las", M = "lam", R = "lal", t = {
+  root: C,
+  item: I,
+  overflow: P,
+  dadd: x,
+  small: G,
+  middle: M,
+  large: R
+};
+function $(a) {
+  if (a.name != null && a.name !== "") return a.name;
+  if (a.title != null && a.title !== "") return a.title;
+}
+function B({
+  items: a,
+  max: s,
+  size: n = "m",
+  add: v = !1,
+  addLabel: b = "Добавить",
+  onAdd: r,
+  onValueChange: u,
+  className: g,
+  "aria-label": E = "Аватары",
+  ...h
+}) {
+  const i = n === "s" ? t.small : n === "l" ? t.large : t.middle, k = s != null && s >= 0 ? Math.min(s, a.length) : a.length, m = a.slice(0, k), o = a.length - m.length;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: c(t.root, g),
+      role: "group",
+      "aria-label": E,
+      ...h
+    },
+    m.map((l, N) => {
+      const p = $(l), d = l.alt ?? l.title ?? l.name, w = u != null;
+      return /* @__PURE__ */ e.createElement("span", { key: l.value, className: t.item, style: { zIndex: N + 1 } }, w ? /* @__PURE__ */ e.createElement(
+        f,
+        {
+          as: "button",
+          src: l.src,
+          name: p,
+          alt: d,
+          size: n,
+          status: l.status,
+          onClick: (y) => {
+            y.stopPropagation(), u(l.value);
+          }
+        }
+      ) : /* @__PURE__ */ e.createElement(
+        f,
+        {
+          src: l.src,
+          name: p,
+          alt: d,
+          size: n,
+          status: l.status
+        }
+      ));
+    }),
+    o > 0 ? /* @__PURE__ */ e.createElement("span", { className: c(t.overflow, i), "aria-label": `Ещё ${o}` }, "+", o) : null,
+    v ? /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        className: c(t.dadd, i),
+        "aria-label": b,
+        onClick: (l) => {
+          l.stopPropagation(), r == null || r();
+        }
+      },
+      "+"
+    ) : null
+  );
+}
+export {
+  B as A
+};

package/dist/AvatarGroup.css

@@ -1 +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)}}
+@layer elcrm-components{.lar{display:inline-flex;align-items:center;vertical-align:middle}.lai{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)}.lai:first-child{margin-left:0}.lao,.lad{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}.lao{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)}.lad{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)}.lad:hover{background:var(--shell-background-hover)}.las{width:var(--avatar-size-s);height:var(--avatar-size-s);font-size:var(--avatar-font-size-s)}.lam{width:var(--avatar-size-m);height:var(--avatar-size-m);font-size:var(--avatar-font-size-m)}.lal{width:var(--avatar-size-l);height:var(--avatar-size-l);font-size:var(--avatar-font-size-l)}}

package/dist/AvatarGroup.d.ts

@@ -3,12 +3,12 @@ import { UiSize } from './types';
 /**
  * Элемент стопки {@link AvatarGroup}.
  *
- * Предпочтительный идентификатор — `value` (как у остальных group-UI).
- * `name` — только для инициалов; видимую подпись в списках даёт {@link AvatarName}.
+ * Идентификатор — `value` (как у остальных group-UI).
+ * `name` — только для инициалов; видимую подпись — {@link AvatarName}.
  */
 export type AvatarGroupItem = {
-    /** Уникальный id (предпочтительно; не React `key`). */
-    value?: string;
+    /** Уникальный id (не React `key`). */
+    value: string;
     /** URL фото. */
     src?: string;
     /** Только для инициалов (если нет `src`). */
@@ -38,41 +38,21 @@ export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
     addLabel?: string;
     /** Клик по кнопке добавления. */
     onAdd?: () => void;
-    /** Клик по аватару. */
-    onItemClick?: (item: AvatarGroupItem, index: number) => void;
+    /** Клик по аватару (`item.value`). */
+    onValueChange?: (value: string) => 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)}
+ *   onValueChange={(value) => openProfile(value)}
  * />
  * ```
  */
-export declare function AvatarGroup({ items, max, size, add, addLabel, onAdd, onItemClick, className, "aria-label": ariaLabel, ...rest }: AvatarGroupProps): React.JSX.Element;
+export declare function AvatarGroup({ items, max, size, add, addLabel, onAdd, onValueChange, className, "aria-label": ariaLabel, ...rest }: AvatarGroupProps): React.JSX.Element;