@simplysm/solid 13.0.0-beta.6

package/src/components/disclosure/Dropdown.tsx

@@ -0,0 +1,406 @@
+import { type JSX, type ParentComponent, createSignal, createEffect, onCleanup, Show, splitProps } from "solid-js";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import { createMountTransition } from "../../hooks/createMountTransition";
+import { Portal } from "solid-js/web";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../hooks/createControllableSignal";
+import { mergeStyles } from "../../helpers/mergeStyles";
+import { borderSubtle } from "../../styles/tokens.styles";
+
+export interface DropdownProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * 트리거 요소의 ref (위치 계산 + minWidth 적용)
+   * position과 함께 사용 불가
+   */
+  triggerRef?: () => HTMLElement | undefined;
+
+  /**
+   * 절대 위치 (컨텍스트 메뉴 등, minWidth 없음)
+   * triggerRef와 함께 사용 불가
+   */
+  position?: { x: number; y: number };
+
+  /**
+   * 팝업 열림 상태
+   */
+  open?: boolean;
+
+  /**
+   * 열림 상태 변경 시 콜백
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * 팝업 최대 높이 (기본값: 300px), 초과 시 내부 스크롤
+   */
+  maxHeight?: number;
+
+  /**
+   * 키보드 네비게이션 활성화 (Select 등에서 사용)
+   *
+   * direction=down일 때:
+   * - 트리거에서 ArrowDown → 첫 focusable 아이템 포커스
+   * - 첫 아이템에서 ArrowUp → 트리거 포커스
+   * - 트리거에서 ArrowUp → 닫기
+   *
+   * direction=up일 때:
+   * - 트리거에서 ArrowUp → 마지막 focusable 아이템 포커스
+   * - 마지막 아이템에서 ArrowDown → 트리거 포커스
+   * - 트리거에서 ArrowDown → 닫기
+   */
+  keyboardNav?: boolean;
+
+  /**
+   * children
+   */
+  children: JSX.Element;
+}
+
+/**
+ * 드롭다운 팝업 컴포넌트
+ *
+ * 위치 계산 + 포털 렌더링 + 닫힘 감지를 담당하며,
+ * 트리거 요소 렌더링과 열기 이벤트는 사용자가 직접 제어합니다.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false);
+ * let buttonRef: HTMLButtonElement;
+ *
+ * <Button ref={buttonRef} onClick={() => setOpen(!open())}>열기</Button>
+ * <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
+ *   <div>팝업 내용</div>
+ * </Dropdown>
+ * ```
+ */
+export const Dropdown: ParentComponent<DropdownProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "triggerRef",
+    "position",
+    "open",
+    "onOpenChange",
+    "maxHeight",
+    "keyboardNav",
+    "class",
+    "style",
+    "children",
+  ]);
+
+  const [open, setOpen] = createControllableSignal({
+    value: () => local.open ?? false,
+    onChange: () => local.onOpenChange,
+  });
+
+  // 팝업 ref
+  const [popupRef, setPopupRef] = createSignal<HTMLDivElement>();
+
+  // 애니메이션 상태 (mount transition)
+  const { mounted, animating, unmount } = createMountTransition(open);
+
+  // 계산된 위치
+  const [computedStyle, setComputedStyle] = createSignal<JSX.CSSProperties>({});
+
+  // 방향 (위/아래)
+  const [direction, setDirection] = createSignal<"down" | "up">("down");
+
+  // 위치 계산 함수 추출
+  const updatePosition = () => {
+    const popup = popupRef();
+    if (!popup) return;
+
+    const style: JSX.CSSProperties = {};
+
+    if (local.triggerRef) {
+      const trigger = local.triggerRef();
+      if (!trigger) return;
+
+      const rect = trigger.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+
+      // 위/아래 방향 결정 (화면 중앙 기준)
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const openDown = spaceBelow >= spaceAbove;
+      setDirection(openDown ? "down" : "up");
+
+      // 좌/우 조정 (화면 밖으로 나가지 않도록) - 뷰포트 기준
+      const adjustedLeft = Math.min(rect.left, viewportWidth - popup.offsetWidth);
+
+      style.left = `${Math.max(0, adjustedLeft)}px`;
+      style["min-width"] = `${rect.width}px`;
+
+      if (openDown) {
+        style.top = `${rect.bottom}px`;
+      } else {
+        style.bottom = `${viewportHeight - rect.top}px`;
+      }
+    } else if (local.position) {
+      const viewportHeight = window.innerHeight;
+      const viewportWidth = window.innerWidth;
+
+      // 위/아래 방향 결정
+      const spaceBelow = viewportHeight - local.position.y;
+      const spaceAbove = local.position.y;
+      const openDown = spaceBelow >= spaceAbove;
+      setDirection(openDown ? "down" : "up");
+
+      // 좌/우 조정 - 뷰포트 기준
+      const adjustedLeft = Math.min(local.position.x, viewportWidth - (popup.offsetWidth || 200));
+      style.left = `${Math.max(0, adjustedLeft)}px`;
+
+      if (openDown) {
+        style.top = `${local.position.y}px`;
+      } else {
+        style.bottom = `${viewportHeight - local.position.y}px`;
+      }
+    }
+
+    setComputedStyle(style);
+  };
+
+  // 마운트 시 위치 계산 + popup 크기 변경 시 재계산
+  createEffect(() => {
+    if (!mounted()) return;
+
+    updatePosition();
+
+    const popup = popupRef();
+    if (popup) {
+      createResizeObserver(popup, () => {
+        updatePosition();
+      });
+    }
+  });
+
+  // 외부 클릭 감지 (pointerdown)
+  createEffect(() => {
+    if (!open()) return;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      const popup = popupRef();
+      const target = e.target as Node;
+
+      // 팝업 내부 클릭은 무시
+      if (popup?.contains(target)) return;
+
+      // triggerRef 모드: 트리거 내부 클릭도 무시
+      if (local.triggerRef) {
+        const trigger = local.triggerRef();
+        if (trigger?.contains(target)) return;
+      }
+
+      // 외부 클릭 → 닫기
+      setOpen(false);
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
+  });
+
+  // Tab 키 포커스 이동 감지 (focusout)
+  createEffect(() => {
+    if (!open()) return;
+
+    const handleFocusOut = (e: FocusEvent) => {
+      const popup = popupRef();
+      const relatedTarget = e.relatedTarget as Node | null;
+
+      // relatedTarget이 null이면 무시 (pointerdown이 처리)
+      if (!relatedTarget) return;
+
+      // 팝업 내부로 이동은 무시
+      if (popup?.contains(relatedTarget)) return;
+
+      // triggerRef 모드: 트리거 내부로 이동도 무시
+      if (local.triggerRef) {
+        const trigger = local.triggerRef();
+        if (trigger?.contains(relatedTarget)) return;
+      }
+
+      // 외부로 포커스 이동 → 닫기
+      setOpen(false);
+    };
+
+    document.addEventListener("focusout", handleFocusOut);
+    onCleanup(() => document.removeEventListener("focusout", handleFocusOut));
+  });
+
+  // Escape 키 감지
+  createEffect(() => {
+    if (!open()) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopImmediatePropagation();
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
+  });
+
+  // 키보드 네비게이션: 트리거용 핸들러
+  const handleTriggerKeyDown = (e: KeyboardEvent) => {
+    if (!local.keyboardNav) return;
+
+    // 닫혀있을 때: ArrowUp/ArrowDown으로 열기
+    if (!open()) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+
+    // 열려있을 때: direction에 따른 처리
+    const popup = popupRef();
+    if (!popup) return;
+
+    const dir = direction();
+    const focusables = [
+      ...popup.querySelectorAll<HTMLElement>('[tabindex]:not([tabindex="-1"]), button, [data-list-item]'),
+    ];
+
+    if (dir === "down") {
+      if (e.key === "ArrowDown" && focusables.length > 0) {
+        e.preventDefault();
+        focusables[0]?.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    } else {
+      // direction === "up"
+      if (e.key === "ArrowUp" && focusables.length > 0) {
+        e.preventDefault();
+        focusables[focusables.length - 1]?.focus();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    }
+  };
+
+  // 키보드 네비게이션: 팝업용 핸들러
+  const handlePopupKeyDown = (e: KeyboardEvent) => {
+    if (!local.keyboardNav) return;
+
+    // List 등에서 이미 처리된 이벤트는 무시
+    if (e.defaultPrevented) return;
+
+    const trigger = local.triggerRef?.();
+    if (!trigger) return;
+
+    const dir = direction();
+
+    // 팝업에서 ArrowUp/ArrowDown이 처리되지 않았다면 (첫/마지막 아이템)
+    // 트리거로 포커스 이동
+    if (dir === "down" && e.key === "ArrowUp") {
+      e.preventDefault();
+      trigger.focus();
+    } else if (dir === "up" && e.key === "ArrowDown") {
+      e.preventDefault();
+      trigger.focus();
+    }
+  };
+
+  // 트리거에 키보드 핸들러 등록
+  createEffect(() => {
+    if (!local.keyboardNav) return;
+
+    const trigger = local.triggerRef?.();
+    if (!trigger) return;
+
+    trigger.addEventListener("keydown", handleTriggerKeyDown);
+    onCleanup(() => trigger.removeEventListener("keydown", handleTriggerKeyDown));
+  });
+
+  // 스크롤 감지
+  createEffect(() => {
+    if (!open()) return;
+
+    const handleScroll = (e: Event) => {
+      // 팝업 내부 스크롤은 무시
+      const popup = popupRef();
+      if (popup?.contains(e.target as Node)) return;
+
+      setOpen(false);
+    };
+
+    // capture로 모든 스크롤 감지
+    document.addEventListener("scroll", handleScroll, { capture: true });
+    onCleanup(() => document.removeEventListener("scroll", handleScroll, { capture: true }));
+  });
+
+  // resize 감지 (뷰포트 크기 변경 시 닫기)
+  createEffect(() => {
+    if (!open()) return;
+
+    const handleResize = () => {
+      setOpen(false);
+    };
+
+    window.addEventListener("resize", handleResize);
+    onCleanup(() => window.removeEventListener("resize", handleResize));
+  });
+
+  // transitionend 이벤트 처리
+  const handleTransitionEnd = (e: TransitionEvent) => {
+    // opacity 전환 완료 시에만 처리
+    if (e.propertyName !== "opacity") return;
+
+    if (!open()) {
+      // 닫힘 애니메이션 완료 → DOM에서 제거
+      unmount();
+    }
+  };
+
+  const maxHeight = () => local.maxHeight ?? 300;
+
+  // 애니메이션 클래스 (opacity와 transform만 transition, 위치 속성은 제외)
+  const animationClass = () => {
+    const base = "transition-[opacity,transform] duration-150 ease-out";
+    const visible = animating();
+    const dir = direction();
+
+    if (visible) {
+      return clsx(base, "translate-y-0 opacity-100");
+    } else {
+      return clsx(base, "opacity-0", dir === "down" ? "-translate-y-1" : "translate-y-1");
+    }
+  };
+
+  return (
+    <Show when={mounted()}>
+      <Portal>
+        <div
+          {...rest}
+          ref={setPopupRef}
+          data-dropdown
+          class={twMerge(
+            clsx(
+              "fixed", // 기본 position: fixed로 설정하여 offsetWidth 측정 정확하게
+              "z-dropdown",
+              "bg-white dark:bg-base-800",
+              "border",
+              borderSubtle,
+              "shadow-lg dark:shadow-black/30",
+              "rounded-md",
+              "overflow-y-auto",
+              animationClass(),
+            ),
+            local.class,
+          )}
+          style={mergeStyles(computedStyle(), local.style, { "max-height": `${maxHeight()}px` })}
+          onTransitionEnd={handleTransitionEnd}
+          onKeyDown={handlePopupKeyDown}
+        >
+          {local.children}
+        </div>
+      </Portal>
+    </Show>
+  );
+};

package/src/components/disclosure/Tabs.tsx

@@ -0,0 +1,127 @@
+import { type JSX, type ParentComponent, createContext, splitProps, useContext } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../hooks/createControllableSignal";
+import { type ComponentSize } from "../../styles/tokens.styles";
+
+// --- Context ---
+
+interface TabsContextValue {
+  value: () => string | undefined;
+  select: (value: string) => void;
+  size: () => ComponentSize | undefined;
+}
+
+const TabsContext = createContext<TabsContextValue>();
+
+// --- Tabs.Tab ---
+
+interface TabsTabProps {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+function TabsTabInner(props: TabsTabProps) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs.Tab은 Tabs 내부에서만 사용할 수 있습니다");
+
+  const isSelected = () => ctx.value() === props.value;
+
+  const sizeClasses = () => {
+    switch (ctx.size()) {
+      case "sm":
+        return "px-2.5 py-1 text-sm";
+      case "lg":
+        return "px-4 py-2.5 text-base";
+      default:
+        return "px-3 py-1.5 text-sm";
+    }
+  };
+
+  const baseClass = clsx("relative cursor-pointer select-none font-medium", "transition-colors", "-mb-px");
+
+  const stateClass = () =>
+    isSelected()
+      ? clsx("border-b-2 border-primary-500 text-primary-600", "dark:border-primary-400 dark:text-primary-400")
+      : clsx(
+          "border-b-2 border-transparent",
+          "text-base-500 hover:border-base-300 hover:text-base-700",
+          "dark:text-base-400 dark:hover:border-base-600 dark:hover:text-base-200",
+        );
+
+  const disabledClass = "opacity-50 pointer-events-none";
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isSelected()}
+      aria-disabled={props.disabled ?? false}
+      tabIndex={props.disabled ? -1 : 0}
+      class={twMerge(baseClass, sizeClasses(), stateClass(), props.disabled && disabledClass, props.class)}
+      onClick={() => {
+        if (!props.disabled) {
+          ctx.select(props.value);
+        }
+      }}
+      onKeyDown={(e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          if (!props.disabled) {
+            ctx.select(props.value);
+          }
+        }
+      }}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+// --- Tabs ---
+
+interface TabsProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  size?: ComponentSize;
+  class?: string;
+  style?: JSX.CSSProperties;
+  children?: JSX.Element;
+}
+
+interface TabsComponent {
+  (props: TabsProps): JSX.Element;
+  Tab: typeof TabsTabInner;
+}
+
+const TabsInner: ParentComponent<TabsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "size", "class", "style", "children"]);
+
+  const [value, setValue] = createControllableSignal<string | undefined>({
+    value: () => local.value,
+    onChange: () => local.onValueChange as ((value: string | undefined) => void) | undefined,
+  });
+
+  const contextValue: TabsContextValue = {
+    value,
+    select: (v: string) => {
+      setValue(v);
+    },
+    size: () => local.size,
+  };
+
+  const baseClass = clsx("inline-flex items-center gap-1", "border-b border-base-200", "dark:border-base-700");
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <div {...rest} role="tablist" class={twMerge(baseClass, local.class)} style={local.style}>
+        {local.children}
+      </div>
+    </TabsContext.Provider>
+  );
+};
+
+export const Tabs = TabsInner as unknown as TabsComponent;
+Tabs.Tab = TabsTabInner;

