@simplysm/solid 13.0.28 → 13.0.30

package/src/components/form-control/field/TimePicker.tsx

@@ -1,18 +1,10 @@
 import clsx from "clsx";
-import { type Component, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import {
-  type FieldSize,
-  fieldBaseClass,
-  fieldSizeClasses,
-  fieldInsetClass,
-  fieldInsetHeightClass,
-  fieldInsetSizeHeightClasses,
-  fieldDisabledClass,
-  fieldInputClass,
-} from "./Field.styles";
+import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
+import { Invalid } from "../../form-control/Invalid";
 
 type TimePickerUnit = "minute" | "second";
 
@@ -46,6 +38,21 @@ export interface TimePickerProps {
 
   /** 커스텀 style */
   style?: JSX.CSSProperties;
+
+  /** 최소 시간 */
+  min?: Time;
+
+  /** 최대 시간 */
+  max?: Time;
+
+  /** 필수 입력 여부 */
+  required?: boolean;
+
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: Time | undefined) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
 }
 
 /**
@@ -111,6 +118,11 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "inset",
     "class",
     "style",
+    "min",
+    "max",
+    "required",
+    "validate",
+    "touchMode",
   ]);
 
   // 기본 단위는 minute
@@ -134,15 +146,12 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
 
   // wrapper 클래스
   const getWrapperClass = (includeCustomClass: boolean) =>
-    twMerge(
-      fieldBaseClass,
-      local.size && fieldSizeClasses[local.size],
-      local.disabled && fieldDisabledClass,
-      local.inset && fieldInsetClass + " block",
-      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),
-
-      includeCustomClass && local.class,
-    );
+    getFieldWrapperClass({
+      size: local.size,
+      disabled: local.disabled,
+      inset: local.inset,
+      includeCustomClass: includeCustomClass && local.class,
+    });
 
   // 편집 가능 여부
   const isEditable = () => !local.disabled && !local.readonly;
@@ -150,60 +159,81 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
   // step 속성 (second일 때 1)
   const getStep = () => (fieldType() === "second" ? "1" : undefined);
 
+  // 유효성 검사 메시지 (순서대로 검사, 최초 실패 메시지 반환)
+  const errorMsg = createMemo(() => {
+    const v = value();
+    if (local.required && v === undefined) return "필수 입력 항목입니다";
+    if (v !== undefined) {
+      if (local.min !== undefined && v.tick < local.min.tick)
+        return `${local.min.toFormatString("HH:mm:ss")}보다 크거나 같아야 합니다`;
+      if (local.max !== undefined && v.tick > local.max.tick)
+        return `${local.max.toFormatString("HH:mm:ss")}보다 작거나 같아야 합니다`;
+    }
+    return local.validate?.(v);
+  });
+
   return (
-    <Show
-      when={local.inset}
-      fallback={
-        // standalone 모드
-        <Show
-          when={isEditable()}
-          fallback={
-            <div
-              {...rest}
-              data-time-field
-              class={twMerge(getWrapperClass(true), "sd-time-field")}
-              style={local.style}
-              title={local.title}
-            >
-              {displayValue() || "\u00A0"}
-            </div>
-          }
-        >
-          <div {...rest} data-time-field class={getWrapperClass(true)} style={local.style}>
-            <input
-              type="time"
-              class={fieldInputClass}
-              value={displayValue()}
-              title={local.title}
-              step={getStep()}
-              onChange={handleChange}
-            />
-          </div>
-        </Show>
-      }
+    <Invalid
+      message={errorMsg()}
+      variant={local.inset ? "dot" : "border"}
+      touchMode={local.touchMode}
     >
-      {/* inset 모드: dual-element overlay 패턴 */}
-      <div
-        {...rest}
-        data-time-field
-        class={twMerge(getWrapperClass(false), "relative", local.class)}
-        style={local.style}
+      <Show
+        when={local.inset}
+        fallback={
+          // standalone 모드
+          <Show
+            when={isEditable()}
+            fallback={
+              <div
+                {...rest}
+                data-time-field
+                class={twMerge(getWrapperClass(true), "sd-time-field")}
+                style={local.style}
+                title={local.title}
+              >
+                {displayValue() || "\u00A0"}
+              </div>
+            }
+          >
+            <div {...rest} data-time-field class={getWrapperClass(true)} style={local.style}>
+              <input
+                type="time"
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                step={getStep()}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        }
       >
