@elcrm/components 0.1.2 → 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
@@ -41,6 +52,9 @@ import {
   Breadcrumb,
   PageHead,
   PageShell,
+  ChatList,
+  ChatMessages,
+  ChatSplit,
   Sidebar,
   Popover,
   createLazyResolver,
@@ -62,7 +76,7 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 
 |                                  | Назначение                       | Ключевые props                                       |
 | -------------------------------- | -------------------------------- | ---------------------------------------------------- |
-| **Layout**                       | Оболочка страницы                | `sidebar`, `header`, `footer`, `children`            |
+| **Layout**                       | Оболочка страницы                | `sidebar`, `header`, `footer`, `fixed`, `children`   |
 | **Header**                       | Шапка со слотами                 | `brand`, `nav`, `search`, `actions`                  |
 | **Footer**                       | Подвал                           | `children`                                           |
 | **Brand**                        | Название / логотип               | `as`, `children`, `onClick`                          |
@@ -77,8 +91,11 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 | **Dropdown**                     | Выпадающее меню (items, portal)  | `label`/`trigger`, `items`/`groups`, `onSelect`      |
 | **Popover**                      | Свой попап в portal              | `trigger`, `children`, `align`, `open`               |
 | **Breadcrumb**                   | Хлебные крошки                   | `items`, `separator`, `collapseAfter`                |
-| **Sidebar**                      | Левое меню приложения            | `groups`, `value`, `variant` (`cards`/`plain`)       |
+| **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` |
@@ -114,6 +131,12 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
     { 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"
 />
 ```
@@ -312,6 +335,42 @@ const sections = [
 </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`:
@@ -495,6 +554,7 @@ const people = [
 
 ```tsx
 <Layout
+  fixed={["header", "footer", "sidebar"]}
   sidebar={<Sidebar groups={groups} value={page} onSelect={setPage} />}
   header={
     <Header
@@ -520,6 +580,10 @@ const people = [
   </Section>
 </Layout>;
 
+{/* `fixed` по умолчанию = header + footer + sidebar. Скролл только у children.
+    Высота каркаса: `--layout-height` (100dvh). Вложенно: 100% + явная высота родителя.
+    `fixed={[]}` — обычный поток страницы. */}
+
 {
   /* Экран входа */
 }

package/dist/ActionGroup.css

@@ -1 +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}}
+@layer elcrm-components{.c5r{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--action-group-gap);flex:0 0 auto}}

package/dist/Avatar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { UiSize } from './types';
 /**
  * Инициалы из имени: «Иван Петров» → «ИП», «admin» → «AD».
  *
@@ -25,7 +26,7 @@ type Common = {
      */
     name?: string;
     /** Размер: `s` | `m` | `l`. */
-    size?: "s" | "m" | "l";
+    size?: UiSize;
     /** Точка статуса (online / offline). */
     status?: AvatarStatus;
     /** Подсветка (например активный пункт шапки). */

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/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(--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)}}
+@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,7 +20,7 @@ type Common = {
     /** Подпись: email, роль… */
     description?: React.ReactNode;
     /** Размер: `s` | `m` | `l`. */
-    size?: "s" | "m" | "l";
+    size?: UiSize;
     /** Скругление аватара (`10` → `10px`). Токен `--avatar-radius`. */
     radius?: number | string;
     /** Статус у аватара. */
@@ -28,6 +29,8 @@ type Common = {
     className?: string;
     /** Доп. контент в текстовой колонке. */
     children?: React.ReactNode;
+    /** Справа: ⋮, шеврон, бейдж. Нет — не рисуем. */
+    extra?: React.ReactNode;
 };
 /**
  * Props {@link AvatarName}: корень как `button` | `a` | `div`.

package/dist/AvatarName.js

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

package/dist/Badge.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
+import { UiSize } from './types';
 /** Тон метки — те же смыслы, что у Stat */
 export type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";
 /** Размер метки */
-export type BadgeSize = "s" | "m" | "l";
+export type BadgeSize = UiSize;
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
     /**
      * Цвет по смыслу.

package/dist/Card.css

@@ -1 +1 @@
-@layer elcrm-components{.cdr{background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);padding:var(--shell-padding);box-shadow:var(--shell-shadow);cursor:var(--card-pointer, auto)}.cdt{margin:0 0 var(--shell-gap-sm);font-size:var(--shell-font-size-lg);font-weight:var(--shell-font-weight);color:var(--shell-color)}}
+@layer elcrm-components{.cdr{background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);padding:var(--shell-padding);box-shadow:var(--shell-shadow);cursor:var(--card-pointer)}.cdt{margin:0 0 var(--shell-gap-sm);font-size:var(--shell-font-size-lg);font-weight:var(--shell-font-weight);color:var(--shell-color)}}

package/dist/ChatFrame-BW2TmCkZ.js

@@ -0,0 +1,37 @@
+import e from "react";
+import { c as f } from "./cx-CcykAxZN.js";
+import './ChatFrame.css';const p = "c8r", u = "c8l", g = "c8g", b = "c8h", h = "c8b", E = "c8f", N = "c8p", c = {
+  r: p,
+  l: u,
+  g,
+  h: b,
+  b: h,
+  f: E,
+  p: N
+};
+function x({
+  variant: l = "messages",
+  as: n = "section",
+  header: s,
+  footer: t,
+  children: a,
+  className: r,
+  bodyRef: o,
+  onBodyScroll: m,
+  ...i
+}) {
+  return /* @__PURE__ */ e.createElement(
+    n,
+    {
+      className: f(c.r, l === "list" ? c.l : c.g, r),
+      ...i
+    },
+    s != null ? /* @__PURE__ */ e.createElement("div", { className: c.h }, s) : null,
+    /* @__PURE__ */ e.createElement("div", { className: c.b, ref: o, onScroll: m }, a),
+    t != null ? /* @__PURE__ */ e.createElement("div", { className: c.f }, t) : null
+  );
+}
+export {
+  x as C,
+  c as s
+};

