@simplysm/solid 13.0.69 → 13.0.71

package/src/components/feedback/notification/NotificationContext.ts

@@ -1,95 +1,95 @@
 import { type Accessor, createContext, useContext } from "solid-js";
 
-/** 알림 테마 */
+/** Notification theme */
 export type NotificationTheme = "info" | "success" | "warning" | "danger";
 
-/** 알림 액션 버튼 */
+/** Notification action button */
 export interface NotificationAction {
-  /** 버튼 텍스트 */
+  /** Button text */
   label: string;
-  /** 클릭 핸들러 */
+  /** Click handler */
   onClick: () => void;
 }
 
-/** 알림 항목 */
+/** Notification item */
 export interface NotificationItem {
-  /** 고유 식별자 */
+  /** Unique identifier */
   id: string;
-  /** 테마 (info, success, warning, danger) */
+  /** Theme (info, success, warning, danger) */
   theme: NotificationTheme;
-  /** 알림 제목 */
+  /** Notification title */
   title: string;
-  /** 알림 메시지 (선택) */
+  /** Notification message (optional) */
   message?: string;
-  /** 액션 버튼 (선택) */
+  /** Action button (optional) */
   action?: NotificationAction;
-  /** 생성 시각 */
+  /** Creation time */
   createdAt: Date;
-  /** 읽음 여부 */
+  /** Read status */
   read: boolean;
 }
 
-/** 알림 생성 옵션 */
+/** Notification creation options */
 export interface NotificationOptions {
-  /** 알림에 표시할 액션 버튼 */
+  /** Action button to display in notification */
   action?: NotificationAction;
 }
 
-/** 알림 수정 옵션 */
+/** Notification update options */
 export interface NotificationUpdateOptions {
-  /** true면 읽은 알림을 다시 읽지 않음 상태로 변경 (배너 재표시) */
+  /** If true, mark read notification as unread (redisplay banner) */
   renotify?: boolean;
 }
 
 /**
- * 알림 시스템 Context 값
+ * Notification system Context value
  *
  * @remarks
- * 알림 생성, 수정, 삭제 및 읽음 관리를 위한 메서드 제공.
- * 최대 50개까지 유지되며 초과 시 오래된 항목부터 제거.
+ * Provides methods to create, update, delete, and manage read status of notifications.
+ * Maintains up to 50 notifications; older items are removed when exceeded.
  */
 export interface NotificationContextValue {
-  // 상태
+  // State
   items: Accessor<NotificationItem[]>;
   unreadCount: Accessor<number>;
   latestUnread: Accessor<NotificationItem | undefined>;
 
-  // 알림 발생 (id 반환)
+  // Create notification (returns id)
   info: (title: string, message?: string, options?: NotificationOptions) => string;
   success: (title: string, message?: string, options?: NotificationOptions) => string;
   warning: (title: string, message?: string, options?: NotificationOptions) => string;
   danger: (title: string, message?: string, options?: NotificationOptions) => string;
   error: (err?: any, header?: string) => void;
 
-  // 알림 수정
+  // Update notification
   update: (
     id: string,
     updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
     options?: NotificationUpdateOptions,
   ) => void;
 
-  // 알림 삭제
+  // Delete notification
   remove: (id: string) => void;
 
-  // 관리
+  // Management
   markAsRead: (id: string) => void;
   markAllAsRead: () => void;
   dismissBanner: () => void;
   clear: () => void;
 }
 
