@elcrm/components 0.0.3 → 0.1.0

package/dist/Breadcrumb-D0wXkE38.js

@@ -0,0 +1,98 @@
+import e from "react";
+import { c as x } from "./cx-CcykAxZN.js";
+import './Breadcrumb.css';const y = "c0r", w = "c0i", B = "c0c", L = "c0n", C = "c0l", F = "c0d", M = "c0s", $ = "c0sv", S = "c0e", l = {
+  r: y,
+  i: w,
+  c: B,
+  n: L,
+  l: C,
+  d: F,
+  s: M,
+  sv: $,
+  e: S
+};
+function Z() {
+  return /* @__PURE__ */ e.createElement("svg", { className: l.sv, 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 j() {
+  return /* @__PURE__ */ e.createElement("svg", { className: l.d, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M6 1.5 8.5 4.5h-5L6 1.5ZM6 10.5 3.5 7.5h5L6 10.5Z",
+      fill: "currentColor"
+    }
+  ));
+}
+function D(t) {
+  return t === "slash" ? "/" : t === "chevron" ? /* @__PURE__ */ e.createElement(Z, null) : t;
+}
+function H(t, r) {
+  if (r == null || r < 1 || t.length <= r + 1)
+    return t.map((a, c) => ({ kind: "item", item: a, index: c }));
+  const h = t.slice(0, r).map((a, c) => ({
+    kind: "item",
+    item: a,
+    index: c
+  })), o = t[t.length - 1];
+  return [
+    ...h,
+    { kind: "ellipsis" },
+    { kind: "item", item: o, index: t.length - 1 }
+  ];
+}
+function q({
+  items: t,
+  separator: r = "chevron",
+  collapseAfter: h,
+  onEllipsisClick: o,
+  onItemClick: a,
+  className: c,
+  ...k
+}) {
+  const N = H(t, h), g = t.length - 1;
+  return /* @__PURE__ */ e.createElement("nav", { "aria-label": "Breadcrumb", className: c, ...k }, /* @__PURE__ */ e.createElement("ol", { className: l.r }, N.map((E, p) => {
+    const s = [];
+    if (p > 0 && s.push(
+      /* @__PURE__ */ e.createElement("li", { key: `sep-${p}`, className: l.s, "aria-hidden": !0 }, D(r))
+    ), E.kind === "ellipsis")
+      return s.push(
+        /* @__PURE__ */ e.createElement("li", { key: "ellipsis" }, o ? /* @__PURE__ */ e.createElement(
+          "button",
+          {
+            type: "button",
+            className: l.e,
+            "aria-label": "Показать путь",
+            onClick: o
+          },
+          "…"
+        ) : /* @__PURE__ */ e.createElement("span", { className: l.e }, "…"))
+      ), /* @__PURE__ */ e.createElement(e.Fragment, { key: `frag-${p}` }, s);
+    const { item: n, index: f } = E, u = f === g, d = /* @__PURE__ */ e.createElement(e.Fragment, null, n.icon != null ? /* @__PURE__ */ e.createElement("span", { className: l.n }, n.icon) : null, n.label != null ? /* @__PURE__ */ e.createElement("span", { className: l.l }, n.label) : null, n.dropdown ? /* @__PURE__ */ e.createElement(j, null) : null), m = x(l.i, u && l.c), b = () => {
+      var v;
+      n.disabled || u || ((v = n.onClick) == null || v.call(n), a == null || a(n, f));
+    };
+    let i;
+    return u || n.disabled ? i = /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: m,
+        "aria-current": u ? "page" : void 0,
+        "aria-disabled": n.disabled || void 0
+      },
+      d
+    ) : n.href != null ? i = /* @__PURE__ */ e.createElement("a", { className: m, href: n.href, onClick: b }, d) : n.onClick != null || a != null || n.dropdown ? i = /* @__PURE__ */ e.createElement("button", { type: "button", className: m, onClick: b }, d) : i = /* @__PURE__ */ e.createElement("span", { className: m }, d), s.push(/* @__PURE__ */ e.createElement("li", { key: n.value }, i)), /* @__PURE__ */ e.createElement(e.Fragment, { key: n.value }, s);
+  })));
+}
+export {
+  q as B
+};

