@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

package/dist/components/Checkbox/Checkbox.js

@@ -1,196 +1,195 @@
-import { jsx as v, jsxs as W, Fragment as Z } from "react/jsx-runtime";
-import { c as ee } from "../../compiler-runtime-DA41awpA.js";
-import * as g from "react";
-import F, { forwardRef as $, useId as te } from "react";
-import { u as H } from "../../index-DLcqcWxM.js";
-import { P as z, a as re, c as D, b as oe } from "../../index--l0zux8V.js";
-import { u as ne } from "../../index-BZPx6jYI.js";
-import { u as ae } from "../../index-BRXMsxSL.js";
-import { P as se } from "../../index-3fEdeexs.js";
-import { cn as T } from "../../utils/index.js";
-import { checkboxVariants as ce, labelVariants as ie } from "./Checkbox.variants.js";
-import { useToggle as le } from "../../hooks/useToggle.js";
-import { P as j } from "../../index-BOE_3f_Z.js";
-function L() {
-  return L = Object.assign || function(t) {
+import { jsx as f, jsxs as B, Fragment as U } from "react/jsx-runtime";
+import * as p from "react";
+import j, { forwardRef as z, useId as V, useCallback as X } from "react";
+import { u as L } from "../../index-DLcqcWxM.js";
+import { P as I, a as J, c as T, b as Q } from "../../index--l0zux8V.js";
+import { u as Y } from "../../index-BZPx6jYI.js";
+import { u as Z } from "../../index-BRXMsxSL.js";
+import { P as ee } from "../../index-3fEdeexs.js";
+import { cn as E } from "../../utils/index.js";
+import { checkboxVariants as te, labelVariants as re } from "./Checkbox.variants.js";
+import { useToggle as oe } from "../../hooks/useToggle.js";
+import { P } from "../../index-BOE_3f_Z.js";
+function R() {
+  return R = Object.assign || function(e) {
     for (var a = 1; a < arguments.length; a++) {
-      var e = arguments[a];
-      for (var n in e)
-        Object.prototype.hasOwnProperty.call(e, n) && (t[n] = e[n]);
+      var n = arguments[a];
+      for (var r in n)
+        Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
     }
-    return t;
-  }, L.apply(this, arguments);
+    return e;
+  }, R.apply(this, arguments);
 }
-function de(t, a) {
-  if (t == null) return {};
-  var e = ue(t, a), n, o;
+function ne(e, a) {
+  if (e == null) return {};
+  var n = ae(e, a), r, o;
   if (Object.getOwnPropertySymbols) {
-    var r = Object.getOwnPropertySymbols(t);
-    for (o = 0; o < r.length; o++)
-      n = r[o], !(a.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(t, n) && (e[n] = t[n]);
+    var t = Object.getOwnPropertySymbols(e);
+    for (o = 0; o < t.length; o++)
+      r = t[o], !(a.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
   }
-  return e;
+  return n;
 }
-function ue(t, a) {
-  if (t == null) return {};
-  var e = {}, n = Object.keys(t), o, r;
-  for (r = 0; r < n.length; r++)
-    o = n[r], !(a.indexOf(o) >= 0) && (e[o] = t[o]);
-  return e;
+function ae(e, a) {
+  if (e == null) return {};
+  var n = {}, r = Object.keys(e), o, t;
+  for (t = 0; t < r.length; t++)
+    o = r[t], !(a.indexOf(o) >= 0) && (n[o] = e[o]);
+  return n;
 }
-var M = $(function(t, a) {
-  var e = t.color, n = e === void 0 ? "currentColor" : e, o = t.size, r = o === void 0 ? 24 : o, d = de(t, ["color", "size"]);
-  return /* @__PURE__ */ F.createElement("svg", L({
+var N = z(function(e, a) {
+  var n = e.color, r = n === void 0 ? "currentColor" : n, o = e.size, t = o === void 0 ? 24 : o, l = ne(e, ["color", "size"]);
+  return /* @__PURE__ */ j.createElement("svg", R({
     ref: a,
     xmlns: "http://www.w3.org/2000/svg",
-    width: r,
-    height: r,
+    width: t,
+    height: t,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: n,
+    stroke: r,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, d), /* @__PURE__ */ F.createElement("polyline", {
+  }, l), /* @__PURE__ */ j.createElement("polyline", {
     points: "20 6 9 17 4 12"
   }));
 });
-M.propTypes = {
-  color: j.string,
-  size: j.oneOfType([j.string, j.number])
+N.propTypes = {
+  color: P.string,
+  size: P.oneOfType([P.string, P.number])
 };
-M.displayName = "Check";
-var B = "Checkbox", [fe] = oe(B), [pe, q] = fe(B);
-function me(t) {
+N.displayName = "Check";
+var _ = "Checkbox", [ce] = Q(_), [se, O] = ce(_);
+function ie(e) {
   const {
     __scopeCheckbox: a,
-    checked: e,
-    children: n,
+    checked: n,
+    children: r,
     defaultChecked: o,
-    disabled: r,
-    form: d,
-    name: c,
-    onCheckedChange: l,
-    required: p,
-    value: m = "on",
+    disabled: t,
+    form: l,
+    name: h,
+    onCheckedChange: i,
+    required: b,
+    value: k = "on",
     // @ts-expect-error
-    internal_do_not_use_render: u
-  } = t, [i, k] = re({
-    prop: e,
+    internal_do_not_use_render: d
+  } = e, [u, x] = J({
+    prop: n,
     defaultProp: o ?? !1,
-    onChange: l,
-    caller: B
-  }), [h, b] = g.useState(null), [C, s] = g.useState(null), f = g.useRef(!1), I = h ? !!d || !!h.closest("form") : (
+    onChange: i,
+    caller: _
+  }), [C, m] = p.useState(null), [v, c] = p.useState(null), s = p.useRef(!1), y = C ? !!l || !!C.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
-  ), y = {
-    checked: i,
-    disabled: r,
-    setChecked: k,
-    control: h,
-    setControl: b,
-    name: c,
-    form: d,
-    value: m,
-    hasConsumerStoppedPropagationRef: f,
-    required: p,
-    defaultChecked: _(o) ? !1 : o,
-    isFormControl: I,
-    bubbleInput: C,
-    setBubbleInput: s
+  ), w = {
+    checked: u,
+    disabled: t,
+    setChecked: x,
+    control: C,
+    setControl: m,
+    name: h,
+    form: l,
+    value: k,
+    hasConsumerStoppedPropagationRef: s,
+    required: b,
+    defaultChecked: g(o) ? !1 : o,
+    isFormControl: y,
+    bubbleInput: v,
+    setBubbleInput: c
   };
-  return /* @__PURE__ */ v(
-    pe,
+  return /* @__PURE__ */ f(
+    se,
     {
       scope: a,
-      ...y,
-      children: he(u) ? u(y) : n
+      ...w,
+      children: le(d) ? d(w) : r
     }
   );
 }
-var K = "CheckboxTrigger", G = g.forwardRef(
-  ({ __scopeCheckbox: t, onKeyDown: a, onClick: e, ...n }, o) => {
+var M = "CheckboxTrigger", q = p.forwardRef(
+  ({ __scopeCheckbox: e, onKeyDown: a, onClick: n, ...r }, o) => {
     const {
-      control: r,
-      value: d,
-      disabled: c,
-      checked: l,
-      required: p,
-      setControl: m,
-      setChecked: u,
-      hasConsumerStoppedPropagationRef: i,
-      isFormControl: k,
-      bubbleInput: h
-    } = q(K, t), b = H(o, m), C = g.useRef(l);
-    return g.useEffect(() => {
-      const s = r?.form;
-      if (s) {
-        const f = () => u(C.current);
-        return s.addEventListener("reset", f), () => s.removeEventListener("reset", f);
+      control: t,
+      value: l,
+      disabled: h,
+      checked: i,
+      required: b,
+      setControl: k,
+      setChecked: d,
+      hasConsumerStoppedPropagationRef: u,
+      isFormControl: x,
+      bubbleInput: C
+    } = O(M, e), m = L(o, k), v = p.useRef(i);
+    return p.useEffect(() => {
+      const c = t?.form;
+      if (c) {
+        const s = () => d(v.current);
+        return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
       }
-    }, [r, u]), /* @__PURE__ */ v(
-      z.button,
+    }, [t, d]), /* @__PURE__ */ f(
+      I.button,
       {
         type: "button",
         role: "checkbox",
-        "aria-checked": _(l) ? "mixed" : l,
-        "aria-required": p,
-        "data-state": Y(l),
-        "data-disabled": c ? "" : void 0,
-        disabled: c,
-        value: d,
-        ...n,
-        ref: b,
-        onKeyDown: D(a, (s) => {
-          s.key === "Enter" && s.preventDefault();
+        "aria-checked": g(i) ? "mixed" : i,
+        "aria-required": b,
+        "data-state": W(i),
+        "data-disabled": h ? "" : void 0,
+        disabled: h,
+        value: l,
+        ...r,
+        ref: m,
+        onKeyDown: T(a, (c) => {
+          c.key === "Enter" && c.preventDefault();
         }),
-        onClick: D(e, (s) => {
-          u((f) => _(f) ? !0 : !f), h && k && (i.current = s.isPropagationStopped(), i.current || s.stopPropagation());
+        onClick: T(n, (c) => {
+          d((s) => g(s) ? !0 : !s), C && x && (u.current = c.isPropagationStopped(), u.current || c.stopPropagation());
         })
       }
     );
   }
 );
-G.displayName = K;
-var U = g.forwardRef(
-  (t, a) => {
+q.displayName = M;
+var A = p.forwardRef(
+  (e, a) => {
     const {
-      __scopeCheckbox: e,
-      name: n,
+      __scopeCheckbox: n,
+      name: r,
       checked: o,
-      defaultChecked: r,
-      required: d,
-      disabled: c,
-      value: l,
-      onCheckedChange: p,
-      form: m,
-      ...u
-    } = t;
-    return /* @__PURE__ */ v(
-      me,
+      defaultChecked: t,
+      required: l,
+      disabled: h,
+      value: i,
+      onCheckedChange: b,
+      form: k,
+      ...d
+    } = e;
+    return /* @__PURE__ */ f(
+      ie,
       {
-        __scopeCheckbox: e,
+        __scopeCheckbox: n,
         checked: o,
-        defaultChecked: r,
-        disabled: c,
-        required: d,
-        onCheckedChange: p,
-        name: n,
-        form: m,
-        value: l,
-        internal_do_not_use_render: ({ isFormControl: i }) => /* @__PURE__ */ W(Z, { children: [
-          /* @__PURE__ */ v(
-            G,
+        defaultChecked: t,
+        disabled: h,
+        required: l,
+        onCheckedChange: b,
+        name: r,
+        form: k,
+        value: i,
+        internal_do_not_use_render: ({ isFormControl: u }) => /* @__PURE__ */ B(U, { children: [
+          /* @__PURE__ */ f(
+            q,
             {
-              ...u,
+              ...d,
               ref: a,
-              __scopeCheckbox: e
+              __scopeCheckbox: n
             }
           ),
-          i && /* @__PURE__ */ v(
-            Q,
+          u && /* @__PURE__ */ f(
+            K,
             {
-              __scopeCheckbox: e
+              __scopeCheckbox: n
             }
           )
         ] })
@@ -198,74 +197,74 @@ var U = g.forwardRef(
     );
   }
 );
-U.displayName = B;
-var V = "CheckboxIndicator", X = g.forwardRef(
-  (t, a) => {
-    const { __scopeCheckbox: e, forceMount: n, ...o } = t, r = q(V, e);
-    return /* @__PURE__ */ v(
-      se,
+A.displayName = _;
+var F = "CheckboxIndicator", D = p.forwardRef(
+  (e, a) => {
+    const { __scopeCheckbox: n, forceMount: r, ...o } = e, t = O(F, n);
+    return /* @__PURE__ */ f(
+      ee,
       {
-        present: n || _(r.checked) || r.checked === !0,
-        children: /* @__PURE__ */ v(
-          z.span,
+        present: r || g(t.checked) || t.checked === !0,
+        children: /* @__PURE__ */ f(
+          I.span,
           {
-            "data-state": Y(r.checked),
-            "data-disabled": r.disabled ? "" : void 0,
+            "data-state": W(t.checked),
+            "data-disabled": t.disabled ? "" : void 0,
             ...o,
             ref: a,
-            style: { pointerEvents: "none", ...t.style }
+            style: { pointerEvents: "none", ...e.style }
           }
         )
       }
     );
   }
 );
-X.displayName = V;
-var J = "CheckboxBubbleInput", Q = g.forwardRef(
-  ({ __scopeCheckbox: t, ...a }, e) => {
+D.displayName = F;
+var H = "CheckboxBubbleInput", K = p.forwardRef(
+  ({ __scopeCheckbox: e, ...a }, n) => {
     const {
-      control: n,
+      control: r,
       hasConsumerStoppedPropagationRef: o,
-      checked: r,
-      defaultChecked: d,
-      required: c,
-      disabled: l,
-      name: p,
-      value: m,
-      form: u,
-      bubbleInput: i,
-      setBubbleInput: k
-    } = q(J, t), h = H(e, k), b = ne(r), C = ae(n);
-    g.useEffect(() => {
-      const f = i;
-      if (!f) return;
-      const I = window.HTMLInputElement.prototype, x = Object.getOwnPropertyDescriptor(
-        I,
+      checked: t,
+      defaultChecked: l,
+      required: h,
+      disabled: i,
+      name: b,
+      value: k,
+      form: d,
+      bubbleInput: u,
+      setBubbleInput: x
+    } = O(H, e), C = L(n, x), m = Y(t), v = Z(r);
+    p.useEffect(() => {
+      const s = u;
+      if (!s) return;
+      const y = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
+        y,
         "checked"
-      ).set, P = !o.current;
-      if (b !== r && x) {
-        const N = new Event("click", { bubbles: P });
-        f.indeterminate = _(r), x.call(f, _(r) ? !1 : r), f.dispatchEvent(N);
+      ).set, $ = !o.current;
+      if (m !== t && S) {
+        const G = new Event("click", { bubbles: $ });
+        s.indeterminate = g(t), S.call(s, g(t) ? !1 : t), s.dispatchEvent(G);
       }
-    }, [i, b, r, o]);
-    const s = g.useRef(_(r) ? !1 : r);
-    return /* @__PURE__ */ v(
-      z.input,
+    }, [u, m, t, o]);
+    const c = p.useRef(g(t) ? !1 : t);
+    return /* @__PURE__ */ f(
+      I.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: d ?? s.current,
-        required: c,
-        disabled: l,
-        name: p,
-        value: m,
-        form: u,
+        defaultChecked: l ?? c.current,
+        required: h,
+        disabled: i,
+        name: b,
+        value: k,
+        form: d,
         ...a,
         tabIndex: -1,
-        ref: h,
+        ref: C,
         style: {
           ...a.style,
-          ...C,
+          ...v,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -279,67 +278,89 @@ var J = "CheckboxBubbleInput", Q = g.forwardRef(
     );
   }
 );
-Q.displayName = J;
-function he(t) {
-  return typeof t == "function";
+K.displayName = H;
+function le(e) {
+  return typeof e == "function";
 }
-function _(t) {
-  return t === "indeterminate";
+function g(e) {
+  return e === "indeterminate";
 }
-function Y(t) {
-  return _(t) ? "indeterminate" : t ? "checked" : "unchecked";
+function W(e) {
+  return g(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-const be = $((t, a) => {
-  const e = ee.c(49);
-  let n, o, r, d, c, l, p, m, u, i, k, h, b, C;
-  e[0] !== t ? ({
-    ariaLabelledBy: n,
-    className: o,
-    defaultChecked: r,
-    disabled: c,
-    id: l,
-    label: p,
-    labelClassName: m,
-    labelWrapperClassName: u,
+const de = z(
+  ({
+    ariaLabelledBy: e,
+    className: a,
+    defaultChecked: n,
+    disabled: r,
+    id: o,
+    label: t,
+    labelClassName: l,
+    labelWrapperClassName: h,
     name: i,
-    theme: h,
-    title: b,
-    variant: C,
-    onChange: k,
-    ...d
-  } = t, e[0] = t, e[1] = n, e[2] = o, e[3] = r, e[4] = d, e[5] = c, e[6] = l, e[7] = p, e[8] = m, e[9] = u, e[10] = i, e[11] = k, e[12] = h, e[13] = b, e[14] = C) : (n = e[1], o = e[2], r = e[3], d = e[4], c = e[5], l = e[6], p = e[7], m = e[8], u = e[9], i = e[10], k = e[11], h = e[12], b = e[13], C = e[14]);
-  const [s, f] = le(r ?? !1), I = te();
-  let y;
-  e[15] !== k || e[16] !== f ? (y = (A) => {
-    f(A), k?.(A);
-  }, e[15] = k, e[16] = f, e[17] = y) : y = e[17];
-  const x = y;
-  let P;
-  e[18] !== u ? (P = T("flex items-center gap-4", u), e[18] = u, e[19] = P) : P = e[19];
-  const N = l ?? I;
-  let E;
-  e[20] !== s || e[21] !== o || e[22] !== C ? (E = T(ce({
-    className: o,
-    variant: C,
-    checked: s
-  })), e[20] = s, e[21] = o, e[22] = C, e[23] = E) : E = e[23];
-  let O;
-  e[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (O = /* @__PURE__ */ v(X, { children: /* @__PURE__ */ v(M, { className: "w-4 h-4 stroke-2" }) }), e[24] = O) : O = e[24];
-  let R;
-  e[25] !== n || e[26] !== s || e[27] !== d || e[28] !== c || e[29] !== x || e[30] !== i || e[31] !== a || e[32] !== N || e[33] !== E || e[34] !== b ? (R = /* @__PURE__ */ v(U, { id: N, checked: s, ref: a, name: i, disabled: c, "aria-labelledby": n, title: b, className: E, onCheckedChange: x, ...d, children: O }), e[25] = n, e[26] = s, e[27] = d, e[28] = c, e[29] = x, e[30] = i, e[31] = a, e[32] = N, e[33] = E, e[34] = b, e[35] = R) : R = e[35];
-  let w;
-  e[36] !== s || e[37] !== c || e[38] !== x || e[39] !== l || e[40] !== p || e[41] !== m || e[42] !== i ? (w = p ? /* @__PURE__ */ v("label", { htmlFor: i ?? l, className: T(ie({
-    className: m
-  }), {
-    "cursor-not-allowed": c
-  }), onClick: () => !c && x(!s), children: p }) : null, e[36] = s, e[37] = c, e[38] = x, e[39] = l, e[40] = p, e[41] = m, e[42] = i, e[43] = w) : w = e[43];
-  let S;
-  return e[44] !== P || e[45] !== R || e[46] !== w || e[47] !== h ? (S = /* @__PURE__ */ W("div", { className: P, "data-theme": h, children: [
-    R,
-    w
-  ] }), e[44] = P, e[45] = R, e[46] = w, e[47] = h, e[48] = S) : S = e[48], S;
-});
-be.displayName = "KonstructCheckbox";
+    theme: b,
+    title: k,
+    variant: d,
+    onChange: u,
+    ...x
+  }, C) => {
+    const [m, v] = oe(n ?? !1), c = V(), s = X(
+      (y) => {
+        v(y), u?.(y);
+      },
+      [u, v]
+    );
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        className: E("flex items-center gap-4", h),
+        "data-theme": b,
+        children: [
+          /* @__PURE__ */ f(
+            A,
+            {
+              id: o ?? c,
+              checked: m,
+              ref: C,
+              name: i,
+              disabled: r,
+              "aria-labelledby": e,
+              title: k,
+              className: E(
+                te({
+                  className: a,
+                  variant: d,
+                  checked: m
+                })
+              ),
+              onCheckedChange: s,
+              ...x,
+              children: /* @__PURE__ */ f(D, { children: /* @__PURE__ */ f(N, { className: "w-4 h-4 stroke-2" }) })
+            }
+          ),
+          t ? /* @__PURE__ */ f(
+            "label",
+            {
+              htmlFor: i ?? o,
+              className: E(
+                re({
+                  className: l
+                }),
+                {
+                  "cursor-not-allowed": r
+                }
+              ),
+              onClick: () => !r && s(!m),
+              children: t
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+de.displayName = "KonstructCheckbox";
 export {
-  be as Checkbox
+  de as Checkbox
 };