@simplysm/solid 13.0.69 → 13.0.71

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

@@ -8,52 +8,52 @@ import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
 
 export interface TextareaProps {
-  /** 입력 값 */
+  /** Input value */
   value?: string;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: string) => void;
 
-  /** 플레이스홀더 */
+  /** Placeholder */
   placeholder?: string;
 
-  /** 타이틀 (툴팁) */
+  /** Title (tooltip) */
   title?: string;
 
-  /** 비활성화 */
+  /** Disabled state */
   disabled?: boolean;
 
-  /** 읽기 전용 */
+  /** Read-only */
   readonly?: boolean;
 
-  /** 사이즈 */
+  /** Size */
   size?: FieldSize;
 
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 최소 줄 수 (기본값: 1) */
+  /** Minimum rows (default: 1) */
   minRows?: number;
 
-  /** 필수 입력 여부 */
+  /** Required input */
   required?: boolean;
 
-  /** 최소 길이 */
+  /** Minimum length */
   minLength?: number;
 
-  /** 최대 길이 */
+  /** Maximum length */
   maxLength?: number;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** 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;
 }
 
@@ -67,14 +67,14 @@ const textareaBaseClass = clsx(
 );
 
 /**
- * Textarea 컴포넌트
+ * Textarea component
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <Textarea value={text()} onValueChange={setText} />
  *
- * // 최소 줄 수 지정
+ * // Specify minimum rows
  * <Textarea minRows={3} value={text()} onValueChange={setText} />
  * ```
  */
@@ -103,10 +103,10 @@ export const Textarea: Component<TextareaProps> = (props) => {
     onChange: () => local.onValueChange,
   });
 
-  // IME 조합 중 onValueChange를 지연하여 DOM 재생성(한글 조합 끊김) 방지
+  // Delay onValueChange during IME composition to prevent DOM recreation (Korean composition break)
   const ime = createIMEHandler((v) => setValue(v));
 
-  // content div용 표시 값 (composingValue 포함 — 셀 너비/높이 결정)
+  // Display value for content div (includes composingValue — determines cell width/height)
   const displayValue = () => ime.composingValue() ?? value();
 
   const handleCompositionStart = () => ime.handleCompositionStart();
@@ -135,7 +135,7 @@ export const Textarea: Component<TextareaProps> = (props) => {
       el.selectionStart = start + 1;
       el.selectionEnd = start + 1;
 
-      // input 이벤트를 수동 발행하여 값 동기화
+      // Manually dispatch input event to sync value
       el.dispatchEvent(new InputEvent("input", { bubbles: true }));
     }
   };
@@ -145,11 +145,11 @@ export const Textarea: Component<TextareaProps> = (props) => {
     const val = displayValue();
     const content =
       val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\u00A0";
-    // 마지막이 줄바꿈이면 빈 줄 높이 확보를 위해 공백 추가
+    // Add space if ending with newline to ensure empty line height
     return content.endsWith("\n") ? content + "\u00A0" : content;
   };
 
-  // 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) =>
     getTextareaWrapperClass({
       size: local.size,
@@ -161,25 +161,25 @@ export const Textarea: Component<TextareaProps> = (props) => {
   const getTextareaClass = () =>
     twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && "p-0");
 
-  // 편집 가능 여부
+  // 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`;
     }
     return local.validate?.(v);
   });