package/dist/Breadcrumb.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c0r{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm);list-style:none;margin:0;padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.c0i{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);min-width:0;color:inherit}.c0i:is(a,button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:none;background:transparent;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-decoration:none}.c0i:is(a,button):hover{color:var(--shell-color)}.c0c,.c0i[aria-current=page]{color:var(--shell-color-accent);cursor:default}.c0n{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);overflow:hidden;border-radius:calc(var(--shell-radius) * .5);color:inherit}.c0n img{width:100%;height:100%;object-fit:cover;display:block}.c0l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c0d{display:inline-flex;flex-shrink:0;width:.75rem;height:.75rem;color:var(--shell-color-muted)}.c0s{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--shell-color-muted);-webkit-user-select:none;user-select:none}.c0sv{width:.75rem;height:.75rem;display:block}.c0e{display:inline-flex;align-items:center;justify-content:center;min-width:1em;color:var(--shell-color-muted);letter-spacing:.05em}.c0e:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:.15rem .35rem;border:none;border-radius:calc(var(--shell-radius) * .4);background:transparent;font:inherit;color:inherit;cursor:pointer}.c0e:is(button):hover{background:var(--shell-background-hover);color:var(--shell-color)}}

package/dist/Breadcrumb.d.ts

@@ -0,0 +1,80 @@
+import { default as React } from 'react';
+/**
+ * Вид разделителя между крошками: встроенные `chevron` / `slash` или свой узел.
+ */
+export type BreadcrumbSeparator = "chevron" | "slash" | React.ReactNode;
+/**
+ * Пункт хлебных крошек {@link Breadcrumb}.
+ *
+ * Идентификатор — `value` (не `key`).
+ * Опциональные поля: нет `icon` / `label` — соответствующий блок не рисуется.
+ */
+export type BreadcrumbItem = {
+    /** Уникальный идентификатор пункта (не `key`). */
+    value: string;
+    /** Подпись крошки. */
+    label?: React.ReactNode;
+    /** Иконка / Avatar слева. */
+    icon?: React.ReactNode;
+    /** Ссылка; если задана — рендерится `<a>`. */
+    href?: string;
+    /** Индикатор dropdown (↕) справа от label. */
+    dropdown?: boolean;
+    /** Недоступный / некликабельный пункт. */
+    disabled?: boolean;
+    /** Локальный обработчик клика. */
+    onClick?: () => void;
+};
+/**
+ * Props компонента {@link Breadcrumb}.
+ *
+ * Групповой UI: декларативный массив `items`.
+ */
+export type BreadcrumbProps = Omit<React.HTMLAttributes<HTMLElement>, "onClick"> & {
+    /** Цепочка крошек (`value` — идентификатор). */
+    items: BreadcrumbItem[];
+    /** Разделитель: chevron `>`, slash `/` или свой node. */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Свернуть середину: первые N пунктов, «…», последний.
+     * Например `2` → Home, Settings, …, Team.
+     */
+    collapseAfter?: number;
+    /** Клик по «…» (если нужно раскрыть путь). */
+    onEllipsisClick?: () => void;
+    /** Клик по пункту (кроме текущего и disabled). */
+    onItemClick?: (item: BreadcrumbItem, index: number) => void;
+};
+/**
+ * Хлебные крошки пути из декларативного массива `items`.
+ *
+ * Когда использовать:
+ * - показать иерархию страницы / вложенных разделов;
+ * - нужна свёртка длинного пути (`collapseAfter`).
+ *
+ * Связанные компоненты:
+ * - {@link PageHead} — шапка страницы, куда часто кладут Breadcrumb;
+ * - {@link Dropdown} — если крошка с `dropdown` открывает меню выбора.
+ *
+ * API: декларативные `items`. Идентификатор — `value` (не `key`).
+ * Compound-слоты не используются.
+ *
+ * CSS-токены: `--shell-*`.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { value: "home", label: "Главная", href: "/" },
+ *   { value: "settings", label: "Настройки", href: "/settings" },
+ *   { value: "team", label: "Команда", icon: <Avatar name="Team" size="s" /> },
+ * ];
+ *
+ * <Breadcrumb
+ *   items={items}
+ *   separator="chevron"
+ *   collapseAfter={2}
+ *   onItemClick={(item) => navigate(item.href ?? "/")}
+ * />
+ * ```
+ */
+export declare function Breadcrumb({ items, separator, collapseAfter, onEllipsisClick, onItemClick, className, ...rest }: BreadcrumbProps): React.JSX.Element;