package/dist/ChatFrame.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c8r{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--chat-background);border:var(--chat-border);border-radius:var(--chat-radius)}.c8l{width:var(--chat-list-width);max-width:100%}.c8g{width:100%}.c8h{flex:0 0 auto;padding:var(--chat-header-padding);border-bottom:var(--chat-border)}.c8b{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--chat-body-padding)}.c8g .c8h{padding:var(--chat-messages-header-padding)}.c8g .c8b{display:flex;flex-direction:column;padding:var(--chat-messages-body-padding)}.c8f{flex:0 0 auto;padding:var(--chat-footer-padding);border-top:var(--chat-border)}.c8g .c8f{padding:var(--chat-messages-footer-padding)}.c8p{display:flex;align-items:stretch;gap:var(--chat-split-gap);min-height:0;height:100%}.c8p>*{min-height:0}}

package/dist/ChatList.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ChatFrameProps } from './ChatFrame';
+export type ChatListProps = Omit<ChatFrameProps, "variant" | "as" | "onBodyScroll">;
+/**
+ * Колонка списка диалогов (`aside`).
+ *
+ * @see ChatMessages, ChatSplit, List, Item
+ */
+export declare function ChatList({ "aria-label": ariaLabel, ...rest }: ChatListProps): React.JSX.Element;

package/dist/ChatList.js

@@ -0,0 +1,7 @@
+import { C as r, a as C } from "./ChatSplit-DNnu3TNq.js";
+import { C as s } from "./ChatFrame-BW2TmCkZ.js";
+export {
+  s as ChatFrame,
+  r as ChatList,
+  C as ChatSplit
+};

package/dist/ChatMessages-B8rdXiK-.js

@@ -0,0 +1,19 @@
+import r from "react";
+import { C as t } from "./ChatFrame-BW2TmCkZ.js";
+function m({
+  "aria-label": a = "Переписка",
+  ...e
+}) {
+  return /* @__PURE__ */ r.createElement(
+    t,
+    {
+      variant: "messages",
+      as: "section",
+      "aria-label": a,
+      ...e
+    }
+  );
+}
+export {
+  m as C
+};

