@elcrm/components 0.2.13 → 0.5.1

package/dist/TabSections.css

@@ -1 +1 @@
-@layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:var(--avatar-color);font-size:var(--sidebar-group-font-size);font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ctm{min-width:0;width:100%}}
+@layer elcrm-components{.ntr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ntb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ntn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ntt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ntt:hover:not(:disabled){color:var(--shell-color)}.nta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ntt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.nte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:var(--avatar-color);font-size:var(--sidebar-group-font-size);font-style:normal;font-weight:700;line-height:1}.nts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ntm{min-width:0;width:100%}}

package/dist/TabSections.d.ts

@@ -29,8 +29,13 @@ export type TabSectionsProps = {
     /**
      * Резолвер панели по `value`.
      * Обычно: `createLazyResolver((v) => import(\`./sections/${v}.tsx\`))`.
+     * Не нужен, если передали `children`.
      */
-    resolveSection: (value: string) => LazyRouteChunk | React.ComponentType;
+    resolveSection?: (value: string) => LazyRouteChunk | React.ComponentType;
+    /**
+     * Готовая панель без lazy (вместо `resolveSection`).
+     */
+    children?: React.ReactNode;
     /** Контролируемый активный `value`. */
     value?: string;
     /** Начальный `value` (неконтролируемый режим). */
@@ -84,4 +89,4 @@ export type TabSectionsProps = {
  * />
  * ```
  */
-export declare function TabSections({ items, resolveSection, value: valueProp, defaultValue, onValueChange, loading, actions, className, navLabel, }: TabSectionsProps): React.JSX.Element;
+export declare function TabSections({ items, resolveSection, children, value: valueProp, defaultValue, onValueChange, loading, actions, className, navLabel, }: TabSectionsProps): React.JSX.Element;

package/dist/TabSections.js

@@ -1,4 +1,4 @@
-import { T as e } from "./TabSections-DN7yVJoF.js";
+import { T as e } from "./TabSections-Dppe9wiz.js";
 export {
   e as TabSections
 };

package/dist/Table-DqrDUUtb.js

@@ -0,0 +1,27 @@
+import e from "react";
+import { c as a } from "./cx-CcykAxZN.js";
+import './Table.css';const l = "dtw", n = "dtt", d = "dtf", f = "dts", t = {
+  wrap: l,
+  table: n,
+  fixed: d,
+  sticky: f
+};
+function x({
+  layout: s = "auto",
+  stickyHeader: c = !1,
+  className: o,
+  children: r,
+  ...i
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: a(t.wrap, c && t.sticky) }, /* @__PURE__ */ e.createElement(
+    "table",
+    {
+      className: a(t.table, s === "fixed" && t.fixed, o),
+      ...i
+    },
+    r
+  ));
+}
+export {
+  x as T
+};

package/dist/Table.css

@@ -1 +1 @@
-@layer elcrm-components{.cDw{overflow:auto}.cDt{width:100%;border-collapse:collapse;font-size:var(--table-font-size);color:var(--shell-color)}.cDf{table-layout:fixed}.cDt th,.cDt td{padding:var(--table-cell-padding);border-bottom:1px solid var(--shell-border);text-align:left;vertical-align:top}.cDt th{color:var(--shell-color-muted);font-weight:var(--shell-font-weight);font-size:var(--table-head-font-size);text-transform:uppercase;letter-spacing:.04em}.cDt code{font-size:var(--table-code-font-size)}}
+@layer elcrm-components{.dtw{overflow:auto;max-height:var(--table-max-height, none)}.dtt{width:100%;border-collapse:collapse;font-size:var(--table-font-size);color:var(--shell-color)}.dtf{table-layout:fixed}.dtt th,.dtt td{padding:var(--table-cell-padding);border-bottom:1px solid var(--shell-border);text-align:left;vertical-align:top}.dtt th{color:var(--shell-color-muted);font-weight:var(--shell-font-weight);font-size:var(--table-head-font-size);text-transform:uppercase;letter-spacing:.04em}.dtt code{font-size:var(--table-code-font-size)}.dts .dtt thead th{position:sticky;top:0;z-index:1;background:var(--table-head-background, var(--shell-background));box-shadow:0 1px 0 var(--shell-border)}}

package/dist/Table.d.ts

@@ -2,13 +2,21 @@ import { default as React } from 'react';
 export type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
     /** `fixed` — равномерные колонки, ширины через col/colgroup в children. */
     layout?: "auto" | "fixed";
+    /**
+     * Липкий `<thead>` при скролле обёртки.
+     * Фон шапки: `--table-head-background` (иначе `--shell-background`).
+     */
+    stickyHeader?: boolean;
 };
 /**
  * Таблица данных: обёртка со скроллом + стили shell.
  *
+ * Подпись таблицы — нативный `<caption>` в `children` (a11y).
+ *
  * @example
  * ```tsx
- * <Table>
+ * <Table stickyHeader>
+ *   <caption className="sr-only">Пользователи</caption>
  *   <thead>
  *     <tr>
  *       <th>Имя</th>
@@ -26,4 +34,4 @@ export type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
  *
  * Токены: `--table-*`, `--shell-border`, `--shell-color`.
  */
-export declare function Table({ layout, className, children, ...rest }: TableProps): React.JSX.Element;
+export declare function Table({ layout, stickyHeader, className, children, ...rest }: TableProps): React.JSX.Element;

package/dist/Table.js

@@ -1,4 +1,4 @@
-import { T as o } from "./Table-BoDr3X2d.js";
+import { T as o } from "./Table-DqrDUUtb.js";
 export {
   o as Table
 };

package/dist/Text-Bo1u7gVC.js

@@ -0,0 +1,25 @@
+import s from "react";
+import { c as a } from "./cx-CcykAxZN.js";
+import './Text.css';const n = "txr", u = "txm", t = {
+  root: n,
+  muted: u
+};
+function f({
+  tone: o = "default",
+  as: e = "p",
+  className: r,
+  children: m,
+  ...c
+}) {
+  return /* @__PURE__ */ s.createElement(
+    e,
+    {
+      className: a(t.root, o === "muted" && t.muted, r),
+      ...c
+    },
+    m
+  );
+}
+export {
+  f as T
+};

package/dist/Text.css

@@ -0,0 +1 @@
+@layer elcrm-components{.txr{margin:0;font-size:.9rem;line-height:1.45;color:var(--shell-color)}.txm{color:var(--shell-color-muted)}}

package/dist/Text.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type TextTone = "default" | "muted";
+export type TextProps = React.HTMLAttributes<HTMLElement> & {
+    /** Семантика цвета: default = `--shell-color`, muted = `--shell-color-muted` */
+    tone?: TextTone;
+    /** HTML-тег */
+    as?: "p" | "span" | "div" | "label" | "strong" | "em";
+};
+/**
+ * Короткий текст с тоном. Для пары title+description — {@link TextGroup}.
+ *
+ * @example
+ * ```tsx
+ * <Text tone="muted">Ничего не найдено</Text>
+ * ```
+ *
+ * Токены: `--shell-color`, `--shell-color-muted`, `--shell-font-size`.
+ */
+export declare function Text({ tone, as: Tag, className, children, ...rest }: TextProps): React.JSX.Element;

package/dist/Text.js

@@ -0,0 +1,4 @@
+import { T as r } from "./Text-Bo1u7gVC.js";
+export {
+  r as Text
+};

package/dist/TextGroup-236jHxdT.js

@@ -0,0 +1,23 @@
+import l from "react";
+import { c as m } from "./cx-CcykAxZN.js";
+import './TextGroup.css';const g = "tgr", u = "tgt", d = "tgd", i = "tgs", p = "tgl", t = {
+  root: g,
+  title: u,
+  desc: d,
+  small: i,
+  large: p
+};
+function E({
+  title: s,
+  description: e,
+  size: a = "m",
+  children: o,
+  className: c,
+  ...n
+}) {
+  const r = a === "s" ? t.small : a === "l" ? t.large : void 0;
+  return /* @__PURE__ */ l.createElement("div", { className: m(t.root, r, c), ...n }, s != null ? /* @__PURE__ */ l.createElement("span", { className: t.title }, s) : null, e != null ? /* @__PURE__ */ l.createElement("span", { className: t.desc }, e) : null, o);
+}
+export {
+  E as T
+};

package/dist/TextGroup.css

@@ -1 +1 @@
-@layer elcrm-components{.c6r{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}.c6t{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c6d{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c6s .c6t{font-size:var(--shell-font-size-sm)}.c6l .c6t{font-size:var(--shell-font-size-lg)}.c6l .c6d{font-size:var(--shell-font-size)}}
+@layer elcrm-components{.tgr{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}.tgt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tgd{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tgs .tgt{font-size:var(--shell-font-size-sm)}.tgl .tgt{font-size:var(--shell-font-size-lg)}.tgl .tgd{font-size:var(--shell-font-size)}}

package/dist/TextGroup.js

@@ -1,4 +1,4 @@
-import { T as e } from "./TextGroup-DmhuyMR1.js";
+import { T as e } from "./TextGroup-236jHxdT.js";
 export {
   e as TextGroup
 };

package/dist/Toolbar-Bl9-5Mis.js

@@ -0,0 +1,35 @@
+import t from "react";
+import { c as i } from "./cx-CcykAxZN.js";
+import './Toolbar.css';const u = "kwr", m = {
+  root: u
+}, a = t.createContext(null);
+function x() {
+  return t.useContext(a);
+}
+function f({
+  size: o = "s",
+  label: r = "Тулбар",
+  align: e = "start",
+  width: n = "l",
+  className: l,
+  children: s,
+  ...c
+}) {
+  return /* @__PURE__ */ t.createElement(a.Provider, { value: { size: o } }, /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: i(m.root, l),
+      role: "toolbar",
+      "aria-label": r,
+      "data-size": o,
+      "data-align": e,
+      "data-width": n,
+      ...c
+    },
+    s
+  ));
+}
+export {
+  f as T,
+  x as u
+};

package/dist/Toolbar.css

@@ -1 +1 @@
-@layer elcrm-components{.cCr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--toolbar-gap);width:100%;min-width:0;box-sizing:border-box;--field-width: auto}.cCr>[data-field]{flex:0 1 auto;width:auto;min-width:0;max-width:100%}.cCr>[data-field=search]{flex:1 1 var(--field-search-min-width, 10rem);width:auto!important;max-width:none}.cCr[data-width=s]{display:inline-flex;width:auto;max-width:100%}.cCr[data-align=center]{justify-content:center}.cCr[data-align=end]{justify-content:flex-end}.cCr[data-align=between]{justify-content:space-between}.cCr[data-size=s]{--control-height: var(--control-height-s);--field-height: var(--control-height-s);--control-font-size: 13px;--button-height: var(--button-height-s);--button-height-m: var(--button-height-s);--button-padding: var(--button-padding-s);--button-size-m: var(--button-size-s)}.cCr[data-size=l]{--control-height: var(--control-height-l);--field-height: var(--control-height-l);--button-height: var(--button-height-l);--button-height-m: var(--button-height-l);--button-size-m: var(--button-size-l)}}
+@layer elcrm-components{.kwr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--toolbar-gap);width:100%;min-width:0;box-sizing:border-box;--field-width: auto}.kwr>[data-field]{flex:0 1 auto;width:auto;min-width:0;max-width:100%}.kwr>[data-field=search]{flex:1 1 var(--field-search-min-width, 10rem);width:auto;max-width:none}.kwr[data-width=s]{display:inline-flex;width:auto;max-width:100%}.kwr[data-align=center]{justify-content:center}.kwr[data-align=end]{justify-content:flex-end}.kwr[data-align=between]{justify-content:space-between}.kwr[data-size=s]{--control-height: var(--control-height-s);--field-height: var(--control-height-s);--control-font-size: var(--control-font-size-s, .8125rem);--button-height: var(--button-height-s)}.kwr[data-size=l]{--control-height: var(--control-height-l);--field-height: var(--control-height-l);--button-height: var(--button-height-l)}}

