@simplysm/solid 13.0.28 → 13.0.30

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

@@ -1,86 +1,14 @@
-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.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 _$createComponent(Checkbox, {
-    get value() {
-      return isSelected();
-    },
-    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 [value, setValue] = createControllableSignal({
-    value: () => local.value ?? [],
-    onChange: () => local.onValueChange
-  });
-  const toggle = (item) => {
-    setValue((prev) => {
-      if (prev.includes(item)) {
-        return prev.filter((v) => v !== item);
-      }
-      return [...prev, item];
-    });
-  };
-  const contextValue = {
-    value,
-    toggle,
-    disabled: () => local.disabled ?? false,
-    size: () => local.size,
-    theme: () => local.theme,
-    inline: () => local.inline ?? false,
-    inset: () => local.inset ?? false
-  };
-  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;
+import { createSelectionGroup } from "../../../hooks/createSelectionGroup.js";
+const {
+  Group
+} = createSelectionGroup({
+  mode: "multiple",
+  contextName: "CheckboxGroup",
+  ItemComponent: Checkbox,
+  emptyErrorMsg: "\uD56D\uBAA9\uC744 \uC120\uD0DD\uD574 \uC8FC\uC138\uC694"
+});
+const CheckboxGroup = Group;
 export {
   CheckboxGroup
 };

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/CheckboxGroup.tsx"],
-  "mappings": ";;;;;;;AAAA,SAAyCA,eAAeC,YAAYC,kBAAkB;AACtF,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,gBAAgB;AAazB,MAAMC,uBAAuBN,cAA8C;AAU3E,SAASO,uBAA+BC,OAAuC;AAC7E,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"]
+  "mappings": "AACA,SAASA,gBAAgB;AACzB,SAASC,4BAA4B;AA2BrC,MAAM;EAAEC;AAAM,IAAID,qBAAqB;EACrCE,MAAM;EACNC,aAAa;EACbC,eAAeL;EACfM,eAAe;AACjB,CAAC;AAEM,MAAMC,gBAAgBL;",
+  "names": ["Checkbox", "createSelectionGroup", "Group", "mode", "contextName", "ItemComponent", "emptyErrorMsg", "CheckboxGroup"]
 }

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

@@ -1,13 +1,15 @@
 import { type JSX, type ParentComponent } from "solid-js";
-import { type CheckboxTheme, type CheckboxSize } from "./Checkbox.styles";
+import { type CheckboxSize } from "./Checkbox.styles";
 export interface RadioProps {
     value?: boolean;
     onValueChange?: (value: boolean) => void;
     disabled?: boolean;
     size?: CheckboxSize;
-    theme?: CheckboxTheme;
     inset?: boolean;
     inline?: boolean;
+    required?: boolean;
+    validate?: (value: boolean) => string | undefined;
+    touchMode?: boolean;
     class?: string;
     style?: JSX.CSSProperties;
     children?: JSX.Element;

package/dist/components/form-control/checkbox/Radio.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":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/checkbox/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAgC,MAAM,UAAU,CAAC;AAKxF,OAAO,EACL,KAAK,YAAY,EASlB,MAAM,mBAAmB,CAAC;AAQ3B,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,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,KAAK,EAAE,eAAe,CAAC,UAAU,CA+E7C,CAAC"}

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

