@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,106 @@
+import { type JSX, type ParentComponent, Show, splitProps } 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,
+  checkboxSizeClasses,
+  checkboxInsetClass,
+  checkboxInsetSizeHeightClasses,
+  checkboxInlineClass,
+  checkboxDisabledClass,
+} from "./Checkbox.styles";
+
+// Directive 사용 선언 (TypeScript용)
+void ripple;
+
+export interface CheckboxProps {
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  theme?: CheckboxTheme;
+  inset?: boolean;
+  inline?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "theme",
+    "inset",
+    "inline",
+    "class",
+    "style",
+    "children",
+  ]);
+
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? false,
+    onChange: () => local.onValueChange,
+  });
+
+  const handleClick = () => {
+    if (local.disabled) return;
+    setValue((v) => !v);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const getWrapperClass = () =>
+    twMerge(
+      checkboxBaseClass,
+      local.size && checkboxSizeClasses[local.size],
+      local.inset && checkboxInsetClass,
+      local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],
+      local.inline && checkboxInlineClass,
+      local.disabled && checkboxDisabledClass,
+      local.class,
+    );
+
+  const getIndicatorClass = () => {
+    const theme = local.theme ?? "primary";
+
+    return twMerge(indicatorBaseClass, "rounded-sm", value() && themeCheckedClasses[theme]);
+  };
+
+  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>
+      </div>
+      <Show when={local.children}>
+        <span>{local.children}</span>
+      </Show>
+    </label>
+  );
+};

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

@@ -0,0 +1,116 @@
+import { type JSX, type ParentComponent, createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { Checkbox } from "./Checkbox";
+import type { CheckboxSize, CheckboxTheme } from "./Checkbox.styles";
+
+interface CheckboxGroupContextValue<T> {
+  value: () => T[];
+  toggle: (item: T) => void;
+  disabled: () => boolean;
+  size: () => CheckboxSize | undefined;
+  theme: () => CheckboxTheme | undefined;
+  inline: () => boolean;
+  inset: () => boolean;
+}
+
+const CheckboxGroupContext = createContext<CheckboxGroupContextValue<any>>();
+
+// --- CheckboxGroup.Item ---
+
+interface CheckboxGroupItemProps<T> {
+  value: T;
+  disabled?: boolean;
+  children?: JSX.Element;
+}
+
+function CheckboxGroupItemInner<T>(props: CheckboxGroupItemProps<T>) {
+  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 ---
+
+interface CheckboxGroupProps<T> {
+  value?: T[];
+  onValueChange?: (value: T[]) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  theme?: CheckboxTheme;
+  inline?: boolean;
+  inset?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+interface CheckboxGroupComponent {
+  <T = unknown>(props: CheckboxGroupProps<T>): JSX.Element;
+  Item: typeof CheckboxGroupItemInner;
+}
+
+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>
+  );
+};
+
+export const CheckboxGroup = CheckboxGroupInner as unknown as CheckboxGroupComponent;
+CheckboxGroup.Item = CheckboxGroupItemInner;

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

@@ -0,0 +1,107 @@
+import { type JSX, type ParentComponent, Show, splitProps } 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,
+  checkboxSizeClasses,
+  checkboxInsetClass,
+  checkboxInsetSizeHeightClasses,
+  checkboxInlineClass,
+  checkboxDisabledClass,
+} from "./Checkbox.styles";
+
+const radioDotClass = clsx("size-2", "rounded-full", "bg-current");
+
+// Directive 사용 선언 (TypeScript용)
+void ripple;
+
+export interface RadioProps {
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  theme?: CheckboxTheme;
+  inset?: boolean;
+  inline?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+export const Radio: ParentComponent<RadioProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "disabled",
+    "size",
+    "theme",
+    "inset",
+    "inline",
+    "class",
+    "style",
+    "children",
+  ]);
+
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? false,
+    onChange: () => local.onValueChange,
+  });
+
+  const handleClick = () => {
+    if (local.disabled) return;
+    setValue(true);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const getWrapperClass = () =>
+    twMerge(
+      checkboxBaseClass,
+      local.size && checkboxSizeClasses[local.size],
+      local.inset && checkboxInsetClass,
+      local.inset && local.size && checkboxInsetSizeHeightClasses[local.size],
+      local.inline && checkboxInlineClass,
+      local.disabled && checkboxDisabledClass,
+      local.class,
+    );
+
+  const getIndicatorClass = () => {
+    const theme = local.theme ?? "primary";
+
+    return twMerge(indicatorBaseClass, "rounded-full", value() && themeCheckedClasses[theme]);
+  };
+
+  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>
+      </div>
+      <Show when={local.children}>
+        <span>{local.children}</span>
+      </Show>
+    </label>
+  );
+};

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

