@simplysm/solid 13.0.0-beta.6

package/dist/components/disclosure/DialogProvider.js

@@ -0,0 +1,88 @@
+import { createSignal, For, splitProps } from "solid-js";
+import {
+  DialogContext,
+  DialogDefaultsContext
+} from "./DialogContext";
+import { DialogInstanceContext } from "./DialogInstanceContext";
+import { Dialog } from "./Dialog";
+let nextId = 0;
+const DialogProvider = (props) => {
+  const [local, _rest] = splitProps(props, ["closeOnEscape", "closeOnBackdrop", "children"]);
+  const defaults = () => ({
+    closeOnEscape: local.closeOnEscape,
+    closeOnBackdrop: local.closeOnBackdrop
+  });
+  const [entries, setEntries] = createSignal([]);
+  const show = (factory, options) => {
+    return new Promise((resolve) => {
+      const id = String(nextId++);
+      const [open, setOpen] = createSignal(true);
+      const entry = {
+        id,
+        factory,
+        options,
+        resolve,
+        open,
+        setOpen
+      };
+      setEntries((prev) => [...prev, entry]);
+    });
+  };
+  const requestClose = (id, result) => {
+    const entry = entries().find((e) => e.id === id);
+    if (entry) {
+      entry.pendingResult = result;
+      entry.setOpen(false);
+    }
+  };
+  const removeEntry = (id) => {
+    setEntries((prev) => {
+      const entry = prev.find((e) => e.id === id);
+      if (entry) {
+        entry.resolve(entry.pendingResult);
+      }
+      return prev.filter((e) => e.id !== id);
+    });
+  };
+  const contextValue = {
+    show
+  };
+  return /* @__PURE__ */ React.createElement(DialogDefaultsContext.Provider, { value: defaults }, /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: contextValue }, local.children, /* @__PURE__ */ React.createElement(For, { each: entries() }, (entry) => {
+    const instance = {
+      close: (result) => requestClose(entry.id, result)
+    };
+    return /* @__PURE__ */ React.createElement(
+      Dialog,
+      {
+        open: entry.open(),
+        onOpenChange: (open) => {
+          if (!open && entry.pendingResult === void 0) {
+            requestClose(entry.id);
+          }
+        },
+        onCloseComplete: () => removeEntry(entry.id),
+        title: entry.options.title,
+        hideHeader: entry.options.hideHeader,
+        closable: entry.options.closable,
+        closeOnBackdrop: entry.options.closeOnBackdrop,
+        closeOnEscape: entry.options.closeOnEscape,
+        resizable: entry.options.resizable,
+        movable: entry.options.movable,
+        float: entry.options.float,
+        fill: entry.options.fill,
+        widthPx: entry.options.widthPx,
+        heightPx: entry.options.heightPx,
+        minWidthPx: entry.options.minWidthPx,
+        minHeightPx: entry.options.minHeightPx,
+        position: entry.options.position,
+        headerStyle: entry.options.headerStyle,
+        canDeactivate: entry.options.canDeactivate
+      },
+      /* @__PURE__ */ React.createElement(DialogInstanceContext.Provider, { value: instance }, entry.factory())
+    );
+  })));
+};
+export {
+  DialogProvider
+};
+//# sourceMappingURL=DialogProvider.js.map