package/dist/ChatMessages.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ChatFrameProps } from './ChatList/ChatFrame';
+export type ChatMessagesProps = Omit<ChatFrameProps, "variant" | "as">;
+/**
+ * Колонка переписки (`section`).
+ *
+ * @see ChatList, ChatSplit, AvatarName
+ */
+export declare function ChatMessages({ "aria-label": ariaLabel, ...rest }: ChatMessagesProps): React.JSX.Element;

package/dist/ChatMessages.js

@@ -0,0 +1,4 @@
+import { C as e } from "./ChatMessages-B8rdXiK-.js";
+export {
+  e as ChatMessages
+};

package/dist/ChatSplit-DNnu3TNq.js

@@ -0,0 +1,21 @@
+import e from "react";
+import { C as s, s as m } from "./ChatFrame-BW2TmCkZ.js";
+import { c as l } from "./cx-CcykAxZN.js";
+function p({
+  "aria-label": a = "Диалоги",
+  ...t
+}) {
+  return /* @__PURE__ */ e.createElement(s, { variant: "list", as: "aside", "aria-label": a, ...t });
+}
+function f({
+  list: a,
+  messages: t,
+  className: r,
+  ...i
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: l(m.p, r), ...i }, a, t);
+}
+export {
+  p as C,
+  f as a
+};

package/dist/CheckIcon-FdB8fMEF.js

@@ -0,0 +1,17 @@
+import e from "react";
+function o({ className: r }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: r, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M2.5 6.2 4.8 8.5 9.5 3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+export {
+  o as C
+};

package/dist/CheckIcon.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+/**
+ * Галочка shell (RadioGroup / Pricing / Dropdown).
+ * Размер и цвет — `currentColor` + `--shell-check-size` у родителя.
+ */
+export declare function CheckIcon({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/Dropdown-4yUB2tk1.js

@@ -0,0 +1,142 @@
+import e from "react";
+import { C as f } from "./CheckIcon-FdB8fMEF.js";
+import { c as m } from "./cx-CcykAxZN.js";
+import { P as D } from "./Popover-D0m5JWIt.js";
+import { u as j } from "./useControllableValue-CWqH1kpM.js";
+import './Dropdown.css';const I = "crr", M = "crt", P = "crc", R = "crp", W = "crh", z = "crg", F = "crd", G = "cri", T = "crn", V = "crm", q = "crk", A = "crl", H = "cru", J = "crb", K = "cro", Q = "crf", U = "crx", X = "cry", Y = "crv", n = {
+  r: I,
+  t: M,
+  c: P,
+  p: R,
+  h: W,
+  g: z,
+  d: F,
+  i: G,
+  n: T,
+  m: V,
+  k: q,
+  l: A,
+  u: H,
+  b: J,
+  o: K,
+  f: Q,
+  x: U,
+  y: X,
+  v: Y
+};
+function Z() {
+  return /* @__PURE__ */ e.createElement("svg", { className: n.c, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M2.5 4.5 6 8l3.5-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function _() {
+  return /* @__PURE__ */ e.createElement("svg", { className: n.m, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M4.5 2.5 8 6l-3.5 3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function $({ item: a }) {
+  return a.checkbox ? /* @__PURE__ */ e.createElement("span", { className: m(n.x, a.checked && n.y), "aria-hidden": !0 }, a.checked ? /* @__PURE__ */ e.createElement(f, { className: n.v }) : null) : a.checked ? /* @__PURE__ */ e.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(f, { className: n.v })) : a.status != null ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: m(n.b, a.status === "online" ? n.o : n.f),
+      "aria-hidden": !0
+    }
+  ) : a.icon != null ? /* @__PURE__ */ e.createElement("span", { className: n.n }, a.icon) : null;
+}
+function S(a, l, t) {
+  return l != null && l.length > 0 ? t != null && l[0] && l[0].title == null ? [{ ...l[0], title: t }, ...l.slice(1)] : l : a != null && a.length > 0 ? [{ title: t, items: a }] : t != null ? [{ title: t, items: [] }] : [];
+}
+function le({
+  items: a,
+  groups: l,
+  trigger: t,
+  label: o,
+  hideChevron: E = !1,
+  title: v,
+  align: k = "end",
+  open: b,
+  defaultOpen: N = !1,
+  onOpenChange: x,
+  closeOnSelect: C = !0,
+  disabled: u = !1,
+  onSelect: d,
+  className: y
+}) {
+  const [i = !1, p] = j(
+    b,
+    N,
+    x
+  ), g = S(a, l, v), L = (r) => {
+    var c;
+    if (r.disabled) return;
+    (c = r.onClick) == null || c.call(r), d == null || d(r.value, r), r.checkbox || r.submenu || !C || p(!1);
+  }, w = t ?? /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      className: n.t,
+      "data-open": i ? "true" : void 0,
+      disabled: u,
+      "aria-haspopup": "menu",
+      "aria-expanded": i
+    },
+    o,
+    E ? null : /* @__PURE__ */ e.createElement(Z, null)
+  );
+  return /* @__PURE__ */ e.createElement(
+    D,
+    {
+      className: m(n.r, y),
+      open: i,
+      onOpenChange: (r) => {
+        u || p(r);
+      },
+      align: k,
+      trigger: w,
+      label: typeof o == "string" ? o : void 0,
+      disabled: u
+    },
+    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": k }, g.map((r, h) => /* @__PURE__ */ e.createElement(e.Fragment, { key: h }, h > 0 ? /* @__PURE__ */ e.createElement("hr", { className: n.d }) : null, /* @__PURE__ */ e.createElement("div", { className: n.g, role: "group" }, r.title != null ? /* @__PURE__ */ e.createElement("p", { className: n.h }, r.title) : null, r.items.map((c) => {
+      const O = r.items.some(
+        (s) => s.checked || s.checkbox || s.status != null || s.icon != null
+      ), B = /* @__PURE__ */ e.createElement($, { item: c });
+      return /* @__PURE__ */ e.createElement(
+        "button",
+        {
+          key: c.value,
+          type: "button",
+          role: "menuitem",
+          className: n.i,
+          "data-checked": (c.checked || c.checkbox) && c.checked ? "true" : void 0,
+          "data-danger": c.danger ? "true" : void 0,
+          disabled: c.disabled,
+          "aria-checked": c.checked != null || c.checkbox ? !!c.checked : void 0,
+          onClick: () => L(c)
+        },
+        O ? B ?? /* @__PURE__ */ e.createElement("span", { className: n.n, "aria-hidden": !0 }) : null,
+        c.label != null ? /* @__PURE__ */ e.createElement("span", { className: n.l }, c.label) : null,
+        c.shortcut != null ? /* @__PURE__ */ e.createElement("span", { className: n.u }, c.shortcut) : null,
+        c.submenu ? /* @__PURE__ */ e.createElement(_, null) : null
+      );
+    })))))
+  );
+}
+export {
+  le as D
+};