@@ -189,7 +189,7 @@ export const Textarea: Component<TextareaProps> = (props) => {
       <Show
         when={local.inset}
         fallback={
-          // standalone 모드: 기존 Show 패턴 유지
+          // standalone mode: maintain existing Show pattern
           <Show
             when={isEditable()}
             fallback={
@@ -235,7 +235,7 @@ export const Textarea: Component<TextareaProps> = (props) => {
           </Show>
         }
       >
-        {/* inset 모드: dual-element overlay 패턴 */}
+        {/* inset mode: dual-element overlay pattern */}
         <div
           {...rest}
           data-textarea-field

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

@@ -9,54 +9,54 @@ import { Invalid } from "../../form-control/Invalid";
 type TimePickerUnit = "minute" | "second";
 
 export interface TimePickerProps {
-  /** 입력 값 */
+  /** Input value */
   value?: Time;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: Time | undefined) => void;
 
-  /** 시간 단위 */
+  /** Time unit */
   unit?: TimePickerUnit;
 
-  /** 타이틀 (툴팁) */
+  /** 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;
 
-  /** 최소 시간 */
+  /** Minimum time */
   min?: Time;
 
-  /** 최대 시간 */
+  /** Maximum time */
   max?: Time;
 
-  /** 필수 입력 여부 */
+  /** Required input */
   required?: boolean;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: Time | undefined) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show errors only after blur */
   touchMode?: boolean;
 }
 
 /**
- * Time 값을 input value용 문자열로 변환
+ * Convert Time value to input value string
  */
 function formatValue(value: Time | undefined, unit: TimePickerUnit): string {
   if (value == null) return "";
@@ -70,20 +70,20 @@ function formatValue(value: Time | undefined, unit: TimePickerUnit): string {
 }
 
 /**
- * 입력 문자열을 Time으로 변환
+ * Convert input string to Time
  */
 function parseValue(str: string, unit: TimePickerUnit): Time | undefined {
   if (str === "") return undefined;
 
   switch (unit) {
     case "minute": {
-      // HH:mm 형식
+      // HH:mm format
       const match = /^(\d{2}):(\d{2})$/.exec(str);
       if (match == null) return undefined;
       return new Time(Number(match[1]), Number(match[2]), 0);
     }
     case "second": {
-      // HH:mm:ss 형식
+      // HH:mm:ss format
       const match = /^(\d{2}):(\d{2}):(\d{2})$/.exec(str);
       if (match == null) return undefined;
       return new Time(Number(match[1]), Number(match[2]), Number(match[3]));
@@ -92,17 +92,17 @@ function parseValue(str: string, unit: TimePickerUnit): Time | undefined {
 }
 
 /**
- * TimePicker 컴포넌트
+ * TimePicker component
  *
- * 시간 입력 필드. minute, second 단위를 지원한다.
- * 내부적으로 string ↔ Time 타입 변환을 처리한다.
+ * Time input field supporting minute and second units.
+ * Handles string ↔ Time type conversion internally.
  *
  * @example
  * ```tsx
- * // 시간 입력 (분 단위)
+ * // Time input (minute unit)
  * <TimePicker unit="minute" value={time()} onValueChange={setTime} />
  *
- * // 시간 입력 (초 단위)
+ * // Time input (second unit)
  * <TimePicker unit="second" value={time()} onValueChange={setTime} />
  * ```
  */
@@ -125,26 +125,26 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "touchMode",
   ]);
 
-  // 기본 단위는 minute
+  // Default unit is minute
   const fieldType = () => local.unit ?? "minute";
 
-  // controlled/uncontrolled 패턴 지원
+  // Support controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => local.value,
     onChange: () => local.onValueChange,
   });
 
-  // 표시 값
+  // Display value
   const displayValue = () => formatValue(value(), fieldType());
 
-  // 값 확정 핸들러 (포커스 아웃 또는 Enter 시)
+  // Change handler (on blur or Enter)
   const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
     const newValue = e.currentTarget.value;
     const parsed = parseValue(newValue, fieldType());
     setValue(parsed);
   };
 
-  // wrapper 클래스
+  // Wrapper class
   const getWrapperClass = (includeCustomClass: boolean) =>
     getFieldWrapperClass({
       size: local.size,
@@ -154,21 +154,21 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
       extra: "min-w-24",
     });
 
-  // 편집 가능 여부
+  // Editable check
   const isEditable = () => !local.disabled && !local.readonly;
 
-  // step 속성 (second일 때 1)
+  // Step attribute (1 when second)
   const getStep = () => (fieldType() === "second" ? "1" : undefined);
 
-  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  // 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.tick < local.min.tick)
-        return `${local.min.toFormatString("HH:mm:ss")}보다 크거나 같아야 합니다`;
+        return `Must be greater than or equal to ${local.min.toFormatString("HH:mm:ss")}`;
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `${local.max.toFormatString("HH:mm:ss")}보다 작거나 같아야 합니다`;
+        return `Must be less than or equal to ${local.max.toFormatString("HH:mm:ss")}`;
     }
     return local.validate?.(v);
   });
