@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -0,0 +1,10 @@
+import { type ParentComponent } from "solid-js";
+import "@simplysm/core-browser";
+export interface InvalidProps {
+    /** Validation error message. Non-empty = invalid. */
+    message?: string;
+    /** Custom class */
+    class?: string;
+}
+export declare const Invalid: ParentComponent<InvalidProps>;
+//# sourceMappingURL=Invalid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Invalid.d.ts","sourceRoot":"","sources":["../../../src/components/form-control/Invalid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAA4B,MAAM,UAAU,CAAC;AAG1E,OAAO,wBAAwB,CAAC;AAEhC,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,eAAO,MAAM,OAAO,EAAE,eAAe,CAAC,YAAY,CAkCjD,CAAC"}

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

@@ -0,0 +1,51 @@
+import { template as _$template } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div><div></div><input type=text tabindex=-1 aria-hidden=true>`);
+import { createEffect, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import "@simplysm/core-browser";
+const indicatorClass = clsx("absolute left-0.5 top-0.5", "size-1.5 rounded-full", "bg-danger-500", "pointer-events-none select-none");
+const hiddenInputClass = clsx("absolute bottom-0 left-0.5", "size-px opacity-0", "pointer-events-none -z-10", "select-none");
+const Invalid = (props) => {
+  const [local, rest] = splitProps(props, ["message", "class", "children"]);
+  let hiddenInputEl;
+  createEffect(() => {
+    const msg = local.message ?? "";
+    hiddenInputEl.setCustomValidity(msg);
+  });
+  const handleHiddenInputFocus = (e) => {
+    const container = e.currentTarget.parentElement;
+    if (!container) return;
+    const focusable = container.findFirstFocusableChild();
+    if (focusable && focusable !== e.currentTarget) {
+      focusable.focus();
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    _$spread(_el$, _$mergeProps(rest, {
+      get ["class"]() {
+        return twMerge("relative inline-block", local.class);
+      }
+    }), false, true);
+    _$insert(_el$, () => local.children, _el$2);
+    _$className(_el$2, indicatorClass);
+    _el$3.addEventListener("focus", handleHiddenInputFocus);
+    var _ref$ = hiddenInputEl;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$3) : hiddenInputEl = _el$3;
+    _$className(_el$3, hiddenInputClass);
+    _$effect((_$p) => _$setStyleProperty(_el$2, "display", (local.message ?? "") !== "" ? "block" : "none"));
+    return _el$;
+  })();
+};
+export {
+  Invalid
+};
+//# sourceMappingURL=Invalid.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/form-control/Invalid.tsx"],
+  "mappings": ";;;;;;;;;AAAA,SAA+BA,cAAcC,kBAAkB;AAC/D,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,OAAO;AASP,MAAMC,iBAAiBF,KACrB,6BACA,yBACA,iBACA,iCACF;AAEA,MAAMG,mBAAmBH,KACvB,8BACA,qBACA,6BACA,aACF;AAEO,MAAMI,UAA0CC,WAAU;AAC/D,QAAM,CAACC,OAAOC,IAAI,IAAIR,WAAWM,OAAO,CAAC,WAAW,SAAS,UAAU,CAAC;AAExE,MAAIG;AAGJV,eAAa,MAAM;AACjB,UAAMW,MAAMH,MAAMI,WAAW;AAC7BF,kBAAcG,kBAAkBF,GAAG;EACrC,CAAC;AAED,QAAMG,yBAA0BC,OAAkB;AAChD,UAAMC,YAAaD,EAAEE,cAA8BC;AACnD,QAAI,CAACF,UAAW;AAChB,UAAMG,YAAYH,UAAUI,wBAAwB;AACpD,QAAID,aAAaA,cAAcJ,EAAEE,eAAe;AAC9CE,gBAAUE,MAAM;IAClB;EACF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG;AAAAC,aAAAN,MAAAO,aACWpB,MAAI;MAAA,KAAA,OAAA,IAAA;AAAA,eAASN,QAAQ,yBAAyBK,MAAMsB,KAAK;MAAC;IAAA,CAAA,GAAA,OAAA,IAAA;AAAAC,aAAAT,MAAA,MAChEd,MAAMwB,UAAQR,KAAA;AAAAS,gBAAAT,OACHpB,cAAc;AAAAsB,UAAAQ,iBAAA,SAOfpB,sBAAsB;AAAA,QAAAqB,QAL1BzB;AAAa,WAAAyB,UAAA,aAAAC,MAAAD,OAAAT,KAAA,IAAbhB,gBAAagB;AAAAO,gBAAAP,OAEXrB,gBAAgB;AAAAgC,aAAAC,SAAAC,mBAAAf,OAAA,YAJsBhB,MAAMI,WAAW,QAAQ,KAAK,UAAU,MAAM,CAAA;AAAA,WAAAU;EAAA,GAAA;AAWnG;",
+  "names": ["createEffect", "splitProps", "clsx", "twMerge", "indicatorClass", "hiddenInputClass", "Invalid", "props", "local", "rest", "hiddenInputEl", "msg", "message", "setCustomValidity", "handleHiddenInputFocus", "e", "container", "currentTarget", "parentElement", "focusable", "findFirstFocusableChild", "focus", "_el$", "_tmpl$", "_el$2", "firstChild", "_el$3", "nextSibling", "_$spread", "_$mergeProps", "class", "_$insert", "children", "_$className", "addEventListener", "_ref$", "_$use", "_$effect", "_$p", "_$setStyleProperty"]
+}

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

@@ -0,0 +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;AAuC/E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACrG,YAAY;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAiCnD,CAAC"}

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

@@ -1,23 +1,19 @@
+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 { splitProps, Switch, Match } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-solidjs";
-import { useTheme } from "../../providers/ThemeContext";
-import { Icon } from "../display/Icon";
-import { ripple } from "../../directives/ripple";
+import { useTheme } from "../../providers/ThemeContext.js";
+import { Icon } from "../display/Icon.js";
+import { ripple } from "../../directives/ripple.js";
 void ripple;
-const baseClass = clsx(
-  "inline-flex",
-  "items-center",
-  "justify-center",
-  "cursor-pointer",
-  "rounded",
-  "transition-colors",
-  "text-base-500 dark:text-base-400",
-  "hover:bg-base-200 dark:hover:bg-base-700",
-  "focus:outline-none",
-  "focus-visible:ring-2"
-);
+const baseClass = clsx("inline-flex", "items-center", "justify-center", "cursor-pointer", "rounded", "transition-colors", "text-base-500 dark:text-base-400", "hover:bg-base-200 dark:hover:bg-base-700", "focus:outline-none", "focus-visible:ring-2");
 const sizeClasses = {
   sm: clsx("p-1"),
   lg: clsx("p-2")
@@ -33,23 +29,72 @@ const modeLabels = {
 };
 const ThemeToggle = (props) => {
   const [local, rest] = splitProps(props, ["class", "size"]);
-  const { mode, cycleMode } = useTheme();
+  const {
+    mode,
+    cycleMode
+  } = useTheme();
   const getClassName = () => twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
   const iconSize = () => local.size ? iconSizes[local.size] : "1.25em";
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      ...rest,
-      "data-theme-toggle": true,
-      "use:ripple": true,
-      type: "button",
-      class: getClassName(),
-      onClick: cycleMode,
-      title: modeLabels[mode()],
-      "aria-label": modeLabels[mode()]
-    },
-    /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, { when: mode() === "light" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconSun, size: iconSize() })), /* @__PURE__ */ React.createElement(Match, { when: mode() === "system" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconDeviceDesktop, size: iconSize() })), /* @__PURE__ */ React.createElement(Match, { when: mode() === "dark" }, /* @__PURE__ */ React.createElement(Icon, { icon: IconMoon, size: iconSize() })))
-  );
+  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 modeLabels[mode()];
+      },
+      get ["aria-label"]() {
+        return modeLabels[mode()];
+      }
+    }), 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$;
+  })();
 };
 export {
   ThemeToggle

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/components/form-control/ThemeToggle.tsx"],
-  "sourcesContent": ["import { type Component, type JSX, splitProps, Switch, Match } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconSun, IconMoon, IconDeviceDesktop } from \"@tabler/icons-solidjs\";\nimport { useTheme, type ThemeMode } from \"../../providers/ThemeContext\";\nimport { Icon } from \"../display/Icon\";\nimport { ripple } from \"../../directives/ripple\";\n\nvoid ripple;\n\nconst baseClass = clsx(\n  \"inline-flex\",\n  \"items-center\",\n  \"justify-center\",\n  \"cursor-pointer\",\n  \"rounded\",\n  \"transition-colors\",\n  \"text-base-500 dark:text-base-400\",\n  \"hover:bg-base-200 dark:hover:bg-base-700\",\n  \"focus:outline-none\",\n  \"focus-visible:ring-2\",\n);\n\nconst sizeClasses: Record<\"sm\" | \"lg\", string> = {\n  sm: clsx(\"p-1\"),\n  lg: clsx(\"p-2\"),\n};\n\nconst iconSizes: Record<\"sm\" | \"lg\", string> = {\n  sm: \"1em\",\n  lg: \"1.5em\",\n};\n\nconst modeLabels: Record<ThemeMode, string> = {\n  light: \"\uB77C\uC774\uD2B8 \uBAA8\uB4DC\",\n  system: \"\uC2DC\uC2A4\uD15C \uC124\uC815\",\n  dark: \"\uB2E4\uD06C \uBAA8\uB4DC\",\n};\n\nexport interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** \uBC84\uD2BC \uD06C\uAE30 */\n  size?: \"sm\" | \"lg\";\n}\n\n/**\n * \uD14C\uB9C8 \uD1A0\uAE00 \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @remarks\n * - ThemeProvider \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD568\n * - \uD074\uB9AD \uC2DC light \u2192 system \u2192 dark \u2192 light \uC21C\uD658\n * - \uD604\uC7AC \uBAA8\uB4DC\uC5D0 \uB9DE\uB294 \uC544\uC774\uCF58 \uD45C\uC2DC (\u2600\uFE0F / \uD83D\uDCBB / \uD83C\uDF19)\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <ThemeToggle />\n *\n * // \uD06C\uAE30 \uC870\uC808\n * <ThemeToggle size=\"sm\" />\n * <ThemeToggle size=\"lg\" />\n * ```\n */\nexport const ThemeToggle: Component<ThemeToggleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"size\"]);\n\n  const { mode, cycleMode } = useTheme();\n\n  const getClassName = () => twMerge(baseClass, \"p-1.5\", local.size && sizeClasses[local.size], local.class);\n\n  const iconSize = () => (local.size ? iconSizes[local.size] : \"1.25em\");\n\n  return (\n    <button\n      {...rest}\n      data-theme-toggle\n      use:ripple\n      type=\"button\"\n      class={getClassName()}\n      onClick={cycleMode}\n      title={modeLabels[mode()]}\n      aria-label={modeLabels[mode()]}\n    >\n      <Switch>\n        <Match when={mode() === \"light\"}>\n          <Icon icon={IconSun} size={iconSize()} />\n        </Match>\n        <Match when={mode() === \"system\"}>\n          <Icon icon={IconDeviceDesktop} size={iconSize()} />\n        </Match>\n        <Match when={mode() === \"dark\"}>\n          <Icon icon={IconMoon} size={iconSize()} />\n        </Match>\n      </Switch>\n    </button>\n  );\n};\n"],
-  "mappings": "AAAA,SAAmC,YAAY,QAAQ,aAAa;AACpE,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,SAAS,UAAU,yBAAyB;AACrD,SAAS,gBAAgC;AACzC,SAAS,YAAY;AACrB,SAAS,cAAc;AAEvB,KAAK;AAEL,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAA2C;AAAA,EAC/C,IAAI,KAAK,KAAK;AAAA,EACd,IAAI,KAAK,KAAK;AAChB;AAEA,MAAM,YAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAyBO,MAAM,cAA2C,CAAC,UAAU;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,MAAM,CAAC;AAEzD,QAAM,EAAE,MAAM,UAAU,IAAI,SAAS;AAErC,QAAM,eAAe,MAAM,QAAQ,WAAW,SAAS,MAAM,QAAQ,YAAY,MAAM,IAAI,GAAG,MAAM,KAAK;AAEzG,QAAM,WAAW,MAAO,MAAM,OAAO,UAAU,MAAM,IAAI,IAAI;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAiB;AAAA,MACjB,cAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO,aAAa;AAAA,MACpB,SAAS;AAAA,MACT,OAAO,WAAW,KAAK,CAAC;AAAA,MACxB,cAAY,WAAW,KAAK,CAAC;AAAA;AAAA,IAE7B,oCAAC,cACC,oCAAC,SAAM,MAAM,KAAK,MAAM,WACtB,oCAAC,QAAK,MAAM,SAAS,MAAM,SAAS,GAAG,CACzC,GACA,oCAAC,SAAM,MAAM,KAAK,MAAM,YACtB,oCAAC,QAAK,MAAM,mBAAmB,MAAM,SAAS,GAAG,CACnD,GACA,oCAAC,SAAM,MAAM,KAAK,MAAM,UACtB,oCAAC,QAAK,MAAM,UAAU,MAAM,SAAS,GAAG,CAC1C,CACF;AAAA,EACF;AAEJ;",
-  "names": []
+  "mappings": ";;;;;;;AAAA,SAAmCA,YAAYC,QAAQC,aAAa;AACpE,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,SAASC,UAAUC,yBAAyB;AACrD,SAASC,gBAAgC;AACzC,SAASC,YAAY;AACrB,SAASC,cAAc;AAEvB,KAAKA;AAEL,MAAMC,YAAYR,KAChB,eACA,gBACA,kBACA,kBACA,WACA,qBACA,oCACA,4CACA,sBACA,sBACF;AAEA,MAAMS,cAA2C;EAC/CC,IAAIV,KAAK,KAAK;EACdW,IAAIX,KAAK,KAAK;AAChB;AAEA,MAAMY,YAAyC;EAC7CF,IAAI;EACJC,IAAI;AACN;AAEA,MAAME,aAAwC;EAC5CC,OAAO;EACPC,QAAQ;EACRC,MAAM;AACR;AAyBO,MAAMC,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIvB,WAAWqB,OAAO,CAAC,SAAS,MAAM,CAAC;AAEzD,QAAM;IAAEG;IAAMC;EAAU,IAAIjB,SAAS;AAErC,QAAMkB,eAAeA,MAAMtB,QAAQO,WAAW,SAASW,MAAMK,QAAQf,YAAYU,MAAMK,IAAI,GAAGL,MAAMM,KAAK;AAEzG,QAAMC,WAAWA,MAAOP,MAAMK,OAAOZ,UAAUO,MAAMK,IAAI,IAAI;AAE7D,UAAA,MAAA;AAAA,QAAAG,OAAAC,OAAA;AAAAC,UAIQtB,QAAMoB,MAAA,MAAA,IAAA;AAAAG,aAAAH,MAAAI,aAFNX,MAAI;MAAA,qBAAA;MAAA,QAGH;MAAQ,KAAA,OAAA,IAAA;AAAA,eACNG,aAAa;MAAC;MAAA,WACZD;MAAS,IAClBU,QAAK;AAAA,eAAEnB,WAAWQ,KAAK,CAAC;MAAC;MAAA,KAAA,YAAA,IAAA;AAAA,eACbR,WAAWQ,KAAK,CAAC;MAAC;IAAA,CAAA,GAAA,OAAA,IAAA;AAAAY,aAAAN,MAAAO,kBAE7BpC,QAAM;MAAA,IAAAqC,WAAA;AAAA,eAAA,CAAAD,kBACJnC,OAAK;UAAA,IAACqC,OAAI;AAAA,mBAAEf,KAAK,MAAM;UAAO;UAAA,IAAAc,WAAA;AAAA,mBAAAD,kBAC5B5B,MAAI;cAAC+B,MAAMnC;cAAO,IAAEsB,OAAI;AAAA,uBAAEE,SAAS;cAAC;YAAA,CAAA;UAAA;QAAA,CAAA,GAAAQ,kBAEtCnC,OAAK;UAAA,IAACqC,OAAI;AAAA,mBAAEf,KAAK,MAAM;UAAQ;UAAA,IAAAc,WAAA;AAAA,mBAAAD,kBAC7B5B,MAAI;cAAC+B,MAAMjC;cAAiB,IAAEoB,OAAI;AAAA,uBAAEE,SAAS;cAAC;YAAA,CAAA;UAAA;QAAA,CAAA,GAAAQ,kBAEhDnC,OAAK;UAAA,IAACqC,OAAI;AAAA,mBAAEf,KAAK,MAAM;UAAM;UAAA,IAAAc,WAAA;AAAA,mBAAAD,kBAC3B5B,MAAI;cAAC+B,MAAMlC;cAAQ,IAAEqB,OAAI;AAAA,uBAAEE,SAAS;cAAC;YAAA,CAAA;UAAA;QAAA,CAAA,CAAA;MAAA;IAAA,CAAA,CAAA;AAAA,WAAAC;EAAA,GAAA;AAKhD;",
+  "names": ["splitProps", "Switch", "Match", "clsx", "twMerge", "IconSun", "IconMoon", "IconDeviceDesktop", "useTheme", "Icon", "ripple", "baseClass", "sizeClasses", "sm", "lg", "iconSizes", "modeLabels", "light", "system", "dark", "ThemeToggle", "props", "local", "rest", "mode", "cycleMode", "getClassName", "size", "class", "iconSize", "_el$", "_tmpl$", "_$use", "_$spread", "_$mergeProps", "title", "_$insert", "_$createComponent", "children", "when", "icon"]
 }

