@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,167 @@
+import clsx from "clsx";
+import { Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { DateOnly } from "@simplysm/core-common";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import {
+  fieldBaseClass,
+  fieldSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldInsetHeightClass,
+  fieldInsetSizeHeightClasses,
+  fieldDisabledClass,
+  fieldInputClass
+} from "./Field.styles";
+function formatValue(value, type) {
+  if (value == null) return "";
+  switch (type) {
+    case "year":
+      return value.toFormatString("yyyy");
+    case "month":
+      return value.toFormatString("yyyy-MM");
+    case "date":
+      return value.toFormatString("yyyy-MM-dd");
+  }
+}
+function parseValue(str, type) {
+  if (str === "") return void 0;
+  switch (type) {
+    case "year": {
+      const year = Number(str);
+      if (Number.isNaN(year)) return void 0;
+      return new DateOnly(year, 1, 1);
+    }
+    case "month": {
+      const match = /^(\d{4})-(\d{2})$/.exec(str);
+      if (match == null) return void 0;
+      return new DateOnly(Number(match[1]), Number(match[2]), 1);
+    }
+    case "date": {
+      return DateOnly.parse(str);
+    }
+  }
+}
+function getInputType(type) {
+  switch (type) {
+    case "year":
+      return "number";
+    case "month":
+      return "month";
+    case "date":
+      return "date";
+  }
+}
+function formatMinMax(value, type) {
+  if (value == null) return void 0;
+  switch (type) {
+    case "year":
+      return value.toFormatString("yyyy");
+    case "month":
+      return value.toFormatString("yyyy-MM");
+    case "date":
+      return value.toFormatString("yyyy-MM-dd");
+  }
+}
+const DatePicker = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "unit",
+    "min",
+    "max",
+    "title",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "class",
+    "style"
+  ]);
+  const fieldType = () => local.unit ?? "date";
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange
+  });
+  const displayValue = () => formatValue(value(), fieldType());
+  const handleChange = (e) => {
+    const newValue = e.currentTarget.value;
+    const parsed = parseValue(newValue, fieldType());
+    setValue(parsed);
+  };
+  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),
+    includeCustomClass && local.class
+  );
+  const isEditable = () => !local.disabled && !local.readonly;
+  return /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: local.inset,
+      fallback: (
+        // standalone 모드: 기존 Show 패턴 유지
+        /* @__PURE__ */ React.createElement(
+          Show,
+          {
+            when: isEditable(),
+            fallback: /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                ...rest,
+                "data-date-field": true,
+                class: twMerge(getWrapperClass(true), "sd-date-field"),
+                style: local.style,
+                title: local.title
+              },
+              displayValue() || "\xA0"
+            )
+          },
+          /* @__PURE__ */ React.createElement("div", { ...rest, "data-date-field": true, class: getWrapperClass(true), style: local.style }, /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: getInputType(fieldType()),
+              class: fieldInputClass,
+              value: displayValue(),
+              title: local.title,
+              min: formatMinMax(local.min, fieldType()),
+              max: formatMinMax(local.max, fieldType()),
+              onChange: handleChange
+            }
+          ))
+        )
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        "data-date-field": true,
+        class: twMerge(getWrapperClass(false), "relative", local.class),
+        style: local.style
+      },
+      /* @__PURE__ */ React.createElement("div", { "data-date-field-content": true, style: { visibility: isEditable() ? "hidden" : void 0 }, title: local.title }, displayValue() || "\xA0"),
+      /* @__PURE__ */ React.createElement(Show, { when: isEditable() }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: getInputType(fieldType()),
+          class: clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1"),
+          value: displayValue(),
+          title: local.title,
+          min: formatMinMax(local.min, fieldType()),
+          max: formatMinMax(local.max, fieldType()),
+          onChange: handleChange
+        }
+      ))
+    )
+  );
+};
+export {
+  DatePicker
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +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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",
+  "names": []
+}

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