package/dist/components/disclosure/DialogProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/disclosure/DialogProvider.tsx"],
+  "sourcesContent": ["import { type Accessor, type ParentComponent, createSignal, For, splitProps, type JSX } from \"solid-js\";\nimport {\n  DialogContext,\n  DialogDefaultsContext,\n  type DialogContextValue,\n  type DialogDefaults,\n  type DialogShowOptions,\n} from \"./DialogContext\";\nimport { DialogInstanceContext, type DialogInstance } from \"./DialogInstanceContext\";\nimport { Dialog } from \"./Dialog\";\n\ninterface DialogEntry {\n  id: string;\n  factory: () => JSX.Element;\n  options: DialogShowOptions;\n  resolve: (result: unknown) => void;\n  open: Accessor<boolean>;\n  setOpen: (value: boolean) => void;\n  pendingResult?: unknown;\n}\n\nlet nextId = 0;\n\n/**\n * \uD504\uB85C\uADF8\uB798\uB9E4\uD2F1 \uB2E4\uC774\uC5BC\uB85C\uADF8 Provider\n *\n * `useDialog().show(content, options)` \uB85C \uB2E4\uC774\uC5BC\uB85C\uADF8\uB97C \uC5F4\uACE0,\n * `close(result)` \uB85C \uB2EB\uC73C\uBA74 Promise\uAC00 resolve\uB429\uB2C8\uB2E4.\n *\n * @example\n * ```tsx\n * <DialogProvider>\n *   <App />\n * </DialogProvider>\n * ```\n */\nexport interface DialogProviderProps extends DialogDefaults {}\n\nexport const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {\n  const [local, _rest] = splitProps(props, [\"closeOnEscape\", \"closeOnBackdrop\", \"children\"]);\n\n  const defaults = () => ({\n    closeOnEscape: local.closeOnEscape,\n    closeOnBackdrop: local.closeOnBackdrop,\n  });\n\n  const [entries, setEntries] = createSignal<DialogEntry[]>([]);\n\n  const show = <T,>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined> => {\n    return new Promise<T | undefined>((resolve) => {\n      const id = String(nextId++);\n      const [open, setOpen] = createSignal(true);\n      const entry: DialogEntry = {\n        id,\n        factory,\n        options,\n        resolve: resolve as (result: unknown) => void,\n        open,\n        setOpen,\n      };\n      setEntries((prev) => [...prev, entry]);\n    });\n  };\n\n  // \uB2EB\uAE30 \uC560\uB2C8\uBA54\uC774\uC158 \uC2DC\uC791 (open\uC744 false\uB85C \uBCC0\uACBD)\n  const requestClose = (id: string, result?: unknown) => {\n    const entry = entries().find((e) => e.id === id);\n    if (entry) {\n      entry.pendingResult = result;\n      entry.setOpen(false);\n    }\n  };\n\n  // \uC560\uB2C8\uBA54\uC774\uC158 \uC644\uB8CC \uD6C4 \uC2E4\uC81C \uC81C\uAC70\n  const removeEntry = (id: string) => {\n    setEntries((prev) => {\n      const entry = prev.find((e) => e.id === id);\n      if (entry) {\n        entry.resolve(entry.pendingResult);\n      }\n      return prev.filter((e) => e.id !== id);\n    });\n  };\n\n  const contextValue: DialogContextValue = {\n    show,\n  };\n\n  return (\n    <DialogDefaultsContext.Provider value={defaults}>\n      <DialogContext.Provider value={contextValue}>\n        {local.children}\n        <For each={entries()}>\n          {(entry) => {\n            const instance: DialogInstance<unknown> = {\n              close: (result?: unknown) => requestClose(entry.id, result),\n            };\n\n            return (\n              <Dialog\n                open={entry.open()}\n                onOpenChange={(open) => {\n                  if (!open && entry.pendingResult === undefined) {\n                    requestClose(entry.id);\n                  }\n                }}\n                onCloseComplete={() => removeEntry(entry.id)}\n                title={entry.options.title}\n                hideHeader={entry.options.hideHeader}\n                closable={entry.options.closable}\n                closeOnBackdrop={entry.options.closeOnBackdrop}\n                closeOnEscape={entry.options.closeOnEscape}\n                resizable={entry.options.resizable}\n                movable={entry.options.movable}\n                float={entry.options.float}\n                fill={entry.options.fill}\n                widthPx={entry.options.widthPx}\n                heightPx={entry.options.heightPx}\n                minWidthPx={entry.options.minWidthPx}\n                minHeightPx={entry.options.minHeightPx}\n                position={entry.options.position}\n                headerStyle={entry.options.headerStyle}\n                canDeactivate={entry.options.canDeactivate}\n              >\n                <DialogInstanceContext.Provider value={instance}>{entry.factory()}</DialogInstanceContext.Provider>\n              </Dialog>\n            );\n          }}\n        </For>\n      </DialogContext.Provider>\n    </DialogDefaultsContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,SAA8C,cAAc,KAAK,kBAA4B;AAC7F;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,6BAAkD;AAC3D,SAAS,cAAc;AAYvB,IAAI,SAAS;AAiBN,MAAM,iBAAuD,CAAC,UAAU;AAC7E,QAAM,CAAC,OAAO,KAAK,IAAI,WAAW,OAAO,CAAC,iBAAiB,mBAAmB,UAAU,CAAC;AAEzF,QAAM,WAAW,OAAO;AAAA,IACtB,eAAe,MAAM;AAAA,IACrB,iBAAiB,MAAM;AAAA,EACzB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,aAA4B,CAAC,CAAC;AAE5D,QAAM,OAAO,CAAK,SAA4B,YAAuD;AACnG,WAAO,IAAI,QAAuB,CAAC,YAAY;AAC7C,YAAM,KAAK,OAAO,QAAQ;AAC1B,YAAM,CAAC,MAAM,OAAO,IAAI,aAAa,IAAI;AACzC,YAAM,QAAqB;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,iBAAW,CAAC,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC;AAAA,IACvC,CAAC;AAAA,EACH;AAGA,QAAM,eAAe,CAAC,IAAY,WAAqB;AACrD,UAAM,QAAQ,QAAQ,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAC/C,QAAI,OAAO;AACT,YAAM,gBAAgB;AACtB,YAAM,QAAQ,KAAK;AAAA,IACrB;AAAA,EACF;AAGA,QAAM,cAAc,CAAC,OAAe;AAClC,eAAW,CAAC,SAAS;AACnB,YAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE;AAC1C,UAAI,OAAO;AACT,cAAM,QAAQ,MAAM,aAAa;AAAA,MACnC;AACA,aAAO,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE;AAAA,IACvC,CAAC;AAAA,EACH;AAEA,QAAM,eAAmC;AAAA,IACvC;AAAA,EACF;AAEA,SACE,oCAAC,sBAAsB,UAAtB,EAA+B,OAAO,YACrC,oCAAC,cAAc,UAAd,EAAuB,OAAO,gBAC5B,MAAM,UACP,oCAAC,OAAI,MAAM,QAAQ,KAChB,CAAC,UAAU;AACV,UAAM,WAAoC;AAAA,MACxC,OAAO,CAAC,WAAqB,aAAa,MAAM,IAAI,MAAM;AAAA,IAC5D;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM,KAAK;AAAA,QACjB,cAAc,CAAC,SAAS;AACtB,cAAI,CAAC,QAAQ,MAAM,kBAAkB,QAAW;AAC9C,yBAAa,MAAM,EAAE;AAAA,UACvB;AAAA,QACF;AAAA,QACA,iBAAiB,MAAM,YAAY,MAAM,EAAE;AAAA,QAC3C,OAAO,MAAM,QAAQ;AAAA,QACrB,YAAY,MAAM,QAAQ;AAAA,QAC1B,UAAU,MAAM,QAAQ;AAAA,QACxB,iBAAiB,MAAM,QAAQ;AAAA,QAC/B,eAAe,MAAM,QAAQ;AAAA,QAC7B,WAAW,MAAM,QAAQ;AAAA,QACzB,SAAS,MAAM,QAAQ;AAAA,QACvB,OAAO,MAAM,QAAQ;AAAA,QACrB,MAAM,MAAM,QAAQ;AAAA,QACpB,SAAS,MAAM,QAAQ;AAAA,QACvB,UAAU,MAAM,QAAQ;AAAA,QACxB,YAAY,MAAM,QAAQ;AAAA,QAC1B,aAAa,MAAM,QAAQ;AAAA,QAC3B,UAAU,MAAM,QAAQ;AAAA,QACxB,aAAa,MAAM,QAAQ;AAAA,QAC3B,eAAe,MAAM,QAAQ;AAAA;AAAA,MAE7B,oCAAC,sBAAsB,UAAtB,EAA+B,OAAO,YAAW,MAAM,QAAQ,CAAE;AAAA,IACpE;AAAA,EAEJ,CACF,CACF,CACF;AAEJ;",
+  "names": []
+}

package/dist/components/disclosure/Dropdown.js