@@ -0,0 +1,111 @@
+import { type JSX, type ParentComponent, createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { Radio } from "./Radio";
+import type { CheckboxSize, CheckboxTheme } from "./Checkbox.styles";
+
+interface RadioGroupContextValue<T> {
+  value: () => T | undefined;
+  select: (item: T) => void;
+  disabled: () => boolean;
+  size: () => CheckboxSize | undefined;
+  theme: () => CheckboxTheme | undefined;
+  inline: () => boolean;
+  inset: () => boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue<any>>();
+
+// --- RadioGroup.Item ---
+
+interface RadioGroupItemProps<T> {
+  value: T;
+  disabled?: boolean;
+  children?: JSX.Element;
+}
+
+function RadioGroupItemInner<T>(props: RadioGroupItemProps<T>) {
+  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 ---
+
+interface RadioGroupProps<T> {
+  value?: T;
+  onValueChange?: (value: T) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  theme?: CheckboxTheme;
+  inline?: boolean;
+  inset?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+interface RadioGroupComponent {
+  <T = unknown>(props: RadioGroupProps<T>): JSX.Element;
+  Item: typeof RadioGroupItemInner;
+}
+
+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>
+  );
+};
+
+export const RadioGroup = RadioGroupInner as unknown as RadioGroupComponent;
+RadioGroup.Item = RadioGroupItemInner;

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

@@ -0,0 +1,96 @@
+import { type Component, type JSX, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+
+type ColorPickerSize = "sm" | "lg";
+
+// 기본 스타일
+const baseClass = clsx(
+  "size-field",
+  "rounded",
+  "border border-black/10 dark:border-white/10",
+  "cursor-pointer",
+  // color input 기본 스타일 제거
+  "[&::-webkit-color-swatch-wrapper]:p-0",
+  "[&::-webkit-color-swatch]:border-none",
+  "[&::-webkit-color-swatch]:rounded-none",
+  "[&::-moz-color-swatch]:border-none",
+  "[&::-moz-color-swatch]:rounded-none",
+);
+
+// 사이즈별 스타일
+const sizeClasses: Record<ColorPickerSize, string> = {
+  sm: "size-field-sm",
+  lg: "size-field-lg",
+};
+
+// disabled 스타일 - 대각선 줄무늬로 표시
+// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset은 Chrome 87+에서만 지원
+const disabledClass = clsx(
+  "cursor-default",
+  "relative",
+  "before:absolute before:bottom-0 before:left-0 before:right-0 before:top-0",
+  "before:bg-[linear-gradient(45deg,transparent_40%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.4)_60%,transparent_60%)]",
+);
+
+export interface ColorPickerProps {
+  /** 색상 값 (#RRGGBB 형식) */
+  value?: string;
+
+  /** 값 변경 콜백 */
+  onValueChange?: (value: string) => void;
+
+  /** 타이틀 (툴팁) */
+  title?: string;
+
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 사이즈 */
+  size?: ColorPickerSize;
+
+  /** 커스텀 class */
+  class?: string;
+
+  /** 커스텀 style */
+  style?: JSX.CSSProperties;
+}
+
+/**
+ * ColorPicker 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker value={color()} onValueChange={setColor} />
+ * ```
+ */
+export const ColorPicker: Component<ColorPickerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "title", "disabled", "size", "class", "style"]);
+
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? "#000000",
+    onChange: () => local.onValueChange,
+  });
+
+  const handleInput: JSX.InputEventHandler<HTMLInputElement, InputEvent> = (e) => {
+    setValue(e.currentTarget.value);
+  };
+
+  const getClassName = () =>
+    twMerge(baseClass, local.size && sizeClasses[local.size], local.disabled && disabledClass, local.class);
+
+  return (
+    <input
+      {...rest}
+      data-color-picker
+      type="color"
+      class={getClassName()}
+      style={local.style}
+      value={value()}
+      title={local.title}
+      disabled={local.disabled}
+      onInput={handleInput}
+    />
+  );
+};