@companix/uikit 0.0.36 → 0.0.38

package/dist/bundle.es2.js

@@ -0,0 +1,44 @@
+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 {
+  y as Avatar
+};

package/dist/bundle.es20.js

@@ -0,0 +1,25 @@
+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,
+    {
+      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 {
+  p as Drawer
+};

package/dist/bundle.es21.js

@@ -0,0 +1,31 @@
+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.es50.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
+        ] })
+      }
+    )
+  ] }) });
+};
+g.Close = o.Close;
+export {
+  g as Dialog
+};

package/dist/bundle.es22.js

@@ -0,0 +1,40 @@
+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.es50.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 {
+  C as AlertDialog
+};

package/dist/bundle.es23.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as m } from "./bundle.es4.js";
+import { useLoading as p } from "./bundle.es51.js";
+const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
+  const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
+  return /* @__PURE__ */ e(
+    m,
+    {
+      appearance: t ? "negative" : r,
+      ...i,
+      loading: n,
+      onClick: a
+    }
+  );
+};
+export {
+  g as LoadingButton
+};

package/dist/bundle.es24.js

@@ -0,0 +1,36 @@
+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 {
+  y as Tabs
+};

package/dist/bundle.es25.js

@@ -0,0 +1,23 @@
+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 {
+  j as Countdown
+};

package/dist/bundle.es26.js

@@ -0,0 +1,44 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useResizeTextarea as x } from "./bundle.es52.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",
+    {
+      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
+        }
+      )
+    }
+  );
+};
+export {
+  q as TextArea
+};

package/dist/bundle.es27.js

