@elcrm/components 0.1.1 → 0.2.0

package/dist/index.es.js

@@ -1,67 +1,91 @@
-import { L as f } from "./Layout-Xb3-xsmA.js";
+import { L as x } from "./Layout-mi6Ghayv.js";
 import { H as i } from "./Header-Cf28eyjW.js";
-import { F as n } from "./Footer-qxUlnPR9.js";
-import { L as d } from "./List-BgKkYaGO.js";
-import { I as B } from "./Item-CaU4RW2G.js";
-import { C as S } from "./Card-hn37Opo3.js";
-import { B as A } from "./Block-BAXh0PPp.js";
-import { R } from "./Row--HIe6vb9.js";
-import { C } from "./Column-DDaqX-A7.js";
-import { S as b } from "./Stack-b0-XWwQ1.js";
-import { M as F } from "./Menu-DRBHvSdJ.js";
-import { D as H } from "./Dropdown-DQlDiWCR.js";
-import { B as h } from "./Breadcrumb-CAM_e9LN.js";
-import { L as w } from "./Loading-ChGq9peU.js";
-import { S as D } from "./Section-Crxk2J-E.js";
-import { N as I } from "./NavSections-NDcIDD6H.js";
-import { T as j } from "./TabSections-DL7DufKU.js";
-import { A as J, i as K } from "./Avatar-CyNXYvsa.js";
-import { A as Q } from "./AvatarGroup-BAWas4pU.js";
-import { A as V } from "./AvatarName-DhD3TytF.js";
-import { B as X } from "./Badge-l6nUkl-H.js";
-import { B as Z } from "./Brand-Zq-Idks4.js";
-import { E as $ } from "./EmptyState-mBiWtMIM.js";
-import { R as or } from "./RadioGroup-D2UUOTkY.js";
-import { P as er } from "./PricingGroup-DgcdVSq8.js";
-import { P as pr } from "./PricingTable-DALddSwM.js";
-import { P as sr } from "./PageHead-Baz9BLuA.js";
-import { P as xr } from "./PageShell-CghThHS3.js";
+import { F as c } from "./Footer-qxUlnPR9.js";
+import { L as u } from "./List-BgKkYaGO.js";
+import { I as S } from "./Item-D4okhsfW.js";
+import { I as v } from "./ItemColumn-M7a9L8CI.js";
+import { C as y } from "./Card-hn37Opo3.js";
+import { A as B } from "./ActionGroup-ChKFW0mt.js";
+import { T as I } from "./TextGroup-DmhuyMR1.js";
+import { S as R } from "./Stat-C5iZyEoo.js";
+import { B as G } from "./Block-Bu7NEA0g.js";
+import { R as g } from "./Row-DsQOVn18.js";
+import { C as F } from "./Column-BiogBDf8.js";
+import { S as H, s as M } from "./Stack-XkmPSswj.js";
+import { M as Z } from "./Menu-DuXQv-zT.js";
+import { D as z } from "./Dropdown-4yUB2tk1.js";
+import { B as E } from "./Breadcrumb-CAM_e9LN.js";
+import { L as j } from "./Loading-DkkG7RcE.js";
+import { S as K } from "./Section-Crxk2J-E.js";
+import { N as U } from "./NavSections-BpyZPimZ.js";
+import { T as W } from "./TabSections-DN7yVJoF.js";
+import { A as Y, a as _, i as $ } from "./Avatar-loGgFt72.js";
+import { A as or } from "./AvatarGroup-D1gnT3Od.js";
+import { A as er } from "./AvatarName-0BzyfpMq.js";
+import { B as sr } from "./Badge-jp-9iNNL.js";
+import { B as mr } from "./Brand-Zq-Idks4.js";
+import { E as fr } from "./EmptyState-mBiWtMIM.js";
+import { R as nr } from "./RadioGroup-fcXzhvMu.js";
+import { P as lr } from "./PricingGroup-Czuhe81Z.js";
+import { P as dr } from "./PricingTable-BuLC0opK.js";
+import { P as Cr } from "./PageHead-DgaJ1mXY.js";
+import { P as Pr } from "./PageShell-D9EZiO8o.js";
+import { C as Ar, a as Br } from "./ChatSplit-DNnu3TNq.js";
+import { C as Ir } from "./ChatFrame-BW2TmCkZ.js";
+import { C as Rr } from "./ChatMessages-B8rdXiK-.js";
+import { S as Gr } from "./Sidebar-CBYq1ad6.js";
+import { P as gr, a as kr, p as Fr, r as Nr } from "./Popover-D0m5JWIt.js";
 import { lazy as e } from "react";
