@simplysm/solid 13.0.28 → 13.0.30

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

@@ -1,29 +1,16 @@
 import { type Component, type JSX, splitProps, Switch, Match } from "solid-js";
-import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-solidjs";
 import { useTheme, type ThemeMode } from "../../providers/ThemeContext";
 import { Icon } from "../display/Icon";
 import { ripple } from "../../directives/ripple";
+import { iconButtonBase } from "../../styles/patterns.styles";
 
 void ripple;
 
-const baseClass = clsx(
-  "inline-flex",
-  "items-center",
-  "justify-center",
-  "cursor-pointer",
-  "rounded",
-  "transition-colors",
-  "text-base-500 dark:text-base-400",
-  "hover:bg-base-200 dark:hover:bg-base-700",
-  "focus:outline-none",
-  "focus-visible:ring-2",
-);
-
 const sizeClasses: Record<"sm" | "lg", string> = {
-  sm: clsx("p-1"),
-  lg: clsx("p-2"),
+  sm: "p-1",
+  lg: "p-2",
 };
 
 const iconSizes: Record<"sm" | "lg", string> = {
@@ -37,7 +24,10 @@ const modeLabels: Record<ThemeMode, string> = {
   dark: "다크 모드",
 };
 
-export interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+export interface ThemeToggleProps extends Omit<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
   /** 버튼 크기 */
   size?: "sm" | "lg";
 }
@@ -65,7 +55,8 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
 
   const { mode, cycleMode } = useTheme();
 
-  const getClassName = () => twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
+  const getClassName = () =>
+    twMerge(iconButtonBase, "p-1.5", local.size && sizeClasses[local.size], local.class);
 
   const iconSize = () => (local.size ? iconSizes[local.size] : "1.25em");
 

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

@@ -10,7 +10,6 @@ import {
 } from "../../../styles/tokens.styles";
 import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles";
 
-export type CheckboxTheme = "primary" | "info" | "success" | "warning" | "danger";
 export type CheckboxSize = ComponentSize;
 
 // wrapper 기본 스타일
@@ -36,14 +35,8 @@ export const indicatorBaseClass = clsx(
   "transition-colors",
 );
 
