@elcrm/components 0.1.1 → 0.2.0

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

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

package/dist/Badge.css

@@ -1 +1 @@
-@layer elcrm-components{.cjr{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;border:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);line-height:1;white-space:nowrap}.cjn{background:var(--shell-background-hover);color:var(--shell-color)}.cja{background:color-mix(in srgb,var(--shell-color-accent) 16%,transparent);color:var(--shell-color-accent)}.cju{background:color-mix(in srgb,var(--shell-color-success) 16%,transparent);color:var(--shell-color-success)}.cjw{background:color-mix(in srgb,var(--shell-color-warning) 16%,transparent);color:var(--shell-color-warning)}.cjd{background:color-mix(in srgb,var(--shell-color-danger) 16%,transparent);color:var(--shell-color-danger)}}
+@layer elcrm-components{.cjr{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;border:0;font-size:var(--shell-font-size-sm);font-weight:600;line-height:1;white-space:nowrap}.cjs{padding:2px var(--shell-gap-sm);font-size:var(--shell-font-size-sm);letter-spacing:.04em}.cjm{padding:.2rem .5rem;font-size:var(--shell-font-size-sm)}.cjl{padding:.3rem .65rem;font-size:var(--shell-font-size)}.cjn{background:var(--shell-background-hover);color:var(--shell-color)}.cja{background:color-mix(in srgb,var(--shell-color-accent) 16%,transparent);color:var(--shell-color-accent)}.cju{background:color-mix(in srgb,var(--shell-color-success) 16%,transparent);color:var(--shell-color-success)}.cjw{background:color-mix(in srgb,var(--shell-color-warning) 16%,transparent);color:var(--shell-color-warning)}.cjd{background:color-mix(in srgb,var(--shell-color-danger) 16%,transparent);color:var(--shell-color-danger)}.cjo{flex-shrink:0;width:.45em;height:.45em;border-radius:50%;background:currentColor}}

package/dist/Badge.d.ts

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

package/dist/Badge.js

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

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

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

package/dist/Block.js

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

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)}.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/Card.d.ts

@@ -12,7 +12,14 @@ import { default as React } from 'react';
  * </Card>
  * ```
  *
- * Токены: `--shell-*`.
+ * Токены: `--shell-*`, курсор — `--card-pointer` (по умолчанию `auto`).
+ *
+ * @example
+ * ```tsx
+ * <Card title="Тенанты" style={{ ["--card-pointer" as string]: "pointer" }}>
+ *   12
+ * </Card>
+ * ```
  */
 export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Заголовок карточки (если нет — только children) */

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/{Column-DDaqX-A7.js → Column-BiogBDf8.js}

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

package/dist/Column.js

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

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{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)}.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.d.ts

@@ -80,14 +80,14 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
     onSelect?: (value: string, item: DropdownItem) => void;
 };
 /**
- * Выпадающее меню: триггер + панель с `groups` / `items` рядом с якорем (не portal).
+ * Выпадающее меню: триггер + панель с `groups` / `items` (portal, {@link Popover}).
  *
  * Когда использовать:
  * - действия строки списка, переключатели колонок, контекстные пункты у кнопки.
  *
  * Отличия:
  * - {@link Menu} — инлайн-навигация в потоке (шапка), без панели;
- * - `@elcrm/overlay` — портальное меню/popover поверх layout (фокус-ловушка, слои).
+ * - {@link Popover} — свой контент в portal, без `items`.
  *
  * API: декларативные `items` / `groups`. Идентификатор пункта — `value` (не `key`).
  * Compound-слоты (`Dropdown.Item`) не используются.
@@ -121,4 +121,4 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
  * />
  * ```
  */
-export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, ...rest }: DropdownProps): React.JSX.Element;
+export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, }: DropdownProps): React.JSX.Element;

package/dist/Dropdown.js

@@ -1,4 +1,4 @@
-import { D as p } from "./Dropdown-DQlDiWCR.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-D4okhsfW.js

