@simplysm/solid 13.0.29 → 13.0.31

package/src/components/feedback/Progress.tsx

@@ -1,15 +1,19 @@
 import { type JSX, type ParentComponent, Show, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { type SemanticTheme, themeTokens } from "../../styles/tokens.styles";
+import {
+  type ComponentSizeCompact,
+  type SemanticTheme,
+  themeTokens,
+} from "../../styles/tokens.styles";
 
 export type ProgressTheme = SemanticTheme;
-export type ProgressSize = "sm" | "lg";
 
 export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** 진행률 (0~1 범위, 0 = 0%, 1 = 100%) */
   value: number;
   theme?: ProgressTheme;
-  size?: ProgressSize;
+  size?: ComponentSizeCompact;
   inset?: boolean;
 }
 
@@ -21,7 +25,7 @@ const baseClass = clsx(
   "border border-base-200 dark:border-base-700",
 );
 
-const sizeClasses: Record<"default" | ProgressSize, string> = {
+const sizeClasses: Record<"default" | ComponentSizeCompact, string> = {
   default: "py-1 px-2",
   sm: "py-0.5 px-2",
   lg: "py-2 px-3",
@@ -46,7 +50,7 @@ export const Progress: ParentComponent<ProgressProps> = (props) => {
     return clsx("absolute left-0 top-0 h-full", "z-[1]", "transition-all", barThemeClasses[theme]);
   };
 
-  const getPercentText = () => (local.value * 100).toFixed(2) + "%";
+  const getPercentText = () => (Math.max(0, Math.min(1, local.value)) * 100).toFixed(2) + "%";
 
   return (
     <div data-progress class={getClassName()} {...rest}>

package/src/components/feedback/busy/BusyContainer.tsx

@@ -15,6 +15,7 @@ import "./BusyContainer.css";
 
 export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   busy?: boolean;
+  ready?: boolean;
   variant?: BusyVariant;
   message?: string;
   progressPercent?: number;
@@ -57,6 +58,7 @@ const barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white
 export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "busy",
+    "ready",
     "variant",
     "message",
     "progressPercent",
@@ -68,11 +70,13 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
   const currVariant = (): BusyVariant => local.variant ?? busyCtx?.variant() ?? "spinner";
 
   // 애니메이션 상태 (mount transition)
-  const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);
+  const { mounted, animating, unmount } = createMountTransition(
+    () => local.ready === false || !!local.busy,
+  );
 
   const handleTransitionEnd = (e: TransitionEvent) => {
     if (e.propertyName !== "opacity") return;
-    if (!local.busy) {
+    if (local.ready !== false && !local.busy) {
       unmount();
     }
   };
@@ -82,7 +86,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
 
   createEffect(() => {
     const handleKeyDownCapture = (e: KeyboardEvent) => {
-      if (local.busy) {
+      if (local.ready === false || local.busy) {
         e.preventDefault();
         e.stopPropagation();
       }
@@ -117,7 +121,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
             <Show when={currVariant() === "spinner"}>
               <div class={spinnerClass} />
             </Show>
-            <Show when={currVariant() === "bar" && local.busy}>
+            <Show when={currVariant() === "bar" && (local.ready === false || local.busy)}>
               <div class={barIndicatorClass}>
                 <div
                   class={clsx(
@@ -155,7 +159,7 @@ export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
           </Show>
         </div>
       </Show>
-      {local.children}
+      <Show when={local.ready !== false}>{local.children}</Show>
     </div>
   );
 };

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

@@ -65,7 +65,7 @@ export const NotificationBanner: Component = () => {
             class={clsx(baseClass, themeClasses[item().theme])}
           >
             <div class={contentClass}>
-              <span class="font-semibold">{item().title}</span>
+              <span class="font-bold">{item().title}</span>
               <Show when={item().message}>
                 <pre class={messageClass}>{item().message}</pre>
               </Show>

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

@@ -1,26 +1,18 @@
 import { type Component, createSignal, For, Show } from "solid-js";
 import { IconBell } from "@tabler/icons-solidjs";
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 import { useNotification } from "./NotificationContext";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { Icon } from "../../display/Icon";
 import { NotificationBanner } from "./NotificationBanner";
+import { iconButtonBase } from "../../../styles/patterns.styles";
 
 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 buttonClass = twMerge(iconButtonBase, "relative", "p-2", "rounded-full");
 
 const badgeClass = clsx(
   "absolute",
@@ -108,7 +100,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
       >
         <div class="p-2">
           <div class={dropdownHeaderClass}>
-            <span class="font-semibold">알림</span>
+            <span class="font-bold">알림</span>
             <Show when={notification.items().length > 0}>
               <button
                 type="button"

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

@@ -125,6 +125,7 @@ export const NotificationProvider: ParentComponent = (props) => {
     const latest = latestUnread();
     if (latest) {
       setDismissedBannerId(latest.id);
+      markAsRead(latest.id);
     }
   };
 

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

@@ -1,69 +1,131 @@
-import { type ParentComponent, createEffect, splitProps } from "solid-js";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ParentComponent, children, createEffect, createSignal, onCleanup } from "solid-js";
 import "@simplysm/core-browser";
 
 export interface InvalidProps {
   /** Validation error message. Non-empty = invalid. */
   message?: string;
-  /** Custom class */
-  class?: string;
+  /** Visual indicator variant */
+  variant?: "border" | "dot";
+  /** When true, visual display only appears after target loses focus */
+  touchMode?: boolean;
 }
 
-const anchorClass = clsx(
-  "relative inline-block",
-  "size-0 align-top",
-  "overflow-visible",
-  "pointer-events-none select-none",
-);
+export const Invalid: ParentComponent<InvalidProps> = (props) => {
+  const hiddenInputEl = document.createElement("input");
+  hiddenInputEl.type = "text";
+  hiddenInputEl.style.cssText =
+    "position:absolute; bottom:0; left:50%; width:1px; height:1px; opacity:0; pointer-events:none; z-index:-10;";
+  hiddenInputEl.autocomplete = "off";
+  hiddenInputEl.tabIndex = -1;
+  hiddenInputEl.setAttribute("aria-hidden", "true");
 
-const indicatorClass = clsx("absolute left-0.5 top-0.5", "size-1.5 rounded-full", "bg-danger-500");
+  const [touched, setTouched] = createSignal(false);
 
-const hiddenInputClass = clsx(
-  "absolute bottom-0 left-0.5",
-  "size-px opacity-0",
-  "pointer-events-none -z-10",
-  "select-none",
-);
+  const resolved = children(() => props.children);
 
-export const Invalid: ParentComponent<InvalidProps> = (props) => {
-  const [local, rest] = splitProps(props, ["message", "class", "children"]);
+  // message 변경 시 setCustomValidity 반응형 업데이트 (touchMode 무관하게 항상)
+  createEffect(() => {
+    const msg = props.message ?? "";
+    hiddenInputEl.setCustomValidity(msg);
+  });
+
+  // target에 relative 설정 + hidden input을 target 내부에 삽입
+  createEffect(() => {
+    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+    if (!targetEl) return;
+
+    const computedPosition = getComputedStyle(targetEl).position;
+    if (computedPosition === "static") {
+      targetEl.style.position = "relative";
+    }
+
+    targetEl.appendChild(hiddenInputEl);
 
-  let hiddenInputEl!: HTMLInputElement;
+    onCleanup(() => {
+      if (hiddenInputEl.parentElement === targetEl) {
+        targetEl.removeChild(hiddenInputEl);
+      }
+    });
+  });
 
-  // message 변경 시 setCustomValidity 반응형 업데이트
+  // 시각적 표시 처리
   createEffect(() => {
-    const msg = local.message ?? "";
-    hiddenInputEl.setCustomValidity(msg);
+    const variant = props.variant ?? "dot";
+    const message = props.message ?? "";
+    const touchMode = props.touchMode ?? false;
+    const isTouched = touched();
+
+    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+
+    if (!targetEl) return;
+
+    const shouldShow = message !== "" && (!touchMode || isTouched);
+
+    if (variant === "border") {
+      if (shouldShow) {
+        targetEl.classList.add("border-danger-500");
+      } else {
+        targetEl.classList.remove("border-danger-500");
+      }
+
+      onCleanup(() => {
+        targetEl.classList.remove("border-danger-500");
+      });
+    } else {
+      // variant === "dot"
+      const existingDot = targetEl.querySelector("[data-invalid-dot]");
+      if (existingDot) {
+        existingDot.remove();
+      }
+
+      if (shouldShow) {
+        const dot = document.createElement("span");
+        dot.setAttribute("data-invalid-dot", "");
+        dot.style.cssText =
+          "position:absolute; top:2px; right:2px; width:6px; height:6px; border-radius:50%; background:red; pointer-events:none;";
+        targetEl.appendChild(dot);
+      }
+
+      onCleanup(() => {
+        const dot = targetEl.querySelector("[data-invalid-dot]");
+        if (dot) {
+          dot.remove();
+        }
+      });
+    }
   });
 
-  const handleHiddenInputFocus = (e: FocusEvent) => {
-    const container = (e.currentTarget as HTMLElement).parentElement;
-    if (!container) return;
-    const focusable = container.findFirstFocusableChild();
-    if (focusable && focusable !== e.currentTarget) {
-      focusable.focus();
+  // touchMode: target에 focusout 이벤트 등록하여 touched 상태 추적
+  createEffect(() => {
+    if (!(props.touchMode ?? false)) return;
+
+    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+
+    if (!targetEl) return;
+
+    const handleFocusOut = () => {
+      setTouched(true);
+    };
+
+    targetEl.addEventListener("focusout", handleFocusOut);
+
+    onCleanup(() => {
+      targetEl.removeEventListener("focusout", handleFocusOut);
+    });
+  });
+
+  // hidden input 포커스 시 target의 focusable child로 리디렉션
+  hiddenInputEl.addEventListener("focus", () => {
+    const targetEl = resolved.toArray().find((el): el is HTMLElement => el instanceof HTMLElement);
+
+    if (targetEl) {
+      const focusable =
+        targetEl.findFirstFocusableChild() ?? (targetEl.tabIndex >= 0 ? targetEl : undefined);
+      if (focusable && focusable !== hiddenInputEl) {
+        focusable.focus();
+      }
     }
-  };
-
-  return (
-    <div {...rest} class={twMerge("inline", local.class)}>
-      <span class={anchorClass}>
-        <span
-          class={indicatorClass}
-          style={{ display: (local.message ?? "") !== "" ? "block" : "none" }}
-        />
-      </span>
-      {local.children}
-      <input
-        ref={hiddenInputEl}
-        type="text"
-        class={hiddenInputClass}
-        autocomplete="off"
-        tabIndex={-1}
-        aria-hidden="true"
-        onFocus={handleHiddenInputFocus}
-      />
-    </div>
-  );
+  });
+
+  return <>{resolved()}</>;
 };

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> = {
@@ -69,7 +56,7 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
   const { mode, cycleMode } = useTheme();
 
   const getClassName = () =>
-    twMerge(baseClass, "p-1.5", local.size && sizeClasses[local.size], local.class);
+    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> = {

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;