@companix/uikit 0.0.33 → 0.0.35

package/dist/bundle.es26.js

@@ -1,76 +1,44 @@
-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.es9.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es54.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es56.js";
-const B = ({
-  min: o = j,
-  max: e = N,
-  disabled: r,
-  value: a,
-  noDaySelect: g,
-  noYearSelect: u,
-  onChange: l,
-  required: m,
-  size: i
+import { jsx as f } from "react/jsx-runtime";
+import { useResizeTextarea as x } from "./bundle.es53.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 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"
-      }
-    )
-  ] });
+  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 {
-  B as DateInput
+  q as TextArea
 };

package/dist/bundle.es27.js

@@ -1,35 +1,118 @@
-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
-      }
-    ) })
-  ] });
+import { jsx as o, jsxs as l } 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 { f as H } from "./bundle.es54.js";
+import { f as Q } from "./bundle.es55.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" })
+          ] })
+        }
+      )
+    }
+  );
 };
 export {
-  j as FileOverlay
+  se as SelectTags
 };

package/dist/bundle.es28.js

@@ -1,14 +1,123 @@
-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 })
-  ] });
+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.es56.js";
+import { useDayDisableCheker as N } from "./bundle.es57.js";
+import { getNum as h, formatTime as v } from "@companix/utils-js";
+import { removeDigits as O } from "./bundle.es58.js";
+import { SelectRightElements as Y } from "./bundle.es59.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 FormGroup
+  U as DatePicker
 };

package/dist/bundle.es29.js

@@ -1,88 +1,76 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useRef as _, useMemo as b, useState as P, useEffect as j } from "react";
-import { getNum as v } from "@companix/utils-js";
-import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es54.js";
-import { SelectRightElements as w } from "./bundle.es55.js";
-import { Select as y } from "./bundle.es9.js";
-import { Input as z } from "./bundle.es10.js";
-const r = {
-  char: ":",
-  toString: (s) => s ? q(s, r.char) : "",
-  toValue: (s) => {
-    const n = s.split(r.char);
-    if (n.length === 2) {
-      const [e, i] = [v(n[0]), v(n[1])];
-      if (e !== null && i !== null && e < 24 && e >= 0 && i < 60 && i >= 0)
-        return { hours: e, minutes: i };
-    }
-    return null;
-  }
-}, U = (s) => {
-  const { value: n, onChange: e, clearButton: i, clearButtonIcon: I, disabled: a, ...T } = s, m = _(null), p = _(null), h = b(() => D(10), []), d = b(() => {
-    if (n && !n.minutes.toString().endsWith("0")) {
-      const t = n.hours * 6 + Math.trunc(n.minutes / 10), u = [...h];
-      return u.splice(t + 1, 0, A(n)), u;
-    }
-    return h;
-  }, [h, n]), [o, l] = P(() => r.toString(n)), x = (t) => {
-    l(t);
-    const u = r.toValue(t);
-    u && e?.(u);
-  }, B = (t) => {
-    a || m.current && m.current.getAttribute("data-state") === "open" && t.preventDefault();
-  }, O = () => {
-    r.toValue(o) === null && l(r.toString(n ?? null));
-  }, R = (t) => {
-    e?.(r.toValue(t)), l(t);
-  }, k = (t) => {
-    t.stopPropagation(), l(""), e?.(null);
+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.es58.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es60.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 j(() => {
-    if (o && o !== "__:__") {
-      const [t, u] = o.split(":"), V = (c) => {
-        const [C, S] = c.split(""), [E, M] = [C === "_" ? "0" : C, S === "_" ? "0" : S];
-        return E + M;
-      }, N = [V(t), V(u)].join(":"), f = r.toValue(N);
-      if (f) {
-        const c = f.hours * 6 + Math.trunc(f.minutes / 10);
-        c !== -1 && p.current && p.current.scrollTo(c);
+  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"
       }
-    }
-  }, [d, o]), /* @__PURE__ */ g(
-    y,
-    {
-      minimalOptions: !0,
-      options: d,
-      onChange: R,
-      value: o,
-      popoverRef: m,
-      scrollRef: p,
-      disabled: a,
-      children: /* @__PURE__ */ g(
-        z,
-        {
-          ...T,
-          value: o,
-          disabled: a,
-          onClick: B,
-          onValueChange: x,
-          onBlur: O,
-          mask: "99:99",
-          placeholder: "00:00",
-          rightElement: /* @__PURE__ */ g(
-            w,
-            {
-              clearButton: i,
-              clearButtonIcon: I,
-              value: !!W(o, [":", "_"]),
-              onClear: k
-            }
-          )
-        }
-      )
-    }
-  );
+    ),
+    /* @__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 {
-  U as TimePicker
+  B as DateInput
 };

package/dist/bundle.es3.js

@@ -1,10 +1,4 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import a from "classnames";
-import { attr as i } from "@companix/utils-browser";
-const c = p(
-  ({ children: r, className: o, fill: t }, m) => /* @__PURE__ */ f("div", { ref: m, className: a("button-group", o), "data-fill": i(t), children: r })
-);
+const a = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96];
 export {
-  c as ButtonGroup
+  a as avatarSizes
 };

package/dist/bundle.es30.js

@@ -1,24 +1,35 @@
-import { jsx as o } from "react/jsx-runtime";
-import f from "classnames";
-import { forwardRef as l } from "react";
-const g = l(
-  ({ icon: r, className: t, size: i = "m", ...e }, a) => {
-    const [n, c, , , m] = r.icon;
-    return /* @__PURE__ */ o(
-      "svg",
+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: a,
-        "data-prefix": r.prefix,
-        "data-icon": r.iconName,
-        viewBox: `0 0 ${n} ${c}`,
-        className: f(`icon icon-size-${i}`, t),
-        ...e,
-        role: "img",
-        children: /* @__PURE__ */ o(s, { paths: m })
+        ref: t,
+        type: "file",
+        multiple: f,
+        accept: c,
+        onChange: u,
+        disabled: n
       }
-    );
-  }
-), s = ({ paths: r }) => Array.isArray(r) ? /* @__PURE__ */ o("g", { children: r.map((t, i) => /* @__PURE__ */ o("path", { fill: "currentColor", d: t }, `-d-${i}`)) }) : /* @__PURE__ */ o("path", { fill: "currentColor", d: r });
+    ) })
+  ] });
+};
 export {
-  g as Icon
+  j as FileOverlay
 };

package/dist/bundle.es31.js

@@ -1,9 +1,14 @@
-import { jsx as r } from "react/jsx-runtime";
-import { clamp as o, pc as p } from "@companix/utils-browser";
-const i = ({ appearance: a = "primary", value: e }) => {
-  const s = 100 * o(e, 0, 1);
-  return /* @__PURE__ */ r("div", { "aria-valuemax": 100, "aria-valuemin": 0, role: "progressbar", className: "progress-bar", children: /* @__PURE__ */ r("div", { className: "progress-bar-thumb", "data-appearance": a, style: { width: p(s) } }) });
+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 {
-  i as ProgressBar
+  u as FormGroup
 };