-import { c as cr } from "./cx-CcykAxZN.js";
-function p(a) {
+import { c as Mr } from "./cx-CcykAxZN.js";
+function s(a) {
   const o = {};
   return (r) => (o[r] || (o[r] = e(() => a(r))), o[r]);
 }
 export {
-  J as Avatar,
-  Q as AvatarGroup,
-  V as AvatarName,
-  X as Badge,
-  A as Block,
-  Z as Brand,
-  h as Breadcrumb,
-  S as Card,
-  C as Column,
-  H as Dropdown,
-  $ as EmptyState,
-  n as Footer,
+  B as ActionGroup,
+  Y as Avatar,
+  or as AvatarGroup,
+  er as AvatarName,
+  sr as Badge,
+  G as Block,
+  mr as Brand,
+  E as Breadcrumb,
+  y as Card,
+  Ir as ChatFrame,
+  Ar as ChatList,
+  Rr as ChatMessages,
+  Br as ChatSplit,
+  F as Column,
+  z as Dropdown,
+  fr as EmptyState,
+  c as Footer,
   i as Header,
-  B as Item,
-  f as Layout,
-  d as List,
-  w as Loading,
-  F as Menu,
-  I as NavSections,
-  sr as PageHead,
-  xr as PageShell,
-  er as PricingGroup,
-  pr as PricingTable,
-  or as RadioGroup,
-  R as Row,
-  D as Section,
-  b as Stack,
-  j as TabSections,
-  p as createLazyResolver,
-  cr as cx,
-  K as initialsFromName
+  S as Item,
+  v as ItemColumn,
+  x as Layout,
+  u as List,
+  j as Loading,
+  Z as Menu,
+  U as NavSections,
+  Cr as PageHead,
+  Pr as PageShell,
+  gr as Popover,
+  lr as PricingGroup,
+  dr as PricingTable,
+  nr as RadioGroup,
+  g as Row,
+  K as Section,
+  Gr as Sidebar,
+  H as Stack,
+  R as Stat,
+  W as TabSections,
+  I as TextGroup,
+  kr as acquireOverlayZIndex,
+  _ as avatarRadiusStyle,
+  s as createLazyResolver,
+  Mr as cx,
+  $ as initialsFromName,
+  Fr as peekOverlayZIndex,
+  Nr as releaseOverlayZIndex,
+  M as stackColumnsTemplate
 };

package/dist/light.css

@@ -13,13 +13,26 @@ body[data-theme="light"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
+  --shell-bg: var(--shell-background-muted);
   --shell-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
   --shell-background-selected: color-mix(in srgb, var(--accent) 10%, transparent);
   --shell-shadow: var(--shadow);
 
+  --sidebar-block-bg: var(--shell-background);
+  --sidebar-block-border: var(--shell-border);
+  --sidebar-block-shadow: none;
+  --sidebar-item-active: var(--shell-color);
+  --sidebar-item-active-bg: var(--shell-background-selected);
+  --sidebar-icon-active: var(--shell-color-accent);
+
   --avatar-background: var(--shell-color-accent);
   --avatar-color: var(--button-primary-fg);
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
+
+  --chat-background: var(--shell-background);
+  --chat-border: 1px solid var(--shell-border);
 }

package/dist/overlayZ.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Счётчик z-index оверлеев — тот же `globalThis.elcrm.overlayZ`, что у `@elcrm/form`.
+ */
+/** Выделить z-index поверх текущего стека оверлеев */
+export declare function acquireOverlayZIndex(): number;
+/** Освободить слой; при пустом стеке сброс счётчика */
+export declare function releaseOverlayZIndex(z: number): void;
+/** Текущий верхний активный слой (или FLOOR, если стек пуст) */
+export declare function peekOverlayZIndex(): number;

package/dist/rovingKeys-CGlfTtNQ.js

@@ -0,0 +1,15 @@
+function x(r, { values: n, value: f, onSelect: i, vertical: e }) {
+  if (n.length === 0) return;
+  const h = e ? "ArrowUp" : "ArrowLeft", o = e ? "ArrowDown" : "ArrowRight";
+  let t;
+  if (r.key === "Home") t = n[0];
+  else if (r.key === "End") t = n[n.length - 1];
+  else if (r.key === h || r.key === o) {
+    const g = Math.max(0, n.indexOf(f ?? "")), l = r.key === o ? 1 : -1;
+    t = n[(g + l + n.length) % n.length];
+  } else return;
+  t != null && (r.preventDefault(), i(t));
+}
+export {
+  x as h
+};

package/dist/rovingKeys.d.ts

@@ -0,0 +1,13 @@
+import { KeyboardEvent } from 'react';
+type Opts = {
+    values: string[];
+    value?: string;
+    onSelect: (value: string) => void;
+    /** `true` — стрелки вверх/вниз, иначе влево/вправо */
+    vertical?: boolean;
+};
+/**
+ * Перемещение выбора по списку `value` (меню, вкладки).
+ */
+export declare function handleRovingKeys(event: KeyboardEvent, { values, value, onSelect, vertical }: Opts): void;
+export {};

package/dist/tokens.css

@@ -1,6 +1,10 @@
 /**
  * Дефолты геометрии @elcrm/components для `elcrm css`.
- * Цвета — light.css / dark.css. Не импортируй в runtime приложения как themes.css.
+ * Цвета — light.css / dark.css. Не импортируй в runtime как themes.css.
+ *
+ * Слой 1: `--shell-*` (всё общее).
+ * Слой 2: узкие токены = алиас на shell, если значение то же.
+ * Переопределяй узкий токен только когда компонент реально отличается.
  */
 :root {
   /* —— shell —— */
@@ -20,23 +24,25 @@
   --shell-status-size: 10px;
   --shell-disabled-opacity: 0.55;
   --shell-z: var(--elcrm-z-popover, 1000);
+  --layout-height: 100dvh;
 
-  /* —— узкие —— */
+  /* —— header —— */
   --header-radius: var(--shell-radius);
   --header-height: 52px;
   --header-shadow: none;
   --header-margin: 0;
   --header-z: 20;
 
+  /* —— section / nav-sections —— */
   --section-padding: 1.5rem 1.75rem 2.5rem;
   --section-title-size: 1.5rem;
   --section-title-size-md: 1.25rem;
   --section-auth-card-max-width: 22rem;
-
-  --nav-sections-padding: 1.5rem 1.75rem 2.5rem;
+  --nav-sections-padding: var(--section-padding);
   --nav-sections-nav-width: 220px;
   --nav-sections-main-max-width: 720px;
 
+  /* —— avatar —— */
   --avatar-size-s: 1.5rem;
   --avatar-size-m: 2rem;
   --avatar-size-l: 2.75rem;
@@ -49,9 +55,43 @@
   --avatar-group-overlap: -0.4rem;
   --avatar-group-ring: 2px;
 
+  /* —— overlay / pricing / stack —— */
   --dropdown-min-width: 12rem;
   --dropdown-max-width: 20rem;
   --dropdown-max-height: 20rem;
   --pricing-card-min-width: 16rem;
   --pricing-table-label-width: 10rem;
+  --card-pointer: auto;
+  --stack-grid-min: 180px;
+  --stack-columns-template: minmax(0, 1fr);
+  --stat-value-size: 1.75rem;
+  --action-group-gap: var(--shell-gap-sm);
+
+  /* —— item-column —— */
+  --item-column-gap: var(--shell-gap);
+  --item-column-icon-size: 40px;
+  --item-column-icon-radius: var(--avatar-radius);
+  --item-column-title-size: var(--shell-font-size);
+  --item-column-title-line: 1.3;
+
+  /* —— sidebar —— */
+  --sidebar-width: 248px;
+  --sidebar-pad-x: var(--shell-gap);
+  --sidebar-pad-y: var(--shell-gap-lg);
+  --sidebar-block-radius: var(--shell-radius);
+  --sidebar-item-font-size: var(--shell-font-size-sm);
+  --sidebar-item-padding: 6px 10px;
+  --sidebar-icon-size: 16px;
+  --sidebar-group-font-size: 11px;
+
+  /* —— chat —— */
+  --chat-list-width: 340px;
+  --chat-split-gap: var(--shell-gap-lg);
+  --chat-radius: var(--shell-radius);
+  --chat-header-padding: var(--shell-gap);
+  --chat-body-padding: 0;
+  --chat-footer-padding: var(--shell-gap);
+  --chat-messages-header-padding: 14px 16px;
+  --chat-messages-body-padding: 16px 16px 20px;
+  --chat-messages-footer-padding: 10px 12px 12px;
 }

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+/** Размер UI elCRM: compact / default / large. */
+export type UiSize = "s" | "m" | "l";

package/dist/useControllableValue-CWqH1kpM.js

@@ -0,0 +1,10 @@
+import { useState as l } from "react";
+function V(r, o, t) {
+  const [u, c] = l(o), e = r !== void 0;
+  return [e ? r : u, (s) => {
+    e || c(s), t == null || t(s);
+  }];
+}
+export {
+  V as u
+};

package/dist/useControllableValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Controlled / uncontrolled значение (как `value` + `defaultValue` у групп).
+ */
+export declare function useControllableValue<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): [T | undefined, (next: T) => void];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elcrm/components",
-  "version": "0.1.1",
-  "description": "Shell UI elCRM: Layout, Header, PageHead, PageShell, Section, Stack, RadioGroup, Avatar и др.",
+  "version": "0.2.0",
+  "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, PageHead, PageShell, Section, Stack, Stat, ActionGroup, TextGroup, ItemColumn и др.",
   "type": "module",
   "author": "MaSkal <dev@elcrm.online>",
   "license": "MIT",
