@simplysm/solid 13.0.28 → 13.0.30

package/src/components/display/Link.tsx

@@ -0,0 +1,22 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {}
+
+const baseClass = clsx(
+  "text-primary-600",
+  "dark:text-primary-400",
+  "hover:underline",
+  "cursor-pointer",
+);
+
+export const Link: ParentComponent<LinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  return (
+    <a class={twMerge(baseClass, local.class)} {...rest}>
+      {local.children}
+    </a>
+  );
+};

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/{loading/LoadingContainer.tsx → busy/BusyContainer.tsx}

@@ -1,13 +1,22 @@
-import { type ParentComponent, type JSX, splitProps, createEffect, onCleanup, Show, useContext } from "solid-js";
+import {
+  type ParentComponent,
+  type JSX,
+  splitProps,
+  createEffect,
+  onCleanup,
+  Show,
+  useContext,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { LoadingContext, type LoadingVariant } from "./LoadingContext";
+import { BusyContext, type BusyVariant } from "./BusyContext";
 import { createMountTransition } from "../../../hooks/createMountTransition";
-import "./LoadingContainer.css";
+import "./BusyContainer.css";
 
-export interface LoadingContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   busy?: boolean;
-  variant?: LoadingVariant;
+  ready?: boolean;
+  variant?: BusyVariant;
   message?: string;
   progressPercent?: number;
   children?: JSX.Element;
@@ -46,18 +55,28 @@ const progressBarClass = clsx(
 
 const barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
 
-export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props) => {
-  const [local, rest] = splitProps(props, ["busy", "variant", "message", "progressPercent", "class", "children"]);
+export const BusyContainer: ParentComponent<BusyContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "busy",
+    "ready",
+    "variant",
+    "message",
+    "progressPercent",
+    "class",
+    "children",
+  ]);
 
-  const loadingCtx = useContext(LoadingContext);
-  const currVariant = (): LoadingVariant => local.variant ?? loadingCtx?.variant() ?? "spinner";
+  const busyCtx = useContext(BusyContext);
+  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();
     }
   };
@@ -67,18 +86,23 @@ export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props)
 
   createEffect(() => {
     const handleKeyDownCapture = (e: KeyboardEvent) => {
-      if (local.busy) {
+      if (local.ready === false || local.busy) {
         e.preventDefault();
         e.stopPropagation();
       }
     };
 
     containerRef.addEventListener("keydown", handleKeyDownCapture, { capture: true });
-    onCleanup(() => containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }));
+    onCleanup(() =>
+      containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }),
+    );
   });
 
   const screenClass = () =>
-    clsx(screenBaseClass, animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0");
+    clsx(
+      screenBaseClass,
+      animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+    );
 
   // spinner: 슬라이드 다운 애니메이션
   const rectClass = () => {
@@ -97,16 +121,22 @@ export const LoadingContainer: ParentComponent<LoadingContainerProps> = (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("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400")}
+                  class={clsx(
+                    "absolute left-0 top-0 h-1 w-full origin-left",
+                    "bg-primary-500 dark:bg-primary-400",
+                  )}
                   style={{
                     animation: "sd-busy-bar-before 2s infinite ease-in",
                   }}
                 />
                 <div
-                  class={clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-white dark:bg-base-800")}
+                  class={clsx(
+                    "absolute left-0 top-0 h-1 w-full origin-left",
+                    "bg-white dark:bg-base-800",
+                  )}
                   style={{
                     animation: "sd-busy-bar-after 2s infinite ease-out",
                   }}
@@ -121,12 +151,15 @@ export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props)
           </div>
           <Show when={local.progressPercent != null}>
             <div class={progressTrackClass}>
-              <div class={progressBarClass} style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }} />
+              <div
+                class={progressBarClass}
+                style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }}
+              />
             </div>
           </Show>
         </div>
       </Show>
-      {local.children}
+      <Show when={local.ready !== false}>{local.children}</Show>
     </div>
   );
 };

package/src/components/feedback/busy/BusyContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext, type Accessor } from "solid-js";
+
+export type BusyVariant = "spinner" | "bar";
+
+export interface BusyContextValue {
+  variant: Accessor<BusyVariant>;
+  show: (message?: string) => void;
+  hide: () => void;
+  setProgress: (percent: number | undefined) => void;
+}
+
+export const BusyContext = createContext<BusyContextValue>();
+
+export function useBusy(): BusyContextValue {
+  const context = useContext(BusyContext);
+  if (!context) {
+    throw new Error("useBusy는 BusyProvider 내부에서만 사용할 수 있습니다");
+  }
+  return context;
+}

package/src/components/feedback/{loading/LoadingProvider.tsx → busy/BusyProvider.tsx}

@@ -1,21 +1,21 @@
 import { type ParentComponent, createSignal } from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
-import { LoadingContext, type LoadingContextValue, type LoadingVariant } from "./LoadingContext";
-import { LoadingContainer } from "./LoadingContainer";
+import { BusyContext, type BusyContextValue, type BusyVariant } from "./BusyContext";
+import { BusyContainer } from "./BusyContainer";
 
 const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
 
-export interface LoadingProviderProps {
-  variant?: LoadingVariant;
+export interface BusyProviderProps {
+  variant?: BusyVariant;
 }
 
-export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) => {
+export const BusyProvider: ParentComponent<BusyProviderProps> = (props) => {
   const [busyCount, setBusyCount] = createSignal(0);
   const [message, setMessage] = createSignal<string | undefined>();
   const [progress, setProgress] = createSignal<number | undefined>();
 
-  const variant = (): LoadingVariant => props.variant ?? "spinner";
+  const variant = (): BusyVariant => props.variant ?? "spinner";
 
   const show = (msg?: string): void => {
     setBusyCount((c) => c + 1);
@@ -33,7 +33,7 @@ export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) =>
     }
   };
 
