@simplysm/solid 13.0.0-beta.41 → 13.0.0-beta.45

package/README.md

@@ -106,6 +106,7 @@ import "@simplysm/solid/base.css";
 - [`ColorPicker`](docs/form-controls.md#colorpicker) - Color selection component
 - [`ThemeToggle`](docs/form-controls.md#themetoggle) - Dark/light/system theme cycle toggle
 - [`RichTextEditor`](docs/form-controls.md#richtexteditor) - Tiptap-based rich text editor with formatting, tables, images
+- [`Invalid`](docs/form-controls.md#invalid) - Wrapper component for form validation using native browser validation
 - [`Numpad`](docs/form-controls.md#numpad) - Numeric keypad for touch-based input
 - [`StatePreset`](docs/form-controls.md#statepreset) - Save/load screen state as presets
 

package/dist/components/display/Echarts.d.ts

@@ -1,7 +1,7 @@
 import { type Component, type JSX } from "solid-js";
-import * as echarts from "echarts";
+import type * as echartsType from "echarts";
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    option: echarts.EChartsOption;
+    option: echartsType.EChartsOption;
     loading?: boolean;
 }
 export declare const Echarts: Component<EchartsProps>;

package/dist/components/display/Echarts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Echarts.d.ts","sourceRoot":"","sources":["../../../src/components/display/Echarts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuC,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEzF,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAInC,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,EAAE,SAAS,CAAC,YAAY,CA+B3C,CAAC"}
+{"version":3,"file":"Echarts.d.ts","sourceRoot":"","sources":["../../../src/components/display/Echarts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAqD,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEvG,OAAO,KAAK,KAAK,WAAW,MAAM,SAAS,CAAC;AAI5C,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,EAAE,WAAW,CAAC,aAAa,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,OAAO,EAAE,SAAS,CAAC,YAAY,CAsC3C,CAAC"}

package/dist/components/display/Echarts.js

@@ -1,6 +1,5 @@
-import { createEffect, onCleanup, splitProps } from "solid-js";
+import { createEffect, createSignal, onCleanup, splitProps } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import * as echarts from "echarts";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 const baseClass = clsx("block", "size-full");
@@ -8,14 +7,20 @@ const Echarts = (props) => {
   const [local, rest] = splitProps(props, ["option", "loading", "class"]);
   let containerRef;
   let chart;
+  const [ready, setReady] = createSignal(false);
   createEffect(() => {
-    chart = echarts.init(containerRef, null, { renderer: "svg" });
-    onCleanup(() => chart.dispose());
+    void import("echarts").then((echarts) => {
+      chart = echarts.init(containerRef, null, { renderer: "svg" });
+      setReady(true);
+    });
+    onCleanup(() => chart == null ? void 0 : chart.dispose());
   });
   createEffect(() => {
+    if (!ready()) return;
     chart.setOption(local.option);
   });
   createEffect(() => {
+    if (!ready()) return;
     if (local.loading) {
       chart.showLoading();
     } else {
@@ -23,7 +28,7 @@ const Echarts = (props) => {
     }
   });
   createResizeObserver(containerRef, () => {
-    chart.resize();
+    chart == null ? void 0 : chart.resize();
   });
   return /* @__PURE__ */ React.createElement("div", { "data-echarts": true, ref: containerRef, class: twMerge(baseClass, local.class), ...rest });
 };

package/dist/components/display/Echarts.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/display/Echarts.tsx"],
-  "sourcesContent": ["import { type Component, createEffect, onCleanup, splitProps, type JSX } from \"solid-js\";\nimport { createResizeObserver } from \"@solid-primitives/resize-observer\";\nimport * as echarts from \"echarts\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  option: echarts.EChartsOption;\n  loading?: boolean;\n}\n\nconst baseClass = clsx(\"block\", \"size-full\");\n\nexport const Echarts: Component<EchartsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"option\", \"loading\", \"class\"]);\n  let containerRef!: HTMLDivElement;\n  let chart: echarts.EChartsType;\n\n  // \uB9C8\uC6B4\uD2B8 \uC2DC \uCC28\uD2B8 \uCD08\uAE30\uD654 + \uC5B8\uB9C8\uC6B4\uD2B8 \uC2DC \uC815\uB9AC\n  createEffect(() => {\n    chart = echarts.init(containerRef, null, { renderer: \"svg\" });\n    onCleanup(() => chart.dispose());\n  });\n\n  // option \uBCC0\uACBD \uAC10\uC9C0\n  createEffect(() => {\n    chart.setOption(local.option);\n  });\n\n  // loading \uC0C1\uD0DC \uBCC0\uACBD \uAC10\uC9C0\n  createEffect(() => {\n    if (local.loading) {\n      chart.showLoading();\n    } else {\n      chart.hideLoading();\n    }\n  });\n\n  // \uCEE8\uD14C\uC774\uB108 \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n  createResizeObserver(containerRef, () => {\n    chart.resize();\n  });\n\n  return <div data-echarts ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;\n};\n"],
-  "mappings": "AAAA,SAAyB,cAAc,WAAW,kBAA4B;AAC9E,SAAS,4BAA4B;AACrC,YAAY,aAAa;AACzB,OAAO,UAAU;AACjB,SAAS,eAAe;AAOxB,MAAM,YAAY,KAAK,SAAS,WAAW;AAEpC,MAAM,UAAmC,CAAC,UAAU;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,UAAU,WAAW,OAAO,CAAC;AACtE,MAAI;AACJ,MAAI;AAGJ,eAAa,MAAM;AACjB,YAAQ,QAAQ,KAAK,cAAc,MAAM,EAAE,UAAU,MAAM,CAAC;AAC5D,cAAU,MAAM,MAAM,QAAQ,CAAC;AAAA,EACjC,CAAC;AAGD,eAAa,MAAM;AACjB,UAAM,UAAU,MAAM,MAAM;AAAA,EAC9B,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,MAAM,SAAS;AACjB,YAAM,YAAY;AAAA,IACpB,OAAO;AACL,YAAM,YAAY;AAAA,IACpB;AAAA,EACF,CAAC;AAGD,uBAAqB,cAAc,MAAM;AACvC,UAAM,OAAO;AAAA,EACf,CAAC;AAED,SAAO,oCAAC,SAAI,gBAAY,MAAC,KAAK,cAAc,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAI,GAAG,MAAM;AAChG;",
+  "sourcesContent": ["import { type Component, createEffect, createSignal, onCleanup, splitProps, type JSX } from \"solid-js\";\nimport { createResizeObserver } from \"@solid-primitives/resize-observer\";\nimport type * as echartsType from \"echarts\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  option: echartsType.EChartsOption;\n  loading?: boolean;\n}\n\nconst baseClass = clsx(\"block\", \"size-full\");\n\nexport const Echarts: Component<EchartsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"option\", \"loading\", \"class\"]);\n  let containerRef!: HTMLDivElement;\n  let chart: echartsType.EChartsType | undefined;\n  const [ready, setReady] = createSignal(false);\n\n  // \uB9C8\uC6B4\uD2B8 \uC2DC echarts \uB3D9\uC801 \uB85C\uB4DC + \uCC28\uD2B8 \uCD08\uAE30\uD654\n  createEffect(() => {\n    void import(\"echarts\").then((echarts) => {\n      chart = echarts.init(containerRef, null, { renderer: \"svg\" });\n      setReady(true);\n    });\n\n    onCleanup(() => chart?.dispose());\n  });\n\n  // option \uBCC0\uACBD \uAC10\uC9C0\n  createEffect(() => {\n    if (!ready()) return;\n    chart!.setOption(local.option);\n  });\n\n  // loading \uC0C1\uD0DC \uBCC0\uACBD \uAC10\uC9C0\n  createEffect(() => {\n    if (!ready()) return;\n    if (local.loading) {\n      chart!.showLoading();\n    } else {\n      chart!.hideLoading();\n    }\n  });\n\n  // \uCEE8\uD14C\uC774\uB108 \uD06C\uAE30 \uBCC0\uACBD \uAC10\uC9C0\n  createResizeObserver(containerRef, () => {\n    chart?.resize();\n  });\n\n  return <div data-echarts ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;\n};\n"],
+  "mappings": "AAAA,SAAyB,cAAc,cAAc,WAAW,kBAA4B;AAC5F,SAAS,4BAA4B;AAErC,OAAO,UAAU;AACjB,SAAS,eAAe;AAOxB,MAAM,YAAY,KAAK,SAAS,WAAW;AAEpC,MAAM,UAAmC,CAAC,UAAU;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,UAAU,WAAW,OAAO,CAAC;AACtE,MAAI;AACJ,MAAI;AACJ,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAG5C,eAAa,MAAM;AACjB,SAAK,OAAO,SAAS,EAAE,KAAK,CAAC,YAAY;AACvC,cAAQ,QAAQ,KAAK,cAAc,MAAM,EAAE,UAAU,MAAM,CAAC;AAC5D,eAAS,IAAI;AAAA,IACf,CAAC;AAED,cAAU,MAAM,+BAAO,SAAS;AAAA,EAClC,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,CAAC,MAAM,EAAG;AACd,UAAO,UAAU,MAAM,MAAM;AAAA,EAC/B,CAAC;AAGD,eAAa,MAAM;AACjB,QAAI,CAAC,MAAM,EAAG;AACd,QAAI,MAAM,SAAS;AACjB,YAAO,YAAY;AAAA,IACrB,OAAO;AACL,YAAO,YAAY;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,uBAAqB,cAAc,MAAM;AACvC,mCAAO;AAAA,EACT,CAAC;AAED,SAAO,oCAAC,SAAI,gBAAY,MAAC,KAAK,cAAc,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAI,GAAG,MAAM;AAChG;",
   "names": []
 }

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,47 @@
+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 /* @__PURE__ */ React.createElement("div", { ...rest, class: twMerge("relative inline-block", local.class) }, local.children, /* @__PURE__ */ React.createElement("div", { class: indicatorClass, style: { display: (local.message ?? "") !== "" ? "block" : "none" } }), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: hiddenInputEl,
+      type: "text",
+      class: hiddenInputClass,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      onFocus: handleHiddenInputFocus
+    }
+  ));
+};
+export {
+  Invalid
+};
+//# sourceMappingURL=Invalid.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/form-control/Invalid.tsx"],
+  "sourcesContent": ["import { type ParentComponent, createEffect, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport \"@simplysm/core-browser\";\n\nexport interface InvalidProps {\n  /** Validation error message. Non-empty = invalid. */\n  message?: string;\n  /** Custom class */\n  class?: string;\n}\n\nconst indicatorClass = clsx(\n  \"absolute left-0.5 top-0.5\",\n  \"size-1.5 rounded-full\",\n  \"bg-danger-500\",\n  \"pointer-events-none select-none\",\n);\n\nconst hiddenInputClass = clsx(\n  \"absolute bottom-0 left-0.5\",\n  \"size-px opacity-0\",\n  \"pointer-events-none -z-10\",\n  \"select-none\",\n);\n\nexport const Invalid: ParentComponent<InvalidProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"message\", \"class\", \"children\"]);\n\n  let hiddenInputEl!: HTMLInputElement;\n\n  // message \uBCC0\uACBD \uC2DC setCustomValidity \uBC18\uC751\uD615 \uC5C5\uB370\uC774\uD2B8\n  createEffect(() => {\n    const msg = local.message ?? \"\";\n    hiddenInputEl.setCustomValidity(msg);\n  });\n\n  const handleHiddenInputFocus = (e: FocusEvent) => {\n    const container = (e.currentTarget as HTMLElement).parentElement;\n    if (!container) return;\n    const focusable = container.findFirstFocusableChild();\n    if (focusable && focusable !== e.currentTarget) {\n      focusable.focus();\n    }\n  };\n\n  return (\n    <div {...rest} class={twMerge(\"relative inline-block\", local.class)}>\n      {local.children}\n      <div class={indicatorClass} style={{ display: (local.message ?? \"\") !== \"\" ? \"block\" : \"none\" }} />\n      <input\n        ref={hiddenInputEl}\n        type=\"text\"\n        class={hiddenInputClass}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        onFocus={handleHiddenInputFocus}\n      />\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAA+B,cAAc,kBAAkB;AAC/D,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,OAAO;AASP,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,UAAyC,CAAC,UAAU;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,WAAW,SAAS,UAAU,CAAC;AAExE,MAAI;AAGJ,eAAa,MAAM;AACjB,UAAM,MAAM,MAAM,WAAW;AAC7B,kBAAc,kBAAkB,GAAG;AAAA,EACrC,CAAC;AAED,QAAM,yBAAyB,CAAC,MAAkB;AAChD,UAAM,YAAa,EAAE,cAA8B;AACnD,QAAI,CAAC,UAAW;AAChB,UAAM,YAAY,UAAU,wBAAwB;AACpD,QAAI,aAAa,cAAc,EAAE,eAAe;AAC9C,gBAAU,MAAM;AAAA,IAClB;AAAA,EACF;AAEA,SACE,oCAAC,SAAK,GAAG,MAAM,OAAO,QAAQ,yBAAyB,MAAM,KAAK,KAC/D,MAAM,UACP,oCAAC,SAAI,OAAO,gBAAgB,OAAO,EAAE,UAAU,MAAM,WAAW,QAAQ,KAAK,UAAU,OAAO,GAAG,GACjG;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAS;AAAA;AAAA,EACX,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/form-control/editor/RichTextEditor.d.ts

@@ -8,8 +8,6 @@ export interface RichTextEditorProps {
     onValueChange?: (value: string) => void;
     /** 비활성화 */
     disabled?: boolean;
-    /** 에러 상태 */
-    error?: boolean;
     /** 사이즈 */
     size?: FieldSize;
     /** 커스텀 class */

package/dist/components/form-control/editor/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/editor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAA0D,MAAM,UAAU,CAAC;AAE5G,OAAO,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAiCD,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAmGzD,CAAC"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/editor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAA0D,MAAM,UAAU,CAAC;AAE5G,OAAO,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AA8BD,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAkGzD,CAAC"}

package/dist/components/form-control/editor/RichTextEditor.js

@@ -23,7 +23,6 @@ const editorWrapperClass = clsx(
   "rounded",
   "focus-within:border-primary-500"
 );
-const editorErrorClass = clsx("border-danger-500");
 const editorDisabledClass = clsx("bg-base-100 dark:bg-base-800", "text-base-500");
 const editorContentClass = clsx(
   "px-4 py-3",
@@ -37,7 +36,7 @@ const editorContentSizeClasses = {
   lg: clsx("px-5 py-4", "min-h-48")
 };
 const RichTextEditor = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "error", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "disabled", "size", "class", "style"]);
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
     onChange: () => local.onValueChange
@@ -104,7 +103,7 @@ const RichTextEditor = (props) => {
     var _a;
     (_a = editor()) == null ? void 0 : _a.destroy();
   });
-  const getWrapperClass = () => twMerge(editorWrapperClass, local.error && editorErrorClass, local.disabled && editorDisabledClass, local.class);
+  const getWrapperClass = () => twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
   const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
   return /* @__PURE__ */ React.createElement("div", { ...rest, "data-rich-text-editor": true, class: getWrapperClass(), style: local.style }, /* @__PURE__ */ React.createElement(Show, { when: editor() }, (instance) => /* @__PURE__ */ React.createElement(Show, { when: !local.disabled }, /* @__PURE__ */ React.createElement(EditorToolbar, { editor: instance() }))), /* @__PURE__ */ React.createElement("div", { ref: editorRef, class: getContentClass() }));
 };

package/dist/components/form-control/editor/RichTextEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/editor/RichTextEditor.tsx"],
-  "sourcesContent": ["import { type Component, type JSX, Show, createEffect, on, onCleanup, splitProps, untrack } from \"solid-js\";\nimport clsx from \"clsx\";\nimport \"./editor.css\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createTiptapEditor } from \"solid-tiptap\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport TextAlign from \"@tiptap/extension-text-align\";\nimport { Color } from \"@tiptap/extension-color\";\nimport { TextStyle } from \"@tiptap/extension-text-style\";\nimport Highlight from \"@tiptap/extension-highlight\";\nimport { Table } from \"@tiptap/extension-table\";\nimport TableRow from \"@tiptap/extension-table-row\";\nimport TableHeader from \"@tiptap/extension-table-header\";\nimport TableCell from \"@tiptap/extension-table-cell\";\nimport Image from \"@tiptap/extension-image\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport type { FieldSize } from \"../field/Field.styles\";\nimport { EditorToolbar } from \"./EditorToolbar\";\n\nexport interface RichTextEditorProps {\n  /** HTML \uBB38\uC790\uC5F4 \uAC12 */\n  value?: string;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: string) => void;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC5D0\uB7EC \uC0C1\uD0DC */\n  error?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n// \uC5D0\uB514\uD130 wrapper \uC2A4\uD0C0\uC77C\nconst editorWrapperClass = clsx(\n  \"flex flex-col\",\n  \"bg-white dark:bg-base-900\",\n  \"text-base-900 dark:text-base-100\",\n  \"border border-base-300 dark:border-base-700\",\n  \"rounded\",\n  \"focus-within:border-primary-500\",\n);\n\n// \uC5D0\uB514\uD130 \uC5D0\uB7EC \uC2A4\uD0C0\uC77C\nconst editorErrorClass = clsx(\"border-danger-500\");\n\n// \uC5D0\uB514\uD130 disabled \uC2A4\uD0C0\uC77C\nconst editorDisabledClass = clsx(\"bg-base-100 dark:bg-base-800\", \"text-base-500\");\n\n// \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uC601\uC5ED \uC2A4\uD0C0\uC77C\nconst editorContentClass = clsx(\n  \"px-4 py-3\",\n  \"min-h-32\",\n  \"outline-none\",\n  \"prose prose-sm max-w-none\",\n  \"dark:prose-invert\",\n);\n\n// \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nconst editorContentSizeClasses: Record<FieldSize, string> = {\n  sm: clsx(\"px-3 py-2\", \"min-h-24\"),\n  lg: clsx(\"px-5 py-4\", \"min-h-48\"),\n};\n\nexport const RichTextEditor: Component<RichTextEditorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"onValueChange\", \"disabled\", \"error\", \"size\", \"class\", \"style\"]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? \"\",\n    onChange: () => local.onValueChange,\n  });\n\n  // \uC5D0\uB514\uD130 \uB0B4\uBD80 \uC5C5\uB370\uC774\uD2B8(onUpdate)\uC640 \uC678\uBD80 value \uBCC0\uACBD\uC744 \uAD6C\uBD84\uD558\uAE30 \uC704\uD55C \uD50C\uB798\uADF8\n  let isInternalUpdate = false;\n\n  let editorRef!: HTMLDivElement;\n\n  const editor = createTiptapEditor(() => ({\n    element: editorRef,\n    extensions: [\n      StarterKit,\n      TextAlign.configure({\n        types: [\"heading\", \"paragraph\"],\n      }),\n      TextStyle,\n      Color,\n      Highlight.configure({\n        multicolor: true,\n      }),\n      Table.configure({\n        resizable: true,\n      }),\n      TableRow,\n      TableHeader,\n      TableCell,\n      Image.configure({\n        inline: true,\n        allowBase64: true,\n      }),\n    ],\n    // untrack: value/editable \uBCC0\uACBD \uC2DC \uC5D0\uB514\uD130 \uC7AC\uC0DD\uC131 \uBC29\uC9C0 (createEffect\uC5D0\uC11C \uB3D9\uAE30\uD654)\n    content: untrack(() => value()),\n    editable: untrack(() => !local.disabled),\n    onUpdate({ editor: e }) {\n      const html = e.getHTML();\n      isInternalUpdate = true;\n      setValue(html === \"<p></p>\" ? \"\" : html);\n      queueMicrotask(() => {\n        isInternalUpdate = false;\n      });\n    },\n  }));\n\n  // disabled \uBCC0\uACBD \uC2DC \uC5D0\uB514\uD130 editable \uC0C1\uD0DC \uB3D9\uAE30\uD654\n  createEffect(() => {\n    const e = editor();\n    if (e) {\n      e.setEditable(!local.disabled);\n    }\n  });\n\n  // \uC678\uBD80\uC5D0\uC11C value\uAC00 \uBCC0\uACBD\uB420 \uB54C\uB9CC \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uB3D9\uAE30\uD654\n  createEffect(\n    on(\n      () => value(),\n      (newValue) => {\n        // \uC5D0\uB514\uD130 \uB0B4\uBD80 \uC5C5\uB370\uC774\uD2B8\uB85C \uC778\uD55C value \uBCC0\uACBD\uC740 \uBB34\uC2DC\n        if (isInternalUpdate) return;\n\n        const e = editor();\n        if (!e) return;\n\n        const editorHtml = e.getHTML();\n        const normalizedEditor = editorHtml === \"<p></p>\" ? \"\" : editorHtml;\n        if (normalizedEditor !== newValue) {\n          e.commands.setContent(newValue || \"\", { emitUpdate: false });\n        }\n      },\n    ),\n  );\n\n  // \uD074\uB9B0\uC5C5\n  onCleanup(() => {\n    editor()?.destroy();\n  });\n\n  const getWrapperClass = () =>\n    twMerge(editorWrapperClass, local.error && editorErrorClass, local.disabled && editorDisabledClass, local.class);\n\n  const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);\n\n  return (\n    <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>\n      <Show when={editor()}>\n        {(instance) => (\n          <Show when={!local.disabled}>\n            <EditorToolbar editor={instance()} />\n          </Show>\n        )}\n      </Show>\n      <div ref={editorRef} class={getContentClass()} />\n    </div>\n  );\n};\n"],
-  "mappings": "AAAA,SAAmC,MAAM,cAAc,IAAI,WAAW,YAAY,eAAe;AACjG,OAAO,UAAU;AACjB,OAAO;AACP,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,OAAO,eAAe;AACtB,SAAS,aAAa;AACtB,OAAO,cAAc;AACrB,OAAO,iBAAiB;AACxB,OAAO,eAAe;AACtB,OAAO,WAAW;AAClB,SAAS,gCAAgC;AAEzC,SAAS,qBAAqB;AA0B9B,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGA,MAAM,mBAAmB,KAAK,mBAAmB;AAGjD,MAAM,sBAAsB,KAAK,gCAAgC,eAAe;AAGhF,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGA,MAAM,2BAAsD;AAAA,EAC1D,IAAI,KAAK,aAAa,UAAU;AAAA,EAChC,IAAI,KAAK,aAAa,UAAU;AAClC;AAEO,MAAM,iBAAiD,CAAC,UAAU;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,iBAAiB,YAAY,SAAS,QAAQ,SAAS,OAAO,CAAC;AAEjH,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS;AAAA,IAC5B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAGD,MAAI,mBAAmB;AAEvB,MAAI;AAEJ,QAAM,SAAS,mBAAmB,OAAO;AAAA,IACvC,SAAS;AAAA,IACT,YAAY;AAAA,MACV;AAAA,MACA,UAAU,UAAU;AAAA,QAClB,OAAO,CAAC,WAAW,WAAW;AAAA,MAChC,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA,UAAU,UAAU;AAAA,QAClB,YAAY;AAAA,MACd,CAAC;AAAA,MACD,MAAM,UAAU;AAAA,QACd,WAAW;AAAA,MACb,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,UAAU;AAAA,QACd,QAAQ;AAAA,QACR,aAAa;AAAA,MACf,CAAC;AAAA,IACH;AAAA;AAAA,IAEA,SAAS,QAAQ,MAAM,MAAM,CAAC;AAAA,IAC9B,UAAU,QAAQ,MAAM,CAAC,MAAM,QAAQ;AAAA,IACvC,SAAS,EAAE,QAAQ,EAAE,GAAG;AACtB,YAAM,OAAO,EAAE,QAAQ;AACvB,yBAAmB;AACnB,eAAS,SAAS,YAAY,KAAK,IAAI;AACvC,qBAAe,MAAM;AACnB,2BAAmB;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF,EAAE;AAGF,eAAa,MAAM;AACjB,UAAM,IAAI,OAAO;AACjB,QAAI,GAAG;AACL,QAAE,YAAY,CAAC,MAAM,QAAQ;AAAA,IAC/B;AAAA,EACF,CAAC;AAGD;AAAA,IACE;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,aAAa;AAEZ,YAAI,iBAAkB;AAEtB,cAAM,IAAI,OAAO;AACjB,YAAI,CAAC,EAAG;AAER,cAAM,aAAa,EAAE,QAAQ;AAC7B,cAAM,mBAAmB,eAAe,YAAY,KAAK;AACzD,YAAI,qBAAqB,UAAU;AACjC,YAAE,SAAS,WAAW,YAAY,IAAI,EAAE,YAAY,MAAM,CAAC;AAAA,QAC7D;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,YAAU,MAAM;AAvJlB;AAwJI,iBAAO,MAAP,mBAAU;AAAA,EACZ,CAAC;AAED,QAAM,kBAAkB,MACtB,QAAQ,oBAAoB,MAAM,SAAS,kBAAkB,MAAM,YAAY,qBAAqB,MAAM,KAAK;AAEjH,QAAM,kBAAkB,MAAM,QAAQ,oBAAoB,MAAM,QAAQ,yBAAyB,MAAM,IAAI,CAAC;AAE5G,SACE,oCAAC,SAAK,GAAG,MAAM,yBAAqB,MAAC,OAAO,gBAAgB,GAAG,OAAO,MAAM,SAC1E,oCAAC,QAAK,MAAM,OAAO,KAChB,CAAC,aACA,oCAAC,QAAK,MAAM,CAAC,MAAM,YACjB,oCAAC,iBAAc,QAAQ,SAAS,GAAG,CACrC,CAEJ,GACA,oCAAC,SAAI,KAAK,WAAW,OAAO,gBAAgB,GAAG,CACjD;AAEJ;",
+  "sourcesContent": ["import { type Component, type JSX, Show, createEffect, on, onCleanup, splitProps, untrack } from \"solid-js\";\nimport clsx from \"clsx\";\nimport \"./editor.css\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createTiptapEditor } from \"solid-tiptap\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport TextAlign from \"@tiptap/extension-text-align\";\nimport { Color } from \"@tiptap/extension-color\";\nimport { TextStyle } from \"@tiptap/extension-text-style\";\nimport Highlight from \"@tiptap/extension-highlight\";\nimport { Table } from \"@tiptap/extension-table\";\nimport TableRow from \"@tiptap/extension-table-row\";\nimport TableHeader from \"@tiptap/extension-table-header\";\nimport TableCell from \"@tiptap/extension-table-cell\";\nimport Image from \"@tiptap/extension-image\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport type { FieldSize } from \"../field/Field.styles\";\nimport { EditorToolbar } from \"./EditorToolbar\";\n\nexport interface RichTextEditorProps {\n  /** HTML \uBB38\uC790\uC5F4 \uAC12 */\n  value?: string;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: string) => void;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n// \uC5D0\uB514\uD130 wrapper \uC2A4\uD0C0\uC77C\nconst editorWrapperClass = clsx(\n  \"flex flex-col\",\n  \"bg-white dark:bg-base-900\",\n  \"text-base-900 dark:text-base-100\",\n  \"border border-base-300 dark:border-base-700\",\n  \"rounded\",\n  \"focus-within:border-primary-500\",\n);\n\n// \uC5D0\uB514\uD130 disabled \uC2A4\uD0C0\uC77C\nconst editorDisabledClass = clsx(\"bg-base-100 dark:bg-base-800\", \"text-base-500\");\n\n// \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uC601\uC5ED \uC2A4\uD0C0\uC77C\nconst editorContentClass = clsx(\n  \"px-4 py-3\",\n  \"min-h-32\",\n  \"outline-none\",\n  \"prose prose-sm max-w-none\",\n  \"dark:prose-invert\",\n);\n\n// \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nconst editorContentSizeClasses: Record<FieldSize, string> = {\n  sm: clsx(\"px-3 py-2\", \"min-h-24\"),\n  lg: clsx(\"px-5 py-4\", \"min-h-48\"),\n};\n\nexport const RichTextEditor: Component<RichTextEditorProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"onValueChange\", \"disabled\", \"size\", \"class\", \"style\"]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? \"\",\n    onChange: () => local.onValueChange,\n  });\n\n  // \uC5D0\uB514\uD130 \uB0B4\uBD80 \uC5C5\uB370\uC774\uD2B8(onUpdate)\uC640 \uC678\uBD80 value \uBCC0\uACBD\uC744 \uAD6C\uBD84\uD558\uAE30 \uC704\uD55C \uD50C\uB798\uADF8\n  let isInternalUpdate = false;\n\n  let editorRef!: HTMLDivElement;\n\n  const editor = createTiptapEditor(() => ({\n    element: editorRef,\n    extensions: [\n      StarterKit,\n      TextAlign.configure({\n        types: [\"heading\", \"paragraph\"],\n      }),\n      TextStyle,\n      Color,\n      Highlight.configure({\n        multicolor: true,\n      }),\n      Table.configure({\n        resizable: true,\n      }),\n      TableRow,\n      TableHeader,\n      TableCell,\n      Image.configure({\n        inline: true,\n        allowBase64: true,\n      }),\n    ],\n    // untrack: value/editable \uBCC0\uACBD \uC2DC \uC5D0\uB514\uD130 \uC7AC\uC0DD\uC131 \uBC29\uC9C0 (createEffect\uC5D0\uC11C \uB3D9\uAE30\uD654)\n    content: untrack(() => value()),\n    editable: untrack(() => !local.disabled),\n    onUpdate({ editor: e }) {\n      const html = e.getHTML();\n      isInternalUpdate = true;\n      setValue(html === \"<p></p>\" ? \"\" : html);\n      queueMicrotask(() => {\n        isInternalUpdate = false;\n      });\n    },\n  }));\n\n  // disabled \uBCC0\uACBD \uC2DC \uC5D0\uB514\uD130 editable \uC0C1\uD0DC \uB3D9\uAE30\uD654\n  createEffect(() => {\n    const e = editor();\n    if (e) {\n      e.setEditable(!local.disabled);\n    }\n  });\n\n  // \uC678\uBD80\uC5D0\uC11C value\uAC00 \uBCC0\uACBD\uB420 \uB54C\uB9CC \uC5D0\uB514\uD130 \uCF58\uD150\uCE20 \uB3D9\uAE30\uD654\n  createEffect(\n    on(\n      () => value(),\n      (newValue) => {\n        // \uC5D0\uB514\uD130 \uB0B4\uBD80 \uC5C5\uB370\uC774\uD2B8\uB85C \uC778\uD55C value \uBCC0\uACBD\uC740 \uBB34\uC2DC\n        if (isInternalUpdate) return;\n\n        const e = editor();\n        if (!e) return;\n\n        const editorHtml = e.getHTML();\n        const normalizedEditor = editorHtml === \"<p></p>\" ? \"\" : editorHtml;\n        if (normalizedEditor !== newValue) {\n          e.commands.setContent(newValue || \"\", { emitUpdate: false });\n        }\n      },\n    ),\n  );\n\n  // \uD074\uB9B0\uC5C5\n  onCleanup(() => {\n    editor()?.destroy();\n  });\n\n  const getWrapperClass = () => twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);\n\n  const getContentClass = () => twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);\n\n  return (\n    <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>\n      <Show when={editor()}>\n        {(instance) => (\n          <Show when={!local.disabled}>\n            <EditorToolbar editor={instance()} />\n          </Show>\n        )}\n      </Show>\n      <div ref={editorRef} class={getContentClass()} />\n    </div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/form-control/field/DatePicker.d.ts

@@ -19,8 +19,6 @@ export interface DatePickerProps {
     disabled?: boolean;
     /** 읽기 전용 */
     readonly?: boolean;
-    /** 에러 상태 */
-    error?: boolean;
     /** 사이즈 */
     size?: FieldSize;
     /** 테두리 없는 스타일 */

package/dist/components/form-control/field/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAoB,MAAM,UAAU,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,KAAK,SAAS,EASf,MAAM,gBAAgB,CAAC;AAExB,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD,YAAY;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,YAAY;IACZ,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,YAAY;IACZ,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAyED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,eAAe,CA8GjD,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAoB,MAAM,UAAU,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,KAAK,SAAS,EAQf,MAAM,gBAAgB,CAAC;AAExB,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD,YAAY;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,YAAY;IACZ,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,YAAY;IACZ,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAyED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,eAAe,CA4GjD,CAAC"}

package/dist/components/form-control/field/DatePicker.js

@@ -6,7 +6,6 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import {
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -73,7 +72,6 @@ const DatePicker = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -93,7 +91,6 @@ const DatePicker = (props) => {
   const getWrapperClass = (includeCustomClass) => twMerge(
     fieldBaseClass,
     local.size && fieldSizeClasses[local.size],
-    local.error && fieldErrorClass,
     local.disabled && fieldDisabledClass,
     local.inset && fieldInsetClass + " block",
     local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/dist/components/form-control/field/DatePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/DatePicker.tsx"],
-  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { DateOnly } from \"@simplysm/core-common\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport {\n  type FieldSize,\n  fieldBaseClass,\n  fieldSizeClasses,\n  fieldErrorClass,\n  fieldInsetClass,\n  fieldInsetHeightClass,\n  fieldInsetSizeHeightClasses,\n  fieldDisabledClass,\n  fieldInputClass,\n} from \"./Field.styles\";\n\ntype DatePickerUnit = \"year\" | \"month\" | \"date\";\n\nexport interface DatePickerProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: DateOnly;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: DateOnly | undefined) => void;\n\n  /** \uB0A0\uC9DC \uB2E8\uC704 */\n  unit?: DatePickerUnit;\n\n  /** \uCD5C\uC18C \uB0A0\uC9DC */\n  min?: DateOnly;\n\n  /** \uCD5C\uB300 \uB0A0\uC9DC */\n  max?: DateOnly;\n\n  /** \uD0C0\uC774\uD2C0 (\uD234\uD301) */\n  title?: string;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC77D\uAE30 \uC804\uC6A9 */\n  readonly?: boolean;\n\n  /** \uC5D0\uB7EC \uC0C1\uD0DC */\n  error?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uD14C\uB450\uB9AC \uC5C6\uB294 \uC2A4\uD0C0\uC77C */\n  inset?: boolean;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * DateOnly \uAC12\uC744 input value\uC6A9 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658 (ISO \uD615\uC2DD)\n */\nfunction formatValue(value: DateOnly | undefined, type: DatePickerUnit): string {\n  if (value == null) return \"\";\n\n  switch (type) {\n    case \"year\":\n      return value.toFormatString(\"yyyy\");\n    case \"month\":\n      return value.toFormatString(\"yyyy-MM\");\n    case \"date\":\n      return value.toFormatString(\"yyyy-MM-dd\");\n  }\n}\n\n/**\n * \uC785\uB825 \uBB38\uC790\uC5F4\uC744 DateOnly\uB85C \uBCC0\uD658\n */\nfunction parseValue(str: string, type: DatePickerUnit): DateOnly | undefined {\n  if (str === \"\") return undefined;\n\n  switch (type) {\n    case \"year\": {\n      const year = Number(str);\n      if (Number.isNaN(year)) return undefined;\n      return new DateOnly(year, 1, 1);\n    }\n    case \"month\": {\n      // yyyy-MM \uD615\uC2DD\n      const match = /^(\\d{4})-(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new DateOnly(Number(match[1]), Number(match[2]), 1);\n    }\n    case \"date\": {\n      // yyyy-MM-dd \uD615\uC2DD\n      return DateOnly.parse(str);\n    }\n  }\n}\n\n/**\n * HTML input\uC758 type \uC18D\uC131 \uACB0\uC815\n */\nfunction getInputType(type: DatePickerUnit): string {\n  switch (type) {\n    case \"year\":\n      return \"number\";\n    case \"month\":\n      return \"month\";\n    case \"date\":\n      return \"date\";\n  }\n}\n\n/**\n * min/max \uC18D\uC131\uC744 \uD0C0\uC785\uC5D0 \uB9DE\uB294 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658\n */\nfunction formatMinMax(value: DateOnly | undefined, type: DatePickerUnit): string | undefined {\n  if (value == null) return undefined;\n\n  switch (type) {\n    case \"year\":\n      return value.toFormatString(\"yyyy\");\n    case \"month\":\n      return value.toFormatString(\"yyyy-MM\");\n    case \"date\":\n      return value.toFormatString(\"yyyy-MM-dd\");\n  }\n}\n\n/**\n * DatePicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uB0A0\uC9DC \uC785\uB825 \uD544\uB4DC. year, month, date \uB2E8\uC704\uB97C \uC9C0\uC6D0\uD55C\uB2E4.\n * \uB0B4\uBD80\uC801\uC73C\uB85C string \u2194 DateOnly \uD0C0\uC785 \uBCC0\uD658\uC744 \uCC98\uB9AC\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * // \uB0A0\uC9DC \uC785\uB825\n * <DatePicker unit=\"date\" value={date()} onValueChange={setDate} />\n *\n * // \uC5F0\uB3C4\uB9CC \uC785\uB825\n * <DatePicker unit=\"year\" value={yearDate()} onValueChange={setYearDate} />\n *\n * // \uC5F0\uC6D4 \uC785\uB825\n * <DatePicker unit=\"month\" value={monthDate()} onValueChange={setMonthDate} />\n *\n * // min/max \uC81C\uD55C\n * <DatePicker\n *   unit=\"date\"\n *   value={date()}\n *   min={new DateOnly(2025, 1, 1)}\n *   max={new DateOnly(2025, 12, 31)}\n * />\n * ```\n */\nexport const DatePicker: Component<DatePickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"unit\",\n    \"min\",\n    \"max\",\n    \"title\",\n    \"disabled\",\n    \"readonly\",\n    \"error\",\n    \"size\",\n    \"inset\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // \uAE30\uBCF8 \uB2E8\uC704\uB294 date\n  const fieldType = () => local.unit ?? \"date\";\n\n  // controlled/uncontrolled \uD328\uD134 \uC9C0\uC6D0\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  });\n\n  // \uD45C\uC2DC \uAC12\n  const displayValue = () => formatValue(value(), fieldType());\n\n  // \uAC12 \uD655\uC815 \uD578\uB4E4\uB7EC (\uD3EC\uCEE4\uC2A4 \uC544\uC6C3 \uB610\uB294 Enter \uC2DC)\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const newValue = e.currentTarget.value;\n    const parsed = parseValue(newValue, fieldType());\n    setValue(parsed);\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (includeCustomClass: \uC678\uBD80 class\uB97C \uD3EC\uD568\uD560\uC9C0 \uC5EC\uBD80)\n  const getWrapperClass = (includeCustomClass: boolean) =>\n    twMerge(\n      fieldBaseClass,\n      local.size && fieldSizeClasses[local.size],\n      local.error && fieldErrorClass,\n      local.disabled && fieldDisabledClass,\n      local.inset && fieldInsetClass + \" block\",\n      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),\n\n      includeCustomClass && local.class,\n    );\n\n  // \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80\n  const isEditable = () => !local.disabled && !local.readonly;\n\n  return (\n    <Show\n      when={local.inset}\n      fallback={\n        // standalone \uBAA8\uB4DC: \uAE30\uC874 Show \uD328\uD134 \uC720\uC9C0\n        <Show\n          when={isEditable()}\n          fallback={\n            <div\n              {...rest}\n              data-date-field\n              class={twMerge(getWrapperClass(true), \"sd-date-field\")}\n              style={local.style}\n              title={local.title}\n            >\n              {displayValue() || \"\\u00A0\"}\n            </div>\n          }\n        >\n          <div {...rest} data-date-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type={getInputType(fieldType())}\n              class={fieldInputClass}\n              value={displayValue()}\n              title={local.title}\n              min={formatMinMax(local.min, fieldType())}\n              max={formatMinMax(local.max, fieldType())}\n              onChange={handleChange}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div\n        {...rest}\n        data-date-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div data-date-field-content style={{ visibility: isEditable() ? \"hidden\" : undefined }} title={local.title}>\n          {displayValue() || \"\\u00A0\"}\n        </div>\n\n        <Show when={isEditable()}>\n          <input\n            type={getInputType(fieldType())}\n            class={clsx(fieldInputClass, \"absolute left-0 top-0 size-full\", \"px-2 py-1\")}\n            value={displayValue()}\n            title={local.title}\n            min={formatMinMax(local.min, fieldType())}\n            max={formatMinMax(local.max, fieldType())}\n            onChange={handleChange}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { DateOnly } from \"@simplysm/core-common\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport {\n  type FieldSize,\n  fieldBaseClass,\n  fieldSizeClasses,\n  fieldInsetClass,\n  fieldInsetHeightClass,\n  fieldInsetSizeHeightClasses,\n  fieldDisabledClass,\n  fieldInputClass,\n} from \"./Field.styles\";\n\ntype DatePickerUnit = \"year\" | \"month\" | \"date\";\n\nexport interface DatePickerProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: DateOnly;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: DateOnly | undefined) => void;\n\n  /** \uB0A0\uC9DC \uB2E8\uC704 */\n  unit?: DatePickerUnit;\n\n  /** \uCD5C\uC18C \uB0A0\uC9DC */\n  min?: DateOnly;\n\n  /** \uCD5C\uB300 \uB0A0\uC9DC */\n  max?: DateOnly;\n\n  /** \uD0C0\uC774\uD2C0 (\uD234\uD301) */\n  title?: string;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC77D\uAE30 \uC804\uC6A9 */\n  readonly?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uD14C\uB450\uB9AC \uC5C6\uB294 \uC2A4\uD0C0\uC77C */\n  inset?: boolean;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * DateOnly \uAC12\uC744 input value\uC6A9 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658 (ISO \uD615\uC2DD)\n */\nfunction formatValue(value: DateOnly | undefined, type: DatePickerUnit): string {\n  if (value == null) return \"\";\n\n  switch (type) {\n    case \"year\":\n      return value.toFormatString(\"yyyy\");\n    case \"month\":\n      return value.toFormatString(\"yyyy-MM\");\n    case \"date\":\n      return value.toFormatString(\"yyyy-MM-dd\");\n  }\n}\n\n/**\n * \uC785\uB825 \uBB38\uC790\uC5F4\uC744 DateOnly\uB85C \uBCC0\uD658\n */\nfunction parseValue(str: string, type: DatePickerUnit): DateOnly | undefined {\n  if (str === \"\") return undefined;\n\n  switch (type) {\n    case \"year\": {\n      const year = Number(str);\n      if (Number.isNaN(year)) return undefined;\n      return new DateOnly(year, 1, 1);\n    }\n    case \"month\": {\n      // yyyy-MM \uD615\uC2DD\n      const match = /^(\\d{4})-(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new DateOnly(Number(match[1]), Number(match[2]), 1);\n    }\n    case \"date\": {\n      // yyyy-MM-dd \uD615\uC2DD\n      return DateOnly.parse(str);\n    }\n  }\n}\n\n/**\n * HTML input\uC758 type \uC18D\uC131 \uACB0\uC815\n */\nfunction getInputType(type: DatePickerUnit): string {\n  switch (type) {\n    case \"year\":\n      return \"number\";\n    case \"month\":\n      return \"month\";\n    case \"date\":\n      return \"date\";\n  }\n}\n\n/**\n * min/max \uC18D\uC131\uC744 \uD0C0\uC785\uC5D0 \uB9DE\uB294 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658\n */\nfunction formatMinMax(value: DateOnly | undefined, type: DatePickerUnit): string | undefined {\n  if (value == null) return undefined;\n\n  switch (type) {\n    case \"year\":\n      return value.toFormatString(\"yyyy\");\n    case \"month\":\n      return value.toFormatString(\"yyyy-MM\");\n    case \"date\":\n      return value.toFormatString(\"yyyy-MM-dd\");\n  }\n}\n\n/**\n * DatePicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uB0A0\uC9DC \uC785\uB825 \uD544\uB4DC. year, month, date \uB2E8\uC704\uB97C \uC9C0\uC6D0\uD55C\uB2E4.\n * \uB0B4\uBD80\uC801\uC73C\uB85C string \u2194 DateOnly \uD0C0\uC785 \uBCC0\uD658\uC744 \uCC98\uB9AC\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * // \uB0A0\uC9DC \uC785\uB825\n * <DatePicker unit=\"date\" value={date()} onValueChange={setDate} />\n *\n * // \uC5F0\uB3C4\uB9CC \uC785\uB825\n * <DatePicker unit=\"year\" value={yearDate()} onValueChange={setYearDate} />\n *\n * // \uC5F0\uC6D4 \uC785\uB825\n * <DatePicker unit=\"month\" value={monthDate()} onValueChange={setMonthDate} />\n *\n * // min/max \uC81C\uD55C\n * <DatePicker\n *   unit=\"date\"\n *   value={date()}\n *   min={new DateOnly(2025, 1, 1)}\n *   max={new DateOnly(2025, 12, 31)}\n * />\n * ```\n */\nexport const DatePicker: Component<DatePickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"unit\",\n    \"min\",\n    \"max\",\n    \"title\",\n    \"disabled\",\n    \"readonly\",\n    \"size\",\n    \"inset\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // \uAE30\uBCF8 \uB2E8\uC704\uB294 date\n  const fieldType = () => local.unit ?? \"date\";\n\n  // controlled/uncontrolled \uD328\uD134 \uC9C0\uC6D0\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  });\n\n  // \uD45C\uC2DC \uAC12\n  const displayValue = () => formatValue(value(), fieldType());\n\n  // \uAC12 \uD655\uC815 \uD578\uB4E4\uB7EC (\uD3EC\uCEE4\uC2A4 \uC544\uC6C3 \uB610\uB294 Enter \uC2DC)\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const newValue = e.currentTarget.value;\n    const parsed = parseValue(newValue, fieldType());\n    setValue(parsed);\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (includeCustomClass: \uC678\uBD80 class\uB97C \uD3EC\uD568\uD560\uC9C0 \uC5EC\uBD80)\n  const getWrapperClass = (includeCustomClass: boolean) =>\n    twMerge(\n      fieldBaseClass,\n      local.size && fieldSizeClasses[local.size],\n      local.disabled && fieldDisabledClass,\n      local.inset && fieldInsetClass + \" block\",\n      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),\n\n      includeCustomClass && local.class,\n    );\n\n  // \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80\n  const isEditable = () => !local.disabled && !local.readonly;\n\n  return (\n    <Show\n      when={local.inset}\n      fallback={\n        // standalone \uBAA8\uB4DC: \uAE30\uC874 Show \uD328\uD134 \uC720\uC9C0\n        <Show\n          when={isEditable()}\n          fallback={\n            <div\n              {...rest}\n              data-date-field\n              class={twMerge(getWrapperClass(true), \"sd-date-field\")}\n              style={local.style}\n              title={local.title}\n            >\n              {displayValue() || \"\\u00A0\"}\n            </div>\n          }\n        >\n          <div {...rest} data-date-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type={getInputType(fieldType())}\n              class={fieldInputClass}\n              value={displayValue()}\n              title={local.title}\n              min={formatMinMax(local.min, fieldType())}\n              max={formatMinMax(local.max, fieldType())}\n              onChange={handleChange}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div\n        {...rest}\n        data-date-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div data-date-field-content style={{ visibility: isEditable() ? \"hidden\" : undefined }} title={local.title}>\n          {displayValue() || \"\\u00A0\"}\n        </div>\n\n        <Show when={isEditable()}>\n          <input\n            type={getInputType(fieldType())}\n            class={clsx(fieldInputClass, \"absolute left-0 top-0 size-full\", \"px-2 py-1\")}\n            value={displayValue()}\n            title={local.title}\n            min={formatMinMax(local.min, fieldType())}\n            max={formatMinMax(local.max, fieldType())}\n            onChange={handleChange}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAmC,MAAM,kBAAkB;AAC3D,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AACzC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6CP,SAAS,YAAY,OAA6B,MAA8B;AAC9E,MAAI,SAAS,KAAM,QAAO;AAE1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,MAAM,eAAe,MAAM;AAAA,IACpC,KAAK;AACH,aAAO,MAAM,eAAe,SAAS;AAAA,IACvC,KAAK;AACH,aAAO,MAAM,eAAe,YAAY;AAAA,EAC5C;AACF;AAKA,SAAS,WAAW,KAAa,MAA4C;AAC3E,MAAI,QAAQ,GAAI,QAAO;AAEvB,UAAQ,MAAM;AAAA,IACZ,KAAK,QAAQ;AACX,YAAM,OAAO,OAAO,GAAG;AACvB,UAAI,OAAO,MAAM,IAAI,EAAG,QAAO;AAC/B,aAAO,IAAI,SAAS,MAAM,GAAG,CAAC;AAAA,IAChC;AAAA,IACA,KAAK,SAAS;AAEZ,YAAM,QAAQ,oBAAoB,KAAK,GAAG;AAC1C,UAAI,SAAS,KAAM,QAAO;AAC1B,aAAO,IAAI,SAAS,OAAO,MAAM,CAAC,CAAC,GAAG,OAAO,MAAM,CAAC,CAAC,GAAG,CAAC;AAAA,IAC3D;AAAA,IACA,KAAK,QAAQ;AAEX,aAAO,SAAS,MAAM,GAAG;AAAA,IAC3B;AAAA,EACF;AACF;AAKA,SAAS,aAAa,MAA8B;AAClD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAKA,SAAS,aAAa,OAA6B,MAA0C;AAC3F,MAAI,SAAS,KAAM,QAAO;AAE1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,MAAM,eAAe,MAAM;AAAA,IACpC,KAAK;AACH,aAAO,MAAM,eAAe,SAAS;AAAA,IACvC,KAAK;AACH,aAAO,MAAM,eAAe,YAAY;AAAA,EAC5C;AACF;AA4BO,MAAM,aAAyC,CAAC,UAAU;AAC/D,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,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,YAAY,MAAM,MAAM,QAAQ;AAGtC,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM;AAAA,IACnB,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAGD,QAAM,eAAe,MAAM,YAAY,MAAM,GAAG,UAAU,CAAC;AAG3D,QAAM,eAA0D,CAAC,MAAM;AACrE,UAAM,WAAW,EAAE,cAAc;AACjC,UAAM,SAAS,WAAW,UAAU,UAAU,CAAC;AAC/C,aAAS,MAAM;AAAA,EACjB;AAGA,QAAM,kBAAkB,CAAC,uBACvB;AAAA,IACE;AAAA,IACA,MAAM,QAAQ,iBAAiB,MAAM,IAAI;AAAA,IACzC,MAAM,YAAY;AAAA,IAClB,MAAM,SAAS,kBAAkB;AAAA,IACjC,MAAM,UAAU,MAAM,OAAO,4BAA4B,MAAM,IAAI,IAAI;AAAA,IAEvE,sBAAsB,MAAM;AAAA,EAC9B;AAGF,QAAM,aAAa,MAAM,CAAC,MAAM,YAAY,CAAC,MAAM;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,MAAM;AAAA,MACZ;AAAA;AAAA,QAEE;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,WAAW;AAAA,YACjB,UACE;AAAA,cAAC;AAAA;AAAA,gBACE,GAAG;AAAA,gBACJ,mBAAe;AAAA,gBACf,OAAO,QAAQ,gBAAgB,IAAI,GAAG,eAAe;AAAA,gBACrD,OAAO,MAAM;AAAA,gBACb,OAAO,MAAM;AAAA;AAAA,cAEZ,aAAa,KAAK;AAAA,YACrB;AAAA;AAAA,UAGF,oCAAC,SAAK,GAAG,MAAM,mBAAe,MAAC,OAAO,gBAAgB,IAAI,GAAG,OAAO,MAAM,SACxE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,aAAa,UAAU,CAAC;AAAA,cAC9B,OAAO;AAAA,cACP,OAAO,aAAa;AAAA,cACpB,OAAO,MAAM;AAAA,cACb,KAAK,aAAa,MAAM,KAAK,UAAU,CAAC;AAAA,cACxC,KAAK,aAAa,MAAM,KAAK,UAAU,CAAC;AAAA,cACxC,UAAU;AAAA;AAAA,UACZ,CACF;AAAA,QACF;AAAA;AAAA;AAAA,IAIF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,mBAAe;AAAA,QACf,OAAO,QAAQ,gBAAgB,KAAK,GAAG,YAAY,MAAM,KAAK;AAAA,QAC9D,OAAO,MAAM;AAAA;AAAA,MAEb,oCAAC,SAAI,2BAAuB,MAAC,OAAO,EAAE,YAAY,WAAW,IAAI,WAAW,OAAU,GAAG,OAAO,MAAM,SACnG,aAAa,KAAK,MACrB;AAAA,MAEA,oCAAC,QAAK,MAAM,WAAW,KACrB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,aAAa,UAAU,CAAC;AAAA,UAC9B,OAAO,KAAK,iBAAiB,mCAAmC,WAAW;AAAA,UAC3E,OAAO,aAAa;AAAA,UACpB,OAAO,MAAM;AAAA,UACb,KAAK,aAAa,MAAM,KAAK,UAAU,CAAC;AAAA,UACxC,KAAK,aAAa,MAAM,KAAK,UAAU,CAAC;AAAA,UACxC,UAAU;AAAA;AAAA,MACZ,CACF;AAAA,IACF;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/components/form-control/field/DateTimePicker.d.ts

@@ -19,8 +19,6 @@ export interface DateTimePickerProps {
     disabled?: boolean;
     /** 읽기 전용 */
     readonly?: boolean;
-    /** 에러 상태 */
-    error?: boolean;
     /** 사이즈 */
     size?: FieldSize;
     /** 테두리 없는 스타일 */

package/dist/components/form-control/field/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/DateTimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAoB,MAAM,UAAU,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,KAAK,SAAS,EASf,MAAM,gBAAgB,CAAC;AAExB,KAAK,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD,cAAc;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B,cAAc;IACd,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,cAAc;IACd,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AA2DD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAuHzD,CAAC"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/DateTimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAoB,MAAM,UAAU,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EACL,KAAK,SAAS,EAQf,MAAM,gBAAgB,CAAC;AAExB,KAAK,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD,cAAc;IACd,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAE1B,cAAc;IACd,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,cAAc;IACd,GAAG,CAAC,EAAE,QAAQ,CAAC;IAEf,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AA2DD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAqHzD,CAAC"}

package/dist/components/form-control/field/DateTimePicker.js

@@ -6,7 +6,6 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import {
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -63,7 +62,6 @@ const DateTimePicker = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -83,7 +81,6 @@ const DateTimePicker = (props) => {
   const getWrapperClass = (includeCustomClass) => twMerge(
     fieldBaseClass,
     local.size && fieldSizeClasses[local.size],
-    local.error && fieldErrorClass,
     local.disabled && fieldDisabledClass,
     local.inset && fieldInsetClass + " block",
     local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),

package/dist/components/form-control/field/DateTimePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/DateTimePicker.tsx"],
-  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { DateTime } from \"@simplysm/core-common\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport {\n  type FieldSize,\n  fieldBaseClass,\n  fieldSizeClasses,\n  fieldErrorClass,\n  fieldInsetClass,\n  fieldInsetHeightClass,\n  fieldInsetSizeHeightClasses,\n  fieldDisabledClass,\n  fieldInputClass,\n} from \"./Field.styles\";\n\ntype DateTimePickerUnit = \"minute\" | \"second\";\n\nexport interface DateTimePickerProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: DateTime;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: DateTime | undefined) => void;\n\n  /** \uB0A0\uC9DC\uC2DC\uAC04 \uB2E8\uC704 */\n  unit?: DateTimePickerUnit;\n\n  /** \uCD5C\uC18C \uB0A0\uC9DC\uC2DC\uAC04 */\n  min?: DateTime;\n\n  /** \uCD5C\uB300 \uB0A0\uC9DC\uC2DC\uAC04 */\n  max?: DateTime;\n\n  /** \uD0C0\uC774\uD2C0 (\uD234\uD301) */\n  title?: string;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC77D\uAE30 \uC804\uC6A9 */\n  readonly?: boolean;\n\n  /** \uC5D0\uB7EC \uC0C1\uD0DC */\n  error?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uD14C\uB450\uB9AC \uC5C6\uB294 \uC2A4\uD0C0\uC77C */\n  inset?: boolean;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * DateTime \uAC12\uC744 input value\uC6A9 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658 (ISO \uD615\uC2DD)\n */\nfunction formatValue(value: DateTime | undefined, unit: DateTimePickerUnit): string {\n  if (value == null) return \"\";\n\n  switch (unit) {\n    case \"minute\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm\");\n    case \"second\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm:ss\");\n  }\n}\n\n/**\n * \uC785\uB825 \uBB38\uC790\uC5F4\uC744 DateTime\uC73C\uB85C \uBCC0\uD658\n */\nfunction parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined {\n  if (str === \"\") return undefined;\n\n  switch (unit) {\n    case \"minute\": {\n      // yyyy-MM-ddTHH:mm \uD615\uC2DD\n      const match = /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new DateTime(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]), Number(match[5]), 0);\n    }\n    case \"second\": {\n      // yyyy-MM-ddTHH:mm:ss \uD615\uC2DD\n      const match = /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2}):(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new DateTime(\n        Number(match[1]),\n        Number(match[2]),\n        Number(match[3]),\n        Number(match[4]),\n        Number(match[5]),\n        Number(match[6]),\n      );\n    }\n  }\n}\n\n/**\n * min/max \uC18D\uC131\uC744 \uD0C0\uC785\uC5D0 \uB9DE\uB294 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658\n */\nfunction formatMinMax(value: DateTime | undefined, unit: DateTimePickerUnit): string | undefined {\n  if (value == null) return undefined;\n\n  switch (unit) {\n    case \"minute\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm\");\n    case \"second\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm:ss\");\n  }\n}\n\n/**\n * DateTimePicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uB0A0\uC9DC\uC2DC\uAC04 \uC785\uB825 \uD544\uB4DC. minute, second \uB2E8\uC704\uB97C \uC9C0\uC6D0\uD55C\uB2E4.\n * \uB0B4\uBD80\uC801\uC73C\uB85C string \u2194 DateTime \uD0C0\uC785 \uBCC0\uD658\uC744 \uCC98\uB9AC\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * // \uB0A0\uC9DC\uC2DC\uAC04 \uC785\uB825 (\uBD84 \uB2E8\uC704)\n * <DateTimePicker unit=\"minute\" value={dateTime()} onValueChange={setDateTime} />\n *\n * // \uB0A0\uC9DC\uC2DC\uAC04 \uC785\uB825 (\uCD08 \uB2E8\uC704)\n * <DateTimePicker unit=\"second\" value={dateTime()} onValueChange={setDateTime} />\n *\n * // min/max \uC81C\uD55C\n * <DateTimePicker\n *   unit=\"minute\"\n *   value={dateTime()}\n *   min={new DateTime(2025, 1, 1, 0, 0, 0)}\n *   max={new DateTime(2025, 12, 31, 23, 59, 0)}\n * />\n * ```\n */\nexport const DateTimePicker: Component<DateTimePickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"unit\",\n    \"min\",\n    \"max\",\n    \"title\",\n    \"disabled\",\n    \"readonly\",\n    \"error\",\n    \"size\",\n    \"inset\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // \uAE30\uBCF8 \uB2E8\uC704\uB294 minute\n  const fieldType = () => local.unit ?? \"minute\";\n\n  // controlled/uncontrolled \uD328\uD134 \uC9C0\uC6D0\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  });\n\n  // \uD45C\uC2DC \uAC12\n  const displayValue = () => formatValue(value(), fieldType());\n\n  // \uAC12 \uD655\uC815 \uD578\uB4E4\uB7EC (\uD3EC\uCEE4\uC2A4 \uC544\uC6C3 \uB610\uB294 Enter \uC2DC)\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const newValue = e.currentTarget.value;\n    const parsed = parseValue(newValue, fieldType());\n    setValue(parsed);\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (includeCustomClass: inset \uBAA8\uB4DC\uC5D0\uC11C\uB294 \uCEE4\uC2A4\uD140 class\uB97C \uC678\uBD80 div\uC5D0 \uC801\uC6A9)\n  const getWrapperClass = (includeCustomClass: boolean) =>\n    twMerge(\n      fieldBaseClass,\n      local.size && fieldSizeClasses[local.size],\n      local.error && fieldErrorClass,\n      local.disabled && fieldDisabledClass,\n      local.inset && fieldInsetClass + \" block\",\n      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),\n\n      includeCustomClass && local.class,\n    );\n\n  // \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80\n  const isEditable = () => !local.disabled && !local.readonly;\n\n  // step \uC18D\uC131 (second\uC77C \uB54C 1)\n  const getStep = () => (fieldType() === \"second\" ? \"1\" : undefined);\n\n  return (\n    <Show\n      when={local.inset}\n      fallback={\n        // standalone \uBAA8\uB4DC\n        <Show\n          when={isEditable()}\n          fallback={\n            <div\n              {...rest}\n              data-datetime-field\n              class={twMerge(getWrapperClass(true), \"sd-datetime-field\")}\n              style={local.style}\n              title={local.title}\n            >\n              {displayValue() || \"\\u00A0\"}\n            </div>\n          }\n        >\n          <div {...rest} data-datetime-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type=\"datetime-local\"\n              class={fieldInputClass}\n              value={displayValue()}\n              title={local.title}\n              min={formatMinMax(local.min, fieldType())}\n              max={formatMinMax(local.max, fieldType())}\n              step={getStep()}\n              onChange={handleChange}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div\n        {...rest}\n        data-datetime-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div\n          data-datetime-field-content\n          style={{ visibility: isEditable() ? \"hidden\" : undefined }}\n          title={local.title}\n        >\n          {displayValue() || \"\\u00A0\"}\n        </div>\n\n        <Show when={isEditable()}>\n          <input\n            type=\"datetime-local\"\n            class={clsx(fieldInputClass, \"absolute left-0 top-0 size-full\", \"px-2 py-1\")}\n            value={displayValue()}\n            title={local.title}\n            min={formatMinMax(local.min, fieldType())}\n            max={formatMinMax(local.max, fieldType())}\n            step={getStep()}\n            onChange={handleChange}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { DateTime } from \"@simplysm/core-common\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport {\n  type FieldSize,\n  fieldBaseClass,\n  fieldSizeClasses,\n  fieldInsetClass,\n  fieldInsetHeightClass,\n  fieldInsetSizeHeightClasses,\n  fieldDisabledClass,\n  fieldInputClass,\n} from \"./Field.styles\";\n\ntype DateTimePickerUnit = \"minute\" | \"second\";\n\nexport interface DateTimePickerProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: DateTime;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: DateTime | undefined) => void;\n\n  /** \uB0A0\uC9DC\uC2DC\uAC04 \uB2E8\uC704 */\n  unit?: DateTimePickerUnit;\n\n  /** \uCD5C\uC18C \uB0A0\uC9DC\uC2DC\uAC04 */\n  min?: DateTime;\n\n  /** \uCD5C\uB300 \uB0A0\uC9DC\uC2DC\uAC04 */\n  max?: DateTime;\n\n  /** \uD0C0\uC774\uD2C0 (\uD234\uD301) */\n  title?: string;\n\n  /** \uBE44\uD65C\uC131\uD654 */\n  disabled?: boolean;\n\n  /** \uC77D\uAE30 \uC804\uC6A9 */\n  readonly?: boolean;\n\n  /** \uC0AC\uC774\uC988 */\n  size?: FieldSize;\n\n  /** \uD14C\uB450\uB9AC \uC5C6\uB294 \uC2A4\uD0C0\uC77C */\n  inset?: boolean;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * DateTime \uAC12\uC744 input value\uC6A9 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658 (ISO \uD615\uC2DD)\n */\nfunction formatValue(value: DateTime | undefined, unit: DateTimePickerUnit): string {\n  if (value == null) return \"\";\n\n  switch (unit) {\n    case \"minute\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm\");\n    case \"second\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm:ss\");\n  }\n}\n\n/**\n * \uC785\uB825 \uBB38\uC790\uC5F4\uC744 DateTime\uC73C\uB85C \uBCC0\uD658\n */\nfunction parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined {\n  if (str === \"\") return undefined;\n\n  switch (unit) {\n    case \"minute\": {\n      // yyyy-MM-ddTHH:mm \uD615\uC2DD\n      const match = /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new DateTime(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]), Number(match[5]), 0);\n    }\n    case \"second\": {\n      // yyyy-MM-ddTHH:mm:ss \uD615\uC2DD\n      const match = /^(\\d{4})-(\\d{2})-(\\d{2})T(\\d{2}):(\\d{2}):(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new DateTime(\n        Number(match[1]),\n        Number(match[2]),\n        Number(match[3]),\n        Number(match[4]),\n        Number(match[5]),\n        Number(match[6]),\n      );\n    }\n  }\n}\n\n/**\n * min/max \uC18D\uC131\uC744 \uD0C0\uC785\uC5D0 \uB9DE\uB294 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658\n */\nfunction formatMinMax(value: DateTime | undefined, unit: DateTimePickerUnit): string | undefined {\n  if (value == null) return undefined;\n\n  switch (unit) {\n    case \"minute\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm\");\n    case \"second\":\n      return value.toFormatString(\"yyyy-MM-ddTHH:mm:ss\");\n  }\n}\n\n/**\n * DateTimePicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uB0A0\uC9DC\uC2DC\uAC04 \uC785\uB825 \uD544\uB4DC. minute, second \uB2E8\uC704\uB97C \uC9C0\uC6D0\uD55C\uB2E4.\n * \uB0B4\uBD80\uC801\uC73C\uB85C string \u2194 DateTime \uD0C0\uC785 \uBCC0\uD658\uC744 \uCC98\uB9AC\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * // \uB0A0\uC9DC\uC2DC\uAC04 \uC785\uB825 (\uBD84 \uB2E8\uC704)\n * <DateTimePicker unit=\"minute\" value={dateTime()} onValueChange={setDateTime} />\n *\n * // \uB0A0\uC9DC\uC2DC\uAC04 \uC785\uB825 (\uCD08 \uB2E8\uC704)\n * <DateTimePicker unit=\"second\" value={dateTime()} onValueChange={setDateTime} />\n *\n * // min/max \uC81C\uD55C\n * <DateTimePicker\n *   unit=\"minute\"\n *   value={dateTime()}\n *   min={new DateTime(2025, 1, 1, 0, 0, 0)}\n *   max={new DateTime(2025, 12, 31, 23, 59, 0)}\n * />\n * ```\n */\nexport const DateTimePicker: Component<DateTimePickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"unit\",\n    \"min\",\n    \"max\",\n    \"title\",\n    \"disabled\",\n    \"readonly\",\n    \"size\",\n    \"inset\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // \uAE30\uBCF8 \uB2E8\uC704\uB294 minute\n  const fieldType = () => local.unit ?? \"minute\";\n\n  // controlled/uncontrolled \uD328\uD134 \uC9C0\uC6D0\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  });\n\n  // \uD45C\uC2DC \uAC12\n  const displayValue = () => formatValue(value(), fieldType());\n\n  // \uAC12 \uD655\uC815 \uD578\uB4E4\uB7EC (\uD3EC\uCEE4\uC2A4 \uC544\uC6C3 \uB610\uB294 Enter \uC2DC)\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const newValue = e.currentTarget.value;\n    const parsed = parseValue(newValue, fieldType());\n    setValue(parsed);\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (includeCustomClass: inset \uBAA8\uB4DC\uC5D0\uC11C\uB294 \uCEE4\uC2A4\uD140 class\uB97C \uC678\uBD80 div\uC5D0 \uC801\uC6A9)\n  const getWrapperClass = (includeCustomClass: boolean) =>\n    twMerge(\n      fieldBaseClass,\n      local.size && fieldSizeClasses[local.size],\n      local.disabled && fieldDisabledClass,\n      local.inset && fieldInsetClass + \" block\",\n      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),\n\n      includeCustomClass && local.class,\n    );\n\n  // \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80\n  const isEditable = () => !local.disabled && !local.readonly;\n\n  // step \uC18D\uC131 (second\uC77C \uB54C 1)\n  const getStep = () => (fieldType() === \"second\" ? \"1\" : undefined);\n\n  return (\n    <Show\n      when={local.inset}\n      fallback={\n        // standalone \uBAA8\uB4DC\n        <Show\n          when={isEditable()}\n          fallback={\n            <div\n              {...rest}\n              data-datetime-field\n              class={twMerge(getWrapperClass(true), \"sd-datetime-field\")}\n              style={local.style}\n              title={local.title}\n            >\n              {displayValue() || \"\\u00A0\"}\n            </div>\n          }\n        >\n          <div {...rest} data-datetime-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type=\"datetime-local\"\n              class={fieldInputClass}\n              value={displayValue()}\n              title={local.title}\n              min={formatMinMax(local.min, fieldType())}\n              max={formatMinMax(local.max, fieldType())}\n              step={getStep()}\n              onChange={handleChange}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div\n        {...rest}\n        data-datetime-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div\n          data-datetime-field-content\n          style={{ visibility: isEditable() ? \"hidden\" : undefined }}\n          title={local.title}\n        >\n          {displayValue() || \"\\u00A0\"}\n        </div>\n\n        <Show when={isEditable()}>\n          <input\n            type=\"datetime-local\"\n            class={clsx(fieldInputClass, \"absolute left-0 top-0 size-full\", \"px-2 py-1\")}\n            value={displayValue()}\n            title={local.title}\n            min={formatMinMax(local.min, fieldType())}\n            max={formatMinMax(local.max, fieldType())}\n            step={getStep()}\n            onChange={handleChange}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/form-control/field/Field.styles.d.ts

@@ -2,7 +2,6 @@ import { type ComponentSize } from "../../../styles/tokens.styles";
 export type FieldSize = ComponentSize;
 export declare const fieldBaseClass: string;
 export declare const fieldSizeClasses: Record<FieldSize, string>;
-export declare const fieldErrorClass = "border-danger-500";
 export declare const fieldInsetClass: string;
 export declare const fieldInsetHeightClass = "h-field-inset";
 export declare const fieldInsetSizeHeightClasses: Record<FieldSize, string>;

package/dist/components/form-control/field/Field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/Field.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAwB,MAAM,+BAA+B,CAAC;AAGzF,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAGtC,eAAO,MAAM,cAAc,QAAyE,CAAC;AAGrG,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGtD,CAAC;AAGF,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAGnD,eAAO,MAAM,eAAe,QAA6E,CAAC;AAG1G,eAAO,MAAM,qBAAqB,kBAAkB,CAAC;AACrD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGjE,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAAqD,CAAC;AAGrF,eAAO,MAAM,iBAAiB,QAAuD,CAAC;AAGtF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAGF,eAAO,MAAM,eAAe,QAAY,CAAC"}
+{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/Field.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAwB,MAAM,+BAA+B,CAAC;AAGzF,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAGtC,eAAO,MAAM,cAAc,QAAyE,CAAC;AAGrG,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGtD,CAAC;AAGF,eAAO,MAAM,eAAe,QAA6E,CAAC;AAG1G,eAAO,MAAM,qBAAqB,kBAAkB,CAAC;AACrD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGjE,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAAqD,CAAC;AAGrF,eAAO,MAAM,iBAAiB,QAAuD,CAAC;AAGtF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAGF,eAAO,MAAM,eAAe,QAAY,CAAC"}

package/dist/components/form-control/field/Field.styles.js

@@ -6,7 +6,6 @@ const fieldSizeClasses = {
   sm: clsx("h-field-sm", paddingSm),
   lg: clsx("h-field-lg", paddingLg)
 };
-const fieldErrorClass = "border-danger-500";
 const fieldInsetClass = clsx(insetBase, "bg-primary-50 dark:bg-primary-950/30", insetFocusOutline);
 const fieldInsetHeightClass = "h-field-inset";
 const fieldInsetSizeHeightClasses = {
@@ -23,7 +22,6 @@ const fieldInputClass = inputBase;
 export {
   fieldBaseClass,
   fieldDisabledClass,
-  fieldErrorClass,
   fieldInputClass,
   fieldInsetClass,
   fieldInsetHeightClass,

package/dist/components/form-control/field/Field.styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/Field.styles.ts"],
-  "sourcesContent": ["import clsx from \"clsx\";\nimport { type ComponentSize, paddingLg, paddingSm } from \"../../../styles/tokens.styles\";\nimport { fieldSurface, insetBase, insetFocusOutline, inputBase } from \"../../../styles/patterns.styles\";\n\nexport type FieldSize = ComponentSize;\n\n// \uAE30\uBCF8 wrapper \uC2A4\uD0C0\uC77C\nexport const fieldBaseClass = clsx(\"inline-flex items-center\", fieldSurface, \"px-2 py-1\", \"h-field\");\n\n// \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nexport const fieldSizeClasses: Record<FieldSize, string> = {\n  sm: clsx(\"h-field-sm\", paddingSm),\n  lg: clsx(\"h-field-lg\", paddingLg),\n};\n\n// \uC5D0\uB7EC \uC2A4\uD0C0\uC77C\nexport const fieldErrorClass = \"border-danger-500\";\n\n// inset \uC2A4\uD0C0\uC77C\nexport const fieldInsetClass = clsx(insetBase, \"bg-primary-50 dark:bg-primary-950/30\", insetFocusOutline);\n\n// inset \uB192\uC774 (border 2px \uC81C\uC678)\nexport const fieldInsetHeightClass = \"h-field-inset\";\nexport const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {\n  sm: \"h-field-inset-sm\",\n  lg: \"h-field-inset-lg\",\n};\n\n// disabled \uC2A4\uD0C0\uC77C\nexport const fieldDisabledClass = clsx(\"bg-base-100 text-base-500 dark:bg-base-800\");\n\n// textarea wrapper \uC2A4\uD0C0\uC77C (h-field \uC81C\uAC70)\nexport const textAreaBaseClass = clsx(\"inline-block w-48\", fieldSurface, \"px-2 py-1\");\n\n// textarea \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C (h-field-* \uC81C\uAC70)\nexport const textAreaSizeClasses: Record<FieldSize, string> = {\n  sm: paddingSm,\n  lg: paddingLg,\n};\n\n// input \uC2A4\uD0C0\uC77C\nexport const fieldInputClass = inputBase;\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,SAA6B,WAAW,iBAAiB;AACzD,SAAS,cAAc,WAAW,mBAAmB,iBAAiB;AAK/D,MAAM,iBAAiB,KAAK,4BAA4B,cAAc,aAAa,SAAS;AAG5F,MAAM,mBAA8C;AAAA,EACzD,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAClC;AAGO,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB,KAAK,WAAW,wCAAwC,iBAAiB;AAGjG,MAAM,wBAAwB;AAC9B,MAAM,8BAAyD;AAAA,EACpE,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,qBAAqB,KAAK,4CAA4C;AAG5E,MAAM,oBAAoB,KAAK,qBAAqB,cAAc,WAAW;AAG7E,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,kBAAkB;",
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { type ComponentSize, paddingLg, paddingSm } from \"../../../styles/tokens.styles\";\nimport { fieldSurface, insetBase, insetFocusOutline, inputBase } from \"../../../styles/patterns.styles\";\n\nexport type FieldSize = ComponentSize;\n\n// \uAE30\uBCF8 wrapper \uC2A4\uD0C0\uC77C\nexport const fieldBaseClass = clsx(\"inline-flex items-center\", fieldSurface, \"px-2 py-1\", \"h-field\");\n\n// \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nexport const fieldSizeClasses: Record<FieldSize, string> = {\n  sm: clsx(\"h-field-sm\", paddingSm),\n  lg: clsx(\"h-field-lg\", paddingLg),\n};\n\n// inset \uC2A4\uD0C0\uC77C\nexport const fieldInsetClass = clsx(insetBase, \"bg-primary-50 dark:bg-primary-950/30\", insetFocusOutline);\n\n// inset \uB192\uC774 (border 2px \uC81C\uC678)\nexport const fieldInsetHeightClass = \"h-field-inset\";\nexport const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {\n  sm: \"h-field-inset-sm\",\n  lg: \"h-field-inset-lg\",\n};\n\n// disabled \uC2A4\uD0C0\uC77C\nexport const fieldDisabledClass = clsx(\"bg-base-100 text-base-500 dark:bg-base-800\");\n\n// textarea wrapper \uC2A4\uD0C0\uC77C (h-field \uC81C\uAC70)\nexport const textAreaBaseClass = clsx(\"inline-block w-48\", fieldSurface, \"px-2 py-1\");\n\n// textarea \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C (h-field-* \uC81C\uAC70)\nexport const textAreaSizeClasses: Record<FieldSize, string> = {\n  sm: paddingSm,\n  lg: paddingLg,\n};\n\n// input \uC2A4\uD0C0\uC77C\nexport const fieldInputClass = inputBase;\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAA6B,WAAW,iBAAiB;AACzD,SAAS,cAAc,WAAW,mBAAmB,iBAAiB;AAK/D,MAAM,iBAAiB,KAAK,4BAA4B,cAAc,aAAa,SAAS;AAG5F,MAAM,mBAA8C;AAAA,EACzD,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAClC;AAGO,MAAM,kBAAkB,KAAK,WAAW,wCAAwC,iBAAiB;AAGjG,MAAM,wBAAwB;AAC9B,MAAM,8BAAyD;AAAA,EACpE,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,qBAAqB,KAAK,4CAA4C;AAG5E,MAAM,oBAAoB,KAAK,qBAAqB,cAAc,WAAW;AAG7E,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,kBAAkB;",
   "names": []
 }

package/dist/components/form-control/field/NumberInput.d.ts

@@ -17,8 +17,6 @@ export interface NumberInputProps {
     disabled?: boolean;
     /** 읽기 전용 */
     readonly?: boolean;
-    /** 에러 상태 */
-    error?: boolean;
     /** 사이즈 */
     size?: FieldSize;
     /** 테두리 없는 스타일 */

package/dist/components/form-control/field/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAgD,MAAM,UAAU,CAAC;AAIlG,OAAO,EACL,KAAK,SAAS,EASf,MAAM,gBAAgB,CAAC;AAWxB,MAAM,WAAW,gBAAgB;IAC/B,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAEpD,4BAA4B;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AA8ED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CA0KnD,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form-control/field/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAgD,MAAM,UAAU,CAAC;AAIlG,OAAO,EACL,KAAK,SAAS,EAQf,MAAM,gBAAgB,CAAC;AAWxB,MAAM,WAAW,gBAAgB;IAC/B,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,cAAc;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAEpD,4BAA4B;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,eAAe;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,iBAAiB;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gBAAgB;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AA8ED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAwKnD,CAAC"}

package/dist/components/form-control/field/NumberInput.js

@@ -5,7 +5,6 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import {
   fieldBaseClass,
   fieldSizeClasses,
-  fieldErrorClass,
   fieldInsetClass,
   fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
@@ -65,7 +64,6 @@ const NumberInput = (props) => {
     "title",
     "disabled",
     "readonly",
-    "error",
     "size",
     "inset",
     "class",
@@ -116,7 +114,6 @@ const NumberInput = (props) => {
   const getWrapperClass = (includeCustomClass) => twMerge(
     fieldBaseClass,
     local.size && fieldSizeClasses[local.size],
-    local.error && fieldErrorClass,
     local.disabled && fieldDisabledClass,
     local.inset && fieldInsetClass,
     local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),