@companix/uikit 0.1.41 → 0.1.43

package/dist/bundle.es19.js

@@ -1,36 +1,23 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import b from "classnames";
-import * as s from "@radix-ui/react-checkbox";
-import { Icon as x } from "./bundle.es36.js";
-import { faCheck as k } from "@companix/icons-solid";
-import { useId as f } from "react";
-import { attr as c } from "@companix/utils-browser";
-const j = (d) => {
-  const { checked: a, className: m, required: t, disabled: o, onCheckedChange: l, size: h, label: r } = d, i = f();
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      className: b("checkbox", m),
-      "data-size": h ?? "md",
-      "data-required": c(t && !a),
-      "data-disabled": c(o),
-      children: [
-        /* @__PURE__ */ e(
-          s.Root,
-          {
-            className: "checkbox-box",
-            checked: a,
-            onCheckedChange: l,
-            disabled: o,
-            id: i,
-            children: /* @__PURE__ */ e(s.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ e(x, { icon: k, size: "xxxs" }) })
-          }
-        ),
-        r && /* @__PURE__ */ e("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(o), children: r })
-      ]
-    }
-  );
-};
+import { jsx as r } from "react/jsx-runtime";
+import { Scrollable as n } from "./bundle.es8.js";
+const s = ({
+  children: o,
+  maxHeight: t,
+  scrollboxRef: i,
+  optionsWrapperRef: e
+}) => /* @__PURE__ */ r(
+  n,
+  {
+    ref: i,
+    implementation: "inner",
+    padding: 10,
+    thumbPadding: 3,
+    thumbColor: "#0000002b",
+    maxHeight: t,
+    scrollY: !0,
+    children: /* @__PURE__ */ r("div", { className: "option-list", ref: e, children: o })
+  }
+);
 export {
-  j as Checkbox
+  s as OptionsList
 };

package/dist/bundle.es20.js

@@ -1,27 +1,36 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-switch";
-import { attr as a } from "@companix/utils-browser";
-import { useId as n } from "react";
-const u = (m) => {
-  const { checked: e, disabled: s, onCheckedChange: o, uncheckedIcon: i, checkedIcon: t, label: h } = m, l = n();
-  return /* @__PURE__ */ d("div", { className: "switch", "data-disabled": a(s), children: [
-    /* @__PURE__ */ c(
-      r.Root,
-      {
-        className: "switch-track",
-        checked: e,
-        onCheckedChange: o,
-        disabled: s,
-        id: l,
-        children: /* @__PURE__ */ d(r.Thumb, { className: "switch-thumb", children: [
-          i && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(!e), children: i }),
-          t && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(e), children: t })
-        ] })
-      }
-    ),
-    h && /* @__PURE__ */ c("label", { className: "switch-label", htmlFor: l, "data-disabled": s, children: h })
-  ] });
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import b from "classnames";
+import * as s from "@radix-ui/react-checkbox";
+import { Icon as x } from "./bundle.es37.js";
+import { faCheck as k } from "@companix/icons-solid";
+import { useId as f } from "react";
+import { attr as c } from "@companix/utils-browser";
+const j = (d) => {
+  const { checked: a, className: m, required: t, disabled: o, onCheckedChange: l, size: h, label: r } = d, i = f();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: b("checkbox", m),
+      "data-size": h ?? "md",
+      "data-required": c(t && !a),
+      "data-disabled": c(o),
+      children: [
+        /* @__PURE__ */ e(
+          s.Root,
+          {
+            className: "checkbox-box",
+            checked: a,
+            onCheckedChange: l,
+            disabled: o,
+            id: i,
+            children: /* @__PURE__ */ e(s.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ e(x, { icon: k, size: "xxxs" }) })
+          }
+        ),
+        r && /* @__PURE__ */ e("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(o), children: r })
+      ]
+    }
+  );
 };
 export {
-  u as Switch
+  j as Checkbox
 };

package/dist/bundle.es21.js

