@simplysm/solid 13.0.53 → 13.0.56

package/src/components/form-control/field/NumberInput.tsx

@@ -1,15 +1,17 @@
 import {
-  type Component,
+  createContext,
   createEffect,
   createMemo,
+  createSignal,
   type JSX,
+  onCleanup,
+  type ParentComponent,
   Show,
   splitProps,
-  createSignal,
+  useContext,
 } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import {
   type FieldSize,
@@ -17,7 +19,6 @@ import {
   fieldGapClasses,
   getFieldWrapperClass,
 } from "./Field.styles";
-import { Icon } from "../../display/Icon";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
 
@@ -29,6 +30,22 @@ const numberInputClass = clsx(
   "[&::-webkit-inner-spin-button]:appearance-none",
 );
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface NumberInputSlotsContextValue {
+  setPrefix: (content: SlotAccessor) => void;
+}
+
+const NumberInputSlotsContext = createContext<NumberInputSlotsContextValue>();
+
+const NumberInputPrefix: ParentComponent = (props) => {
+  const ctx = useContext(NumberInputSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children은 렌더 시점에 lazy 평가됨
+  ctx.setPrefix(() => props.children);
+  onCleanup(() => ctx.setPrefix(undefined));
+  return null;
+};
+
 export interface NumberInputProps {
   /** 입력 값 */
   value?: number;
@@ -66,9 +83,6 @@ export interface NumberInputProps {
   /** 커스텀 style */
   style?: JSX.CSSProperties;
 
-  /** 접두 아이콘 */
-  prefixIcon?: Component<TablerIconProps>;
-
   /** 필수 입력 여부 */
   required?: boolean;
 
@@ -83,6 +97,9 @@ export interface NumberInputProps {
 
   /** touchMode: 포커스 해제 후에만 에러 표시 */
   touchMode?: boolean;
+
+  /** 자식 요소 (Prefix 슬롯 등) */
+  children?: JSX.Element;
 }
 
 /**
@@ -161,6 +178,11 @@ function isValidNumberInput(str: string): boolean {
   return /^-?\d*\.?\d*$/.test(cleanStr);
 }
 
+interface NumberInputComponent {
+  (props: NumberInputProps): JSX.Element;
+  Prefix: typeof NumberInputPrefix;
+}
+
 /**
  * NumberInput 컴포넌트
  *
@@ -174,9 +196,14 @@ function isValidNumberInput(str: string): boolean {
  *
  * // 최소 소수점 자릿수 지정
  * <NumberInput value={price()} minDigits={2} />
+ *
+ * // Prefix 슬롯
+ * <NumberInput value={price()}>
+ *   <NumberInput.Prefix>₩</NumberInput.Prefix>
+ * </NumberInput>
  * ```
  */
-export const NumberInput: Component<NumberInputProps> = (props) => {
+export const NumberInput: NumberInputComponent = (props) => {
   const [local, rest] = splitProps(props, [
     "value",
     "onValueChange",
@@ -188,7 +215,6 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     "readonly",
     "size",
     "inset",
-    "prefixIcon",
     "required",
     "min",
     "max",
@@ -196,6 +222,7 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     "touchMode",
     "class",
     "style",
+    "children",
   ]);
 
   // 입력 중인 상태를 추적하기 위한 내부 문자열 상태
@@ -208,6 +235,10 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
     onChange: () => local.onValueChange,
   });
 
+  const [prefix, _setPrefix] = createSignal<SlotAccessor>();
+  const setPrefix = (content: SlotAccessor) => _setPrefix(() => content);
+  const prefixEl = () => prefix() !== undefined;
+
   // 외부 값 변경 시 입력 문자열 동기화
   createEffect(() => {
     const val = value();
@@ -269,17 +300,11 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
-      extra: local.prefixIcon && fieldGapClasses[local.size ?? "default"],
+      extra: prefixEl() && fieldGapClasses[local.size ?? "default"],
     });
 
   const isEditable = () => !local.disabled && !local.readonly;
 
-  const prefixIconEl = () => (
-    <Show when={local.prefixIcon}>
-      <Icon icon={local.prefixIcon!} class="shrink-0 opacity-70" />
-    </Show>
-  );
-
   // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
   const errorMsg = createMemo(() => {
     const v = value();
@@ -292,83 +317,103 @@ export const NumberInput: Component<NumberInputProps> = (props) => {
   });
 
   return (
-    <Invalid
-      message={errorMsg()}
-      variant={local.inset ? "dot" : "border"}
-      touchMode={local.touchMode}
-    >
-      <Show
-        when={local.inset}
-        fallback={
-          // standalone 모드: 기존 Show 패턴 유지
-          <Show
-            when={isEditable()}
-            fallback={
-              <div
-                {...rest}
-                data-number-field
-                class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
-                style={local.style}
-                title={local.title}
-              >
-                {prefixIconEl()}
-                <PlaceholderFallback
-                  value={formatNumber(value(), local.comma ?? true, local.minDigits)}
+    <NumberInputSlotsContext.Provider value={{ setPrefix }}>
+      {local.children}
+      <Invalid
+        message={errorMsg()}
+        variant={local.inset ? "dot" : "border"}
+        touchMode={local.touchMode}
+      >
+        <Show
+          when={local.inset}
+          fallback={
+            // standalone 모드: 기존 Show 패턴 유지
+            <Show
+              when={isEditable()}
+              fallback={
+                <div
+                  {...rest}
+                  data-number-field
+                  class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
+                  style={local.style}
+                  title={local.title}
+                >
+                  <Show when={prefix()}>
+                    <span class="shrink-0">{prefix()!()}</span>
+                  </Show>
+                  <PlaceholderFallback
+                    value={formatNumber(value(), local.comma ?? true, local.minDigits)}
+                    placeholder={local.placeholder}
+                  />
+                </div>
+              }
+            >
+              <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
+                <Show when={prefix()}>
+                  <span class="shrink-0">{prefix()!()}</span>
+                </Show>
+                <input
+                  type="text"
+                  inputmode="numeric"
+                  class={numberInputClass}
+                  value={displayValue()}
                   placeholder={local.placeholder}
+                  title={local.title}
+                  autocomplete="one-time-code"
+                  onInput={handleInput}
+                  onFocus={handleFocus}
+                  onBlur={handleBlur}
                 />
               </div>
-            }
-          >
-            <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
-              {prefixIconEl()}
-              <input
-                type="text"
-                inputmode="numeric"
-                class={numberInputClass}
-                value={displayValue()}
-                placeholder={local.placeholder}
-                title={local.title}
-                onInput={handleInput}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-              />
-            </div>
-          </Show>
-        }
-      >
-        {/* inset 모드: dual-element overlay 패턴 */}
-        <div {...rest} data-number-field class={clsx("relative", local.class)} style={local.style}>
+            </Show>
+          }
+        >
+          {/* inset 모드: dual-element overlay 패턴 */}
           <div
-            data-number-field-content
-            class={twMerge(getWrapperClass(false), "justify-end")}
-            style={{ visibility: isEditable() ? "hidden" : undefined }}
-            title={local.title}
+            {...rest}
+            data-number-field
+            class={clsx("relative", local.class)}
+            style={local.style}
           >
-            {prefixIconEl()}
-            <PlaceholderFallback
-              value={formatNumber(value(), local.comma ?? true, local.minDigits)}
-              placeholder={local.placeholder}
-            />
-          </div>
-
-          <Show when={isEditable()}>
-            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-              {prefixIconEl()}
-              <input
-                type="text"
-                inputmode="numeric"
-                class={numberInputClass}
-                value={displayValue()}
+            <div
+              data-number-field-content
+              class={twMerge(getWrapperClass(false), "justify-end")}
+              style={{ visibility: isEditable() ? "hidden" : undefined }}
+              title={local.title}
+            >
+              <Show when={prefix()}>
+                <span class="shrink-0">{prefix()!()}</span>
+              </Show>
+              <PlaceholderFallback
+                value={formatNumber(value(), local.comma ?? true, local.minDigits)}
                 placeholder={local.placeholder}
-                title={local.title}
-                onInput={handleInput}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
               />
             </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+
+            <Show when={isEditable()}>
+              <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+                <Show when={prefix()}>
+                  <span class="shrink-0">{prefix()!()}</span>
+                </Show>
+                <input
+                  type="text"
+                  inputmode="numeric"
+                  class={numberInputClass}
+                  value={displayValue()}
+                  placeholder={local.placeholder}
+                  title={local.title}
+                  autocomplete="one-time-code"
+                  onInput={handleInput}
+                  onFocus={handleFocus}
+                  onBlur={handleBlur}
+                />
+              </div>
+            </Show>
+          </div>
+        </Show>
+      </Invalid>
+    </NumberInputSlotsContext.Provider>
   );
 };
+
+NumberInput.Prefix = NumberInputPrefix;

package/src/components/form-control/field/TextInput.tsx

@@ -1,7 +1,17 @@
 import clsx from "clsx";
-import { type Component, createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  type JSX,
+  onCleanup,
+  type ParentComponent,
+  Show,
+  splitProps,
+  useContext,
+} from "solid-js";
 import { twMerge } from "tailwind-merge";
-import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
@@ -11,11 +21,26 @@ import {
   getFieldWrapperClass,
 } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
-import { Icon } from "../../display/Icon";
 import { Invalid } from "../../form-control/Invalid";
 
+type SlotAccessor = (() => JSX.Element) | undefined;
+
+interface TextInputSlotsContextValue {
+  setPrefix: (content: SlotAccessor) => void;
+}
+
+const TextInputSlotsContext = createContext<TextInputSlotsContextValue>();
+
 type TextInputType = "text" | "password" | "email";
 
+const TextInputPrefix: ParentComponent = (props) => {
+  const ctx = useContext(TextInputSlotsContext)!;
+  // eslint-disable-next-line solid/reactivity -- slot accessor: children은 렌더 시점에 lazy 평가됨
+  ctx.setPrefix(() => props.children);
+  onCleanup(() => ctx.setPrefix(undefined));
+  return null;
+};
+
 export interface TextInputProps {
   /** 입력 값 */
   value?: string;
@@ -50,9 +75,6 @@ export interface TextInputProps {
   /** 입력 포맷 (예: XXX-XXXX-XXXX) */
   format?: string;
 
-  /** 접두 아이콘 */
-  prefixIcon?: Component<TablerIconProps>;
-
   /** 필수 입력 여부 */
   required?: boolean;
 
@@ -76,6 +98,9 @@ export interface TextInputProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** children (TextInput.Prefix 슬롯) */
+  children?: JSX.Element;
 }
 
 /**
@@ -111,13 +136,16 @@ function applyFormat(value: string, format: string): string {
 function removeFormat(formattedValue: string, format: string): string {
   if (!formattedValue || !format) return formattedValue;
 
-  let result = "";
+  const separators = new Set<string>();
+  for (const ch of format) {
+    if (ch !== "X") separators.add(ch);
+  }
 
-  for (let i = 0; i < formattedValue.length; i++) {
-    if (i >= format.length || format[i] === "X") {
-      result += formattedValue[i];
+  let result = "";
+  for (const ch of formattedValue) {
+    if (!separators.has(ch)) {
+      result += ch;
     }
-    // 포맷 문자가 아닌 경우 (구분자) 스킵
   }
 
   return result;
@@ -138,7 +166,12 @@ function removeFormat(formattedValue: string, format: string): string {
  * <TextInput type="password" placeholder="비밀번호 입력" />
  * ```
  */
-export const TextInput: Component<TextInputProps> = (props) => {
+interface TextInputComponent {
+  (props: TextInputProps): JSX.Element;
+  Prefix: typeof TextInputPrefix;
+}
+
+const TextInputInner = (props: TextInputProps) => {
   const [local, rest] = splitProps(props, [
     "value",
     "onValueChange",
@@ -151,7 +184,6 @@ export const TextInput: Component<TextInputProps> = (props) => {
     "size",
     "inset",
     "format",
-    "prefixIcon",
     "required",
     "minLength",
     "maxLength",
@@ -160,6 +192,7 @@ export const TextInput: Component<TextInputProps> = (props) => {
     "touchMode",
     "class",
     "style",
+    "children",
   ]);
 
   // controlled/uncontrolled 패턴 지원
@@ -210,6 +243,11 @@ export const TextInput: Component<TextInputProps> = (props) => {
     ime.handleCompositionEnd(extractValue(e.currentTarget));
   };
 
+  // Prefix 슬롯 Context 등록
+  const [prefix, _setPrefix] = createSignal<SlotAccessor>();
+  const setPrefix = (content: SlotAccessor) => _setPrefix(() => content);
+  const prefixEl = () => prefix() !== undefined;
+
   // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
   const getWrapperClass = (includeCustomClass: boolean) =>
     getFieldWrapperClass({
@@ -217,18 +255,12 @@ export const TextInput: Component<TextInputProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
-      extra: local.prefixIcon && fieldGapClasses[local.size ?? "default"],
+      extra: prefixEl() && fieldGapClasses[local.size ?? "default"],
     });
 
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
 
-  const prefixIconEl = () => (
-    <Show when={local.prefixIcon}>
-      <Icon icon={local.prefixIcon!} class="shrink-0 opacity-70" />
-    </Show>
-  );
-
   // disabled 전환 시 미커밋 조합 값 flush
   createEffect(() => {
     if (!isEditable()) {
@@ -252,77 +284,96 @@ export const TextInput: Component<TextInputProps> = (props) => {
   });
 
   return (
-    <Invalid
-      message={errorMsg()}
-      variant={local.inset ? "dot" : "border"}
-      touchMode={local.touchMode}
-    >
-      <Show
-        when={local.inset}
-        fallback={
-          // standalone 모드: 기존 Show 패턴 유지
-          <Show
-            when={isEditable()}
-            fallback={
-              <div
-                {...rest}
-                data-text-field
-                class={twMerge(getWrapperClass(true), "sd-text-field")}
-                style={local.style}
-                title={local.title}
-              >
-                {prefixIconEl()}
-                <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
-              </div>
-            }
-          >
-            <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
-              {prefixIconEl()}
-              <input
-                type={local.type ?? "text"}
-                class={fieldInputClass}
-                value={inputValue()}
-                placeholder={local.placeholder}
-                title={local.title}
-                autocomplete={local.autocomplete}
-                onInput={handleInput}
-                onCompositionStart={handleCompositionStart}
-                onCompositionEnd={handleCompositionEnd}
-              />
-            </div>
-          </Show>
-        }
+    <TextInputSlotsContext.Provider value={{ setPrefix }}>
+      {local.children}
+      <Invalid
+        message={errorMsg()}
+        variant={local.inset ? "dot" : "border"}
+        touchMode={local.touchMode}
       >
-        {/* inset 모드: dual-element overlay 패턴 */}
-        <div {...rest} data-text-field class={clsx("relative", local.class)} style={local.style}>
+        <Show
+          when={local.inset}
+          fallback={
+            // standalone 모드: 기존 Show 패턴 유지
+            <Show
+              when={isEditable()}
+              fallback={
+                <div
+                  {...rest}
+                  data-text-field
+                  class={twMerge(getWrapperClass(true), "sd-text-field")}
+                  style={local.style}
+                  title={local.title}
+                >
+                  <Show when={prefix()}>
+                    <span class="shrink-0">{prefix()!()}</span>
+                  </Show>
+                  <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+                </div>
+              }
+            >
+              <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
+                <Show when={prefix()}>
+                  <span class="shrink-0">{prefix()!()}</span>
+                </Show>
+                <input
+                  type={local.type ?? "text"}
+                  class={fieldInputClass}
+                  value={inputValue()}
+                  placeholder={local.placeholder}
+                  title={local.title}
+                  autocomplete={local.autocomplete ?? "one-time-code"}
+                  onInput={handleInput}
+                  onCompositionStart={handleCompositionStart}
+                  onCompositionEnd={handleCompositionEnd}
+                />
+              </div>
+            </Show>
+          }
+        >
+          {/* inset 모드: dual-element overlay 패턴 */}
           <div
-            data-text-field-content
-            class={getWrapperClass(false)}
-            style={{ visibility: isEditable() ? "hidden" : undefined }}
-            title={local.title}
+            {...rest}
+            data-text-field
+            class={clsx("relative", "[text-decoration:inherit]", local.class)}
+            style={local.style}
           >
-            {prefixIconEl()}
-            <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
-          </div>
-
-          <Show when={isEditable()}>
-            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-              {prefixIconEl()}
-              <input
-                type={local.type ?? "text"}
-                class={fieldInputClass}
-                value={inputValue()}
-                placeholder={local.placeholder}
-                title={local.title}
-                autocomplete={local.autocomplete}
-                onInput={handleInput}
-                onCompositionStart={handleCompositionStart}
-                onCompositionEnd={handleCompositionEnd}
-              />
+            <div
+              data-text-field-content
+              class={getWrapperClass(false)}
+              style={{ visibility: isEditable() ? "hidden" : undefined }}
+              title={local.title}
+            >
+              <Show when={prefix()}>
+                <span class="shrink-0">{prefix()!()}</span>
+              </Show>
+              <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
             </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+
+            <Show when={isEditable()}>
+              <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+                <Show when={prefix()}>
+                  <span class="shrink-0">{prefix()!()}</span>
+                </Show>
+                <input
+                  type={local.type ?? "text"}
+                  class={fieldInputClass}
+                  value={inputValue()}
+                  placeholder={local.placeholder}
+                  title={local.title}
+                  autocomplete={local.autocomplete ?? "one-time-code"}
+                  onInput={handleInput}
+                  onCompositionStart={handleCompositionStart}
+                  onCompositionEnd={handleCompositionEnd}
+                />
+              </div>
+            </Show>
+          </div>
+        </Show>
+      </Invalid>
+    </TextInputSlotsContext.Provider>
   );
 };
+
+export const TextInput = TextInputInner as unknown as TextInputComponent;
+TextInput.Prefix = TextInputPrefix;

package/src/components/form-control/field/TimePicker.tsx

@@ -151,6 +151,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
       disabled: local.disabled,
       inset: local.inset,
       includeCustomClass: includeCustomClass && local.class,
+      extra: "min-w-24",
     });
 
   // 편집 가능 여부
@@ -203,6 +204,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
                 value={displayValue()}
                 title={local.title}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>
@@ -228,6 +230,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
                 value={displayValue()}
                 title={local.title}
                 step={getStep()}
+                autocomplete="one-time-code"
                 onChange={handleChange}
               />
             </div>