package/dist/Breadcrumb.js

@@ -0,0 +1,4 @@
+import { B as e } from "./Breadcrumb-D0wXkE38.js";
+export {
+  e as Breadcrumb
+};

package/dist/Card.css

@@ -1 +1 @@
-@layer elcrm-components{.cdr{background:var(--card-background);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:var(--card-padding);box-shadow:var(--card-shadow)}.cdt{margin:0 0 .5rem;font-size:1.125rem;font-weight:600}}
+@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)}.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/Card.d.ts

@@ -1,7 +1,28 @@
 import { default as React } from 'react';
+/**
+ * Карточка-контейнер с опциональным заголовком.
+ *
+ * Роли: Card = визуальная рамка для группы контента;
+ * для секций модуля — Section; для списков — List / Item.
+ *
+ * @example
+ * ```tsx
+ * <Card title="Тариф">
+ *   <p>Базовый план</p>
+ * </Card>
+ * ```
+ *
+ * Токены: `--shell-*`.
+ */
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Заголовок карточки (если нет — только children) */
     title?: React.ReactNode;
+    /** Содержимое карточки */
     children?: React.ReactNode;
 };
-/** Карточка. Токены: --card-* */
+/**
+ * Карточка-контейнер.
+ *
+ * @see Section, Stack, List
+ */
 export declare function Card({ title, children, className, ...rest }: CardProps): React.JSX.Element;

package/dist/Column-DDaqX-A7.js

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

package/dist/Column.d.ts

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

package/dist/Column.js

@@ -1,4 +1,4 @@
-import { C as r } from "./Column-DlNrvFq1.js";
+import { C as r } from "./Column-DDaqX-A7.js";
 export {
   r as Column
 };

package/dist/Dropdown-Cw5LKpcT.js

