@companix/uikit 0.0.32 → 0.0.34

package/dist/bundle.es2.js

@@ -1,47 +1,44 @@
-import { jsx as e, jsxs as x, Fragment as h } from "react/jsx-runtime";
-import j from "classnames";
-import { Spinner as k } from "./bundle.es4.js";
-import { forwardRef as w } from "react";
-import { attr as r } from "@companix/utils-browser";
-const F = w(
-  ({
-    children: d,
-    fill: l,
-    text: i,
-    active: c,
-    mode: f = "default",
-    appearance: s = "neutral",
-    size: p = "md",
-    align: u,
-    icon: m,
-    loading: t,
-    className: b,
-    iconRight: n,
-    Component: o = "button",
-    ...a
-  }, v) => /* @__PURE__ */ e(
-    o,
-    {
-      ref: v,
-      className: j("button", b),
-      "data-size": p,
-      "data-loading": r(t),
-      "data-align": t ? "center" : u ?? (m && n ? "left" : "center"),
-      "data-appearance": s,
-      "data-mode": f,
-      "data-fill": r(l),
-      "data-active": r(c),
-      type: o === "button" ? "button" : void 0,
-      ...a,
-      onClick: t ?? a.disabled ? void 0 : a.onClick,
-      children: t ? /* @__PURE__ */ e(k, { size: 14, width: 2 }) : /* @__PURE__ */ x(h, { children: [
-        m,
-        (d ?? i) && /* @__PURE__ */ e("span", { className: "button-text", children: i ?? d }),
-        n
-      ] })
-    }
-  )
-);
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import { box as g } from "@companix/utils-browser";
+import { getInitialsFontSize as h } from "./bundle.es43.js";
+const k = 24, y = ({
+  alt: n,
+  crossOrigin: i,
+  decoding: m,
+  loading: v,
+  referrerPolicy: d,
+  sizes: f,
+  size: t = k,
+  src: o,
+  srcSet: s,
+  useMap: N,
+  initials: c,
+  noBorder: b,
+  fallbackIcon: p,
+  children: l
+}) => {
+  const r = o || s, x = c ? /* @__PURE__ */ a("div", { className: "avatar-initials", style: { fontSize: h(t) }, children: c }) : p, e = r ? null : x;
+  return /* @__PURE__ */ I("div", { className: "avatar", style: g(t), children: [
+    r && /* @__PURE__ */ a(
+      "img",
+      {
+        alt: n,
+        className: "avatar-image",
+        crossOrigin: i,
+        decoding: m,
+        loading: v,
+        referrerPolicy: d,
+        sizes: f,
+        src: o,
+        srcSet: s,
+        useMap: N
+      }
+    ),
+    e && /* @__PURE__ */ a("div", { className: "avatar-icon", children: e }),
+    l && /* @__PURE__ */ a("div", { className: "avatar-content", children: l }),
+    !b && /* @__PURE__ */ a("div", { className: "avatar-border" })
+  ] });
+};
 export {
-  F as Button
+  y as Avatar
 };

package/dist/bundle.es20.js

@@ -1,18 +1,25 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as m } from "./bundle.es2.js";
-import { useLoading as p } from "./bundle.es47.js";
-const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
-  const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
-  return /* @__PURE__ */ e(
-    m,
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import c from "classnames";
+import * as r from "@radix-ui/react-dialog";
+import { VisuallyHidden as i } from "@radix-ui/react-visually-hidden";
+import { customCSS as d } from "@companix/utils-browser";
+const p = ({ open: t, onOpenChange: l, children: a, size: s, direction: m, className: n }) => /* @__PURE__ */ e(r.Root, { open: t, onOpenChange: l, children: /* @__PURE__ */ o(r.Portal, { children: [
+  /* @__PURE__ */ e(r.Overlay, { className: "drawer-overlay" }),
+  /* @__PURE__ */ o(
+    r.Content,
     {
-      appearance: t ? "negative" : r,
-      ...i,
-      loading: n,
-      onClick: a
+      style: d({ "--drawer-size": s ?? "50%" }),
+      className: c("drawer", n),
+      "data-direction": m,
+      children: [
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r.Title, {}) }),
+        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r.Description, {}) }),
+        a
+      ]
     }
-  );
-};
+  )
+] }) });
+p.Close = r.Close;
 export {
-  g as LoadingButton
+  p as Drawer
 };