@@ -85,11 +85,14 @@
     "./package.json": "./package.json"
   },
   "scripts": {
+    "dev": "vite --config test/vite.config.ts",
     "build": "vite build",
     "postbuild": "node scripts/postbuild.mjs",
     "check:css": "node scripts/check-css-scoped.mjs",
     "check:tokens": "node scripts/check-tokens.mjs",
     "test": "vitest run",
+    "test:build": "vite build --config test/vite.config.ts",
+    "test:preview": "vite preview --config test/vite.config.ts",
     "prepublishOnly": "npm run check:css && npm run check:tokens && npm run test && npm run build",
     "pack:check": "npm pack --dry-run"
   },
@@ -104,6 +107,7 @@
     }
   },
   "devDependencies": {
+    "@elcrm/storybook": "file:../elCRM.storybook",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.13.10",
     "@types/react": "^18.2.66",

package/dist/Avatar-CyNXYvsa.js

@@ -1,101 +0,0 @@
-import a from "react";
-import { c as f } from "./cx-CcykAxZN.js";
-import './Avatar.css';const N = "car", g = "cav", h = "cas", y = "cam", A = "cal", C = "caa", x = "cai", z = "cab", B = "cao", F = "caf", e = {
-  r: N,
-  v: g,
-  s: h,
-  m: y,
-  l: A,
-  a: C,
-  i: x,
-  b: z,
-  o: B,
-  f: F
-};
-function U(t) {
-  const s = t.trim();
-  if (!s) return "?";
-  const n = s.split(/\s+/).filter(Boolean);
-  return n.length >= 2 ? (n[0][0] + n[1][0]).toUpperCase() : s.slice(0, 2).toUpperCase();
-}
-function D({ status: t }) {
-  return /* @__PURE__ */ a.createElement(
-    "span",
-    {
-      className: f(e.b, t === "online" ? e.o : e.f),
-      "data-status": t,
-      "aria-hidden": !0
-    }
-  );
-}
-function R({
-  src: t,
-  label: s,
-  children: n,
-  name: l,
-  status: o
-}) {
-  const c = t != null && t !== "" ? /* @__PURE__ */ a.createElement("img", { className: e.i, src: t, alt: s ?? "", draggable: !1 }) : n ?? (l != null ? U(l) : "?");
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("span", { className: e.v }, c), o != null ? /* @__PURE__ */ a.createElement(D, { status: o }) : null);
-}
-function j(t) {
-  const {
-    src: s,
-    alt: n,
-    name: l,
-    size: o = "m",
-    status: c,
-    active: i,
-    children: p,
-    className: b,
-    as: v = "span",
-    ...m
-  } = t, E = o === "s" ? e.s : o === "l" ? e.l : e.m, u = f(e.r, E, i && e.a, b), r = n ?? l, d = /* @__PURE__ */ a.createElement(
-    R,
-    {
-      src: s,
-      label: r,
-      name: l,
-      status: c,
-      children: p
-    }
-  );
-  return v === "button" ? /* @__PURE__ */ a.createElement(
-    "button",
-    {
-      type: "button",
-      className: u,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": c,
-      ...m
-    },
-    d
-  ) : v === "div" ? /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      className: u,
-      role: r ? "img" : void 0,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": c,
-      ...m
-    },
-    d
-  ) : /* @__PURE__ */ a.createElement(
-    "span",
-    {
-      className: u,
-      role: r ? "img" : void 0,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": c,
-      ...m
-    },
-    d
-  );
-}
-export {
-  j as A,
-  U as i
-};