@@ -1,48 +1,27 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import h from "classnames";
-import { useId as N } from "react";
-import * as l from "@radix-ui/react-radio-group";
-import { attr as s } from "@companix/utils-browser";
-const R = (t) => {
-  const { options: m, value: a, onChange: r, disabled: i, required: e, size: n, className: c } = t;
-  return /* @__PURE__ */ o(
-    l.Root,
-    {
-      className: h("radio-group", c),
-      disabled: i,
-      "data-required": s(e && !a),
-      "data-v": a,
-      value: a,
-      onValueChange: (d) => r(d),
-      children: m.map((d, u) => /* @__PURE__ */ o(
-        f,
-        {
-          ...d,
-          size: n,
-          disabled: i,
-          required: e && !a
-        },
-        `radio-${d.value}-${u}`
-      ))
-    }
-  );
-}, f = ({ value: t, label: m, size: a = "md", disabled: r, required: i }) => {
-  const e = N();
-  return /* @__PURE__ */ p(
-    "span",
-    {
-      className: "radio",
-      "data-disabled": s(r),
-      "data-size": a,
-      "data-required": s(i),
-      children: [
-        /* @__PURE__ */ o(l.Item, { className: "radio-box", value: t, disabled: r, id: e, children: /* @__PURE__ */ o(l.Indicator, { className: "radio-mark" }) }),
-        /* @__PURE__ */ o("label", { className: "radio-label", htmlFor: e, "data-disabled": s(r), children: m })
-      ]
-    }
-  );
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-switch";
+import { attr as a } from "@companix/utils-browser";
+import { useId as n } from "react";
+const u = (m) => {
+  const { checked: e, disabled: s, onCheckedChange: o, uncheckedIcon: i, checkedIcon: t, label: h } = m, l = n();
+  return /* @__PURE__ */ d("div", { className: "switch", "data-disabled": a(s), children: [
+    /* @__PURE__ */ c(
+      r.Root,
+      {
+        className: "switch-track",
+        checked: e,
+        onCheckedChange: o,
+        disabled: s,
+        id: l,
+        children: /* @__PURE__ */ d(r.Thumb, { className: "switch-thumb", children: [
+          i && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(!e), children: i }),
+          t && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(e), children: t })
+        ] })
+      }
+    ),
+    h && /* @__PURE__ */ c("label", { className: "switch-label", htmlFor: l, "data-disabled": s, children: h })
+  ] });
 };
 export {
-  f as Radio,
-  R as RadioGroup
+  u as Switch
 };

package/dist/bundle.es22.js

@@ -1,28 +1,48 @@
-import { jsx as c } from "react/jsx-runtime";
-import r from "classnames";
-import { customCSS as i } from "@companix/utils-browser";
-import { PopupLayout as o } from "./bundle.es25.js";
-const l = ({
-  direction: e,
-  children: t,
-  size: a,
-  overlayClassName: m,
-  className: s,
-  ...p
-}) => /* @__PURE__ */ c(
-  o,
-  {
-    ...p,
-    overlay: { className: r("drawer-overlay", m) },
-    content: {
-      className: r("popup drawer", s),
-      style: i({ "--drawer-size": a ?? "50%" }),
-      "data-direction": e
-    },
-    children: t
-  }
-);
-l.Close = o.Close;
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import h from "classnames";
+import { useId as N } from "react";
+import * as l from "@radix-ui/react-radio-group";
+import { attr as s } from "@companix/utils-browser";
+const R = (t) => {
+  const { options: m, value: a, onChange: r, disabled: i, required: e, size: n, className: c } = t;
+  return /* @__PURE__ */ o(
+    l.Root,
+    {
+      className: h("radio-group", c),
+      disabled: i,
+      "data-required": s(e && !a),
+      "data-v": a,
+      value: a,
+      onValueChange: (d) => r(d),
+      children: m.map((d, u) => /* @__PURE__ */ o(
+        f,
+        {
+          ...d,
+          size: n,
+          disabled: i,
+          required: e && !a
+        },
+        `radio-${d.value}-${u}`
+      ))
+    }
+  );
+}, f = ({ value: t, label: m, size: a = "md", disabled: r, required: i }) => {
+  const e = N();
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      className: "radio",
+      "data-disabled": s(r),
+      "data-size": a,
+      "data-required": s(i),
+      children: [
+        /* @__PURE__ */ o(l.Item, { className: "radio-box", value: t, disabled: r, id: e, children: /* @__PURE__ */ o(l.Indicator, { className: "radio-mark" }) }),
+        /* @__PURE__ */ o("label", { className: "radio-label", htmlFor: e, "data-disabled": s(r), children: m })
+      ]
+    }
+  );
+};
 export {
-  l as Drawer
+  f as Radio,
+  R as RadioGroup
 };

