@companix/uikit 0.0.33 → 0.0.34

package/dist/bundle.es69.js

@@ -1,51 +1,22 @@
-import { subMonths as L, addMonths as N, useDayDisableCheker as R } from "./bundle.es53.js";
-import { DEFAULT_MIN_YEAR as w, DEFAULT_MAX_YEAR as A } from "./bundle.es54.js";
-import { useState as U, useCallback as M } from "react";
-const X = ({
-  value: p,
-  disablePast: r,
-  disableFuture: c,
-  shouldDisableDate: E,
-  minDateTime: l,
-  maxDateTime: s
-}) => {
-  const [e, u] = U(p || /* @__PURE__ */ new Date()), _ = M(() => {
-    u(L(e));
-  }, [e]), C = M(() => {
-    u(N(e, 1));
-  }, [e]), D = R({
-    disableFuture: c,
-    disablePast: r,
-    shouldDisableDate: E,
-    minDateTime: l,
-    maxDateTime: s
-  }), k = M(
-    (o, t) => {
-      const n = /* @__PURE__ */ new Date();
-      t = t || e.getFullYear();
-      const h = l ? l.getMonth() : 0, Y = s ? s.getMonth() : 11, F = l?.getFullYear() || w, f = s?.getFullYear() || A;
-      let g = t >= F && t <= f ? t === F && h > o || t === f && o > Y : !0;
-      return c && (g = g || (t === n.getFullYear() ? o > n.getMonth() : t > n.getFullYear())), r && (g = g || (t === n.getFullYear() ? o < n.getMonth() : t < n.getFullYear())), g;
-    },
-    [c, r, e, l, s]
-  ), v = M(
-    (o) => {
-      const t = /* @__PURE__ */ new Date(), n = l?.getFullYear() || w, h = s?.getFullYear() || A;
-      let Y = n > o || o > h;
-      return c && (Y = Y || o > t.getFullYear()), r && (Y = Y || o < t.getFullYear()), Y;
-    },
-    [c, r, l, s]
-  );
-  return {
-    viewDate: e,
-    setViewDate: u,
-    setPrevMonth: _,
-    setNextMonth: C,
-    isDayDisabled: D,
-    isMonthDisabled: k,
-    isYearDisabled: v
-  };
-};
+import { __exports as e } from "./bundle.es70.js";
+var c;
+function d() {
+  return c ? e : (c = 1, (function(a) {
+    Object.defineProperty(a, "__esModule", { value: !0 });
+    var n = "fas", r = "chevron-down", v = 448, o = 512, i = [], f = "f078", h = "M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z";
+    a.definition = {
+      prefix: n,
+      iconName: r,
+      icon: [
+        v,
+        o,
+        i,
+        f,
+        h
+      ]
+    }, a.faChevronDown = a.definition, a.prefix = n, a.iconName = r, a.width = v, a.height = o, a.ligatures = i, a.unicode = f, a.svgPathData = h, a.aliases = i;
+  })(e), e);
+}
 export {
-  X as useCalendar
+  d as __require
 };

package/dist/bundle.es7.js