package/dist/bundle.es21.js

@@ -1,36 +1,31 @@
-import { jsx as n, jsxs as T } from "react/jsx-runtime";
-import * as c from "@radix-ui/react-tabs";
-import { useRef as g, useId as p, createContext as v, useState as I, useContext as d, useEffect as R } from "react";
-const l = v({ baseId: "", listRef: {} }), b = (t, e) => `radix-${t}-trigger-${e}`, y = ({ children: t, value: e, onChange: s }) => {
-  const r = g(null), o = p();
-  return /* @__PURE__ */ n(c.Root, { value: e, onValueChange: s, children: /* @__PURE__ */ n(l.Provider, { value: { baseId: o, listRef: r }, children: /* @__PURE__ */ T(c.List, { className: "tabs", ref: r, children: [
-    /* @__PURE__ */ n($, { value: e }),
-    t
-  ] }) }) });
-}, $ = ({ value: t }) => {
-  const [e, s] = I({}), { baseId: r, listRef: o } = d(l);
-  return R(() => {
-    const a = { observer: null };
-    if (o.current) {
-      const f = `.tab[id="${b(r, t)}"]`, i = o.current.querySelector(f);
-      i != null ? (a.observer = new ResizeObserver(() => {
-        const { clientHeight: u, clientWidth: m, offsetLeft: h, offsetTop: x } = i;
-        s({
-          height: u,
-          transform: `translateX(${Math.floor(h)}px) translateY(${Math.floor(x)}px)`,
-          width: m
-        });
-      }), a.observer.observe(i)) : s({ display: "none" });
-    }
-    return () => {
-      a.observer && a.observer.disconnect();
-    };
-  }, [t]), /* @__PURE__ */ n("div", { className: "tab-indicator-container", style: e, children: /* @__PURE__ */ n("div", { className: "tab-indicator" }) });
-}, C = ({ children: t, value: e, ...s }) => {
-  const { baseId: r } = d(l), o = b(r, e);
-  return /* @__PURE__ */ n(c.Trigger, { ...s, id: o, className: "tab", value: e, children: t });
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import f from "classnames";
+import * as o from "@radix-ui/react-dialog";
+import { VisuallyHidden as a } from "@radix-ui/react-visually-hidden";
+import { RemoveListener as v } from "./bundle.es51.js";
+const g = (l) => {
+  const { size: n = "s", open: r, onOpenChange: s, children: c, onClosed: t, disableEsc: p, className: d } = l, m = (h) => {
+    p && h.preventDefault();
+  };
+  return /* @__PURE__ */ e(o.Root, { open: r, onOpenChange: s, children: /* @__PURE__ */ i(o.Portal, { children: [
+    /* @__PURE__ */ e(o.Overlay, { className: "popup-overlay dialog-overlay" }),
+    /* @__PURE__ */ e(
+      o.Content,
+      {
+        className: "popup-container dialog-container",
+        "data-size": n,
+        onEscapeKeyDown: m,
+        children: /* @__PURE__ */ i("div", { className: f("popup dialog", d), children: [
+          /* @__PURE__ */ e(v, { callback: t }),
+          /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(o.Title, {}) }),
+          /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(o.Description, {}) }),
+          c
+        ] })
+      }
+    )
+  ] }) });
 };
-y.Tab = C;
+g.Close = o.Close;
 export {
-  y as Tabs
+  g as Dialog
 };

package/dist/bundle.es22.js