package/dist/bundle.es23.js

@@ -1,263 +1,28 @@
-import { jsx as s, jsxs as q } from "react/jsx-runtime";
-import t from "react";
-import G from "classnames";
-import * as E from "@radix-ui/react-dialog";
-import { VisuallyHidden as K } from "@radix-ui/react-visually-hidden";
-import { customCSS as oe } from "@companix/utils-browser";
-import { RemoveListener as se } from "./bundle.es60.js";
-import { DrawerContext as ie, useDrawerContext as J } from "./bundle.es70.js";
-import { set as R, reset as ae, composeRefs as Q, isInput as ce, isMobileFirefox as ue, getTranslate as W, isIOS as le, dampenValue as fe } from "./bundle.es71.js";
-import { usePreventScroll as de } from "./bundle.es72.js";
-import { DRAG_CLASS as j, VELOCITY_THRESHOLD as ge, CLOSE_THRESHOLD as me, SCROLL_LOCK_TIMEOUT as pe, TRANSITIONS as Y, WINDOW_TOP_OFFSET as he } from "./bundle.es73.js";
-const we = (m) => {
-  const { open: p, onOpenChange: l, onClosed: D, children: y, defaultOpen: S = !1, disableEsc: f } = m, [M, P] = t.useState(!1), [T, v] = t.useState(!1), [_, A] = t.useState(!1), x = t.useRef(null), H = t.useRef(null), I = t.useRef(null), L = t.useRef(null), o = t.useRef(null), d = t.useRef(!1), h = t.useRef(0), b = t.useRef(!1), N = t.useRef(!S), e = t.useRef(null), O = t.useRef(e.current?.getBoundingClientRect().height || 0), g = t.useRef(0), C = t.useRef(0), w = p ?? !1, V = t.useCallback(
-    (r) => {
-      l(r);
+import { jsx as c } from "react/jsx-runtime";
+import r from "classnames";
+import { customCSS as i } from "@companix/utils-browser";
+import { PopupLayout as o } from "./bundle.es26.js";
+const l = ({
+  direction: e,
+  children: t,
+  size: a,
+  overlayClassName: m,
+  className: s,
+  ...p
+}) => /* @__PURE__ */ c(
+  o,
+  {
+    ...p,
+    overlay: { className: r("drawer-overlay", m) },
+    content: {
+      className: r("popup drawer", s),
+      style: i({ "--drawer-size": a ?? "50%" }),
+      "data-direction": e
     },
-    [l]
-  );
-  de({
-    isDisabled: !w || T || _ || !M
-  });
-  const ee = (r) => {
-    e.current && !e.current.contains(r.target) || (O.current = e.current?.getBoundingClientRect().height || 0, v(!0), I.current = /* @__PURE__ */ new Date(), le() && window.addEventListener("touchend", () => d.current = !1, { once: !0 }), r.target.setPointerCapture(r.pointerId), h.current = r.pageY);
-  }, z = (r, c) => {
-    let n = r;
-    const u = window.getSelection()?.toString(), i = e.current ? W(e.current) : null, a = /* @__PURE__ */ new Date();
-    if (n.tagName === "SELECT" || n.hasAttribute("data-no-drag") || n.closest("[data-no-drag]") || H.current && a.getTime() - H.current.getTime() < 500)
-      return !1;
-    if (i !== null && i > 0)
-      return !0;
-    if (u && u.length > 0)
-      return !1;
-    if (o.current && a.getTime() - o.current.getTime() < pe && i === 0 || c)
-      return o.current = a, !1;
-    for (; n; ) {
-      if (n.scrollHeight > n.clientHeight) {
-        if (n.scrollTop !== 0)
-          return o.current = /* @__PURE__ */ new Date(), !1;
-        if (n.getAttribute("role") === "dialog")
-          return !0;
-      }
-      n = n.parentNode;
-    }
-    return !0;
-  }, te = (r) => {
-    if (e.current && T) {
-      const c = h.current - r.pageY, n = c > 0, u = Math.abs(c), i = O.current, a = u / i;
-      if (!d.current && !z(r.target, n)) return;
-      if (e.current.classList.add(j), d.current = !0, R(e.current, {
-        transition: "none"
-      }), R(x.current, {
-        transition: "none"
-      }), n) {
-        const F = fe(c), U = Math.min(F * -1, 0) * 1;
-        R(e.current, {
-          transform: `translate3d(0, ${U}px, 0)`
-        });
-        return;
-      }
-      const k = 1 - a;
-      R(
-        x.current,
-        {
-          opacity: `${k}`,
-          transition: "none"
-        },
-        !0
-      );
-      const $ = u;
-      R(e.current, {
-        transform: `translate3d(0, ${$}px, 0)`
-      });
-    }
-  };
-  t.useEffect(() => {
-    window.requestAnimationFrame(() => {
-      N.current = !0;
-    });
-  }, []), t.useEffect(() => {
-    const r = () => {
-      if (!e.current) return;
-      const c = document.activeElement;
-      if (ce(c) || b.current) {
-        const n = window.visualViewport?.height || 0, u = window.innerHeight, i = u - n, a = e.current.getBoundingClientRect().height || 0, k = a > u * 0.8;
-        g.current || (g.current = a);
-        const $ = e.current.getBoundingClientRect().top;
-        if (Math.abs(C.current - i) > 60 && (b.current = !b.current), C.current = i, a > n || b.current) {
-          const F = e.current.getBoundingClientRect().height;
-          let U = F;
-          F > n && (U = n - (k ? $ : he)), e.current.style.height = `${Math.max(
-            U,
-            n - $
-          )}px`;
-        } else ue() || (e.current.style.height = `${g.current}px`);
-        e.current.style.bottom = `${Math.max(i, 0)}px`;
-      }
-    };
-    return window.visualViewport?.addEventListener("resize", r), () => window.visualViewport?.removeEventListener("resize", r);
-  }, []);
-  const B = (r) => {
-    re(), r || V(!1);
-  }, X = () => {
-    e.current && (R(e.current, {
-      transform: "translate3d(0, 0, 0)",
-      transition: `transform ${Y.DURATION}s cubic-bezier(${Y.EASE.join(",")})`
-    }), R(x.current, {
-      transition: `opacity ${Y.DURATION}s cubic-bezier(${Y.EASE.join(",")})`,
-      opacity: "1"
-    }));
-  }, re = () => {
-    !T || !e.current || (e.current.classList.remove(j), d.current = !1, v(!1), L.current = /* @__PURE__ */ new Date());
-  }, ne = (r) => {
-    if (!T || !e.current) return;
-    e.current.classList.remove(j), d.current = !1, v(!1), L.current = /* @__PURE__ */ new Date();
-    const c = W(e.current);
-    if (!r || !z(r.target, !1) || !c || Number.isNaN(c) || I.current === null) return;
-    const n = L.current.getTime() - I.current.getTime(), u = h.current - r.pageY, i = Math.abs(u) / n;
-    if (i > 0.05 && (A(!0), setTimeout(() => {
-      A(!1);
-    }, 200)), u > 0) {
-      X();
-      return;
-    }
-    if (i > ge) {
-      B();
-      return;
-    }
-    const a = Math.min(
-      e.current.getBoundingClientRect().height ?? 0,
-      window.innerHeight
-    );
-    if (Math.abs(c) >= a * me) {
-      B();
-      return;
-    }
-    X();
-  };
-  return t.useEffect(() => (w && (P(!0), R(document.documentElement, {
-    scrollBehavior: "auto"
-  }), H.current = /* @__PURE__ */ new Date()), () => {
-    ae(document.documentElement, "scrollBehavior");
-  }), [w]), /* @__PURE__ */ s(
-    E.Root,
-    {
-      defaultOpen: S,
-      onOpenChange: (r) => {
-        r ? P(!0) : B(!0), V(r);
-      },
-      open: w,
-      modal: !0,
-      children: /* @__PURE__ */ s(
-        ie.Provider,
-        {
-          value: {
-            drawerRef: e,
-            overlayRef: x,
-            onPress: ee,
-            onRelease: ne,
-            onDrag: te,
-            isOpen: w,
-            isDragging: T,
-            keyboardIsOpen: b,
-            closeDrawer: () => B(),
-            shouldAnimate: N,
-            onClosed: D,
-            disableEsc: f
-          },
-          children: y
-        }
-      )
-    }
-  );
-}, Re = t.forwardRef(
-  ({ className: m, ...p }, l) => {
-    const { overlayRef: D, onRelease: y, shouldAnimate: S } = J(), f = Q(l, D), M = t.useCallback(
-      (P) => y(P),
-      [y]
-    );
-    return /* @__PURE__ */ s(
-      E.Overlay,
-      {
-        onMouseUp: M,
-        ref: f,
-        "data-animate": S?.current ? "true" : "false",
-        className: G("popup-overlay drawer-overlay", m),
-        ...p
-      }
-    );
+    children: t
   }
-), De = t.forwardRef(
-  ({ onPointerDownOutside: m, style: p, onOpenAutoFocus: l, className: D, size: y, children: S, ...f }, M) => {
-    const {
-      drawerRef: P,
-      onPress: T,
-      onRelease: v,
-      onDrag: _,
-      keyboardIsOpen: A,
-      shouldAnimate: x,
-      onClosed: H,
-      disableEsc: I
-    } = J(), L = Q(M, P), o = t.useRef(null), d = t.useRef(null), h = t.useRef(!1), b = (e, O = 0) => {
-      if (h.current) return !0;
-      const g = Math.abs(e.y), w = Math.abs(e.x) > g;
-      return !(e.y * 1 < 0) && g >= 0 && g <= O ? !w : (h.current = !0, !0);
-    }, N = (e) => {
-      o.current = null, h.current = !1, v(e);
-    };
-    return /* @__PURE__ */ q(
-      E.Content,
-      {
-        "data-direction": "bottom",
-        "data-animate": x?.current ? "true" : "false",
-        className: G("popup drawer drawer-mobile", D),
-        style: { ...oe({ "--drawer-size": y ?? "50%" }), ...p },
-        ...f,
-        ref: L,
-        onPointerDown: (e) => {
-          f.onPointerDown?.(e), o.current = { x: e.pageX, y: e.pageY }, T(e);
-        },
-        onOpenAutoFocus: (e) => {
-          l?.(e), e.preventDefault();
-        },
-        onEscapeKeyDown: (e) => {
-          I && e.preventDefault();
-        },
-        onPointerDownOutside: (e) => {
-          m?.(e), !e.defaultPrevented && A.current && (A.current = !1);
-        },
-        onPointerMove: (e) => {
-          if (d.current = e, f.onPointerMove?.(e), !o.current) return;
-          const O = e.pageY - o.current.y, g = e.pageX - o.current.x, C = e.pointerType === "touch" ? 10 : 2;
-          b({ x: g, y: O }, C) ? _(e) : (Math.abs(g) > C || Math.abs(O) > C) && (o.current = null);
-        },
-        onPointerUp: (e) => {
-          f.onPointerUp?.(e), o.current = null, h.current = !1, v(e);
-        },
-        onPointerOut: (e) => {
-          f.onPointerOut?.(e), N(d.current);
-        },
-        onContextMenu: (e) => {
-          f.onContextMenu?.(e), d.current && N(d.current);
-        },
-        children: [
-          /* @__PURE__ */ s(se, { callback: H }),
-          /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(E.Title, {}) }),
-          /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(E.Description, {}) }),
-          S
-        ]
-      }
-    );
-  }
-), Te = t.forwardRef(
-  ({ children: m, ...p }, l) => /* @__PURE__ */ s("div", { className: "drawer-handle", "aria-hidden": "true", ref: l, ...p, children: /* @__PURE__ */ s("span", { className: "drawer-handle-hitarea", "aria-hidden": "true", children: m }) })
-), Z = ({ children: m, className: p, size: l, ...D }) => /* @__PURE__ */ s(we, { ...D, children: /* @__PURE__ */ q(E.Portal, { children: [
-  /* @__PURE__ */ s(Re, {}),
-  /* @__PURE__ */ s(De, { className: p, size: l, children: m })
-] }) });
-Z.Close = E.Close;
-Z.Handle = Te;
+);
+l.Close = o.Close;
 export {
-  Te as Handle,
-  Z as MobileDrawer
+  l as Drawer
 };