@konstructio/ui 0.0.12-alpha.20 → 0.0.12-alpha.21

package/dist/components/Switch/Switch.js

@@ -1,103 +1,103 @@
-import { jsxs as P, jsx as u } from "react/jsx-runtime";
-import * as p from "react";
-import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeHandle as $, useEffect as j, useCallback as z } from "react";
-import { a as B, c as q, b as F } from "../../index-Cva-e5M4.js";
-import { u as O } from "../../index-B_6_jmOO.js";
-import { u as V, a as D } from "../../index-4ecjw_Aj.js";
-import { P as g } from "../../index-D7QNmo_D.js";
+import { jsxs as P, jsx as i } from "react/jsx-runtime";
+import * as h from "react";
+import { forwardRef as _, useRef as H, useId as M, useImperativeHandle as $, useEffect as j } from "react";
+import { a as z, c as B, b as q } from "../../index-Cva-e5M4.js";
+import { u as A } from "../../index-B_6_jmOO.js";
+import { u as F, a as O } from "../../index-4ecjw_Aj.js";
+import { P as R } from "../../index-D7QNmo_D.js";
 import { cn as x } from "../../utils/index.js";
-import { thumbVariants as L, switchVariants as U } from "./Switch.variants.js";
-import { useTheme as W } from "../../contexts/theme.hook.js";
-var k = "Switch", [X, ie] = q(k), [G, J] = X(k), R = p.forwardRef(
-  (e, s) => {
+import { thumbVariants as V, switchVariants as D } from "./Switch.variants.js";
+import { useTheme as L } from "../../contexts/theme.hook.js";
+var S = "Switch", [U, ae] = B(S), [W, X] = U(S), y = h.forwardRef(
+  (e, d) => {
     const {
       __scopeSwitch: t,
-      name: c,
-      checked: n,
-      defaultChecked: h,
-      required: o,
-      disabled: a,
-      value: i = "on",
+      name: s,
+      checked: a,
+      defaultChecked: n,
+      required: u,
+      disabled: r,
+      value: o = "on",
       onCheckedChange: m,
-      form: r,
+      form: c,
       ...l
-    } = e, [d, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = d ? r || !!d.closest("form") : !0, [S = !1, T] = B({
-      prop: n,
-      defaultProp: h,
+    } = e, [p, b] = h.useState(null), w = A(d, (k) => b(k)), f = h.useRef(!1), C = p ? c || !!p.closest("form") : !0, [v = !1, g] = z({
+      prop: a,
+      defaultProp: n,
       onChange: m
     });
-    return /* @__PURE__ */ P(G, { scope: t, checked: S, disabled: a, children: [
-      /* @__PURE__ */ u(
-        g.button,
+    return /* @__PURE__ */ P(W, { scope: t, checked: v, disabled: r, children: [
+      /* @__PURE__ */ i(
+        R.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": S,
-          "aria-required": o,
-          "data-state": E(S),
-          "data-disabled": a ? "" : void 0,
-          disabled: a,
-          value: i,
+          "aria-checked": v,
+          "aria-required": u,
+          "data-state": T(v),
+          "data-disabled": r ? "" : void 0,
+          disabled: r,
+          value: o,
           ...l,
-          ref: v,
-          onClick: F(e.onClick, (C) => {
-            T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
+          ref: w,
+          onClick: q(e.onClick, (k) => {
+            g((I) => !I), C && (f.current = k.isPropagationStopped(), f.current || k.stopPropagation());
           })
         }
       ),
-      w && /* @__PURE__ */ u(
-        K,
+      C && /* @__PURE__ */ i(
+        G,
         {
-          control: d,
+          control: p,
           bubbles: !f.current,
-          name: c,
-          value: i,
-          checked: S,
-          required: o,
-          disabled: a,
-          form: r,
+          name: s,
+          value: o,
+          checked: v,
+          required: u,
+          disabled: r,
+          form: c,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-R.displayName = k;
-var y = "SwitchThumb", N = p.forwardRef(
-  (e, s) => {
-    const { __scopeSwitch: t, ...c } = e, n = J(y, t);
-    return /* @__PURE__ */ u(
-      g.span,
+y.displayName = S;
+var N = "SwitchThumb", E = h.forwardRef(
+  (e, d) => {
+    const { __scopeSwitch: t, ...s } = e, a = X(N, t);
+    return /* @__PURE__ */ i(
+      R.span,
       {
-        "data-state": E(n.checked),
-        "data-disabled": n.disabled ? "" : void 0,
-        ...c,
-        ref: s
+        "data-state": T(a.checked),
+        "data-disabled": a.disabled ? "" : void 0,
+        ...s,
+        ref: d
       }
     );
   }
 );
-N.displayName = y;
-var K = (e) => {
-  const { control: s, checked: t, bubbles: c = !0, ...n } = e, h = p.useRef(null), o = V(t), a = D(s);
-  return p.useEffect(() => {
-    const i = h.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
-    if (o !== t && l) {
-      const d = new Event("click", { bubbles: c });
-      l.call(i, t), i.dispatchEvent(d);
+E.displayName = N;
+var G = (e) => {
+  const { control: d, checked: t, bubbles: s = !0, ...a } = e, n = h.useRef(null), u = F(t), r = O(d);
+  return h.useEffect(() => {
+    const o = n.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (u !== t && l) {
+      const p = new Event("click", { bubbles: s });
+      l.call(o, t), o.dispatchEvent(p);
     }
-  }, [o, t, c]), /* @__PURE__ */ u(
+  }, [u, t, s]), /* @__PURE__ */ i(
     "input",
     {
       type: "checkbox",
       "aria-hidden": !0,
       defaultChecked: t,
-      ...n,
+      ...a,
       tabIndex: -1,
-      ref: h,
+      ref: n,
       style: {
         ...e.style,
-        ...a,
+        ...r,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -106,68 +106,66 @@ var K = (e) => {
     }
   );
 };
-function E(e) {
+function T(e) {
   return e ? "checked" : "unchecked";
 }
-var Q = R, Y = N;
-const ue = _(
+var J = y, K = E;
+const ne = _(
   ({
     name: e,
-    defaultChecked: s,
-    alignment: t = "horizontal",
-    theme: c,
-    thumbClassName: n,
-    className: h,
-    label: o
-  }, a) => {
-    const [i, m] = H(s ?? !1), r = A(null), l = M(), { theme: d } = W(), b = c ?? d, v = e ? `${l}-${e}` : l;
-    $(a, () => r.current, [r]), j(() => {
-      r.current && (r.current.value = `${i}`);
-    }, [i]);
-    const f = z(
-      (w) => m(w),
-      []
-    );
-    return /* @__PURE__ */ P(
+    alignment: d = "horizontal",
+    theme: t,
+    thumbClassName: s,
+    className: a,
+    label: n,
+    defaultChecked: u,
+    onChange: r,
+    value: o
+  }, m) => {
+    const c = H(null), l = M(), { theme: p } = L(), b = t ?? p, w = e ? `${l}-${e}` : l;
+    return $(m, () => c.current, [c]), j(() => {
+      c.current && (c.current.value = `${o}`);
+    }, [o]), /* @__PURE__ */ P(
       "div",
       {
         className: x(
           "w-full flex gap-3",
-          t === "vertical" ? "flex-col" : "flex-row"
+          d === "vertical" ? "flex-col" : "flex-row"
         ),
         children: [
-          o ? /* @__PURE__ */ u(
+          n ? /* @__PURE__ */ i(
             "label",
             {
               className: "text-base",
-              htmlFor: v,
+              htmlFor: w,
               style: { paddingRight: 15 },
-              children: o
+              children: n
             }
           ) : null,
-          /* @__PURE__ */ u(
-            Q,
+          /* @__PURE__ */ i(
+            J,
             {
-              id: v,
-              defaultChecked: s,
-              onCheckedChange: f,
-              className: x(U({ theme: b, className: h })),
-              "aria-label": o,
-              children: /* @__PURE__ */ u(
-                Y,
+              id: w,
+              defaultChecked: u,
+              checked: o,
+              onCheckedChange: (f) => r == null ? void 0 : r(f),
+              className: x(D({ theme: b, className: a })),
+              "aria-label": n,
+              children: /* @__PURE__ */ i(
+                K,
                 {
-                  className: L({
+                  className: V({
                     theme: b,
-                    className: n
+                    className: s
                   })
                 }
               )
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ i(
             "input",
             {
-              ref: r,
+              ref: c,
               name: e,
               type: "text",
               className: "hidden",
@@ -180,5 +178,5 @@ const ue = _(
   }
 );
 export {
-  ue as Switch
+  ne as Switch
 };

package/dist/index.d.ts

@@ -486,10 +486,12 @@ export declare const Switch: FC<SwitchProps>;
 declare interface SwitchProps extends VariantProps<typeof switchVariants> {
     alignment?: 'horizontal' | 'vertical';
     className?: string;
-    defaultChecked?: boolean;
     label?: string;
     name?: string;
     thumbClassName?: string;
+    onChange?: (e: boolean) => void;
+    value?: boolean;
+    defaultChecked?: boolean;
 }
 
 declare const switchVariants: (props?: ({

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.0.12-alpha.19",
+  "version": "0.0.12-alpha.20",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.0.12-alpha.20",
+  "version": "0.0.12-alpha.21",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",