@@ -0,0 +1,46 @@
+import r from "react";
+import { c as m } from "./cx-CcykAxZN.js";
+import './Item.css';const u = "cir", d = "cia", v = "cic", i = {
+  r: u,
+  a: d,
+  c: v
+};
+function N(s) {
+  const {
+    active: t,
+    variant: o = "plain",
+    children: a,
+    className: l,
+    as: n = "button",
+    ...e
+  } = s, c = m(i.r, o === "card" && i.c, t && i.a, l);
+  return n === "a" ? /* @__PURE__ */ r.createElement(
+    "a",
+    {
+      className: c,
+      "data-active": t ? "true" : void 0,
+      ...e
+    },
+    a
+  ) : n === "li" ? /* @__PURE__ */ r.createElement(
+    "li",
+    {
+      className: c,
+      "data-active": t ? "true" : void 0,
+      ...e
+    },
+    a
+  ) : /* @__PURE__ */ r.createElement(
+    "button",
+    {
+      type: "button",
+      className: c,
+      "data-active": t ? "true" : void 0,
+      ...e
+    },
+    a
+  );
+}
+export {
+  N as I
+};

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)}}
+@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/Item.d.ts

@@ -2,6 +2,11 @@ import { default as React } from 'react';
 type Common = {
     /** Активное / выбранное состояние */
     active?: boolean;
+    /**
+     * `plain` — строка списка.
+     * `card` — карточка (идеи / тикеты): рамка, muted-фон, hover.
+     */
+    variant?: "plain" | "card";
     /** Содержимое элемента */
     children?: React.ReactNode;
     /** Доп. CSS-класс */
@@ -13,11 +18,13 @@ type Common = {
  * Роли: Item внутри List / Menu; для групповых списков выбора —
  * RadioGroup / Dropdown с `items` (не собирайте Item вручную).
  *
+ * @param variant `plain` (строка) или `card` (рамка, muted-фон)
+ *
  * @example
  * ```tsx
  * <List>
  *   <Item as="li" active>Текущий</Item>
- *   <Item as="a" href="/docs">Документация</Item>
+ *   <Item as="button" variant="card" active>Карточка</Item>
  * </List>
  * ```
  *

package/dist/Item.js

@@ -1,4 +1,4 @@
-import { I as o } from "./Item-CaU4RW2G.js";
+import { I as o } from "./Item-D4okhsfW.js";
 export {
   o as Item
 };

package/dist/ItemColumn-M7a9L8CI.js

@@ -0,0 +1,41 @@
+import e from "react";
+import { c as N } from "./cx-CcykAxZN.js";
+import './ItemColumn.css';const h = "c7r", v = "c7i", k = "c7b", b = "c7h", x = "c7t", g = "c7x", C = "c7d", F = "c7f", I = "c7p", y = "c7a", L = "c7s", M = "c7l", R = "c7k", l = {
+  r: h,
+  i: v,
+  b: k,
+  h: b,
+  t: x,
+  x: g,
+  d: C,
+  f: F,
+  p: I,
+  a: y,
+  s: L,
+  l: M,
+  k: R
+};
+function $({ items: a }) {
+  const t = a.filter((n) => n != null && n !== !1 && n !== "");
+  return t.length === 0 ? null : /* @__PURE__ */ e.createElement(e.Fragment, null, t.map((n, c) => /* @__PURE__ */ e.createElement(e.Fragment, { key: c }, c > 0 ? /* @__PURE__ */ e.createElement("span", { className: l.p, "aria-hidden": !0 }, "·") : null, /* @__PURE__ */ e.createElement("span", null, n))));
+}
+function w({
+  icon: a,
+  title: t,
+  extra: n,
+  aside: c,
+  description: s,
+  footer: o,
+  meta: m,
+  size: r = "m",
+  unread: i,
+  children: E,
+  className: d,
+  ...p
+}) {
+  const f = r === "s" ? l.s : r === "l" ? l.l : void 0, u = o ?? (m != null ? /* @__PURE__ */ e.createElement($, { items: m }) : null);
+  return /* @__PURE__ */ e.createElement("div", { className: N(l.r, f, i && l.k, d), ...p }, a != null ? /* @__PURE__ */ e.createElement("span", { className: l.i, "aria-hidden": !0 }, a) : null, /* @__PURE__ */ e.createElement("div", { className: l.b }, t != null || n != null ? /* @__PURE__ */ e.createElement("div", { className: l.h }, t != null ? /* @__PURE__ */ e.createElement("span", { className: l.t }, t) : null, n != null ? /* @__PURE__ */ e.createElement("span", { className: l.x }, n) : null) : null, s != null ? /* @__PURE__ */ e.createElement("div", { className: l.d }, s) : null, u != null ? /* @__PURE__ */ e.createElement("div", { className: l.f }, u) : null, E), c != null ? /* @__PURE__ */ e.createElement("div", { className: l.a }, c) : null);
+}
+export {
+  w as I
+};

package/dist/ItemColumn.css

@@ -0,0 +1 @@
+@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}}