@@ -1,82 +1,87 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-popover";
-import { attr as B } from "@companix/utils-browser";
-import M from "classnames";
-import { forwardRef as j, useRef as k } from "react";
-const D = j((a, i) => {
-  const {
-    children: n,
-    sideOffset: s,
-    matchTarget: l,
-    onAnimationEnd: c,
-    onAnimationStart: m,
-    onOpenAutoFocus: d,
-    onCloseAutoFocus: f,
-    triggerRef: p,
-    triggerProps: h,
-    open: g,
-    content: u,
-    onOpenChange: v,
-    align: C,
-    disabled: x,
-    minimal: w,
-    className: L,
-    fitMaxHeight: N = !0,
-    zIndex: O = 100,
-    side: A,
-    showArrows: P
-  } = a, e = k(null), b = () => {
-    e.current && e.current.click();
-  }, y = (R) => {
-    x && R.preventDefault();
-  };
-  return /* @__PURE__ */ t(o.Root, { open: g, onOpenChange: v, children: [
-    /* @__PURE__ */ r(o.Trigger, { ref: p, ...h, onClick: y, asChild: !0, children: n }),
-    /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ t(
-      o.Content,
-      {
-        ref: i,
-        className: M("popover", L),
-        side: A,
-        align: C,
-        "data-appearance": w ? "minimal" : "default",
-        "data-match-target": l,
-        sideOffset: s ?? 6,
-        avoidCollisions: !0,
-        arrowPadding: 10,
-        style: { zIndex: O },
-        onAnimationStart: m,
-        onAnimationEnd: c,
-        onOpenAutoFocus: d,
-        onCloseAutoFocus: f,
-        children: [
-          /* @__PURE__ */ r(o.Close, { ref: e, style: { display: "none" } }),
-          P && /* @__PURE__ */ r(o.Arrow, { width: 30, height: 11, asChild: !0, children: /* @__PURE__ */ r("div", { className: "popover-arrow", children: /* @__PURE__ */ t("svg", { className: "popover-arrow-icon", viewBox: "0 0 30 11", width: 30, height: 11, children: [
-            /* @__PURE__ */ r(
-              "path",
-              {
-                className: "popover-arrow-border",
-                d: "M 18.112 -2.704 C 19.127 -3.64 19.999 -5.626 19.999 -7.001 L 19.999 18.999 C 19.999 17.621 19.131 15.642 18.111 14.702 L 10.927 8.084 C 9.69 6.944 9.694 5.05 10.927 3.914 L 18.112 -2.704 Z",
-                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
-                transform: "matrix(0, -1, 1, 0, 0.000001, 0)"
-              }
-            ),
-            /* @__PURE__ */ r(
-              "path",
-              {
-                className: "popover-arrow-fill",
-                d: "M 17.789 -2.965 C 19.009 -4.09 19.999 -6.341 19.999 -7.995 L 19.999 -10.001 L 19.999 19.999 L 19.999 17.994 C 19.999 16.34 19.016 14.094 17.789 12.964 L 10.606 6.348 C 9.796 5.602 9.804 4.388 10.606 3.648 L 17.789 -2.966 L 17.789 -2.965 Z",
-                style: { transformBox: "fill-box", transformOrigin: "50% 50%" },
-                transform: "matrix(0, -1, 1, 0, 0, 0)"
-              }
-            )
-          ] }) }) }),
-          /* @__PURE__ */ r("div", { className: "popover-content", "data-fit-max-height": B(N), children: u({ close: b }) })
-        ]
-      }
-    ) })
-  ] });
+import { jsx as v } from "react/jsx-runtime";
+import S from "classnames";
+import { forwardRef as I } from "react";
+import { customCSS as r, px as i } from "@companix/utils-browser";
+const $ = I((t, c) => {
+  let {
+    interactionKind: m = "static",
+    thumbPos: g = "center",
+    thumbPadding: l = 4,
+    heightAuto: s,
+    scrollX: h,
+    className: u,
+    scrollY: n,
+    onWheel: b,
+    maxHeight: d,
+    onScroll: f,
+    thumbColor: p,
+    children: w
+  } = t;
+  const x = (() => {
+    if (t.implementation === "edge") {
+      l = 0;
+      const { padding: o, scrollbarWidth: e } = t;
+      return {
+        ...r({ "--scrollbar-width": i(e) }),
+        padding: `0px ${o - e}px 0px ${o}px`
+      };
+    }
+    if (t.implementation === "outer") {
+      const { shadowPadding: o = 0, noneCorrect: e, scrollbarWidth: a } = t;
+      return window.IS_MOBILE ? {
+        padding: o,
+        margin: -o
+      } : {
+        ...r({ "--scrollbar-width": i(a) }),
+        padding: o,
+        margin: -o,
+        marginRight: e ? void 0 : `calc(-${a}px - ${o}px)`,
+        marginBottom: 0
+      };
+    }
+    if (t.implementation === "inner") {
+      const { padding: o } = t;
+      return window.IS_MOBILE ? {
+        [n ? "paddingLeft" : "paddingTop"]: o,
+        [n ? "paddingRight" : "paddingBottom"]: o
+      } : {
+        [n ? "paddingLeft" : "paddingTop"]: o,
+        ...r({ "--scrollbar-width": i(o) })
+      };
+    }
+    return {};
+  })();
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: c,
+      onWheel: b,
+      onScroll: f,
+      onMouseDown: (o) => {
+        o.preventDefault();
+      },
+      style: {
+        ...x,
+        ...t.style,
+        maxHeight: d ? i(d) : void 0,
+        ...r({ "--thumb-padding": i(l) }),
+        ...r({ "--thumb-color": p ?? "#c1c2c8bd" })
+      },
+      className: S(
+        !window.IS_MOBILE && "scrollable",
+        u,
+        s ? "" : "h-full",
+        {
+          "overflow-y-scroll": n,
+          "overflow-x-scroll": h,
+          "scrollable-hover-interaction": m === "hover",
+          "scrollable-border-position": g === "border"
+        }
+      ),
+      children: w
+    }
+  );
 });
 export {
-  D as Popover
+  $ as Scrollable
 };