package/dist/{solid/src/components/form-control/checkbox/Radio.d.ts.map → components/form-control/checkbox/Checkbox.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form-control/checkbox/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAoB,MAAM,UAAU,CAAC;AAK5E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EASlB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,WAAW,UAAU;IACzB,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,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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,KAAK,EAAE,eAAe,CAAC,UAAU,CAsE7C,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,EAAoB,MAAM,UAAU,CAAC;AAM5E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EASlB,MAAM,mBAAmB,CAAC;AAK3B,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,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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,CAsEnD,CAAC"}

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

@@ -1,33 +1,23 @@
+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(`<label><div>`);
 import { Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { IconCheck } from "@tabler/icons-solidjs";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { ripple } from "../../../directives/ripple";
-import { Icon } from "../../display/Icon";
-import {
-  checkboxBaseClass,
-  indicatorBaseClass,
-  themeCheckedClasses,
-  checkboxSizeClasses,
-  checkboxInsetClass,
-  checkboxInsetSizeHeightClasses,
-  checkboxInlineClass,
-  checkboxDisabledClass
-} from "./Checkbox.styles";
+import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
+import { ripple } from "../../../directives/ripple.js";
+import { Icon } from "../../display/Icon.js";
+import { checkboxBaseClass, indicatorBaseClass, themeCheckedClasses, checkboxSizeClasses, checkboxInsetClass, checkboxInsetSizeHeightClasses, checkboxInlineClass, checkboxDisabledClass } from "./Checkbox.styles.js";
 void ripple;
 const Checkbox = (props) => {
-  const [local, rest] = splitProps(props, [
-    "value",
-    "onValueChange",
-    "disabled",
-    "size",
-    "theme",
-    "inset",
-    "inline",
-    "class",
-    "style",
-    "children"
-  ]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "theme", "inset", "inline", "class", "style", "children"]);
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? false,
     onChange: () => local.onValueChange
@@ -42,35 +32,55 @@ const Checkbox = (props) => {
       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 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 = () => {
     const theme = local.theme ?? "primary";
     return twMerge(indicatorBaseClass, "rounded-sm", value() && themeCheckedClasses[theme]);
   };
-  return /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      ...rest,
-      "use:ripple": !local.disabled,
-      role: "checkbox",
-      "aria-checked": value(),
-      tabIndex: local.disabled ? -1 : 0,
-      class: getWrapperClass(),
-      style: local.style,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown
-    },
-    /* @__PURE__ */ React.createElement("div", { class: getIndicatorClass() }, /* @__PURE__ */ React.createElement(Show, { when: value() }, /* @__PURE__ */ React.createElement(Icon, { icon: IconCheck, size: "1em" }))),
-    /* @__PURE__ */ React.createElement(Show, { when: local.children }, /* @__PURE__ */ React.createElement("span", null, local.children))
-  );
+  return (() => {
+    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$;
+  })();
 };
 export {
   Checkbox

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import { type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconCheck } from \"@tabler/icons-solidjs\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { Icon } from \"../../display/Icon\";\nimport {\n  type CheckboxTheme,\n  type CheckboxSize,\n  checkboxBaseClass,\n  indicatorBaseClass,\n  themeCheckedClasses,\n  checkboxSizeClasses,\n  checkboxInsetClass,\n  checkboxInsetSizeHeightClasses,\n  checkboxInlineClass,\n  checkboxDisabledClass,\n} from \"./Checkbox.styles\";\n\n// Directive \uC0AC\uC6A9 \uC120\uC5B8 (TypeScript\uC6A9)\nvoid ripple;\n\nexport interface CheckboxProps {\n  value?: boolean;\n  onValueChange?: (value: boolean) => void;\n  disabled?: boolean;\n  size?: CheckboxSize;\n  theme?: CheckboxTheme;\n  inset?: boolean;\n  inline?: boolean;\n  class?: string;\n  style?: JSX.CSSProperties;\n  children?: JSX.Element;\n}\n\nexport const Checkbox: ParentComponent<CheckboxProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"disabled\",\n    \"size\",\n    \"theme\",\n    \"inset\",\n    \"inline\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? false,\n    onChange: () => local.onValueChange,\n  });\n\n  const handleClick = () => {\n    if (local.disabled) return;\n    setValue((v) => !v);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \") {\n      e.preventDefault();\n      handleClick();\n    }\n  };\n\n  const getWrapperClass = () =>\n    twMerge(\n      checkboxBaseClass,\n      local.size && checkboxSizeClasses[local.size],\n      local.inset && checkboxInsetClass,\n      local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],\n      local.inline && checkboxInlineClass,\n      local.disabled && checkboxDisabledClass,\n      local.class,\n    );\n\n  const getIndicatorClass = () => {\n    const theme = local.theme ?? \"primary\";\n\n    return twMerge(indicatorBaseClass, \"rounded-sm\", value() && themeCheckedClasses[theme]);\n  };\n\n  return (\n    <label\n      {...rest}\n      use:ripple={!local.disabled}\n      role=\"checkbox\"\n      aria-checked={value()}\n      tabIndex={local.disabled ? -1 : 0}\n      class={getWrapperClass()}\n      style={local.style}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      <div class={getIndicatorClass()}>\n        <Show when={value()}>\n          <Icon icon={IconCheck} size=\"1em\" />\n        </Show>\n      </div>\n      <Show when={local.children}>\n        <span>{local.children}</span>\n      </Show>\n    </label>\n  );\n};\n"],
-  "mappings": "AAAA,SAAyC,MAAM,kBAAkB;AACjE,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,gCAAgC;AACzC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,KAAK;AAeE,MAAM,WAA2C,CAAC,UAAU;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS;AAAA,IAC5B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,QAAI,MAAM,SAAU;AACpB,aAAS,CAAC,MAAM,CAAC,CAAC;AAAA,EACpB;AAEA,QAAM,gBAAgB,CAAC,MAAqB;AAC1C,QAAI,EAAE,QAAQ,KAAK;AACjB,QAAE,eAAe;AACjB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,kBAAkB,MACtB;AAAA,IACE;AAAA,IACA,MAAM,QAAQ,oBAAoB,MAAM,IAAI;AAAA,IAC5C,MAAM,SAAS;AAAA,IACf,MAAM,SAAS,MAAM,QAAQ,+BAA+B,MAAM,IAAI;AAAA,IACtE,MAAM,UAAU;AAAA,IAChB,MAAM,YAAY;AAAA,IAClB,MAAM;AAAA,EACR;AAEF,QAAM,oBAAoB,MAAM;AAC9B,UAAM,QAAQ,MAAM,SAAS;AAE7B,WAAO,QAAQ,oBAAoB,cAAc,MAAM,KAAK,oBAAoB,KAAK,CAAC;AAAA,EACxF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,CAAC,MAAM;AAAA,MACnB,MAAK;AAAA,MACL,gBAAc,MAAM;AAAA,MACpB,UAAU,MAAM,WAAW,KAAK;AAAA,MAChC,OAAO,gBAAgB;AAAA,MACvB,OAAO,MAAM;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA;AAAA,IAEX,oCAAC,SAAI,OAAO,kBAAkB,KAC5B,oCAAC,QAAK,MAAM,MAAM,KAChB,oCAAC,QAAK,MAAM,WAAW,MAAK,OAAM,CACpC,CACF;AAAA,IACA,oCAAC,QAAK,MAAM,MAAM,YAChB,oCAAC,cAAM,MAAM,QAAS,CACxB;AAAA,EACF;AAEJ;",
-  "names": []
+  "mappings": ";;;;;;;;;;AAAA,SAAyCA,MAAMC,kBAAkB;AACjE,SAASC,eAAe;AACxB,SAASC,iBAAiB;AAC1B,SAASC,gCAAgC;AACzC,SAASC,cAAc;AACvB,SAASC,YAAY;AACrB,SAGEC,mBACAC,oBACAC,qBACAC,qBACAC,oBACAC,gCACAC,qBACAC,6BACK;AAGP,KAAKT;AAeE,MAAMU,WAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIjB,WAAWe,OAAO,CACtC,SACA,iBACA,YACA,QACA,SACA,SACA,UACA,SACA,SACA,UAAU,CACX;AAED,QAAM,CAACG,OAAOC,QAAQ,IAAIhB,yBAAyB;IACjDe,OAAOA,MAAMF,MAAME,SAAS;IAC5BE,UAAUA,MAAMJ,MAAMK;EACxB,CAAC;AAED,QAAMC,cAAcA,MAAM;AACxB,QAAIN,MAAMO,SAAU;AACpBJ,aAAUK,OAAM,CAACA,CAAC;EACpB;AAEA,QAAMC,gBAAiBC,OAAqB;AAC1C,QAAIA,EAAEC,QAAQ,KAAK;AACjBD,QAAEE,eAAe;AACjBN,kBAAY;IACd;EACF;AAEA,QAAMO,kBAAkBA,MACtB5B,QACEK,mBACAU,MAAMc,QAAQrB,oBAAoBO,MAAMc,IAAI,GAC5Cd,MAAMe,SAASrB,oBACfM,MAAMe,SAASf,MAAMc,QAAQnB,+BAA+BK,MAAMc,IAAI,GACtEd,MAAMgB,UAAUpB,qBAChBI,MAAMO,YAAYV,uBAClBG,MAAMiB,KACR;AAEF,QAAMC,oBAAoBA,MAAM;AAC9B,UAAMC,QAAQnB,MAAMmB,SAAS;AAE7B,WAAOlC,QAAQM,oBAAoB,cAAcW,MAAM,KAAKV,oBAAoB2B,KAAK,CAAC;EACxF;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG;AAAAC,UAGQpC,QAAMgC,MAAA,MAAE,CAACpB,MAAMO,QAAQ;AAAAkB,aAAAL,MAAAM,aADvBzB,MAAI;MAAA,QAEH;MAAU,KAAA,cAAA,IAAA;AAAA,eACDC,MAAM;MAAC;MAAA,IACrByB,WAAQ;AAAA,eAAE3B,MAAMO,WAAW,KAAK;MAAC;MAAA,KAAA,OAAA,IAAA;AAAA,eAC1BM,gBAAgB;MAAC;MAAA,IACxBe,QAAK;AAAA,eAAE5B,MAAM4B;MAAK;MAAA,WACTtB;MAAW,aACTG;IAAa,CAAA,GAAA,OAAA,IAAA;AAAAoB,aAAAP,OAAAQ,kBAGrB/C,MAAI;MAAA,IAACgD,OAAI;AAAA,eAAE7B,MAAM;MAAC;MAAA,IAAA8B,WAAA;AAAA,eAAAF,kBAChBzC,MAAI;UAAC4C,MAAM/C;UAAW4B,MAAI;QAAA,CAAA;MAAA;IAAA,CAAA,CAAA;AAAAe,aAAAT,MAAAU,kBAG9B/C,MAAI;MAAA,IAACgD,OAAI;AAAA,eAAE/B,MAAMgC;MAAQ;MAAA,IAAAA,WAAA;AAAA,YAAAE,QAAAC,OAAA;AAAAN,iBAAAK,OAAA,MACjBlC,MAAMgC,QAAQ;AAAA,eAAAE;MAAA;IAAA,CAAA,GAAA,IAAA;AAAAE,aAAA,MAAAC,YAAAf,OANXJ,kBAAkB,CAAC,CAAA;AAAA,WAAAE;EAAA,GAAA;AAUrC;",
+  "names": ["Show", "splitProps", "twMerge", "IconCheck", "createControllableSignal", "ripple", "Icon", "checkboxBaseClass", "indicatorBaseClass", "themeCheckedClasses", "checkboxSizeClasses", "checkboxInsetClass", "checkboxInsetSizeHeightClasses", "checkboxInlineClass", "checkboxDisabledClass", "Checkbox", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleClick", "disabled", "v", "handleKeyDown", "e", "key", "preventDefault", "getWrapperClass", "size", "inset", "inline", "class", "getIndicatorClass", "theme", "_el$", "_tmpl$2", "_el$2", "firstChild", "_$use", "_$spread", "_$mergeProps", "tabIndex", "style", "_$insert", "_$createComponent", "when", "children", "icon", "_el$3", "_tmpl$", "_$effect", "_$className"]
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAInB,MAAM,+BAA+B,CAAC;AAGvC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClF,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC;AAGzC,eAAO,MAAM,iBAAiB,QAU7B,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAO9B,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAM7D,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAG5D,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAAwF,CAAC;AAGxH,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAGvE,CAAC;AAGF,eAAO,MAAM,mBAAmB,QAAmC,CAAC;AAGpE,eAAO,MAAM,qBAAqB,kDAAkB,CAAC"}

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

@@ -5,8 +5,8 @@ import {
   disabledOpacity,
   paddingLg,
   paddingSm
-} from "../../../styles/tokens.styles";
-import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles";
+} from "../../../styles/tokens.styles.js";
+import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles.js";
 const checkboxBaseClass = clsx(
   "inline-flex items-center gap-2",
   "whitespace-nowrap",

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/Checkbox.styles.ts"],
-  "sourcesContent": ["import clsx from \"clsx\";\nimport {\n  bgSurface,\n  borderDefault,\n  type ComponentSize,\n  disabledOpacity,\n  paddingLg,\n  paddingSm,\n} from \"../../../styles/tokens.styles\";\nimport { insetBase, insetFocusOutlineSelf } from \"../../../styles/patterns.styles\";\n\nexport type CheckboxTheme = \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\";\nexport type CheckboxSize = ComponentSize;\n\n// wrapper \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\nexport const checkboxBaseClass = clsx(\n  \"inline-flex items-center gap-2\",\n  \"whitespace-nowrap\",\n  \"cursor-pointer\",\n  \"px-2 py-1\",\n  \"h-field\",\n  \"border border-transparent\",\n  \"rounded\",\n  \"focus:outline-none\",\n  \"focus-visible:ring-2\",\n);\n\n// \uC778\uB514\uCF00\uC774\uD130 \uAE30\uBCF8 \uC2A4\uD0C0\uC77C\nexport const indicatorBaseClass = clsx(\n  \"flex shrink-0 items-center justify-center\",\n  \"size-4\",\n  \"border\",\n  borderDefault,\n  bgSurface,\n  \"transition-colors\",\n);\n\n// \uD14C\uB9C8\uBCC4 \uCCB4\uD06C \uC0C1\uD0DC\nexport const themeCheckedClasses: Record<CheckboxTheme, string> = {\n  primary: clsx(\"border-primary-500 bg-primary-500\", \"text-white\"),\n  info: clsx(\"border-info-500 bg-info-500\", \"text-white\"),\n  success: clsx(\"border-success-500 bg-success-500\", \"text-white\"),\n  warning: clsx(\"border-warning-500 bg-warning-500\", \"text-white\"),\n  danger: clsx(\"border-danger-500 bg-danger-500\", \"text-white\"),\n};\n\n// \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nexport const checkboxSizeClasses: Record<CheckboxSize, string> = {\n  sm: clsx(\"h-field-sm\", paddingSm),\n  lg: clsx(\"h-field-lg\", paddingLg),\n};\n\n// inset \uC2A4\uD0C0\uC77C\nexport const checkboxInsetClass = clsx(\"h-field-inset justify-center bg-transparent\", insetBase, insetFocusOutlineSelf);\n\n// inset \uC0AC\uC774\uC988\uBCC4 \uB192\uC774 (border 2px \uC81C\uC678)\nexport const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {\n  sm: \"h-field-inset-sm\",\n  lg: \"h-field-inset-lg\",\n};\n\n// inline \uC2A4\uD0C0\uC77C\nexport const checkboxInlineClass = clsx(\"!h-auto\", \"!p-0\", \"gap-1\");\n\n// disabled \uC2A4\uD0C0\uC77C\nexport const checkboxDisabledClass = disabledOpacity;\n"],
   "mappings": "AAAA,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,6BAA6B;AAM1C,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,EACA;AAAA,EACA;AACF;AAGO,MAAM,sBAAqD;AAAA,EAChE,SAAS,KAAK,qCAAqC,YAAY;AAAA,EAC/D,MAAM,KAAK,+BAA+B,YAAY;AAAA,EACtD,SAAS,KAAK,qCAAqC,YAAY;AAAA,EAC/D,SAAS,KAAK,qCAAqC,YAAY;AAAA,EAC/D,QAAQ,KAAK,mCAAmC,YAAY;AAC9D;AAGO,MAAM,sBAAoD;AAAA,EAC/D,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAClC;AAGO,MAAM,qBAAqB,KAAK,+CAA+C,WAAW,qBAAqB;AAG/G,MAAM,iCAA+D;AAAA,EAC1E,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,sBAAsB,KAAK,WAAW,QAAQ,OAAO;AAG3D,MAAM,wBAAwB;",
   "names": []
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA+D,MAAM,UAAU,CAAC;AAIjG,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgBrE,UAAU,sBAAsB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,iBAAS,sBAAsB,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,eAmBlE;AAID,UAAU,kBAAkB,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,UAAU,sBAAsB;IAC9B,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IACzD,IAAI,EAAE,OAAO,sBAAsB,CAAC;CACrC;AAiDD,eAAO,MAAM,aAAa,EAAoC,sBAAsB,CAAC"}

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

@@ -1,39 +1,46 @@
+import { template as _$template } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div>`);
 import { createContext, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { Checkbox } from "./Checkbox";
+import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
+import { Checkbox } from "./Checkbox.js";
 const CheckboxGroupContext = createContext();
 function CheckboxGroupItemInner(props) {
   const ctx = useContext(CheckboxGroupContext);
   if (!ctx) throw new Error("CheckboxGroup.Item\uC740 CheckboxGroup \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
   const isSelected = () => ctx.value().includes(props.value);
-  return /* @__PURE__ */ React.createElement(
-    Checkbox,
-    {
-      value: isSelected(),
-      onValueChange: () => ctx.toggle(props.value),
-      disabled: props.disabled ?? ctx.disabled(),
-      size: ctx.size(),
-      theme: ctx.theme(),
-      inline: ctx.inline(),
-      inset: ctx.inset()
+  return _$createComponent(Checkbox, {
+    get value() {
+      return isSelected();
     },
-    props.children
-  );
+    onValueChange: () => ctx.toggle(props.value),
+    get disabled() {
+      return props.disabled ?? ctx.disabled();
+    },
+    get size() {
+      return ctx.size();
+    },
+    get theme() {
+      return ctx.theme();
+    },
+    get inline() {
+      return ctx.inline();
+    },
+    get inset() {
+      return ctx.inset();
+    },
+    get children() {
+      return props.children;
+    }
+  });
 }
 const CheckboxGroupInner = (props) => {
-  const [local, rest] = splitProps(props, [
-    "value",
-    "onValueChange",
-    "disabled",
-    "size",
-    "theme",
-    "inline",
-    "inset",
-    "class",
-    "style",
-    "children"
-  ]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "theme", "inline", "inset", "class", "style", "children"]);
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? [],
     onChange: () => local.onValueChange
@@ -55,7 +62,22 @@ const CheckboxGroupInner = (props) => {
     inline: () => local.inline ?? false,
     inset: () => local.inset ?? false
   };
-  return /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", { ...rest, class: twMerge("inline-flex", local.class), style: local.style }, local.children));
+  return _$createComponent(CheckboxGroupContext.Provider, {
+    value: contextValue,
+    get children() {
+      var _el$ = _tmpl$();
+      _$spread(_el$, _$mergeProps(rest, {
+        get ["class"]() {
+          return twMerge("inline-flex", local.class);
+        },
+        get style() {
+          return local.style;
+        }
+      }), false, true);
+      _$insert(_el$, () => local.children);
+      return _el$;
+    }
+  });
 };
 const CheckboxGroup = CheckboxGroupInner;
 CheckboxGroup.Item = CheckboxGroupItemInner;

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

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/CheckboxGroup.tsx"],
-  "sourcesContent": ["import { type JSX, type ParentComponent, createContext, splitProps, useContext } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { Checkbox } from \"./Checkbox\";\nimport type { CheckboxSize, CheckboxTheme } from \"./Checkbox.styles\";\n\ninterface CheckboxGroupContextValue<T> {\n  value: () => T[];\n  toggle: (item: T) => void;\n  disabled: () => boolean;\n  size: () => CheckboxSize | undefined;\n  theme: () => CheckboxTheme | undefined;\n  inline: () => boolean;\n  inset: () => boolean;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue<any>>();\n\n// --- CheckboxGroup.Item ---\n\ninterface CheckboxGroupItemProps<T> {\n  value: T;\n  disabled?: boolean;\n  children?: JSX.Element;\n}\n\nfunction CheckboxGroupItemInner<T>(props: CheckboxGroupItemProps<T>) {\n  const ctx = useContext(CheckboxGroupContext);\n  if (!ctx) throw new Error(\"CheckboxGroup.Item\uC740 CheckboxGroup \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n\n  const isSelected = () => ctx.value().includes(props.value);\n\n  return (\n    <Checkbox\n      value={isSelected()}\n      onValueChange={() => ctx.toggle(props.value)}\n      disabled={props.disabled ?? ctx.disabled()}\n      size={ctx.size()}\n      theme={ctx.theme()}\n      inline={ctx.inline()}\n      inset={ctx.inset()}\n    >\n      {props.children}\n    </Checkbox>\n  );\n}\n\n// --- CheckboxGroup ---\n\ninterface CheckboxGroupProps<T> {\n  value?: T[];\n  onValueChange?: (value: T[]) => void;\n  disabled?: boolean;\n  size?: CheckboxSize;\n  theme?: CheckboxTheme;\n  inline?: boolean;\n  inset?: boolean;\n  class?: string;\n  style?: JSX.CSSProperties;\n  children?: JSX.Element;\n}\n\ninterface CheckboxGroupComponent {\n  <T = unknown>(props: CheckboxGroupProps<T>): JSX.Element;\n  Item: typeof CheckboxGroupItemInner;\n}\n\nconst CheckboxGroupInner: ParentComponent<CheckboxGroupProps<unknown>> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"disabled\",\n    \"size\",\n    \"theme\",\n    \"inline\",\n    \"inset\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? [],\n    onChange: () => local.onValueChange,\n  });\n\n  const toggle = (item: unknown) => {\n    setValue((prev) => {\n      if (prev.includes(item)) {\n        return prev.filter((v) => v !== item);\n      }\n      return [...prev, item];\n    });\n  };\n\n  const contextValue: CheckboxGroupContextValue<unknown> = {\n    value,\n    toggle,\n    disabled: () => local.disabled ?? false,\n    size: () => local.size,\n    theme: () => local.theme,\n    inline: () => local.inline ?? false,\n    inset: () => local.inset ?? false,\n  };\n\n  return (\n    <CheckboxGroupContext.Provider value={contextValue}>\n      <div {...rest} class={twMerge(\"inline-flex\", local.class)} style={local.style}>\n        {local.children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  );\n};\n\nexport const CheckboxGroup = CheckboxGroupInner as unknown as CheckboxGroupComponent;\nCheckboxGroup.Item = CheckboxGroupItemInner;\n"],
-  "mappings": "AAAA,SAAyC,eAAe,YAAY,kBAAkB;AACtF,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,gBAAgB;AAazB,MAAM,uBAAuB,cAA8C;AAU3E,SAAS,uBAA0B,OAAkC;AACnE,QAAM,MAAM,WAAW,oBAAoB;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,0HAAoD;AAE9E,QAAM,aAAa,MAAM,IAAI,MAAM,EAAE,SAAS,MAAM,KAAK;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,WAAW;AAAA,MAClB,eAAe,MAAM,IAAI,OAAO,MAAM,KAAK;AAAA,MAC3C,UAAU,MAAM,YAAY,IAAI,SAAS;AAAA,MACzC,MAAM,IAAI,KAAK;AAAA,MACf,OAAO,IAAI,MAAM;AAAA,MACjB,QAAQ,IAAI,OAAO;AAAA,MACnB,OAAO,IAAI,MAAM;AAAA;AAAA,IAEhB,MAAM;AAAA,EACT;AAEJ;AAsBA,MAAM,qBAAmE,CAAC,UAAU;AAClF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS,CAAC;AAAA,IAC7B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,SAAS,CAAC,SAAkB;AAChC,aAAS,CAAC,SAAS;AACjB,UAAI,KAAK,SAAS,IAAI,GAAG;AACvB,eAAO,KAAK,OAAO,CAAC,MAAM,MAAM,IAAI;AAAA,MACtC;AACA,aAAO,CAAC,GAAG,MAAM,IAAI;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,QAAM,eAAmD;AAAA,IACvD;AAAA,IACA;AAAA,IACA,UAAU,MAAM,MAAM,YAAY;AAAA,IAClC,MAAM,MAAM,MAAM;AAAA,IAClB,OAAO,MAAM,MAAM;AAAA,IACnB,QAAQ,MAAM,MAAM,UAAU;AAAA,IAC9B,OAAO,MAAM,MAAM,SAAS;AAAA,EAC9B;AAEA,SACE,oCAAC,qBAAqB,UAArB,EAA8B,OAAO,gBACpC,oCAAC,SAAK,GAAG,MAAM,OAAO,QAAQ,eAAe,MAAM,KAAK,GAAG,OAAO,MAAM,SACrE,MAAM,QACT,CACF;AAEJ;AAEO,MAAM,gBAAgB;AAC7B,cAAc,OAAO;",
-  "names": []
+  "mappings": ";;;;;;;AAAA,SAAyCA,eAAeC,YAAYC,kBAAkB;AACtF,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,gBAAgB;AAazB,MAAMC,uBAAuBN,cAA8C;AAU3E,SAASO,uBAA0BC,OAAkC;AACnE,QAAMC,MAAMP,WAAWI,oBAAoB;AAC3C,MAAI,CAACG,IAAK,OAAM,IAAIC,MAAM,0HAAoD;AAE9E,QAAMC,aAAaA,MAAMF,IAAIG,MAAM,EAAEC,SAASL,MAAMI,KAAK;AAEzD,SAAAE,kBACGT,UAAQ;IAAA,IACPO,QAAK;AAAA,aAAED,WAAW;IAAC;IACnBI,eAAeA,MAAMN,IAAIO,OAAOR,MAAMI,KAAK;IAAC,IAC5CK,WAAQ;AAAA,aAAET,MAAMS,YAAYR,IAAIQ,SAAS;IAAC;IAAA,IAC1CC,OAAI;AAAA,aAAET,IAAIS,KAAK;IAAC;IAAA,IAChBC,QAAK;AAAA,aAAEV,IAAIU,MAAM;IAAC;IAAA,IAClBC,SAAM;AAAA,aAAEX,IAAIW,OAAO;IAAC;IAAA,IACpBC,QAAK;AAAA,aAAEZ,IAAIY,MAAM;IAAC;IAAA,IAAAC,WAAA;AAAA,aAEjBd,MAAMc;IAAQ;EAAA,CAAA;AAGrB;AAsBA,MAAMC,qBAAoEf,WAAU;AAClF,QAAM,CAACgB,OAAOC,IAAI,IAAIxB,WAAWO,OAAO,CACtC,SACA,iBACA,YACA,QACA,SACA,UACA,SACA,SACA,SACA,UAAU,CACX;AAED,QAAM,CAACI,OAAOc,QAAQ,IAAItB,yBAAyB;IACjDQ,OAAOA,MAAMY,MAAMZ,SAAS,CAAA;IAC5Be,UAAUA,MAAMH,MAAMT;EACxB,CAAC;AAED,QAAMC,SAAUY,UAAkB;AAChCF,aAAUG,UAAS;AACjB,UAAIA,KAAKhB,SAASe,IAAI,GAAG;AACvB,eAAOC,KAAKC,OAAQC,OAAMA,MAAMH,IAAI;MACtC;AACA,aAAO,CAAC,GAAGC,MAAMD,IAAI;IACvB,CAAC;EACH;AAEA,QAAMI,eAAmD;IACvDpB;IACAI;IACAC,UAAUA,MAAMO,MAAMP,YAAY;IAClCC,MAAMA,MAAMM,MAAMN;IAClBC,OAAOA,MAAMK,MAAML;IACnBC,QAAQA,MAAMI,MAAMJ,UAAU;IAC9BC,OAAOA,MAAMG,MAAMH,SAAS;EAC9B;AAEA,SAAAP,kBACGR,qBAAqB2B,UAAQ;IAACrB,OAAOoB;IAAY,IAAAV,WAAA;AAAA,UAAAY,OAAAC,OAAA;AAAAC,eAAAF,MAAAG,aACvCZ,MAAI;QAAA,KAAA,OAAA,IAAA;AAAA,iBAAStB,QAAQ,eAAeqB,MAAMc,KAAK;QAAC;QAAA,IAAEC,QAAK;AAAA,iBAAEf,MAAMe;QAAK;MAAA,CAAA,GAAA,OAAA,IAAA;AAAAC,eAAAN,MAAA,MAC1EV,MAAMF,QAAQ;AAAA,aAAAY;IAAA;EAAA,CAAA;AAIvB;AAEO,MAAMO,gBAAgBlB;AAC7BkB,cAAcC,OAAOnC;",
+  "names": ["createContext", "splitProps", "useContext", "twMerge", "createControllableSignal", "Checkbox", "CheckboxGroupContext", "CheckboxGroupItemInner", "props", "ctx", "Error", "isSelected", "value", "includes", "_$createComponent", "onValueChange", "toggle", "disabled", "size", "theme", "inline", "inset", "children", "CheckboxGroupInner", "local", "rest", "setValue", "onChange", "item", "prev", "filter", "v", "contextValue", "Provider", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "class", "style", "_$insert", "CheckboxGroup", "Item"]
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/checkbox/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAoB,MAAM,UAAU,CAAC;AAK5E,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EASlB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,WAAW,UAAU;IACzB,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,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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,KAAK,EAAE,eAAe,CAAC,UAAU,CAsE7C,CAAC"}