@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,132 @@
+import { type Component, createSignal, For, Show } from "solid-js";
+import { IconBell } from "@tabler/icons-solidjs";
+import clsx from "clsx";
+import { useNotification } from "./NotificationContext";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { Icon } from "../../display/Icon";
+import { NotificationBanner } from "./NotificationBanner";
+
+export interface NotificationBellProps {
+  showBanner?: boolean;
+}
+
+const buttonClass = clsx(
+  "relative",
+  "p-2",
+  "rounded-full",
+  "hover:bg-base-100",
+  "dark:hover:bg-base-700",
+  "transition-colors",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-primary-500",
+);
+
+const badgeClass = clsx(
+  "absolute",
+  "top-0",
+  "right-0",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-5",
+  "h-5",
+  "px-1",
+  "text-xs",
+  "font-bold",
+  "text-white",
+  "bg-danger-500",
+  "rounded-full",
+);
+
+const themeStyles: Record<string, string> = {
+  info: clsx("border-l-info-500", "bg-info-50", "dark:bg-info-900/10"),
+  success: clsx("border-l-success-500", "bg-success-50", "dark:bg-success-900/10"),
+  warning: clsx("border-l-warning-500", "bg-warning-50", "dark:bg-warning-900/10"),
+  danger: clsx("border-l-danger-500", "bg-danger-50", "dark:bg-danger-900/10"),
+};
+
+const dropdownHeaderClass = clsx("mb-2 flex items-center", "justify-between", "px-2");
+const clearButtonClass = clsx(
+  "text-sm",
+  "text-base-500 hover:text-base-700",
+  "dark:text-base-400 dark:hover:text-base-300",
+);
+const emptyClass = clsx("py-8 text-center", "text-base-500 dark:text-base-400");
+const listClass = clsx("flex flex-col", "gap-2");
+const itemBaseClass = clsx("rounded-lg", "border-l-4", "p-2");
+const itemMessageClass = clsx("text-sm", "text-base-600 dark:text-base-400");
+const itemTimeClass = clsx("mt-1 text-xs", "text-base-400");
+
+export const NotificationBell: Component<NotificationBellProps> = (props) => {
+  const notification = useNotification();
+  const [open, setOpen] = createSignal(false);
+  let buttonRef: HTMLButtonElement | undefined;
+
+  const handleClear = () => {
+    notification.clear();
+    setOpen(false);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen) {
+      notification.markAllAsRead();
+    }
+  };
+
+  return (
+    <>
+      <Show when={props.showBanner !== false}>
+        <NotificationBanner />
+      </Show>
+
+      <button
+        ref={(el) => (buttonRef = el)}
+        type="button"
+        data-notification-bell
+        class={buttonClass}
+        aria-label={`알림 ${notification.unreadCount()}개`}
+        aria-haspopup="true"
+        aria-expanded={open()}
+        onClick={() => handleOpenChange(!open())}
+      >
+        <Icon icon={IconBell} />
+        <Show when={notification.unreadCount() > 0}>
+          <span data-notification-badge aria-hidden="true" class={badgeClass}>
+            {notification.unreadCount()}
+          </span>
+        </Show>
+      </button>
+
+      <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={handleOpenChange} maxHeight={400} class="w-80">
+        <div class="p-2">
+          <div class={dropdownHeaderClass}>
+            <span class="font-semibold">알림</span>
+            <Show when={notification.items().length > 0}>
+              <button type="button" data-notification-clear class={clearButtonClass} onClick={handleClear}>
+                전체 삭제
+              </button>
+            </Show>
+          </div>
+
+          <Show when={notification.items().length > 0} fallback={<div class={emptyClass}>알림이 없습니다</div>}>
+            <div class={listClass}>
+              <For each={[...notification.items()].reverse()}>
+                {(item) => (
+                  <div class={clsx(itemBaseClass, themeStyles[item.theme])}>
+                    <div class="font-medium">{item.title}</div>
+                    <Show when={item.message}>
+                      <div class={itemMessageClass}>{item.message}</div>
+                    </Show>
+                    <div class={itemTimeClass}>{item.createdAt.toLocaleTimeString()}</div>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Show>
+        </div>
+      </Dropdown>
+    </>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { createContext, useContext, type Accessor } from "solid-js";
+
+export type NotificationTheme = "info" | "success" | "warning" | "danger";
+
+export interface NotificationAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface NotificationItem {
+  id: string;
+  theme: NotificationTheme;
+  title: string;
+  message?: string;
+  action?: NotificationAction;
+  createdAt: Date;
+  read: boolean;
+}
+
+export interface NotificationOptions {
+  action?: NotificationAction;
+}
+
+export interface NotificationUpdateOptions {
+  renotify?: boolean;
+}
+
+export interface NotificationContextValue {
+  // 상태
+  items: Accessor<NotificationItem[]>;
+  unreadCount: Accessor<number>;
+  latestUnread: Accessor<NotificationItem | undefined>;
+
+  // 알림 발생 (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;
+
+  // 알림 수정
+  update: (
+    id: string,
+    updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
+    options?: NotificationUpdateOptions,
+  ) => void;
+
+  // 알림 삭제
+  remove: (id: string) => void;
+
+  // 관리
+  markAsRead: (id: string) => void;
+  markAllAsRead: () => void;
+  dismissBanner: () => void;
+  clear: () => void;
+}
+
+export const NotificationContext = createContext<NotificationContextValue>();
+
+export function useNotification(): NotificationContextValue {
+  const context = useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification은 NotificationProvider 내부에서만 사용할 수 있습니다");
+  }
+  return context;
+}

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

@@ -0,0 +1,143 @@
+import { type ParentComponent, createSignal, createMemo, Show } from "solid-js";
+import {
+  NotificationContext,
+  type NotificationContextValue,
+  type NotificationItem,
+  type NotificationOptions,
+  type NotificationTheme,
+  type NotificationUpdateOptions,
+} from "./NotificationContext";
+
+const MAX_ITEMS = 50;
+
+export const NotificationProvider: ParentComponent = (props) => {
+  const [items, setItems] = createSignal<NotificationItem[]>([]);
+  const [dismissedBannerId, setDismissedBannerId] = createSignal<string | null>(null);
+
+  const unreadItems = createMemo(() => items().filter((i) => !i.read));
+  const unreadCount = createMemo(() => unreadItems().length);
+
+  const latestUnread = createMemo(() => {
+    const latest = unreadItems().at(-1);
+    if (!latest) return undefined;
+    return latest.id === dismissedBannerId() ? undefined : latest;
+  });
+
+  const addNotification = (
+    theme: NotificationTheme,
+    title: string,
+    message?: string,
+    options?: NotificationOptions,
+  ): string => {
+    const id = crypto.randomUUID();
+    const newItem: NotificationItem = {
+      id,
+      theme,
+      title,
+      message,
+      action: options?.action,
+      createdAt: new Date(),
+      read: false,
+    };
+
+    setItems((prev) => {
+      const updated = [...prev, newItem];
+      if (updated.length > MAX_ITEMS) {
+        return updated.slice(-MAX_ITEMS);
+      }
+      return updated;
+    });
+
+    setDismissedBannerId(null);
+    return id;
+  };
+
+  const info = (title: string, message?: string, options?: NotificationOptions): string => {
+    return addNotification("info", title, message, options);
+  };
+
+  const success = (title: string, message?: string, options?: NotificationOptions): string => {
+    return addNotification("success", title, message, options);
+  };
+
+  const warning = (title: string, message?: string, options?: NotificationOptions): string => {
+    return addNotification("warning", title, message, options);
+  };
+
+  const danger = (title: string, message?: string, options?: NotificationOptions): string => {
+    return addNotification("danger", title, message, options);
+  };
+
+  const update = (
+    id: string,
+    updates: Partial<Pick<NotificationItem, "title" | "message" | "theme" | "action">>,
+    options?: NotificationUpdateOptions,
+  ): void => {
+    setItems((prev) =>
+      prev.map((item) => {
+        if (item.id !== id) return item;
+
+        const updated = { ...item, ...updates };
+
+        // renotify: 읽은 상태면 다시 읽지 않음으로 변경
+        if (options?.renotify && item.read) {
+          updated.read = false;
+          // 배너가 dismiss된 상태에서 renotify되면 다시 보이게
+          setDismissedBannerId(null);
+        }
+
+        return updated;
+      }),
+    );
+  };
+
+  const remove = (id: string): void => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const markAsRead = (id: string) => {
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, read: true } : item)));
+  };
+
+  const markAllAsRead = () => {
+    setItems((prev) => prev.map((item) => ({ ...item, read: true })));
+  };
+
+  const dismissBanner = () => {
+    const latest = latestUnread();
+    if (latest) {
+      setDismissedBannerId(latest.id);
+    }
+  };
+
+  const clear = () => {
+    setItems([]);
+    setDismissedBannerId(null);
+  };
+
+  const contextValue: NotificationContextValue = {
+    items,
+    unreadCount,
+    latestUnread,
+    info,
+    success,
+    warning,
+    danger,
+    update,
+    remove,
+    markAsRead,
+    markAllAsRead,
+    dismissBanner,
+    clear,
+  };
+
+  return (
+    <NotificationContext.Provider value={contextValue}>
+      {/* 스크린 리더용 Live Region */}
+      <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+        <Show when={latestUnread()}>{(item) => `알림: ${item().title} ${item().message ?? ""}`}</Show>
+      </div>
+      {props.children}
+    </NotificationContext.Provider>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from "./NotificationContext";
+export * from "./NotificationProvider";
+export * from "./NotificationBanner";
+export * from "./NotificationBell";

package/src/components/feedback/print/Print.tsx

@@ -0,0 +1,21 @@
+import type { JSX, ParentProps } from "solid-js";
+
+// --- Print.Page ---
+
+function PrintPage(props: ParentProps) {
+  return <div data-print-page>{props.children}</div>;
+}
+
+// --- Print ---
+
+interface PrintComponent {
+  (props: ParentProps): JSX.Element;
+  Page: typeof PrintPage;
+}
+
+const PrintInner = (props: ParentProps) => {
+  return <>{props.children}</>;
+};
+
+export const Print = PrintInner as unknown as PrintComponent;
+Print.Page = PrintPage;

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

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "solid-js";
+
+export interface PrintInstance {
+  ready: () => void;
+}
+
+export const PrintInstanceContext = createContext<PrintInstance>();
+
+export function usePrintInstance(): PrintInstance | undefined {
+  return useContext(PrintInstanceContext);
+}

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

@@ -0,0 +1,90 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ripple } from "../../directives/ripple";
+import { themeTokens, type SemanticTheme, type ComponentSize, disabledOpacity } from "../../styles/tokens.styles";
+
+// Directive 사용 선언 (TypeScript용)
+void ripple;
+
+type ButtonTheme = SemanticTheme;
+type ButtonVariant = "solid" | "outline" | "ghost";
+type ButtonSize = ComponentSize;
+
+const baseClass = clsx(
+  "inline-flex items-center",
+  "px-2 py-1",
+  "font-bold",
+  "justify-center",
+  "text-center",
+  "cursor-pointer",
+  "transition-colors",
+  "rounded",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "border border-transparent",
+  "min-w-8",
+);
+
+const themeClasses = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [
+    theme,
+    {
+      solid: clsx(t.solid, t.solidHover),
+      outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
+      ghost: clsx("bg-transparent", t.hoverBg, t.text),
+    },
+  ]),
+) as Record<ButtonTheme, Record<ButtonVariant, string>>;
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: clsx("min-w-6 px-1 py-0"),
+  lg: clsx("min-w-9 px-3 py-1.5"),
+};
+
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  theme?: ButtonTheme;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  inset?: boolean;
+}
+
+export const Button: ParentComponent<ButtonProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "type",
+    "theme",
+    "variant",
+    "size",
+    "inset",
+    "disabled",
+  ]);
+
+  const getClassName = () => {
+    const theme = local.theme ?? "base";
+    const variant = local.variant ?? "outline";
+
+    return twMerge(
+      baseClass,
+      themeClasses[theme][variant],
+      local.size && sizeClasses[local.size],
+      local.inset && "rounded-none border-none",
+      local.disabled && disabledOpacity,
+      local.class,
+    );
+  };
+
+  return (
+    <button
+      {...rest}
+      data-button
+      use:ripple={!local.disabled}
+      type={local.type ?? "button"}
+      class={getClassName()}
+      disabled={local.disabled}
+    >
+      {local.children}
+    </button>
+  );
+};

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

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { borderDefault, type ComponentSize, paddingLg, paddingSm } from "../../styles/tokens.styles";
+import { insetBase, insetFocusOutlineSelf } from "../../styles/patterns.styles";
+
+export const triggerBaseClass = clsx(
+  "inline-flex items-center gap-2",
+  "w-40",
+  "border",
+  borderDefault,
+  "rounded",
+  "bg-transparent",
+  "hover:bg-base-100 dark:hover:bg-base-700",
+  "cursor-pointer",
+  "focus:outline-none",
+  "focus-within:border-primary-400 dark:focus-within:border-primary-400",
+);
+
+export const triggerDisabledClass = clsx(
+  "cursor-default bg-base-200 text-base-400 dark:bg-base-800 dark:text-base-500",
+);
+
+export const triggerInsetClass = clsx(insetBase, "bg-transparent", insetFocusOutlineSelf);
+
+export const triggerSizeClasses: Record<ComponentSize, string> = {
+  sm: clsx("gap-1.5", paddingSm),
+  lg: clsx("gap-3", paddingLg),
+};
+
+export const chevronWrapperClass = clsx("opacity-30", "hover:opacity-100");
+
+/** Select/Combobox 공유 트리거 클래스 빌더 */
+export function getTriggerClass(options: {
+  size?: ComponentSize;
+  disabled?: boolean;
+  inset?: boolean;
+  class?: string;
+}): string {
+  return twMerge(
+    triggerBaseClass,
+    "px-2 py-1",
+    options.size && triggerSizeClasses[options.size],
+    options.disabled && triggerDisabledClass,
+    options.inset && triggerInsetClass,
+    options.class,
+  );
+}

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

