@simplysm/solid 13.0.29 → 13.0.31

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

@@ -1,20 +1,20 @@
-import { type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import { type JSX, type ParentComponent, Show, splitProps, createMemo } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { ripple } from "../../../directives/ripple";
 import clsx from "clsx";
 import {
-  type CheckboxTheme,
   type CheckboxSize,
   checkboxBaseClass,
   indicatorBaseClass,
-  themeCheckedClasses,
+  checkedClass,
   checkboxSizeClasses,
   checkboxInsetClass,
   checkboxInsetSizeHeightClasses,
   checkboxInlineClass,
   checkboxDisabledClass,
 } from "./Checkbox.styles";
+import { Invalid } from "../Invalid";
 
 const radioDotClass = clsx("size-2", "rounded-full", "bg-current");
 
@@ -26,9 +26,11 @@ export interface RadioProps {
   onValueChange?: (value: boolean) => void;
   disabled?: boolean;
   size?: CheckboxSize;
-  theme?: CheckboxTheme;
   inset?: boolean;
   inline?: boolean;
+  required?: boolean;
+  validate?: (value: boolean) => string | undefined;
+  touchMode?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -40,9 +42,11 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
     "onValueChange",
     "disabled",
     "size",
-    "theme",
     "inset",
     "inline",
+    "required",
+    "validate",
+    "touchMode",
     "class",
     "style",
     "children",
@@ -76,32 +80,39 @@ export const Radio: ParentComponent<RadioProps> = (props) => {
       local.class,
     );
 
-  const getIndicatorClass = () => {
-    const theme = local.theme ?? "primary";
+  const getIndicatorClass = () =>
+    twMerge(indicatorBaseClass, "rounded-full", value() && checkedClass);
 
-    return twMerge(indicatorBaseClass, "rounded-full", value() && themeCheckedClasses[theme]);
-  };
+  const errorMsg = createMemo(() => {
+    const v = local.value ?? false;
+    if (local.required && !v) return "필수 선택 항목입니다";
+    return local.validate?.(v);
+  });
 
   return (
-    <label
-      {...rest}
-      use:ripple={!local.disabled}
-      role="radio"
-      aria-checked={value()}
-      tabIndex={local.disabled ? -1 : 0}
-      class={getWrapperClass()}
-      style={local.style}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-    >
-      <div class={getIndicatorClass()}>
-        <Show when={value()}>
-          <div class={radioDotClass} />
-        </Show>
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <div class="inline-flex">
+        <label
+          {...rest}
+          use:ripple={!local.disabled}
+          role="radio"
+          aria-checked={value()}
+          tabIndex={local.disabled ? -1 : 0}
+          class={getWrapperClass()}
+          style={local.style}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+        >
+          <div class={getIndicatorClass()}>
+            <Show when={value()}>
+              <div class={radioDotClass} />
+            </Show>
+          </div>
+          <Show when={local.children}>
+            <span>{local.children}</span>
+          </Show>
+        </label>
       </div>
-      <Show when={local.children}>
-        <span>{local.children}</span>
-      </Show>
-    </label>
+    </Invalid>
   );
 };

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

@@ -1,60 +1,18 @@
-import { type JSX, type ParentComponent, createContext, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { type JSX } from "solid-js";
 import { Radio } from "./Radio";
-import type { CheckboxSize, CheckboxTheme } from "./Checkbox.styles";
-
-interface RadioGroupContextValue<TValue> {
-  value: () => TValue | undefined;
-  select: (item: TValue) => void;
-  disabled: () => boolean;
-  size: () => CheckboxSize | undefined;
-  theme: () => CheckboxTheme | undefined;
-  inline: () => boolean;
-  inset: () => boolean;
-}
-
-const RadioGroupContext = createContext<RadioGroupContextValue<any>>();
-
-// --- RadioGroup.Item ---
-
-interface RadioGroupItemProps<TValue> {
-  value: TValue;
-  disabled?: boolean;
-  children?: JSX.Element;
-}
-
-function RadioGroupItemInner<TValue>(props: RadioGroupItemProps<TValue>) {
-  const ctx = useContext(RadioGroupContext);
-  if (!ctx) throw new Error("RadioGroup.Item은 RadioGroup 내부에서만 사용할 수 있습니다");
-
-  const isSelected = () => ctx.value() === props.value;
-
-  return (
-    <Radio
-      value={isSelected()}
-      onValueChange={() => ctx.select(props.value)}
-      disabled={props.disabled ?? ctx.disabled()}
-      size={ctx.size()}
-      theme={ctx.theme()}
-      inline={ctx.inline()}
-      inset={ctx.inset()}
-    >
-      {props.children}
-    </Radio>
-  );
-}
-
-// --- RadioGroup ---
+import { createSelectionGroup } from "../../../hooks/createSelectionGroup";
+import type { CheckboxSize } from "./Checkbox.styles";
 
 interface RadioGroupProps<TValue> {
   value?: TValue;
   onValueChange?: (value: TValue) => void;
   disabled?: boolean;
   size?: CheckboxSize;
-  theme?: CheckboxTheme;
   inline?: boolean;
   inset?: boolean;
+  required?: boolean;
+  validate?: (value: TValue | undefined) => string | undefined;
+  touchMode?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -62,50 +20,18 @@ interface RadioGroupProps<TValue> {
 
 interface RadioGroupComponent {
   <TValue = unknown>(props: RadioGroupProps<TValue>): JSX.Element;
-  Item: typeof RadioGroupItemInner;
+  Item: <TValue = unknown>(props: {
+    value: TValue;
+    disabled?: boolean;
+    children?: JSX.Element;
+  }) => JSX.Element;
 }
 
-const RadioGroupInner: ParentComponent<RadioGroupProps<unknown>> = (props) => {
-  const [local, rest] = splitProps(props, [
-    "value",
-    "onValueChange",
-    "disabled",
-    "size",
-    "theme",
-    "inline",
-    "inset",
-    "class",
-    "style",
-    "children",
-  ]);
-
-  const [value, setValue] = createControllableSignal({
-    value: () => local.value,
-    onChange: () => local.onValueChange,
-  });
-
-  const select = (item: unknown) => {
-    setValue(item);
-  };
-
-  const contextValue: RadioGroupContextValue<unknown> = {
-    value,
-    select,
-    disabled: () => local.disabled ?? false,
-    size: () => local.size,
-    theme: () => local.theme,
-    inline: () => local.inline ?? false,
-    inset: () => local.inset ?? false,
-  };
-
-  return (
-    <RadioGroupContext.Provider value={contextValue}>
-      <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
-        {local.children}
-      </div>
-    </RadioGroupContext.Provider>
-  );
-};
+const { Group } = createSelectionGroup({
+  mode: "single",
+  contextName: "RadioGroup",
+  ItemComponent: Radio,
+  emptyErrorMsg: "항목을 선택해 주세요",
+});
 
-export const RadioGroup = RadioGroupInner as unknown as RadioGroupComponent;
-RadioGroup.Item = RadioGroupItemInner;
+export const RadioGroup = Group as unknown as RadioGroupComponent;

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

@@ -1,9 +1,9 @@
-import { type Component, type JSX, splitProps } from "solid-js";
+import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-
-type ColorPickerSize = "sm" | "lg";
+import { Invalid } from "../Invalid";
+import { type ComponentSizeCompact } from "../../../styles/tokens.styles";
 
 // 기본 스타일
 const baseClass = clsx(
@@ -20,7 +20,7 @@ const baseClass = clsx(
 );
 
 // 사이즈별 스타일
-const sizeClasses: Record<ColorPickerSize, string> = {
+const sizeClasses: Record<ComponentSizeCompact, string> = {
   sm: "size-field-sm",
   lg: "size-field-lg",
 };
@@ -48,7 +48,16 @@ export interface ColorPickerProps {
   disabled?: boolean;
 
   /** 사이즈 */
-  size?: ColorPickerSize;
+  size?: ComponentSizeCompact;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: string | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 
   /** 커스텀 class */
   class?: string;
@@ -72,6 +81,9 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
     "title",
     "disabled",
     "size",
+    "required",
+    "validate",
+    "touchMode",
     "class",
     "style",
   ]);
@@ -93,17 +105,25 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
       local.class,
     );
 
+  const errorMsg = createMemo(() => {
+    const v = props.value;
+    if (local.required && (v === undefined || v === "")) return "필수 입력 항목입니다";
+    return local.validate?.(v);
+  });
+
   return (
-    <input
-      {...rest}
-      data-color-picker
-      type="color"
-      class={getClassName()}
-      style={local.style}
-      value={value()}
-      title={local.title}
-      disabled={local.disabled}
-      onInput={handleInput}
-    />
+    <Invalid variant="border" message={errorMsg()} touchMode={local.touchMode}>
+      <input
+        {...rest}
+        data-color-picker
+        type="color"
+        class={getClassName()}
+        style={local.style}
+        value={value()}
+        title={local.title}
+        disabled={local.disabled}
+        onInput={handleInput}
+      />
+    </Invalid>
   );
 };

package/src/components/form-control/combobox/Combobox.tsx

@@ -1,4 +1,13 @@
-import { children, createSignal, For, type JSX, onCleanup, Show, splitProps } from "solid-js";
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  onCleanup,
+  Show,
+  splitProps,
+} from "solid-js";
 import clsx from "clsx";
 import { IconChevronDown, IconLoader2 } from "@tabler/icons-solidjs";
 import { DebounceQueue } from "@simplysm/core-common";
@@ -9,9 +18,11 @@ import { ComboboxContext, type ComboboxContextValue } from "./ComboboxContext";
 import { ComboboxItem } from "./ComboboxItem";
 import { ripple } from "../../../directives/ripple";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createItemTemplate } from "../../../hooks/createItemTemplate";
 import { splitSlots } from "../../../helpers/splitSlots";
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+import { Invalid } from "../Invalid";
 
 void ripple;
 
@@ -25,25 +36,8 @@ const inputClass = clsx(
 
 const noResultsClass = clsx("px-3 py-2", textMuted);
 
-/**
- * Combobox 아이템 렌더링 템플릿
- */
-interface ComboboxItemTemplateProps<TItem> {
-  children: (item: TItem, index: number) => JSX.Element;
-}
-
-// 템플릿 함수를 저장하는 전역 WeakMap
-const templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number) => JSX.Element>();
-
-const ComboboxItemTemplate = <T,>(props: ComboboxItemTemplateProps<T>) => (
-  <span
-    ref={(el) => {
-      templateFnMap.set(el, props.children as (item: unknown, index: number) => JSX.Element);
-    }}
-    data-combobox-item-template
-    style={{ display: "none" }}
-  />
-);
+const { TemplateSlot: ComboboxItemTemplate, getTemplate: getComboboxItemTemplate } =
+  createItemTemplate<[item: unknown, index: number]>("data-combobox-item-template");
 
 // Props 정의
 export interface ComboboxProps<TValue = unknown> {
@@ -54,7 +48,7 @@ export interface ComboboxProps<TValue = unknown> {
   onValueChange?: (value: TValue) => void;
 
   /** 아이템 로드 함수 (필수) */
-  loadItems: (query: string) => Promise<TValue[]>;
+  loadItems: (query: string) => TValue[] | Promise<TValue[]>;
 
   /** 디바운스 딜레이 (기본값: 300ms) */
   debounceMs?: number;
@@ -74,6 +68,12 @@ export interface ComboboxProps<TValue = unknown> {
   /** 필수 입력 */
   required?: boolean;
 
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: TValue | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 플레이스홀더 */
   placeholder?: string;
 
@@ -146,6 +146,8 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     "placeholder",
     "size",
     "inset",
+    "validate",
+    "touchMode",
   ]);
 
   let triggerRef!: HTMLDivElement;
@@ -154,7 +156,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
   const [items, setItems] = createSignal<T[]>([]);
-  const [busy, setBusy] = createSignal(false);
+  const [busyCount, setBusyCount] = createSignal(0);
 
   // 선택된 값 관리 (controlled/uncontrolled 패턴)
   const [getValue, setInternalValue] = createControllableSignal<T | undefined>({
@@ -200,12 +202,12 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     // loadItems 함수 참조를 캡처하여 사용
     const loadItemsFn = local.loadItems;
     debounceQueue.run(async () => {
-      setBusy(true);
+      setBusyCount((c) => c + 1);
       try {
-        const result = await loadItemsFn(searchQuery);
+        const result = await Promise.resolve(loadItemsFn(searchQuery));
         setItems(result);
       } finally {
-        setBusy(false);
+        setBusyCount((c) => c - 1);
       }
     });
   };
@@ -261,6 +263,14 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
     }
   };
 
+  // 유효성 검사 메시지
+  const errorMsg = createMemo(() => {
+    const v = getValue();
+    if (local.required && (v === undefined || v === null || v === ""))
+      return "필수 입력 항목입니다";
+    return local.validate?.(v);
+  });
+
   // 트리거 클래스
   const getTriggerClassName = () =>
     getTriggerClass({
@@ -280,9 +290,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
 
     // itemTemplate 함수 추출
     const getItemTemplate = (): ((item: T, index: number) => JSX.Element) | undefined => {
-      const templateSlots = slots().comboboxItemTemplate;
-      if (templateSlots.length === 0) return undefined;
-      return templateFnMap.get(templateSlots[0]) as
+      return getComboboxItemTemplate(slots().comboboxItemTemplate) as
         | ((item: T, index: number) => JSX.Element)
         | undefined;
     };
@@ -320,7 +328,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
       const itemTemplate = getItemTemplate();
 
       // 로딩 중
-      if (busy()) {
+      if (busyCount() > 0) {
         return <div class={noResultsClass}>검색 중...</div>;
       }
 
@@ -372,7 +380,7 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
         >
           <div class={selectedValueClass}>{renderDisplayContent()}</div>
           <div class={chevronWrapperClass}>
-            <Show when={busy()} fallback={<Icon icon={IconChevronDown} size="1em" />}>
+            <Show when={busyCount() > 0} fallback={<Icon icon={IconChevronDown} size="1em" />}>
               <Icon icon={IconLoader2} size="1em" class="animate-spin" />
             </Show>
           </div>
@@ -388,9 +396,11 @@ export const Combobox: ComboboxComponent = <T,>(props: ComboboxProps<T>) => {
   };
 
   return (
-    <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>
-      <ComboboxInner>{local.children}</ComboboxInner>
-    </ComboboxContext.Provider>
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <ComboboxContext.Provider value={contextValue as ComboboxContextValue}>
+        <ComboboxInner>{local.children}</ComboboxInner>
+      </ComboboxContext.Provider>
+    </Invalid>
   );
 };
 

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import type { Editor } from "@tiptap/core";
 import { createEditorTransaction } from "solid-tiptap";
+import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
   IconBold,
   IconItalic,
@@ -39,13 +40,7 @@ const toolbarClass = clsx(
 );
 
 // 툴바 버튼 기본 스타일
-const toolbarBtnClass = clsx(
-  "inline-flex items-center justify-center",
-  "size-7 rounded",
-  "text-base-600 dark:text-base-400",
-  "hover:bg-base-100 dark:hover:bg-base-800",
-  "transition-colors",
-);
+const toolbarBtnClass = twMerge(iconButtonBase, "size-7");
 
 // 툴바 버튼 활성 스타일
 const toolbarBtnActiveClass = clsx(
@@ -57,13 +52,7 @@ const toolbarBtnActiveClass = clsx(
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
 
 // 색상 선택 label 스타일
-const colorLabelClass = clsx(
-  "relative inline-flex items-center justify-center",
-  "size-7 cursor-pointer rounded",
-  "text-base-600 dark:text-base-400",
-  "hover:bg-base-100 dark:hover:bg-base-800",
-  "transition-colors",
-);
+const colorLabelClass = twMerge(iconButtonBase, "relative", "size-7");
 
 // 색상 input 숨기기 스타일
 const colorInputClass = clsx("absolute opacity-0", "size-0");