@@ -0,0 +1,244 @@
+import { 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";
+const Dropdown = (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
+  });
+  const [popupRef, setPopupRef] = createSignal();
+  const { mounted, animating, unmount } = createMountTransition(open);
+  const [computedStyle, setComputedStyle] = createSignal({});
+  const [direction, setDirection] = createSignal("down");
+  const updatePosition = () => {
+    const popup = popupRef();
+    if (!popup) return;
+    const style = {};
+    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);
+  };
+  createEffect(() => {
+    if (!mounted()) return;
+    updatePosition();
+    const popup = popupRef();
+    if (popup) {
+      createResizeObserver(popup, () => {
+        updatePosition();
+      });
+    }
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const handlePointerDown = (e) => {
+      const popup = popupRef();
+      const target = e.target;
+      if (popup == null ? void 0 : popup.contains(target)) return;
+      if (local.triggerRef) {
+        const trigger = local.triggerRef();
+        if (trigger == null ? void 0 : trigger.contains(target)) return;
+      }
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const handleFocusOut = (e) => {
+      const popup = popupRef();
+      const relatedTarget = e.relatedTarget;
+      if (!relatedTarget) return;
+      if (popup == null ? void 0 : popup.contains(relatedTarget)) return;
+      if (local.triggerRef) {
+        const trigger = local.triggerRef();
+        if (trigger == null ? void 0 : trigger.contains(relatedTarget)) return;
+      }
+      setOpen(false);
+    };
+    document.addEventListener("focusout", handleFocusOut);
+    onCleanup(() => document.removeEventListener("focusout", handleFocusOut));
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopImmediatePropagation();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
+  });
+  const handleTriggerKeyDown = (e) => {
+    var _a, _b;
+    if (!local.keyboardNav) return;
+    if (!open()) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    const popup = popupRef();
+    if (!popup) return;
+    const dir = direction();
+    const focusables = [
+      ...popup.querySelectorAll('[tabindex]:not([tabindex="-1"]), button, [data-list-item]')
+    ];
+    if (dir === "down") {
+      if (e.key === "ArrowDown" && focusables.length > 0) {
+        e.preventDefault();
+        (_a = focusables[0]) == null ? void 0 : _a.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    } else {
+      if (e.key === "ArrowUp" && focusables.length > 0) {
+        e.preventDefault();
+        (_b = focusables[focusables.length - 1]) == null ? void 0 : _b.focus();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    }
+  };
+  const handlePopupKeyDown = (e) => {
+    var _a;
+    if (!local.keyboardNav) return;
+    if (e.defaultPrevented) return;
+    const trigger = (_a = local.triggerRef) == null ? void 0 : _a.call(local);
+    if (!trigger) return;
+    const dir = direction();
+    if (dir === "down" && e.key === "ArrowUp") {
+      e.preventDefault();
+      trigger.focus();
+    } else if (dir === "up" && e.key === "ArrowDown") {
+      e.preventDefault();
+      trigger.focus();
+    }
+  };
+  createEffect(() => {
+    var _a;
+    if (!local.keyboardNav) return;
+    const trigger = (_a = local.triggerRef) == null ? void 0 : _a.call(local);
+    if (!trigger) return;
+    trigger.addEventListener("keydown", handleTriggerKeyDown);
+    onCleanup(() => trigger.removeEventListener("keydown", handleTriggerKeyDown));
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const handleScroll = (e) => {
+      const popup = popupRef();
+      if (popup == null ? void 0 : popup.contains(e.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("scroll", handleScroll, { capture: true });
+    onCleanup(() => document.removeEventListener("scroll", handleScroll, { capture: true }));
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const handleResize = () => {
+      setOpen(false);
+    };
+    window.addEventListener("resize", handleResize);
+    onCleanup(() => window.removeEventListener("resize", handleResize));
+  });
+  const handleTransitionEnd = (e) => {
+    if (e.propertyName !== "opacity") return;
+    if (!open()) {
+      unmount();
+    }
+  };
+  const maxHeight = () => local.maxHeight ?? 300;
+  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 /* @__PURE__ */ React.createElement(Show, { when: mounted() }, /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      ref: setPopupRef,
+      "data-dropdown": true,
+      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
+  )));
+};
+export {
+  Dropdown
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/disclosure/Dropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/disclosure/Dropdown.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, createSignal, createEffect, onCleanup, Show, splitProps } from \"solid-js\";\nimport { createResizeObserver } from \"@solid-primitives/resize-observer\";\nimport { createMountTransition } from \"../../hooks/createMountTransition\";\nimport { Portal } from \"solid-js/web\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../hooks/createControllableSignal\";\nimport { mergeStyles } from \"../../helpers/mergeStyles\";\nimport { borderSubtle } from \"../../styles/tokens.styles\";\n\nexport interface DropdownProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * \uD2B8\uB9AC\uAC70 \uC694\uC18C\uC758 ref (\uC704\uCE58 \uACC4\uC0B0 + minWidth \uC801\uC6A9)\n   * position\uACFC \uD568\uAED8 \uC0AC\uC6A9 \uBD88\uAC00\n   */\n  triggerRef?: () => HTMLElement | undefined;\n\n  /**\n   * \uC808\uB300 \uC704\uCE58 (\uCEE8\uD14D\uC2A4\uD2B8 \uBA54\uB274 \uB4F1, minWidth \uC5C6\uC74C)\n   * triggerRef\uC640 \uD568\uAED8 \uC0AC\uC6A9 \uBD88\uAC00\n   */\n  position?: { x: number; y: number };\n\n  /**\n   * \uD31D\uC5C5 \uC5F4\uB9BC \uC0C1\uD0DC\n   */\n  open?: boolean;\n\n  /**\n   * \uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uCF5C\uBC31\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * \uD31D\uC5C5 \uCD5C\uB300 \uB192\uC774 (\uAE30\uBCF8\uAC12: 300px), \uCD08\uACFC \uC2DC \uB0B4\uBD80 \uC2A4\uD06C\uB864\n   */\n  maxHeight?: number;\n\n  /**\n   * \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158 \uD65C\uC131\uD654 (Select \uB4F1\uC5D0\uC11C \uC0AC\uC6A9)\n   *\n   * direction=down\uC77C \uB54C:\n   * - \uD2B8\uB9AC\uAC70\uC5D0\uC11C ArrowDown \u2192 \uCCAB focusable \uC544\uC774\uD15C \uD3EC\uCEE4\uC2A4\n   * - \uCCAB \uC544\uC774\uD15C\uC5D0\uC11C ArrowUp \u2192 \uD2B8\uB9AC\uAC70 \uD3EC\uCEE4\uC2A4\n   * - \uD2B8\uB9AC\uAC70\uC5D0\uC11C ArrowUp \u2192 \uB2EB\uAE30\n   *\n   * direction=up\uC77C \uB54C:\n   * - \uD2B8\uB9AC\uAC70\uC5D0\uC11C ArrowUp \u2192 \uB9C8\uC9C0\uB9C9 focusable \uC544\uC774\uD15C \uD3EC\uCEE4\uC2A4\n   * - \uB9C8\uC9C0\uB9C9 \uC544\uC774\uD15C\uC5D0\uC11C ArrowDown \u2192 \uD2B8\uB9AC\uAC70 \uD3EC\uCEE4\uC2A4\n   * - \uD2B8\uB9AC\uAC70\uC5D0\uC11C ArrowDown \u2192 \uB2EB\uAE30\n   */\n  keyboardNav?: boolean;\n\n  /**\n   * children\n   */\n  children: JSX.Element;\n}\n\n/**\n * \uB4DC\uB86D\uB2E4\uC6B4 \uD31D\uC5C5 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uC704\uCE58 \uACC4\uC0B0 + \uD3EC\uD138 \uB80C\uB354\uB9C1 + \uB2EB\uD798 \uAC10\uC9C0\uB97C \uB2F4\uB2F9\uD558\uBA70,\n * \uD2B8\uB9AC\uAC70 \uC694\uC18C \uB80C\uB354\uB9C1\uACFC \uC5F4\uAE30 \uC774\uBCA4\uD2B8\uB294 \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uC81C\uC5B4\uD569\uB2C8\uB2E4.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = createSignal(false);\n * let buttonRef: HTMLButtonElement;\n *\n * <Button ref={buttonRef} onClick={() => setOpen(!open())}>\uC5F4\uAE30</Button>\n * <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>\n *   <div>\uD31D\uC5C5 \uB0B4\uC6A9</div>\n * </Dropdown>\n * ```\n */\nexport const Dropdown: ParentComponent<DropdownProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"triggerRef\",\n    \"position\",\n    \"open\",\n    \"onOpenChange\",\n    \"maxHeight\",\n    \"keyboardNav\",\n    \"class\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const [open, setOpen] = createControllableSignal({\n    value: () => local.open ?? false,\n    onChange: () => local.onOpenChange,\n  });\n\n  // \uD31D\uC5C5 ref\n  const [popupRef, setPopupRef] = createSignal<HTMLDivElement>();\n\n  // \uC560\uB2C8\uBA54\uC774\uC158 \uC0C1\uD0DC (mount transition)\n  const { mounted, animating, unmount } = createMountTransition(open);\n\n  // \uACC4\uC0B0\uB41C \uC704\uCE58\n  const [computedStyle, setComputedStyle] = createSignal<JSX.CSSProperties>({});\n\n  // \uBC29\uD5A5 (\uC704/\uC544\uB798)\n  const [direction, setDirection] = createSignal<\"down\" | \"up\">(\"down\");\n\n  // \uC704\uCE58 \uACC4\uC0B0 \uD568\uC218 \uCD94\uCD9C\n  const updatePosition = () => {\n    const popup = popupRef();\n    if (!popup) return;\n\n    const style: JSX.CSSProperties = {};\n\n    if (local.triggerRef) {\n      const trigger = local.triggerRef();\n      if (!trigger) return;\n\n      const rect = trigger.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      // \uC704/\uC544\uB798 \uBC29\uD5A5 \uACB0\uC815 (\uD654\uBA74 \uC911\uC559 \uAE30\uC900)\n      const spaceBelow = viewportHeight - rect.bottom;\n      const spaceAbove = rect.top;\n      const openDown = spaceBelow >= spaceAbove;\n      setDirection(openDown ? \"down\" : \"up\");\n\n      // \uC88C/\uC6B0 \uC870\uC815 (\uD654\uBA74 \uBC16\uC73C\uB85C \uB098\uAC00\uC9C0 \uC54A\uB3C4\uB85D) - \uBDF0\uD3EC\uD2B8 \uAE30\uC900\n      const adjustedLeft = Math.min(rect.left, viewportWidth - popup.offsetWidth);\n\n      style.left = `${Math.max(0, adjustedLeft)}px`;\n      style[\"min-width\"] = `${rect.width}px`;\n\n      if (openDown) {\n        style.top = `${rect.bottom}px`;\n      } else {\n        style.bottom = `${viewportHeight - rect.top}px`;\n      }\n    } else if (local.position) {\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      // \uC704/\uC544\uB798 \uBC29\uD5A5 \uACB0\uC815\n      const spaceBelow = viewportHeight - local.position.y;\n      const spaceAbove = local.position.y;\n      const openDown = spaceBelow >= spaceAbove;\n      setDirection(openDown ? \"down\" : \"up\");\n\n      // \uC88C/\uC6B0 \uC870\uC815 - \uBDF0\uD3EC\uD2B8 \uAE30\uC900\n      const adjustedLeft = Math.min(local.position.x, viewportWidth - (popup.offsetWidth || 200));\n      style.left = `${Math.max(0, adjustedLeft)}px`;\n\n      if (openDown) {\n        style.top = `${local.position.y}px`;\n      } else {\n        style.bottom = `${viewportHeight - local.position.y}px`;\n      }\n    }\n\n    setComputedStyle(style);\n  };\n\n  // \uB9C8\uC6B4\uD2B8 \uC2DC \uC704\uCE58 \uACC4\uC0B0 + popup \uD06C\uAE30 \uBCC0\uACBD \uC2DC \uC7AC\uACC4\uC0B0\n  createEffect(() => {\n    if (!mounted()) return;\n\n    updatePosition();\n\n    const popup = popupRef();\n    if (popup) {\n      createResizeObserver(popup, () => {\n        updatePosition();\n      });\n    }\n  });\n\n  // \uC678\uBD80 \uD074\uB9AD \uAC10\uC9C0 (pointerdown)\n  createEffect(() => {\n    if (!open()) return;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      const popup = popupRef();\n      const target = e.target as Node;\n\n      // \uD31D\uC5C5 \uB0B4\uBD80 \uD074\uB9AD\uC740 \uBB34\uC2DC\n      if (popup?.contains(target)) return;\n\n      // triggerRef \uBAA8\uB4DC: \uD2B8\uB9AC\uAC70 \uB0B4\uBD80 \uD074\uB9AD\uB3C4 \uBB34\uC2DC\n      if (local.triggerRef) {\n        const trigger = local.triggerRef();\n        if (trigger?.contains(target)) return;\n      }\n\n      // \uC678\uBD80 \uD074\uB9AD \u2192 \uB2EB\uAE30\n      setOpen(false);\n    };\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    onCleanup(() => document.removeEventListener(\"pointerdown\", handlePointerDown));\n  });\n\n  // Tab \uD0A4 \uD3EC\uCEE4\uC2A4 \uC774\uB3D9 \uAC10\uC9C0 (focusout)\n  createEffect(() => {\n    if (!open()) return;\n\n    const handleFocusOut = (e: FocusEvent) => {\n      const popup = popupRef();\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // relatedTarget\uC774 null\uC774\uBA74 \uBB34\uC2DC (pointerdown\uC774 \uCC98\uB9AC)\n      if (!relatedTarget) return;\n\n      // \uD31D\uC5C5 \uB0B4\uBD80\uB85C \uC774\uB3D9\uC740 \uBB34\uC2DC\n      if (popup?.contains(relatedTarget)) return;\n\n      // triggerRef \uBAA8\uB4DC: \uD2B8\uB9AC\uAC70 \uB0B4\uBD80\uB85C \uC774\uB3D9\uB3C4 \uBB34\uC2DC\n      if (local.triggerRef) {\n        const trigger = local.triggerRef();\n        if (trigger?.contains(relatedTarget)) return;\n      }\n\n      // \uC678\uBD80\uB85C \uD3EC\uCEE4\uC2A4 \uC774\uB3D9 \u2192 \uB2EB\uAE30\n      setOpen(false);\n    };\n\n    document.addEventListener(\"focusout\", handleFocusOut);\n    onCleanup(() => document.removeEventListener(\"focusout\", handleFocusOut));\n  });\n\n  // Escape \uD0A4 \uAC10\uC9C0\n  createEffect(() => {\n    if (!open()) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopImmediatePropagation();\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", handleKeyDown));\n  });\n\n  // \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158: \uD2B8\uB9AC\uAC70\uC6A9 \uD578\uB4E4\uB7EC\n  const handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (!local.keyboardNav) return;\n\n    // \uB2EB\uD600\uC788\uC744 \uB54C: ArrowUp/ArrowDown\uC73C\uB85C \uC5F4\uAE30\n    if (!open()) {\n      if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        setOpen(true);\n      }\n      return;\n    }\n\n    // \uC5F4\uB824\uC788\uC744 \uB54C: direction\uC5D0 \uB530\uB978 \uCC98\uB9AC\n    const popup = popupRef();\n    if (!popup) return;\n\n    const dir = direction();\n    const focusables = [\n      ...popup.querySelectorAll<HTMLElement>('[tabindex]:not([tabindex=\"-1\"]), button, [data-list-item]'),\n    ];\n\n    if (dir === \"down\") {\n      if (e.key === \"ArrowDown\" && focusables.length > 0) {\n        e.preventDefault();\n        focusables[0]?.focus();\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        setOpen(false);\n      }\n    } else {\n      // direction === \"up\"\n      if (e.key === \"ArrowUp\" && focusables.length > 0) {\n        e.preventDefault();\n        focusables[focusables.length - 1]?.focus();\n      } else if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setOpen(false);\n      }\n    }\n  };\n\n  // \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158: \uD31D\uC5C5\uC6A9 \uD578\uB4E4\uB7EC\n  const handlePopupKeyDown = (e: KeyboardEvent) => {\n    if (!local.keyboardNav) return;\n\n    // List \uB4F1\uC5D0\uC11C \uC774\uBBF8 \uCC98\uB9AC\uB41C \uC774\uBCA4\uD2B8\uB294 \uBB34\uC2DC\n    if (e.defaultPrevented) return;\n\n    const trigger = local.triggerRef?.();\n    if (!trigger) return;\n\n    const dir = direction();\n\n    // \uD31D\uC5C5\uC5D0\uC11C ArrowUp/ArrowDown\uC774 \uCC98\uB9AC\uB418\uC9C0 \uC54A\uC558\uB2E4\uBA74 (\uCCAB/\uB9C8\uC9C0\uB9C9 \uC544\uC774\uD15C)\n    // \uD2B8\uB9AC\uAC70\uB85C \uD3EC\uCEE4\uC2A4 \uC774\uB3D9\n    if (dir === \"down\" && e.key === \"ArrowUp\") {\n      e.preventDefault();\n      trigger.focus();\n    } else if (dir === \"up\" && e.key === \"ArrowDown\") {\n      e.preventDefault();\n      trigger.focus();\n    }\n  };\n\n  // \uD2B8\uB9AC\uAC70\uC5D0 \uD0A4\uBCF4\uB4DC \uD578\uB4E4\uB7EC \uB4F1\uB85D\n  createEffect(() => {\n    if (!local.keyboardNav) return;\n\n    const trigger = local.triggerRef?.();\n    if (!trigger) return;\n\n    trigger.addEventListener(\"keydown\", handleTriggerKeyDown);\n    onCleanup(() => trigger.removeEventListener(\"keydown\", handleTriggerKeyDown));\n  });\n\n  // \uC2A4\uD06C\uB864 \uAC10\uC9C0\n  createEffect(() => {\n    if (!open()) return;\n\n    const handleScroll = (e: Event) => {\n      // \uD31D\uC5C5 \uB0B4\uBD80 \uC2A4\uD06C\uB864\uC740 \uBB34\uC2DC\n      const popup = popupRef();\n      if (popup?.contains(e.target as Node)) return;\n\n      setOpen(false);\n    };\n\n    // capture\uB85C \uBAA8\uB4E0 \uC2A4\uD06C\uB864 \uAC10\uC9C0\n    document.addEventListener(\"scroll\", handleScroll, { capture: true });\n    onCleanup(() => document.removeEventListener(\"scroll\", handleScroll, { capture: true }));\n  });\n\n  // resize \uAC10\uC9C0 (\uBDF0\uD3EC\uD2B8 \uD06C\uAE30 \uBCC0\uACBD \uC2DC \uB2EB\uAE30)\n  createEffect(() => {\n    if (!open()) return;\n\n    const handleResize = () => {\n      setOpen(false);\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    onCleanup(() => window.removeEventListener(\"resize\", handleResize));\n  });\n\n  // transitionend \uC774\uBCA4\uD2B8 \uCC98\uB9AC\n  const handleTransitionEnd = (e: TransitionEvent) => {\n    // opacity \uC804\uD658 \uC644\uB8CC \uC2DC\uC5D0\uB9CC \uCC98\uB9AC\n    if (e.propertyName !== \"opacity\") return;\n\n    if (!open()) {\n      // \uB2EB\uD798 \uC560\uB2C8\uBA54\uC774\uC158 \uC644\uB8CC \u2192 DOM\uC5D0\uC11C \uC81C\uAC70\n      unmount();\n    }\n  };\n\n  const maxHeight = () => local.maxHeight ?? 300;\n\n  // \uC560\uB2C8\uBA54\uC774\uC158 \uD074\uB798\uC2A4 (opacity\uC640 transform\uB9CC transition, \uC704\uCE58 \uC18D\uC131\uC740 \uC81C\uC678)\n  const animationClass = () => {\n    const base = \"transition-[opacity,transform] duration-150 ease-out\";\n    const visible = animating();\n    const dir = direction();\n\n    if (visible) {\n      return clsx(base, \"translate-y-0 opacity-100\");\n    } else {\n      return clsx(base, \"opacity-0\", dir === \"down\" ? \"-translate-y-1\" : \"translate-y-1\");\n    }\n  };\n\n  return (\n    <Show when={mounted()}>\n      <Portal>\n        <div\n          {...rest}\n          ref={setPopupRef}\n          data-dropdown\n          class={twMerge(\n            clsx(\n              \"fixed\", // \uAE30\uBCF8 position: fixed\uB85C \uC124\uC815\uD558\uC5EC offsetWidth \uCE21\uC815 \uC815\uD655\uD558\uAC8C\n              \"z-dropdown\",\n              \"bg-white dark:bg-base-800\",\n              \"border\",\n              borderSubtle,\n              \"shadow-lg dark:shadow-black/30\",\n              \"rounded-md\",\n              \"overflow-y-auto\",\n              animationClass(),\n            ),\n            local.class,\n          )}\n          style={mergeStyles(computedStyle(), local.style, { \"max-height\": `${maxHeight()}px` })}\n          onTransitionEnd={handleTransitionEnd}\n          onKeyDown={handlePopupKeyDown}\n        >\n          {local.children}\n        </div>\n      </Portal>\n    </Show>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/disclosure/Tabs.js