@@ -0,0 +1,117 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useFroozeClosing as M } from "./bundle.es44.js";
+import { Popover as j } from "./bundle.es10.js";
+import { OptionItem as q } from "./bundle.es14.js";
+import { OptionsList as V } from "./bundle.es16.js";
+import { Icon as d } from "./bundle.es33.js";
+import { useState as B, useRef as h, useMemo as g } from "react";
+import { attr as v, getActiveElementByAnotherElement as H, contains as Q } from "@companix/utils-browser";
+import { mergeRefs as X } from "react-merge-refs";
+import { faXmark as G, faChevronDown as J } from "@companix/icons-solid";
+const re = (x) => {
+  const {
+    options: r,
+    closeAfterSelect: C,
+    placeholder: N,
+    onChange: l,
+    emptyText: R = "Ничего не найдено",
+    readOnly: m,
+    size: z = "md",
+    value: n,
+    inputRef: A,
+    disabled: f,
+    required: y
+  } = x, [s, D] = B(""), a = h(null), b = h(null), { popoverRef: u, froozePopoverPosition: k, handleAnimationEnd: w } = M(), E = g(() => {
+    const e = {};
+    return r.forEach((t) => {
+      e[t.value] = t;
+    }), e;
+  }, [r]), O = (e) => n.includes(e) ? [...n] : [...n, e], P = (e) => n.filter((t) => e !== t), T = (e, t) => {
+    C ? (k(), l(e), t()) : l(e);
+  }, p = g(() => s.trim() ? r.filter(({ title: e }) => {
+    const t = e.toLowerCase(), i = s.trim().toLowerCase();
+    return t.indexOf(i) >= 0;
+  }) : r, [s, r]), I = (e) => {
+    if (f) return;
+    u.current && u.current.getAttribute("data-state") === "open" && e.preventDefault();
+    const t = H(e.currentTarget);
+    e.defaultPrevented || Q(e.currentTarget, t) || a.current && a.current.focus();
+  }, S = (e) => {
+    e.target !== a.current && e.preventDefault();
+  }, $ = (e, t) => {
+    e.stopPropagation(), l(P(t));
+  };
+  return /* @__PURE__ */ o(
+    j,
+    {
+      minimal: !0,
+      ref: u,
+      sideOffset: 0,
+      matchTarget: "width",
+      onAnimationEnd: w,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      content: ({ close: e }) => /* @__PURE__ */ c(V, { maxHeight: 300, children: [
+        p.length === 0 && /* @__PURE__ */ o("div", { className: "select-tags-empty", children: R }),
+        p.map(({ value: t, title: i, icon: F }, L) => /* @__PURE__ */ o(
+          q,
+          {
+            active: n.includes(t),
+            onClick: () => T(O(t), e),
+            title: i,
+            icon: F
+          },
+          `option-item-${t}-${L}`
+        ))
+      ] }),
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: "form",
+          onClick: I,
+          onMouseDown: S,
+          "data-size": z,
+          "data-required": v(y),
+          children: /* @__PURE__ */ c("div", { className: "select-tags-container", children: [
+            /* @__PURE__ */ c("div", { className: "select-tags", children: [
+              n.length > 0 && /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "tag-container",
+                  ref: b,
+                  role: "listbox",
+                  "data-readonly": v(m),
+                  children: n.map((e, t) => /* @__PURE__ */ c("div", { className: "tag", children: [
+                    /* @__PURE__ */ o("span", { className: "tag-name", children: E[e].title }),
+                    /* @__PURE__ */ o("button", { className: "tag-close-button", onClick: (i) => $(i, e), children: /* @__PURE__ */ o(d, { className: "tag-close-icon", icon: G, size: "xxxs" }) })
+                  ] }, `tag-option-${e}-${t}`))
+                }
+              ),
+              (!m || n.length === 0) && /* @__PURE__ */ o(
+                "input",
+                {
+                  ref: X([A, a]),
+                  type: "text",
+                  autoCapitalize: "none",
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  className: "form-input",
+                  spellCheck: !1,
+                  value: s,
+                  disabled: f,
+                  readOnly: m,
+                  placeholder: N,
+                  onChange: ({ target: e }) => D(e.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ o(d, { className: "expand-icon", icon: J, size: "xxxs" })
+          ] })
+        }
+      )
+    }
+  );
+};
+export {
+  re as SelectTags
+};

package/dist/bundle.es28.js

@@ -0,0 +1,123 @@
+import { jsx as u } from "react/jsx-runtime";
+import { Popover as T } from "./bundle.es10.js";
+import { Input as w } from "./bundle.es13.js";
+import { useState as A, useRef as j } from "react";
+import { Calendar as E } from "./bundle.es53.js";
+import { useDayDisableCheker as N } from "./bundle.es54.js";
+import { getNum as h, formatTime as v } from "@companix/utils-js";
+import { removeDigits as O } from "./bundle.es55.js";
+import { SelectRightElements as Y } from "./bundle.es56.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
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  U as DatePicker
+};

package/dist/bundle.es29.js

@@ -0,0 +1,76 @@
+import { jsxs as D, jsx as h } from "react/jsx-runtime";
+import { useMemo as M, useEffect as C } from "react";
+import { Select as c } from "./bundle.es12.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es55.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es57.js";
+const B = ({
+  min: o = j,
+  max: e = N,
+  disabled: r,
+  value: a,
+  noDaySelect: g,
+  noYearSelect: u,
+  onChange: l,
+  required: m,
+  size: i
+}) => {
+  const d = M(() => O({ min: o, max: e }), [o, e]);
+  C(() => {
+    const t = d(a);
+    t && l(t);
+  }, [d, a]);
+  const { years: p, months: w, days: f } = V({ min: o, max: e, now: a }), s = (t, x) => {
+    const n = { ...a };
+    n[t] = x;
+    const y = T(n.month, n.year);
+    n.day = n.day > y ? y : n.day, l(n);
+  };
+  return /* @__PURE__ */ D("div", { className: "data-input", children: [
+    !u && p.length > 0 && /* @__PURE__ */ h(
+      c,
+      {
+        placeholder: "Год",
+        options: p,
+        onChange: (t) => s("year", t),
+        value: a.year,
+        required: m,
+        disabled: r,
+        size: i,
+        minimalOptions: !0,
+        matchTarget: "min-width"
+      }
+    ),
+    /* @__PURE__ */ h(
+      c,
+      {
+        placeholder: "Месяц",
+        className: "w-full",
+        options: w,
+        onChange: (t) => s("month", t),
+        value: a.month,
+        disabled: r,
+        required: m,
+        size: i,
+        minimalOptions: !0,
+        matchTarget: "min-width"
+      }
+    ),
+    !g && /* @__PURE__ */ h(
+      c,
+      {
+        placeholder: "День",
+        options: f,
+        disabled: r || f.length === 0,
+        onChange: (t) => s("day", t),
+        value: a.day,
+        required: m,
+        size: i,
+        minimalOptions: !0,
+        matchTarget: "min-width"
+      }
+    )
+  ] });
+};
+export {
+  B as DateInput
+};

package/dist/bundle.es3.js

@@ -0,0 +1,4 @@
+const a = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
+export {
+  a as avatarSizes
+};

package/dist/bundle.es30.js

@@ -0,0 +1,35 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { VisuallyHidden as p } from "@radix-ui/react-visually-hidden";
+import { useRef as h, useMemo as m } from "react";
+const j = ({
+  onChange: l,
+  disabled: n,
+  children: o,
+  multiple: f,
+  mimes: e,
+  className: a
+}) => {
+  const t = h(null), u = (r) => {
+    n || (r.target.files && l?.(Array.from(r.target.files)), t.current && (t.current.value = ""));
+  }, c = m(() => {
+    if (e)
+      return e.map((r) => `${r}/*`).join(",");
+  }, [e]);
+  return /* @__PURE__ */ s("label", { className: a, children: [
+    o,
+    /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
+      "input",
+      {
+        ref: t,
+        type: "file",
+        multiple: f,
+        accept: c,
+        onChange: u,
+        disabled: n
+      }
+    ) })
+  ] });
+};
+export {
+  j as FileOverlay
+};

package/dist/bundle.es31.js

@@ -0,0 +1,14 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import t from "classnames";
+import { attr as n } from "@companix/utils-browser";
+const u = (o) => {
+  const { fill: e, className: l, label: c, children: i, caption: r, apperance: m = "neutral" } = o;
+  return /* @__PURE__ */ p("div", { className: t("form-group", l), "data-fill": n(e), children: [
+    /* @__PURE__ */ a("div", { className: "form-group-label", children: c }),
+    i,
+    r && /* @__PURE__ */ a("div", { className: "form-group-caption", "data-appearance": m, children: r })
+  ] });
+};
+export {
+  u as FormGroup
+};