@@ -7,17 +7,18 @@ 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(`<div>`), _tmpl$2 = /* @__PURE__ */ _$template(`<span>`), _tmpl$3 = /* @__PURE__ */ _$template(`<label><div>`);
-import { Show, splitProps } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div>`), _tmpl$2 = /* @__PURE__ */ _$template(`<span>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div class=inline-flex><label><div>`);
+import { Show, splitProps, createMemo } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
 import { ripple } from "../../../directives/ripple.js";
 import clsx from "clsx";
-import { checkboxBaseClass, indicatorBaseClass, themeCheckedClasses, checkboxSizeClasses, checkboxInsetClass, checkboxInsetSizeHeightClasses, checkboxInlineClass, checkboxDisabledClass } from "./Checkbox.styles.js";
+import { checkboxBaseClass, indicatorBaseClass, checkedClass, checkboxSizeClasses, checkboxInsetClass, checkboxInsetSizeHeightClasses, checkboxInlineClass, checkboxDisabledClass } from "./Checkbox.styles.js";
+import { Invalid } from "../Invalid.js";
 const radioDotClass = clsx("size-2", "rounded-full", "bg-current");
 void ripple;
 const Radio = (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", "inset", "inline", "required", "validate", "touchMode", "class", "style", "children"]);
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? false,
     onChange: () => local.onValueChange
@@ -33,53 +34,65 @@ const Radio = (props) => {
     }
   };
   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-full", value() && themeCheckedClasses[theme]);
-  };
-  return (() => {
-    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild;
-    _$use(ripple, _el$, () => !local.disabled);
-    _$spread(_el$, _$mergeProps(rest, {
-      "role": "radio",
-      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() {
-        var _el$3 = _tmpl$();
-        _$className(_el$3, radioDotClass);
-        return _el$3;
-      }
-    }));
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return local.children;
-      },
-      get children() {
-        var _el$4 = _tmpl$2();
-        _$insert(_el$4, () => local.children);
-        return _el$4;
-      }
-    }), null);
-    _$effect(() => _$className(_el$2, getIndicatorClass()));
-    return _el$;
-  })();
+  const getIndicatorClass = () => twMerge(indicatorBaseClass, "rounded-full", value() && checkedClass);
+  const errorMsg = createMemo(() => {
+    var _a;
+    const v = local.value ?? false;
+    if (local.required && !v) return "\uD544\uC218 \uC120\uD0DD \uD56D\uBAA9\uC785\uB2C8\uB2E4";
+    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$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+      _$use(ripple, _el$2, () => !local.disabled);
+      _$spread(_el$2, _$mergeProps(rest, {
+        "role": "radio",
+        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$3, _$createComponent(Show, {
+        get when() {
+          return value();
+        },
+        get children() {
+          var _el$4 = _tmpl$();
+          _$className(_el$4, radioDotClass);
+          return _el$4;
+        }
+      }));
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return local.children;
+        },
+        get children() {
+          var _el$5 = _tmpl$2();
+          _$insert(_el$5, () => local.children);
+          return _el$5;
+        }
+      }), null);
+      _$effect(() => _$className(_el$3, getIndicatorClass()));
+      return _el$;
+    }
+  });
 };
 export {
   Radio

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/Radio.tsx"],
-  "mappings": ";;;;;;;;;;AAAA,SAAyCA,MAAMC,kBAAkB;AACjE,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,cAAc;AACvB,OAAOC,UAAU;AACjB,SAGEC,mBACAC,oBACAC,qBACAC,qBACAC,oBACAC,gCACAC,qBACAC,6BACK;AAEP,MAAMC,gBAAgBT,KAAK,UAAU,gBAAgB,YAAY;AAGjE,KAAKD;AAeE,MAAMW,QAAsCC,WAAU;AAC3D,QAAM,CAACC,OAAOC,IAAI,IAAIjB,WAAWe,OAAO,CACtC,SACA,iBACA,YACA,QACA,SACA,SACA,UACA,SACA,SACA,UAAU,CACX;AAED,QAAM,CAACG,OAAOC,QAAQ,IAAIjB,yBAAyB;IACjDgB,OAAOA,MAAMF,MAAME,SAAS;IAC5BE,UAAUA,MAAMJ,MAAMK;EACxB,CAAC;AAED,QAAMC,cAAcA,MAAM;AACxB,QAAIN,MAAMO,SAAU;AACpBJ,aAAS,IAAI;EACf;AAEA,QAAMK,gBAAiBC,OAAqB;AAC1C,QAAIA,EAAEC,QAAQ,KAAK;AACjBD,QAAEE,eAAe;AACjBL,kBAAY;IACd;EACF;AAEA,QAAMM,kBAAkBA,MACtB3B,QACEI,mBACAW,MAAMa,QAAQrB,oBAAoBQ,MAAMa,IAAI,GAC5Cb,MAAMc,SAASrB,oBACfO,MAAMc,SAASd,MAAMa,QAAQnB,+BAA+BM,MAAMa,IAAI,GACtEb,MAAMe,UAAUpB,qBAChBK,MAAMO,YAAYX,uBAClBI,MAAMgB,KACR;AAEF,QAAMC,oBAAoBA,MAAM;AAC9B,UAAMC,QAAQlB,MAAMkB,SAAS;AAE7B,WAAOjC,QAAQK,oBAAoB,gBAAgBY,MAAM,KAAKX,oBAAoB2B,KAAK,CAAC;EAC1F;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,QAAA,GAAAC,QAAAF,KAAAG;AAAAC,UAGQpC,QAAMgC,MAAA,MAAE,CAACnB,MAAMO,QAAQ;AAAAiB,aAAAL,MAAAM,aADvBxB,MAAI;MAAA,QAEH;MAAO,KAAA,cAAA,IAAA;AAAA,eACEC,MAAM;MAAC;MAAA,IACrBwB,WAAQ;AAAA,eAAE1B,MAAMO,WAAW,KAAK;MAAC;MAAA,KAAA,OAAA,IAAA;AAAA,eAC1BK,gBAAgB;MAAC;MAAA,IACxBe,QAAK;AAAA,eAAE3B,MAAM2B;MAAK;MAAA,WACTrB;MAAW,aACTE;IAAa,CAAA,GAAA,OAAA,IAAA;AAAAoB,aAAAP,OAAAQ,kBAGrB9C,MAAI;MAAA,IAAC+C,OAAI;AAAA,eAAE5B,MAAM;MAAC;MAAA,IAAA6B,WAAA;AAAA,YAAAC,QAAAC,OAAA;AAAAC,oBAAAF,OACLnC,aAAa;AAAA,eAAAmC;MAAA;IAAA,CAAA,CAAA;AAAAJ,aAAAT,MAAAU,kBAG5B9C,MAAI;MAAA,IAAC+C,OAAI;AAAA,eAAE9B,MAAM+B;MAAQ;MAAA,IAAAA,WAAA;AAAA,YAAAI,QAAAC,QAAA;AAAAR,iBAAAO,OAAA,MACjBnC,MAAM+B,QAAQ;AAAA,eAAAI;MAAA;IAAA,CAAA,GAAA,IAAA;AAAAE,aAAA,MAAAH,YAAAb,OANXJ,kBAAkB,CAAC,CAAA;AAAA,WAAAE;EAAA,GAAA;AAUrC;",
-  "names": ["Show", "splitProps", "twMerge", "createControllableSignal", "ripple", "clsx", "checkboxBaseClass", "indicatorBaseClass", "themeCheckedClasses", "checkboxSizeClasses", "checkboxInsetClass", "checkboxInsetSizeHeightClasses", "checkboxInlineClass", "checkboxDisabledClass", "radioDotClass", "Radio", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleClick", "disabled", "handleKeyDown", "e", "key", "preventDefault", "getWrapperClass", "size", "inset", "inline", "class", "getIndicatorClass", "theme", "_el$", "_tmpl$3", "_el$2", "firstChild", "_$use", "_$spread", "_$mergeProps", "tabIndex", "style", "_$insert", "_$createComponent", "when", "children", "_el$3", "_tmpl$", "_$className", "_el$4", "_tmpl$2", "_$effect"]
+  "mappings": "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",
+  "names": ["Show", "splitProps", "createMemo", "twMerge", "createControllableSignal", "ripple", "clsx", "checkboxBaseClass", "indicatorBaseClass", "checkedClass", "checkboxSizeClasses", "checkboxInsetClass", "checkboxInsetSizeHeightClasses", "checkboxInlineClass", "checkboxDisabledClass", "Invalid", "radioDotClass", "Radio", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleClick", "disabled", "handleKeyDown", "e", "key", "preventDefault", "getWrapperClass", "size", "inset", "inline", "class", "getIndicatorClass", "errorMsg", "v", "required", "validate", "_$createComponent", "message", "variant", "touchMode", "children", "_el$", "_tmpl$3", "_el$2", "firstChild", "_el$3", "_$use", "_$spread", "_$mergeProps", "tabIndex", "style", "_$insert", "when", "_el$4", "_tmpl$", "_$className", "_el$5", "_tmpl$2", "_$effect"]
 }

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

@@ -1,26 +1,26 @@
 import { type JSX } from "solid-js";
-import type { CheckboxSize, CheckboxTheme } from "./Checkbox.styles";
-interface RadioGroupItemProps<TValue> {
-    value: TValue;
-    disabled?: boolean;
-    children?: JSX.Element;
-}
-declare function RadioGroupItemInner<TValue>(props: RadioGroupItemProps<TValue>): JSX.Element;
+import type { CheckboxSize } from "./Checkbox.styles";
 interface RadioGroupProps<TValue> {
     value?: TValue;
     onValueChange?: (value: TValue) => void;
     disabled?: boolean;
     size?: CheckboxSize;
-    theme?: CheckboxTheme;
     inline?: boolean;
     inset?: boolean;
+    required?: boolean;
+    validate?: (value: TValue | undefined) => string | undefined;
+    touchMode?: boolean;
     class?: string;
     style?: JSX.CSSProperties;
     children?: JSX.Element;
 }
 interface RadioGroupComponent {
     <TValue = unknown>(props: RadioGroupProps<TValue>): JSX.Element;
-    Item: typeof RadioGroupItemInner;
+    Item: <TValue = unknown>(props: {
+        value: TValue;
+        disabled?: boolean;
+        children?: JSX.Element;
+    }) => JSX.Element;
 }
 export declare const RadioGroup: RadioGroupComponent;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/checkbox/RadioGroup.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,mBAAmB,CAAC,MAAM;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,iBAAS,mBAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,mBAAmB,CAAC,MAAM,CAAC,eAmBtE;AAID,UAAU,eAAe,CAAC,MAAM;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,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,mBAAmB;IAC3B,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IAChE,IAAI,EAAE,OAAO,mBAAmB,CAAC;CAClC;AA4CD,eAAO,MAAM,UAAU,EAAiC,mBAAmB,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/checkbox/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,UAAU,eAAe,CAAC,MAAM;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;IAC7D,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,UAAU,mBAAmB;IAC3B,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;IAChE,IAAI,EAAE,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;KACxB,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB;AASD,eAAO,MAAM,UAAU,EAAuB,mBAAmB,CAAC"}

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

@@ -1,81 +1,14 @@
-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.js";
 import { Radio } from "./Radio.js";
-const RadioGroupContext = createContext();
-function RadioGroupItemInner(props) {
-  const ctx = useContext(RadioGroupContext);
-  if (!ctx) throw new Error("RadioGroup.Item\uC740 RadioGroup \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
-  const isSelected = () => ctx.value() === props.value;
-  return _$createComponent(Radio, {
-    get value() {
-      return isSelected();
-    },
-    onValueChange: () => ctx.select(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 RadioGroupInner = (props) => {
-  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
-  });
-  const select = (item) => {
-    setValue(item);
-  };
-  const contextValue = {
-    value,
-    select,
-    disabled: () => local.disabled ?? false,
-    size: () => local.size,
-    theme: () => local.theme,
-    inline: () => local.inline ?? false,
-    inset: () => local.inset ?? false
-  };
-  return _$createComponent(RadioGroupContext.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 RadioGroup = RadioGroupInner;
-RadioGroup.Item = RadioGroupItemInner;
+import { createSelectionGroup } from "../../../hooks/createSelectionGroup.js";
+const {
+  Group
+} = createSelectionGroup({
+  mode: "single",
+  contextName: "RadioGroup",
+  ItemComponent: Radio,
+  emptyErrorMsg: "\uD56D\uBAA9\uC744 \uC120\uD0DD\uD574 \uC8FC\uC138\uC694"
+});
+const RadioGroup = Group;
 export {
   RadioGroup
 };

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/checkbox/RadioGroup.tsx"],
-  "mappings": ";;;;;;;AAAA,SAAyCA,eAAeC,YAAYC,kBAAkB;AACtF,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,aAAa;AAatB,MAAMC,oBAAoBN,cAA2C;AAUrE,SAASO,oBAA4BC,OAAoC;AACvE,QAAMC,MAAMP,WAAWI,iBAAiB;AACxC,MAAI,CAACG,IAAK,OAAM,IAAIC,MAAM,oHAA8C;AAExE,QAAMC,aAAaA,MAAMF,IAAIG,MAAM,MAAMJ,MAAMI;AAE/C,SAAAC,kBACGR,OAAK;IAAA,IACJO,QAAK;AAAA,aAAED,WAAW;IAAC;IACnBG,eAAeA,MAAML,IAAIM,OAAOP,MAAMI,KAAK;IAAC,IAC5CI,WAAQ;AAAA,aAAER,MAAMQ,YAAYP,IAAIO,SAAS;IAAC;IAAA,IAC1CC,OAAI;AAAA,aAAER,IAAIQ,KAAK;IAAC;IAAA,IAChBC,QAAK;AAAA,aAAET,IAAIS,MAAM;IAAC;IAAA,IAClBC,SAAM;AAAA,aAAEV,IAAIU,OAAO;IAAC;IAAA,IACpBC,QAAK;AAAA,aAAEX,IAAIW,MAAM;IAAC;IAAA,IAAAC,WAAA;AAAA,aAEjBb,MAAMa;IAAQ;EAAA,CAAA;AAGrB;AAsBA,MAAMC,kBAA8Dd,WAAU;AAC5E,QAAM,CAACe,OAAOC,IAAI,IAAIvB,WAAWO,OAAO,CACtC,SACA,iBACA,YACA,QACA,SACA,UACA,SACA,SACA,SACA,UAAU,CACX;AAED,QAAM,CAACI,OAAOa,QAAQ,IAAIrB,yBAAyB;IACjDQ,OAAOA,MAAMW,MAAMX;IACnBc,UAAUA,MAAMH,MAAMT;EACxB,CAAC;AAED,QAAMC,SAAUY,UAAkB;AAChCF,aAASE,IAAI;EACf;AAEA,QAAMC,eAAgD;IACpDhB;IACAG;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,kBACGP,kBAAkBuB,UAAQ;IAACjB,OAAOgB;IAAY,IAAAP,WAAA;AAAA,UAAAS,OAAAC,OAAA;AAAAC,eAAAF,MAAAG,aACpCT,MAAI;QAAA,KAAA,OAAA,IAAA;AAAA,iBAASrB,QAAQ,eAAeoB,MAAMW,KAAK;QAAC;QAAA,IAAEC,QAAK;AAAA,iBAAEZ,MAAMY;QAAK;MAAA,CAAA,GAAA,OAAA,IAAA;AAAAC,eAAAN,MAAA,MAC1EP,MAAMF,QAAQ;AAAA,aAAAS;IAAA;EAAA,CAAA;AAIvB;AAEO,MAAMO,aAAaf;AAC1Be,WAAWC,OAAO/B;",
-  "names": ["createContext", "splitProps", "useContext", "twMerge", "createControllableSignal", "Radio", "RadioGroupContext", "RadioGroupItemInner", "props", "ctx", "Error", "isSelected", "value", "_$createComponent", "onValueChange", "select", "disabled", "size", "theme", "inline", "inset", "children", "RadioGroupInner", "local", "rest", "setValue", "onChange", "item", "contextValue", "Provider", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "class", "style", "_$insert", "RadioGroup", "Item"]
+  "mappings": "AACA,SAASA,aAAa;AACtB,SAASC,4BAA4B;AA2BrC,MAAM;EAAEC;AAAM,IAAID,qBAAqB;EACrCE,MAAM;EACNC,aAAa;EACbC,eAAeL;EACfM,eAAe;AACjB,CAAC;AAEM,MAAMC,aAAaL;",
+  "names": ["Radio", "createSelectionGroup", "Group", "mode", "contextName", "ItemComponent", "emptyErrorMsg", "RadioGroup"]
 }

package/dist/components/form-control/color-picker/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import { type Component, type JSX } from "solid-js";
-type ColorPickerSize = "sm" | "lg";
+import { type ComponentSizeCompact } from "../../../styles/tokens.styles";
 export interface ColorPickerProps {
     /** 색상 값 (#RRGGBB 형식) */
     value?: string;
@@ -10,7 +10,13 @@ export interface ColorPickerProps {
     /** 비활성화 */
     disabled?: boolean;
     /** 사이즈 */
-    size?: ColorPickerSize;
+    size?: ComponentSizeCompact;
+    /** 필수 입력 여부 */
+    required?: boolean;
+    /** 커스텀 유효성 검사 함수 */
+    validate?: (value: string | undefined) => string | undefined;
+    /** touchMode: 포커스 해제 후에만 에러 표시 */
+    touchMode?: boolean;
     /** 커스텀 class */
     class?: string;
     /** 커스텀 style */
@@ -25,5 +31,4 @@ export interface ColorPickerProps {
  * ```
  */
 export declare const ColorPicker: Component<ColorPickerProps>;