@@ -0,0 +1,168 @@
+import e from "react";
+import { c as k } from "./cx-CcykAxZN.js";
+import './Dropdown.css';const z = "crr", F = "crt", G = "crc", K = "crp", T = "crh", U = "crg", q = "crd", A = "cri", H = "crn", J = "crk", Q = "crl", V = "cru", X = "crm", Y = "crb", Z = "cro", _ = "crf", $ = "crx", O = "cry", P = "crkv", t = {
+  r: z,
+  t: F,
+  c: G,
+  p: K,
+  h: T,
+  g: U,
+  d: q,
+  i: A,
+  n: H,
+  k: J,
+  l: Q,
+  u: V,
+  m: X,
+  b: Y,
+  o: Z,
+  f: _,
+  x: $,
+  y: O,
+  kv: P
+};
+function S() {
+  return /* @__PURE__ */ e.createElement("svg", { className: t.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 ee() {
+  return /* @__PURE__ */ e.createElement("svg", { className: t.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 N({ className: r }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: k(t.kv, 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"
+    }
+  ));
+}
+function ne({ item: r }) {
+  return r.checkbox ? /* @__PURE__ */ e.createElement("span", { className: k(t.x, r.checked && t.y), "aria-hidden": !0 }, r.checked ? /* @__PURE__ */ e.createElement(N, null) : null) : r.checked ? /* @__PURE__ */ e.createElement("span", { className: t.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(N, null)) : r.status != null ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: k(t.b, r.status === "online" ? t.o : t.f),
+      "aria-hidden": !0
+    }
+  ) : r.icon != null ? /* @__PURE__ */ e.createElement("span", { className: t.n }, r.icon) : null;
+}
+function te(r, l, a) {
+  return l != null && l.length > 0 ? a != null && l[0] && l[0].title == null ? [{ ...l[0], title: a }, ...l.slice(1)] : l : r != null && r.length > 0 ? [{ title: a, items: r }] : a != null ? [{ title: a, items: [] }] : [];
+}
+function le({
+  items: r,
+  groups: l,
+  trigger: a,
+  label: m,
+  hideChevron: x = !1,
+  title: y,
+  align: L = "end",
+  open: E,
+  defaultOpen: w = !1,
+  onOpenChange: f,
+  closeOnSelect: C = !0,
+  disabled: v = !1,
+  onSelect: h,
+  className: g,
+  ...B
+}) {
+  const p = e.useRef(null), [D, R] = e.useState(w), b = E !== void 0, o = b ? E : D, u = (c) => {
+    b || R(c), f == null || f(c);
+  }, j = te(r, l, y);
+  e.useEffect(() => {
+    if (!o) return;
+    const c = (n) => {
+      const d = p.current;
+      d && !d.contains(n.target) && u(!1);
+    }, s = (n) => {
+      n.key === "Escape" && u(!1);
+    };
+    return document.addEventListener("mousedown", c), document.addEventListener("keydown", s), () => {
+      document.removeEventListener("mousedown", c), document.removeEventListener("keydown", s);
+    };
+  }, [o]);
+  const M = (c) => {
+    var n;
+    if (c.disabled) return;
+    (n = c.onClick) == null || n.call(c), h == null || h(c.value, c), c.checkbox || c.submenu || !C || u(!1);
+  }, W = a != null ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      onClick: () => {
+        v || u(!o);
+      }
+    },
+    a
+  ) : /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      className: t.t,
+      "data-open": o ? "true" : void 0,
+      disabled: v,
+      "aria-haspopup": "menu",
+      "aria-expanded": o,
+      onClick: () => u(!o)
+    },
+    m,
+    x ? null : /* @__PURE__ */ e.createElement(S, null)
+  );
+  return /* @__PURE__ */ e.createElement("div", { ref: p, className: k(t.r, g), ...B }, W, o ? /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: t.p,
+      "data-align": L,
+      role: "menu",
+      "aria-label": typeof m == "string" ? m : void 0
+    },
+    j.map((c, s) => /* @__PURE__ */ e.createElement(e.Fragment, { key: s }, s > 0 ? /* @__PURE__ */ e.createElement("hr", { className: t.d }) : null, /* @__PURE__ */ e.createElement("div", { className: t.g, role: "group" }, c.title != null ? /* @__PURE__ */ e.createElement("p", { className: t.h }, c.title) : null, c.items.map((n) => {
+      const d = c.items.some(
+        (i) => i.checked || i.checkbox || i.status != null || i.icon != null
+      ), I = /* @__PURE__ */ e.createElement(ne, { item: n });
+      return /* @__PURE__ */ e.createElement(
+        "button",
+        {
+          key: n.value,
+          type: "button",
+          role: "menuitem",
+          className: t.i,
+          "data-checked": (n.checked || n.checkbox) && n.checked ? "true" : void 0,
+          "data-danger": n.danger ? "true" : void 0,
+          disabled: n.disabled,
+          "aria-checked": n.checked != null || n.checkbox ? !!n.checked : void 0,
+          onClick: () => M(n)
+        },
+        d ? I ?? /* @__PURE__ */ e.createElement("span", { className: t.n, "aria-hidden": !0 }) : null,
+        n.label != null ? /* @__PURE__ */ e.createElement("span", { className: t.l }, n.label) : null,
+        n.shortcut != null ? /* @__PURE__ */ e.createElement("span", { className: t.u }, n.shortcut) : null,
+        n.submenu ? /* @__PURE__ */ e.createElement(ee, null) : null
+      );
+    }))))
+  ) : null);
+}
+export {
+  le as D
+};

package/dist/Dropdown.css

@@ -0,0 +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{position:absolute;top:calc(100% + var(--shell-gap-sm));z-index:var(--shell-z);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height);overflow:auto;padding:var(--shell-gap-sm);box-sizing:border-box;background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow)}.crp[data-align=start]{left:0}.crp[data-align=end]{right: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)}.crkv{width:70%;height:70%;display:block}}

package/dist/Dropdown.d.ts