@@ -0,0 +1,168 @@
+import clsx from "clsx";
+import { Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { DateTime } from "@simplysm/core-common";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import {
+  fieldBaseClass,
+  fieldSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldInsetHeightClass,
+  fieldInsetSizeHeightClasses,
+  fieldDisabledClass,
+  fieldInputClass
+} from "./Field.styles";
+function formatValue(value, unit) {
+  if (value == null) return "";
+  switch (unit) {
+    case "minute":
+      return value.toFormatString("yyyy-MM-ddTHH:mm");
+    case "second":
+      return value.toFormatString("yyyy-MM-ddTHH:mm:ss");
+  }
+}
+function parseValue(str, unit) {
+  if (str === "") return void 0;
+  switch (unit) {
+    case "minute": {
+      const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(str);
+      if (match == null) return void 0;
+      return new DateTime(Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]), Number(match[5]), 0);
+    }
+    case "second": {
+      const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})$/.exec(str);
+      if (match == null) return void 0;
+      return new DateTime(
+        Number(match[1]),
+        Number(match[2]),
+        Number(match[3]),
+        Number(match[4]),
+        Number(match[5]),
+        Number(match[6])
+      );
+    }
+  }
+}
+function formatMinMax(value, unit) {
+  if (value == null) return void 0;
+  switch (unit) {
+    case "minute":
+      return value.toFormatString("yyyy-MM-ddTHH:mm");
+    case "second":
+      return value.toFormatString("yyyy-MM-ddTHH:mm:ss");
+  }
+}
+const DateTimePicker = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "unit",
+    "min",
+    "max",
+    "title",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "class",
+    "style"
+  ]);
+  const fieldType = () => local.unit ?? "minute";
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange
+  });
+  const displayValue = () => formatValue(value(), fieldType());
+  const handleChange = (e) => {
+    const newValue = e.currentTarget.value;
+    const parsed = parseValue(newValue, fieldType());
+    setValue(parsed);
+  };
+  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),
+    includeCustomClass && local.class
+  );
+  const isEditable = () => !local.disabled && !local.readonly;
+  const getStep = () => fieldType() === "second" ? "1" : void 0;
+  return /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: local.inset,
+      fallback: (
+        // standalone 모드
+        /* @__PURE__ */ React.createElement(
+          Show,
+          {
+            when: isEditable(),
+            fallback: /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                ...rest,
+                "data-datetime-field": true,
+                class: twMerge(getWrapperClass(true), "sd-datetime-field"),
+                style: local.style,
+                title: local.title
+              },
+              displayValue() || "\xA0"
+            )
+          },
+          /* @__PURE__ */ React.createElement("div", { ...rest, "data-datetime-field": true, class: getWrapperClass(true), style: local.style }, /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: "datetime-local",
+              class: fieldInputClass,
+              value: displayValue(),
+              title: local.title,
+              min: formatMinMax(local.min, fieldType()),
+              max: formatMinMax(local.max, fieldType()),
+              step: getStep(),
+              onChange: handleChange
+            }
+          ))
+        )
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        "data-datetime-field": true,
+        class: twMerge(getWrapperClass(false), "relative", local.class),
+        style: local.style
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-datetime-field-content": true,
+          style: { visibility: isEditable() ? "hidden" : void 0 },
+          title: local.title
+        },
+        displayValue() || "\xA0"
+      ),
+      /* @__PURE__ */ React.createElement(Show, { when: isEditable() }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "datetime-local",
+          class: clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1"),
+          value: displayValue(),
+          title: local.title,
+          min: formatMinMax(local.min, fieldType()),
+          max: formatMinMax(local.max, fieldType()),
+          step: getStep(),
+          onChange: handleChange
+        }
+      ))
+    )
+  );
+};
+export {
+  DateTimePicker
+};
+//# sourceMappingURL=DateTimePicker.js.map

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

