@simplysm/solid 13.0.69 → 13.0.71

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

@@ -9,54 +9,54 @@ import { Invalid } from "../../form-control/Invalid";
 type DatePickerUnit = "year" | "month" | "date";
 
 export interface DatePickerProps {
-  /** 입력 값 */
+  /** Input value */
   value?: DateOnly;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: DateOnly | undefined) => void;
 
-  /** 날짜 단위 */
+  /** Date unit */
   unit?: DatePickerUnit;
 
-  /** 최소 날짜 */
+  /** Minimum date */
   min?: DateOnly;
 
-  /** 최대 날짜 */
+  /** Maximum date */
   max?: DateOnly;
 
-  /** 타이틀 (툴팁) */
+  /** 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;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: DateOnly | undefined) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show errors only after blur */
   touchMode?: boolean;
 }
 
 /**
- * DateOnly 값을 타입에 맞는 문자열로 변환
+ * Convert DateOnly value to format string matching type
  */
 function formatDateValue(value: DateOnly | undefined, type: DatePickerUnit): string | undefined {
   if (value == null) return undefined;
@@ -72,7 +72,7 @@ function formatDateValue(value: DateOnly | undefined, type: DatePickerUnit): str
 }
 
 /**
- * 입력 문자열을 DateOnly로 변환
+ * Convert input string to DateOnly
  */
 function parseValue(str: string, type: DatePickerUnit): DateOnly | undefined {
   if (str === "") return undefined;
@@ -84,20 +84,20 @@ function parseValue(str: string, type: DatePickerUnit): DateOnly | undefined {
       return new DateOnly(year, 1, 1);
     }
     case "month": {
-      // yyyy-MM 형식
+      // yyyy-MM format
       const match = /^(\d{4})-(\d{2})$/.exec(str);
       if (match == null) return undefined;
       return new DateOnly(Number(match[1]), Number(match[2]), 1);
     }
     case "date": {
-      // yyyy-MM-dd 형식
+      // yyyy-MM-dd format
       return DateOnly.parse(str);
     }
   }
 }
 
 /**
- * HTML input의 type 속성 결정
+ * Determine HTML input type attribute
  */
 function getInputType(type: DatePickerUnit): string {
   switch (type) {
@@ -111,23 +111,23 @@ function getInputType(type: DatePickerUnit): string {
 }
 
 /**
- * DatePicker 컴포넌트
+ * DatePicker component
  *
- * 날짜 입력 필드. year, month, date 단위를 지원한다.
- * 내부적으로 string ↔ DateOnly 타입 변환을 처리한다.
+ * Date input field supporting year, month, and date units.
+ * Handles string ↔ DateOnly type conversion internally.
  *
  * @example
  * ```tsx
- * // 날짜 입력
+ * // Date input
  * <DatePicker unit="date" value={date()} onValueChange={setDate} />
  *
- * // 연도만 입력
+ * // Year only
  * <DatePicker unit="year" value={yearDate()} onValueChange={setYearDate} />
  *
- * // 연월 입력
+ * // Year-month input
  * <DatePicker unit="month" value={monthDate()} onValueChange={setMonthDate} />
  *
- * // min/max 제한
+ * // With min/max constraints
  * <DatePicker
  *   unit="date"
  *   value={date()}
@@ -155,26 +155,26 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "touchMode",
   ]);
 
-  // 기본 단위는 date
+  // Default unit is date
   const fieldType = () => local.unit ?? "date";
 
-  // controlled/uncontrolled 패턴 지원
+  // Support controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => local.value,
     onChange: () => local.onValueChange,
   });
 
-  // 표시 값
+  // Display value
   const displayValue = () => formatDateValue(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 클래스 (includeCustomClass: 외부 class를 포함할지 여부)
+  // Wrapper class (includeCustomClass: whether to include external class)
   const getWrapperClass = (includeCustomClass: boolean) =>
     getFieldWrapperClass({
       size: local.size,
@@ -184,18 +184,18 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
       extra: "min-w-32",
     });
 
-  // 편집 가능 여부
+  // Editable check
   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.tick < local.min.tick)
-        return `${local.min}보다 크거나 같아야 합니다`;
+        return `Must be greater than or equal to ${local.min}`;
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `${local.max}보다 작거나 같아야 합니다`;
+        return `Must be less than or equal to ${local.max}`;
     }
     return local.validate?.(v);
   });
@@ -209,7 +209,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
       <Show
         when={local.inset}
         fallback={
-          // standalone 모드: 기존 Show 패턴 유지
+          // standalone mode: maintain existing Show pattern
           <Show
             when={isEditable()}
             fallback={
@@ -239,7 +239,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
           </Show>
         }
       >
-        {/* inset 모드: dual-element overlay 패턴 */}
+        {/* inset mode: dual-element overlay pattern */}
         <div {...rest} data-date-field class={clsx("relative", local.class)} style={local.style}>
           <div
             data-date-field-content

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

@@ -9,54 +9,54 @@ import { Invalid } from "../../form-control/Invalid";
 type DateTimePickerUnit = "minute" | "second";
 
 export interface DateTimePickerProps {
-  /** 입력 값 */
+  /** Input value */
   value?: DateTime;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: DateTime | undefined) => void;
 
-  /** 날짜시간 단위 */
+  /** DateTime unit */
   unit?: DateTimePickerUnit;
 
-  /** 최소 날짜시간 */
+  /** Minimum datetime */
   min?: DateTime;
 
-  /** 최대 날짜시간 */
+  /** Maximum datetime */
   max?: DateTime;
 
-  /** 타이틀 (툴팁) */
+  /** 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;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: DateTime | undefined) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show errors only after blur */
   touchMode?: boolean;
 }
 
 /**
- * DateTime 값을 타입에 맞는 문자열로 변환
+ * Convert DateTime value to format string matching type
  */
 function formatDateTimeValue(
   value: DateTime | undefined,
@@ -73,14 +73,14 @@ function formatDateTimeValue(
 }
 
 /**
- * 입력 문자열을 DateTime으로 변환
+ * Convert input string to DateTime
  */
 function parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined {
   if (str === "") return undefined;
 
   switch (unit) {
     case "minute": {
-      // yyyy-MM-ddTHH:mm 형식
+      // yyyy-MM-ddTHH:mm format
       const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(str);
       if (match == null) return undefined;
       return new DateTime(
@@ -93,7 +93,7 @@ function parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined
       );
     }
     case "second": {
-      // yyyy-MM-ddTHH:mm:ss 형식
+      // yyyy-MM-ddTHH:mm:ss format
       const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})$/.exec(str);
       if (match == null) return undefined;
       return new DateTime(
@@ -109,20 +109,20 @@ function parseValue(str: string, unit: DateTimePickerUnit): DateTime | undefined
 }
 
 /**
- * DateTimePicker 컴포넌트
+ * DateTimePicker component
  *
- * 날짜시간 입력 필드. minute, second 단위를 지원한다.
- * 내부적으로 string ↔ DateTime 타입 변환을 처리한다.
+ * DateTime input field supporting minute and second units.
+ * Handles string ↔ DateTime type conversion internally.
  *
  * @example
  * ```tsx
- * // 날짜시간 입력 (분 단위)
+ * // DateTime input (minute unit)
  * <DateTimePicker unit="minute" value={dateTime()} onValueChange={setDateTime} />
  *
- * // 날짜시간 입력 (초 단위)
+ * // DateTime input (second unit)
  * <DateTimePicker unit="second" value={dateTime()} onValueChange={setDateTime} />
  *
- * // min/max 제한
+ * // With min/max constraints
  * <DateTimePicker
  *   unit="minute"
  *   value={dateTime()}
@@ -150,26 +150,26 @@ export const DateTimePicker: Component<DateTimePickerProps> = (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 = () => formatDateTimeValue(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 클래스 (includeCustomClass: inset 모드에서는 커스텀 class를 외부 div에 적용)
+  // Wrapper class (includeCustomClass: whether to apply custom class to outer div in inset mode)
   const getWrapperClass = (includeCustomClass: boolean) =>
     getFieldWrapperClass({
       size: local.size,
@@ -179,21 +179,21 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
       extra: "min-w-44",
     });
 
-  // 편집 가능 여부
+  // 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("yyyy-MM-dd HH:mm:ss")}보다 크거나 같아야 합니다`;
+        return `Must be greater than or equal to ${local.min.toFormatString("yyyy-MM-dd HH:mm:ss")}`;
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `${local.max.toFormatString("yyyy-MM-dd HH:mm:ss")}보다 작거나 같아야 합니다`;
+        return `Must be less than or equal to ${local.max.toFormatString("yyyy-MM-dd HH:mm:ss")}`;
     }
     return local.validate?.(v);
   });
@@ -207,7 +207,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
       <Show
         when={local.inset}
         fallback={
-          // standalone 모드
+          // standalone mode
           <Show
             when={isEditable()}
             fallback={
@@ -238,7 +238,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
           </Show>
         }
       >
-        {/* inset 모드: dual-element overlay 패턴 */}
+        {/* inset mode: dual-element overlay pattern */}
         <div
           {...rest}
           data-datetime-field

package/src/components/form-control/field/Field.styles.ts

@@ -16,7 +16,7 @@ import {
 
 export type FieldSize = ComponentSize;
 
-// 기본 wrapper 스타일
+// Base wrapper styles
 export const fieldBaseClass = clsx(
   "inline-flex items-center",
   fieldSurface,
@@ -25,7 +25,7 @@ export const fieldBaseClass = clsx(
   "[text-decoration:inherit]",
 );
 
-// 사이즈별 스타일
+// Size-specific styles
 export const fieldSizeClasses: Record<FieldSize, string> = {
   xs: clsx("h-field-xs", paddingXs),
   sm: clsx("h-field-sm", paddingSm),
@@ -33,14 +33,14 @@ export const fieldSizeClasses: Record<FieldSize, string> = {
   xl: clsx("h-field-xl", paddingXl),
 };
 
-// inset 스타일
+// Inset styles
 export const fieldInsetClass = clsx(
   insetBase,
   "bg-primary-50 dark:bg-primary-950/30",
   insetFocusOutline,
 );
 
-// inset 높이 (border 2px 제외)
+// Inset heights (excluding 2px border)
 export const fieldInsetHeightClass = "h-field-inset";
 export const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {
   xs: "h-field-inset-xs",
@@ -49,13 +49,13 @@ export const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {
   xl: "h-field-inset-xl",
 };
 
-// disabled 스타일
+// Disabled styles
 export const fieldDisabledClass = clsx("bg-base-100 text-base-500 dark:bg-base-800");
 
-// textarea wrapper 스타일 (h-field 제거)
+// Textarea wrapper styles (h-field removed)
 export const textAreaBaseClass = clsx("inline-block w-48", fieldSurface, "px-2 py-1");
 
-// textarea 사이즈별 스타일 (h-field-* 제거)
+// Textarea size-specific styles (h-field-* removed)
 export const textAreaSizeClasses: Record<FieldSize, string> = {
   xs: paddingXs,
   sm: paddingSm,
@@ -63,10 +63,10 @@ export const textAreaSizeClasses: Record<FieldSize, string> = {
   xl: paddingXl,
 };
 
-// input 스타일
+// Input styles
 export const fieldInputClass = inputBase;
 
-// prefixIcon gap 클래스 (nested ternary 대체)
+// Prefix icon gap classes (replaces nested ternary)
 export const fieldGapClasses: Record<FieldSize | "default", string> = {
   xs: "gap-0.5",
   sm: "gap-1.5",
@@ -75,7 +75,7 @@ export const fieldGapClasses: Record<FieldSize | "default", string> = {
   xl: "gap-4",
 };
 
-// 공유 wrapper 클래스 생성 함수
+// Shared wrapper class generation function
 export function getFieldWrapperClass(options: {
   size?: FieldSize;
   disabled?: boolean;
@@ -95,7 +95,7 @@ export function getFieldWrapperClass(options: {
   );
 }
 
-// Textarea 전용 wrapper 클래스 생성 함수
+// Textarea-specific wrapper class generation function
 export function getTextareaWrapperClass(options: {
   size?: FieldSize;
   disabled?: boolean;

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

@@ -1,7 +1,7 @@
 import { type Component, Show } from "solid-js";
 import { textMuted } from "../../../styles/tokens.styles";
 
-/** 값이 없을 때 placeholder 또는 NBSP를 표시하는 공유 컴포넌트 */
+/** Shared component to display placeholder or NBSP when value is empty */
 export const PlaceholderFallback: Component<{ value?: string; placeholder?: string }> = (props) => (
   <>
     <Show