package/dist/bundle.es70.js

@@ -1,4 +1,4 @@
-var a = {};
+var o = {};
 export {
-  a as __exports
+  o as __exports
 };

package/dist/bundle.es71.js

@@ -1,16 +1,23 @@
-import { useRef as f, useLayoutEffect as u, useEffect as s } from "react";
-const o = (t, r) => {
-  const e = f(!1);
-  u(() => {
-    e.current = !0, t();
-  }, []), s(() => {
-    if (e.current) {
-      e.current = !1;
-      return;
-    }
-    t();
-  }, r);
-};
+import { __exports as a } from "./bundle.es72.js";
+import { __require as n } from "./bundle.es73.js";
+var r;
+function f() {
+  return r ? a : (r = 1, (function(e) {
+    Object.defineProperty(e, "__esModule", { value: !0 });
+    var i = /* @__PURE__ */ n();
+    e.definition = {
+      prefix: i.prefix,
+      iconName: i.iconName,
+      icon: [
+        i.width,
+        i.height,
+        i.aliases,
+        i.unicode,
+        i.svgPathData
+      ]
+    }, e.faClose = e.definition, e.prefix = i.prefix, e.iconName = i.iconName, e.width = i.width, e.height = i.height, e.ligatures = i.aliases, e.unicode = i.unicode, e.svgPathData = i.svgPathData, e.aliases = i.aliases;
+  })(a), a);
+}
 export {
-  o as useEffectWithLayout
+  f as __require
 };

package/dist/bundle.es72.js

@@ -1,5 +1,4 @@
-import { __require as r } from "./bundle.es74.js";
-var o = /* @__PURE__ */ r();
+var a = {};
 export {
-  o as f
+  a as __exports
 };

package/dist/bundle.es73.js

@@ -1,5 +1,22 @@
-import { __require as r } from "./bundle.es76.js";
-var o = /* @__PURE__ */ r();
+import { __exports as e } from "./bundle.es77.js";
+var t;
+function d() {
+  return t ? e : (t = 1, (function(a) {
+    Object.defineProperty(a, "__esModule", { value: !0 });
+    var r = "fas", n = "xmark", c = 384, f = 512, i = [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], u = "f00d", m = "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z";
+    a.definition = {
+      prefix: r,
+      iconName: n,
+      icon: [
+        c,
+        f,
+        i,
+        u,
+        m
+      ]
+    }, a.faXmark = a.definition, a.prefix = r, a.iconName = n, a.width = c, a.height = f, a.ligatures = i, a.unicode = u, a.svgPathData = m, a.aliases = i;
+  })(e), e);
+}
 export {
-  o as f
+  d as __require
 };