-        <div data-time-field-content style={{ visibility: isEditable() ? "hidden" : undefined }} title={local.title}>
-          {displayValue() || "\u00A0"}
-        </div>
-
-        <Show when={isEditable()}>
-          <input
-            type="time"
-            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
-            value={displayValue()}
+        {/* inset 모드: dual-element overlay 패턴 */}
+        <div {...rest} data-time-field class={clsx("relative", local.class)} style={local.style}>
+          <div
+            data-time-field-content
+            class={getWrapperClass(false)}
+            style={{ visibility: isEditable() ? "hidden" : undefined }}
             title={local.title}
-            step={getStep()}
-            onChange={handleChange}
-          />
-        </Show>
-      </div>
-    </Show>
+          >
+            {displayValue() || "\u00A0"}
+          </div>
+
+          <Show when={isEditable()}>
+            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
+              <input
+                type="time"
+                class={fieldInputClass}
+                value={displayValue()}
+                title={local.title}
+                step={getStep()}
+                onChange={handleChange}
+              />
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
   );
 };

package/src/components/form-control/select/Select.tsx

@@ -1,4 +1,13 @@
-import { children, createSignal, For, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  type ParentComponent,
+  Show,
+  splitProps,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconChevronDown } from "@tabler/icons-solidjs";
@@ -11,7 +20,9 @@ import { ripple } from "../../../directives/ripple";
 import { splitSlots } from "../../../helpers/splitSlots";
 import { borderDefault, type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createItemTemplate } from "../../../hooks/createItemTemplate";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
+import { Invalid } from "../Invalid";
 
 void ripple;
 
@@ -32,23 +43,23 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
       {...rest}
       type="button"
       data-select-action
+      use:ripple
       class={twMerge(
         clsx(
           "border",
           borderDefault,
           "px-1.5",
-          "rounded-r",
           "font-bold text-primary-500",
           "hover:bg-base-100 dark:hover:bg-base-700",
+          "group-focus-within:border-y-primary-400",
+          "last:group-focus-within:border-r-primary-400",
+          "dark:group-focus-within:border-y-primary-400",
+          "dark:last:group-focus-within:border-r-primary-400",
+          "focus:relative focus:z-10 focus:border-primary-400",
+          "dark:focus:border-primary-400",
         ),
         local.class,
       )}
-      onClick={(e) => {
-        e.stopPropagation();
-        if (typeof rest.onClick === "function") {
-          rest.onClick(e);
-        }
-      }}
     >
       {local.children}
     </button>
@@ -60,27 +71,9 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
  */
 const SelectHeader: ParentComponent = (props) => <div data-select-header>{props.children}</div>;
 
-/**
- * items prop 방식일 때 아이템 렌더링 템플릿
- *
- * 함수 참조를 저장하기 위해 전역 Map 사용
- */
-interface SelectItemTemplateProps<TValue> {
-  children: (item: TValue, index: number, depth: number) => JSX.Element;
-}
-
-// 템플릿 함수를 저장하는 전역 Map (WeakMap 사용하여 메모리 누수 방지)
-const templateFnMap = new WeakMap<HTMLElement, (item: unknown, index: number, depth: number) => JSX.Element>();
-
-const SelectItemTemplate = <T,>(props: SelectItemTemplateProps<T>) => (
-  <span
-    ref={(el) => {
-      templateFnMap.set(el, props.children as (item: unknown, index: number, depth: number) => JSX.Element);
-    }}
-    data-select-item-template
-    style={{ display: "none" }}
-  />
-);
+const { TemplateSlot: SelectItemTemplate, getTemplate: getSelectItemTemplate } = createItemTemplate<
+  [item: unknown, index: number, depth: number]
+>("data-select-item-template");
 
 // Props 정의
 