@@ -0,0 +1,124 @@
+import { default as React } from 'react';
+/**
+ * Пункт выпадающего меню {@link Dropdown}.
+ *
+ * Идентификатор — всегда `value` (не `key`).
+ * Опциональные поля (`icon`, `shortcut`, …): есть → рисуем, нет → пропускаем.
+ */
+export type DropdownItem = {
+    /** Уникальный идентификатор пункта (не `key`). */
+    value: string;
+    /** Подпись пункта. */
+    label?: React.ReactNode;
+    /** Иконка слева. */
+    icon?: React.ReactNode;
+    /** Горячая клавиша справа (например «⌘X»). */
+    shortcut?: React.ReactNode;
+    /** Галочка слева (выбор / toggle). */
+    checked?: boolean;
+    /** Режим чекбокса (колонки списка и т.п.). */
+    checkbox?: boolean;
+    /** Точка статуса вместо icon. */
+    status?: "online" | "offline";
+    /** Стрелка submenu справа (визуальный намёк; логика submenu — снаружи). */
+    submenu?: boolean;
+    /** Недоступный пункт. */
+    disabled?: boolean;
+    /** Опасное действие (Delete) — красный акцент. */
+    danger?: boolean;
+    /** Локальный обработчик клика (дополнительно к `onSelect`). */
+    onClick?: () => void;
+};
+/**
+ * Секция панели dropdown: опциональный заголовок + `items`.
+ *
+ * Между секциями рисуется разделитель. Декларативный API, без compound-слотов.
+ */
+export type DropdownGroup = {
+    /** Заголовок секции / панели («Колонки в списке»). */
+    title?: React.ReactNode;
+    /** Пункты секции. */
+    items: DropdownItem[];
+};
+/**
+ * Props компонента {@link Dropdown}.
+ *
+ * Передавайте либо плоский `items`, либо структурированные `groups`.
+ */
+export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect"> & {
+    /**
+     * Плоский декларативный список пунктов.
+     * Для секций с разделителями используйте `groups`.
+     */
+    items?: DropdownItem[];
+    /** Секции с разделителями между ними. */
+    groups?: DropdownGroup[];
+    /** Кастомный триггер; иначе кнопка из `label`. */
+    trigger?: React.ReactNode;
+    /** Текст встроенного триггера. */
+    label?: React.ReactNode;
+    /** Скрыть chevron у встроенного триггера. */
+    hideChevron?: boolean;
+    /** Заголовок панели (если не задан в `groups[].title`). */
+    title?: React.ReactNode;
+    /** Выравнивание панели относительно триггера. */
+    align?: "start" | "end";
+    /** Контролируемое открытие. */
+    open?: boolean;
+    /** Начальное открытие (неконтролируемый режим). */
+    defaultOpen?: boolean;
+    /** Колбэк смены open. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Закрывать панель после выбора.
+     * Для checkbox обычно `false`.
+     */
+    closeOnSelect?: boolean;
+    /** Заблокировать триггер. */
+    disabled?: boolean;
+    /** Выбор пункта: `value` + сам item. */
+    onSelect?: (value: string, item: DropdownItem) => void;
+};
+/**
+ * Выпадающее меню: триггер + панель с `groups` / `items` рядом с якорем (не portal).
+ *
+ * Когда использовать:
+ * - действия строки списка, переключатели колонок, контекстные пункты у кнопки.
+ *
+ * Отличия:
+ * - {@link Menu} — инлайн-навигация в потоке (шапка), без панели;
+ * - `@elcrm/overlay` — портальное меню/popover поверх layout (фокус-ловушка, слои).
+ *
+ * API: декларативные `items` / `groups`. Идентификатор пункта — `value` (не `key`).
+ * Compound-слоты (`Dropdown.Item`) не используются.
+ *
+ * CSS-токены: `--shell-*`, узкие `--dropdown-min-width` / `--dropdown-max-width` / `--dropdown-max-height`, `--popup-shadow`.
+ *
+ * @example
+ * ```tsx
+ * const groups = [
+ *   {
+ *     title: "Действия",
+ *     items: [
+ *       { value: "edit", label: "Изменить", icon: <Icons.Line name="edit" /> },
+ *       { value: "delete", label: "Удалить", danger: true },
+ *     ],
+ *   },
+ *   {
+ *     title: "Колонки",
+ *     items: [
+ *       { value: "email", label: "Email", checkbox: true, checked: true },
+ *       { value: "phone", label: "Телефон", checkbox: true },
+ *     ],
+ *   },
+ * ];
+ *
+ * <Dropdown
+ *   label="Действия"
+ *   groups={groups}
+ *   closeOnSelect={false}
+ *   onSelect={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, ...rest }: DropdownProps): React.JSX.Element;

package/dist/Dropdown.js

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

package/dist/EmptyState.css

@@ -1 +1 @@
-@layer elcrm-components{.cpr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--empty-state-gap);padding:var(--empty-state-padding);text-align:center;color:var(--empty-state-color)}.cpi{display:flex;margin-bottom:var(--empty-state-icon-gap);color:var(--empty-state-icon-color)}.cpt{margin:0;font-size:var(--empty-state-title-size);font-weight:600;color:var(--empty-state-title-color);line-height:1.3}.cpd{margin:0;max-width:var(--empty-state-max-width);font-size:var(--empty-state-description-size);color:var(--empty-state-description-color);line-height:1.45}.cpa{display:flex;flex-wrap:wrap;gap:var(--empty-state-actions-gap);justify-content:center;margin-top:var(--empty-state-actions-margin-top)}}
+@layer elcrm-components{.cpr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--shell-gap);padding:var(--shell-padding);text-align:center;color:var(--shell-color-muted)}.cpi{display:flex;margin-bottom:var(--shell-gap-sm);color:var(--shell-color-muted)}.cpt{margin:0;font-size:var(--shell-font-size-lg);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cpd{margin:0;max-width:22rem;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.cpa{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);justify-content:center;margin-top:var(--shell-gap)}}

package/dist/EmptyState.d.ts

@@ -1,13 +1,36 @@
 import { default as React } from 'react';
+/**
+ * Заглушка «нет данных»: иконка, заголовок, описание, действия.
+ *
+ * Роли: EmptyState после загрузки при пустом списке;
+ * во время загрузки — Loading; для секций с контентом — Section.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   title="Нет клиентов"
+ *   description="Создайте первого клиента"
+ *   actions={<Button>Создать</Button>}
+ * />
+ * ```
+ *
+ * Токены: `--shell-*`.
+ */
 export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Заголовок заглушки */
     title?: React.ReactNode;
