@elcrm/components 0.1.1 → 0.2.0

package/README.md

@@ -4,6 +4,17 @@ Shell UI для elCRM: `Layout`, `Header`, `Section`, `Stack`, `NavSections`, `T
 
 Стили — CSS Modules с короткими уникальными классами; значения токенов задаёт приложение (`theme-dark.css` / `theme-light.css`). Fallback в пакете нет.
 
+## Визуальный стенд
+
+Как у `@elcrm/form` — страница с галереей компонентов (`@elcrm/storybook`):
+
+```bash
+bun i
+bun run dev
+```
+
+Откроется `http://localhost:3001`. В сайдбаре стенда: `section` (компонент / `all`), `size`, тон Badge, вариант Menu.
+
 ## Установка
 
 ```bash
@@ -17,7 +28,11 @@ import {
   Footer,
   List,
   Item,
+  ItemColumn,
   Card,
+  ActionGroup,
+  TextGroup,
+  Stat,
   Stack,
   Menu,
   Loading,
@@ -37,6 +52,11 @@ import {
   Breadcrumb,
   PageHead,
   PageShell,
+  ChatList,
+  ChatMessages,
+  ChatSplit,
+  Sidebar,
+  Popover,
   createLazyResolver,
 } from "@elcrm/components";
 import type { PricingPlan } from "@elcrm/components";
@@ -56,28 +76,37 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 
 |                                  | Назначение                       | Ключевые props                                       |
 | -------------------------------- | -------------------------------- | ---------------------------------------------------- |
-| **Layout**                       | Оболочка страницы                | `header`, `footer`, `children`                       |
+| **Layout**                       | Оболочка страницы                | `sidebar`, `header`, `footer`, `fixed`, `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`, `footer` + `footerItems`, `variant` |
+| **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` (`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 +115,51 @@ 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@…" />}
+  footerItems={[
+    { value: "docs", label: "Документация", icon: <Icon /> },
+    { value: "theme", label: "Тема", submenu: true },
+    { value: "logout", label: "Выйти", danger: true },
+  ]}
+  onFooterSelect={(value) => console.log(value)}
+  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,17 +324,53 @@ 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>
 ```
 
+### ChatList / ChatMessages / ChatSplit
+
+Каркас мессенджера, не пузыри и не композер. Строки диалогов — `List` + `Item` (+ `ItemColumn` / `Avatar`). Поиск и ввод — слоты `header` / `footer` приложения.
+
+| | Роль |
+| --- | --- |
+| **ChatList** | Колонка диалогов: `header` (поиск), `children` (список), `footer` |
+| **ChatMessages** | Колонка переписки: `header` (собеседник), `children` (лента), `footer` (ввод) |
+| **ChatSplit** | Ряд `list` + `messages` (`--chat-split-gap`) |
+
+Токены: `--chat-list-width`, `--chat-split-gap`, `--chat-radius`, `--chat-background`, `--chat-border` (рамка и разделители header/footer), `--chat-header-padding` / `--chat-body-padding` / `--chat-footer-padding`, узкие `--chat-messages-*-padding`. Узкие `--chat-*` по умолчанию = `--shell-*`.
+
+```tsx
+<ChatSplit
+  list={
+    <ChatList header={<SearchField name="q" placeholder="Найти" />}>
+      <List>
+        <li>
+          <Item as="button" active>
+            <ItemColumn icon={<Avatar name="Иван" />} title="Иван" description="Привет" />
+          </Item>
+        </li>
+      </List>
+    </ChatList>
+  }
+  messages={
+    <ChatMessages
+      header={<AvatarName title="Иван" description="в сети" />}
+      footer={<TextareaField name="body" placeholder="Сообщение" />}
+    >
+      {bubbles}
+    </ChatMessages>
+  }
+/>
+```
+
 ### AvatarGroup
 
 Стопка аватаров через `items`:
@@ -407,7 +512,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 +554,8 @@ const people = [
 
 ```tsx
 <Layout
+  fixed={["header", "footer", "sidebar"]}
+  sidebar={<Sidebar groups={groups} value={page} onSelect={setPage} />}
   header={
     <Header
       brand={<Brand onClick={() => {}}>App</Brand>}
@@ -473,6 +580,10 @@ const people = [
   </Section>
 </Layout>;
 
+{/* `fixed` по умолчанию = header + footer + sidebar. Скролл только у children.
+    Высота каркаса: `--layout-height` (100dvh). Вложенно: 100% + явная высота родителя.
+    `fixed={[]}` — обычный поток страницы. */}
+
 {
   /* Экран входа */
 }
@@ -563,6 +674,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 +688,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);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.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { UiSize } from './types';
 /**
  * Инициалы из имени: «Иван Петров» → «ИП», «admin» → «AD».
  *
@@ -25,16 +26,23 @@ type Common = {
      */
     name?: string;
     /** Размер: `s` | `m` | `l`. */
-    size?: "s" | "m" | "l";
+    size?: UiSize;
     /** Точка статуса (online / offline). */
     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 +67,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-CyNXYvsa.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-BAWas4pU.js → AvatarGroup-D1gnT3Od.js}

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { UiSize } from './types';
 /**
  * Элемент стопки {@link AvatarGroup}.
  *
@@ -30,7 +31,7 @@ export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Сколько аватаров показать до «+N». По умолчанию все. */
     max?: number;
     /** Размер аватаров: `s` | `m` | `l`. */
-    size?: "s" | "m" | "l";
+    size?: UiSize;
     /** Кнопка «+» справа. */
     add?: boolean;
     /** Подпись для кнопки добавления (`aria-label`). */

package/dist/AvatarGroup.js

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

package/dist/AvatarName-0BzyfpMq.js

@@ -0,0 +1,68 @@
+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 = "czx", C = "czt", F = "czd", I = "czs", R = "czm", S = "czl", e = {
+  r: y,
+  c: A,
+  x: h,
+  t: C,
+  d: F,
+  s: I,
+  m: R,
+  l: S
+};
+function $(s, n) {
+  if (s != null && s !== "") return s;
+  if (typeof n == "string") return n;
+}
+function w(s) {
+  const {
+    src: n,
+    name: c,
+    title: m,
+    description: i,
+    size: a = "m",
+    radius: p,
+    status: z,
+    className: E,
+    children: N,
+    extra: u,
+    as: d = "div",
+    ...r
+  } = s, x = a === "s" ? e.s : a === "l" ? e.l : e.m, l = g(e.r, x, E), f = m ?? (typeof c == "string" ? c : void 0), v = $(c, m), o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+    b,
+    {
+      src: n,
+      name: v,
+      size: a,
+      radius: p,
+      status: z
+    }
+  ), /* @__PURE__ */ t.createElement("span", { className: e.c }, f != null ? /* @__PURE__ */ t.createElement("span", { className: e.t }, f) : null, i != null ? /* @__PURE__ */ t.createElement("span", { className: e.d }, i) : null, N), u != null ? /* @__PURE__ */ t.createElement("span", { className: e.x }, u) : null);
+  return d === "button" ? /* @__PURE__ */ t.createElement(
+    "button",
+    {
+      type: "button",
+      className: l,
+      ...r
+    },
+    o
+  ) : d === "a" ? /* @__PURE__ */ t.createElement(
+    "a",
+    {
+      className: l,
+      ...r
+    },
+    o
+  ) : /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: l,
+      ...r
+    },
+    o
+  );
+}
+export {
+  w 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;flex:1 1 auto}.czx{display:inline-flex;flex-shrink:0;align-items:center;margin-left:auto;color:var(--shell-color-muted);line-height:0}.czt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--avatar-name-title-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);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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { AvatarStatus } from './Avatar';
+import { UiSize } from './types';
 /**
  * Общие поля блока «аватар + текст».
  *
@@ -19,13 +20,17 @@ type Common = {
     /** Подпись: email, роль… */
     description?: React.ReactNode;
     /** Размер: `s` | `m` | `l`. */
-    size?: "s" | "m" | "l";
+    size?: UiSize;
+    /** Скругление аватара (`10` → `10px`). Токен `--avatar-radius`. */
+    radius?: number | string;
     /** Статус у аватара. */
     status?: AvatarStatus;
     /** CSS-класс корня. */
     className?: string;
     /** Доп. контент в текстовой колонке. */
     children?: React.ReactNode;
+    /** Справа: ⋮, шеврон, бейдж. Нет — не рисуем. */
+    extra?: React.ReactNode;
 };
 /**
  * Props {@link AvatarName}: корень как `button` | `a` | `div`.
@@ -50,7 +55,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-DhD3TytF.js";
+import { A as e } from "./AvatarName-0BzyfpMq.js";
 export {
   e as AvatarName
 };