@@ -1,23 +1,40 @@
-import { jsx as d, Fragment as p } from "react/jsx-runtime";
-import { getNextCandleTime as T, sleep as S, getTimes as x } from "@companix/utils-js";
-import { useRef as g, useState as v, useEffect as s } from "react";
-const n = (t) => String(t).padStart(2, "0"), j = ({ expiration: t, separator: m = ":", onExpired: a }) => {
-  const e = g(null), [, o] = v([]);
-  s(() => {
-    const c = Date.now(), f = T(c, "1s") - c;
-    return e.current && clearInterval(e.current), S(f).then(() => {
-      o([]), e.current = setInterval(() => {
-        o([]);
-      }, 1e3);
-    }), () => {
-      e.current && clearInterval(e.current);
-    };
-  }, [t]);
-  const r = t - Date.now(), { hours: i, minutes: u, seconds: l } = x(r);
-  return s(() => {
-    r <= 0 && (a?.(), e.current && clearInterval(e.current));
-  }, [r <= 0]), /* @__PURE__ */ d(p, { children: [n(i), n(u), n(l)].join(m) });
-};
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-alert-dialog";
+import { Button as c } from "./bundle.es4.js";
+import { RemoveListener as N } from "./bundle.es51.js";
+import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
+const C = ({
+  open: d,
+  defaultOpen: p,
+  onOpenChange: m,
+  onUnMounted: h,
+  icon: i,
+  title: l,
+  description: o,
+  cancelDefaultText: n,
+  cancel: t,
+  disableCancel: v,
+  confirm: s
+}) => /* @__PURE__ */ a(r.Root, { open: d, defaultOpen: p, onOpenChange: m, children: [
+  /* @__PURE__ */ e(N, { callback: h }),
+  /* @__PURE__ */ a(r.Portal, { children: [
+    /* @__PURE__ */ e(r.Overlay, { className: "popup-overlay dialog-overlay" }),
+    /* @__PURE__ */ e(r.Content, { className: "popup-container dialog-container", children: /* @__PURE__ */ a("div", { className: "popup alert", children: [
+      /* @__PURE__ */ a("div", { className: "alert-body", children: [
+        i && /* @__PURE__ */ e("span", { className: "alert-icon", children: i }),
+        /* @__PURE__ */ a("div", { className: "alert-content", children: [
+          l && /* @__PURE__ */ e(r.Title, { className: "alert-title", children: l }),
+          !l && /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(r.Title, {}) }),
+          o && /* @__PURE__ */ e(r.Description, { className: "alert-description", children: o })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "alert-footer", children: [
+        !v && (t?.text || n) && /* @__PURE__ */ e(r.Cancel, { asChild: !0, children: /* @__PURE__ */ e(c, { appearance: "neutral", ...t, text: t?.text ?? n }) }),
+        s?.text && /* @__PURE__ */ e(r.Action, { asChild: !0, children: /* @__PURE__ */ e(c, { appearance: "negative", ...s }) })
+      ] })
+    ] }) })
+  ] })
+] });
 export {
-  j as Countdown
+  C as AlertDialog
 };

package/dist/bundle.es23.js

@@ -1,44 +1,18 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es48.js";
-import { attr as e, callMultiple as u } from "@companix/utils-browser";
-import { useEffect as z } from "react";
-import { mergeRefs as R } from "react-merge-refs";
-const q = ({
-  onResize: m,
-  grow: a = !1,
-  value: t,
-  onChange: s,
-  disabled: o,
-  required: i,
-  rows: l = 2,
-  fill: p = !1,
-  textAreaRef: c,
-  ...d
-}) => {
-  const [n, r] = x(m, a);
-  return z(r, [r, t]), /* @__PURE__ */ f(
-    "div",
+import { jsx as e } from "react/jsx-runtime";
+import { Button as m } from "./bundle.es4.js";
+import { useLoading as p } from "./bundle.es52.js";
+const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
+  const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
+  return /* @__PURE__ */ e(
+    m,
     {
-      className: "form form-textarea",
-      "data-required": e(i),
-      "data-disabled": e(o),
-      "data-fill": e(p),
-      children: /* @__PURE__ */ f(
-        "textarea",
-        {
-          className: "form-input",
-          "data-grow": e(a),
-          value: t,
-          ref: R([c, n]),
-          rows: l,
-          disabled: o,
-          onChange: u(s, r),
-          ...d
-        }
-      )
+      appearance: t ? "negative" : r,
+      ...i,
+      loading: n,
+      onClick: a
     }
   );
 };
 export {
-  q as TextArea
+  g as LoadingButton
 };

package/dist/bundle.es24.js

@@ -1,118 +1,36 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { useFroozeClosing as M } from "./bundle.es39.js";
-import { Popover as j } from "./bundle.es7.js";
-import { OptionItem as q } from "./bundle.es11.js";
-import { OptionsList as V } from "./bundle.es13.js";
-import { Icon as d } from "./bundle.es30.js";
-import { useState as B, useRef as h, useMemo as g } from "react";
-import { f as H } from "./bundle.es49.js";
-import { f as Q } from "./bundle.es50.js";
-import { attr as x, getActiveElementByAnotherElement as G, contains as J } from "@companix/utils-browser";
-import { mergeRefs as K } from "react-merge-refs";
-const se = (C) => {
-  const {
-    options: r,
-    closeAfterSelect: v,
-    placeholder: N,
-    onChange: c,
-    emptyText: R = "Ничего не найдено",
-    readOnly: m,
-    size: z = "md",
-    value: n,
-    inputRef: A,
-    disabled: u,
-    required: D
-  } = C, [a, E] = B(""), i = h(null), w = h(null), { popoverRef: f, froozePopoverPosition: y, handleAnimationEnd: b } = M(), O = g(() => {
-    const e = {};
-    return r.forEach((t) => {
-      e[t.value] = t;
-    }), e;
-  }, [r]), P = (e) => n.includes(e) ? [...n] : [...n, e], T = (e) => n.filter((t) => e !== t), k = (e, t) => {
-    v ? (y(), c(e), t()) : c(e);
-  }, p = g(() => a.trim() ? r.filter(({ title: e }) => {
-    const t = e.toLowerCase(), s = a.trim().toLowerCase();
-    return t.indexOf(s) >= 0;
-  }) : r, [a, r]), I = (e) => {
-    if (u) return;
-    f.current && f.current.getAttribute("data-state") === "open" && e.preventDefault();
-    const t = G(e.currentTarget);
-    e.defaultPrevented || J(e.currentTarget, t) || i.current && i.current.focus();
-  }, S = (e) => {
-    e.target !== i.current && e.preventDefault();
-  }, $ = (e, t) => {
-    e.stopPropagation(), c(T(t));
-  };
-  return /* @__PURE__ */ o(
-    j,
-    {
-      minimal: !0,
-      ref: f,
-      sideOffset: 0,
-      matchTarget: "width",
-      onAnimationEnd: b,
-      onOpenAutoFocus: (e) => e.preventDefault(),
-      onCloseAutoFocus: (e) => e.preventDefault(),
-      content: ({ close: e }) => /* @__PURE__ */ l(V, { maxHeight: 300, children: [
-        p.length === 0 && /* @__PURE__ */ o("div", { className: "select-tags-empty", children: R }),
-        p.map(({ value: t, title: s, icon: F }, L) => /* @__PURE__ */ o(
-          q,
-          {
-            active: n.includes(t),
-            onClick: () => k(P(t), e),
-            title: s,
-            icon: F
-          },
-          `option-item-${t}-${L}`
-        ))
-      ] }),
-      children: /* @__PURE__ */ o(
-        "div",
-        {
-          className: "form",
-          onClick: I,
-          onMouseDown: S,
-          "data-size": z,
-          "data-required": x(D),
-          children: /* @__PURE__ */ l("div", { className: "select-tags-container", children: [
-            /* @__PURE__ */ l("div", { className: "select-tags", children: [
-              n.length > 0 && /* @__PURE__ */ o(
-                "div",
-                {
-                  className: "tag-container",
-                  ref: w,
-                  role: "listbox",
-                  "data-readonly": x(m),
-                  children: n.map((e, t) => /* @__PURE__ */ l("div", { className: "tag", children: [
-                    /* @__PURE__ */ o("span", { className: "tag-name", children: O[e].title }),
-                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (s) => $(s, e), children: /* @__PURE__ */ o(d, { className: "tag-close-icon", icon: Q.faClose, size: "xxxs" }) })
-                  ] }, `tag-option-${e}-${t}`))
-                }
-              ),
-              (!m || n.length === 0) && /* @__PURE__ */ o(
-                "input",
-                {
-                  ref: K([A, i]),
-                  type: "text",
-                  autoCapitalize: "none",
-                  autoComplete: "off",
-                  autoCorrect: "off",
-                  className: "form-input",
-                  spellCheck: !1,
-                  value: a,
-                  disabled: u,
-                  readOnly: m,
-                  placeholder: N,
-                  onChange: ({ target: e }) => E(e.value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ o(d, { className: "expand-icon", icon: H.faChevronDown, size: "xxxs" })
-          ] })
-        }
-      )
+import { jsx as n, jsxs as T } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-tabs";
+import { useRef as g, useId as p, createContext as v, useState as I, useContext as d, useEffect as R } from "react";
+const l = v({ baseId: "", listRef: {} }), b = (t, e) => `radix-${t}-trigger-${e}`, y = ({ children: t, value: e, onChange: s }) => {
+  const r = g(null), o = p();
+  return /* @__PURE__ */ n(c.Root, { value: e, onValueChange: s, children: /* @__PURE__ */ n(l.Provider, { value: { baseId: o, listRef: r }, children: /* @__PURE__ */ T(c.List, { className: "tabs", ref: r, children: [
+    /* @__PURE__ */ n($, { value: e }),
+    t
+  ] }) }) });
+}, $ = ({ value: t }) => {
+  const [e, s] = I({}), { baseId: r, listRef: o } = d(l);
+  return R(() => {
+    const a = { observer: null };
+    if (o.current) {
+      const f = `.tab[id="${b(r, t)}"]`, i = o.current.querySelector(f);
+      i != null ? (a.observer = new ResizeObserver(() => {
+        const { clientHeight: u, clientWidth: m, offsetLeft: h, offsetTop: x } = i;
+        s({
+          height: u,
+          transform: `translateX(${Math.floor(h)}px) translateY(${Math.floor(x)}px)`,
+          width: m
+        });
+      }), a.observer.observe(i)) : s({ display: "none" });
     }
-  );
+    return () => {
+      a.observer && a.observer.disconnect();
+    };
+  }, [t]), /* @__PURE__ */ n("div", { className: "tab-indicator-container", style: e, children: /* @__PURE__ */ n("div", { className: "tab-indicator" }) });
+}, C = ({ children: t, value: e, ...s }) => {
+  const { baseId: r } = d(l), o = b(r, e);
+  return /* @__PURE__ */ n(c.Trigger, { ...s, id: o, className: "tab", value: e, children: t });
 };
+y.Tab = C;
 export {
-  se as SelectTags
+  y as Tabs
 };

package/dist/bundle.es25.js

@@ -1,123 +1,23 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Popover as T } from "./bundle.es7.js";
-import { Input as w } from "./bundle.es10.js";
-import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es51.js";
-import { useDayDisableCheker as N } from "./bundle.es52.js";
-import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es53.js";
-import { SelectRightElements as Y } from "./bundle.es54.js";
-const i = {
-  char: "-",
-  toString: (e) => {
-    if (e) {
-      const n = v(e.getDate()), r = v(e.getMonth() + 1), l = e.getFullYear();
-      return [n, r, l].join(i.char);
-    }
-    return "";
-  },
-  toValue: (e) => {
-    const n = e.split(i.char);
-    if (n.length === 3) {
-      const [r, l, a] = [h(n[0]), h(n[1]), h(n[2])];
-      if (r && l && a) {
-        const o = new Date(a, l - 1, r);
-        if (o.getFullYear() === a && o.getDate() === r && o.getMonth() === l - 1)
-          return o;
-      }
-    }
-    return null;
-  }
-}, U = (e) => {
-  const {
-    clearButton: n,
-    clearButtonIcon: r,
-    children: l,
-    disabled: a,
-    // calendar props
-    value: o,
-    enableTime: y,
-    disablePickers: I,
-    showNeighboringMonth: P,
-    onChange: c,
-    shouldDisableDate: g,
-    viewDate: S,
-    disablePast: d,
-    disableFuture: D,
-    minDateTime: C,
-    maxDateTime: b,
-    // input props
-    ...V
-  } = e, [m, s] = A(() => i.toString(o ?? null)), p = j(null), k = N({
-    disableFuture: D,
-    disablePast: d,
-    shouldDisableDate: g,
-    minDateTime: C,
-    maxDateTime: b
-  }), B = (t) => {
-    a || p.current && p.current.getAttribute("data-state") === "open" && t.preventDefault();
-  }, F = (t) => {
-    t.stopPropagation(), s(""), c?.(null);
-  }, x = (t) => {
-    s(t);
-    const f = i.toValue(t);
-    f && !k(f) && c?.(f);
-  }, M = () => {
-    const t = i.toValue(m);
-    (!t || k(t)) && s(i.toString(o ?? null));
-  }, R = (t) => {
-    c?.(t), s(i.toString(t));
-  };
-  return /* @__PURE__ */ u(
-    T,
-    {
-      minimal: !0,
-      ref: p,
-      sideOffset: 0,
-      onOpenAutoFocus: (t) => t.preventDefault(),
-      onCloseAutoFocus: (t) => t.preventDefault(),
-      disabled: a,
-      fitMaxHeight: !1,
-      content: () => /* @__PURE__ */ u(
-        E,
-        {
-          value: o,
-          disablePast: d,
-          disableFuture: D,
-          enableTime: y,
-          disablePickers: I,
-          showNeighboringMonth: P,
-          onChange: R,
-          shouldDisableDate: g,
-          viewDate: S,
-          minDateTime: C,
-          maxDateTime: b
-        }
-      ),
-      children: /* @__PURE__ */ u(
-        w,
-        {
-          ...V,
-          value: m,
-          disabled: a,
-          onClick: B,
-          onValueChange: x,
-          onBlur: M,
-          mask: "99-99-9999",
-          rightElement: /* @__PURE__ */ u(
-            Y,
-            {
-              clearButton: n,
-              clearButtonIcon: r,
-              value: !!O(m, ["-", "_"]),
-              onClear: F
-            }
-          )
-        }
-      )
-    }
-  );
+import { jsx as d, Fragment as p } from "react/jsx-runtime";
+import { getNextCandleTime as T, sleep as S, getTimes as x } from "@companix/utils-js";
+import { useRef as g, useState as v, useEffect as s } from "react";
+const n = (t) => String(t).padStart(2, "0"), j = ({ expiration: t, separator: m = ":", onExpired: a }) => {
+  const e = g(null), [, o] = v([]);
+  s(() => {
+    const c = Date.now(), f = T(c, "1s") - c;
+    return e.current && clearInterval(e.current), S(f).then(() => {
+      o([]), e.current = setInterval(() => {
+        o([]);
+      }, 1e3);
+    }), () => {
+      e.current && clearInterval(e.current);
+    };
+  }, [t]);
+  const r = t - Date.now(), { hours: i, minutes: u, seconds: l } = x(r);
+  return s(() => {
+    r <= 0 && (a?.(), e.current && clearInterval(e.current));
+  }, [r <= 0]), /* @__PURE__ */ d(p, { children: [n(i), n(u), n(l)].join(m) });
 };
 export {
-  U as DatePicker
+  j as Countdown
 };