@@ -0,0 +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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",
+  "names": []
+}

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

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { paddingLg, paddingSm } from "../../../styles/tokens.styles";
+import { fieldSurface, insetBase, insetFocusOutline, inputBase } from "../../../styles/patterns.styles";
+const fieldBaseClass = clsx("inline-flex items-center", fieldSurface, "px-2 py-1", "h-field");
+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 = {
+  sm: "h-field-inset-sm",
+  lg: "h-field-inset-lg"
+};
+const fieldDisabledClass = clsx("bg-base-100 text-base-500 dark:bg-base-800");
+const textAreaBaseClass = clsx("inline-block w-48", fieldSurface, "px-2 py-1");
+const textAreaSizeClasses = {
+  sm: paddingSm,
+  lg: paddingLg
+};
+const fieldInputClass = inputBase;
+export {
+  fieldBaseClass,
+  fieldDisabledClass,
+  fieldErrorClass,
+  fieldInputClass,
+  fieldInsetClass,
+  fieldInsetHeightClass,
+  fieldInsetSizeHeightClasses,
+  fieldSizeClasses,
+  textAreaBaseClass,
+  textAreaSizeClasses
+};
+//# sourceMappingURL=Field.styles.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -0,0 +1,193 @@
+import { Show, splitProps, createSignal, createEffect } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import {
+  fieldBaseClass,
+  fieldSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldInsetHeightClass,
+  fieldInsetSizeHeightClasses,
+  fieldDisabledClass,
+  fieldInputClass
+} from "./Field.styles";
+import { textMuted } from "../../../styles/tokens.styles";
+const numberInputClass = clsx(
+  fieldInputClass,
+  "text-right",
+  "[&::-webkit-outer-spin-button]:appearance-none",
+  "[&::-webkit-inner-spin-button]:appearance-none"
+);
+function formatNumber(value, useComma, minDigits) {
+  if (value == null) return "";
+  let result;
+  if (minDigits != null && minDigits > 0) {
+    const valueStr = String(value);
+    const decimalIndex = valueStr.indexOf(".");
+    const currentDigits = decimalIndex >= 0 ? valueStr.length - decimalIndex - 1 : 0;
+    if (currentDigits < minDigits) {
+      result = value.toFixed(minDigits);
+    } else {
+      result = valueStr;
+    }
+  } else {
+    result = String(value);
+  }
+  if (useComma) {
+    const dotIndex = result.indexOf(".");
+    const integerPart = dotIndex >= 0 ? result.slice(0, dotIndex) : result;
+    const decimalPart = dotIndex >= 0 ? result.slice(dotIndex + 1) : null;
+    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    result = decimalPart !== null ? `${formattedInteger}.${decimalPart}` : formattedInteger;
+  }
+  return result;
+}
+function parseNumber(str) {
+  if (str === "" || str === "-") return void 0;
+  const cleanStr = str.replace(/,/g, "");
+  const num = Number(cleanStr);
+  if (Number.isNaN(num)) return void 0;
+  return num;
+}
+function isValidNumberInput(str) {
+  if (str === "" || str === "-" || str === ".") return true;
+  const cleanStr = str.replace(/,/g, "");
+  return /^-?\d*\.?\d*$/.test(cleanStr);
+}
+const NumberInput = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "comma",
+    "minDigits",
+    "placeholder",
+    "title",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "class",
+    "style"
+  ]);
+  const [inputStr, setInputStr] = createSignal("");
+  const [isEditing, setIsEditing] = createSignal(false);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange
+  });
+  createEffect(() => {
+    const val = value();
+    if (!isEditing()) {
+      setInputStr(formatNumber(val, local.comma ?? true, local.minDigits));
+    }
+  });
+  const displayValue = () => {
+    if (isEditing()) {
+      return inputStr();
+    }
+    return formatNumber(value(), local.comma ?? true, local.minDigits);
+  };
+  const handleInput = (e) => {
+    const newValue = e.currentTarget.value;
+    if (!isValidNumberInput(newValue)) {
+      e.currentTarget.value = inputStr();
+      return;
+    }
+    setInputStr(newValue);
+    setIsEditing(true);
+    const num = parseNumber(newValue);
+    setValue(num);
+  };
+  const handleFocus = () => {
+    setIsEditing(true);
+    const val = value();
+    if (val != null) {
+      setInputStr(String(val));
+    } else {
+      setInputStr("");
+    }
+  };
+  const handleBlur = () => {
+    setIsEditing(false);
+    setInputStr(formatNumber(value(), local.comma ?? true, local.minDigits));
+  };
+  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),
+    includeCustomClass && local.class
+  );
+  const isEditable = () => !local.disabled && !local.readonly;
+  return /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: local.inset,
+      fallback: (
+        // standalone 모드: 기존 Show 패턴 유지
+        /* @__PURE__ */ React.createElement(
+          Show,
+          {
+            when: isEditable(),
+            fallback: /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                ...rest,
+                "data-number-field": true,
+                class: twMerge(getWrapperClass(true), "sd-number-field", "justify-end"),
+                style: local.style,
+                title: local.title
+              },
+              formatNumber(value(), local.comma ?? true, local.minDigits) || (local.placeholder != null && local.placeholder !== "" ? /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder) : "\xA0")
+            )
+          },
+          /* @__PURE__ */ React.createElement("div", { ...rest, "data-number-field": true, class: getWrapperClass(true), style: local.style }, /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: "text",
+              inputmode: "numeric",
+              class: numberInputClass,
+              value: displayValue(),
+              placeholder: local.placeholder,
+              title: local.title,
+              onInput: handleInput,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }
+          ))
+        )
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { ...rest, "data-number-field": true, class: clsx("relative", local.class), style: local.style }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-number-field-content": true,
+        class: twMerge(getWrapperClass(false), "justify-end"),
+        style: { visibility: isEditable() ? "hidden" : void 0 },
+        title: local.title
+      },
+      formatNumber(value(), local.comma ?? true, local.minDigits) || (local.placeholder != null && local.placeholder !== "" ? /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder) : "\xA0")
+    ), /* @__PURE__ */ React.createElement(Show, { when: isEditable() }, /* @__PURE__ */ React.createElement("div", { class: twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full") }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        inputmode: "numeric",
+        class: numberInputClass,
+        value: displayValue(),
+        placeholder: local.placeholder,
+        title: local.title,
+        onInput: handleInput,
+        onFocus: handleFocus,
+        onBlur: handleBlur
+      }
+    ))))
+  );
+};
+export {
+  NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map