-// 테마별 체크 상태
-export const themeCheckedClasses: Record<CheckboxTheme, string> = {
-  primary: clsx("border-primary-500 bg-primary-500", "text-white"),
-  info: clsx("border-info-500 bg-info-500", "text-white"),
-  success: clsx("border-success-500 bg-success-500", "text-white"),
-  warning: clsx("border-warning-500 bg-warning-500", "text-white"),
-  danger: clsx("border-danger-500 bg-danger-500", "text-white"),
-};
+// 체크 상태 스타일 (primary 고정)
+export const checkedClass = clsx("border-primary-500 bg-primary-500", "text-white");
 
 // 사이즈별 스타일
 export const checkboxSizeClasses: Record<CheckboxSize, string> = {
@@ -53,7 +46,11 @@ export const checkboxSizeClasses: Record<CheckboxSize, string> = {
 };
 
 // inset 스타일
-export const checkboxInsetClass = clsx("h-field-inset justify-center bg-transparent", insetBase, insetFocusOutlineSelf);
+export const checkboxInsetClass = clsx(
+  "h-field-inset justify-center bg-transparent",
+  insetBase,
+  insetFocusOutlineSelf,
+);
 
 // inset 사이즈별 높이 (border 2px 제외)
 export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {

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

@@ -1,21 +1,21 @@
-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 { IconCheck } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { ripple } from "../../../directives/ripple";
 import { Icon } from "../../display/Icon";
 import {
-  type CheckboxTheme,
   type CheckboxSize,
   checkboxBaseClass,
   indicatorBaseClass,
-  themeCheckedClasses,
+  checkedClass,
   checkboxSizeClasses,
   checkboxInsetClass,
   checkboxInsetSizeHeightClasses,
   checkboxInlineClass,
   checkboxDisabledClass,
 } from "./Checkbox.styles";
+import { Invalid } from "../Invalid";
 
 // Directive 사용 선언 (TypeScript용)
 void ripple;
@@ -25,9 +25,11 @@ export interface CheckboxProps {
   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;
@@ -39,9 +41,11 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
     "onValueChange",
     "disabled",
     "size",
-    "theme",
     "inset",
     "inline",
+    "required",
+    "validate",
+    "touchMode",
     "class",
     "style",
     "children",
@@ -75,32 +79,39 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
       local.class,
     );
 
-  const getIndicatorClass = () => {
-    const theme = local.theme ?? "primary";
+  const getIndicatorClass = () =>
+    twMerge(indicatorBaseClass, "rounded-sm", value() && checkedClass);
 
-    return twMerge(indicatorBaseClass, "rounded-sm", 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="checkbox"
-      aria-checked={value()}
-      tabIndex={local.disabled ? -1 : 0}
-      class={getWrapperClass()}
-      style={local.style}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-    >
-      <div class={getIndicatorClass()}>
-        <Show when={value()}>
-          <Icon icon={IconCheck} size="1em" />
-        </Show>
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <div class="inline-flex">
+        <label
+          {...rest}
+          use:ripple={!local.disabled}
+          role="checkbox"
+          aria-checked={value()}
+          tabIndex={local.disabled ? -1 : 0}
+          class={getWrapperClass()}
+          style={local.style}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+        >
+          <div class={getIndicatorClass()}>
+            <Show when={value()}>
+              <Icon icon={IconCheck} size="1em" />
+            </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/CheckboxGroup.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 { Checkbox } from "./Checkbox";
-import type { CheckboxSize, CheckboxTheme } from "./Checkbox.styles";
-
-interface CheckboxGroupContextValue<TValue> {
-  value: () => TValue[];
-  toggle: (item: TValue) => void;
-  disabled: () => boolean;
-  size: () => CheckboxSize | undefined;
-  theme: () => CheckboxTheme | undefined;
-  inline: () => boolean;
-  inset: () => boolean;
-}
-
-const CheckboxGroupContext = createContext<CheckboxGroupContextValue<any>>();
-
-// --- CheckboxGroup.Item ---
-
-interface CheckboxGroupItemProps<TValue> {
-  value: TValue;
-  disabled?: boolean;
-  children?: JSX.Element;
-}
-
-function CheckboxGroupItemInner<TValue>(props: CheckboxGroupItemProps<TValue>) {
-  const ctx = useContext(CheckboxGroupContext);
-  if (!ctx) throw new Error("CheckboxGroup.Item은 CheckboxGroup 내부에서만 사용할 수 있습니다");
-
-  const isSelected = () => ctx.value().includes(props.value);
-
-  return (
-    <Checkbox
-      value={isSelected()}
-      onValueChange={() => ctx.toggle(props.value)}
-      disabled={props.disabled ?? ctx.disabled()}
-      size={ctx.size()}
-      theme={ctx.theme()}
-      inline={ctx.inline()}
-      inset={ctx.inset()}
-    >
-      {props.children}
-    </Checkbox>
-  );
-}
-
-// --- CheckboxGroup ---
+import { createSelectionGroup } from "../../../hooks/createSelectionGroup";
+import type { CheckboxSize } from "./Checkbox.styles";
 
 interface CheckboxGroupProps<TValue> {
   value?: TValue[];
   onValueChange?: (value: TValue[]) => void;
   disabled?: boolean;
   size?: CheckboxSize;
-  theme?: CheckboxTheme;
   inline?: boolean;
   inset?: boolean;
+  required?: boolean;
+  validate?: (value: TValue[]) => string | undefined;
+  touchMode?: boolean;
   class?: string;
   style?: JSX.CSSProperties;
   children?: JSX.Element;
@@ -62,55 +20,18 @@ interface CheckboxGroupProps<TValue> {
 
 interface CheckboxGroupComponent {
   <TValue = unknown>(props: CheckboxGroupProps<TValue>): JSX.Element;
-  Item: typeof CheckboxGroupItemInner;
+  Item: <TValue = unknown>(props: {
+    value: TValue;
+    disabled?: boolean;
+    children?: JSX.Element;
+  }) => JSX.Element;
 }
 
-const CheckboxGroupInner: ParentComponent<CheckboxGroupProps<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 toggle = (item: unknown) => {
-    setValue((prev) => {
-      if (prev.includes(item)) {
-        return prev.filter((v) => v !== item);
-      }
-      return [...prev, item];
-    });
-  };
-
-  const contextValue: CheckboxGroupContextValue<unknown> = {
-    value,
-    toggle,
-    disabled: () => local.disabled ?? false,
-    size: () => local.size,
-    theme: () => local.theme,
-    inline: () => local.inline ?? false,
-    inset: () => local.inset ?? false,
-  };
-
-  return (
-    <CheckboxGroupContext.Provider value={contextValue}>
-      <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
-        {local.children}
-      </div>
-    </CheckboxGroupContext.Provider>
-  );
-};
+const { Group } = createSelectionGroup({
+  mode: "multiple",
+  contextName: "CheckboxGroup",
+  ItemComponent: Checkbox,
+  emptyErrorMsg: "항목을 선택해 주세요",
+});
 
-export const CheckboxGroup = CheckboxGroupInner as unknown as CheckboxGroupComponent;
-CheckboxGroup.Item = CheckboxGroupItemInner;
+export const CheckboxGroup = Group as unknown as CheckboxGroupComponent;

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;
@@ -66,7 +75,18 @@ export interface ColorPickerProps {
  * ```
  */
 export const ColorPicker: Component<ColorPickerProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "class", "style"]);
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "title",
+    "disabled",
+    "size",
+    "required",
+    "validate",
+    "touchMode",
+    "class",
+    "style",
+  ]);
 
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "#000000",
@@ -78,19 +98,32 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
   };
 
   const getClassName = () =>
-    twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);
+    twMerge(
+      baseClass,
+      local.size && sizeClasses[local.size],
+      local.disabled && disabledClass,
+      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>
   );
 };