@simplysm/solid 13.0.75 → 13.0.77

package/dist/components/form-control/Invalid.js

@@ -1,5 +1,5 @@
 import { memo as _$memo } from "solid-js/web";
-import { children, createEffect, createSignal, onCleanup } from "solid-js";
+import { children, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
 import clsx from "clsx";
 import "@simplysm/core-browser";
 const Invalid = (props) => {
@@ -11,43 +11,44 @@ const Invalid = (props) => {
   hiddenInputEl.setAttribute("aria-hidden", "true");
   const [touched, setTouched] = createSignal(false);
   const resolved = children(() => props.children);
+  const targetEl = createMemo(() => resolved.toArray().find((el) => el instanceof HTMLElement));
   createEffect(() => {
     const msg = props.message ?? "";
     hiddenInputEl.setCustomValidity(msg);
   });
   createEffect(() => {
-    const targetEl = resolved.toArray().find((el) => el instanceof HTMLElement);
-    if (!targetEl) return;
-    const computedPosition = getComputedStyle(targetEl).position;
+    const el = targetEl();
+    if (!el) return;
+    const computedPosition = getComputedStyle(el).position;
     if (computedPosition === "static") {
-      targetEl.style.position = "relative";
+      el.style.position = "relative";
     }
-    targetEl.appendChild(hiddenInputEl);
+    el.appendChild(hiddenInputEl);
     onCleanup(() => {
-      if (hiddenInputEl.parentElement === targetEl) {
-        targetEl.removeChild(hiddenInputEl);
+      if (hiddenInputEl.parentElement === el) {
+        el.removeChild(hiddenInputEl);
       }
     });
   });
   createEffect(() => {
     const variant = props.variant ?? "dot";
     const message = props.message ?? "";
-    const touchMode = props.touchMode ?? false;
+    const lazyValidation = props.lazyValidation ?? false;
     const isTouched = touched();
-    const targetEl = resolved.toArray().find((el) => el instanceof HTMLElement);
-    if (!targetEl) return;
-    const shouldShow = message !== "" && (!touchMode || isTouched);
+    const el = targetEl();
+    if (!el) return;
+    const shouldShow = message !== "" && (!lazyValidation || isTouched);
     if (variant === "border") {
       if (shouldShow) {
-        targetEl.classList.add("border-danger-500");
+        el.classList.add("border-danger-500");
       } else {
-        targetEl.classList.remove("border-danger-500");
+        el.classList.remove("border-danger-500");
       }
       onCleanup(() => {
-        targetEl.classList.remove("border-danger-500");
+        el.classList.remove("border-danger-500");
       });
     } else {
-      const existingDot = targetEl.querySelector("[data-invalid-dot]");
+      const existingDot = el.querySelector("[data-invalid-dot]");
       if (existingDot) {
         existingDot.remove();
       }
@@ -55,10 +56,10 @@ const Invalid = (props) => {
         const dot = document.createElement("span");
         dot.setAttribute("data-invalid-dot", "");
         dot.className = clsx("absolute left-0.5 top-0.5", "size-1.5 rounded-full", "pointer-events-none bg-danger-500");
-        targetEl.appendChild(dot);
+        el.appendChild(dot);
       }
       onCleanup(() => {
-        const dot = targetEl.querySelector("[data-invalid-dot]");
+        const dot = el.querySelector("[data-invalid-dot]");
         if (dot) {
           dot.remove();
         }
@@ -66,21 +67,21 @@ const Invalid = (props) => {
     }
   });
   createEffect(() => {
-    if (!(props.touchMode ?? false)) return;
-    const targetEl = resolved.toArray().find((el) => el instanceof HTMLElement);
-    if (!targetEl) return;
+    if (!(props.lazyValidation ?? false)) return;
+    const el = targetEl();
+    if (!el) return;
     const handleFocusOut = () => {
       setTouched(true);
     };
-    targetEl.addEventListener("focusout", handleFocusOut);
+    el.addEventListener("focusout", handleFocusOut);
     onCleanup(() => {
-      targetEl.removeEventListener("focusout", handleFocusOut);
+      el.removeEventListener("focusout", handleFocusOut);
     });
   });
   hiddenInputEl.addEventListener("focus", () => {
-    const targetEl = resolved.toArray().find((el) => el instanceof HTMLElement);
-    if (targetEl) {
-      const focusable = targetEl.findFirstFocusableChild() ?? (targetEl.tabIndex >= 0 ? targetEl : void 0);
+    const el = targetEl();
+    if (el) {
+      const focusable = el.findFirstFocusableChild() ?? (el.tabIndex >= 0 ? el : void 0);
       if (focusable && focusable !== hiddenInputEl) {
         focusable.focus();
       }

package/dist/components/form-control/Invalid.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/components/form-control/Invalid.tsx"],
-  "mappings": "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",
-  "names": ["children", "createEffect", "createSignal", "onCleanup", "clsx", "Invalid", "props", "hiddenInputEl", "document", "createElement", "type", "className", "autocomplete", "tabIndex", "setAttribute", "touched", "setTouched", "resolved", "msg", "message", "setCustomValidity", "targetEl", "toArray", "find", "el", "HTMLElement", "computedPosition", "getComputedStyle", "position", "style", "appendChild", "parentElement", "removeChild", "variant", "touchMode", "isTouched", "shouldShow", "classList", "add", "remove", "existingDot", "querySelector", "dot", "handleFocusOut", "addEventListener", "removeEventListener", "focusable", "findFirstFocusableChild", "undefined", "focus", "_$memo"]
+  "mappings": ";AAAA,SAASA,UAAUC,cAAcC,YAAYC,cAAcC,iBAAuC;AAClG,OAAOC,UAAU;AACjB,OAAO;AAWA,MAAMC,UAA0CC,WAAU;AAC/D,QAAMC,gBAAgBC,SAASC,cAAc,OAAO;AACpDF,gBAAcG,OAAO;AACrBH,gBAAcI,YAAYP,KACxB,8BACA,qBACA,2BACF;AACAG,gBAAcK,eAAe;AAC7BL,gBAAcM,WAAW;AACzBN,gBAAcO,aAAa,eAAe,MAAM;AAEhD,QAAM,CAACC,SAASC,UAAU,IAAId,aAAa,KAAK;AAEhD,QAAMe,WAAWlB,SAAS,MAAMO,MAAMP,QAAQ;AAE9C,QAAMmB,WAAWjB,WAAW,MAC1BgB,SAASE,QAAQ,EAAEC,KAAMC,QAA0BA,cAAcC,WAAW,CAC9E;AAGAtB,eAAa,MAAM;AACjB,UAAMuB,MAAMjB,MAAMkB,WAAW;AAC7BjB,kBAAckB,kBAAkBF,GAAG;EACrC,CAAC;AAGDvB,eAAa,MAAM;AACjB,UAAMqB,KAAKH,SAAS;AACpB,QAAI,CAACG,GAAI;AAET,UAAMK,mBAAmBC,iBAAiBN,EAAE,EAAEO;AAC9C,QAAIF,qBAAqB,UAAU;AACjCL,SAAGQ,MAAMD,WAAW;IACtB;AAEAP,OAAGS,YAAYvB,aAAa;AAE5BJ,cAAU,MAAM;AACd,UAAII,cAAcwB,kBAAkBV,IAAI;AACtCA,WAAGW,YAAYzB,aAAa;MAC9B;IACF,CAAC;EACH,CAAC;AAGDP,eAAa,MAAM;AACjB,UAAMiC,UAAU3B,MAAM2B,WAAW;AACjC,UAAMT,UAAUlB,MAAMkB,WAAW;AACjC,UAAMU,iBAAiB5B,MAAM4B,kBAAkB;AAC/C,UAAMC,YAAYpB,QAAQ;AAE1B,UAAMM,KAAKH,SAAS;AAEpB,QAAI,CAACG,GAAI;AAET,UAAMe,aAAaZ,YAAY,OAAO,CAACU,kBAAkBC;AAEzD,QAAIF,YAAY,UAAU;AACxB,UAAIG,YAAY;AACdf,WAAGgB,UAAUC,IAAI,mBAAmB;MACtC,OAAO;AACLjB,WAAGgB,UAAUE,OAAO,mBAAmB;MACzC;AAEApC,gBAAU,MAAM;AACdkB,WAAGgB,UAAUE,OAAO,mBAAmB;MACzC,CAAC;IACH,OAAO;AAEL,YAAMC,cAAcnB,GAAGoB,cAAc,oBAAoB;AACzD,UAAID,aAAa;AACfA,oBAAYD,OAAO;MACrB;AAEA,UAAIH,YAAY;AACd,cAAMM,MAAMlC,SAASC,cAAc,MAAM;AACzCiC,YAAI5B,aAAa,oBAAoB,EAAE;AACvC4B,YAAI/B,YAAYP,KACd,6BACA,yBACA,mCACF;AACAiB,WAAGS,YAAYY,GAAG;MACpB;AAEAvC,gBAAU,MAAM;AACd,cAAMuC,MAAMrB,GAAGoB,cAAc,oBAAoB;AACjD,YAAIC,KAAK;AACPA,cAAIH,OAAO;QACb;MACF,CAAC;IACH;EACF,CAAC;AAGDvC,eAAa,MAAM;AACjB,QAAI,EAAEM,MAAM4B,kBAAkB,OAAQ;AAEtC,UAAMb,KAAKH,SAAS;AAEpB,QAAI,CAACG,GAAI;AAET,UAAMsB,iBAAiBA,MAAM;AAC3B3B,iBAAW,IAAI;IACjB;AAEAK,OAAGuB,iBAAiB,YAAYD,cAAc;AAE9CxC,cAAU,MAAM;AACdkB,SAAGwB,oBAAoB,YAAYF,cAAc;IACnD,CAAC;EACH,CAAC;AAGDpC,gBAAcqC,iBAAiB,SAAS,MAAM;AAC5C,UAAMvB,KAAKH,SAAS;AAEpB,QAAIG,IAAI;AACN,YAAMyB,YACJzB,GAAG0B,wBAAwB,MAAM1B,GAAGR,YAAY,IAAIQ,KAAK2B;AAC3D,UAAIF,aAAaA,cAAcvC,eAAe;AAC5CuC,kBAAUG,MAAM;MAClB;IACF;EACF,CAAC;AAED,SAAAC,OAAUjC,QAAQ;AACpB;",
+  "names": ["children", "createEffect", "createMemo", "createSignal", "onCleanup", "clsx", "Invalid", "props", "hiddenInputEl", "document", "createElement", "type", "className", "autocomplete", "tabIndex", "setAttribute", "touched", "setTouched", "resolved", "targetEl", "toArray", "find", "el", "HTMLElement", "msg", "message", "setCustomValidity", "computedPosition", "getComputedStyle", "position", "style", "appendChild", "parentElement", "removeChild", "variant", "lazyValidation", "isTouched", "shouldShow", "classList", "add", "remove", "existingDot", "querySelector", "dot", "handleFocusOut", "addEventListener", "removeEventListener", "focusable", "findFirstFocusableChild", "undefined", "focus", "_$memo"]
 }

package/dist/components/form-control/ThemeToggle.d.ts

@@ -1,7 +1,8 @@
 import { type Component, type JSX } from "solid-js";
+import { type ComponentSize } from "../../styles/control.styles";
 export interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Button size */
-    size?: "sm" | "lg";
+    size?: ComponentSize;
 }
 /**
  * Theme toggle button component

package/dist/components/form-control/ThemeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\components\\form-control\\ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AA2B/E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC3C,UAAU,CACX;IACC,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAqCnD,CAAC"}
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["..\\..\\..\\src\\components\\form-control\\ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAO/E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAwBjE,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC3C,UAAU,CACX;IACC,kBAAkB;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAoCnD,CAAC"}

package/dist/components/form-control/ThemeToggle.js

@@ -1,26 +1,25 @@
-import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<button>`);
+import { createComponent as _$createComponent } from "solid-js/web";
 import { splitProps, Switch, Match } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-solidjs";
 import { useTheme } from "../../providers/ThemeContext.js";
 import { Icon } from "../display/Icon.js";
-import { ripple } from "../../directives/ripple.js";
-import { iconButtonBase } from "../../styles/patterns.styles.js";
-import { useI18n } from "../../providers/i18n/I18nContext.js";
-void ripple;
+import { Button } from "./Button.js";
+import { useI18n } from "../../providers/i18n/I18nProvider.js";
 const sizeClasses = {
+  default: "p-1.5",
+  xs: "p-0.5",
   sm: "p-1",
-  lg: "p-2"
+  lg: "p-2",
+  xl: "p-2.5"
 };
 const iconSizes = {
+  default: "1.25em",
+  xs: "0.75em",
   sm: "1em",
-  lg: "1.5em"
+  lg: "1.5em",
+  xl: "2em"
 };
 const modeLabelKeys = {
   light: "themeToggle.light",
@@ -35,68 +34,66 @@ const ThemeToggle = (props) => {
   } = useTheme();
   const i18n = useI18n();
   const modeLabel = () => i18n.t(modeLabelKeys[mode()]);
-  const getClassName = () => twMerge(iconButtonBase, "p-1.5", local.size && sizeClasses[local.size], local.class);
-  const iconSize = () => local.size ? iconSizes[local.size] : "1.25em";
-  return (() => {
-    var _el$ = _tmpl$();
-    _$use(ripple, _el$, () => true);
-    _$spread(_el$, _$mergeProps(rest, {
-      "data-theme-toggle": "",
-      "type": "button",
-      get ["class"]() {
-        return getClassName();
-      },
-      "onClick": cycleMode,
-      get title() {
-        return modeLabel();
-      },
-      get ["aria-label"]() {
-        return modeLabel();
-      }
-    }), false, true);
-    _$insert(_el$, _$createComponent(Switch, {
-      get children() {
-        return [_$createComponent(Match, {
-          get when() {
-            return mode() === "light";
-          },
-          get children() {
-            return _$createComponent(Icon, {
-              icon: IconSun,
-              get size() {
-                return iconSize();
-              }
-            });
-          }
-        }), _$createComponent(Match, {
-          get when() {
-            return mode() === "system";
-          },
-          get children() {
-            return _$createComponent(Icon, {
-              icon: IconDeviceDesktop,
-              get size() {
-                return iconSize();
-              }
-            });
-          }
-        }), _$createComponent(Match, {
-          get when() {
-            return mode() === "dark";
-          },
-          get children() {
-            return _$createComponent(Icon, {
-              icon: IconMoon,
-              get size() {
-                return iconSize();
-              }
-            });
-          }
-        })];
-      }
-    }));
-    return _el$;
-  })();
+  const getClassName = () => twMerge(sizeClasses[local.size ?? "default"], local.class);
+  const iconSize = () => iconSizes[local.size ?? "default"];
+  return _$createComponent(Button, _$mergeProps(rest, {
+    variant: "ghost",
+    size: "xs",
+    "data-theme-toggle": true,
+    get ["class"]() {
+      return getClassName();
+    },
+    onClick: cycleMode,
+    get title() {
+      return modeLabel();
+    },
+    get ["aria-label"]() {
+      return modeLabel();
+    },
+    get children() {
+      return _$createComponent(Switch, {
+        get children() {
+          return [_$createComponent(Match, {
+            get when() {
+              return mode() === "light";
+            },
+            get children() {
+              return _$createComponent(Icon, {
+                icon: IconSun,
+                get size() {
+                  return iconSize();
+                }
+              });
+            }
+          }), _$createComponent(Match, {
+            get when() {
+              return mode() === "system";
+            },
+            get children() {
+              return _$createComponent(Icon, {
+                icon: IconDeviceDesktop,
+                get size() {
+                  return iconSize();
+                }
+              });
+            }
+          }), _$createComponent(Match, {
+            get when() {
+              return mode() === "dark";
+            },
+            get children() {
+              return _$createComponent(Icon, {
+                icon: IconMoon,
+                get size() {
+                  return iconSize();
+                }
+              });
+            }
+          })];
+        }
+      });
+    }
+  }));
 };
 export {
   ThemeToggle

package/dist/components/form-control/ThemeToggle.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/components/form-control/ThemeToggle.tsx"],
-  "mappings": ";;;;;;;AAAA,SAAmCA,YAAYC,QAAQC,aAAa;AACpE,SAASC,eAAe;AACxB,SAASC,SAASC,UAAUC,yBAAyB;AACrD,SAASC,gBAAgC;AACzC,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,sBAAsB;AAC/B,SAASC,eAAe;AAExB,KAAKF;AAEL,MAAMG,cAA2C;EAC/CC,IAAI;EACJC,IAAI;AACN;AAEA,MAAMC,YAAyC;EAC7CF,IAAI;EACJC,IAAI;AACN;AAEA,MAAME,gBAA2C;EAC/CC,OAAO;EACPC,QAAQ;EACRC,MAAM;AACR;AA4BO,MAAMC,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIvB,WAAWqB,OAAO,CAAC,SAAS,MAAM,CAAC;AAEzD,QAAM;IAAEG;IAAMC;EAAU,IAAIlB,SAAS;AACrC,QAAMmB,OAAOf,QAAQ;AAErB,QAAMgB,YAAYA,MAAMD,KAAKE,EAAEZ,cAAcQ,KAAK,CAAC,CAAC;AAEpD,QAAMK,eAAeA,MACnB1B,QAAQO,gBAAgB,SAASY,MAAMQ,QAAQlB,YAAYU,MAAMQ,IAAI,GAAGR,MAAMS,KAAK;AAErF,QAAMC,WAAWA,MAAOV,MAAMQ,OAAOf,UAAUO,MAAMQ,IAAI,IAAI;AAE7D,UAAA,MAAA;AAAA,QAAAG,OAAAC,OAAA;AAAAC,UAIQ1B,QAAMwB,MAAA,MAAA,IAAA;AAAAG,aAAAH,MAAAI,aAFNd,MAAI;MAAA,qBAAA;MAAA,QAGH;MAAQ,KAAA,OAAA,IAAA;AAAA,eACNM,aAAa;MAAC;MAAA,WACZJ;MAAS,IAClBa,QAAK;AAAA,eAAEX,UAAU;MAAC;MAAA,KAAA,YAAA,IAAA;AAAA,eACNA,UAAU;MAAC;IAAA,CAAA,GAAA,OAAA,IAAA;AAAAY,aAAAN,MAAAO,kBAEtBvC,QAAM;MAAA,IAAAwC,WAAA;AAAA,eAAA,CAAAD,kBACJtC,OAAK;UAAA,IAACwC,OAAI;AAAA,mBAAElB,KAAK,MAAM;UAAO;UAAA,IAAAiB,WAAA;AAAA,mBAAAD,kBAC5BhC,MAAI;cAACmC,MAAMvC;cAAO,IAAE0B,OAAI;AAAA,uBAAEE,SAAS;cAAC;YAAA,CAAA;UAAA;QAAA,CAAA,GAAAQ,kBAEtCtC,OAAK;UAAA,IAACwC,OAAI;AAAA,mBAAElB,KAAK,MAAM;UAAQ;UAAA,IAAAiB,WAAA;AAAA,mBAAAD,kBAC7BhC,MAAI;cAACmC,MAAMrC;cAAiB,IAAEwB,OAAI;AAAA,uBAAEE,SAAS;cAAC;YAAA,CAAA;UAAA;QAAA,CAAA,GAAAQ,kBAEhDtC,OAAK;UAAA,IAACwC,OAAI;AAAA,mBAAElB,KAAK,MAAM;UAAM;UAAA,IAAAiB,WAAA;AAAA,mBAAAD,kBAC3BhC,MAAI;cAACmC,MAAMtC;cAAQ,IAAEyB,OAAI;AAAA,uBAAEE,SAAS;cAAC;YAAA,CAAA;UAAA;QAAA,CAAA,CAAA;MAAA;IAAA,CAAA,CAAA;AAAA,WAAAC;EAAA,GAAA;AAKhD;",
-  "names": ["splitProps", "Switch", "Match", "twMerge", "IconSun", "IconMoon", "IconDeviceDesktop", "useTheme", "Icon", "ripple", "iconButtonBase", "useI18n", "sizeClasses", "sm", "lg", "iconSizes", "modeLabelKeys", "light", "system", "dark", "ThemeToggle", "props", "local", "rest", "mode", "cycleMode", "i18n", "modeLabel", "t", "getClassName", "size", "class", "iconSize", "_el$", "_tmpl$", "_$use", "_$spread", "_$mergeProps", "title", "_$insert", "_$createComponent", "children", "when", "icon"]
+  "mappings": ";;AAAA,SAAmCA,YAAYC,QAAQC,aAAa;AACpE,SAASC,eAAe;AACxB,SAASC,SAASC,UAAUC,yBAAyB;AACrD,SAASC,gBAAgC;AACzC,SAASC,YAAY;AACrB,SAASC,cAAc;AACvB,SAASC,eAAe;AAGxB,MAAMC,cAA6C;EACjDC,SAAS;EACTC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;AACN;AAEA,MAAMC,YAA2C;EAC/CL,SAAS;EACTC,IAAI;EACJC,IAAI;EACJC,IAAI;EACJC,IAAI;AACN;AAEA,MAAME,gBAA2C;EAC/CC,OAAO;EACPC,QAAQ;EACRC,MAAM;AACR;AA4BO,MAAMC,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIzB,WAAWuB,OAAO,CAAC,SAAS,MAAM,CAAC;AAEzD,QAAM;IAAEG;IAAMC;EAAU,IAAIpB,SAAS;AACrC,QAAMqB,OAAOlB,QAAQ;AAErB,QAAMmB,YAAYA,MAAMD,KAAKE,EAAEZ,cAAcQ,KAAK,CAAC,CAAC;AAEpD,QAAMK,eAAeA,MAAM5B,QAAQQ,YAAYa,MAAMQ,QAAQ,SAAS,GAAGR,MAAMS,KAAK;AAEpF,QAAMC,WAAWA,MAAMjB,UAAUO,MAAMQ,QAAQ,SAAS;AAExD,SAAAG,kBACG1B,QAAM2B,aACDX,MAAI;IACRY,SAAO;IACPL,MAAI;IAAA,qBAAA;IAAA,KAAA,OAAA,IAAA;AAAA,aAEGD,aAAa;IAAC;IACrBO,SAASX;IAAS,IAClBY,QAAK;AAAA,aAAEV,UAAU;IAAC;IAAA,KAAA,YAAA,IAAA;AAAA,aACNA,UAAU;IAAC;IAAA,IAAAW,WAAA;AAAA,aAAAL,kBAEtBlC,QAAM;QAAA,IAAAuC,WAAA;AAAA,iBAAA,CAAAL,kBACJjC,OAAK;YAAA,IAACuC,OAAI;AAAA,qBAAEf,KAAK,MAAM;YAAO;YAAA,IAAAc,WAAA;AAAA,qBAAAL,kBAC5B3B,MAAI;gBAACkC,MAAMtC;gBAAO,IAAE4B,OAAI;AAAA,yBAAEE,SAAS;gBAAC;cAAA,CAAA;YAAA;UAAA,CAAA,GAAAC,kBAEtCjC,OAAK;YAAA,IAACuC,OAAI;AAAA,qBAAEf,KAAK,MAAM;YAAQ;YAAA,IAAAc,WAAA;AAAA,qBAAAL,kBAC7B3B,MAAI;gBAACkC,MAAMpC;gBAAiB,IAAE0B,OAAI;AAAA,yBAAEE,SAAS;gBAAC;cAAA,CAAA;YAAA;UAAA,CAAA,GAAAC,kBAEhDjC,OAAK;YAAA,IAACuC,OAAI;AAAA,qBAAEf,KAAK,MAAM;YAAM;YAAA,IAAAc,WAAA;AAAA,qBAAAL,kBAC3B3B,MAAI;gBAACkC,MAAMrC;gBAAQ,IAAE2B,OAAI;AAAA,yBAAEE,SAAS;gBAAC;cAAA,CAAA;YAAA;UAAA,CAAA,CAAA;QAAA;MAAA,CAAA;IAAA;EAAA,CAAA,CAAA;AAKhD;",
+  "names": ["splitProps", "Switch", "Match", "twMerge", "IconSun", "IconMoon", "IconDeviceDesktop", "useTheme", "Icon", "Button", "useI18n", "sizeClasses", "default", "xs", "sm", "lg", "xl", "iconSizes", "modeLabelKeys", "light", "system", "dark", "ThemeToggle", "props", "local", "rest", "mode", "cycleMode", "i18n", "modeLabel", "t", "getClassName", "size", "class", "iconSize", "_$createComponent", "_$mergeProps", "variant", "onClick", "title", "children", "when", "icon"]
 }

package/dist/components/form-control/checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { type JSX, type ParentComponent } from "solid-js";
-import { type CheckboxSize } from "./Checkbox.styles";
+import type { CheckboxSize } from "./Checkbox.styles";
 export interface CheckboxProps {
     value?: boolean;
     onValueChange?: (value: boolean) => void;
@@ -9,7 +9,7 @@ export interface CheckboxProps {
     inline?: boolean;
     required?: boolean;
     validate?: (value: boolean) => string | undefined;
-    touchMode?: boolean;
+    lazyValidation?: boolean;
     class?: string;
     style?: JSX.CSSProperties;
     children?: JSX.Element;

package/dist/components/form-control/checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\checkbox\\Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAgC,MAAM,UAAU,CAAC;AAOxF,OAAO,EACL,KAAK,YAAY,EASlB,MAAM,mBAAmB,CAAC;AAM3B,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,eAAe,CAAC,aAAa,CA+EnD,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\checkbox\\Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,eAAe,CAAC,aAAa,CAUnD,CAAC"}

package/dist/components/form-control/checkbox/Checkbox.js

@@ -1,102 +1,21 @@
-import { template as _$template } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<span>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div>`);
-import { Show, splitProps, createMemo } from "solid-js";
-import { twMerge } from "tailwind-merge";
 import { IconCheck } from "@tabler/icons-solidjs";
-import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
-import { ripple } from "../../../directives/ripple.js";
 import { Icon } from "../../display/Icon.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
-import { checkboxBaseClass, indicatorBaseClass, checkedClass, checkboxSizeClasses, checkboxInsetClass, checkboxInsetSizeHeightClasses, checkboxInlineClass, checkboxDisabledClass } from "./Checkbox.styles.js";
-import { Invalid } from "../Invalid.js";
-void ripple;
-const Checkbox = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "inset", "inline", "required", "validate", "touchMode", "class", "style", "children"]);
-  const i18n = useI18n();
-  const [value, setValue] = createControllableSignal({
-    value: () => local.value ?? false,
-    onChange: () => local.onValueChange
-  });
-  const handleClick = () => {
-    if (local.disabled) return;
-    setValue((v) => !v);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-  const getWrapperClass = () => twMerge(checkboxBaseClass, local.size && checkboxSizeClasses[local.size], local.inset && checkboxInsetClass, local.inset && local.size && checkboxInsetSizeHeightClasses[local.size], local.inline && checkboxInlineClass, local.disabled && checkboxDisabledClass, local.class);
-  const getIndicatorClass = () => twMerge(indicatorBaseClass, "rounded-sm", value() && checkedClass);
-  const errorMsg = createMemo(() => {
-    var _a;
-    const v = local.value ?? false;
-    if (local.required && !v) return i18n.t("validation.requiredSelection");
-    return (_a = local.validate) == null ? void 0 : _a.call(local, v);
-  });
-  return _$createComponent(Invalid, {
-    get message() {
-      return errorMsg();
-    },
-    variant: "border",
-    get touchMode() {
-      return local.touchMode;
-    },
-    get children() {
-      var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
-      _$use(ripple, _el$, () => !local.disabled);
-      _$spread(_el$, _$mergeProps(rest, {
-        "role": "checkbox",
-        get ["aria-checked"]() {
-          return value();
-        },
-        get tabIndex() {
-          return local.disabled ? -1 : 0;
-        },
-        get ["class"]() {
-          return getWrapperClass();
-        },
-        get style() {
-          return local.style;
-        },
-        "onClick": handleClick,
-        "onKeyDown": handleKeyDown
-      }), false, true);
-      _$insert(_el$2, _$createComponent(Show, {
-        get when() {
-          return value();
-        },
-        get children() {
-          return _$createComponent(Icon, {
-            icon: IconCheck,
-            size: "1em"
-          });
-        }
-      }));
-      _$insert(_el$, _$createComponent(Show, {
-        get when() {
-          return local.children;
-        },
-        get children() {
-          var _el$3 = _tmpl$();
-          _$insert(_el$3, () => local.children);
-          return _el$3;
-        }
-      }), null);
-      _$effect(() => _$className(_el$2, getIndicatorClass()));
-      return _el$;
-    }
-  });
-};
+import { SelectableBase } from "./SelectableBase.js";
+const Checkbox = (props) => _$createComponent(SelectableBase, _$mergeProps(props, {
+  get config() {
+    return {
+      role: "checkbox",
+      indicatorShape: "rounded-sm",
+      indicatorContent: _$createComponent(Icon, {
+        icon: IconCheck,
+        size: "1em"
+      }),
+      onToggle: (v) => !v
+    };
+  }
+}));
 export {
   Checkbox
 };

package/dist/components/form-control/checkbox/Checkbox.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/Checkbox.tsx"],
-  "mappings": "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",
-  "names": ["Show", "splitProps", "createMemo", "twMerge", "IconCheck", "createControllableSignal", "ripple", "Icon", "useI18n", "checkboxBaseClass", "indicatorBaseClass", "checkedClass", "checkboxSizeClasses", "checkboxInsetClass", "checkboxInsetSizeHeightClasses", "checkboxInlineClass", "checkboxDisabledClass", "Invalid", "Checkbox", "props", "local", "rest", "i18n", "value", "setValue", "onChange", "onValueChange", "handleClick", "disabled", "v", "handleKeyDown", "e", "key", "preventDefault", "getWrapperClass", "size", "inset", "inline", "class", "getIndicatorClass", "errorMsg", "required", "t", "validate", "_$createComponent", "message", "variant", "touchMode", "children", "_el$", "_tmpl$2", "_el$2", "firstChild", "_$use", "_$spread", "_$mergeProps", "tabIndex", "style", "_$insert", "when", "icon", "_el$3", "_tmpl$", "_$effect", "_$className"]
+  "mappings": ";;AACA,SAASA,iBAAiB;AAE1B,SAASC,YAAY;AACrB,SAASC,sBAAsB;AAiBxB,MAAMC,WAA4CC,WAAKC,kBAC3DH,gBAAcI,aACTF,OAAK;EAAA,IACTG,SAAM;AAAA,WAAE;MACNC,MAAM;MACNC,gBAAgB;MAChBC,kBAAgBL,kBAAGJ,MAAI;QAACU,MAAMX;QAAWY,MAAI;MAAA,CAAA;MAC7CC,UAAWC,OAAM,CAACA;IACpB;EAAC;AAAA,CAAA,CAAA;",
+  "names": ["IconCheck", "Icon", "SelectableBase", "Checkbox", "props", "_$createComponent", "_$mergeProps", "config", "role", "indicatorShape", "indicatorContent", "icon", "size", "onToggle", "v"]
 }

package/dist/components/form-control/checkbox/Checkbox.styles.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentSize } from "../../../styles/tokens.styles";
+import { type ComponentSize } from "../../../styles/control.styles";
 export type CheckboxSize = ComponentSize;
 export declare const checkboxBaseClass: string;
 export declare const indicatorBaseClass: string;
@@ -7,5 +7,5 @@ export declare const checkboxSizeClasses: Record<CheckboxSize, string>;
 export declare const checkboxInsetClass: string;
 export declare const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string>;
 export declare const checkboxInlineClass: string;
-export declare const checkboxDisabledClass = "cursor-default opacity-30 pointer-events-none";
+export declare const checkboxDisabledClass: string;
 //# sourceMappingURL=Checkbox.styles.d.ts.map

package/dist/components/form-control/checkbox/Checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\checkbox\\Checkbox.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,aAAa,EAMnB,MAAM,+BAA+B,CAAC;AAGvC,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC;AAGzC,eAAO,MAAM,iBAAiB,QAU7B,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAQ9B,CAAC;AAGF,eAAO,MAAM,YAAY,QAA0D,CAAC;AAGpF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK5D,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAI9B,CAAC;AAGF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAKvE,CAAC;AAGF,eAAO,MAAM,mBAAmB,QAAmC,CAAC;AAGpE,eAAO,MAAM,qBAAqB,kDAAkB,CAAC"}
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\checkbox\\Checkbox.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAmB,MAAM,gCAAgC,CAAC;AAErF,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC;AAGzC,eAAO,MAAM,iBAAiB,QAQ7B,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAQ9B,CAAC;AAGF,eAAO,MAAM,YAAY,QAA0D,CAAC;AAGpF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM5D,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAM9B,CAAC;AAGF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAMvE,CAAC;AAGF,eAAO,MAAM,mBAAmB,QAAuC,CAAC;AAGxE,eAAO,MAAM,qBAAqB,QAAuB,CAAC"}

package/dist/components/form-control/checkbox/Checkbox.styles.js

@@ -1,19 +1,10 @@
 import clsx from "clsx";
-import {
-  borderDefault,
-  disabledOpacity,
-  paddingLg,
-  paddingSm,
-  paddingXl,
-  paddingXs
-} from "../../../styles/tokens.styles.js";
-import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles.js";
+import { border } from "../../../styles/base.styles.js";
+import { state, gap, pad } from "../../../styles/control.styles.js";
 const checkboxBaseClass = clsx(
   "inline-flex items-center gap-2",
   "whitespace-nowrap",
   "cursor-pointer",
-  "px-2 py-1",
-  "h-field",
   "border border-transparent",
   "rounded",
   "focus:outline-none",
@@ -23,31 +14,35 @@ const indicatorBaseClass = clsx(
   "flex shrink-0 items-center justify-center",
   "size-4",
   "border",
-  borderDefault,
-  // bgSurface,
+  border.default,
+  // bg.surface,
   "bg-primary-50 dark:bg-primary-950/30",
   "transition-colors"
 );
 const checkedClass = clsx("border-primary-500 bg-primary-500", "text-white");
 const checkboxSizeClasses = {
-  xs: clsx("h-field-xs", paddingXs),
-  sm: clsx("h-field-sm", paddingSm),
-  lg: clsx("h-field-lg", paddingLg),
-  xl: clsx("h-field-xl", paddingXl)
+  default: clsx("h-field", pad.default),
+  xs: clsx("h-field-xs", pad.xs),
+  sm: clsx("h-field-sm", pad.sm),
+  lg: clsx("h-field-lg", pad.lg),
+  xl: clsx("h-field-xl", pad.xl)
 };
 const checkboxInsetClass = clsx(
+  "w-full rounded-none border-none",
   "h-field-inset justify-center bg-transparent",
-  insetBase,
-  insetFocusOutlineSelf
+  "focus:[outline-style:solid]",
+  "focus:outline-1 focus:-outline-offset-1",
+  "focus:outline-primary-400 dark:focus:outline-primary-400"
 );
 const checkboxInsetSizeHeightClasses = {
-  xs: "h-field-inset-xs",
-  sm: "h-field-inset-sm",
-  lg: "h-field-inset-lg",
-  xl: "h-field-inset-xl"
+  default: clsx`h-field-inset`,
+  xs: clsx`h-field-inset-xs`,
+  sm: clsx`h-field-inset-sm`,
+  lg: clsx`h-field-inset-lg`,
+  xl: clsx`h-field-inset-xl`
 };
-const checkboxInlineClass = clsx("!h-auto", "!p-0", "gap-1");
-const checkboxDisabledClass = disabledOpacity;
+const checkboxInlineClass = clsx("!h-auto", "!p-0", gap.default);
+const checkboxDisabledClass = clsx(state.disabled);
 export {
   checkboxBaseClass,
   checkboxDisabledClass,

package/dist/components/form-control/checkbox/Checkbox.styles.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/Checkbox.styles.ts"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,6BAA6B;AAK1C,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF;AAGO,MAAM,eAAe,KAAK,qCAAqC,YAAY;AAG3E,MAAM,sBAAoD;AAAA,EAC/D,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAClC;AAGO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,iCAA+D;AAAA,EAC1E,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,sBAAsB,KAAK,WAAW,QAAQ,OAAO;AAG3D,MAAM,wBAAwB;",
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAS,cAAc;AACvB,SAA6B,OAAO,KAAK,WAAW;AAK7C,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA;AAAA,EAEP;AAAA,EACA;AACF;AAGO,MAAM,eAAe,KAAK,qCAAqC,YAAY;AAG3E,MAAM,sBAAoD;AAAA,EAC/D,SAAS,KAAK,WAAW,IAAI,OAAO;AAAA,EACpC,IAAI,KAAK,cAAc,IAAI,EAAE;AAAA,EAC7B,IAAI,KAAK,cAAc,IAAI,EAAE;AAAA,EAC7B,IAAI,KAAK,cAAc,IAAI,EAAE;AAAA,EAC7B,IAAI,KAAK,cAAc,IAAI,EAAE;AAC/B;AAGO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,iCAA+D;AAAA,EAC1E,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,sBAAsB,KAAK,WAAW,QAAQ,IAAI,OAAO;AAG/D,MAAM,wBAAwB,KAAK,MAAM,QAAQ;",
   "names": []
 }