@simplysm/solid 13.0.69 → 13.0.71

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

@@ -21,7 +21,7 @@ import {
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
 
-// NumberInput 전용 input 스타일 (우측 정렬 + 스피너 숨김)
+// NumberInput-specific input style (right-aligned + spinner hidden)
 const numberInputClass = clsx(
   fieldInputClass,
   "text-right",
@@ -38,67 +38,67 @@ const NumberInputSlotsContext = createContext<NumberInputSlotsContextValue>();
 const NumberInputPrefix = createSlotComponent(NumberInputSlotsContext, (ctx) => ctx.setPrefix);
 
 export interface NumberInputProps {
-  /** 입력 값 */
+  /** Input value */
   value?: number;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: number | undefined) => void;
 
-  /** 천단위 콤마 표시 (기본값: true) */
+  /** Display thousand separator (default: true) */
   comma?: boolean;
 
-  /** 최소 소수점 자릿수 */
+  /** Minimum decimal places */
   minDigits?: number;
 
-  /** 플레이스홀더 */
+  /** Placeholder text */
   placeholder?: string;
 
-  /** 타이틀 (툴팁) */
+  /** Title (tooltip) */
   title?: string;
 
-  /** 비활성화 */
+  /** Disable input */
   disabled?: boolean;
 
-  /** 읽기 전용 */
+  /** Read-only */
   readonly?: boolean;
 
-  /** 사이즈 */
+  /** Size */
   size?: FieldSize;
 
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 
-  /** 필수 입력 여부 */
+  /** Required input */
   required?: boolean;
 
-  /** 최솟값 */
+  /** Minimum value */
   min?: number;
 
-  /** 최댓값 */
+  /** Maximum value */
   max?: number;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: number | undefined) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show errors only after blur */
   touchMode?: boolean;
 
-  /** 자식 요소 (Prefix 슬롯 등) */
+  /** Children (Prefix slot, etc.) */
   children?: JSX.Element;
 }
 
 /**
- * 숫자를 표시용 문자열로 변환한다
- * @param value 숫자 값
- * @param useComma 천단위 콤마 사용 여부
- * @param minDigits 최소 소수점 자릿수
- * @returns 표시용 문자열
+ * Convert number to display string
+ * @param value - Numeric value
+ * @param useComma - Whether to use thousand separator
+ * @param minDigits - Minimum decimal places
+ * @returns Display string
  */
 function formatNumber(value: number | undefined, useComma: boolean, minDigits?: number): string {
   if (value == null) return "";
@@ -106,12 +106,12 @@ function formatNumber(value: number | undefined, useComma: boolean, minDigits?:
   let result: string;
 
   if (minDigits != null && minDigits > 0) {
-    // 현재 소수점 자릿수 확인
+    // Check current decimal places
     const valueStr = String(value);
     const decimalIndex = valueStr.indexOf(".");
     const currentDigits = decimalIndex >= 0 ? valueStr.length - decimalIndex - 1 : 0;
 
-    // 최소 자릿수보다 작으면 패딩
+    // Pad if less than minimum decimal places
     if (currentDigits < minDigits) {
       result = value.toFixed(minDigits);
     } else {
@@ -122,11 +122,11 @@ function formatNumber(value: number | undefined, useComma: boolean, minDigits?:
   }
 
   if (useComma) {
-    // 정수부와 소수부 분리
+    // Separate integer and decimal parts
     const dotIndex = result.indexOf(".");
     const integerPart = dotIndex >= 0 ? result.slice(0, dotIndex) : result;
     const decimalPart = dotIndex >= 0 ? result.slice(dotIndex + 1) : null;
-    // 정수부에만 콤마 추가
+    // Add comma only to integer part
     const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     result = decimalPart !== null ? `${formattedInteger}.${decimalPart}` : formattedInteger;
   }
@@ -135,17 +135,17 @@ function formatNumber(value: number | undefined, useComma: boolean, minDigits?:
 }
 
 /**
- * 표시용 문자열을 숫자로 변환한다
- * @param str 표시용 문자열
- * @returns 숫자 값 또는 undefined
+ * Convert display string to number
+ * @param str - Display string
+ * @returns Numeric value or undefined
  */
 function parseNumber(str: string): number | undefined {
   if (str === "" || str === "-") return undefined;
 
-  // 콤마 제거
+  // Remove commas
   const cleanStr = str.replace(/,/g, "");
 
-  // 숫자로 변환 시도
+  // Attempt number conversion
   const num = Number(cleanStr);
 
   if (Number.isNaN(num)) return undefined;
@@ -154,18 +154,18 @@ function parseNumber(str: string): number | undefined {
 }
 
 /**
- * 입력 문자열이 유효한 숫자 형식인지 확인한다
- * @param str 입력 문자열
- * @returns 유효 여부
+ * Check if input string is valid number format
+ * @param str - Input string
+ * @returns Whether valid
  */
 function isValidNumberInput(str: string): boolean {
   if (str === "" || str === "-" || str === ".") return true;
 
-  // 콤마 제거
+  // Remove commas
   const cleanStr = str.replace(/,/g, "");
 
-  // 숫자 형식 패턴 (입력 중 상태 포함)
-  // 예: "123", "123.", "123.45", "-123", "-", "-.123"
+  // Number format pattern (including input-in-progress state)
+  // Examples: "123", "123.", "123.45", "-123", "-", "-.123"
   return /^-?\d*\.?\d*$/.test(cleanStr);
 }
 
@@ -175,20 +175,20 @@ interface NumberInputComponent {
 }
 
 /**
- * NumberInput 컴포넌트
+ * NumberInput component
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <NumberInput value={num()} onValueChange={setNum} />
  *
- * // 천단위 콤마 없이
+ * // Without thousand separator
  * <NumberInput value={num()} comma={false} />
  *
- * // 최소 소수점 자릿수 지정
+ * // Specify minimum decimal places
  * <NumberInput value={price()} minDigits={2} />
  *
- * // Prefix 슬롯
+ * // Prefix slot
  * <NumberInput value={price()}>
  *   <NumberInput.Prefix>₩</NumberInput.Prefix>
  * </NumberInput>
@@ -216,11 +216,11 @@ export const NumberInput: NumberInputComponent = (props) => {
     "children",
   ]);
 
-  // 입력 중인 상태를 추적하기 위한 내부 문자열 상태
+  // Internal string state to track editing state
   const [inputStr, setInputStr] = createSignal<string>("");
   const [isEditing, setIsEditing] = createSignal(false);
 
-  // controlled/uncontrolled 패턴 지원
+  // Support controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => local.value,
     onChange: () => local.onValueChange,
@@ -229,7 +229,7 @@ export const NumberInput: NumberInputComponent = (props) => {
   const [prefix, setPrefix] = createSlotSignal();
   const prefixEl = () => prefix() !== undefined;
 
-  // 외부 값 변경 시 입력 문자열 동기화
+  // Sync input string when external value changes
   createEffect(() => {
     const val = value();
     if (!isEditing()) {
@@ -237,7 +237,7 @@ export const NumberInput: NumberInputComponent = (props) => {
     }
   });
 
-  // 표시 값 계산
+  // Compute display value
   const displayValue = () => {
     if (isEditing()) {
       return inputStr();
@@ -245,13 +245,13 @@ export const NumberInput: NumberInputComponent = (props) => {
     return formatNumber(value(), local.comma ?? true, local.minDigits);
   };
 
-  // 입력 핸들러
+  // Input handler
   const handleInput: JSX.InputEventHandler<HTMLInputElement, InputEvent> = (e) => {
     const newValue = e.currentTarget.value;
 
-    // 유효한 숫자 형식인지 확인
+    // Check if valid number format
     if (!isValidNumberInput(newValue)) {
-      // 유효하지 않은 입력은 무시하고 이전 값 복원
+      // Ignore invalid input and restore previous value
       e.currentTarget.value = inputStr();
       return;
     }
@@ -259,15 +259,15 @@ export const NumberInput: NumberInputComponent = (props) => {
     setInputStr(newValue);
     setIsEditing(true);
 
-    // 숫자로 변환
+    // Convert to number
     const num = parseNumber(newValue);
     setValue(num);
   };
 
-  // focus 핸들러
+  // Focus handler
   const handleFocus: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> = () => {
     setIsEditing(true);
-    // focus 시 콤마 제거된 값으로 설정
+    // On focus, set value without comma
     const val = value();
     if (val != null) {
       setInputStr(String(val));
@@ -276,14 +276,14 @@ export const NumberInput: NumberInputComponent = (props) => {
     }
   };
 
-  // blur 핸들러
+  // Blur handler
   const handleBlur: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> = () => {
     setIsEditing(false);
-    // blur 시 포맷팅 적용
+    // On blur, apply formatting
     setInputStr(formatNumber(value(), local.comma ?? true, local.minDigits));
   };
 
-  // wrapper 클래스 (inset 분기에서는 local.class 제외)
+  // Wrapper class (exclude local.class in inset branch)
   const getWrapperClass = (includeCustomClass: boolean) =>
     getFieldWrapperClass({
       size: local.size,
@@ -295,13 +295,13 @@ export const NumberInput: NumberInputComponent = (props) => {
 
   const isEditable = () => !local.disabled && !local.readonly;
 
-  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "필수 입력 항목입니다";
+    if (local.required && v === undefined) return "This field is required";
     if (v !== undefined) {
-      if (local.min !== undefined && v < local.min) return `최솟값은 ${local.min}입니다`;
-      if (local.max !== undefined && v > local.max) return `최댓값은 ${local.max}입니다`;
+      if (local.min !== undefined && v < local.min) return `Minimum value is ${local.min}`;
+      if (local.max !== undefined && v > local.max) return `Maximum value is ${local.max}`;
     }
     return local.validate?.(v);
   });
@@ -317,7 +317,7 @@ export const NumberInput: NumberInputComponent = (props) => {
         <Show
           when={local.inset}
           fallback={
-            // standalone 모드: 기존 Show 패턴 유지
+            // standalone mode: keep existing Show pattern
             <Show
               when={isEditable()}
               fallback={
@@ -358,7 +358,7 @@ export const NumberInput: NumberInputComponent = (props) => {
             </Show>
           }
         >
-          {/* inset 모드: dual-element overlay 패턴 */}
+          {/* inset mode: dual-element overlay pattern */}
           <div
             {...rest}
             data-number-field

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

@@ -25,72 +25,72 @@ type TextInputType = "text" | "password" | "email";
 const TextInputPrefix = createSlotComponent(TextInputSlotsContext, (ctx) => ctx.setPrefix);
 
 export interface TextInputProps {
-  /** 입력 값 */
+  /** Input value */
   value?: string;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: string) => void;
 
-  /** 입력 타입 */
+  /** Input type */
   type?: TextInputType;
 
-  /** 플레이스홀더 */
+  /** Placeholder */
   placeholder?: string;
 
-  /** 타이틀 (툴팁) */
+  /** Title (tooltip) */
   title?: string;
 
-  /** 자동완성 */
+  /** Autocomplete */
   autocomplete?: JSX.HTMLAutocomplete;
 
-  /** 비활성화 */
+  /** Disabled state */
   disabled?: boolean;
 
-  /** 읽기 전용 */
+  /** Read-only */
   readonly?: boolean;
 
-  /** 사이즈 */
+  /** Size */
   size?: FieldSize;
 
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 입력 포맷 (예: XXX-XXXX-XXXX) */
+  /** Input format (e.g., XXX-XXXX-XXXX) */
   format?: string;
 
-  /** 필수 입력 여부 */
+  /** Required input */
   required?: boolean;
 
-  /** 최소 길이 */
+  /** Minimum length */
   minLength?: number;
 
-  /** 최대 길이 */
+  /** Maximum length */
   maxLength?: number;
 
-  /** 입력 패턴 (정규식 문자열) */
+  /** Input pattern (regex string) */
   pattern?: string;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: string) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: Show error only after blur */
   touchMode?: boolean;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 
-  /** children (TextInput.Prefix 슬롯) */
+  /** children (TextInput.Prefix slot) */
   children?: JSX.Element;
 }
 
 /**
- * 값에 포맷을 적용한다
- * @param value 원본 값
- * @param format 포맷 문자열 (예: XXX-XXXX-XXXX)
- * @returns 포맷이 적용된 값
+ * Apply format to value
+ * @param value original value
+ * @param format format string (e.g., XXX-XXXX-XXXX)
+ * @returns formatted value
  */
 function applyFormat(value: string, format: string): string {
   if (!value || !format) return value;
@@ -111,10 +111,10 @@ function applyFormat(value: string, format: string): string {
 }
 
 /**
- * 포맷 문자를 제거하여 원본 값을 추출한다
- * @param formattedValue 포맷이 적용된 값
- * @param format 포맷 문자열
- * @returns 원본 값
+ * Remove format characters to extract original value
+ * @param formattedValue formatted value
+ * @param format format string
+ * @returns original value
  */
 function removeFormat(formattedValue: string, format: string): string {
   if (!formattedValue || !format) return formattedValue;
@@ -135,18 +135,18 @@ function removeFormat(formattedValue: string, format: string): string {
 }
 
 /**
- * TextInput 컴포넌트
+ * TextInput component
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <TextInput value={text()} onValueChange={setText} />
  *
- * // 포맷 적용
+ * // With format
  * <TextInput format="XXX-XXXX-XXXX" value={phone()} onValueChange={setPhone} />
  *
- * // password 타입
- * <TextInput type="password" placeholder="비밀번호 입력" />
+ * // Password type
+ * <TextInput type="password" placeholder="Enter password" />
  * ```
  */
 interface TextInputComponent {
@@ -178,13 +178,13 @@ const TextInputInner = (props: TextInputProps) => {
     "children",
   ]);
 
-  // controlled/uncontrolled 패턴 지원
+  // Support controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
     onChange: () => local.onValueChange,
   });
 
-  // IME 조합 중 onValueChange를 지연하여 DOM 재생성(한글 조합 끊김) 방지
+  // Delay onValueChange during IME composition to prevent DOM recreation (Korean composition break)
   const ime = createIMEHandler((v) => setValue(v));
 
   function extractValue(el: HTMLInputElement): string {
@@ -195,7 +195,7 @@ const TextInputInner = (props: TextInputProps) => {
     return val;
   }
 
-  // input 요소용 값 (composingValue 미포함 — IME 조합 방해 방지)
+  // Value for input element (excludes composingValue — prevent IME composition disruption)
   const inputValue = () => {
     const val = value();
     if (local.format != null && local.format !== "") {
@@ -204,7 +204,7 @@ const TextInputInner = (props: TextInputProps) => {
     return val;
   };
 
-  // content div용 표시 값 (composingValue 포함 — 셀 너비 결정)
+  // Display value for content div (includes composingValue — determines cell width)
   const displayValue = () => {
     const composing = ime.composingValue();
     if (composing != null) {
@@ -226,11 +226,11 @@ const TextInputInner = (props: TextInputProps) => {
     ime.handleCompositionEnd(extractValue(e.currentTarget));
   };
 
-  // Prefix 슬롯 Context 등록
+  // Register Prefix slot Context
   const [prefix, setPrefix] = createSlotSignal();
   const prefixEl = () => prefix() !== undefined;
 
-  // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
+  // Wrapper class (exclude local.class when includeCustomClass=false — only apply to outer in inset)
   const getWrapperClass = (includeCustomClass: boolean) =>
     getFieldWrapperClass({
       size: local.size,
@@ -240,27 +240,27 @@ const TextInputInner = (props: TextInputProps) => {
       extra: prefixEl() && fieldGapClasses[local.size ?? "default"],
     });
 
-  // 편집 가능 여부
+  // Whether editable
   const isEditable = () => !local.disabled && !local.readonly;
 
-  // disabled 전환 시 미커밋 조합 값 flush
+  // Flush uncommitted composition value when toggling disabled
   createEffect(() => {
     if (!isEditable()) {
       ime.flushComposition();
     }
   });
 
-  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  // Validation error message (check in order, return first failure message)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && !v) return "필수 입력 항목입니다";
+    if (local.required && !v) return "This is a required field";
     if (v) {
       if (local.minLength != null && v.length < local.minLength)
-        return `최소 ${local.minLength}자 이상 입력하세요`;
+        return `Enter at least ${local.minLength} characters`;
       if (local.maxLength != null && v.length > local.maxLength)
-        return `최대 ${local.maxLength}자까지 입력 가능합니다`;
+        return `Enter up to ${local.maxLength} characters`;
       if (local.pattern != null && !new RegExp(local.pattern).test(v))
-        return "입력 형식이 올바르지 않습니다";
+        return "The input format is invalid";
     }
     return local.validate?.(v);
   });
@@ -276,7 +276,7 @@ const TextInputInner = (props: TextInputProps) => {
         <Show
           when={local.inset}
           fallback={
-            // standalone 모드: 기존 Show 패턴 유지
+            // standalone mode: maintain existing Show pattern
             <Show
               when={isEditable()}
               fallback={
@@ -313,7 +313,7 @@ const TextInputInner = (props: TextInputProps) => {
             </Show>
           }
         >
-          {/* inset 모드: dual-element overlay 패턴 */}
+          {/* inset mode: dual-element overlay pattern */}
           <div
             {...rest}
             data-text-field