@elcrm/components 0.2.6 → 0.2.8

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,9 @@ 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
 --popup-shadow
 ```

package/dist/{Dropdown-B9AodUFf.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-D5RymtcJ.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-B9AodUFf.js";
+import { D as p } from "./Dropdown-DosvDR13.js";
 export {
   p as Dropdown
 };

package/dist/Healthmap-B6cdiLUl.js

@@ -0,0 +1,243 @@
+import e, { useState as L, useMemo as Y, useEffect as X } from "react";
+import { createPortal as ee } from "react-dom";
+import { c as j } from "./cx-CcykAxZN.js";
+import './Healthmap.css';const te = "hAr", ne = "hAc", se = "hAa", ae = "hAh", le = "hAt", ce = "hAm", re = "hAo", oe = "hAn", me = "hAd", ie = "hAw", ue = "hAk", he = "hAe", pe = "hAf", Ee = "hAi", fe = "hAg", ge = "hAb", ye = "hAp", be = "hAq", ve = "hAv", Ne = "hAl", de = "hAz", Te = "hAj", Ae = "hAu", ke = "hAx", we = "hAs", De = "hAy", n = {
+  r: te,
+  c: ne,
+  a: se,
+  h: ae,
+  t: le,
+  m: ce,
+  o: re,
+  n: oe,
+  d: me,
+  w: ie,
+  k: ue,
+  e: he,
+  f: pe,
+  i: Ee,
+  g: fe,
+  b: ge,
+  p: ye,
+  q: be,
+  v: ve,
+  l: Ne,
+  z: de,
+  j: Te,
+  u: Ae,
+  x: ke,
+  s: we,
+  y: De
+}, f = 5, _ = 12, B = 3, z = _ + B, Ue = [
+  "янв",
+  "фев",
+  "мар",
+  "апр",
+  "май",
+  "июн",
+  "июл",
+  "авг",
+  "сен",
+  "окт",
+  "ноя",
+  "дек"
+], xe = {
+  one: "действие",
+  few: "действия",
+  many: "действий"
+};
+function x(t) {
+  const [l, a, m] = t.split("-").map(Number);
+  return new Date(Date.UTC(l, a - 1, m));
+}
+function Ce(t, l) {
+  if (t <= 0) return 0;
+  if (l <= 1) return 4;
+  const a = t / l;
+  return a > 0.75 ? 4 : a > 0.5 ? 3 : a > 0.25 ? 2 : 1;
+}
+function T(t, l) {
+  const a = t % 10, m = t % 100;
+  return a === 1 && m !== 11 ? l.one : a >= 2 && a <= 4 && (m < 10 || m >= 20) ? l.few : l.many;
+}
+function $e(t) {
+  return T(t, { one: "день", few: "дня", many: "дней" });
+}
+function H(t) {
+  return x(t).toLocaleDateString("ru-RU", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC"
+  });
+}
+function Me(t) {
+  let l = 0;
+  for (let a = t.length - 1; a >= 0; a--) {
+    if (t[a].count <= 0) {
+      if (l === 0) continue;
+      break;
+    }
+    l++;
+  }
+  return l;
+}
+function Re({
+  data: t,
+  loading: l = !1,
+  year: a = null,
+  onYearChange: m,
+  hint: G,
+  brandName: O = "Активность",
+  brandSub: I = "сводка",
+  unit: A = xe,
+  className: Z
+}) {
+  const [g, k] = L(0), [p, w] = L(null), i = Y(() => {
+    var P;
+    if (!((P = t == null ? void 0 : t.days) != null && P.length))
+      return {
+        weeks: [],
+        months: [],
+        streak: 0,
+        activeDays: 0,
+        bestDay: 0
+      };
+    const s = Math.max(1, ...t.days.map((o) => o.count)), h = new Map(t.days.map((o) => [o.date, o.count])), c = x(t.from), u = x(t.to), M = c.getUTCDay(), Q = M === 0 ? -6 : 1 - M, r = new Date(c);
+    r.setUTCDate(r.getUTCDate() + Q);
+    const E = [], S = [];
+    let F = -1;
+    for (; r.getTime() <= u.getTime() || E.length === 0; ) {
+      const o = [];
+      for (let U = 0; U < 7; U++) {
+        const V = r.getUTCFullYear(), N = r.getUTCMonth(), W = r.getUTCDate(), R = `${V}-${String(N + 1).padStart(2, "0")}-${String(W).padStart(2, "0")}`, d = r.getTime() >= c.getTime() && r.getTime() <= u.getTime(), q = d ? h.get(R) ?? 0 : 0;
+        U === 0 && d && N !== F && (S.push({ label: Ue[N], col: E.length }), F = N), o.push({
+          date: R,
+          count: d ? q : 0,
+          level: d ? Ce(q, s) : 0
+        }), r.setUTCDate(r.getUTCDate() + 1);
+      }
+      if (E.push(o), r.getTime() > u.getTime() && E.length >= 52 || E.length > 60) break;
+    }
+    return {
+      weeks: E,
+      months: S,
+      streak: Me(t.days),
+      activeDays: t.days.filter((o) => o.count > 0).length,
+      bestDay: Math.max(0, ...t.days.map((o) => o.count))
+    };
+  }, [t]), y = Y(() => {
+    var h;
+    const s = (h = t == null ? void 0 : t.years) != null && h.length ? [...t.years] : [(/* @__PURE__ */ new Date()).getUTCFullYear(), (/* @__PURE__ */ new Date()).getUTCFullYear() - 1];
+    return [...new Set(s)].sort((c, u) => u - c);
+  }, [t == null ? void 0 : t.years]), D = (/* @__PURE__ */ new Date()).getUTCFullYear(), b = a ?? (t == null ? void 0 : t.year) ?? D, C = (t == null ? void 0 : t.total) ?? 0, v = Math.max(1, Math.ceil(y.length / f));
+  X(() => {
+    const s = y.indexOf(b);
+    s < 0 || k(Math.floor(s / f));
+  }, [b, y]);
+  const J = y.slice(
+    g * f,
+    g * f + f
+  );
+  function $(s, h) {
+    const c = h.getBoundingClientRect();
+    w({
+      date: s.date,
+      count: s.count,
+      x: c.left + c.width / 2,
+      y: c.top
+    });
+  }
+  const K = l ? "Загрузка…" : `${C} ${T(C, A)} за ${a == null || a === D ? "последний год" : `${a} год`}`;
+  return /* @__PURE__ */ e.createElement("div", { className: j(n.r, Z) }, /* @__PURE__ */ e.createElement("section", { className: n.c, "aria-label": "Календарь активности" }, /* @__PURE__ */ e.createElement("div", { className: n.h }, /* @__PURE__ */ e.createElement("h3", { className: n.t }, K)), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: n.m,
+      "aria-hidden": !0,
+      style: {
+        width: i.weeks.length ? i.weeks.length * z - B : void 0
+      }
+    },
+    i.months.map((s) => /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        key: `${s.label}-${s.col}`,
+        className: n.o,
+        style: { left: s.col * z }
+      },
+      s.label
+    ))
+  ), /* @__PURE__ */ e.createElement("div", { className: n.n }, /* @__PURE__ */ e.createElement("div", { className: n.d, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("span", null, "Пн"), /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("span", null, "Ср"), /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("span", null, "Пт"), /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("span", null)), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: n.w,
+      style: {
+        gridTemplateColumns: `repeat(${i.weeks.length}, ${_}px)`
+      },
+      role: "grid",
+      "aria-label": "График активности"
+    },
+    i.weeks.map((s, h) => /* @__PURE__ */ e.createElement("div", { key: h, className: n.k, role: "row" }, s.map((c) => /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        key: c.date,
+        type: "button",
+        className: n.e,
+        "data-level": c.level,
+        role: "gridcell",
+        "aria-label": `${H(c.date)}: ${c.count} ${T(c.count, A)}`,
+        onMouseEnter: (u) => $(c, u.currentTarget),
+        onMouseLeave: () => w(null),
+        onFocus: (u) => $(c, u.currentTarget),
+        onBlur: () => w(null)
+      }
+    ))))
+  )), /* @__PURE__ */ e.createElement("div", { className: n.f }, /* @__PURE__ */ e.createElement("span", { className: n.i }, G ?? ""), /* @__PURE__ */ e.createElement("nav", { className: n.z, "aria-label": "Год" }, v > 1 ? /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      className: n.u,
+      "aria-label": "Предыдущие годы",
+      disabled: g <= 0,
+      onClick: () => k((s) => Math.max(0, s - 1))
+    },
+    "‹"
+  ) : null, /* @__PURE__ */ e.createElement("div", { className: n.j, role: "tablist" }, J.map((s) => /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      key: s,
+      type: "button",
+      role: "tab",
+      "aria-selected": s === b,
+      className: j(n.x, s === b && n.s),
+      onClick: () => m == null ? void 0 : m(s === D ? null : s)
+    },
+    s
+  ))), v > 1 ? /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      className: n.u,
+      "aria-label": "Следующие годы",
+      disabled: g >= v - 1,
+      onClick: () => k((s) => Math.min(v - 1, s + 1))
+    },
+    "›"
+  ) : null), /* @__PURE__ */ e.createElement("div", { className: n.g, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("span", null, "Меньше"), [0, 1, 2, 3, 4].map((s) => /* @__PURE__ */ e.createElement("span", { key: s, className: n.e, "data-level": s })), /* @__PURE__ */ e.createElement("span", null, "Больше")))), /* @__PURE__ */ e.createElement("aside", { className: n.a, "aria-label": "Сводка" }, /* @__PURE__ */ e.createElement("div", { className: n.b }, /* @__PURE__ */ e.createElement("span", null, O), /* @__PURE__ */ e.createElement("span", null, I)), /* @__PURE__ */ e.createElement("div", { className: n.p }, /* @__PURE__ */ e.createElement("div", { className: n.q }, /* @__PURE__ */ e.createElement("span", { className: n.v }, l ? "—" : i.streak), /* @__PURE__ */ e.createElement("span", { className: n.l }, "серия, ", $e(i.streak))), /* @__PURE__ */ e.createElement("div", { className: n.q }, /* @__PURE__ */ e.createElement("span", { className: n.v }, l ? "—" : i.activeDays), /* @__PURE__ */ e.createElement("span", { className: n.l }, "активных дней")), /* @__PURE__ */ e.createElement("div", { className: n.q }, /* @__PURE__ */ e.createElement("span", { className: n.v }, l ? "—" : i.bestDay), /* @__PURE__ */ e.createElement("span", { className: n.l }, "макс. за день")))), p ? ee(
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: n.y,
+        style: { left: p.x, top: p.y },
+        role: "tooltip"
+      },
+      /* @__PURE__ */ e.createElement("div", null, H(p.date)),
+      /* @__PURE__ */ e.createElement("div", null, p.count, " ", T(p.count, A))
+    ),
+    document.body
+  ) : null);
+}
+export {
+  Re as H
+};

package/dist/Healthmap.css

@@ -0,0 +1 @@
+@layer elcrm-components{.hAr{display:flex;gap:var(--shell-gap);align-items:stretch;width:100%}.hAc,.hAa{border:1px solid var(--shell-border);border-radius:var(--shell-radius);background:var(--shell-background);box-sizing:border-box}.hAc{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--shell-gap-lg) var(--shell-padding-inline);overflow-x:auto}.hAh{margin-bottom:var(--shell-gap-sm)}.hAt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color)}.hAm{position:relative;margin:0 0 4px 26px;height:16px;font-size:11px;color:var(--shell-color-muted)}.hAo{position:absolute;top:0;white-space:nowrap}.hAn{display:flex;gap:4px;align-items:flex-start;flex:1}.hAd{display:grid;grid-template-rows:repeat(7,var(--healthmap-cell));gap:var(--healthmap-gap);width:22px;font-size:10px;line-height:var(--healthmap-cell);color:var(--shell-color-muted);flex-shrink:0;align-content:center}.hAw{display:grid;gap:var(--healthmap-gap);align-content:center}.hAk{display:grid;grid-template-rows:repeat(7,var(--healthmap-cell));gap:var(--healthmap-gap)}.hAe{width:var(--healthmap-cell);height:var(--healthmap-cell);padding:0;border:0;border-radius:2px;background:var(--healthmap-l0);box-sizing:border-box;cursor:default;display:block}.hAe:focus-visible{outline:2px solid var(--shell-color-accent);outline-offset:1px}.hAe[data-level="1"]{background:var(--healthmap-l1)}.hAe[data-level="2"]{background:var(--healthmap-l2)}.hAe[data-level="3"]{background:var(--healthmap-l3)}.hAe[data-level="4"]{background:var(--healthmap-l4)}.hAf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin-top:auto;padding-top:10px;margin-left:26px;font-size:11px;color:var(--shell-color-muted)}.hAi{min-width:0}.hAg{display:flex;align-items:center;gap:4px;justify-self:end}.hAa{flex:0 0 180px;display:flex;flex-direction:column;gap:var(--shell-gap-lg);padding:var(--shell-gap-lg) 18px}.hAb{display:flex;flex-direction:column;gap:2px;line-height:1.2}.hAb>span:first-child{font-size:var(--shell-font-size-lg);font-weight:700;letter-spacing:-.02em;color:var(--shell-color)}.hAb>span:last-child{font-size:11px;color:var(--shell-color-muted);text-transform:uppercase;letter-spacing:.04em}.hAp{display:flex;flex-direction:column;gap:var(--shell-gap-sm);flex:1;justify-content:center}.hAq{display:flex;flex-direction:column;gap:2px}.hAv{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--shell-color);line-height:1.1}.hAl{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.hAz{display:flex;align-items:center;justify-content:center;gap:4px;justify-self:center}.hAj{display:flex;align-items:center;gap:4px}.hAu{width:28px;height:28px;border:0;border-radius:var(--shell-radius);background:transparent;color:var(--shell-color-muted);font-size:18px;line-height:1;cursor:pointer}.hAu:hover:not(:disabled){color:var(--shell-color);background:var(--shell-background-muted)}.hAu:disabled{opacity:var(--shell-disabled-opacity);cursor:default}.hAx{border:0;background:transparent;color:var(--shell-color-muted);font-size:var(--shell-font-size-sm);padding:5px 11px;border-radius:999px;cursor:pointer}.hAx:hover{color:var(--shell-color)}.hAs{background:var(--shell-color-accent);color:var(--shell-background)}.hAy{position:fixed;z-index:calc(var(--shell-z) + 50);transform:translate(-50%,calc(-100% - 10px));min-width:160px;max-width:280px;padding:var(--shell-gap-sm) var(--shell-gap);border-radius:var(--shell-radius);background:var(--shell-background);border:1px solid var(--shell-border);box-shadow:var(--popup-shadow);pointer-events:none;color:var(--shell-color)}.hAy>:first-child{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.hAy>:last-child{font-size:var(--shell-font-size);font-weight:600}@media (max-width: 720px){.hAr{flex-direction:column}.hAa{flex:none;width:100%}.hAf{grid-template-columns:1fr;margin-left:0;justify-items:start}.hAg,.hAz{justify-self:start}}}

package/dist/Healthmap.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+/** День теплокарты: дата `yyyy-mm-dd` и счётчик. */
+export type HealthmapDay = {
+    date: string;
+    count: number;
+};
+/**
+ * Данные теплокарты (как ответ heatmap-RPC).
+ * Компонент не ходит в API — данные даёт приложение.
+ */
+export type HealthmapData = {
+    total: number;
+    from: string;
+    to: string;
+    year: number;
+    years: number[];
+    days: HealthmapDay[];
+};
+/** Склонение единиц («действие» / «событие»). */
+export type HealthmapUnit = {
+    one: string;
+    few: string;
+    many: string;
+};
+export type HealthmapProps = {
+    /** Данные года; `null` — пустая сетка. */
+    data: HealthmapData | null;
+    /** Показать «Загрузка…» в заголовке. */
+    loading?: boolean;
+    /**
+     * Выбранный год. `null` — «последний год» (как в ответе сервера).
+     * Контролируемый режим: вместе с `onYearChange`.
+     */
+    year?: number | null;
+    /** Смена года (клик по вкладке). */
+    onYearChange?: (year: number | null) => void;
+    /** Подсказка под сеткой. */
+    hint?: string;
+    /** Бренд в боковой колонке KPI. */
+    brandName?: string;
+    /** Подпись под брендом. */
+    brandSub?: string;
+    /** Единицы для склонения счётчиков. */
+    unit?: HealthmapUnit;
+    /** Доп. CSS-класс. */
+    className?: string;
+};
+/**
+ * Теплокарта активности по дням (как GitHub contribution graph).
+ *
+ * Роли: Healthmap = визуализация `days[]`; данные грузит приложение
+ * (`Api.query` / свой RPC), не сам компонент.
+ *
+ * @example
+ * ```tsx
+ * <Healthmap
+ *   data={heatmap}
+ *   loading={pending}
+ *   year={year}
+ *   onYearChange={setYear}
+ *   brandName="eKivi"
+ *   brandSub="клиенты"
+ *   unit={{ one: "событие", few: "события", many: "событий" }}
+ * />
+ * ```
+ *
+ * Токены: `--shell-*`, `--healthmap-cell`, `--healthmap-gap`, `--healthmap-l0`…`--healthmap-l4`.
+ */
+export declare function Healthmap({ data, loading, year, onYearChange, hint, brandName, brandSub, unit, className, }: HealthmapProps): React.JSX.Element;

package/dist/Healthmap.js

@@ -0,0 +1,4 @@
+import { H as m } from "./Healthmap-B6cdiLUl.js";
+export {
+  m as Healthmap
+};

package/dist/Layout.css

@@ -1 +1 @@
-@layer elcrm-components{.clr{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;background:var(--shell-background-muted);margin:var(--layout-margin);padding:var(--layout-padding);max-width:var(--layout-max-width);gap:0}.clx{height:var(--layout-height, 100dvh);max-height:var(--layout-height, 100dvh);overflow:hidden}.clm{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}.clr:not(.clx){height:auto;max-height:none;overflow:visible}.clr:not(.clx) .clm{overflow:visible;flex:0 1 auto;min-height:auto}.cls{flex-direction:row;align-items:stretch}.clb{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.clr:not(.clx) .clb{overflow:visible}.cla{display:flex;flex-direction:column;flex:0 0 var(--sidebar-width, 248px);width:var(--sidebar-width, 248px);min-width:0;min-height:0;align-self:stretch}.clk{overflow:hidden}.cla:not(.clk){overflow:auto}.cla>*{flex:1 1 auto;min-height:0;width:100%;height:100%;max-height:100%}@media (max-width: 900px){.cla{flex-basis:72px;width:72px}}.clh,.clf{flex:0 0 auto;min-width:0}}
+@layer elcrm-components{.clr{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;background:var(--shell-background-muted);margin:var(--layout-margin);padding:var(--layout-padding);max-width:var(--layout-max-width);gap:0}.clx{height:var(--layout-height, 100dvh);max-height:var(--layout-height, 100dvh);overflow:hidden}.clm{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}.clr:not(.clx){height:auto;max-height:none;overflow:visible}.clr:not(.clx) .clm{overflow:visible;flex:0 1 auto;min-height:auto}.cls{flex-direction:row;align-items:stretch;gap:var(--layout-gap, 0)}.clb{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:var(--layout-main-background, transparent);border-radius:var(--layout-main-radius, 0);box-shadow:var(--layout-main-shadow, none);border:var(--layout-main-border, none)}.clr:not(.clx) .clb{overflow:visible}.cla{display:flex;flex-direction:column;flex:0 0 var(--sidebar-width, 248px);width:var(--sidebar-width, 248px);min-width:0;min-height:0;align-self:stretch}.clk{overflow:hidden}.cla:not(.clk){overflow:auto}.cla>*{flex:1 1 auto;min-height:0;width:100%;height:100%;max-height:100%}@media (max-width: 900px){.cla{flex-basis:72px;width:72px}}.clh,.clf{flex:0 0 auto;min-width:0}}

package/dist/Loading.css

@@ -1 +1 @@
-@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;gap:var(--shell-gap-sm);padding:var(--shell-gap-lg);color:var(--shell-color-muted)}.cgi{box-sizing:border-box;width:var(--shell-icon-size);height:var(--shell-icon-size);border:2px solid var(--shell-border);border-top-color:var(--shell-color-accent);border-radius:var(--avatar-radius);animation:cgspin .7s linear infinite}}@keyframes cgspin{to{transform:rotate(360deg)}}
+@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;gap:var(--shell-gap-sm);padding:var(--shell-gap-lg);color:var(--shell-color-muted)}.cgi{box-sizing:border-box;width:var(--shell-icon-size);height:var(--shell-icon-size);border:2px solid var(--shell-border);border-top-color:var(--shell-color-accent);border-radius:var(--avatar-radius);animation:cgk .7s linear infinite}}@keyframes cgk{to{transform:rotate(360deg)}}