+    /** Поясняющий текст */
     description?: React.ReactNode;
+    /** Иконка над заголовком */
     icon?: React.ReactNode;
+    /** Кнопки / CTA под описанием */
     actions?: React.ReactNode;
+    /** Доп. контент между описанием и actions */
     children?: React.ReactNode;
 };
 /**
  * Заглушка «нет данных».
- * Токены: --empty-state-*
+ *
+ * @see Loading, Section, List
  */
 export declare function EmptyState({ title, description, icon, actions, children, className, ...rest }: EmptyStateProps): React.JSX.Element;

package/dist/Footer.css

@@ -1 +1 @@
-@layer elcrm-components{.cfr{padding:var(--footer-padding);color:var(--footer-color);background:var(--footer-background);border-top:1px solid var(--footer-border);font-size:var(--footer-font-size)}}
+@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)}}

package/dist/Footer.d.ts

@@ -1,6 +1,25 @@
 import { default as React } from 'react';
+/**
+ * Подвал страницы или модуля.
+ *
+ * Роли: Footer в Layout (глобальный) или в PageShell как `footer` (прибит к низу модуля).
+ *
+ * @example
+ * ```tsx
+ * <Layout footer={<Footer>© elCRM · v1.0</Footer>}>
+ *   …
+ * </Layout>
+ * ```
+ *
+ * Токены: `--shell-*`.
+ */
 export type FooterProps = React.HTMLAttributes<HTMLElement> & {
+    /** Содержимое подвала (копирайт, ссылки, статус) */
     children?: React.ReactNode;
 };
-/** Подвал. Токены: --footer-* */
+/**
+ * Подвал приложения / страницы.
+ *
+ * @see Layout, PageShell, Header
+ */
 export declare function Footer({ children, className, ...rest }: FooterProps): React.JSX.Element;

package/dist/Header.css

@@ -1 +1 @@
-@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--header-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--header-padding);color:var(--header-color);background:var(--header-background);border-bottom:1px solid var(--header-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chb{flex-shrink:0}.chn{display:flex;align-items:center;min-width:0}.chs{flex:1;min-width:0;margin-left:auto;max-width:18rem}.cha{display:flex;align-items:center;gap:.5rem;flex-shrink:0;margin-left:auto}.chs+.cha{margin-left:0}}
+@layer elcrm-components{.chr{display:flex;align-items:center;gap:var(--shell-gap);flex-shrink:0;min-height:var(--header-height);padding:var(--shell-padding);color:var(--shell-color);background:var(--shell-background);border-bottom:1px solid var(--shell-border);border-radius:var(--header-radius);box-shadow:var(--header-shadow);margin:var(--header-margin);position:relative;z-index:var(--header-z)}.chb{flex-shrink:0}.chn{display:flex;align-items:center;min-width:0}.chs{flex:1;min-width:0;margin-left:auto;max-width:18rem}.cha{display:flex;align-items:center;gap:var(--shell-gap-sm);flex-shrink:0;margin-left:auto}.chs+.cha{margin-left:0}}