@@ -0,0 +1,75 @@
+import { createContext, splitProps, useContext } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../hooks/createControllableSignal";
+import {} from "../../styles/tokens.styles";
+const TabsContext = createContext();
+function TabsTabInner(props) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs.Tab\uC740 Tabs \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  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 /* @__PURE__ */ React.createElement(
+    "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
+  );
+}
+const TabsInner = (props) => {
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "size", "class", "style", "children"]);
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange
+  });
+  const contextValue = {
+    value,
+    select: (v) => {
+      setValue(v);
+    },
+    size: () => local.size
+  };
+  const baseClass = clsx("inline-flex items-center gap-1", "border-b border-base-200", "dark:border-base-700");
+  return /* @__PURE__ */ React.createElement(TabsContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", { ...rest, role: "tablist", class: twMerge(baseClass, local.class), style: local.style }, local.children));
+};
+const Tabs = TabsInner;
+Tabs.Tab = TabsTabInner;
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/disclosure/Tabs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/disclosure/Tabs.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, createContext, splitProps, useContext } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../hooks/createControllableSignal\";\nimport { type ComponentSize } from \"../../styles/tokens.styles\";\n\n// --- Context ---\n\ninterface TabsContextValue {\n  value: () => string | undefined;\n  select: (value: string) => void;\n  size: () => ComponentSize | undefined;\n}\n\nconst TabsContext = createContext<TabsContextValue>();\n\n// --- Tabs.Tab ---\n\ninterface TabsTabProps {\n  value: string;\n  disabled?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\nfunction TabsTabInner(props: TabsTabProps) {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error(\"Tabs.Tab\uC740 Tabs \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n\n  const isSelected = () => ctx.value() === props.value;\n\n  const sizeClasses = () => {\n    switch (ctx.size()) {\n      case \"sm\":\n        return \"px-2.5 py-1 text-sm\";\n      case \"lg\":\n        return \"px-4 py-2.5 text-base\";\n      default:\n        return \"px-3 py-1.5 text-sm\";\n    }\n  };\n\n  const baseClass = clsx(\"relative cursor-pointer select-none font-medium\", \"transition-colors\", \"-mb-px\");\n\n  const stateClass = () =>\n    isSelected()\n      ? clsx(\"border-b-2 border-primary-500 text-primary-600\", \"dark:border-primary-400 dark:text-primary-400\")\n      : clsx(\n          \"border-b-2 border-transparent\",\n          \"text-base-500 hover:border-base-300 hover:text-base-700\",\n          \"dark:text-base-400 dark:hover:border-base-600 dark:hover:text-base-200\",\n        );\n\n  const disabledClass = \"opacity-50 pointer-events-none\";\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isSelected()}\n      aria-disabled={props.disabled ?? false}\n      tabIndex={props.disabled ? -1 : 0}\n      class={twMerge(baseClass, sizeClasses(), stateClass(), props.disabled && disabledClass, props.class)}\n      onClick={() => {\n        if (!props.disabled) {\n          ctx.select(props.value);\n        }\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \" \" || e.key === \"Enter\") {\n          e.preventDefault();\n          if (!props.disabled) {\n            ctx.select(props.value);\n          }\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\n// --- Tabs ---\n\ninterface TabsProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: ComponentSize;\n  class?: string;\n  style?: JSX.CSSProperties;\n  children?: JSX.Element;\n}\n\ninterface TabsComponent {\n  (props: TabsProps): JSX.Element;\n  Tab: typeof TabsTabInner;\n}\n\nconst TabsInner: ParentComponent<TabsProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"value\", \"onValueChange\", \"size\", \"class\", \"style\", \"children\"]);\n\n  const [value, setValue] = createControllableSignal<string | undefined>({\n    value: () => local.value,\n    onChange: () => local.onValueChange as ((value: string | undefined) => void) | undefined,\n  });\n\n  const contextValue: TabsContextValue = {\n    value,\n    select: (v: string) => {\n      setValue(v);\n    },\n    size: () => local.size,\n  };\n\n  const baseClass = clsx(\"inline-flex items-center gap-1\", \"border-b border-base-200\", \"dark:border-base-700\");\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div {...rest} role=\"tablist\" class={twMerge(baseClass, local.class)} style={local.style}>\n        {local.children}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nexport const Tabs = TabsInner as unknown as TabsComponent;\nTabs.Tab = TabsTabInner;\n"],
+  "mappings": "AAAA,SAAyC,eAAe,YAAY,kBAAkB;AACtF,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,eAAmC;AAUnC,MAAM,cAAc,cAAgC;AAWpD,SAAS,aAAa,OAAqB;AACzC,QAAM,MAAM,WAAW,WAAW;AAClC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,uGAAiC;AAE3D,QAAM,aAAa,MAAM,IAAI,MAAM,MAAM,MAAM;AAE/C,QAAM,cAAc,MAAM;AACxB,YAAQ,IAAI,KAAK,GAAG;AAAA,MAClB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,QAAM,YAAY,KAAK,mDAAmD,qBAAqB,QAAQ;AAEvG,QAAM,aAAa,MACjB,WAAW,IACP,KAAK,kDAAkD,+CAA+C,IACtG;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEN,QAAM,gBAAgB;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe,WAAW;AAAA,MAC1B,iBAAe,MAAM,YAAY;AAAA,MACjC,UAAU,MAAM,WAAW,KAAK;AAAA,MAChC,OAAO,QAAQ,WAAW,YAAY,GAAG,WAAW,GAAG,MAAM,YAAY,eAAe,MAAM,KAAK;AAAA,MACnG,SAAS,MAAM;AACb,YAAI,CAAC,MAAM,UAAU;AACnB,cAAI,OAAO,MAAM,KAAK;AAAA,QACxB;AAAA,MACF;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,YAAE,eAAe;AACjB,cAAI,CAAC,MAAM,UAAU;AACnB,gBAAI,OAAO,MAAM,KAAK;AAAA,UACxB;AAAA,QACF;AAAA,MACF;AAAA;AAAA,IAEC,MAAM;AAAA,EACT;AAEJ;AAkBA,MAAM,YAAwC,CAAC,UAAU;AACvD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,iBAAiB,QAAQ,SAAS,SAAS,UAAU,CAAC;AAExG,QAAM,CAAC,OAAO,QAAQ,IAAI,yBAA6C;AAAA,IACrE,OAAO,MAAM,MAAM;AAAA,IACnB,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,eAAiC;AAAA,IACrC;AAAA,IACA,QAAQ,CAAC,MAAc;AACrB,eAAS,CAAC;AAAA,IACZ;AAAA,IACA,MAAM,MAAM,MAAM;AAAA,EACpB;AAEA,QAAM,YAAY,KAAK,kCAAkC,4BAA4B,sBAAsB;AAE3G,SACE,oCAAC,YAAY,UAAZ,EAAqB,OAAO,gBAC3B,oCAAC,SAAK,GAAG,MAAM,MAAK,WAAU,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAG,OAAO,MAAM,SAChF,MAAM,QACT,CACF;AAEJ;AAEO,MAAM,OAAO;AACpB,KAAK,MAAM;",
+  "names": []
+}

