@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/components/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as w, Fragment as $ } from "react/jsx-runtime";
-import * as l from "react";
-import G from "react";
-import { c as K, P as g, u as X, b as B, a as q, d as J } from "../../index-CfQtbUfi.js";
-import { u as Q } from "../../index-BZPx6jYI.js";
-import { P as V } from "../../index-3ctv5u9o.js";
+import { jsx as m, jsxs as U, Fragment as V } from "react/jsx-runtime";
+import * as f from "react";
+import R from "react";
+import { c as W, P as w, u as Y, b as A, a as T, d as Z } from "../../index-CfQtbUfi.js";
+import { u as ee } from "../../index-BZPx6jYI.js";
+import { P as oe } from "../../index-3ctv5u9o.js";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -13,6 +13,7 @@ import "../Icons/cfx-icons/Download.js";
 import "../Icons/cfx-icons/Expand.js";
 import "../Icons/cfx-icons/ExternalLink.js";
 import "../Icons/cfx-icons/Filter.js";
+import "../Icons/cfx-icons/Folder.js";
 import "../Icons/cfx-icons/Heart.js";
 import "../Icons/cfx-icons/HeartFilled.js";
 import "../Icons/cfx-icons/Help.js";
@@ -26,16 +27,20 @@ import "../Icons/cfx-icons/MoreInfo.js";
 import "../Icons/cfx-icons/Pencil.js";
 import "../Icons/cfx-icons/Play.js";
 import "../Icons/cfx-icons/Plus.js";
-import z from "../Icons/cfx-icons/Radio.js";
+import "../Icons/cfx-icons/Radio.js";
 import "../Icons/cfx-icons/Refresh.js";
 import "../Icons/cfx-icons/RightArrow.js";
 import "../Icons/cfx-icons/RightChevron.js";
 import "../Icons/cfx-icons/Search.js";
+import "../Icons/cfx-icons/ServerList.js";
+import "../Icons/cfx-icons/ServerReconnect.js";
 import "../Icons/cfx-icons/Sort.js";
-import W from "../Icons/cfx-icons/Square.js";
-import "../Icons/cfx-icons/SquareCheck.js";
+import te from "../Icons/cfx-icons/Square.js";
+import M from "../Icons/cfx-icons/SquareFilled.js";
+import "../Icons/cfx-icons/SquareTick.js";
 import "../Icons/cfx-icons/Stop.js";
-import Y from "../Icons/cfx-icons/Tick.js";
+import "../Icons/cfx-icons/Success.js";
+import re from "../Icons/cfx-icons/Tick.js";
 import "../Icons/cfx-icons/Transfer.js";
 import "../Icons/cfx-icons/Trash.js";
 import "../Icons/cfx-icons/Undo.js";
@@ -51,142 +56,189 @@ import "../Icons/cfx-icons/User.js";
 import "../Icons/cfx-icons/Verified.js";
 import "../Icons/cfx-icons/UpvotesBurst.js";
 import "../Icons/cfx-icons/UpvotesRecurring.js";
