@simplysm/solid 13.0.0-beta.11

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/field/NumberInput.tsx"],
+  "sourcesContent": ["import { type Component, type JSX, Show, splitProps, createSignal, createEffect } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\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\";\nimport { textMuted } from \"../../../styles/tokens.styles\";\n\n// NumberInput \uC804\uC6A9 input \uC2A4\uD0C0\uC77C (\uC6B0\uCE21 \uC815\uB82C + \uC2A4\uD53C\uB108 \uC228\uAE40)\nconst numberInputClass = clsx(\n  fieldInputClass,\n  \"text-right\",\n  \"[&::-webkit-outer-spin-button]:appearance-none\",\n  \"[&::-webkit-inner-spin-button]:appearance-none\",\n);\n\nexport interface NumberInputProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: number;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: number | undefined) => void;\n\n  /** \uCC9C\uB2E8\uC704 \uCF64\uB9C8 \uD45C\uC2DC (\uAE30\uBCF8\uAC12: true) */\n  comma?: boolean;\n\n  /** \uCD5C\uC18C \uC18C\uC218\uC810 \uC790\uB9BF\uC218 */\n  minDigits?: number;\n\n  /** \uD50C\uB808\uC774\uC2A4\uD640\uB354 */\n  placeholder?: string;\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 * \uC22B\uC790\uB97C \uD45C\uC2DC\uC6A9 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658\uD55C\uB2E4\n * @param value \uC22B\uC790 \uAC12\n * @param useComma \uCC9C\uB2E8\uC704 \uCF64\uB9C8 \uC0AC\uC6A9 \uC5EC\uBD80\n * @param minDigits \uCD5C\uC18C \uC18C\uC218\uC810 \uC790\uB9BF\uC218\n * @returns \uD45C\uC2DC\uC6A9 \uBB38\uC790\uC5F4\n */\nfunction formatNumber(value: number | undefined, useComma: boolean, minDigits?: number): string {\n  if (value == null) return \"\";\n\n  let result: string;\n\n  if (minDigits != null && minDigits > 0) {\n    // \uD604\uC7AC \uC18C\uC218\uC810 \uC790\uB9BF\uC218 \uD655\uC778\n    const valueStr = String(value);\n    const decimalIndex = valueStr.indexOf(\".\");\n    const currentDigits = decimalIndex >= 0 ? valueStr.length - decimalIndex - 1 : 0;\n\n    // \uCD5C\uC18C \uC790\uB9BF\uC218\uBCF4\uB2E4 \uC791\uC73C\uBA74 \uD328\uB529\n    if (currentDigits < minDigits) {\n      result = value.toFixed(minDigits);\n    } else {\n      result = valueStr;\n    }\n  } else {\n    result = String(value);\n  }\n\n  if (useComma) {\n    // \uC815\uC218\uBD80\uC640 \uC18C\uC218\uBD80 \uBD84\uB9AC\n    const dotIndex = result.indexOf(\".\");\n    const integerPart = dotIndex >= 0 ? result.slice(0, dotIndex) : result;\n    const decimalPart = dotIndex >= 0 ? result.slice(dotIndex + 1) : null;\n    // \uC815\uC218\uBD80\uC5D0\uB9CC \uCF64\uB9C8 \uCD94\uAC00\n    const formattedInteger = integerPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n    result = decimalPart !== null ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n  }\n\n  return result;\n}\n\n/**\n * \uD45C\uC2DC\uC6A9 \uBB38\uC790\uC5F4\uC744 \uC22B\uC790\uB85C \uBCC0\uD658\uD55C\uB2E4\n * @param str \uD45C\uC2DC\uC6A9 \uBB38\uC790\uC5F4\n * @returns \uC22B\uC790 \uAC12 \uB610\uB294 undefined\n */\nfunction parseNumber(str: string): number | undefined {\n  if (str === \"\" || str === \"-\") return undefined;\n\n  // \uCF64\uB9C8 \uC81C\uAC70\n  const cleanStr = str.replace(/,/g, \"\");\n\n  // \uC22B\uC790\uB85C \uBCC0\uD658 \uC2DC\uB3C4\n  const num = Number(cleanStr);\n\n  if (Number.isNaN(num)) return undefined;\n\n  return num;\n}\n\n/**\n * \uC785\uB825 \uBB38\uC790\uC5F4\uC774 \uC720\uD6A8\uD55C \uC22B\uC790 \uD615\uC2DD\uC778\uC9C0 \uD655\uC778\uD55C\uB2E4\n * @param str \uC785\uB825 \uBB38\uC790\uC5F4\n * @returns \uC720\uD6A8 \uC5EC\uBD80\n */\nfunction isValidNumberInput(str: string): boolean {\n  if (str === \"\" || str === \"-\" || str === \".\") return true;\n\n  // \uCF64\uB9C8 \uC81C\uAC70\n  const cleanStr = str.replace(/,/g, \"\");\n\n  // \uC22B\uC790 \uD615\uC2DD \uD328\uD134 (\uC785\uB825 \uC911 \uC0C1\uD0DC \uD3EC\uD568)\n  // \uC608: \"123\", \"123.\", \"123.45\", \"-123\", \"-\", \"-.123\"\n  return /^-?\\d*\\.?\\d*$/.test(cleanStr);\n}\n\n/**\n * NumberInput \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <NumberInput value={num()} onValueChange={setNum} />\n *\n * // \uCC9C\uB2E8\uC704 \uCF64\uB9C8 \uC5C6\uC774\n * <NumberInput value={num()} comma={false} />\n *\n * // \uCD5C\uC18C \uC18C\uC218\uC810 \uC790\uB9BF\uC218 \uC9C0\uC815\n * <NumberInput value={price()} minDigits={2} />\n * ```\n */\nexport const NumberInput: Component<NumberInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"comma\",\n    \"minDigits\",\n    \"placeholder\",\n    \"title\",\n    \"disabled\",\n    \"readonly\",\n    \"error\",\n    \"size\",\n    \"inset\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // \uC785\uB825 \uC911\uC778 \uC0C1\uD0DC\uB97C \uCD94\uC801\uD558\uAE30 \uC704\uD55C \uB0B4\uBD80 \uBB38\uC790\uC5F4 \uC0C1\uD0DC\n  const [inputStr, setInputStr] = createSignal<string>(\"\");\n  const [isEditing, setIsEditing] = createSignal(false);\n\n  // controlled/uncontrolled \uD328\uD134 \uC9C0\uC6D0\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value,\n    onChange: () => local.onValueChange,\n  });\n\n  // \uC678\uBD80 \uAC12 \uBCC0\uACBD \uC2DC \uC785\uB825 \uBB38\uC790\uC5F4 \uB3D9\uAE30\uD654\n  createEffect(() => {\n    const val = value();\n    if (!isEditing()) {\n      setInputStr(formatNumber(val, local.comma ?? true, local.minDigits));\n    }\n  });\n\n  // \uD45C\uC2DC \uAC12 \uACC4\uC0B0\n  const displayValue = () => {\n    if (isEditing()) {\n      return inputStr();\n    }\n    return formatNumber(value(), local.comma ?? true, local.minDigits);\n  };\n\n  // \uC785\uB825 \uD578\uB4E4\uB7EC\n  const handleInput: JSX.InputEventHandler<HTMLInputElement, InputEvent> = (e) => {\n    const newValue = e.currentTarget.value;\n\n    // \uC720\uD6A8\uD55C \uC22B\uC790 \uD615\uC2DD\uC778\uC9C0 \uD655\uC778\n    if (!isValidNumberInput(newValue)) {\n      // \uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uC785\uB825\uC740 \uBB34\uC2DC\uD558\uACE0 \uC774\uC804 \uAC12 \uBCF5\uC6D0\n      e.currentTarget.value = inputStr();\n      return;\n    }\n\n    setInputStr(newValue);\n    setIsEditing(true);\n\n    // \uC22B\uC790\uB85C \uBCC0\uD658\n    const num = parseNumber(newValue);\n    setValue(num);\n  };\n\n  // focus \uD578\uB4E4\uB7EC\n  const handleFocus: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> = () => {\n    setIsEditing(true);\n    // focus \uC2DC \uCF64\uB9C8 \uC81C\uAC70\uB41C \uAC12\uC73C\uB85C \uC124\uC815\n    const val = value();\n    if (val != null) {\n      setInputStr(String(val));\n    } else {\n      setInputStr(\"\");\n    }\n  };\n\n  // blur \uD578\uB4E4\uB7EC\n  const handleBlur: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> = () => {\n    setIsEditing(false);\n    // blur \uC2DC \uD3EC\uB9F7\uD305 \uC801\uC6A9\n    setInputStr(formatNumber(value(), local.comma ?? true, local.minDigits));\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (inset \uBD84\uAE30\uC5D0\uC11C\uB294 local.class \uC81C\uC678)\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,\n      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),\n\n      includeCustomClass && local.class,\n    );\n\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-number-field\n              class={twMerge(getWrapperClass(true), \"sd-number-field\", \"justify-end\")}\n              style={local.style}\n              title={local.title}\n            >\n              {formatNumber(value(), local.comma ?? true, local.minDigits) ||\n                (local.placeholder != null && local.placeholder !== \"\" ? (\n                  <span class={textMuted}>{local.placeholder}</span>\n                ) : (\n                  \"\\u00A0\"\n                ))}\n            </div>\n          }\n        >\n          <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class={numberInputClass}\n              value={displayValue()}\n              placeholder={local.placeholder}\n              title={local.title}\n              onInput={handleInput}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div {...rest} data-number-field class={clsx(\"relative\", local.class)} style={local.style}>\n        <div\n          data-number-field-content\n          class={twMerge(getWrapperClass(false), \"justify-end\")}\n          style={{ visibility: isEditable() ? \"hidden\" : undefined }}\n          title={local.title}\n        >\n          {formatNumber(value(), local.comma ?? true, local.minDigits) ||\n            (local.placeholder != null && local.placeholder !== \"\" ? (\n              <span class={textMuted}>{local.placeholder}</span>\n            ) : (\n              \"\\u00A0\"\n            ))}\n        </div>\n\n        <Show when={isEditable()}>\n          <div class={twMerge(getWrapperClass(false), \"absolute left-0 top-0 size-full\")}>\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class={numberInputClass}\n              value={displayValue()}\n              placeholder={local.placeholder}\n              title={local.title}\n              onInput={handleInput}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n            />\n          </div>\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,178 @@
+import clsx from "clsx";
+import { createEffect, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createIMEHandler } from "../../../hooks/createIMEHandler";
+import {
+  fieldBaseClass,
+  fieldSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldInsetHeightClass,
+  fieldInsetSizeHeightClasses,
+  fieldDisabledClass,
+  fieldInputClass
+} from "./Field.styles";
+import { textMuted } from "../../../styles/tokens.styles";
+function applyFormat(value, format) {
+  if (!value || !format) return value;
+  let result = "";
+  let valueIndex = 0;
+  for (let i = 0; i < format.length && valueIndex < value.length; i++) {
+    if (format[i] === "X") {
+      result += value[valueIndex];
+      valueIndex++;
+    } else {
+      result += format[i];
+    }
+  }
+  return result;
+}
+function removeFormat(formattedValue, format) {
+  if (!formattedValue || !format) return formattedValue;
+  let result = "";
+  for (let i = 0; i < formattedValue.length; i++) {
+    const formatChar = format[i];
+    if (formatChar === "X") {
+      result += formattedValue[i];
+    }
+  }
+  return result;
+}
+const TextInput = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "type",
+    "placeholder",
+    "title",
+    "autocomplete",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "format",
+    "class",
+    "style"
+  ]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? "",
+    onChange: () => local.onValueChange
+  });
+  const ime = createIMEHandler((v) => setValue(v));
+  function extractValue(el) {
+    let val = el.value;
+    if (local.format != null && local.format !== "") {
+      val = removeFormat(val, local.format);
+    }
+    return val;
+  }
+  const inputValue = () => {
+    const val = value();
+    if (local.format != null && local.format !== "") {
+      return applyFormat(val, local.format);
+    }
+    return val;
+  };
+  const displayValue = () => {
+    const composing = ime.composingValue();
+    if (composing != null) {
+      if (local.format != null && local.format !== "") {
+        return applyFormat(composing, local.format);
+      }
+      return composing;
+    }
+    return inputValue();
+  };
+  const handleCompositionStart = () => ime.handleCompositionStart();
+  const handleInput = (e) => {
+    ime.handleInput(extractValue(e.currentTarget), e.isComposing);
+  };
+  const handleCompositionEnd = (e) => {
+    ime.handleCompositionEnd(extractValue(e.currentTarget));
+  };
+  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;
+  createEffect(() => {
+    if (!isEditable()) {
+      ime.flushComposition();
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: local.inset,
+      fallback: (
+        // standalone 모드: 기존 Show 패턴 유지
+        /* @__PURE__ */ React.createElement(
+          Show,
+          {
+            when: isEditable(),
+            fallback: /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                ...rest,
+                "data-text-field": true,
+                class: twMerge(getWrapperClass(true), "sd-text-field"),
+                style: local.style,
+                title: local.title
+              },
+              displayValue() || (local.placeholder != null && local.placeholder !== "" ? /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder) : "\xA0")
+            )
+          },
+          /* @__PURE__ */ React.createElement("div", { ...rest, "data-text-field": true, class: getWrapperClass(true), style: local.style }, /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: local.type ?? "text",
+              class: fieldInputClass,
+              value: inputValue(),
+              placeholder: local.placeholder,
+              title: local.title,
+              autocomplete: local.autocomplete,
+              onInput: handleInput,
+              onCompositionStart: handleCompositionStart,
+              onCompositionEnd: handleCompositionEnd
+            }
+          ))
+        )
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        "data-text-field": true,
+        class: twMerge(getWrapperClass(false), "relative", local.class),
+        style: local.style
+      },
+      /* @__PURE__ */ React.createElement("div", { "data-text-field-content": true, style: { visibility: isEditable() ? "hidden" : void 0 } }, displayValue() || (local.placeholder != null && local.placeholder !== "" ? /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder) : "\xA0")),
+      /* @__PURE__ */ React.createElement(Show, { when: isEditable() }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: local.type ?? "text",
+          class: clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1"),
+          value: inputValue(),
+          placeholder: local.placeholder,
+          title: local.title,
+          autocomplete: local.autocomplete,
+          onInput: handleInput,
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd
+        }
+      ))
+    )
+  );
+};
+export {
+  TextInput
+};
+//# sourceMappingURL=TextInput.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/field/TextInput.tsx"],
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, createEffect, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { createIMEHandler } from \"../../../hooks/createIMEHandler\";\nimport {\n  type FieldSize,\n  fieldBaseClass,\n  fieldSizeClasses,\n  fieldErrorClass,\n  fieldInsetClass,\n  fieldInsetHeightClass,\n  fieldInsetSizeHeightClasses,\n  fieldDisabledClass,\n  fieldInputClass,\n} from \"./Field.styles\";\nimport { textMuted } from \"../../../styles/tokens.styles\";\n\ntype TextInputType = \"text\" | \"password\" | \"email\";\n\nexport interface TextInputProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: string;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: string) => void;\n\n  /** \uC785\uB825 \uD0C0\uC785 */\n  type?: TextInputType;\n\n  /** \uD50C\uB808\uC774\uC2A4\uD640\uB354 */\n  placeholder?: string;\n\n  /** \uD0C0\uC774\uD2C0 (\uD234\uD301) */\n  title?: string;\n\n  /** \uC790\uB3D9\uC644\uC131 */\n  autocomplete?: 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  /** \uC785\uB825 \uD3EC\uB9F7 (\uC608: XXX-XXXX-XXXX) */\n  format?: string;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\n/**\n * \uAC12\uC5D0 \uD3EC\uB9F7\uC744 \uC801\uC6A9\uD55C\uB2E4\n * @param value \uC6D0\uBCF8 \uAC12\n * @param format \uD3EC\uB9F7 \uBB38\uC790\uC5F4 (\uC608: XXX-XXXX-XXXX)\n * @returns \uD3EC\uB9F7\uC774 \uC801\uC6A9\uB41C \uAC12\n */\nfunction applyFormat(value: string, format: string): string {\n  if (!value || !format) return value;\n\n  let result = \"\";\n  let valueIndex = 0;\n\n  for (let i = 0; i < format.length && valueIndex < value.length; i++) {\n    if (format[i] === \"X\") {\n      result += value[valueIndex];\n      valueIndex++;\n    } else {\n      result += format[i];\n    }\n  }\n\n  return result;\n}\n\n/**\n * \uD3EC\uB9F7 \uBB38\uC790\uB97C \uC81C\uAC70\uD558\uC5EC \uC6D0\uBCF8 \uAC12\uC744 \uCD94\uCD9C\uD55C\uB2E4\n * @param formattedValue \uD3EC\uB9F7\uC774 \uC801\uC6A9\uB41C \uAC12\n * @param format \uD3EC\uB9F7 \uBB38\uC790\uC5F4\n * @returns \uC6D0\uBCF8 \uAC12\n */\nfunction removeFormat(formattedValue: string, format: string): string {\n  if (!formattedValue || !format) return formattedValue;\n\n  let result = \"\";\n\n  for (let i = 0; i < formattedValue.length; i++) {\n    const formatChar = format[i];\n    if (formatChar === \"X\") {\n      result += formattedValue[i];\n    }\n    // \uD3EC\uB9F7 \uBB38\uC790\uAC00 \uC544\uB2CC \uACBD\uC6B0 (\uAD6C\uBD84\uC790) \uC2A4\uD0B5\n  }\n\n  return result;\n}\n\n/**\n * TextInput \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <TextInput value={text()} onValueChange={setText} />\n *\n * // \uD3EC\uB9F7 \uC801\uC6A9\n * <TextInput format=\"XXX-XXXX-XXXX\" value={phone()} onValueChange={setPhone} />\n *\n * // password \uD0C0\uC785\n * <TextInput type=\"password\" placeholder=\"\uBE44\uBC00\uBC88\uD638 \uC785\uB825\" />\n * ```\n */\nexport const TextInput: Component<TextInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"type\",\n    \"placeholder\",\n    \"title\",\n    \"autocomplete\",\n    \"disabled\",\n    \"readonly\",\n    \"error\",\n    \"size\",\n    \"inset\",\n    \"format\",\n    \"class\",\n    \"style\",\n  ]);\n\n  // controlled/uncontrolled \uD328\uD134 \uC9C0\uC6D0\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? \"\",\n    onChange: () => local.onValueChange,\n  });\n\n  // IME \uC870\uD569 \uC911 onValueChange\uB97C \uC9C0\uC5F0\uD558\uC5EC DOM \uC7AC\uC0DD\uC131(\uD55C\uAE00 \uC870\uD569 \uB04A\uAE40) \uBC29\uC9C0\n  const ime = createIMEHandler((v) => setValue(v));\n\n  function extractValue(el: HTMLInputElement): string {\n    let val = el.value;\n    if (local.format != null && local.format !== \"\") {\n      val = removeFormat(val, local.format);\n    }\n    return val;\n  }\n\n  // input \uC694\uC18C\uC6A9 \uAC12 (composingValue \uBBF8\uD3EC\uD568 \u2014 IME \uC870\uD569 \uBC29\uD574 \uBC29\uC9C0)\n  const inputValue = () => {\n    const val = value();\n    if (local.format != null && local.format !== \"\") {\n      return applyFormat(val, local.format);\n    }\n    return val;\n  };\n\n  // content div\uC6A9 \uD45C\uC2DC \uAC12 (composingValue \uD3EC\uD568 \u2014 \uC140 \uB108\uBE44 \uACB0\uC815)\n  const displayValue = () => {\n    const composing = ime.composingValue();\n    if (composing != null) {\n      if (local.format != null && local.format !== \"\") {\n        return applyFormat(composing, local.format);\n      }\n      return composing;\n    }\n    return inputValue();\n  };\n\n  const handleCompositionStart = () => ime.handleCompositionStart();\n\n  const handleInput: JSX.InputEventHandler<HTMLInputElement, InputEvent> = (e) => {\n    ime.handleInput(extractValue(e.currentTarget), e.isComposing);\n  };\n\n  const handleCompositionEnd: JSX.EventHandler<HTMLInputElement, CompositionEvent> = (e) => {\n    ime.handleCompositionEnd(extractValue(e.currentTarget));\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (includeCustomClass=false\uC77C \uB54C local.class \uC81C\uC678 \u2014 inset\uC5D0\uC11C outer\uC5D0\uB9CC \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,\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  // disabled \uC804\uD658 \uC2DC \uBBF8\uCEE4\uBC0B \uC870\uD569 \uAC12 flush\n  createEffect(() => {\n    if (!isEditable()) {\n      ime.flushComposition();\n    }\n  });\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-text-field\n              class={twMerge(getWrapperClass(true), \"sd-text-field\")}\n              style={local.style}\n              title={local.title}\n            >\n              {displayValue() ||\n                (local.placeholder != null && local.placeholder !== \"\" ? (\n                  <span class={textMuted}>{local.placeholder}</span>\n                ) : (\n                  \"\\u00A0\"\n                ))}\n            </div>\n          }\n        >\n          <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type={local.type ?? \"text\"}\n              class={fieldInputClass}\n              value={inputValue()}\n              placeholder={local.placeholder}\n              title={local.title}\n              autocomplete={local.autocomplete}\n              onInput={handleInput}\n              onCompositionStart={handleCompositionStart}\n              onCompositionEnd={handleCompositionEnd}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div\n        {...rest}\n        data-text-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div data-text-field-content style={{ visibility: isEditable() ? \"hidden\" : undefined }}>\n          {displayValue() ||\n            (local.placeholder != null && local.placeholder !== \"\" ? (\n              <span class={textMuted}>{local.placeholder}</span>\n            ) : (\n              \"\\u00A0\"\n            ))}\n        </div>\n\n        <Show when={isEditable()}>\n          <input\n            type={local.type ?? \"text\"}\n            class={clsx(fieldInputClass, \"absolute left-0 top-0 size-full\", \"px-2 py-1\")}\n            value={inputValue()}\n            placeholder={local.placeholder}\n            title={local.title}\n            autocomplete={local.autocomplete}\n            onInput={handleInput}\n            onCompositionStart={handleCompositionStart}\n            onCompositionEnd={handleCompositionEnd}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,186 @@
+import clsx from "clsx";
+import { createEffect, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createIMEHandler } from "../../../hooks/createIMEHandler";
+import {
+  textAreaBaseClass as fieldTextAreaBaseClass,
+  textAreaSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldDisabledClass
+} from "./Field.styles";
+import { textMuted } from "../../../styles/tokens.styles";
+const textareaBaseClass = clsx(
+  "absolute left-0 top-0",
+  "size-full",
+  "resize-none overflow-hidden",
+  "bg-transparent",
+  "px-2 py-1",
+  "placeholder:text-base-400 dark:placeholder:text-base-500"
+);
+const Textarea = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "placeholder",
+    "title",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "minRows",
+    "class",
+    "style"
+  ]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? "",
+    onChange: () => local.onValueChange
+  });
+  const ime = createIMEHandler((v) => setValue(v));
+  const displayValue = () => ime.composingValue() ?? value();
+  const handleCompositionStart = () => ime.handleCompositionStart();
+  const handleInput = (e) => {
+    ime.handleInput(e.currentTarget.value, e.isComposing);
+  };
+  const handleCompositionEnd = (e) => {
+    ime.handleCompositionEnd(e.currentTarget.value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const el = e.currentTarget;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      const before = el.value.substring(0, start);
+      const after = el.value.substring(end);
+      const newVal = before + "\n" + after;
+      el.value = newVal;
+      el.selectionStart = start + 1;
+      el.selectionEnd = start + 1;
+      el.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    }
+  };
+  const contentForHeight = () => {
+    const rows = local.minRows ?? 1;
+    const val = displayValue();
+    const content = val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\xA0";
+    return content.endsWith("\n") ? content + "\xA0" : content;
+  };
+  const getWrapperClass = (includeCustomClass) => twMerge(
+    fieldTextAreaBaseClass,
+    local.size && textAreaSizeClasses[local.size],
+    local.error && fieldErrorClass,
+    local.disabled && fieldDisabledClass,
+    local.inset && fieldInsetClass,
+    includeCustomClass && local.class
+  );
+  const getTextareaClass = () => twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && "p-0");
+  const isEditable = () => !local.disabled && !local.readonly;
+  createEffect(() => {
+    if (!isEditable()) {
+      ime.flushComposition();
+    }
+  });
+  return /* @__PURE__ */ React.createElement(
+    Show,
+    {
+      when: local.inset,
+      fallback: (
+        // standalone 모드: 기존 Show 패턴 유지
+        /* @__PURE__ */ React.createElement(
+          Show,
+          {
+            when: isEditable(),
+            fallback: /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                ...rest,
+                "data-textarea-field": true,
+                class: getWrapperClass(true),
+                style: { "white-space": "pre-wrap", "word-break": "break-all", ...local.style },
+                title: local.title
+              },
+              value() || (local.placeholder != null && local.placeholder !== "" ? /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder) : "\xA0")
+            )
+          },
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              ...rest,
+              "data-textarea-field": true,
+              class: getWrapperClass(true),
+              style: { position: "relative", ...local.style }
+            },
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                "data-hidden-content": true,
+                style: {
+                  "visibility": "hidden",
+                  "white-space": "pre-wrap",
+                  "word-break": "break-all"
+                }
+              },
+              contentForHeight()
+            ),
+            /* @__PURE__ */ React.createElement(
+              "textarea",
+              {
+                class: getTextareaClass(),
+                value: value(),
+                placeholder: local.placeholder,
+                title: local.title,
+                onKeyDown: handleKeyDown,
+                onInput: handleInput,
+                onCompositionStart: handleCompositionStart,
+                onCompositionEnd: handleCompositionEnd
+              }
+            )
+          )
+        )
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        "data-textarea-field": true,
+        class: twMerge(getWrapperClass(false), "relative", local.class),
+        style: local.style
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-textarea-field-content": true,
+          style: {
+            "visibility": isEditable() ? "hidden" : void 0,
+            "white-space": "pre-wrap",
+            "word-break": "break-all"
+          },
+          title: local.title
+        },
+        isEditable() ? contentForHeight() : value() || (local.placeholder != null && local.placeholder !== "" ? /* @__PURE__ */ React.createElement("span", { class: textMuted }, local.placeholder) : "\xA0")
+      ),
+      /* @__PURE__ */ React.createElement(Show, { when: isEditable() }, /* @__PURE__ */ React.createElement(
+        "textarea",
+        {
+          class: twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size]),
+          value: value(),
+          placeholder: local.placeholder,
+          title: local.title,
+          onKeyDown: handleKeyDown,
+          onInput: handleInput,
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd
+        }
+      ))
+    )
+  );
+};
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/field/Textarea.tsx"],
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, createEffect, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { createIMEHandler } from \"../../../hooks/createIMEHandler\";\nimport {\n  type FieldSize,\n  textAreaBaseClass as fieldTextAreaBaseClass,\n  textAreaSizeClasses,\n  fieldErrorClass,\n  fieldInsetClass,\n  fieldDisabledClass,\n} from \"./Field.styles\";\nimport { textMuted } from \"../../../styles/tokens.styles\";\n\nexport interface TextareaProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: string;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: string) => void;\n\n  /** \uD50C\uB808\uC774\uC2A4\uD640\uB354 */\n  placeholder?: string;\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  /** \uCD5C\uC18C \uC904 \uC218 (\uAE30\uBCF8\uAC12: 1) */\n  minRows?: number;\n\n  /** \uCEE4\uC2A4\uD140 class */\n  class?: string;\n\n  /** \uCEE4\uC2A4\uD140 style */\n  style?: JSX.CSSProperties;\n}\n\nconst textareaBaseClass = clsx(\n  \"absolute left-0 top-0\",\n  \"size-full\",\n  \"resize-none overflow-hidden\",\n  \"bg-transparent\",\n  \"px-2 py-1\",\n  \"placeholder:text-base-400 dark:placeholder:text-base-500\",\n);\n\n/**\n * Textarea \uCEF4\uD3EC\uB10C\uD2B8\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <Textarea value={text()} onValueChange={setText} />\n *\n * // \uCD5C\uC18C \uC904 \uC218 \uC9C0\uC815\n * <Textarea minRows={3} value={text()} onValueChange={setText} />\n * ```\n */\nexport const Textarea: Component<TextareaProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"placeholder\",\n    \"title\",\n    \"disabled\",\n    \"readonly\",\n    \"error\",\n    \"size\",\n    \"inset\",\n    \"minRows\",\n    \"class\",\n    \"style\",\n  ]);\n\n  const [value, setValue] = createControllableSignal({\n    value: () => local.value ?? \"\",\n    onChange: () => local.onValueChange,\n  });\n\n  // IME \uC870\uD569 \uC911 onValueChange\uB97C \uC9C0\uC5F0\uD558\uC5EC DOM \uC7AC\uC0DD\uC131(\uD55C\uAE00 \uC870\uD569 \uB04A\uAE40) \uBC29\uC9C0\n  const ime = createIMEHandler((v) => setValue(v));\n\n  // content div\uC6A9 \uD45C\uC2DC \uAC12 (composingValue \uD3EC\uD568 \u2014 \uC140 \uB108\uBE44/\uB192\uC774 \uACB0\uC815)\n  const displayValue = () => ime.composingValue() ?? value();\n\n  const handleCompositionStart = () => ime.handleCompositionStart();\n\n  const handleInput: JSX.InputEventHandler<HTMLTextAreaElement, InputEvent> = (e) => {\n    ime.handleInput(e.currentTarget.value, e.isComposing);\n  };\n\n  const handleCompositionEnd: JSX.EventHandler<HTMLTextAreaElement, CompositionEvent> = (e) => {\n    ime.handleCompositionEnd(e.currentTarget.value);\n  };\n\n  const handleKeyDown: JSX.EventHandler<HTMLTextAreaElement, KeyboardEvent> = (e) => {\n    if (e.key === \"Enter\" && e.altKey) {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const el = e.currentTarget;\n      const start = el.selectionStart;\n      const end = el.selectionEnd;\n      const before = el.value.substring(0, start);\n      const after = el.value.substring(end);\n      const newVal = before + \"\\n\" + after;\n\n      el.value = newVal;\n      el.selectionStart = start + 1;\n      el.selectionEnd = start + 1;\n\n      // input \uC774\uBCA4\uD2B8\uB97C \uC218\uB3D9 \uBC1C\uD589\uD558\uC5EC \uAC12 \uB3D9\uAE30\uD654\n      el.dispatchEvent(new InputEvent(\"input\", { bubbles: true }));\n    }\n  };\n\n  const contentForHeight = () => {\n    const rows = local.minRows ?? 1;\n    const val = displayValue();\n    const content = val !== \"\" && val.split(\"\\n\").length >= rows ? val : \"\\n\".repeat(rows - 1) + \"\\u00A0\";\n    // \uB9C8\uC9C0\uB9C9\uC774 \uC904\uBC14\uAFC8\uC774\uBA74 \uBE48 \uC904 \uB192\uC774 \uD655\uBCF4\uB97C \uC704\uD574 \uACF5\uBC31 \uCD94\uAC00\n    return content.endsWith(\"\\n\") ? content + \"\\u00A0\" : content;\n  };\n\n  // wrapper \uD074\uB798\uC2A4 (includeCustomClass=false\uC77C \uB54C local.class \uC81C\uC678 \u2014 inset\uC5D0\uC11C outer\uC5D0\uB9CC \uC801\uC6A9)\n  const getWrapperClass = (includeCustomClass: boolean) =>\n    twMerge(\n      fieldTextAreaBaseClass,\n      local.size && textAreaSizeClasses[local.size],\n      local.error && fieldErrorClass,\n      local.disabled && fieldDisabledClass,\n      local.inset && fieldInsetClass,\n\n      includeCustomClass && local.class,\n    );\n\n  const getTextareaClass = () =>\n    twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && \"p-0\");\n\n  // \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80\n  const isEditable = () => !local.disabled && !local.readonly;\n\n  // disabled \uC804\uD658 \uC2DC \uBBF8\uCEE4\uBC0B \uC870\uD569 \uAC12 flush\n  createEffect(() => {\n    if (!isEditable()) {\n      ime.flushComposition();\n    }\n  });\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-textarea-field\n              class={getWrapperClass(true)}\n              style={{ \"white-space\": \"pre-wrap\", \"word-break\": \"break-all\", ...local.style }}\n              title={local.title}\n            >\n              {value() ||\n                (local.placeholder != null && local.placeholder !== \"\" ? (\n                  <span class={textMuted}>{local.placeholder}</span>\n                ) : (\n                  \"\\u00A0\"\n                ))}\n            </div>\n          }\n        >\n          <div\n            {...rest}\n            data-textarea-field\n            class={getWrapperClass(true)}\n            style={{ position: \"relative\", ...local.style }}\n          >\n            <div\n              data-hidden-content\n              style={{\n                \"visibility\": \"hidden\",\n                \"white-space\": \"pre-wrap\",\n                \"word-break\": \"break-all\",\n              }}\n            >\n              {contentForHeight()}\n            </div>\n\n            <textarea\n              class={getTextareaClass()}\n              value={value()}\n              placeholder={local.placeholder}\n              title={local.title}\n              onKeyDown={handleKeyDown}\n              onInput={handleInput}\n              onCompositionStart={handleCompositionStart}\n              onCompositionEnd={handleCompositionEnd}\n            />\n          </div>\n        </Show>\n      }\n    >\n      {/* inset \uBAA8\uB4DC: dual-element overlay \uD328\uD134 */}\n      <div\n        {...rest}\n        data-textarea-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div\n          data-textarea-field-content\n          style={{\n            \"visibility\": isEditable() ? \"hidden\" : undefined,\n            \"white-space\": \"pre-wrap\",\n            \"word-break\": \"break-all\",\n          }}\n          title={local.title}\n        >\n          {isEditable()\n            ? contentForHeight()\n            : value() ||\n              (local.placeholder != null && local.placeholder !== \"\" ? (\n                <span class={textMuted}>{local.placeholder}</span>\n              ) : (\n                \"\\u00A0\"\n              ))}\n        </div>\n\n        <Show when={isEditable()}>\n          <textarea\n            class={twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size])}\n            value={value()}\n            placeholder={local.placeholder}\n            title={local.title}\n            onKeyDown={handleKeyDown}\n            onInput={handleInput}\n            onCompositionStart={handleCompositionStart}\n            onCompositionEnd={handleCompositionEnd}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAyB,cAAwB,MAAM,kBAAkB;AACzE,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC;AAAA,EAEE,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAwC1B,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAcO,MAAM,WAAqC,CAAC,UAAU;AAC3D,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;AAED,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAAyB;AAAA,IACjD,OAAO,MAAM,MAAM,SAAS;AAAA,IAC5B,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAGD,QAAM,MAAM,iBAAiB,CAAC,MAAM,SAAS,CAAC,CAAC;AAG/C,QAAM,eAAe,MAAM,IAAI,eAAe,KAAK,MAAM;AAEzD,QAAM,yBAAyB,MAAM,IAAI,uBAAuB;AAEhE,QAAM,cAAsE,CAAC,MAAM;AACjF,QAAI,YAAY,EAAE,cAAc,OAAO,EAAE,WAAW;AAAA,EACtD;AAEA,QAAM,uBAAgF,CAAC,MAAM;AAC3F,QAAI,qBAAqB,EAAE,cAAc,KAAK;AAAA,EAChD;AAEA,QAAM,gBAAsE,CAAC,MAAM;AACjF,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ;AACjC,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAElB,YAAM,KAAK,EAAE;AACb,YAAM,QAAQ,GAAG;AACjB,YAAM,MAAM,GAAG;AACf,YAAM,SAAS,GAAG,MAAM,UAAU,GAAG,KAAK;AAC1C,YAAM,QAAQ,GAAG,MAAM,UAAU,GAAG;AACpC,YAAM,SAAS,SAAS,OAAO;AAE/B,SAAG,QAAQ;AACX,SAAG,iBAAiB,QAAQ;AAC5B,SAAG,eAAe,QAAQ;AAG1B,SAAG,cAAc,IAAI,WAAW,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,IAC7D;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,UAAM,OAAO,MAAM,WAAW;AAC9B,UAAM,MAAM,aAAa;AACzB,UAAM,UAAU,QAAQ,MAAM,IAAI,MAAM,IAAI,EAAE,UAAU,OAAO,MAAM,KAAK,OAAO,OAAO,CAAC,IAAI;AAE7F,WAAO,QAAQ,SAAS,IAAI,IAAI,UAAU,SAAW;AAAA,EACvD;AAGA,QAAM,kBAAkB,CAAC,uBACvB;AAAA,IACE;AAAA,IACA,MAAM,QAAQ,oBAAoB,MAAM,IAAI;AAAA,IAC5C,MAAM,SAAS;AAAA,IACf,MAAM,YAAY;AAAA,IAClB,MAAM,SAAS;AAAA,IAEf,sBAAsB,MAAM;AAAA,EAC9B;AAEF,QAAM,mBAAmB,MACvB,QAAQ,mBAAmB,MAAM,QAAQ,oBAAoB,MAAM,IAAI,GAAG,MAAM,SAAS,KAAK;AAGhG,QAAM,aAAa,MAAM,CAAC,MAAM,YAAY,CAAC,MAAM;AAGnD,eAAa,MAAM;AACjB,QAAI,CAAC,WAAW,GAAG;AACjB,UAAI,iBAAiB;AAAA,IACvB;AAAA,EACF,CAAC;AAED,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,uBAAmB;AAAA,gBACnB,OAAO,gBAAgB,IAAI;AAAA,gBAC3B,OAAO,EAAE,eAAe,YAAY,cAAc,aAAa,GAAG,MAAM,MAAM;AAAA,gBAC9E,OAAO,MAAM;AAAA;AAAA,cAEZ,MAAM,MACJ,MAAM,eAAe,QAAQ,MAAM,gBAAgB,KAClD,oCAAC,UAAK,OAAO,aAAY,MAAM,WAAY,IAE3C;AAAA,YAEN;AAAA;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,uBAAmB;AAAA,cACnB,OAAO,gBAAgB,IAAI;AAAA,cAC3B,OAAO,EAAE,UAAU,YAAY,GAAG,MAAM,MAAM;AAAA;AAAA,YAE9C;AAAA,cAAC;AAAA;AAAA,gBACC,uBAAmB;AAAA,gBACnB,OAAO;AAAA,kBACL,cAAc;AAAA,kBACd,eAAe;AAAA,kBACf,cAAc;AAAA,gBAChB;AAAA;AAAA,cAEC,iBAAiB;AAAA,YACpB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,iBAAiB;AAAA,gBACxB,OAAO,MAAM;AAAA,gBACb,aAAa,MAAM;AAAA,gBACnB,OAAO,MAAM;AAAA,gBACb,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT,oBAAoB;AAAA,gBACpB,kBAAkB;AAAA;AAAA,YACpB;AAAA,UACF;AAAA,QACF;AAAA;AAAA;AAAA,IAIF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,uBAAmB;AAAA,QACnB,OAAO,QAAQ,gBAAgB,KAAK,GAAG,YAAY,MAAM,KAAK;AAAA,QAC9D,OAAO,MAAM;AAAA;AAAA,MAEb;AAAA,QAAC;AAAA;AAAA,UACC,+BAA2B;AAAA,UAC3B,OAAO;AAAA,YACL,cAAc,WAAW,IAAI,WAAW;AAAA,YACxC,eAAe;AAAA,YACf,cAAc;AAAA,UAChB;AAAA,UACA,OAAO,MAAM;AAAA;AAAA,QAEZ,WAAW,IACR,iBAAiB,IACjB,MAAM,MACL,MAAM,eAAe,QAAQ,MAAM,gBAAgB,KAClD,oCAAC,UAAK,OAAO,aAAY,MAAM,WAAY,IAE3C;AAAA,MAER;AAAA,MAEA,oCAAC,QAAK,MAAM,WAAW,KACrB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,QAAQ,mBAAmB,MAAM,QAAQ,oBAAoB,MAAM,IAAI,CAAC;AAAA,UAC/E,OAAO,MAAM;AAAA,UACb,aAAa,MAAM;AAAA,UACnB,OAAO,MAAM;AAAA,UACb,WAAW;AAAA,UACX,SAAS;AAAA,UACT,oBAAoB;AAAA,UACpB,kBAAkB;AAAA;AAAA,MACpB,CACF;AAAA,IACF;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,138 @@
+import clsx from "clsx";
+import { Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { Time } 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("HH:mm");
+    case "second":
+      return value.toFormatString("HH:mm:ss");
+  }
+}
+function parseValue(str, unit) {
+  if (str === "") return void 0;
+  switch (unit) {
+    case "minute": {
+      const match = /^(\d{2}):(\d{2})$/.exec(str);
+      if (match == null) return void 0;
+      return new Time(Number(match[1]), Number(match[2]), 0);
+    }
+    case "second": {
+      const match = /^(\d{2}):(\d{2}):(\d{2})$/.exec(str);
+      if (match == null) return void 0;
+      return new Time(Number(match[1]), Number(match[2]), Number(match[3]));
+    }
+  }
+}
+const TimePicker = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "unit",
+    "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-time-field": true,
+                class: twMerge(getWrapperClass(true), "sd-time-field"),
+                style: local.style,
+                title: local.title
+              },
+              displayValue() || "\xA0"
+            )
+          },
+          /* @__PURE__ */ React.createElement("div", { ...rest, "data-time-field": true, class: getWrapperClass(true), style: local.style }, /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              type: "time",
+              class: fieldInputClass,
+              value: displayValue(),
+              title: local.title,
+              step: getStep(),
+              onChange: handleChange
+            }
+          ))
+        )
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        "data-time-field": true,
+        class: twMerge(getWrapperClass(false), "relative", local.class),
+        style: local.style
+      },
+      /* @__PURE__ */ React.createElement("div", { "data-time-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: "time",
+          class: clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1"),
+          value: displayValue(),
+          title: local.title,
+          step: getStep(),
+          onChange: handleChange
+        }
+      ))
+    )
+  );
+};
+export {
+  TimePicker
+};
+//# sourceMappingURL=TimePicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/form-control/field/TimePicker.tsx"],
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { type Component, type JSX, Show, splitProps } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Time } 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 TimePickerUnit = \"minute\" | \"second\";\n\nexport interface TimePickerProps {\n  /** \uC785\uB825 \uAC12 */\n  value?: Time;\n\n  /** \uAC12 \uBCC0\uACBD \uCF5C\uBC31 */\n  onValueChange?: (value: Time | undefined) => void;\n\n  /** \uC2DC\uAC04 \uB2E8\uC704 */\n  unit?: TimePickerUnit;\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 * Time \uAC12\uC744 input value\uC6A9 \uBB38\uC790\uC5F4\uB85C \uBCC0\uD658\n */\nfunction formatValue(value: Time | undefined, unit: TimePickerUnit): string {\n  if (value == null) return \"\";\n\n  switch (unit) {\n    case \"minute\":\n      return value.toFormatString(\"HH:mm\");\n    case \"second\":\n      return value.toFormatString(\"HH:mm:ss\");\n  }\n}\n\n/**\n * \uC785\uB825 \uBB38\uC790\uC5F4\uC744 Time\uC73C\uB85C \uBCC0\uD658\n */\nfunction parseValue(str: string, unit: TimePickerUnit): Time | undefined {\n  if (str === \"\") return undefined;\n\n  switch (unit) {\n    case \"minute\": {\n      // HH:mm \uD615\uC2DD\n      const match = /^(\\d{2}):(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new Time(Number(match[1]), Number(match[2]), 0);\n    }\n    case \"second\": {\n      // HH:mm:ss \uD615\uC2DD\n      const match = /^(\\d{2}):(\\d{2}):(\\d{2})$/.exec(str);\n      if (match == null) return undefined;\n      return new Time(Number(match[1]), Number(match[2]), Number(match[3]));\n    }\n  }\n}\n\n/**\n * TimePicker \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uC2DC\uAC04 \uC785\uB825 \uD544\uB4DC. minute, second \uB2E8\uC704\uB97C \uC9C0\uC6D0\uD55C\uB2E4.\n * \uB0B4\uBD80\uC801\uC73C\uB85C string \u2194 Time \uD0C0\uC785 \uBCC0\uD658\uC744 \uCC98\uB9AC\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * // \uC2DC\uAC04 \uC785\uB825 (\uBD84 \uB2E8\uC704)\n * <TimePicker unit=\"minute\" value={time()} onValueChange={setTime} />\n *\n * // \uC2DC\uAC04 \uC785\uB825 (\uCD08 \uB2E8\uC704)\n * <TimePicker unit=\"second\" value={time()} onValueChange={setTime} />\n * ```\n */\nexport const TimePicker: Component<TimePickerProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onValueChange\",\n    \"unit\",\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\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-time-field\n              class={twMerge(getWrapperClass(true), \"sd-time-field\")}\n              style={local.style}\n              title={local.title}\n            >\n              {displayValue() || \"\\u00A0\"}\n            </div>\n          }\n        >\n          <div {...rest} data-time-field class={getWrapperClass(true)} style={local.style}>\n            <input\n              type=\"time\"\n              class={fieldInputClass}\n              value={displayValue()}\n              title={local.title}\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-time-field\n        class={twMerge(getWrapperClass(false), \"relative\", local.class)}\n        style={local.style}\n      >\n        <div data-time-field-content style={{ visibility: isEditable() ? \"hidden\" : undefined }} title={local.title}>\n          {displayValue() || \"\\u00A0\"}\n        </div>\n\n        <Show when={isEditable()}>\n          <input\n            type=\"time\"\n            class={clsx(fieldInputClass, \"absolute left-0 top-0 size-full\", \"px-2 py-1\")}\n            value={displayValue()}\n            title={local.title}\n            step={getStep()}\n            onChange={handleChange}\n          />\n        </Show>\n      </div>\n    </Show>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}