package/dist/components/disclosure/dialogZIndex.js

@@ -0,0 +1,32 @@
+const BASE_Z = 2e3;
+const stack = [];
+function registerDialog(el) {
+  const idx = stack.indexOf(el);
+  if (idx >= 0) return;
+  stack.push(el);
+  el.style.zIndex = (BASE_Z + stack.length - 1).toString();
+}
+function unregisterDialog(el) {
+  const idx = stack.indexOf(el);
+  if (idx < 0) return;
+  stack.splice(idx, 1);
+  reindex();
+}
+function bringToFront(el) {
+  const idx = stack.indexOf(el);
+  if (idx < 0 || idx === stack.length - 1) return;
+  stack.splice(idx, 1);
+  stack.push(el);
+  reindex();
+}
+function reindex() {
+  for (let i = 0; i < stack.length; i++) {
+    stack[i].style.zIndex = (BASE_Z + i).toString();
+  }
+}
+export {
+  bringToFront,
+  registerDialog,
+  unregisterDialog
+};
+//# sourceMappingURL=dialogZIndex.js.map

package/dist/components/disclosure/dialogZIndex.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/disclosure/dialogZIndex.ts"],
+  "sourcesContent": ["/**\n * Dialog z-index \uB808\uC9C0\uC2A4\uD2B8\uB9AC\n *\n * \uC5F4\uB9B0 Dialog\uC758 z-index\uB97C \uAD00\uB9AC\uD558\uC5EC \uBB34\uD55C \uC99D\uAC00\uB97C \uBC29\uC9C0\uD55C\uB2E4.\n * \uAE30\uBCF8 \uC2DC\uC791\uAC12 2000 (tailwind z-modal\uACFC \uB3D9\uC77C), \uCD5C\uB300 \uC5F4\uB9B0 Dialog \uC218\uB9CC\uD07C\uB9CC \uC0AC\uC6A9.\n */\n\nconst BASE_Z = 2000;\n\n// \uC5F4\uB9B0 Dialog wrapper \uC694\uC18C \uBAA9\uB85D (\uC21C\uC11C = z-index \uC21C\uC11C)\nconst stack: HTMLElement[] = [];\n\n/** Dialog \uB4F1\uB85D \u2014 \uC2A4\uD0DD \uCD5C\uC0C1\uC704\uC5D0 \uCD94\uAC00\uD558\uACE0 z-index \uD560\uB2F9 */\nexport function registerDialog(el: HTMLElement): void {\n  const idx = stack.indexOf(el);\n  if (idx >= 0) return; // \uC774\uBBF8 \uB4F1\uB85D\uB428\n  stack.push(el);\n  el.style.zIndex = (BASE_Z + stack.length - 1).toString();\n}\n\n/** Dialog \uD574\uC81C \u2014 \uC2A4\uD0DD\uC5D0\uC11C \uC81C\uAC70\uD558\uACE0 \uB098\uBA38\uC9C0 \uC7AC\uC815\uB82C */\nexport function unregisterDialog(el: HTMLElement): void {\n  const idx = stack.indexOf(el);\n  if (idx < 0) return;\n  stack.splice(idx, 1);\n  reindex();\n}\n\n/** Dialog\uB97C \uCD5C\uC0C1\uC704\uB85C \uC62C\uB9BC (\uD3EC\uCEE4\uC2A4 \uC2DC) */\nexport function bringToFront(el: HTMLElement): void {\n  const idx = stack.indexOf(el);\n  if (idx < 0 || idx === stack.length - 1) return; // \uC774\uBBF8 \uCD5C\uC0C1\uC704\n  stack.splice(idx, 1);\n  stack.push(el);\n  reindex();\n}\n\n/** \uC2A4\uD0DD \uC21C\uC11C\uB300\uB85C z-index \uC7AC\uD560\uB2F9 */\nfunction reindex(): void {\n  for (let i = 0; i < stack.length; i++) {\n    stack[i].style.zIndex = (BASE_Z + i).toString();\n  }\n}\n"],
+  "mappings": "AAOA,MAAM,SAAS;AAGf,MAAM,QAAuB,CAAC;AAGvB,SAAS,eAAe,IAAuB;AACpD,QAAM,MAAM,MAAM,QAAQ,EAAE;AAC5B,MAAI,OAAO,EAAG;AACd,QAAM,KAAK,EAAE;AACb,KAAG,MAAM,UAAU,SAAS,MAAM,SAAS,GAAG,SAAS;AACzD;AAGO,SAAS,iBAAiB,IAAuB;AACtD,QAAM,MAAM,MAAM,QAAQ,EAAE;AAC5B,MAAI,MAAM,EAAG;AACb,QAAM,OAAO,KAAK,CAAC;AACnB,UAAQ;AACV;AAGO,SAAS,aAAa,IAAuB;AAClD,QAAM,MAAM,MAAM,QAAQ,EAAE;AAC5B,MAAI,MAAM,KAAK,QAAQ,MAAM,SAAS,EAAG;AACzC,QAAM,OAAO,KAAK,CAAC;AACnB,QAAM,KAAK,EAAE;AACb,UAAQ;AACV;AAGA,SAAS,UAAgB;AACvB,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,CAAC,EAAE,MAAM,UAAU,SAAS,GAAG,SAAS;AAAA,EAChD;AACF;",
+  "names": []
+}