@@ -182,7 +182,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
       <Show
         when={local.inset}
         fallback={
-          // standalone 모드
+          // standalone mode
           <Show
             when={isEditable()}
             fallback={
@@ -211,7 +211,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
           </Show>
         }
       >
-        {/* inset 모드: dual-element overlay 패턴 */}
+        {/* inset mode: dual-element overlay pattern */}
         <div {...rest} data-time-field class={clsx("relative", local.class)} style={local.style}>
           <div
             data-time-field-content

package/src/components/form-control/numpad/Numpad.tsx

@@ -9,35 +9,35 @@ import { IconEraser, IconArrowLeft } from "@tabler/icons-solidjs";
 import type { ComponentSize } from "../../../styles/tokens.styles";
 
 export interface NumpadProps {
-  /** 입력 값 */
+  /** Input value */
   value?: number;
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: number | undefined) => void;
-  /** 플레이스홀더 */
+  /** Placeholder */
   placeholder?: string;
-  /** 필수 입력 여부 */
+  /** Whether input is required */
   required?: boolean;
-  /** 텍스트 필드 직접 입력 비활성화 */
+  /** Disable direct text field input */
   inputDisabled?: boolean;
-  /** ENT 버튼 표시 */
+  /** Show Enter button */
   useEnterButton?: boolean;
-  /** - 버튼 표시 */
+  /** Show minus button */
   useMinusButton?: boolean;
-  /** ENT 클릭 콜백 */
+  /** Enter button click callback */
   onEnterButtonClick?: () => void;
-  /** 사이즈 */
+  /** Size */
   size?: ComponentSize;
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 }
 
 const baseClass = clsx("grid grid-cols-3", "gap-0.5", "w-auto");
 
 /**
- * inputStr을 파싱하여 숫자로 변환한다.
- * 빈 문자열이나 "-"만 있는 경우 undefined를 반환한다.
+ * Parse inputStr and convert to number.
+ * Returns undefined for empty string or "-" only.
  */
 function parseInputStr(str: string): number | undefined {
   if (str === "" || str === "-" || str === "." || str === "-.") return undefined;
@@ -46,7 +46,7 @@ function parseInputStr(str: string): number | undefined {
 }
 
 /**
- * 숫자를 inputStr로 변환한다.
+ * Convert number to inputStr.
  */
 function valueToInputStr(value: number | undefined): string {
   if (value == null) return "";
@@ -54,18 +54,18 @@ function valueToInputStr(value: number | undefined): string {
 }
 
 export const Numpad: Component<NumpadProps> = (props) => {
-  // controlled/uncontrolled 패턴
+  // Controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => props.value,
     onChange: () => props.onValueChange,
   });
 
-  // 내부 입력 문자열 상태
+  // Internal input string state
   const [inputStr, setInputStr] = createSignal<string>("");
-  // 버튼 입력 중에는 외부 value → inputStr 동기화를 방지
+  // Prevent external value → inputStr sync when button input is in progress
   let isButtonInput = false;
 
-  // 외부 값 변경 시 inputStr 동기화 (버튼 입력 중이 아닐 때만)
+  // Sync inputStr when external value changes (only when not in button input)
   createEffect(() => {
     const val = value();
     if (!isButtonInput) {
@@ -74,38 +74,38 @@ export const Numpad: Component<NumpadProps> = (props) => {
     isButtonInput = false;
   });
 
-  // inputStr을 파싱하여 value로 반영
+  // Parse inputStr and apply to value
   const applyInputStr = (str: string) => {
     isButtonInput = true;
     setInputStr(str);
     setValue(parseInputStr(str));
   };
 
-  // 숫자 버튼 (0-9)
+  // Digit buttons (0-9)
   const handleDigit = (digit: string) => {
     applyInputStr(inputStr() + digit);
   };
 
-  // 소수점 버튼
+  // Decimal point button
   const handleDot = () => {
     const current = inputStr();
     if (current.includes(".")) return;
     applyInputStr(current + ".");
   };
 
-  // C (클리어) 버튼
+  // C (Clear) button
   const handleClear = () => {
     applyInputStr("");
   };
 
-  // BS (백스페이스) 버튼
+  // BS (Backspace) button
   const handleBackspace = () => {
     const current = inputStr();
     if (current.length === 0) return;
     applyInputStr(current.slice(0, -1));
   };
 
-  // - (마이너스 토글) 버튼
+  // - (Minus toggle) button
   const handleMinus = () => {
     const current = inputStr();
     if (current.startsWith("-")) {
@@ -115,12 +115,12 @@ export const Numpad: Component<NumpadProps> = (props) => {
     }
   };
 
-  // ENT 버튼
+  // ENT button
   const handleEnter = () => {
     props.onEnterButtonClick?.();
   };
 
-  // NumberInput 값 변경 핸들러
+  // NumberInput value change handler
   const handleFieldValueChange = (val: number | undefined) => {
     setValue(val);
     setInputStr(valueToInputStr(val));