package/dist/AvatarName-DhD3TytF.js

@@ -1,56 +0,0 @@
-import t from "react";
-import { A as v } from "./Avatar-CyNXYvsa.js";
-import { c as b } from "./cx-CcykAxZN.js";
-import './AvatarName.css';const g = "czr", y = "czc", A = "czt", h = "czd", x = "czs", C = "czm", F = "czl", e = {
-  r: g,
-  c: y,
-  t: A,
-  d: h,
-  s: x,
-  m: C,
-  l: F
-};
-function I(s, n) {
-  if (s != null && s !== "") return s;
-  if (typeof n == "string") return n;
-}
-function j(s) {
-  const {
-    src: n,
-    name: c,
-    title: m,
-    description: i,
-    size: a = "m",
-    status: f,
-    className: p,
-    children: z,
-    as: u = "div",
-    ...r
-  } = s, E = a === "s" ? e.s : a === "l" ? e.l : e.m, l = b(e.r, E, p), d = m ?? (typeof c == "string" ? c : void 0), N = I(c, m), o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(v, { src: n, name: N, size: a, status: f }), /* @__PURE__ */ t.createElement("span", { className: e.c }, d != null ? /* @__PURE__ */ t.createElement("span", { className: e.t }, d) : null, i != null ? /* @__PURE__ */ t.createElement("span", { className: e.d }, i) : null, z));
-  return u === "button" ? /* @__PURE__ */ t.createElement(
-    "button",
-    {
-      type: "button",
-      className: l,
-      ...r
-    },
-    o
-  ) : u === "a" ? /* @__PURE__ */ t.createElement(
-    "a",
-    {
-      className: l,
-      ...r
-    },
-    o
-  ) : /* @__PURE__ */ t.createElement(
-    "div",
-    {
-      className: l,
-      ...r
-    },
-    o
-  );
-}
-export {
-  j as A
-};

package/dist/Badge-l6nUkl-H.js

@@ -1,22 +0,0 @@
-import o from "react";
-import { c as e } from "./cx-CcykAxZN.js";
-import './Badge.css';const u = "cjr", d = "cjn", j = "cja", m = "cju", w = "cjw", i = "cjd", c = {
-  r: u,
-  n: d,
-  a: j,
-  u: m,
-  w,
-  d: i
-};
-function f({
-  tone: n = "neutral",
-  children: s,
-  className: a,
-  ...t
-}) {
-  const r = n === "accent" ? c.a : n === "success" ? c.u : n === "warning" ? c.w : n === "danger" ? c.d : c.n;
-  return /* @__PURE__ */ o.createElement("span", { className: e(c.r, r, a), ...t }, s);
-}
-export {
-  f as B
-};