package/dist/bundle.es74.js

@@ -1,22 +1,5 @@
-import { __exports as e } from "./bundle.es75.js";
-var c;
-function g() {
-  return c ? e : (c = 1, (function(i) {
-    Object.defineProperty(i, "__esModule", { value: !0 });
-    var r = "fas", n = "chevron-right", h = 320, v = 512, a = [9002], t = "f054", f = "M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z";
-    i.definition = {
-      prefix: r,
-      iconName: n,
-      icon: [
-        h,
-        v,
-        a,
-        t,
-        f
-      ]
-    }, i.faChevronRight = i.definition, i.prefix = r, i.iconName = n, i.width = h, i.height = v, i.ligatures = a, i.unicode = t, i.svgPathData = f, i.aliases = a;
-  })(e), e);
-}
+import { __require as r } from "./bundle.es78.js";
+var o = /* @__PURE__ */ r();
 export {
-  g as __require
+  o as f
 };

package/dist/bundle.es75.js

@@ -1,4 +1,5 @@
-var r = {};
+import { __require as r } from "./bundle.es80.js";
+var o = /* @__PURE__ */ r();
 export {
-  r as __exports
+  o as f
 };

package/dist/bundle.es76.js

@@ -1,22 +1,16 @@
-import { __exports as i } from "./bundle.es77.js";
-var c;
-function o() {
-  return c ? i : (c = 1, (function(e) {
-    Object.defineProperty(e, "__esModule", { value: !0 });
-    var n = "fas", r = "chevron-left", f = 320, v = 512, a = [9001], t = "f053", h = "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z";
-    e.definition = {
-      prefix: n,
-      iconName: r,
-      icon: [
-        f,
-        v,
-        a,
-        t,
-        h
-      ]
-    }, e.faChevronLeft = e.definition, e.prefix = n, e.iconName = r, e.width = f, e.height = v, e.ligatures = a, e.unicode = t, e.svgPathData = h, e.aliases = a;
-  })(i), i);
-}
+import { useRef as f, useLayoutEffect as u, useEffect as s } from "react";
+const o = (t, r) => {
+  const e = f(!1);
+  u(() => {
+    e.current = !0, t();
+  }, []), s(() => {
+    if (e.current) {
+      e.current = !1;
+      return;
+    }
+    t();
+  }, r);
+};
 export {
-  o as __require
+  o as useEffectWithLayout
 };

package/dist/bundle.es77.js

@@ -1,4 +1,4 @@
-var e = {};
+var a = {};
 export {
-  e as __exports
+  a as __exports
 };

package/dist/bundle.es78.js

@@ -0,0 +1,22 @@
+import { __exports as e } from "./bundle.es79.js";
+var c;
+function g() {
+  return c ? e : (c = 1, (function(i) {
+    Object.defineProperty(i, "__esModule", { value: !0 });
+    var r = "fas", n = "chevron-right", h = 320, v = 512, a = [9002], t = "f054", f = "M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z";
+    i.definition = {
+      prefix: r,
+      iconName: n,
+      icon: [
+        h,
+        v,
+        a,
+        t,
+        f
+      ]
+    }, i.faChevronRight = i.definition, i.prefix = r, i.iconName = n, i.width = h, i.height = v, i.ligatures = a, i.unicode = t, i.svgPathData = f, i.aliases = a;
+  })(e), e);
+}
+export {
+  g as __require
+};

package/dist/bundle.es79.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/bundle.es8.js