@@ -101,6 +94,12 @@ interface SelectCommonProps {
   /** 테두리 없는 스타일 */
   inset?: boolean;
 
+  /** 커스텀 유효성 검사 함수 */
+  validate?: (value: unknown) => string | undefined;
+
+  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  touchMode?: boolean;
+
   /** 커스텀 class */
   class?: string;
 
@@ -211,6 +210,8 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "items",
     "getChildren",
     "renderValue",
+    "validate",
+    "touchMode",
   ]);
 
   let triggerRef!: HTMLDivElement;
@@ -279,6 +280,14 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     }
   };
 
+  // 유효성 검사 메시지
+  const errorMsg = createMemo(() => {
+    const v = getValue();
+    if (local.required && (v === undefined || v === null || v === ""))
+      return "필수 입력 항목입니다";
+    return local.validate?.(v);
+  });
+
   // 트리거 클래스
   const getTriggerClassName = () =>
     getTriggerClass({
@@ -291,14 +300,17 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   // 내부 컴포넌트: Provider 안에서 children을 resolve
   const SelectInner: ParentComponent = (innerProps) => {
     const resolved = children(() => innerProps.children);
-    const [slots, items] = splitSlots(resolved, ["selectHeader", "selectAction", "selectItemTemplate"] as const);
+    const [slots, items] = splitSlots(resolved, [
+      "selectHeader",
+      "selectAction",
+      "selectItemTemplate",
+    ] as const);
 
     // itemTemplate 함수 추출
-    const getItemTemplate = (): ((item: T, index: number, depth: number) => JSX.Element) | undefined => {
-      const templateSlots = slots().selectItemTemplate;
-      if (templateSlots.length === 0) return undefined;
-      // WeakMap에서 함수 참조 가져오기
-      return templateFnMap.get(templateSlots[0]) as
+    const getItemTemplate = ():
+      | ((item: T, index: number, depth: number) => JSX.Element)
+      | undefined => {
+      return getSelectItemTemplate(slots().selectItemTemplate) as
         | ((item: T, index: number, depth: number) => JSX.Element)
         | undefined;
     };
@@ -314,7 +326,9 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               <Show when={local.getChildren?.(item, index(), depth)} keyed>
                 {(itemChildren) => (
                   <Show when={itemChildren.length > 0}>
-                    <SelectItem.Children>{renderItems(itemChildren, depth + 1)}</SelectItem.Children>
+                    <SelectItem.Children>
+                      {renderItems(itemChildren, depth + 1)}
+                    </SelectItem.Children>
                   </Show>
                 )}
               </Show>
@@ -357,7 +371,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     };
 
     return (
-      <div {...rest} data-select class={local.inset ? "flex" : "inline-flex"}>
+      <div {...rest} data-select class={clsx("group", local.inset ? "flex" : "inline-flex")}>
         <div
           ref={triggerRef}
           use:ripple={!local.disabled}
@@ -367,7 +381,14 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
           aria-disabled={local.disabled || undefined}
           aria-required={local.required || undefined}
           tabIndex={local.disabled ? -1 : 0}
-          class={twMerge(getTriggerClassName(), slots().selectAction.length > 0 && "rounded-r-none border-r-0")}
+          class={twMerge(
+            getTriggerClassName(),
+            slots().selectAction.length > 0 &&
+              clsx(
+                "rounded-r-none border-r-0",
+                "group-focus-within:border-primary-400 dark:group-focus-within:border-primary-400",
+              ),
+          )}
           style={local.style}
           onClick={handleTriggerClick}
           onKeyDown={handleTriggerKeyDown}
@@ -377,7 +398,17 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
             <Icon icon={IconChevronDown} size="1em" />
           </div>
         </div>
-        <Show when={slots().selectAction.length > 0}>{slots().selectAction}</Show>
+        <Show when={slots().selectAction.length > 0}>
+          <div
+            class={clsx(
+              "contents",
+              "[&>[data-select-action]:last-child]:rounded-r",
+              "[&>[data-select-action]+[data-select-action]]:-ml-px",
+            )}
+          >
+            {slots().selectAction}
+          </div>
+        </Show>
 
         <Dropdown triggerRef={() => triggerRef} open={open()} onOpenChange={setOpen} keyboardNav>
           <Show when={slots().selectHeader.length > 0}>{slots().selectHeader.single()}</Show>
@@ -392,9 +423,11 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   };
 
   return (
-    <SelectContext.Provider value={contextValue as SelectContextValue}>
-      <SelectInner>{local.children}</SelectInner>
-    </SelectContext.Provider>
+    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+      <SelectContext.Provider value={contextValue as SelectContextValue}>
+        <SelectInner>{local.children}</SelectInner>
+      </SelectContext.Provider>
+    </Invalid>
   );
 };
 

package/src/components/form-control/select/SelectItem.tsx

@@ -61,7 +61,9 @@ interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectIt
  * </Select.Item>
  * ```
  */
-export const SelectItem: SelectItemComponent = <T,>(props: SelectItemProps<T> & { children?: JSX.Element }) => {
+export const SelectItem: SelectItemComponent = <T,>(
+  props: SelectItemProps<T> & { children?: JSX.Element },
+) => {
   const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
 
   const context = useSelectContext<T>();

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -9,6 +9,7 @@ import { useNotification } from "../../feedback/notification/NotificationContext
 import { Icon } from "../../display/Icon";
 import { textPlaceholder } from "../../../styles/tokens.styles";
 import type { ComponentSize } from "../../../styles/tokens.styles";
+import { iconButtonBase } from "../../../styles/patterns.styles";
 
 // ── Types ──
 
@@ -50,14 +51,7 @@ const chipSizeClasses: Record<StatePresetSize, string> = {
 
 const chipNameBtnClass = clsx("cursor-pointer", "hover:underline", "focus:outline-none");
 
-const iconBtnClass = clsx(
-  "inline-flex items-center justify-center",
-  "rounded-full",
-  "cursor-pointer",
-  "transition-colors",
-  "focus:outline-none",
-  "hover:bg-base-300 dark:hover:bg-base-600",
-);
+const iconBtnClass = twMerge(iconButtonBase, "rounded-full");
 
 const iconBtnDefaultClass = "p-0.5";
 
@@ -108,13 +102,23 @@ const iconSize = "0.85em";
 // ── Component ──
 
 function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element {
-  const [local] = splitProps(props, ["presetKey", "value", "onValueChange", "size", "class", "style"]);
+  const [local] = splitProps(props, [
+    "presetKey",
+    "value",
+    "onValueChange",
+    "size",
+    "class",
+    "style",
+  ]);
 
   const notification = useNotification();
 
   // presetKey는 마운트 시 한 번만 설정되는 식별자이므로 즉시 평가하여 캡처
   /* eslint-disable solid/reactivity */
-  const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(`state-preset.${local.presetKey}`, []);
+  const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(
+    `state-preset.${local.presetKey}`,
+    [],
+  );
   /* eslint-enable solid/reactivity */
   const [adding, setAdding] = createSignal(false);
   const [inputValue, setInputValue] = createSignal("");
@@ -163,18 +167,24 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const snapshot = [...presets()];
     const presetName = snapshot[index].name;
 
-    const updated = snapshot.map((p, i) => (i === index ? { ...p, state: objClone(local.value) } : p));
+    const updated = snapshot.map((p, i) =>
+      i === index ? { ...p, state: objClone(local.value) } : p,
+    );
     setPresets(updated);
 
-    const notiId = notification.info("프리셋 덮어쓰기", `"${presetName}" 프리셋이 현재 상태로 업데이트되었습니다.`, {
-      action: {
-        label: "실행 취소",
-        onClick: () => {
-          setPresets(snapshot);
-          notification.remove(notiId);
+    const notiId = notification.info(
+      "프리셋 덮어쓰기",
+      `"${presetName}" 프리셋이 현재 상태로 업데이트되었습니다.`,
+      {
+        action: {
+          label: "실행 취소",
+          onClick: () => {
+            setPresets(snapshot);
+            notification.remove(notiId);
+          },
         },
       },
-    });
+    );
   }
 
   function handleDelete(index: number): void {
@@ -209,7 +219,8 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   const containerClass = () => twMerge(baseClass, local.class);
 
-  const resolvedChipClass = () => twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
+  const resolvedChipClass = () =>
+    twMerge(chipClass, local.size ? chipSizeClasses[local.size] : chipDefaultClass);
 
   const resolvedIconBtnClass = () =>
     twMerge(iconBtnClass, local.size ? iconBtnSizeClasses[local.size] : iconBtnDefaultClass);
@@ -217,12 +228,18 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   const resolvedStarBtnClass = () =>
     twMerge(starBtnClass, local.size ? starBtnSizeClasses[local.size] : starBtnDefaultClass);
 
-  const resolvedInputClass = () => twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
+  const resolvedInputClass = () =>
+    twMerge(inputClass, local.size ? inputSizeClasses[local.size] : inputDefaultClass);
 
   return (
     <div class={containerClass()} style={local.style}>
       {/* Star button - add preset */}
-      <button type="button" class={resolvedStarBtnClass()} onClick={handleStartAdd} title="프리셋 추가">
+      <button
+        type="button"
+        class={resolvedStarBtnClass()}
+        onClick={handleStartAdd}
+        title="프리셋 추가"
+      >
         <Icon icon={IconStar} size={iconSize} />
       </button>
 
@@ -278,4 +295,6 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   );
 }
 
-export const StatePreset = StatePresetInner as <TValue>(props: StatePresetProps<TValue>) => JSX.Element;
+export const StatePreset = StatePresetInner as <TValue>(
+  props: StatePresetProps<TValue>,
+) => JSX.Element;

package/src/components/layout/FormGroup.tsx

@@ -1,4 +1,11 @@
-import { type JSX, type ParentComponent, Show, splitProps, createContext, useContext } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  Show,
+  splitProps,
+  createContext,
+  useContext,
+} from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -26,7 +33,9 @@ const FormGroupItem: ParentComponent<FormGroupItemProps> = (props) => {
   return (
     <div class={getClassName()} data-form-group-item {...rest}>
       <Show when={local.label}>
-        <label class={ctx.inline ? clsx("whitespace-nowrap font-bold", "pr-2") : "mb-1 block font-bold"}>
+        <label
+          class={ctx.inline ? clsx("whitespace-nowrap font-bold", "pr-2") : "mb-1 block font-bold"}
+        >
           {local.label}
         </label>
       </Show>

package/src/components/layout/sidebar/Sidebar.tsx

@@ -22,7 +22,7 @@ const baseClass = clsx(
   "flex",
   "flex-col",
   "bg-base-100",
-  "dark:bg-base-900",
+  "dark:bg-base-800",
   "border-r",
   "border-base-200",
   "dark:border-base-700",
@@ -82,7 +82,8 @@ const SidebarBase: ParentComponent<SidebarProps> = (props) => {
     return isOpen() ? "translateX(0)" : "translateX(-100%)";
   };
 
-  const getClassName = () => twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);
+  const getClassName = () =>
+    twMerge(baseClass, !isDesktop() && isOpen() && mobileOpenClass, local.class);
 
   return (
     <aside

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -1,4 +1,11 @@
-import { type JSX, type ParentComponent, Show, splitProps, createMemo, createSignal } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  Show,
+  splitProps,
+  createMemo,
+  createSignal,
+} from "solid-js";
 import { useBeforeLeave } from "@solidjs/router";
 import { createMediaQuery } from "@solid-primitives/media";
 import clsx from "clsx";

package/src/components/layout/sidebar/SidebarMenu.tsx

@@ -24,7 +24,7 @@ const headerClass = clsx(
   "px-4",
   "py-2",
   "text-xs",
-  "font-semibold",
+  "font-bold",
   "text-base-500",
   "dark:text-base-400",
   "uppercase",
@@ -166,7 +166,13 @@ const MenuItem: Component<MenuItemProps> = (props) => {
   };
 
   return (
-    <ListItem selected={isSelected()} open={open()} onOpenChange={setOpen} onClick={handleClick} size={props.size}>
+    <ListItem
+      selected={isSelected()}
+      open={open()}
+      onOpenChange={setOpen}
+      onClick={handleClick}
+      size={props.size}
+    >
       <Show when={props.menu.icon}>
         <Icon icon={props.menu.icon!} />
       </Show>