@@ -0,0 +1,96 @@
+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";
+
+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"),
+};
+
+const iconSizes: Record<"sm" | "lg", string> = {
+  sm: "1em",
+  lg: "1.5em",
+};
+
+const modeLabels: Record<ThemeMode, string> = {
+  light: "라이트 모드",
+  system: "시스템 설정",
+  dark: "다크 모드",
+};
+
+export interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /** 버튼 크기 */
+  size?: "sm" | "lg";
+}
+
+/**
+ * 테마 토글 버튼 컴포넌트
+ *
+ * @remarks
+ * - ThemeProvider 내부에서 사용해야 함
+ * - 클릭 시 light → system → dark → light 순환
+ * - 현재 모드에 맞는 아이콘 표시 (☀️ / 💻 / 🌙)
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * <ThemeToggle />
+ *
+ * // 크기 조절
+ * <ThemeToggle size="sm" />
+ * <ThemeToggle size="lg" />
+ * ```
+ */
+export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "size"]);
+
+  const { mode, cycleMode } = useTheme();
+
+  const getClassName = () => twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
+
+  const iconSize = () => (local.size ? iconSizes[local.size] : "1.25em");
+
+  return (
+    <button
+      {...rest}
+      data-theme-toggle
+      use:ripple
+      type="button"
+      class={getClassName()}
+      onClick={cycleMode}
+      title={modeLabels[mode()]}
+      aria-label={modeLabels[mode()]}
+    >
+      <Switch>
+        <Match when={mode() === "light"}>
+          <Icon icon={IconSun} size={iconSize()} />
+        </Match>
+        <Match when={mode() === "system"}>
+          <Icon icon={IconDeviceDesktop} size={iconSize()} />
+        </Match>
+        <Match when={mode() === "dark"}>
+          <Icon icon={IconMoon} size={iconSize()} />
+        </Match>
+      </Switch>
+    </button>
+  );
+};

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

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import {
+  bgSurface,
+  borderDefault,
+  type ComponentSize,
+  disabledOpacity,
+  paddingLg,
+  paddingSm,
+} from "../../../styles/tokens.styles";
+import { insetBase, insetFocusOutlineSelf } from "../../../styles/patterns.styles";
+
+export type CheckboxTheme = "primary" | "info" | "success" | "warning" | "danger";
+export type CheckboxSize = ComponentSize;
+
+// wrapper 기본 스타일
+export const checkboxBaseClass = clsx(
+  "inline-flex items-center gap-2",
+  "whitespace-nowrap",
+  "cursor-pointer",
+  "px-2 py-1",
+  "h-field",
+  "border border-transparent",
+  "rounded",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+);
+
+// 인디케이터 기본 스타일
+export const indicatorBaseClass = clsx(
+  "flex shrink-0 items-center justify-center",
+  "size-4",
+  "border",
+  borderDefault,
+  bgSurface,
+  "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"),
+};
+
+// 사이즈별 스타일
+export const checkboxSizeClasses: Record<CheckboxSize, string> = {
+  sm: clsx("h-field-sm", paddingSm),
+  lg: clsx("h-field-lg", paddingLg),
+};
+
+// inset 스타일
+export const checkboxInsetClass = clsx("h-field-inset justify-center bg-transparent", insetBase, insetFocusOutlineSelf);
+
+// inset 사이즈별 높이 (border 2px 제외)
+export const checkboxInsetSizeHeightClasses: Record<CheckboxSize, string> = {
+  sm: "h-field-inset-sm",
+  lg: "h-field-inset-lg",
+};
+
+// inline 스타일
+export const checkboxInlineClass = clsx("!h-auto", "!p-0", "gap-1");
+
+// disabled 스타일
+export const checkboxDisabledClass = disabledOpacity;