-  const contextValue: LoadingContextValue = {
+  const contextValue: BusyContextValue = {
     variant,
     show,
     hide,
@@ -41,10 +41,10 @@ export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) =>
   };
 
   return (
-    <LoadingContext.Provider value={contextValue}>
+    <BusyContext.Provider value={contextValue}>
       {props.children}
       <Portal>
-        <LoadingContainer
+        <BusyContainer
           busy={busyCount() > 0}
           variant={variant()}
           message={message()}
@@ -53,6 +53,6 @@ export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) =>
           style={{ "pointer-events": busyCount() > 0 ? "auto" : "none" }}
         />
       </Portal>
-    </LoadingContext.Provider>
+    </BusyContext.Provider>
   );
 };

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

@@ -33,7 +33,13 @@ const themeClasses: Record<string, string> = {
 const contentClass = clsx("flex flex-col", "gap-0.5", "min-w-0");
 const messageClass = clsx("text-sm", "opacity-90", "overflow-auto");
 const actionsClass = clsx("flex items-center", "gap-2", "shrink-0");
-const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "text-sm", "hover:bg-white/30");
+const actionButtonClass = clsx(
+  "rounded",
+  "bg-white/20",
+  "px-3 py-1",
+  "text-sm",
+  "hover:bg-white/30",
+);
 const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {
@@ -59,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>
@@ -70,7 +76,12 @@ export const NotificationBanner: Component = () => {
                   {item().action!.label}
                 </button>
               </Show>
-              <button type="button" aria-label="알림 닫기" class={dismissButtonClass} onClick={handleDismiss}>
+              <button
+                type="button"
+                aria-label="알림 닫기"
+                class={dismissButtonClass}
+                onClick={handleDismiss}
+              >
                 <Icon icon={IconX} size="1.25em" />
               </button>
             </div>

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",
@@ -99,18 +91,32 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         </Show>
       </button>
 
-      <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={handleOpenChange} maxHeight={400} class="w-80">
+      <Dropdown
+        triggerRef={() => buttonRef}
+        open={open()}
+        onOpenChange={handleOpenChange}
+        maxHeight={400}
+        class="w-80"
+      >
         <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" data-notification-clear class={clearButtonClass} onClick={handleClear}>
+              <button
+                type="button"
+                data-notification-clear
+                class={clearButtonClass}
+                onClick={handleClear}
+              >
                 전체 삭제
               </button>
             </Show>
           </div>
 
-          <Show when={notification.items().length > 0} fallback={<div class={emptyClass}>알림이 없습니다</div>}>
+          <Show
+            when={notification.items().length > 0}
+            fallback={<div class={emptyClass}>알림이 없습니다</div>}
+          >
             <div class={listClass}>
               <For each={[...notification.items()].reverse()}>
                 {(item) => (

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

@@ -38,7 +38,10 @@ export interface NotificationContextValue {
   danger: (title: string, message?: string, options?: NotificationOptions) => string;
 
   // 에러 처리 (danger 알림 + 로깅)
-  try: <TResult>(fn: () => Promise<TResult> | TResult, header?: string) => Promise<TResult | undefined>;
+  try: <TResult>(
+    fn: () => Promise<TResult> | TResult,
+    header?: string,
+  ) => Promise<TResult | undefined>;
 
   // 알림 수정
   update: (

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);
     }
   };
 
@@ -154,7 +155,9 @@ export const NotificationProvider: ParentComponent = (props) => {
     <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>
+        <Show when={latestUnread()}>
+          {(item) => `알림: ${item().title} ${item().message ?? ""}`}
+        </Show>
       </div>
       {props.children}
     </NotificationContext.Provider>

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

@@ -2,7 +2,12 @@ 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";
+import {
+  themeTokens,
+  type SemanticTheme,
+  type ComponentSize,
+  disabledOpacity,
+} from "../../styles/tokens.styles";
 
 // Directive 사용 선언 (TypeScript용)
 void ripple;
@@ -18,7 +23,7 @@ const baseClass = clsx(
   "justify-center",
   "text-center",
   "cursor-pointer",
-  "transition-colors",
+  "transition",
   "rounded",
   "focus:outline-none",
   "focus-visible:ring-2",
@@ -30,7 +35,7 @@ const themeClasses = Object.fromEntries(
   Object.entries(themeTokens).map(([theme, t]) => [
     theme,
     {
-      solid: clsx(t.solid, t.solidHover),
+      solid: clsx(t.solid, t.solidHover, "shadow-md hover:shadow-lg"),
       outline: clsx("bg-transparent", t.hoverBg, t.text, t.border),
       ghost: clsx("bg-transparent", t.hoverBg, t.text),
     },

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

@@ -1,6 +1,12 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { borderDefault, type ComponentSize, paddingLg, paddingSm, paddingXl } from "../../styles/tokens.styles";
+import {
+  borderDefault,
+  type ComponentSize,
+  paddingLg,
+  paddingSm,
+  paddingXl,
+} from "../../styles/tokens.styles";
 import { insetBase, insetFocusOutlineSelf } from "../../styles/patterns.styles";
 
 export const triggerBaseClass = clsx(

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

@@ -1,65 +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}
-        tabIndex={-1}
-        aria-hidden="true"
-        onFocus={handleHiddenInputFocus}
-      />
-    </div>
-  );
+  });
+
+  return <>{resolved()}</>;
 };