-export {};
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/form-control/color-picker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAKhE,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AA+BnC,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU;IACV,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CA4BnD,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAK5E,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AA+B1E,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU;IACV,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;IAE7D,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAoDnD,CAAC"}

package/dist/components/form-control/color-picker/ColorPicker.js

@@ -1,11 +1,13 @@
 import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 var _tmpl$ = /* @__PURE__ */ _$template(`<input>`);
-import { splitProps } from "solid-js";
+import { createMemo, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
+import { Invalid } from "../Invalid.js";
 const baseClass = clsx(
   "size-field",
   "rounded",
@@ -24,7 +26,7 @@ const sizeClasses = {
 };
 const disabledClass = clsx("cursor-default", "relative", "before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0", "before:bg-[linear-gradient(45deg,transparent_40%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.4)_60%,transparent_60%)]");
 const ColorPicker = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "required", "validate", "touchMode", "class", "style"]);
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "#000000",
     onChange: () => local.onValueChange
@@ -33,30 +35,45 @@ const ColorPicker = (props) => {
     setValue(e.currentTarget.value);
   };
   const getClassName = () => twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);
-  return (() => {
-    var _el$ = _tmpl$();
-    _$spread(_el$, _$mergeProps(rest, {
-      "data-color-picker": "",
-      "type": "color",
-      get ["class"]() {
-        return getClassName();
-      },
-      get style() {
-        return local.style;
-      },
-      get value() {
-        return value();
-      },
-      get title() {
-        return local.title;
-      },
-      get disabled() {
-        return local.disabled;
-      },
-      "onInput": handleInput
-    }), false, false);
-    return _el$;
-  })();
+  const errorMsg = createMemo(() => {
+    var _a;
+    const v = props.value;
+    if (local.required && (v === void 0 || v === "")) return "\uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4";
+    return (_a = local.validate) == null ? void 0 : _a.call(local, v);
+  });
+  return _$createComponent(Invalid, {
+    variant: "border",
+    get message() {
+      return errorMsg();
+    },
+    get touchMode() {
+      return local.touchMode;
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      _$spread(_el$, _$mergeProps(rest, {
+        "data-color-picker": "",
+        "type": "color",
+        get ["class"]() {
+          return getClassName();
+        },
+        get style() {
+          return local.style;
+        },
+        get value() {
+          return value();
+        },
+        get title() {
+          return local.title;
+        },
+        get disabled() {
+          return local.disabled;
+        },
+        "onInput": handleInput
+      }), false, false);
+      return _el$;
+    }
+  });
 };
 export {
   ColorPicker

package/dist/components/form-control/color-picker/ColorPicker.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/color-picker/ColorPicker.tsx"],
-  "mappings": ";;;;AAAA,SAAmCA,kBAAkB;AACrD,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,gCAAgC;AAKzC,MAAMC,YAAYH;EAChB;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;AACF;AAGA,MAAMI,cAA+C;EACnDC,IAAI;EACJC,IAAI;AACN;AAIA,MAAMC,gBAAgBP,KACpB,kBACA,YACA,6EACA,4GACF;AAiCO,MAAMQ,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIZ,WAAWU,OAAO,CAAC,SAAS,iBAAiB,SAAS,YAAY,QAAQ,SAAS,OAAO,CAAC;AAEjH,QAAM,CAACG,OAAOC,QAAQ,IAAIX,yBAAyB;IACjDU,OAAOA,MAAMF,MAAME,SAAS;IAC5BE,UAAUA,MAAMJ,MAAMK;EACxB,CAAC;AAED,QAAMC,cAAoEC,OAAM;AAC9EJ,aAASI,EAAEC,cAAcN,KAAK;EAChC;AAEA,QAAMO,eAAeA,MACnBlB,QAAQE,WAAWO,MAAMU,QAAQhB,YAAYM,MAAMU,IAAI,GAAGV,MAAMW,YAAYd,eAAeG,MAAMY,KAAK;AAExG,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAA;AAAAC,aAAAF,MAAAG,aAEQf,MAAI;MAAA,qBAAA;MAAA,QAEH;MAAO,KAAA,OAAA,IAAA;AAAA,eACLQ,aAAa;MAAC;MAAA,IACrBQ,QAAK;AAAA,eAAEjB,MAAMiB;MAAK;MAAA,IAClBf,QAAK;AAAA,eAAEA,MAAM;MAAC;MAAA,IACdgB,QAAK;AAAA,eAAElB,MAAMkB;MAAK;MAAA,IAClBP,WAAQ;AAAA,eAAEX,MAAMW;MAAQ;MAAA,WACfL;IAAW,CAAA,GAAA,OAAA,KAAA;AAAA,WAAAO;EAAA,GAAA;AAG1B;",
-  "names": ["splitProps", "clsx", "twMerge", "createControllableSignal", "baseClass", "sizeClasses", "sm", "lg", "disabledClass", "ColorPicker", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleInput", "e", "currentTarget", "getClassName", "size", "disabled", "class", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "style", "title"]
+  "mappings": ";;;;;AAAA,SAAyBA,YAAsBC,kBAAkB;AACjE,OAAOC,UAAU;AACjB,SAASC,eAAe;AACxB,SAASC,gCAAgC;AACzC,SAASC,eAAe;AAIxB,MAAMC,YAAYJ;EAChB;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;EACA;AACF;AAGA,MAAMK,cAAoD;EACxDC,IAAI;EACJC,IAAI;AACN;AAIA,MAAMC,gBAAgBR,KACpB,kBACA,YACA,6EACA,4GACF;AA0CO,MAAMS,cAA4CC,WAAU;AACjE,QAAM,CAACC,OAAOC,IAAI,IAAIb,WAAWW,OAAO,CACtC,SACA,iBACA,SACA,YACA,QACA,YACA,YACA,aACA,SACA,OAAO,CACR;AAED,QAAM,CAACG,OAAOC,QAAQ,IAAIZ,yBAAyB;IACjDW,OAAOA,MAAMF,MAAME,SAAS;IAC5BE,UAAUA,MAAMJ,MAAMK;EACxB,CAAC;AAED,QAAMC,cAAoEC,OAAM;AAC9EJ,aAASI,EAAEC,cAAcN,KAAK;EAChC;AAEA,QAAMO,eAAeA,MACnBnB,QACEG,WACAO,MAAMU,QAAQhB,YAAYM,MAAMU,IAAI,GACpCV,MAAMW,YAAYd,eAClBG,MAAMY,KACR;AAEF,QAAMC,WAAW1B,WAAW,MAAM;;AAChC,UAAM2B,IAAIf,MAAMG;AAChB,QAAIF,MAAMe,aAAaD,MAAME,UAAaF,MAAM,IAAK,QAAO;AAC5D,YAAOd,WAAMiB,aAANjB,+BAAiBc;EAC1B,CAAC;AAED,SAAAI,kBACG1B,SAAO;IAAC2B,SAAO;IAAA,IAAUC,UAAO;AAAA,aAAEP,SAAS;IAAC;IAAA,IAAEQ,YAAS;AAAA,aAAErB,MAAMqB;IAAS;IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,OAAA;AAAAC,eAAAF,MAAAG,aAEjEzB,MAAI;QAAA,qBAAA;QAAA,QAEH;QAAO,KAAA,OAAA,IAAA;AAAA,iBACLQ,aAAa;QAAC;QAAA,IACrBkB,QAAK;AAAA,iBAAE3B,MAAM2B;QAAK;QAAA,IAClBzB,QAAK;AAAA,iBAAEA,MAAM;QAAC;QAAA,IACd0B,QAAK;AAAA,iBAAE5B,MAAM4B;QAAK;QAAA,IAClBjB,WAAQ;AAAA,iBAAEX,MAAMW;QAAQ;QAAA,WACfL;MAAW,CAAA,GAAA,OAAA,KAAA;AAAA,aAAAiB;IAAA;EAAA,CAAA;AAI5B;",
+  "names": ["createMemo", "splitProps", "clsx", "twMerge", "createControllableSignal", "Invalid", "baseClass", "sizeClasses", "sm", "lg", "disabledClass", "ColorPicker", "props", "local", "rest", "value", "setValue", "onChange", "onValueChange", "handleInput", "e", "currentTarget", "getClassName", "size", "disabled", "class", "errorMsg", "v", "required", "undefined", "validate", "_$createComponent", "variant", "message", "touchMode", "children", "_el$", "_tmpl$", "_$spread", "_$mergeProps", "style", "title"]
 }