package/src/components/disclosure/dialogZIndex.ts

@@ -0,0 +1,43 @@
+/**
+ * Dialog z-index 레지스트리
+ *
+ * 열린 Dialog의 z-index를 관리하여 무한 증가를 방지한다.
+ * 기본 시작값 2000 (tailwind z-modal과 동일), 최대 열린 Dialog 수만큼만 사용.
+ */
+
+const BASE_Z = 2000;
+
+// 열린 Dialog wrapper 요소 목록 (순서 = z-index 순서)
+const stack: HTMLElement[] = [];
+
+/** Dialog 등록 — 스택 최상위에 추가하고 z-index 할당 */
+export function registerDialog(el: HTMLElement): void {
+  const idx = stack.indexOf(el);
+  if (idx >= 0) return; // 이미 등록됨
+  stack.push(el);
+  el.style.zIndex = (BASE_Z + stack.length - 1).toString();
+}
+
+/** Dialog 해제 — 스택에서 제거하고 나머지 재정렬 */
+export function unregisterDialog(el: HTMLElement): void {
+  const idx = stack.indexOf(el);
+  if (idx < 0) return;
+  stack.splice(idx, 1);
+  reindex();
+}
+
+/** Dialog를 최상위로 올림 (포커스 시) */
+export function bringToFront(el: HTMLElement): void {
+  const idx = stack.indexOf(el);
+  if (idx < 0 || idx === stack.length - 1) return; // 이미 최상위
+  stack.splice(idx, 1);
+  stack.push(el);
+  reindex();
+}
+
+/** 스택 순서대로 z-index 재할당 */
+function reindex(): void {
+  for (let i = 0; i < stack.length; i++) {
+    stack[i].style.zIndex = (BASE_Z + i).toString();
+  }
+}

package/src/components/display/Alert.tsx

@@ -0,0 +1,32 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { themeTokens, type SemanticTheme } from "../../styles/tokens.styles";
+
+export type AlertTheme = SemanticTheme;
+
+export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  theme?: AlertTheme;
+}
+
+const baseClass = clsx("block", "p-3", "rounded");
+
+const themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, t.light])) as Record<
+  AlertTheme,
+  string
+>;
+
+export const Alert: ParentComponent<AlertProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "theme"]);
+
+  const getClassName = () => {
+    const theme = local.theme ?? "base";
+    return twMerge(baseClass, themeClasses[theme], local.class);
+  };
+
+  return (
+    <div data-alert class={getClassName()} {...rest}>
+      {local.children}
+    </div>
+  );
+};