-import "../Icons/cfx-icons-big/Like.js";
-import "../Icons/cfx-icons-big/Subscriptions.js";
-import "../Icons/cfx-icons-big/Upload.js";
-import "../Icons/cfx-icons-big/Warning.js";
-import "../Icons/cfx-icons-big/Confirm.js";
-import { clsx as N } from "../../utils/clsx.js";
-import { getColor as Z } from "../../utils/color.js";
-var R = "Checkbox", [ee, bo] = K(R), [oe, E] = ee(R);
-function te(o) {
+import "../Icons/cfx-iconsXLarge/Close.js";
+import "../Icons/cfx-iconsXLarge/Controller.js";
+import "../Icons/cfx-iconsXLarge/Copy.js";
+import "../Icons/cfx-iconsXLarge/DownArrow.js";
+import "../Icons/cfx-iconsXLarge/DownChevron.js";
+import "../Icons/cfx-iconsXLarge/Download.js";
+import "../Icons/cfx-iconsXLarge/Expand.js";
+import "../Icons/cfx-iconsXLarge/ExternalLink.js";
+import "../Icons/cfx-iconsXLarge/Filter.js";
+import "../Icons/cfx-iconsXLarge/Folder.js";
+import "../Icons/cfx-iconsXLarge/Heart.js";
+import "../Icons/cfx-iconsXLarge/HeartFilled.js";
+import "../Icons/cfx-iconsXLarge/Help.js";
+import "../Icons/cfx-iconsXLarge/LeftArrow.js";
+import "../Icons/cfx-iconsXLarge/LeftChevron.js";
+import "../Icons/cfx-iconsXLarge/Map.js";
+import "../Icons/cfx-iconsXLarge/Menu.js";
+import "../Icons/cfx-iconsXLarge/Minus.js";
+import "../Icons/cfx-iconsXLarge/More.js";
+import "../Icons/cfx-iconsXLarge/MoreInfo.js";
+import "../Icons/cfx-iconsXLarge/Pencil.js";
+import "../Icons/cfx-iconsXLarge/Play.js";
+import "../Icons/cfx-iconsXLarge/Plus.js";
+import "../Icons/cfx-iconsXLarge/Radio.js";
+import "../Icons/cfx-iconsXLarge/Refresh.js";
+import "../Icons/cfx-iconsXLarge/RightArrow.js";
+import "../Icons/cfx-iconsXLarge/RightChevron.js";
+import "../Icons/cfx-iconsXLarge/Search.js";
+import "../Icons/cfx-iconsXLarge/ServerList.js";
+import "../Icons/cfx-iconsXLarge/ServerReconnect.js";
+import "../Icons/cfx-iconsXLarge/Sort.js";
+import "../Icons/cfx-iconsXLarge/Square.js";
+import "../Icons/cfx-iconsXLarge/SquareFilled.js";
+import "../Icons/cfx-iconsXLarge/SquareTick.js";
+import "../Icons/cfx-iconsXLarge/Stop.js";
+import "../Icons/cfx-iconsXLarge/Success.js";
+import "../Icons/cfx-iconsXLarge/Tick.js";
+import "../Icons/cfx-iconsXLarge/Transfer.js";
+import "../Icons/cfx-iconsXLarge/Trash.js";
+import "../Icons/cfx-iconsXLarge/Undo.js";
+import "../Icons/cfx-iconsXLarge/UpArrow.js";
+import "../Icons/cfx-iconsXLarge/UpChevron.js";
+import "../Icons/cfx-iconsXLarge/Upload.js";
+import "../Icons/cfx-iconsXLarge/Users.js";
+import "../Icons/cfx-iconsXLarge/Visibility.js";
+import "../Icons/cfx-iconsXLarge/VisibilityOff.js";
+import "../Icons/cfx-iconsXLarge/Warning.js";
+import "../Icons/cfx-iconsXLarge/Cart.js";
+import "../Icons/cfx-iconsXLarge/User.js";
+import "../Icons/cfx-iconsXLarge/Verified.js";
+import "../Icons/cfx-iconsXLarge/UpvotesBurst.js";
+import "../Icons/cfx-iconsXLarge/UpvotesRecurring.js";
+import { clsx as P } from "../../utils/clsx.js";
+import { getColor as ie } from "../../utils/color.js";
+var q = "Checkbox", [ce, yt] = W(q), [ne, F] = ce(q);
+function se(o) {
   const {
     __scopeCheckbox: a,
     checked: n,
-    children: m,
-    defaultChecked: r,
+    children: p,
+    defaultChecked: i,
     disabled: e,
-    form: f,
-    name: _,
+    form: _,
+    name: h,
     onCheckedChange: d,
-    required: h,
-    value: b = "on",
+    required: b,
+    value: x = "on",
     // @ts-expect-error
-    internal_do_not_use_render: p
-  } = o, [i, C] = X({
+    internal_do_not_use_render: u
+  } = o, [t, v] = Y({
     prop: n,
-    defaultProp: r ?? !1,
+    defaultProp: i ?? !1,
     onChange: d,
-    caller: R
-  }), [u, k] = l.useState(null), [I, t] = l.useState(null), c = l.useRef(!1), y = u ? !!f || !!u.closest("form") : (
+    caller: q
+  }), [l, k] = f.useState(null), [C, c] = f.useState(null), r = f.useRef(!1), N = l ? !!_ || !!l.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
-  ), P = {
-    checked: i,
+  ), g = {
+    checked: t,
     disabled: e,
-    setChecked: C,
-    control: u,
+    setChecked: v,
+    control: l,
     setControl: k,
-    name: _,
-    form: f,
-    value: b,
-    hasConsumerStoppedPropagationRef: c,
-    required: h,
-    defaultChecked: v(r) ? !1 : r,
-    isFormControl: y,
-    bubbleInput: I,
-    setBubbleInput: t
+    name: h,
+    form: _,
+    value: x,
+    hasConsumerStoppedPropagationRef: r,
+    required: b,
+    defaultChecked: I(i) ? !1 : i,
+    isFormControl: N,
+    bubbleInput: C,
+    setBubbleInput: c
   };
-  return /* @__PURE__ */ s(
-    oe,
+  return /* @__PURE__ */ m(
+    ne,
     {
       scope: a,
-      ...P,
-      children: re(p) ? p(P) : m
+      ...g,
+      children: ae(u) ? u(g) : p
     }
   );
 }
-var T = "CheckboxTrigger", M = l.forwardRef(
-  ({ __scopeCheckbox: o, onKeyDown: a, onClick: n, ...m }, r) => {
+var O = "CheckboxTrigger", D = f.forwardRef(
+  ({ __scopeCheckbox: o, onKeyDown: a, onClick: n, ...p }, i) => {
     const {
       control: e,
-      value: f,
-      disabled: _,
+      value: _,
+      disabled: h,
       checked: d,
-      required: h,
-      setControl: b,
-      setChecked: p,
-      hasConsumerStoppedPropagationRef: i,
-      isFormControl: C,
-      bubbleInput: u
-    } = E(T, o), k = B(r, b), I = l.useRef(d);
-    return l.useEffect(() => {
-      const t = e == null ? void 0 : e.form;
-      if (t) {
-        const c = () => p(I.current);
-        return t.addEventListener("reset", c), () => t.removeEventListener("reset", c);
+      required: b,
+      setControl: x,
+      setChecked: u,
+      hasConsumerStoppedPropagationRef: t,
+      isFormControl: v,
+      bubbleInput: l
+    } = F(O, o), k = A(i, x), C = f.useRef(d);
+    return f.useEffect(() => {
+      const c = e == null ? void 0 : e.form;
+      if (c) {
+        const r = () => u(C.current);
+        return c.addEventListener("reset", r), () => c.removeEventListener("reset", r);
       }
-    }, [e, p]), /* @__PURE__ */ s(
-      g.button,
+    }, [e, u]), /* @__PURE__ */ m(
+      w.button,
       {
         type: "button",
         role: "checkbox",
-        "aria-checked": v(d) ? "mixed" : d,
-        "aria-required": h,
-        "data-state": O(d),
-        "data-disabled": _ ? "" : void 0,
-        disabled: _,
-        value: f,
-        ...m,
+        "aria-checked": I(d) ? "mixed" : d,
+        "aria-required": b,
+        "data-state": K(d),
+        "data-disabled": h ? "" : void 0,
+        disabled: h,
+        value: _,
+        ...p,
         ref: k,
-        onKeyDown: q(a, (t) => {
-          t.key === "Enter" && t.preventDefault();
+        onKeyDown: T(a, (c) => {
+          c.key === "Enter" && c.preventDefault();
         }),
-        onClick: q(n, (t) => {
-          p((c) => v(c) ? !0 : !c), u && C && (i.current = t.isPropagationStopped(), i.current || t.stopPropagation());
+        onClick: T(n, (c) => {
+          u((r) => I(r) ? !0 : !r), l && v && (t.current = c.isPropagationStopped(), t.current || c.stopPropagation());
         })
       }
     );
   }
 );
-M.displayName = T;
-var U = l.forwardRef(
+D.displayName = O;
+var L = f.forwardRef(
   (o, a) => {
     const {
       __scopeCheckbox: n,
-      name: m,
-      checked: r,
+      name: p,
+      checked: i,
       defaultChecked: e,
-      required: f,
-      disabled: _,
+      required: _,
+      disabled: h,
       value: d,
-      onCheckedChange: h,
-      form: b,
-      ...p
+      onCheckedChange: b,
+      form: x,
+      ...u
     } = o;
-    return /* @__PURE__ */ s(
-      te,
+    return /* @__PURE__ */ m(
+      se,
       {
         __scopeCheckbox: n,
-        checked: r,
+        checked: i,
         defaultChecked: e,
-        disabled: _,
-        required: f,
-        onCheckedChange: h,
-        name: m,
-        form: b,
+        disabled: h,
+        required: _,
+        onCheckedChange: b,
+        name: p,
+        form: x,
         value: d,
-        internal_do_not_use_render: ({ isFormControl: i }) => /* @__PURE__ */ w($, { children: [
-          /* @__PURE__ */ s(
-            M,
+        internal_do_not_use_render: ({ isFormControl: t }) => /* @__PURE__ */ U(V, { children: [
+          /* @__PURE__ */ m(
+            D,
             {
-              ...p,
+              ...u,
               ref: a,
               __scopeCheckbox: n
             }
           ),
-          i && /* @__PURE__ */ s(
-            L,
+          t && /* @__PURE__ */ m(
+            G,
             {
               __scopeCheckbox: n
             }
@@ -196,20 +248,20 @@ var U = l.forwardRef(
     );
   }
 );
-U.displayName = R;
-var A = "CheckboxIndicator", D = l.forwardRef(
+L.displayName = q;
+var j = "CheckboxIndicator", H = f.forwardRef(
   (o, a) => {
-    const { __scopeCheckbox: n, forceMount: m, ...r } = o, e = E(A, n);
-    return /* @__PURE__ */ s(
-      V,
+    const { __scopeCheckbox: n, forceMount: p, ...i } = o, e = F(j, n);
+    return /* @__PURE__ */ m(
+      oe,
       {
-        present: m || v(e.checked) || e.checked === !0,
-        children: /* @__PURE__ */ s(
-          g.span,
+        present: p || I(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ m(
+          w.span,
           {
-            "data-state": O(e.checked),
+            "data-state": K(e.checked),
             "data-disabled": e.disabled ? "" : void 0,
-            ...r,
+            ...i,
             ref: a,
             style: { pointerEvents: "none", ...o.style }
           }
@@ -218,52 +270,52 @@ var A = "CheckboxIndicator", D = l.forwardRef(
     );
   }
 );
-D.displayName = A;
-var F = "CheckboxBubbleInput", L = l.forwardRef(
+H.displayName = j;
+var $ = "CheckboxBubbleInput", G = f.forwardRef(
   ({ __scopeCheckbox: o, ...a }, n) => {
     const {
-      control: m,
-      hasConsumerStoppedPropagationRef: r,
+      control: p,
+      hasConsumerStoppedPropagationRef: i,
       checked: e,
-      defaultChecked: f,
-      required: _,
+      defaultChecked: _,
+      required: h,
       disabled: d,
-      name: h,
-      value: b,
-      form: p,
-      bubbleInput: i,
-      setBubbleInput: C
-    } = E(F, o), u = B(n, C), k = Q(e), I = J(m);
-    l.useEffect(() => {
-      const c = i;
-      if (!c) return;
-      const y = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
-        y,
+      name: b,
+      value: x,
+      form: u,
+      bubbleInput: t,
+      setBubbleInput: v
+    } = F($, o), l = A(n, v), k = ee(e), C = Z(p);
+    f.useEffect(() => {
+      const r = t;
+      if (!r) return;
+      const N = window.HTMLInputElement.prototype, y = Object.getOwnPropertyDescriptor(
+        N,
         "checked"
-      ).set, j = !r.current;
-      if (k !== e && S) {
-        const H = new Event("click", { bubbles: j });
-        c.indeterminate = v(e), S.call(c, v(e) ? !1 : e), c.dispatchEvent(H);
+      ).set, S = !i.current;
+      if (k !== e && y) {
+        const z = new Event("click", { bubbles: S });
+        r.indeterminate = I(e), y.call(r, I(e) ? !1 : e), r.dispatchEvent(z);
       }
-    }, [i, k, e, r]);
-    const t = l.useRef(v(e) ? !1 : e);
-    return /* @__PURE__ */ s(
-      g.input,
+    }, [t, k, e, i]);
+    const c = f.useRef(I(e) ? !1 : e);
+    return /* @__PURE__ */ m(
+      w.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: f ?? t.current,
-        required: _,
+        defaultChecked: _ ?? c.current,
+        required: h,
         disabled: d,
-        name: h,
-        value: b,
-        form: p,
+        name: b,
+        value: x,
+        form: u,
         ...a,
         tabIndex: -1,
-        ref: u,
+        ref: l,
         style: {
           ...a.style,
-          ...I,
+          ...C,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -277,85 +329,118 @@ var F = "CheckboxBubbleInput", L = l.forwardRef(
     );
   }
 );
-L.displayName = F;
-function re(o) {
+G.displayName = $;
+function ae(o) {
   return typeof o == "function";
 }
-function v(o) {
+function I(o) {
   return o === "indeterminate";
 }
-function O(o) {
-  return v(o) ? "indeterminate" : o ? "checked" : "unchecked";
+function K(o) {
+  return I(o) ? "indeterminate" : o ? "checked" : "unchecked";
 }
-const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865aa", ie = "cfxui__Checkbox__square__029aa", ae = "cfxui__Checkbox__indicator__2afc0", se = "cfxui__Checkbox__radioIcon__719e7", me = "cfxui__Checkbox__tickIcon__a7f19", x = {
-  rootUnset: ce,
-  root: ne,
-  square: ie,
-  indicator: ae,
+const me = "cfxui__Checkbox__rootUnset__cbb57", pe = "cfxui__Checkbox__root__865aa", de = "cfxui__Checkbox__secondary__95e8e", ue = "cfxui__Checkbox__isChecked__e5d94", le = "cfxui__Checkbox__icon__f9f6b", fe = "cfxui__Checkbox__square__029aa", _e = "cfxui__Checkbox__indicator__2afc0", he = "cfxui__Checkbox__squareFilledIcon__7d9b7", Ce = "cfxui__Checkbox__tickIcon__a7f19", s = {
+  rootUnset: me,
+  root: pe,
+  secondary: de,
+  isChecked: ue,
+  icon: le,
+  square: fe,
+  indicator: _e,
   "size-small": "cfxui__Checkbox__size-small__02440",
-  radioIcon: se,
-  tickIcon: me,
-  "size-normal": "cfxui__Checkbox__size-normal__700f4",
+  squareFilledIcon: he,
+  tickIcon: Ce,
+  "size-medium": "cfxui__Checkbox__size-medium__d256a",
   "size-large": "cfxui__Checkbox__size-large__28529"
 };
-function de(o) {
+function ke(o) {
   const {
     id: a,
-    size: n = "normal",
-    rootClassName: m,
-    indicatorClassName: r,
+    size: n = "medium",
+    rootClassName: p,
+    indicatorClassName: i,
     iconClassName: e,
-    checkedClassName: f,
-    squareClassName: _,
+    checkedClassName: _,
+    squareClassName: h,
     colorToken: d,
-    color: h,
-    opacity: b,
-    luminance: p,
-    checked: i,
-    name: C,
-    iconIndicator: u = z,
-    iconSquare: k = W,
-    ...I
-  } = o, t = Z(o), c = N(
-    x.root,
-    x.rootUnset,
-    x[`size-${n}`],
-    m,
+    color: b,
+    opacity: x,
+    luminance: u,
+    checked: t,
+    iconSquare: v = te,
+    iconIndicator: l = M,
+    name: k,
+    theme: C = "primary",
+    onClick: c,
+    onCheckedChange: r,
+    ...N
+  } = o, [g, y] = R.useState(t);
+  R.useEffect(() => {
+    y(t);
+  }, [t]);
+  const S = R.useCallback(() => {
+    y((E) => !E);
+  }, []), z = R.useCallback((E) => {
+    y(E), r && r(E);
+  }, [r]), X = ie(o), B = P(
+    s.isChecked,
+    _
+  ), J = P(
+    s.root,
+    s.rootUnset,
+    s[`size-${n}`],
+    s[C],
+    p,
     {
-      [f || ""]: i
+      [B]: t
     }
-  ), y = N(
-    x.checked,
+  ), Q = P(
+    s.icon,
+    s[C],
     e,
     {
-      [x.tickIcon]: u === Y,
-      [x.radioIcon]: u === z
+      [s.tickIcon]: l === re,
+      [s.squareFilledIcon]: l === M
     }
   );
-  return /* @__PURE__ */ w(
-    U,
+  return /* @__PURE__ */ U(
+    L,
     {
-      ...I,
+      ...N,
       id: a,
-      checked: i,
-      style: { color: t },
-      className: c,
+      checked: g,
+      style: { color: X },
+      className: J,
+      onClick: S,
+      onCheckedChange: z,
       children: [
-        C && /* @__PURE__ */ s(
+        k && /* @__PURE__ */ m(
           "input",
           {
             type: "hidden",
-            name: C,
-            value: i ? "on" : ""
+            name: k,
+            value: t ? "on" : ""
+          }
+        ),
+        /* @__PURE__ */ m(
+          v,
+          {
+            className: P(
+              s.square,
+              s[C],
+              {
+                [B]: t
+              },
+              h
+            )
           }
         ),
-        /* @__PURE__ */ s(k, { className: N(x.square, _) }),
-        /* @__PURE__ */ s(D, { className: N(x.indicator, r), children: /* @__PURE__ */ s(u, { className: y }) })
+        /* @__PURE__ */ m(H, { className: P(s.indicator, s[C], i), children: /* @__PURE__ */ m(l, { className: Q }) })
       ]
     }
   );
 }
-const Co = G.memo(de);
+const Nt = R.memo(ke);
 export {
-  Co as default
+  Nt as default
 };