-/** 알림 시스템 Context */
+/** Notification system Context */
 export const NotificationContext = createContext<NotificationContextValue>();
 
 /**
- * 알림 시스템에 접근하는 훅
+ * Hook to access the notification system
  *
- * @throws NotificationProvider가 없으면 에러 발생
+ * @throws Error if used outside NotificationProvider
  */
 export function useNotification(): NotificationContextValue {
   const context = useContext(NotificationContext);
   if (!context) {
-    throw new Error("useNotification은 NotificationProvider 내부에서만 사용할 수 있습니다");
+    throw new Error("useNotification can only be used inside NotificationProvider");
   }
   return context;
 }

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -12,13 +12,13 @@ import { useLogger } from "../../../hooks/useLogger";
 const MAX_ITEMS = 50;
 
 /**
- * 알림 시스템 Provider
+ * Notification system Provider
  *
  * @remarks
- * - 최대 50개 알림 유지 (초과 시 오래된 항목 자동 제거)
- * - 읽지 않은 최신 알림을 배너로 표시
- * - 스크린 리더용 aria-live region 포함
- * - LoggerProvider가 있으면 에러 알림을 로거에도 기록
+ * - Maintains up to 50 notifications (older items auto-removed)
+ * - Shows latest unread notification in banner
+ * - Includes aria-live region for screen readers
+ * - Logs errors to logger if LoggerProvider is present
  */
 export const NotificationProvider: ParentComponent = (props) => {
   const logger = useLogger();
@@ -99,10 +99,10 @@ export const NotificationProvider: ParentComponent = (props) => {
 
         const updated = { ...item, ...updates };
 
-        // renotify: 읽은 상태면 다시 읽지 않음으로 변경
+        // renotify: if read, change back to unread
         if (options?.renotify && item.read) {
           updated.read = false;
-          // 배너가 dismiss된 상태에서 renotify되면 다시 보이게
+          // if dismissed banner is renotified, show it again
           setDismissedBannerId(null);
         }
 
@@ -155,10 +155,10 @@ export const NotificationProvider: ParentComponent = (props) => {
 
   return (
     <NotificationContext.Provider value={contextValue}>
-      {/* 스크린 리더용 Live Region */}
+      {/* Screen reader Live Region */}
       <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
         <Show when={latestUnread()}>
-          {(item) => `알림: ${item().title} ${item().message ?? ""}`}
+          {(item) => `Notification: ${item().title} ${item().message ?? ""}`}
         </Show>
       </div>
       {props.children}

package/src/components/feedback/print/PrintContext.ts

@@ -15,6 +15,6 @@ export const PrintContext = createContext<PrintContextValue>();
 
 export function usePrint(): PrintContextValue {
   const ctx = useContext(PrintContext);
-  if (!ctx) throw new Error("usePrint는 PrintProvider 내부에서만 사용할 수 있습니다");
+  if (!ctx) throw new Error("usePrint can only be used inside PrintProvider");
   return ctx;
 }

package/src/components/form-control/Button.tsx

@@ -9,7 +9,7 @@ import {
   disabledOpacity,
 } from "../../styles/tokens.styles";
 
-// Directive 사용 선언 (TypeScript용)
+// Directive usage declaration (for TypeScript)
 void ripple;
 
 type ButtonTheme = SemanticTheme;

package/src/components/form-control/DropdownTrigger.styles.ts

@@ -38,7 +38,7 @@ export const triggerSizeClasses: Record<ComponentSize, string> = {
 
 export const chevronWrapperClass = clsx("opacity-30", "hover:opacity-100");
 
-/** Select/Combobox 공유 트리거 클래스 빌더 */
+/** Select/Combobox shared trigger class builder */
 export function getTriggerClass(options: {
   size?: ComponentSize;
   disabled?: boolean;

package/src/components/form-control/Invalid.tsx

@@ -27,13 +27,13 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
 
   const resolved = children(() => props.children);
 
-  // message 변경 시 setCustomValidity 반응형 업데이트 (touchMode 무관하게 항상)
+  // Reactively update setCustomValidity when message changes (always, regardless of touchMode)
   createEffect(() => {
     const msg = props.message ?? "";
     hiddenInputEl.setCustomValidity(msg);
   });
 
-  // target에 relative 설정 + hidden input을 target 내부에 삽입
+  // Set target to relative + insert hidden input inside target
   createEffect(() => {
     const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
     if (!targetEl) return;
@@ -52,7 +52,7 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     });
   });
 
-  // 시각적 표시 처리
+  // Handle visual indication
   createEffect(() => {
     const variant = props.variant ?? "dot";
     const message = props.message ?? "";
@@ -102,7 +102,7 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     }
   });
 
-  // touchMode: target에 focusout 이벤트 등록하여 touched 상태 추적
+  // touchMode: register focusout event on target to track touched state
   createEffect(() => {
     if (!(props.touchMode ?? false)) return;
 
@@ -121,7 +121,7 @@ export const Invalid: ParentComponent<InvalidProps> = (props) => {
     });
   });
 
-  // hidden input 포커스 시 target의 focusable child로 리디렉션
+  // Redirect hidden input focus to focusable child of target
   hiddenInputEl.addEventListener("focus", () => {
     const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
 

package/src/components/form-control/ThemeToggle.tsx

@@ -19,33 +19,33 @@ const iconSizes: Record<"sm" | "lg", string> = {
 };
 
 const modeLabels: Record<ThemeMode, string> = {
-  light: "라이트 모드",
-  system: "시스템 설정",
-  dark: "다크 모드",
+  light: "Light mode",
+  system: "System settings",
+  dark: "Dark mode",
 };
 
 export interface ThemeToggleProps extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
   "children"
 > {
-  /** 버튼 크기 */
+  /** Button size */
   size?: "sm" | "lg";
 }
 
 /**
- * 테마 토글 버튼 컴포넌트
+ * Theme toggle button component
  *
  * @remarks
- * - ThemeProvider 내부에서 사용해야 함
- * - 클릭 시 light → system → dark → light 순환
- * - 현재 모드에 맞는 아이콘 표시 (☀️ / 💻 / 🌙)
+ * - Must be used inside ThemeProvider
+ * - Cycles through light → system → dark → light on click
+ * - Shows appropriate icon for current mode (☀️ / 💻 / 🌙)
  *
  * @example
  * ```tsx
- * // 기본 사용
+ * // Basic usage
  * <ThemeToggle />
  *
- * // 크기 조절
+ * // Adjust size
  * <ThemeToggle size="sm" />
  * <ThemeToggle size="lg" />
  * ```

package/src/components/form-control/checkbox/Checkbox.styles.ts

@@ -12,7 +12,7 @@ import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.style
 
 export type CheckboxSize = ComponentSize;
 
-// wrapper 기본 스타일
+// wrapper base styles
 export const checkboxBaseClass = clsx(
   "inline-flex items-center gap-2",
   "whitespace-nowrap",
@@ -25,7 +25,7 @@ export const checkboxBaseClass = clsx(
   "focus-visible:ring-2",
 );
 
-// 인디케이터 기본 스타일
+// Indicator base styles
 export const indicatorBaseClass = clsx(
   "flex shrink-0 items-center justify-center",
   "size-4",
@@ -36,10 +36,10 @@ export const indicatorBaseClass = clsx(
   "transition-colors",
 );
 
-// 체크 상태 스타일 (primary 고정)
+// Checked state styles (primary fixed)
 export const checkedClass = clsx("border-primary-500 bg-primary-500", "text-white");
 
-// 사이즈별 스타일
+// Size-specific styles
 export const checkboxSizeClasses: Record<CheckboxSize, string> = {
   xs: clsx("h-field-xs", paddingXs),
   sm: clsx("h-field-sm", paddingSm),
@@ -47,14 +47,14 @@ export const checkboxSizeClasses: Record<CheckboxSize, string> = {
   xl: clsx("h-field-xl", paddingXl),
 };
 
-// inset 스타일
+// Inset styles
 export const checkboxInsetClass = clsx(
   "h-field-inset justify-center bg-transparent",
   insetBase,
   insetFocusOutlineSelf,
 );
 
-// inset 사이즈별 높이 (border 2px 제외)
+// Inset size-specific heights (excluding 2px border)
 export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
   xs: "h-field-inset-xs",
   sm: "h-field-inset-sm",
@@ -62,8 +62,8 @@ export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
   xl: "h-field-inset-xl",
 };
 
-// inline 스타일
+// Inline styles
 export const checkboxInlineClass = clsx("!h-auto", "!p-0", "gap-1");
 
-// disabled 스타일
+// Disabled styles
 export const checkboxDisabledClass = disabledOpacity;

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ import {
 } from "./Checkbox.styles";
 import { Invalid } from "../Invalid";
 
-// Directive 사용 선언 (TypeScript용)
+// Directive usage declaration (for TypeScript)
 void ripple;
 
 export interface CheckboxProps {
@@ -84,7 +84,7 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = local.value ?? false;
-    if (local.required && !v) return "필수 선택 항목입니다";
+    if (local.required && !v) return "This is a required selection";
     return local.validate?.(v);
   });
 

package/src/components/form-control/checkbox/CheckboxGroup.tsx

@@ -31,7 +31,7 @@ const { Group } = createSelectionGroup({
   mode: "multiple",
   contextName: "CheckboxGroup",
   ItemComponent: Checkbox,
-  emptyErrorMsg: "항목을 선택해 주세요",
+  emptyErrorMsg: "Please select an item",
 });
 
 export const CheckboxGroup = Group as unknown as CheckboxGroupComponent;

package/src/components/form-control/checkbox/Radio.tsx

@@ -18,7 +18,7 @@ import { Invalid } from "../Invalid";
 
 const radioDotClass = clsx("size-2", "rounded-full", "bg-current");
 
-// Directive 사용 선언 (TypeScript용)
+// Directive usage declaration (for TypeScript)
 void ripple;
 
 export interface RadioProps {
@@ -85,7 +85,7 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = local.value ?? false;
-    if (local.required && !v) return "필수 선택 항목입니다";
+    if (local.required && !v) return "This is a required selection";
     return local.validate?.(v);
   });
 

package/src/components/form-control/checkbox/RadioGroup.tsx

@@ -31,7 +31,7 @@ const { Group } = createSelectionGroup({
   mode: "single",
   contextName: "RadioGroup",
   ItemComponent: Radio,
-  emptyErrorMsg: "항목을 선택해 주세요",
+  emptyErrorMsg: "Please select an item",
 });
 
 export const RadioGroup = Group as unknown as RadioGroupComponent;

package/src/components/form-control/color-picker/ColorPicker.tsx

@@ -5,13 +5,13 @@ import { createControllableSignal } from "../../../hooks/createControllableSigna
 import { Invalid } from "../Invalid";
 import { type ComponentSize } from "../../../styles/tokens.styles";
 
-// 기본 스타일
+// Base style
 const baseClass = clsx(
   "size-field",
   "rounded",
   "border border-black/10 dark:border-white/10",
   "cursor-pointer",
-  // color input 기본 스타일 제거
+  // Remove color input default styles
   "[&::-webkit-color-swatch-wrapper]:p-0",
   "[&::-webkit-color-swatch]:border-none",
   "[&::-webkit-color-swatch]:rounded-none",
@@ -19,7 +19,7 @@ const baseClass = clsx(
   "[&::-moz-color-swatch]:rounded-none",
 );
 
-// 사이즈별 스타일
+// Size-specific styles
 const sizeClasses: Record<ComponentSize, string> = {
   xs: "size-field-xs",
   sm: "size-field-sm",
@@ -27,7 +27,7 @@ const sizeClasses: Record<ComponentSize, string> = {
   xl: "size-field-xl",
 };
 
-// disabled 스타일 - 대각선 줄무늬로 표시
+// Disabled style - shown as diagonal stripes
 // eslint-disable-next-line tailwindcss/enforces-shorthand
 const disabledClass = clsx(
   "cursor-default",
@@ -37,42 +37,42 @@ const disabledClass = clsx(
 );
 
 export interface ColorPickerProps {
-  /** 색상 값 (#RRGGBB 형식) */
+  /** Color value (#RRGGBB format) */
   value?: string;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: string | undefined) => void;
 
-  /** 타이틀 (툴팁) */
+  /** Title (tooltip) */
   title?: string;
 
-  /** 비활성화 */
+  /** Disable input */
   disabled?: boolean;
 
-  /** 사이즈 */
+  /** Size */
   size?: ComponentSize;
 
-  /** inset 모드 (DataSheet 셀 내부 등) */
+  /** inset mode (e.g., inside DataSheet cell) */
   inset?: boolean;
 
-  /** 필수 입력 여부 */
+  /** Required input */
   required?: boolean;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: string | undefined) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: show errors only after blur */
   touchMode?: boolean;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 }
 
 /**
- * ColorPicker 컴포넌트
+ * ColorPicker component
  *
  * @example
  * ```tsx
@@ -113,7 +113,7 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && (v === undefined || v === "")) return "필수 입력 항목입니다";
+    if (local.required && (v === undefined || v === "")) return "This field is required";
     return local.validate?.(v);
   });