@simplysm/solid 13.0.29 → 13.0.31

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";
 

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",

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

@@ -117,9 +117,9 @@ export const SidebarUser: Component<SidebarUserProps> = (props) => {
           <div class={avatarClass}>
             <Icon icon={local.icon ?? IconUser} class="size-6" />
           </div>
-          <Show when={local.description} fallback={<span class="font-semibold">{local.name}</span>}>
+          <Show when={local.description} fallback={<span class="font-bold">{local.name}</span>}>
             <div class="flex flex-col">
-              <span class="font-semibold">{local.name}</span>
+              <span class="font-bold">{local.name}</span>
               <span class={clsx("text-sm", "text-base-500 dark:text-base-400")}>
                 {local.description}
               </span>
@@ -129,7 +129,7 @@ export const SidebarUser: Component<SidebarUserProps> = (props) => {
       </button>
       <Show when={hasMenus()}>
         <Collapse open={open()}>
-          <hr class={clsx("border-base-200 dark:border-base-700")} />
+          <hr class={clsx("border-base-100 dark:border-base-800")} />
           <List inset>
             <For each={local.menus}>
               {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}

package/src/hooks/createItemTemplate.tsx

@@ -0,0 +1,42 @@
+import type { JSX } from "solid-js";
+
+/**
+ * WeakMap 기반 템플릿 슬롯 패턴을 생성합니다. SolidJS children을 통해 렌더 함수를 전달할 때 사용합니다.
+ *
+ * Select와 Combobox의 ItemTemplate 서브 컴포넌트 패턴에서 사용됩니다.
+ * TemplateSlot은 WeakMap에 렌더 함수를 ref로 저장하는 숨겨진 span을 렌더링합니다.
+ * getTemplate은 resolved 슬롯 엘리먼트에서 렌더 함수를 가져옵니다.
+ *
+ * @param dataAttr - 숨겨진 span에 사용할 HTML 속성 이름 (예: "data-select-item-template")
+ */
+export function createItemTemplate<TArgs extends unknown[]>(
+  dataAttr: string,
+): {
+  TemplateSlot: (props: { children(...args: TArgs): JSX.Element }) => JSX.Element;
+  getTemplate: (slotElements: Element[]) => ((...args: TArgs) => JSX.Element) | undefined;
+} {
+  const templateFnMap = new WeakMap<HTMLElement, (...args: TArgs) => JSX.Element>();
+
+  function TemplateSlot(props: { children(...args: TArgs): JSX.Element }): JSX.Element {
+    return (
+      <span
+        ref={(el) => {
+          templateFnMap.set(el, props.children);
+        }}
+        {...{ [dataAttr]: true }}
+        style={{ display: "none" }}
+      />
+    );
+  }
+
+  function getTemplate(slotElements: Element[]): ((...args: TArgs) => JSX.Element) | undefined {
+    if (slotElements.length === 0) return undefined;
+    const el = slotElements[0];
+    if (el instanceof HTMLElement) {
+      return templateFnMap.get(el);
+    }
+    return undefined;
+  }
+
+  return { TemplateSlot, getTemplate };
+}

package/src/hooks/createPointerDrag.ts

@@ -0,0 +1,28 @@
+/**
+ * Sets up pointer capture and manages pointermove/pointerup lifecycle on a target element.
+ *
+ * @param target - Element to capture pointer on
+ * @param pointerId - Pointer ID from the initiating PointerEvent
+ * @param options.onMove - Called on each pointermove
+ * @param options.onEnd - Called on pointerup (after listener cleanup)
+ */
+export function createPointerDrag(
+  target: HTMLElement,
+  pointerId: number,
+  options: {
+    onMove: (e: PointerEvent) => void;
+    onEnd: (e: PointerEvent) => void;
+  },
+): void {
+  target.setPointerCapture(pointerId);
+
+  const onPointerMove = (e: PointerEvent) => options.onMove(e);
+  const onPointerUp = (e: PointerEvent) => {
+    target.removeEventListener("pointermove", onPointerMove);
+    target.removeEventListener("pointerup", onPointerUp);
+    options.onEnd(e);
+  };
+
+  target.addEventListener("pointermove", onPointerMove);
+  target.addEventListener("pointerup", onPointerUp);
+}

package/src/hooks/createSelectionGroup.tsx

@@ -0,0 +1,235 @@
+import {
+  type JSX,
+  type ParentComponent,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "./createControllableSignal";
+import { Invalid } from "../components/form-control/Invalid";
+import type { CheckboxSize } from "../components/form-control/checkbox/Checkbox.styles";
+
+interface SelectionItemComponentProps {
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inline?: boolean;
+  inset?: boolean;
+  children?: JSX.Element;
+}
+
+interface SelectionGroupContextBase {
+  disabled: () => boolean;
+  size: () => CheckboxSize | undefined;
+  inline: () => boolean;
+  inset: () => boolean;
+}
+
+interface MultiSelectContext extends SelectionGroupContextBase {
+  value: () => unknown[];
+  toggle: (item: unknown) => void;
+}
+
+interface SingleSelectContext extends SelectionGroupContextBase {
+  value: () => unknown | undefined;
+  select: (item: unknown) => void;
+}
+
+interface MultiGroupConfig {
+  mode: "multiple";
+  contextName: string;
+  ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
+  emptyErrorMsg: string;
+}
+
+interface SingleGroupConfig {
+  mode: "single";
+  contextName: string;
+  ItemComponent: (props: SelectionItemComponentProps) => JSX.Element;
+  emptyErrorMsg: string;
+}
+
+interface SelectionGroupItemProps<TValue> {
+  value: TValue;
+  disabled?: boolean;
+  children?: JSX.Element;
+}
+
+interface MultiGroupProps<TValue> {
+  value?: TValue[];
+  onValueChange?: (value: TValue[]) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inline?: boolean;
+  inset?: boolean;
+  required?: boolean;
+  validate?: (value: TValue[]) => string | undefined;
+  touchMode?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+interface SingleGroupProps<TValue> {
+  value?: TValue;
+  onValueChange?: (value: TValue) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  inline?: boolean;
+  inset?: boolean;
+  required?: boolean;
+  validate?: (value: TValue | undefined) => string | undefined;
+  touchMode?: boolean;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+export function createSelectionGroup(config: MultiGroupConfig): {
+  Group: {
+    <TValue = unknown>(props: MultiGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+};
+export function createSelectionGroup(config: SingleGroupConfig): {
+  Group: {
+    <TValue = unknown>(props: SingleGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+};
+export function createSelectionGroup(config: MultiGroupConfig | SingleGroupConfig): {
+  Group: {
+    <TValue = unknown>(props: MultiGroupProps<TValue> | SingleGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+} {
+  const Context = createContext<MultiSelectContext | SingleSelectContext>();
+  const ItemComponent = config.ItemComponent;
+
+  function ItemInner<TValue>(props: SelectionGroupItemProps<TValue>) {
+    const ctx = useContext(Context);
+    if (!ctx)
+      throw new Error(
+        `${config.contextName}.Item은 ${config.contextName} 내부에서만 사용할 수 있습니다`,
+      );
+
+    const isSelected = (): boolean => {
+      if (config.mode === "multiple") {
+        return (ctx as MultiSelectContext).value().includes(props.value);
+      }
+      return (ctx as SingleSelectContext).value() === props.value;
+    };
+
+    const handleChange = () => {
+      if (config.mode === "multiple") {
+        (ctx as MultiSelectContext).toggle(props.value);
+      } else {
+        (ctx as SingleSelectContext).select(props.value);
+      }
+    };
+
+    return (
+      <ItemComponent
+        value={isSelected()}
+        onValueChange={handleChange}
+        disabled={props.disabled ?? ctx.disabled()}
+        size={ctx.size()}
+        inline={ctx.inline()}
+        inset={ctx.inset()}
+      >
+        {props.children}
+      </ItemComponent>
+    );
+  }
+
+  const GroupInner: ParentComponent<MultiGroupProps<unknown>> = (props) => {
+    const [local, rest] = splitProps(props, [
+      "value",
+      "onValueChange",
+      "disabled",
+      "size",
+      "inline",
+      "inset",
+      "required",
+      "validate",
+      "touchMode",
+      "class",
+      "style",
+      "children",
+    ]);
+
+    let contextValue: MultiSelectContext | SingleSelectContext;
+
+    if (config.mode === "multiple") {
+      const [value, setValue] = createControllableSignal<unknown[]>({
+        value: () => local.value ?? [],
+        onChange: () => local.onValueChange as ((v: unknown[]) => void) | undefined,
+      });
+      const toggle = (item: unknown) => {
+        setValue((prev) => {
+          if (prev.includes(item)) return prev.filter((v) => v !== item);
+          return [...prev, item];
+        });
+      };
+      contextValue = {
+        value,
+        toggle,
+        disabled: () => local.disabled ?? false,
+        size: () => local.size,
+        inline: () => local.inline ?? false,
+        inset: () => local.inset ?? false,
+      };
+    } else {
+      const [value, setValue] = createControllableSignal<unknown>({
+        value: () => local.value as unknown | undefined,
+        onChange: () => local.onValueChange as ((v: unknown) => void) | undefined,
+      });
+      const select = (item: unknown) => {
+        setValue(item);
+      };
+      contextValue = {
+        value,
+        select,
+        disabled: () => local.disabled ?? false,
+        size: () => local.size,
+        inline: () => local.inline ?? false,
+        inset: () => local.inset ?? false,
+      };
+    }
+
+    const errorMsg = createMemo(() => {
+      if (config.mode === "multiple") {
+        const v = local.value ?? [];
+        if (local.required && v.length === 0) return config.emptyErrorMsg;
+        return (local.validate as ((v: unknown[]) => string | undefined) | undefined)?.(v);
+      } else {
+        const v = local.value as unknown | undefined;
+        if (local.required && (v === undefined || v === null)) return config.emptyErrorMsg;
+        return (local.validate as ((v: unknown | undefined) => string | undefined) | undefined)?.(
+          v,
+        );
+      }
+    });
+
+    return (
+      <Invalid message={errorMsg()} variant="dot" touchMode={local.touchMode}>
+        <Context.Provider value={contextValue}>
+          <div {...rest} class={twMerge("inline-flex", local.class)} style={local.style}>
+            {local.children}
+          </div>
+        </Context.Provider>
+      </Invalid>
+    );
+  };
+
+  const Group = GroupInner as unknown as {
+    <TValue = unknown>(props: MultiGroupProps<TValue> | SingleGroupProps<TValue>): JSX.Element;
+    Item: <TValue = unknown>(props: SelectionGroupItemProps<TValue>) => JSX.Element;
+  };
+  Group.Item = ItemInner;
+
+  return { Group };
+}

package/src/hooks/useLocalStorage.ts

@@ -1,6 +1,10 @@
-import { type Accessor, type Setter, createSignal } from "solid-js";
+import { type Accessor, createSignal } from "solid-js";
 import { useConfig } from "../providers/ConfigContext";
 
+type StorageSetter<TValue> = (
+  value: TValue | undefined | ((prev: TValue | undefined) => TValue | undefined),
+) => TValue | undefined;
+
 /**
  * localStorage 기반 저장소 훅.
  * syncStorage 설정과 무관하게 항상 localStorage를 사용한다.
@@ -11,7 +15,7 @@ import { useConfig } from "../providers/ConfigContext";
  * @template T - 저장할 값의 타입
  * @param key - localStorage 키
  * @param initialValue - 초기값 (옵셔널)
- * @returns [Accessor<T | undefined>, Setter<T | undefined>] 튜플
+ * @returns [Accessor<T | undefined>, StorageSetter<T>] 튜플
  *
  * @example
  * ```tsx
@@ -30,7 +34,7 @@ import { useConfig } from "../providers/ConfigContext";
 export function useLocalStorage<TValue>(
   key: string,
   initialValue?: TValue,
-): [Accessor<TValue | undefined>, Setter<TValue | undefined>] {
+): [Accessor<TValue | undefined>, StorageSetter<TValue>] {
   const config = useConfig();
   const prefixedKey = `${config.clientName}.${key}`;
 
@@ -69,5 +73,5 @@ export function useLocalStorage<TValue>(
     return resolved;
   };
 
-  return [value, setAndStore as Setter<TValue | undefined>];
+  return [value, setAndStore];
 }

package/src/hooks/{createPwaUpdate.ts → usePwaUpdate.ts}

@@ -15,7 +15,7 @@ const UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes
  *
  * Must be called inside NotificationProvider.
  */
-export function createPwaUpdate(): void {
+export function usePwaUpdate(): void {
   if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
 
   const notification = useNotification();

package/src/hooks/useSyncConfig.ts

@@ -1,4 +1,4 @@
-import { type Accessor, type Setter, createEffect, createSignal, onCleanup } from "solid-js";
+import { type Accessor, type Setter, createEffect, createSignal } from "solid-js";
 import { useConfig } from "../providers/ConfigContext";
 
 /**
@@ -9,13 +9,13 @@ import { useConfig } from "../providers/ConfigContext";
  *
  * @param key - Storage key for the config value
  * @param defaultValue - Default value if no stored value exists
- * @returns Tuple of [value accessor, value setter, busy state accessor]
+ * @returns Tuple of [value accessor, value setter, ready state accessor]
  *
  * @example
  * ```tsx
- * const [theme, setTheme, busy] = useSyncConfig("user-theme", "light");
+ * const [theme, setTheme, ready] = useSyncConfig("user-theme", "light");
  *
- * <Show when={!busy()}>
+ * <Show when={ready()}>
  *   <button onClick={() => setTheme(theme() === "light" ? "dark" : "light")}>
  *     Toggle theme
  *   </button>
@@ -29,7 +29,7 @@ export function useSyncConfig<TValue>(
   const config = useConfig();
   const prefixedKey = `${config.clientName}.${key}`;
   const [value, setValue] = createSignal<TValue>(defaultValue);
-  const [busy, setBusy] = createSignal(false);
+  const [ready, setReady] = createSignal(false);
 
   // Initialize from storage
   const initializeFromStorage = async () => {
@@ -43,11 +43,11 @@ export function useSyncConfig<TValue>(
       } catch {
         // Ignore parse errors, keep default value
       }
+      setReady(true);
       return;
     }
 
     // Use syncStorage asynchronously
-    setBusy(true);
     try {
       const stored = await config.syncStorage.getItem(prefixedKey);
       if (stored !== null) {
@@ -64,7 +64,7 @@ export function useSyncConfig<TValue>(
         // Ignore parse errors
       }
     } finally {
-      setBusy(false);
+      setReady(true);
     }
   };
 
@@ -73,6 +73,7 @@ export function useSyncConfig<TValue>(
 
   // Save to storage whenever value changes
   createEffect(() => {
+    if (!ready()) return; // Don't save until storage has been read
     const currentValue = value();
     const serialized = JSON.stringify(currentValue);
 
@@ -93,10 +94,5 @@ export function useSyncConfig<TValue>(
     })();
   });
 
-  // Clean up (optional, for consistency)
-  onCleanup(() => {
-    // No cleanup needed for storage operations
-  });
-
-  return [value, setValue, busy];
+  return [value, setValue, ready];
 }

package/src/index.ts

@@ -5,11 +5,9 @@ export * from "./components/form-control/Button";
 
 // Select
 export * from "./components/form-control/select/Select";
-export * from "./components/form-control/select/SelectContext";
 
 // Combobox
 export * from "./components/form-control/combobox/Combobox";
-export * from "./components/form-control/combobox/ComboboxContext";
 
 // Field
 export * from "./components/form-control/field/TextInput";
@@ -132,7 +130,7 @@ export * from "./hooks/usePrint";
 export { createControllableSignal } from "./hooks/createControllableSignal";
 export { createIMEHandler } from "./hooks/createIMEHandler";
 export { createMountTransition } from "./hooks/createMountTransition";
-export { createPwaUpdate } from "./hooks/createPwaUpdate";
+export { usePwaUpdate } from "./hooks/usePwaUpdate";
 export { useRouterLink } from "./hooks/useRouterLink";
 
 //#endregion

package/src/providers/InitializeProvider.tsx

@@ -7,12 +7,12 @@ import { NotificationProvider } from "../components/feedback/notification/Notifi
 import { NotificationBanner } from "../components/feedback/notification/NotificationBanner";
 import { BusyProvider } from "../components/feedback/busy/BusyProvider";
 
-import { createPwaUpdate } from "../hooks/createPwaUpdate";
+import { usePwaUpdate } from "../hooks/usePwaUpdate";
 import { useLogger } from "../hooks/useLogger";
 
 /** Runs PWA update detection inside NotificationProvider context */
 function PwaUpdater() {
-  createPwaUpdate();
+  usePwaUpdate();
   return null;
 }
 

package/src/providers/ThemeContext.tsx

@@ -85,7 +85,7 @@ export function useTheme(): ThemeContextValue {
  * ```
  */
 export const ThemeProvider: ParentComponent = (props) => {
-  const [mode, setMode] = useSyncConfig<ThemeMode>("theme", "system");
+  const [mode, setMode, ready] = useSyncConfig<ThemeMode>("theme", "system");
 
   // OS 다크모드 감지
   const prefersDark = createMediaQuery("(prefers-color-scheme: dark)");
@@ -109,6 +109,7 @@ export const ThemeProvider: ParentComponent = (props) => {
 
   // <html>에 dark 클래스 토글
   createEffect(() => {
+    if (!ready()) return; // Don't apply theme until storage has been read
     const isDark = resolvedTheme() === "dark";
     document.documentElement.classList.toggle("dark", isDark);
   });

package/src/styles/patterns.styles.ts

@@ -1,6 +1,18 @@
 import clsx from "clsx";
 import { bgSurface, borderDefault, textDefault, textPlaceholder } from "./tokens.styles";
 
+// ── 아이콘 버튼 공통 ──
+export const iconButtonBase = clsx(
+  "inline-flex items-center justify-center",
+  "cursor-pointer",
+  "rounded",
+  "transition-colors",
+  "text-base-600 dark:text-base-300",
+  "hover:bg-base-200 dark:hover:bg-base-700",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+);
+
 // ── inset 포커스 아웃라인 (focus-within 버전: Field, TextArea) ──
 export const insetFocusOutline = clsx(
   "focus-within:[outline-style:solid]",

package/src/styles/tokens.styles.ts

@@ -15,6 +15,7 @@ export const disabledOpacity = "cursor-default opacity-50 pointer-events-none";
 
 // ── 사이즈 ──
 export type ComponentSize = "sm" | "lg" | "xl";
+export type ComponentSizeCompact = "sm" | "lg";
 export const paddingSm = "px-1.5 py-0.5";
 export const paddingLg = "px-3 py-2";
 export const paddingXl = "px-4 py-3";

package/dist/hooks/createPwaUpdate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createPwaUpdate.d.ts","sourceRoot":"","sources":["../../src/hooks/createPwaUpdate.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAuDtC"}

package/dist/hooks/createPwaUpdate.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/hooks/createPwaUpdate.ts"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,MAAM,kBAAkB,IAAI,KAAK;AAc1B,SAAS,kBAAwB;AACtC,MAAI,OAAO,cAAc,eAAe,EAAE,mBAAmB,WAAY;AAEzE,QAAM,eAAe,gBAAgB;AACrC,MAAI;AAEJ,OAAK,UAAU,cAAc,gBAAgB,EAAE,KAAK,CAAC,iBAAiB;AACpE,QAAI,gBAAgB,KAAM;AAG1B,iBAAa,YAAY,MAAM;AAC7B,WAAK,aAAa,OAAO;AAAA,IAC3B,GAAG,eAAe;AAGlB,QAAI,aAAa,WAAW,MAAM;AAChC,mBAAa,aAAa,OAAO;AAAA,IACnC;AAGA,iBAAa,iBAAiB,eAAe,MAAM;AACjD,YAAM,QAAQ,aAAa;AAC3B,UAAI,SAAS,KAAM;AAEnB,YAAM,iBAAiB,eAAe,MAAM;AAC1C,YAAI,MAAM,UAAU,eAAe,UAAU,cAAc,cAAc,MAAM;AAC7E,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AAGD,QAAM,qBAAqB,MAAM;AAC/B,WAAO,SAAS,OAAO;AAAA,EACzB;AACA,YAAU,cAAc,iBAAiB,oBAAoB,kBAAkB;AAE/E,YAAU,MAAM;AACd,QAAI,cAAc,MAAM;AACtB,oBAAc,UAAU;AAAA,IAC1B;AACA,cAAU,cAAc,oBAAoB,oBAAoB,kBAAkB;AAAA,EACpF,CAAC;AAED,WAAS,aAAa,WAAgC;AACpD,iBAAa,KAAK,uEAAgB,2HAA4B;AAAA,MAC5D,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,SAAS,MAAM;AACb,oBAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AAAA,QAChD;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
-  "names": []
-}