package/dist/components/display/Alert.js

@@ -0,0 +1,18 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { themeTokens } from "../../styles/tokens.styles";
+const baseClass = clsx("block", "p-3", "rounded");
+const themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, t.light]));
+const Alert = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "theme"]);
+  const getClassName = () => {
+    const theme = local.theme ?? "base";
+    return twMerge(baseClass, themeClasses[theme], local.class);
+  };
+  return /* @__PURE__ */ React.createElement("div", { "data-alert": true, class: getClassName(), ...rest }, local.children);
+};
+export {
+  Alert
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/display/Alert.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/display/Alert.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { themeTokens, type SemanticTheme } from \"../../styles/tokens.styles\";\n\nexport type AlertTheme = SemanticTheme;\n\nexport interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  theme?: AlertTheme;\n}\n\nconst baseClass = clsx(\"block\", \"p-3\", \"rounded\");\n\nconst themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, t.light])) as Record<\n  AlertTheme,\n  string\n>;\n\nexport const Alert: ParentComponent<AlertProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"theme\"]);\n\n  const getClassName = () => {\n    const theme = local.theme ?? \"base\";\n    return twMerge(baseClass, themeClasses[theme], local.class);\n  };\n\n  return (\n    <div data-alert class={getClassName()} {...rest}>\n      {local.children}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,mBAAuC;AAQhD,MAAM,YAAY,KAAK,SAAS,OAAO,SAAS;AAEhD,MAAM,eAAe,OAAO,YAAY,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAKlG,MAAM,QAAqC,CAAC,UAAU;AAC3D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,eAAe,MAAM;AACzB,UAAM,QAAQ,MAAM,SAAS;AAC7B,WAAO,QAAQ,WAAW,aAAa,KAAK,GAAG,MAAM,KAAK;AAAA,EAC5D;AAEA,SACE,oCAAC,SAAI,cAAU,MAAC,OAAO,aAAa,GAAI,GAAG,QACxC,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/display/Barcode.js

@@ -0,0 +1,39 @@
+import { createEffect, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import bwipjs from "bwip-js/browser";
+const baseClass = clsx("inline-block");
+const Barcode = (props) => {
+  const [local, rest] = splitProps(props, ["type", "value", "class"]);
+  let containerRef;
+  createEffect(() => {
+    const value = local.value;
+    if (value == null || value === "") {
+      containerRef.innerHTML = "";
+      return;
+    }
+    try {
+      const svg = bwipjs.toSVG({
+        bcid: local.type,
+        text: value
+      });
+      containerRef.innerHTML = svg;
+      const svgEl = containerRef.querySelector("svg");
+      if (svgEl) {
+        const viewBox = svgEl.getAttribute("viewBox");
+        if (viewBox != null) {
+          const parts = viewBox.split(" ");
+          svgEl.setAttribute("width", parts[2]);
+          svgEl.setAttribute("height", parts[3]);
+        }
+      }
+    } catch {
+      containerRef.innerHTML = "";
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", { "data-barcode": true, ref: containerRef, class: twMerge(baseClass, local.class), ...rest });
+};
+export {
+  Barcode
+};
+//# sourceMappingURL=Barcode.js.map

package/dist/components/display/Barcode.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/display/Barcode.tsx"],
+  "sourcesContent": ["import { type Component, createEffect, splitProps, type JSX } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport bwipjs from \"bwip-js/browser\";\n\nexport type BarcodeType =\n  | \"auspost\"\n  | \"azteccode\"\n  | \"azteccodecompact\"\n  | \"aztecrune\"\n  | \"bc412\"\n  | \"channelcode\"\n  | \"codablockf\"\n  | \"code11\"\n  | \"code128\"\n  | \"code16k\"\n  | \"code2of5\"\n  | \"code32\"\n  | \"code39\"\n  | \"code39ext\"\n  | \"code49\"\n  | \"code93\"\n  | \"code93ext\"\n  | \"codeone\"\n  | \"coop2of5\"\n  | \"daft\"\n  | \"databarexpanded\"\n  | \"databarexpandedcomposite\"\n  | \"databarexpandedstacked\"\n  | \"databarexpandedstackedcomposite\"\n  | \"databarlimited\"\n  | \"databarlimitedcomposite\"\n  | \"databaromni\"\n  | \"databaromnicomposite\"\n  | \"databarstacked\"\n  | \"databarstackedcomposite\"\n  | \"databarstackedomni\"\n  | \"databarstackedomnicomposite\"\n  | \"databartruncated\"\n  | \"databartruncatedcomposite\"\n  | \"datalogic2of5\"\n  | \"datamatrix\"\n  | \"datamatrixrectangular\"\n  | \"datamatrixrectangularextension\"\n  | \"dotcode\"\n  | \"ean13\"\n  | \"ean13composite\"\n  | \"ean14\"\n  | \"ean2\"\n  | \"ean5\"\n  | \"ean8\"\n  | \"ean8composite\"\n  | \"flattermarken\"\n  | \"gs1-128\"\n  | \"gs1-128composite\"\n  | \"gs1-cc\"\n  | \"gs1datamatrix\"\n  | \"gs1datamatrixrectangular\"\n  | \"gs1dldatamatrix\"\n  | \"gs1dlqrcode\"\n  | \"gs1dotcode\"\n  | \"gs1northamericancoupon\"\n  | \"gs1qrcode\"\n  | \"hanxin\"\n  | \"hibcazteccode\"\n  | \"hibccodablockf\"\n  | \"hibccode128\"\n  | \"hibccode39\"\n  | \"hibcdatamatrix\"\n  | \"hibcdatamatrixrectangular\"\n  | \"hibcmicropdf417\"\n  | \"hibcpdf417\"\n  | \"hibcqrcode\"\n  | \"iata2of5\"\n  | \"identcode\"\n  | \"industrial2of5\"\n  | \"interleaved2of5\"\n  | \"isbn\"\n  | \"ismn\"\n  | \"issn\"\n  | \"itf14\"\n  | \"japanpost\"\n  | \"kix\"\n  | \"leitcode\"\n  | \"mailmark\"\n  | \"mands\"\n  | \"matrix2of5\"\n  | \"maxicode\"\n  | \"micropdf417\"\n  | \"microqrcode\"\n  | \"msi\"\n  | \"onecode\"\n  | \"pdf417\"\n  | \"pdf417compact\"\n  | \"pharmacode\"\n  | \"pharmacode2\"\n  | \"planet\"\n  | \"plessey\"\n  | \"posicode\"\n  | \"postnet\"\n  | \"pzn\"\n  | \"qrcode\"\n  | \"rationalizedCodabar\"\n  | \"raw\"\n  | \"rectangularmicroqrcode\"\n  | \"royalmail\"\n  | \"sscc18\"\n  | \"swissqrcode\"\n  | \"symbol\"\n  | \"telepen\"\n  | \"telepennumeric\"\n  | \"ultracode\"\n  | \"upca\"\n  | \"upcacomposite\"\n  | \"upce\"\n  | \"upcecomposite\";\n\nexport interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  type: BarcodeType;\n  value?: string;\n}\n\nconst baseClass = clsx(\"inline-block\");\n\nexport const Barcode: Component<BarcodeProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"type\", \"value\", \"class\"]);\n  let containerRef!: HTMLDivElement;\n\n  createEffect(() => {\n    const value = local.value;\n    if (value == null || value === \"\") {\n      containerRef.innerHTML = \"\";\n      return;\n    }\n\n    try {\n      const svg = bwipjs.toSVG({\n        bcid: local.type,\n        text: value,\n      });\n      containerRef.innerHTML = svg;\n\n      const svgEl = containerRef.querySelector(\"svg\");\n      if (svgEl) {\n        const viewBox = svgEl.getAttribute(\"viewBox\");\n        if (viewBox != null) {\n          const parts = viewBox.split(\" \");\n          svgEl.setAttribute(\"width\", parts[2]);\n          svgEl.setAttribute(\"height\", parts[3]);\n        }\n      }\n    } catch {\n      containerRef.innerHTML = \"\";\n    }\n  });\n\n  return <div data-barcode ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;\n};\n"],
+  "mappings": "AAAA,SAAyB,cAAc,kBAA4B;AACnE,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,OAAO,YAAY;AAuHnB,MAAM,YAAY,KAAK,cAAc;AAE9B,MAAM,UAAmC,CAAC,UAAU;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,QAAQ,SAAS,OAAO,CAAC;AAClE,MAAI;AAEJ,eAAa,MAAM;AACjB,UAAM,QAAQ,MAAM;AACpB,QAAI,SAAS,QAAQ,UAAU,IAAI;AACjC,mBAAa,YAAY;AACzB;AAAA,IACF;AAEA,QAAI;AACF,YAAM,MAAM,OAAO,MAAM;AAAA,QACvB,MAAM,MAAM;AAAA,QACZ,MAAM;AAAA,MACR,CAAC;AACD,mBAAa,YAAY;AAEzB,YAAM,QAAQ,aAAa,cAAc,KAAK;AAC9C,UAAI,OAAO;AACT,cAAM,UAAU,MAAM,aAAa,SAAS;AAC5C,YAAI,WAAW,MAAM;AACnB,gBAAM,QAAQ,QAAQ,MAAM,GAAG;AAC/B,gBAAM,aAAa,SAAS,MAAM,CAAC,CAAC;AACpC,gBAAM,aAAa,UAAU,MAAM,CAAC,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IACF,QAAQ;AACN,mBAAa,YAAY;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO,oCAAC,SAAI,gBAAY,MAAC,KAAK,cAAc,OAAO,QAAQ,WAAW,MAAM,KAAK,GAAI,GAAG,MAAM;AAChG;",
+  "names": []
+}

package/dist/components/display/Card.js

@@ -0,0 +1,21 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import "./Card.css";
+const baseClass = clsx(
+  "block",
+  "bg-white dark:bg-base-800",
+  "rounded-lg",
+  "shadow focus-within:shadow-md hover:shadow-md",
+  "dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30",
+  "transition-shadow duration-300",
+  "animate-card-in"
+);
+const Card = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  return /* @__PURE__ */ React.createElement("div", { "data-card": true, class: twMerge(baseClass, local.class), ...rest }, local.children);
+};
+export {
+  Card
+};
+//# sourceMappingURL=Card.js.map