package/dist/Toolbar.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { UiSize } from './types';
-/** Контекст размера тулбара — дети без своего `size` его подхватывают. */
+/** Контекст размера тулбара — дети читают через {@link useToolbar}. */
 export type ToolbarContextValue = {
     size: UiSize;
 };
@@ -11,8 +11,8 @@ export type ToolbarAlign = "start" | "center" | "end" | "between";
 export type ToolbarWidth = "s" | "l";
 export type ToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /**
-     * Общий размер вложенных Field / Search / Button / Dropdown / Badge.
-     * Явный `size` у ребёнка важнее.
+     * Общий размер: токены `data-size` + {@link useToolbar}.
+     * Явный `size` у ребёнка важнее контекста.
      * @default "s"
      */
     size?: UiSize;
@@ -31,20 +31,19 @@ export type ToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"
     width?: ToolbarWidth;
     /**
      * Узлы тулбара (`*Field`, `Search`, `Button`, `Dropdown`, …).
-     * Компонентам без `size` прокидывается размер тулбара.
+     * Размер — через контекст / CSS, не через cloneElement.
      */
     children?: React.ReactNode;
 };
-/** Прокинуть `size` прямым детям-компонентам, если у них его ещё нет. */
-export declare function applyToolbarSize(node: React.ReactNode, size: UiSize): React.ReactNode;
 /**
  * Ряд контролов одной высоты: поиск, поля, кнопки, меню.
  *
  * Роли: Toolbar = фильтры / действия над списком (`PageHead.children`).
  * Иконки в карточке — `ActionGroup`.
  *
- * Пакет не зависит от `@elcrm/form` / `@elcrm/button`:
- * размер уходит пропом `size` и токенами `--field-height` / `--button-height-*`.
+ * Размер:
+ * - CSS: `data-size` → `--control-height` / `--field-height` / `--button-height`;
+ * - JS: {@link useToolbar} (как {@link Dropdown}).
  *
  * @example
  * ```tsx
@@ -52,10 +51,6 @@ export declare function applyToolbarSize(node: React.ReactNode, size: UiSize): R
  *   <Search value={q} onValue={setQ} />
  *   <Button label="Создать" />
  * </Toolbar>
- * <Toolbar width="s" align="center">
- *   <Button label="Отмена" />
- *   <Button label="Сохранить" />
- * </Toolbar>
  * ```
  *
  * Токены: `--toolbar-gap`, `--control-height-*`, `--button-height-*`.

package/dist/Toolbar.js

@@ -1,6 +1,5 @@
-import { T as r, a as l, u as s } from "./Toolbar-C1zAk9ak.js";
+import { T as r, u as s } from "./Toolbar-Bl9-5Mis.js";
 export {
   r as Toolbar,
-  l as applyToolbarSize,
   s as useToolbar
 };

package/dist/cx.d.ts

@@ -3,7 +3,7 @@
  *
  * @example
  * ```ts
- * cx(s.r, active && s.a, className) // → "cr c a my"
+ * cx(s.root, active && s.active, className)
  * ```
  */
 export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/dark.css

@@ -23,6 +23,18 @@ body[data-theme="dark"] {
   --sidebar-item-active: var(--shell-color);
   --sidebar-item-active-bg: var(--shell-background-selected);
   --sidebar-icon-active: var(--shell-color-accent);
+  /* панель аккаунта — цвета текущей темы */
+  --sidebar-account-menu-bg: var(--shell-background);
+  --sidebar-account-menu-color: var(--shell-color);
+  --sidebar-account-menu-border: var(--shell-border);
+  --sidebar-account-menu-shadow: var(--popup-shadow, var(--shell-shadow));
+  --sidebar-account-item-hover: var(--shell-background-hover);
+  --sidebar-account-item-icon: var(--shell-color-muted);
+  --sidebar-account-danger-hover: color-mix(
+    in srgb,
+    var(--shell-color-danger) 14%,
+    transparent
+  );
 
   --avatar-background: var(--shell-color-accent);
   --avatar-color: var(--button-primary-fg);