@@ -1,28 +1,87 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { Popover as m } from "./bundle.es7.js";
-const f = ({ children: e, content: t, side: r }) => {
-  const [s, o] = p(!1);
-  return /* @__PURE__ */ n(
-    m,
-    {
-      showArrows: !0,
-      className: "tooltip",
-      open: s,
-      side: r,
-      content: () => t,
-      triggerProps: {
-        onMouseEnter: () => {
-          o(!0);
-        },
-        onMouseLeave: () => {
-          o(!1);
-        }
-      },
-      children: e
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import L from "classnames";
+import { useRef as d, useMemo as f, useCallback as n, useEffect as T, useLayoutEffect as H } from "react";
+import { getContainers as p, pc as h, px as v } from "@companix/utils-browser";
+const C = ({
+  children: b,
+  thumbClassName: y,
+  scrollableClassName: g,
+  thumbMargin: R = 0,
+  trackWidth: w = 20
+}) => {
+  const l = d(null), t = d(null), r = f(() => ({ positons: { top: 0, y: 0 }, scrollRatio: 0 }), []), i = f(() => ({
+    start() {
+      document.addEventListener("mousemove", a), document.addEventListener("mouseup", m);
+    },
+    clear() {
+      document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", m);
     }
-  );
+  }), []);
+  T(() => {
+    const o = new ResizeObserver(u);
+    return t.current && p(t.current, (e) => {
+      o.observe(e);
+    }), () => {
+      t.current && p(t.current, (e) => {
+        o.unobserve(e);
+      });
+    };
+  }, []), H(() => {
+    u();
+  }, []);
+  const u = n(() => {
+    const { current: o } = t, { current: e } = l;
+    if (e && o) {
+      const s = o.clientHeight / o.scrollHeight;
+      e.style.height = h(s * 100), e.style.display = s === 1 ? "none" : "block", r.scrollRatio = s;
+    }
+  }, []), a = n(({ clientY: o }) => {
+    const { current: e } = t;
+    if (e) {
+      const s = o - r.positons.y;
+      e.scrollTop = r.positons.top + s / r.scrollRatio;
+    }
+  }, []), m = n(() => {
+    i.clear();
+  }, []), E = n(({ clientY: o }) => {
+    const { current: e } = t;
+    e && (r.positons = {
+      top: e.scrollTop,
+      y: o
+    }), i.start();
+  }, []), M = () => {
+    requestAnimationFrame(() => {
+      const { current: o } = t, { current: e } = l;
+      e && o && (e.style.top = h(o.scrollTop * 100 / o.scrollHeight));
+    });
+  };
+  return /* @__PURE__ */ x("div", { className: "relative h-full overflow-hidden", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: L("hidden-scroll h-full overflow-y-scroll", g),
+        onScroll: M,
+        ref: t,
+        children: b
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "absolute right-0 top-0 box-border h-full",
+        style: { width: v(w), padding: v(R) },
+        children: /* @__PURE__ */ c(
+          "div",
+          {
+            onMouseDown: E,
+            className: `${y} relative w-full rounded-full`,
+            ref: l
+          }
+        )
+      }
+    )
+  ] });
 };
 export {
-  f as Tooltip
+  C as ImitateScroll
 };

package/dist/bundle.es80.js

@@ -0,0 +1,22 @@
+import { __exports as i } from "./bundle.es81.js";
+var c;
+function o() {
+  return c ? i : (c = 1, (function(e) {
+    Object.defineProperty(e, "__esModule", { value: !0 });
+    var n = "fas", r = "chevron-left", f = 320, v = 512, a = [9001], t = "f053", h = "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z";
+    e.definition = {
+      prefix: n,
+      iconName: r,
+      icon: [
+        f,
+        v,
+        a,
+        t,
+        h
+      ]
+    }, e.faChevronLeft = e.definition, e.prefix = n, e.iconName = r, e.width = f, e.height = v, e.ligatures = a, e.unicode = t, e.svgPathData = h, e.aliases = a;
+  })(i), i);
+}
+export {
+  o as __require
+};

package/dist/bundle.es81.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};