konsolpro-custom-ui 0.0.348 → 0.0.349

package/dist/lib/ui/checkbox.js

@@ -1,144 +1,144 @@
-var Y = Object.defineProperty, Z = Object.defineProperties;
-var ee = Object.getOwnPropertyDescriptors;
-var P = Object.getOwnPropertySymbols;
-var q = Object.prototype.hasOwnProperty, A = Object.prototype.propertyIsEnumerable;
-var j = (e, t, r) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, x = (e, t) => {
-  for (var r in t || (t = {}))
-    q.call(t, r) && j(e, r, t[r]);
-  if (P)
-    for (var r of P(t))
-      A.call(t, r) && j(e, r, t[r]);
+var Z = Object.defineProperty, ee = Object.defineProperties;
+var re = Object.getOwnPropertyDescriptors;
+var N = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
+var q = (e, r, o) => r in e ? Z(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, y = (e, r) => {
+  for (var o in r || (r = {}))
+    A.call(r, o) && q(e, o, r[o]);
+  if (N)
+    for (var o of N(r))
+      F.call(r, o) && q(e, o, r[o]);
   return e;
-}, g = (e, t) => Z(e, ee(t));
-var w = (e, t) => {
-  var r = {};
-  for (var o in e)
-    q.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
-  if (e != null && P)
-    for (var o of P(e))
-      t.indexOf(o) < 0 && A.call(e, o) && (r[o] = e[o]);
-  return r;
+}, g = (e, r) => ee(e, re(r));
+var w = (e, r) => {
+  var o = {};
+  for (var t in e)
+    A.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && N)
+    for (var t of N(e))
+      r.indexOf(t) < 0 && F.call(e, t) && (o[t] = e[t]);
+  return o;
 };
-import { jsx as l, jsxs as z, Fragment as re } from "react/jsx-runtime";
-import * as v from "react";
-import B from "react";
-import { u as L } from "../../chunks/index-DLcqcWxM.js";
+import { jsx as d, jsxs as B, Fragment as oe } from "react/jsx-runtime";
+import * as b from "react";
+import D from "react";
+import { u as O } from "../../chunks/index-DLcqcWxM.js";
 import { c as te } from "../../chunks/index-E4d_Gd-w.js";
-import { c as F } from "../../chunks/index-DLeNytVF.js";
-import { u as oe } from "../../chunks/index-DYfkNB0n.js";
-import { u as ne } from "../../chunks/index-BZPx6jYI.js";
-import { u as ae } from "../../chunks/index-CHDs-SiB.js";
-import { P as ce } from "../../chunks/index-PsqJG3fE.js";
-import { P as D } from "../../chunks/index-BJD1rYeT.js";
-import { c as O } from "../../chunks/index-BO6p208a.js";
-import { c as S } from "../../chunks/utils-TbLXCoKm.js";
-import { Icon as se } from "../icon/icon.js";
-var N = "Checkbox", [ie, Se] = te(N), [de, T] = ie(N);
-function le(e) {
+import { c as L } from "../../chunks/index-DLeNytVF.js";
+import { u as ne } from "../../chunks/index-DYfkNB0n.js";
+import { u as ae } from "../../chunks/index-BZPx6jYI.js";
+import { u as ce } from "../../chunks/index-CHDs-SiB.js";
+import { P as se } from "../../chunks/index-PsqJG3fE.js";
+import { P as T } from "../../chunks/index-BJD1rYeT.js";
+import { c as V } from "../../chunks/index-BO6p208a.js";
+import { c as P } from "../../chunks/utils-TbLXCoKm.js";
+import { Icon as ie } from "../icon/icon.js";
+var S = "Checkbox", [de, Se] = te(S), [le, M] = de(S);
+function ue(e) {
   const {
-    __scopeCheckbox: t,
-    checked: r,
-    children: o,
+    __scopeCheckbox: r,
+    checked: o,
+    children: t,
     defaultChecked: a,
-    disabled: d,
-    form: s,
+    disabled: l,
+    form: c,
     name: n,
-    onCheckedChange: h,
-    required: k,
+    onCheckedChange: m,
+    required: v,
     value: p = "on",
     // @ts-expect-error
-    internal_do_not_use_render: C
-  } = e, [f, u] = oe({
-    prop: r,
+    internal_do_not_use_render: k
+  } = e, [C, h] = ne({
+    prop: o,
     defaultProp: a != null ? a : !1,
-    onChange: h,
-    caller: N
-  }), [b, R] = v.useState(null), [y, m] = v.useState(null), _ = v.useRef(!1), i = b ? !!s || !!b.closest("form") : (
+    onChange: m,
+    caller: S
+  }), [u, R] = b.useState(null), [_, x] = b.useState(null), f = b.useRef(!1), s = u ? !!c || !!u.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
-  ), c = {
-    checked: f,
-    disabled: d,
-    setChecked: u,
-    control: b,
+  ), i = {
+    checked: C,
+    disabled: l,
+    setChecked: h,
+    control: u,
     setControl: R,
     name: n,
-    form: s,
+    form: c,
     value: p,
-    hasConsumerStoppedPropagationRef: _,
-    required: k,
+    hasConsumerStoppedPropagationRef: f,
+    required: v,
     defaultChecked: I(a) ? !1 : a,
-    isFormControl: i,
-    bubbleInput: y,
-    setBubbleInput: m
+    isFormControl: s,
+    bubbleInput: _,
+    setBubbleInput: x
   };
-  return /* @__PURE__ */ l(
-    de,
-    g(x({
-      scope: t
-    }, c), {
-      children: ue(C) ? C(c) : o
+  return /* @__PURE__ */ d(
+    le,
+    g(y({
+      scope: r
+    }, i), {
+      children: me(k) ? k(i) : t
     })
   );
 }
-var V = "CheckboxTrigger", H = v.forwardRef(
-  (d, a) => {
-    var s = d, { __scopeCheckbox: e, onKeyDown: t, onClick: r } = s, o = w(s, ["__scopeCheckbox", "onKeyDown", "onClick"]);
+var H = "CheckboxTrigger", G = b.forwardRef(
+  (l, a) => {
+    var c = l, { __scopeCheckbox: e, onKeyDown: r, onClick: o } = c, t = w(c, ["__scopeCheckbox", "onKeyDown", "onClick"]);
     const {
       control: n,
-      value: h,
-      disabled: k,
+      value: m,
+      disabled: v,
       checked: p,
-      required: C,
-      setControl: f,
-      setChecked: u,
-      hasConsumerStoppedPropagationRef: b,
+      required: k,
+      setControl: C,
+      setChecked: h,
+      hasConsumerStoppedPropagationRef: u,
       isFormControl: R,
-      bubbleInput: y
-    } = T(V, e), m = L(a, f), _ = v.useRef(p);
-    return v.useEffect(() => {
-      const i = n == null ? void 0 : n.form;
-      if (i) {
-        const c = () => u(_.current);
-        return i.addEventListener("reset", c), () => i.removeEventListener("reset", c);
+      bubbleInput: _
+    } = M(H, e), x = O(a, C), f = b.useRef(p);
+    return b.useEffect(() => {
+      const s = n == null ? void 0 : n.form;
+      if (s) {
+        const i = () => h(f.current);
+        return s.addEventListener("reset", i), () => s.removeEventListener("reset", i);
       }
-    }, [n, u]), /* @__PURE__ */ l(
-      D.button,
-      g(x({
+    }, [n, h]), /* @__PURE__ */ d(
+      T.button,
+      g(y({
         type: "button",
         role: "checkbox",
         "aria-checked": I(p) ? "mixed" : p,
-        "aria-required": C,
-        "data-state": J(p),
-        "data-disabled": k ? "" : void 0,
-        disabled: k,
-        value: h
-      }, o), {
-        ref: m,
-        onKeyDown: F(t, (i) => {
-          i.key === "Enter" && i.preventDefault();
+        "aria-required": k,
+        "data-state": Q(p),
+        "data-disabled": v ? "" : void 0,
+        disabled: v,
+        value: m
+      }, t), {
+        ref: x,
+        onKeyDown: L(r, (s) => {
+          s.key === "Enter" && s.preventDefault();
         }),
-        onClick: F(r, (i) => {
-          u((c) => I(c) ? !0 : !c), y && R && (b.current = i.isPropagationStopped(), b.current || i.stopPropagation());
+        onClick: L(o, (s) => {
+          h((i) => I(i) ? !0 : !i), _ && R && (u.current = s.isPropagationStopped(), u.current || s.stopPropagation());
         })
       })
     );
   }
 );
-H.displayName = V;
-var G = v.forwardRef(
-  (e, t) => {
-    const f = e, {
-      __scopeCheckbox: r,
-      name: o,
+G.displayName = H;
+var K = b.forwardRef(
+  (e, r) => {
+    const C = e, {
+      __scopeCheckbox: o,
+      name: t,
       checked: a,
-      defaultChecked: d,
-      required: s,
+      defaultChecked: l,
+      required: c,
       disabled: n,
-      value: h,
-      onCheckedChange: k,
+      value: m,
+      onCheckedChange: v,
       form: p
-    } = f, C = w(f, [
+    } = C, k = w(C, [
       "__scopeCheckbox",
       "name",
       "checked",
@@ -149,30 +149,30 @@ var G = v.forwardRef(
       "onCheckedChange",
       "form"
     ]);
-    return /* @__PURE__ */ l(
-      le,
+    return /* @__PURE__ */ d(
+      ue,
       {
-        __scopeCheckbox: r,
+        __scopeCheckbox: o,
         checked: a,
-        defaultChecked: d,
+        defaultChecked: l,
         disabled: n,
-        required: s,
-        onCheckedChange: k,
-        name: o,
+        required: c,
+        onCheckedChange: v,
+        name: t,
         form: p,
-        value: h,
-        internal_do_not_use_render: ({ isFormControl: u }) => /* @__PURE__ */ z(re, { children: [
-          /* @__PURE__ */ l(
-            H,
-            g(x({}, C), {
-              ref: t,
-              __scopeCheckbox: r
+        value: m,
+        internal_do_not_use_render: ({ isFormControl: h }) => /* @__PURE__ */ B(oe, { children: [
+          /* @__PURE__ */ d(
+            G,
+            g(y({}, k), {
+              ref: r,
+              __scopeCheckbox: o
             })
           ),
-          u && /* @__PURE__ */ l(
-            $,
+          h && /* @__PURE__ */ d(
+            J,
             {
-              __scopeCheckbox: r
+              __scopeCheckbox: o
             }
           )
         ] })
@@ -180,73 +180,73 @@ var G = v.forwardRef(
     );
   }
 );
-G.displayName = N;
-var K = "CheckboxIndicator", U = v.forwardRef(
-  (e, t) => {
-    const s = e, { __scopeCheckbox: r, forceMount: o } = s, a = w(s, ["__scopeCheckbox", "forceMount"]), d = T(K, r);
-    return /* @__PURE__ */ l(
-      ce,
+K.displayName = S;
+var U = "CheckboxIndicator", X = b.forwardRef(
+  (e, r) => {
+    const c = e, { __scopeCheckbox: o, forceMount: t } = c, a = w(c, ["__scopeCheckbox", "forceMount"]), l = M(U, o);
+    return /* @__PURE__ */ d(
+      se,
       {
-        present: o || I(d.checked) || d.checked === !0,
-        children: /* @__PURE__ */ l(
-          D.span,
-          g(x({
-            "data-state": J(d.checked),
-            "data-disabled": d.disabled ? "" : void 0
+        present: t || I(l.checked) || l.checked === !0,
+        children: /* @__PURE__ */ d(
+          T.span,
+          g(y({
+            "data-state": Q(l.checked),
+            "data-disabled": l.disabled ? "" : void 0
           }, a), {
-            ref: t,
-            style: x({ pointerEvents: "none" }, e.style)
+            ref: r,
+            style: y({ pointerEvents: "none" }, e.style)
           })
         )
       }
     );
   }
 );
-U.displayName = K;
-var X = "CheckboxBubbleInput", $ = v.forwardRef(
-  (o, r) => {
-    var a = o, { __scopeCheckbox: e } = a, t = w(a, ["__scopeCheckbox"]);
+X.displayName = U;
+var $ = "CheckboxBubbleInput", J = b.forwardRef(
+  (t, o) => {
+    var a = t, { __scopeCheckbox: e } = a, r = w(a, ["__scopeCheckbox"]);
     const {
-      control: d,
-      hasConsumerStoppedPropagationRef: s,
+      control: l,
+      hasConsumerStoppedPropagationRef: c,
       checked: n,
-      defaultChecked: h,
-      required: k,
+      defaultChecked: m,
+      required: v,
       disabled: p,
-      name: C,
-      value: f,
-      form: u,
-      bubbleInput: b,
+      name: k,
+      value: C,
+      form: h,
+      bubbleInput: u,
       setBubbleInput: R
-    } = T(X, e), y = L(r, R), m = ne(n), _ = ae(d);
-    v.useEffect(() => {
-      const c = b;
-      if (!c) return;
-      const E = window.HTMLInputElement.prototype, M = Object.getOwnPropertyDescriptor(
+    } = M($, e), _ = O(o, R), x = ae(n), f = ce(l);
+    b.useEffect(() => {
+      const i = u;
+      if (!i) return;
+      const E = window.HTMLInputElement.prototype, j = Object.getOwnPropertyDescriptor(
         E,
         "checked"
-      ).set, Q = !s.current;
-      if (m !== n && M) {
-        const W = new Event("click", { bubbles: Q });
-        c.indeterminate = I(n), M.call(c, I(n) ? !1 : n), c.dispatchEvent(W);
+      ).set, W = !c.current;
+      if (x !== n && j) {
+        const Y = new Event("click", { bubbles: W });
+        i.indeterminate = I(n), j.call(i, I(n) ? !1 : n), i.dispatchEvent(Y);
       }
-    }, [b, m, n, s]);
-    const i = v.useRef(I(n) ? !1 : n);
-    return /* @__PURE__ */ l(
-      D.input,
-      g(x({
+    }, [u, x, n, c]);
+    const s = b.useRef(I(n) ? !1 : n);
+    return /* @__PURE__ */ d(
+      T.input,
+      g(y({
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: h != null ? h : i.current,
-        required: k,
+        defaultChecked: m != null ? m : s.current,
+        required: v,
         disabled: p,
-        name: C,
-        value: f,
-        form: u
-      }, t), {
+        name: k,
+        value: C,
+        form: h
+      }, r), {
         tabIndex: -1,
-        ref: y,
-        style: g(x(x({}, t.style), _), {
+        ref: _,
+        style: g(y(y({}, r.style), f), {
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -260,17 +260,17 @@ var X = "CheckboxBubbleInput", $ = v.forwardRef(
     );
   }
 );
-$.displayName = X;
-function ue(e) {
+J.displayName = $;
+function me(e) {
   return typeof e == "function";
 }
 function I(e) {
   return e === "indeterminate";
 }
-function J(e) {
+function Q(e) {
   return I(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-const pe = O(
+const pe = V(
   "group peer cursor-pointer border-border focus:border-primary focus:shadow-focus disabled:cursor-not-allowed shrink-0 rounded-sm border focus:outline-none flex items-center justify-center",
   {
     variants: {
@@ -294,7 +294,7 @@ const pe = O(
       isDisabled: !1
     }
   }
-), me = O(
+), he = V(
   "rounded-[2px] bg-primary shrink-0 group-hover:bg-primary-hover group-disabled:group-hover:bg-primary group-active:bg-primary-active",
   {
     variants: {
@@ -305,59 +305,60 @@ const pe = O(
     }
   }
 );
-function he(e) {
+function fe(e) {
   const {
-    className: t,
-    size: r = "md",
-    label: o,
-    disabled: a,
-    checked: d,
-    id: s,
-    onCheckedChange: n,
-    ref: h,
-    "data-testid": k
-  } = e, p = r === "md" ? 16 : 24, C = B.useId(), f = s || C, u = a || !1, [b, R] = B.useState(!1), y = d !== void 0, m = y ? d : b, _ = () => m === !0 ? "checked" : m === "indeterminate" ? "indeterminate" : "unchecked", i = (E) => {
-    y && n ? n(E) : y || R(E);
-  }, c = /* @__PURE__ */ l(
-    G,
+    className: r,
+    checkboxClassName: o,
+    size: t = "md",
+    label: a,
+    disabled: l,
+    checked: c,
+    id: n,
+    onCheckedChange: m,
+    ref: v,
+    "data-testid": p
+  } = e, k = t === "md" ? 16 : 24, C = D.useId(), h = n || C, u = l || !1, [R, _] = D.useState(!1), x = c !== void 0, f = x ? c : R, s = () => f === !0 ? "checked" : f === "indeterminate" ? "indeterminate" : "unchecked", i = (z) => {
+    x && m ? m(z) : x || _(z);
+  }, E = /* @__PURE__ */ d(
+    K,
     {
-      ref: h,
-      id: f,
-      className: S(
-        pe({ size: r, state: _(), isDisabled: u }),
-        t
+      ref: v,
+      id: h,
+      className: P(
+        pe({ size: t, state: s(), isDisabled: u }),
+        o || (a ? void 0 : r)
       ),
       disabled: u,
-      checked: m,
+      checked: f,
       onCheckedChange: i,
-      "data-testid": k,
-      children: /* @__PURE__ */ z(U, { className: "flex h-full w-full items-center justify-center", children: [
-        m === "indeterminate" && /* @__PURE__ */ l("div", { className: me({ size: r }) }),
-        m === !0 && /* @__PURE__ */ l(se, { icon: "DoneIcon", size: p, className: "text-white" })
+      "data-testid": p,
+      children: /* @__PURE__ */ B(X, { className: "flex h-full w-full items-center justify-center", children: [
+        f === "indeterminate" && /* @__PURE__ */ d("div", { className: he({ size: t }) }),
+        f === !0 && /* @__PURE__ */ d(ie, { icon: "DoneIcon", size: k, className: "text-white" })
       ] })
     }
   );
-  return o ? /* @__PURE__ */ z("div", { className: "items-top flex flex-row space-x-2", children: [
-    /* @__PURE__ */ l("div", { className: S(r === "md" && "pt-0.5"), children: c }),
-    /* @__PURE__ */ l(
+  return a ? /* @__PURE__ */ B("div", { className: P("items-top flex flex-row space-x-2", r), children: [
+    /* @__PURE__ */ d("div", { className: P(t === "md" && "pt-0.5"), children: E }),
+    /* @__PURE__ */ d(
       "label",
       {
-        htmlFor: f,
-        className: S(
+        htmlFor: h,
+        className: P(
           "font-graphik m-0 cursor-pointer text-[14px] leading-[20px] font-normal",
           u && "cursor-not-allowed opacity-40",
-          r === "lg" && "pt-0.5"
+          t === "lg" && "pt-0.5"
         ),
-        children: o
+        children: a
       }
     )
-  ] }) : c;
+  ] }) : E;
 }
-const ze = B.forwardRef(
-  (e, t) => /* @__PURE__ */ l(he, g(x({}, e), { ref: t }))
+const ze = D.forwardRef(
+  (e, r) => /* @__PURE__ */ d(fe, g(y({}, e), { ref: r }))
 );
 export {
   ze as Checkbox,
   pe as checkboxVariants,
-  me as indicatorVariants
+  he as indicatorVariants
 };

package/dist/types/components/ui/checkbox.d.ts

@@ -12,6 +12,7 @@ export type CheckboxSize = 'md' | 'lg';
 type CheckboxValue = boolean | 'indeterminate';
 interface CheckboxProps<T extends CheckboxValue> {
     className?: string;
+    checkboxClassName?: string;
     size?: CheckboxSize;
     label?: string | ReactElement;
     disabled?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "konsolpro-custom-ui",
   "type": "module",
-  "version": "0.0.348",
+  "version": "0.0.349",
   "packageManager": "yarn@3.4.1",
   "license": "MIT",
   "sideEffects": [