package/dist/Dropdown.css

@@ -1 +1 @@
-@layer elcrm-components{.crr{position:relative;display:inline-flex;vertical-align:middle}.crt{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:var(--shell-padding);box-sizing:border-box;font:inherit;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.2}.crt:hover{background:var(--shell-background-hover)}.crt[data-open=true]{border-color:var(--shell-color-accent);color:var(--shell-color-accent)}.crc{display:inline-flex;width:var(--shell-icon-size);height:var(--shell-icon-size);flex-shrink:0;color:var(--shell-color-muted)}.crt[data-open=true] .crc{color:var(--shell-color-accent)}.crp{min-width:0}.crh{margin:0;padding:var(--shell-padding);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.crg{display:flex;flex-direction:column;gap:2px}.crd{height:0;margin:var(--shell-gap-sm) 0;border:0;border-top:1px solid var(--shell-border)}.cri{display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;font-size:var(--shell-font-size);font-weight:500;color:var(--shell-color);background:transparent;border:none;border-radius:calc(var(--shell-radius) * .7);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}.cri:hover:not(:disabled),.cri:focus-visible:not(:disabled){background:var(--shell-background-hover);outline:none}.cri[data-checked=true]{background:var(--shell-background-selected)}.cri[data-danger=true]{color:var(--shell-color-danger)}.cri:disabled,.cri[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.crn,.crk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crk{color:var(--shell-color-accent)}.crl{flex:1;min-width:0}.cru{flex-shrink:0;margin-left:auto;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.crm{display:inline-flex;flex-shrink:0;margin-left:auto;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crb{display:inline-flex;flex-shrink:0;width:var(--shell-status-size);height:var(--shell-status-size);border-radius:50%}.cro{background:var(--shell-color-success)}.crf{background:var(--shell-color-muted)}.crx{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--shell-check-size);height:var(--shell-check-size);border:1px solid var(--shell-border);border-radius:calc(var(--shell-radius) * .4);background:var(--shell-background);color:#fff}.cry{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.crv{width:70%;height:70%;display:block}}
+@layer elcrm-components{.crr{position:relative;display:inline-flex;vertical-align:middle}.crt{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:var(--shell-padding);box-sizing:border-box;font:inherit;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.2}.crt:hover{background:var(--shell-background-hover)}.crt[data-open=true]{border-color:var(--shell-color-accent);color:var(--shell-color-accent)}.crc{display:inline-flex;width:var(--shell-icon-size);height:var(--shell-icon-size);flex-shrink:0;color:var(--shell-color-muted)}.crt[data-open=true] .crc{color:var(--shell-color-accent)}.crp{min-width:0}.crh{margin:0;padding:var(--shell-padding);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.crg{display:flex;flex-direction:column;gap:2px}.crd{height:0;margin:var(--shell-gap-sm) 0;border:0;border-top:1px solid var(--shell-border)}.cri{display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;font-size:var(--shell-font-size);font-weight:500;color:var(--shell-color);background:transparent;border:none;border-radius:calc(var(--shell-radius) * .7);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}.cri:hover:not(:disabled),.cri:focus-visible:not(:disabled){background:var(--shell-background-hover);outline:none}.cri[data-checked=true]{background:var(--shell-background-selected)}.cri[data-danger=true]{color:var(--shell-color-danger)}.cri[data-danger=true] .crn,.cri[data-danger=true] .crm{color:inherit}.cri:disabled,.cri[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.crn,.crk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crk{color:var(--shell-color-accent)}.crl{flex:1;min-width:0}.cru{flex-shrink:0;margin-left:auto;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.crm{display:inline-flex;flex-shrink:0;margin-left:auto;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crb{display:inline-flex;flex-shrink:0;width:var(--shell-status-size);height:var(--shell-status-size);border-radius:50%}.cro{background:var(--shell-color-success)}.crf{background:var(--shell-color-muted)}.crx{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--shell-check-size);height:var(--shell-check-size);border:1px solid var(--shell-border);border-radius:calc(var(--shell-radius) * .4);background:var(--shell-background);color:var(--avatar-color)}.cry{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.crv{width:70%;height:70%;display:block}}

package/dist/Dropdown.js

@@ -1,4 +1,4 @@
-import { D as p } from "./Dropdown-CQBMF9aR.js";
+import { D as p } from "./Dropdown-4yUB2tk1.js";
 export {
   p as Dropdown
 };

package/dist/Footer.css

@@ -1 +1 @@
-@layer elcrm-components{.cfr{padding:var(--shell-padding);color:var(--shell-color-muted);background:transparent;border-top:1px solid var(--shell-border);font-size:var(--shell-font-size-sm)}}
+@layer elcrm-components{.cfr{flex-shrink:0;padding:var(--shell-padding);color:var(--shell-color-muted);background:transparent;border-top:1px solid var(--shell-border);font-size:var(--shell-font-size-sm)}}

package/dist/Item.css

@@ -1 +1 @@
-@layer elcrm-components{.cir{display:flex;align-items:center;gap:var(--shell-gap-sm);padding:var(--shell-padding);color:var(--shell-color);background:transparent;border:1px solid transparent;border-radius:var(--shell-radius);cursor:default}.cir:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer}.cir:hover{background:var(--shell-background-hover)}.cia,.cir[aria-current=true],.cir[data-active=true]{background:var(--shell-background-selected)}.cic{align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--shell-border);border-radius:14px;background:var(--shell-background-muted);flex-shrink:0}.cic:hover,.cic.cia,.cic[data-active=true]{background:color-mix(in srgb,var(--shell-color-accent) 12%,var(--shell-background-muted));border-color:color-mix(in srgb,var(--shell-color-accent) 35%,transparent)}}
+@layer elcrm-components{.cir{display:flex;align-items:center;gap:var(--shell-gap-sm);padding:var(--shell-padding);color:var(--shell-color);background:transparent;border:1px solid transparent;border-radius:var(--shell-radius);cursor:default}.cir:is(button,a){-webkit-appearance:none;-moz-appearance:none;appearance:none;font:inherit;text-align:left;width:100%;cursor:pointer}.cir:hover{background:var(--shell-background-hover)}.cia,.cir[aria-current=true],.cir[data-active=true]{background:var(--shell-background-selected)}.cic{align-items:flex-start;gap:var(--shell-gap);padding:var(--shell-padding);border:1px solid var(--shell-border);border-radius:var(--shell-radius);background:var(--shell-background-muted);flex-shrink:0}.cic:hover,.cic.cia,.cic[data-active=true]{background:color-mix(in srgb,var(--shell-color-accent) 12%,var(--shell-background-muted));border-color:color-mix(in srgb,var(--shell-color-accent) 35%,transparent)}}

package/dist/ItemColumn.css

@@ -1 +1 @@
-@layer elcrm-components{.c7r{display:flex;align-items:flex-start;gap:var(--item-column-gap, 12px);min-width:0;width:100%;text-align:left}.c7i{flex-shrink:0;box-sizing:border-box;width:var(--item-column-icon-size, 40px);height:var(--item-column-icon-size, 40px);border-radius:var(--item-column-icon-radius, 999px);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--shell-color-accent) 14%,transparent);color:var(--shell-color-accent)}.c7b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.c7h{display:flex;align-items:center;gap:8px;min-width:0}.c7t{flex:1;min-width:0;margin:0;font-size:var(--item-column-title-size, var(--shell-font-size));font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:var(--item-column-title-line, 1.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c7x{flex-shrink:0;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.c7d{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.c7f{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:12px;color:var(--shell-color-muted);line-height:1.35}.c7p{opacity:.5;-webkit-user-select:none;user-select:none}.c7a{flex-shrink:0;display:inline-flex;align-items:flex-start}.c7s .c7t{font-size:var(--shell-font-size-sm)}.c7s .c7d{font-size:12px}.c7l .c7t{font-size:var(--shell-font-size-lg)}.c7l .c7d{font-size:var(--shell-font-size)}.c7k .c7t{font-weight:700}}
+@layer elcrm-components{.c7r{display:flex;align-items:flex-start;gap:var(--item-column-gap);min-width:0;width:100%;text-align:left}.c7i{flex-shrink:0;box-sizing:border-box;width:var(--item-column-icon-size);height:var(--item-column-icon-size);border-radius:var(--item-column-icon-radius);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--shell-color-accent) 14%,transparent);color:var(--shell-color-accent)}.c7b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.c7h{display:flex;align-items:center;gap:8px;min-width:0}.c7t{flex:1;min-width:0;margin:0;font-size:var(--item-column-title-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:var(--item-column-title-line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c7x{flex-shrink:0;display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.c7d{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.c7f{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-size:12px;color:var(--shell-color-muted);line-height:1.35}.c7p{opacity:.5;-webkit-user-select:none;user-select:none}.c7a{flex-shrink:0;display:inline-flex;align-items:flex-start}.c7s .c7t{font-size:var(--shell-font-size-sm)}.c7s .c7d{font-size:12px}.c7l .c7t{font-size:var(--shell-font-size-lg)}.c7l .c7d{font-size:var(--shell-font-size)}.c7k .c7t{font-weight:700}}

package/dist/ItemColumn.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { UiSize } from './types';
 /**
  * Колонка содержимого строки списка: иконка слева, текст столбиком, слоты справа.
  *
@@ -47,7 +48,7 @@ export type ItemColumnProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"
     /** Куски подвала через точку — если нет `footer` */
     meta?: React.ReactNode[];
     /** Размер текста */
-    size?: "s" | "m" | "l";
+    size?: UiSize;
     /** Жирный title (непрочитанное) */
     unread?: boolean;
     /** Доп. строки под footer */