@elcrm/components 0.2.7 → 0.2.9

package/README.md

@@ -31,6 +31,7 @@ import {
   ItemColumn,
   Card,
   ActionGroup,
+  Toolbar,
   TextGroup,
   Stat,
   Stack,
@@ -101,7 +102,8 @@ import { RadioGroup } from "@elcrm/components/RadioGroup";
 | **NavSections**        | Сайдбар + lazy-панель            | `groups` (`value`), `resolveSection`, `defaultValue`                                   |
 | **TabSections**        | Горизонтальные вкладки + lazy    | `items` (`value` + `badge`), `resolveSection`                                          |
 | **Card**               | Карточка                         | `title`, `--card-pointer`                                                              |
-| **ActionGroup**        | Тулбар действий                  | `label`, `items` и/или `children`                                                      |
+| **ActionGroup**        | Ряд иконок в карточке            | `label`, `items` и/или `children`                                                      |
+| **Toolbar**            | Фильтры одной высоты             | `size`, `width` (`l` = 100%, `s` = по контенту), `align`, `label`, `children`          |
 | **TextGroup**          | Title + description              | `title`, `description`, `size`                                                         |
 | **ItemColumn**         | Иконка + столбик в Item          | `icon`, `title`, `extra`, `aside`, `description`, `footer` / `meta`, `unread`          |
 | **Stat**               | Карточка-метрика                 | `label`, `value`, `tone`, `labelMuted`                                                 |
@@ -737,6 +739,7 @@ const resolve = createLazyResolver(
 --pricing-card-min-width / --pricing-table-label-width
 --card-pointer
 --stack-grid-min
+--toolbar-gap
 --healthmap-cell / --healthmap-gap / --healthmap-l0…l4
 --panel-info-width / --panel-info-width-min / --panel-info-overlay-max / --panel-info-backdrop
 --row-gap / --column-gap

package/dist/{Dropdown-CPTE4EEx.js → Dropdown-DosvDR13.js}

@@ -1,30 +1,31 @@
 import e from "react";
-import { C as f } from "./CheckIcon-FdB8fMEF.js";
-import { c as m } from "./cx-CcykAxZN.js";
-import { P as j } from "./Popover-DWdvZTuA.js";
-import { u as I } from "./useControllableValue-CWqH1kpM.js";
-import './Dropdown.css';const M = "crr", P = "crt", R = "crc", W = "crp", z = "crh", F = "crg", G = "crd", T = "cri", V = "crn", q = "crm", A = "crk", H = "crl", J = "cru", K = "crb", Q = "cro", U = "crf", X = "crx", Y = "cry", Z = "crv", n = {
-  r: M,
-  t: P,
-  c: R,
-  p: W,
-  h: z,
-  g: F,
-  d: G,
-  i: T,
-  n: V,
-  m: q,
-  k: A,
-  l: H,
-  u: J,
-  b: K,
-  o: Q,
-  f: U,
-  x: X,
-  y: Y,
-  v: Z
+import { C as E } from "./CheckIcon-FdB8fMEF.js";
+import { c as p } from "./cx-CcykAxZN.js";
+import { P as M } from "./Popover-DWdvZTuA.js";
+import { u as P } from "./Toolbar-C1zAk9ak.js";
+import { u as R } from "./useControllableValue-CWqH1kpM.js";
+import './Dropdown.css';const T = "crr", W = "crt", F = "crc", G = "crp", V = "crh", q = "crg", A = "crd", H = "cri", J = "crn", K = "crm", Q = "crk", U = "crl", X = "cru", Y = "crb", Z = "cro", _ = "crf", $ = "crx", S = "cry", ee = "crv", n = {
+  r: T,
+  t: W,
+  c: F,
+  p: G,
+  h: V,
+  g: q,
+  d: A,
+  i: H,
+  n: J,
+  m: K,
+  k: Q,
+  l: U,
+  u: X,
+  b: Y,
+  o: Z,
+  f: _,
+  x: $,
+  y: S,
+  v: ee
 };
-function _() {
+function ne() {
   return /* @__PURE__ */ e.createElement("svg", { className: n.c, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
     "path",
     {
@@ -37,7 +38,7 @@ function _() {
     }
   ));
 }
-function $() {
+function ce() {
   return /* @__PURE__ */ e.createElement("svg", { className: n.m, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
     "path",
     {
@@ -50,74 +51,76 @@ function $() {
     }
   ));
 }
-function S({ 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(
+function re({ item: a }) {
+  return a.checkbox ? /* @__PURE__ */ e.createElement("span", { className: p(n.x, a.checked && n.y), "aria-hidden": !0 }, a.checked ? /* @__PURE__ */ e.createElement(E, { className: n.v }) : null) : a.checked ? /* @__PURE__ */ e.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(E, { className: n.v })) : a.status != null ? /* @__PURE__ */ e.createElement(
     "span",
     {
-      className: m(n.b, a.status === "online" ? n.o : n.f),
+      className: p(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 ee(a, t, l) {
+function ae(a, t, l) {
   return t != null && t.length > 0 ? l != null && t[0] && t[0].title == null ? [{ ...t[0], title: l }, ...t.slice(1)] : t : a != null && a.length > 0 ? [{ title: l, items: a }] : l != null ? [{ title: l, items: [] }] : [];
 }
-function le({
+function ie({
   items: a,
   groups: t,
   trigger: l,
   label: o,
-  hideChevron: E = !1,
-  title: v,
+  hideChevron: v = !1,
+  title: b,
   align: k = "end",
-  placement: b = "auto",
-  open: N,
-  defaultOpen: x = !1,
-  onOpenChange: C,
-  closeOnSelect: y = !0,
+  placement: N = "auto",
+  open: x,
+  defaultOpen: C = !1,
+  onOpenChange: y,
+  closeOnSelect: g = !0,
   disabled: u = !1,
+  size: L,
   onSelect: d,
-  className: g
+  className: z
 }) {
-  const [i = !1, p] = I(
-    N,
+  const i = P(), w = L ?? (i == null ? void 0 : i.size), [h = !1, f] = R(
     x,
-    C
-  ), L = ee(a, t, v), w = (r) => {
+    C,
+    y
+  ), O = ae(a, t, b), B = (r) => {
     var c;
     if (r.disabled) return;
-    (c = r.onClick) == null || c.call(r), d == null || d(r.value, r), r.checkbox || r.submenu || !y || p(!1);
-  }, O = l ?? /* @__PURE__ */ e.createElement(
+    (c = r.onClick) == null || c.call(r), d == null || d(r.value, r), r.checkbox || r.submenu || !g || f(!1);
+  }, D = l ?? /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
       className: n.t,
-      "data-open": i ? "true" : void 0,
+      "data-size": w,
+      "data-open": h ? "true" : void 0,
       disabled: u,
       "aria-haspopup": "menu",
-      "aria-expanded": i
+      "aria-expanded": h
     },
     o,
-    E ? null : /* @__PURE__ */ e.createElement(_, null)
+    v ? null : /* @__PURE__ */ e.createElement(ne, null)
   );
   return /* @__PURE__ */ e.createElement(
-    j,
+    M,
     {
-      className: m(n.r, g),
-      open: i,
+      className: p(n.r, z),
+      open: h,
       onOpenChange: (r) => {
-        u || p(r);
+        u || f(r);
       },
       align: k,
-      placement: b,
-      trigger: O,
+      placement: N,
+      trigger: D,
       label: typeof o == "string" ? o : void 0,
       disabled: u
     },
-    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": k }, L.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 B = r.items.some(
+    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": k }, O.map((r, m) => /* @__PURE__ */ e.createElement(e.Fragment, { key: m }, m > 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 j = r.items.some(
         (s) => s.checked || s.checkbox || s.status != null || s.icon != null
-      ), D = /* @__PURE__ */ e.createElement(S, { item: c });
+      ), I = /* @__PURE__ */ e.createElement(re, { item: c });
       return /* @__PURE__ */ e.createElement(
         "button",
         {
@@ -129,16 +132,16 @@ function le({
           "data-danger": c.danger ? "true" : void 0,
           disabled: c.disabled,
           "aria-checked": c.checked != null || c.checkbox ? !!c.checked : void 0,
-          onClick: () => w(c)
+          onClick: () => B(c)
         },
-        B ? D ?? /* @__PURE__ */ e.createElement("span", { className: n.n, "aria-hidden": !0 }) : null,
+        j ? I ?? /* @__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
+        c.submenu ? /* @__PURE__ */ e.createElement(ce, null) : null
       );
     })))))
   );
 }
 export {
-  le as D
+  ie as D
 };

package/dist/Dropdown.css

@@ -1 +1 @@
-@layer elcrm-components{.crr{position:relative;display:inline-flex;vertical-align:middle}.crt{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:var(--shell-padding);box-sizing:border-box;font:inherit;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.2}.crt:hover{background:var(--shell-background-hover)}.crt[data-open=true]{border-color:var(--shell-color-accent);color:var(--shell-color-accent)}.crc{display:inline-flex;width:var(--shell-icon-size);height:var(--shell-icon-size);flex-shrink:0;color:var(--shell-color-muted)}.crt[data-open=true] .crc{color:var(--shell-color-accent)}.crp{min-width:0}.crh{margin:0;padding:var(--shell-padding);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.crg{display:flex;flex-direction:column;gap:2px}.crd{height:0;margin:var(--shell-gap-sm) 0;border:0;border-top:1px solid var(--shell-border)}.cri{display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;font-size:var(--shell-font-size);font-weight:500;color:var(--shell-color);background:transparent;border:none;border-radius:calc(var(--shell-radius) * .7);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}.cri:hover:not(:disabled),.cri:focus-visible:not(:disabled){background:var(--shell-background-hover);outline:none}.cri[data-checked=true]{background:var(--shell-background-selected)}.cri[data-danger=true]{color:var(--shell-color-danger)}.cri[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}}
+@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[data-size]{height:var(--control-height);min-height:var(--control-height);padding-block:0;box-sizing:border-box}.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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { UiSize } from './types';
 /**
  * Пункт выпадающего меню {@link Dropdown}.
  *
@@ -82,6 +83,11 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
     closeOnSelect?: boolean;
     /** Заблокировать триггер. */
     disabled?: boolean;
+    /**
+     * Высота встроенного триггера (`--control-height`).
+     * Внутри {@link Toolbar} берётся из тулбара, если не задан.
+     */
+    size?: UiSize;
     /** Выбор пункта: `value` + сам item. */
     onSelect?: (value: string, item: DropdownItem) => void;
 };
@@ -127,4 +133,4 @@ export type DropdownProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange
  * />
  * ```
  */
-export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, placement, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, onSelect, className, }: DropdownProps): React.JSX.Element;
+export declare function Dropdown({ items, groups, trigger, label, hideChevron, title, align, placement, open: openProp, defaultOpen, onOpenChange, closeOnSelect, disabled, size: sizeProp, onSelect, className, }: DropdownProps): React.JSX.Element;

package/dist/Dropdown.js

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

package/dist/{Sidebar-1EH4XCEl.js → Sidebar-BgZiGEDH.js}

@@ -1,6 +1,6 @@
 import e from "react";
 import { B as h } from "./Badge-jp-9iNNL.js";
-import { D as w } from "./Dropdown-CPTE4EEx.js";
+import { D as w } from "./Dropdown-DosvDR13.js";
 import { I as y } from "./Item-D4okhsfW.js";
 import { b as C } from "./badgeText-CRzlIzi3.js";
 import { c as u } from "./cx-CcykAxZN.js";

package/dist/Sidebar.js

@@ -1,4 +1,4 @@
-import { S as e } from "./Sidebar-1EH4XCEl.js";
+import { S as e } from "./Sidebar-BgZiGEDH.js";
 export {
   e as Sidebar
 };

package/dist/Toolbar-C1zAk9ak.js

@@ -0,0 +1,42 @@
+import t from "react";
+import { c as i } from "./cx-CcykAxZN.js";
+import './Toolbar.css';const m = "cCr", f = {
+  r: m
+}, a = t.createContext(null);
+function x() {
+  return t.useContext(a);
+}
+function s(e, n) {
+  return t.Children.map(e, (r) => t.isValidElement(r) ? r.type === t.Fragment ? s(
+    r.props.children,
+    n
+  ) : typeof r.type == "string" || r.props.size != null ? r : t.cloneElement(r, { size: n }) : r);
+}
+function C({
+  size: e = "s",
+  label: n = "Тулбар",
+  align: r = "start",
+  width: o = "l",
+  className: l,
+  children: p,
+  ...u
+}) {
+  return /* @__PURE__ */ t.createElement(a.Provider, { value: { size: e } }, /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      className: i(f.r, l),
+      role: "toolbar",
+      "aria-label": n,
+      "data-size": e,
+      "data-align": r,
+      "data-width": o,
+      ...u
+    },
+    s(p, e)
+  ));
+}
+export {
+  C as T,
+  s as a,
+  x as u
+};

package/dist/Toolbar.css

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

package/dist/Toolbar.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+import { UiSize } from './types';
+/** Контекст размера тулбара — дети без своего `size` его подхватывают. */
+export type ToolbarContextValue = {
+    size: UiSize;
+};
+/** Размер ближайшего {@link Toolbar}, либо `null` вне тулбара. */
+export declare function useToolbar(): ToolbarContextValue | null;
+export type ToolbarAlign = "start" | "center" | "end" | "between";
+/** Ширина ряда: `l` — 100%, `s` — по содержимому (как `width` у Button). */
+export type ToolbarWidth = "s" | "l";
+export type ToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * Общий размер вложенных Field / Search / Button / Dropdown / Badge.
+     * Явный `size` у ребёнка важнее.
+     * @default "s"
+     */
+    size?: UiSize;
+    /** Подпись для `aria-label`. */
+    label?: string;
+    /**
+     * Направление ряда (`justify-content`).
+     * @default "start"
+     */
+    align?: ToolbarAlign;
+    /**
+     * Ширина корня: `l` — `100%` (фильтры над списком),
+     * `s` — по контенту (компактный ряд, не растягивать).
+     * @default "l"
+     */
+    width?: ToolbarWidth;
+    /**
+     * Узлы тулбара (`*Field`, `Search`, `Button`, `Dropdown`, …).
+     * Компонентам без `size` прокидывается размер тулбара.
+     */
+    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-*`.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar size="s" align="end" label="Фильтры">
+ *   <Search value={q} onValue={setQ} />
+ *   <Button label="Создать" />
+ * </Toolbar>
+ * <Toolbar width="s" align="center">
+ *   <Button label="Отмена" />
+ *   <Button label="Сохранить" />
+ * </Toolbar>
+ * ```
+ *
+ * Токены: `--toolbar-gap`, `--control-height-*`, `--button-height-*`.
+ */
+export declare function Toolbar({ size, label, align, width, className, children, ...rest }: ToolbarProps): React.JSX.Element;

package/dist/Toolbar.js

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

package/dist/index.css

@@ -16,7 +16,7 @@
 
 @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}}
 
-@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}}
+@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[data-size]{height:var(--control-height);min-height:var(--control-height);padding-block:0;box-sizing:border-box}.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}}
 
 @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)}}
 
@@ -65,3 +65,5 @@
 @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{.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{.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)}}

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export { Card } from './Card';
 export type { CardProps } from './Card';
 export { ActionGroup } from './ActionGroup';
 export type { ActionGroupProps } from './ActionGroup';
+export { Toolbar, useToolbar, applyToolbarSize } from './Toolbar';
+export type { ToolbarProps, ToolbarAlign, ToolbarWidth, ToolbarContextValue, } from './Toolbar';
 export { TextGroup } from './TextGroup';
 export type { TextGroupProps } from './TextGroup';
 export { Stat } from './Stat';

package/dist/index.es.d.ts

@@ -14,6 +14,8 @@ export { Card } from './Card';
 export type { CardProps } from './Card';
 export { ActionGroup } from './ActionGroup';
 export type { ActionGroupProps } from './ActionGroup';
+export { Toolbar, useToolbar, applyToolbarSize } from './Toolbar';
+export type { ToolbarProps, ToolbarAlign, ToolbarWidth, ToolbarContextValue, } from './Toolbar';
 export { TextGroup } from './TextGroup';
 export type { TextGroupProps } from './TextGroup';
 export { Stat } from './Stat';