tempest-react-sdk 0.23.0 → 0.24.0

package/dist/components/Drawer/Drawer.js

@@ -1,96 +1,79 @@
-import { jsxs as i, Fragment as N, jsx as r } from "react/jsx-runtime";
-import { useEffect as g } from "react";
-import { createPortal as x } from "react-dom";
-import { cn as f } from "../../utils/cn.js";
-import { useBreakpoint as L } from "../../hooks/use-breakpoint.js";
-import e from "./Drawer.module.css.js";
-function K({
-  open: n,
-  onClose: o,
-  placement: u = "right",
-  title: a,
-  children: h,
-  footer: d,
-  closeOnBackdrop: p = !0,
-  closeOnEsc: l = !0,
-  hideCloseButton: s = !1,
-  className: y,
-  mobilePlacement: c,
-  showHandle: v = !1
-}) {
-  const { isMobile: w } = L(), t = w && c ? c : u;
-  return g(() => {
-    if (!n) return;
-    const b = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const m = (k) => {
-      l && k.key === "Escape" && o();
-    };
-    return window.addEventListener("keydown", m), () => {
-      document.body.style.overflow = b, window.removeEventListener("keydown", m);
-    };
-  }, [n, l, o]), !n || typeof document > "u" ? null : x(
-    /* @__PURE__ */ i(N, { children: [
-      /* @__PURE__ */ r(
-        "div",
-        {
-          className: e.overlay,
-          onClick: () => {
-            p && o();
-          }
-        }
-      ),
-      /* @__PURE__ */ i(
-        "aside",
-        {
-          role: "dialog",
-          "aria-modal": "true",
-          className: f(e.panel, e[t], y),
-          children: [
-            v && (t === "bottom" || t === "top") && /* @__PURE__ */ r(
-              "div",
-              {
-                className: f(
-                  e.handle,
-                  t === "top" && e.handleTop
-                ),
-                "aria-hidden": !0
-              }
-            ),
-            (a || !s) && /* @__PURE__ */ i("header", { className: e.header, children: [
-              /* @__PURE__ */ r("h3", { className: e.title, children: a }),
-              !s && /* @__PURE__ */ r(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Fechar",
-                  className: e.close,
-                  onClick: o,
-                  children: /* @__PURE__ */ r(E, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ r("div", { className: e.body, children: h }),
-            d && /* @__PURE__ */ r("footer", { className: e.footer, children: d })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
+import { cn as e } from "../../utils/cn.js";
+import { useBreakpoint as t } from "../../hooks/use-breakpoint.js";
+import n from "./Drawer.module.js";
+import { useEffect as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/components/Drawer/Drawer.tsx
+function c({ open: c, onClose: u, placement: d = "right", title: f, children: p, footer: m, closeOnBackdrop: h = !0, closeOnEsc: g = !0, hideCloseButton: _ = !1, className: v, mobilePlacement: y, showHandle: b = !1 }) {
+	let { isMobile: x } = t(), S = x && y ? y : d;
+	return r(() => {
+		if (!c) return;
+		let e = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		let t = (e) => {
+			g && e.key === "Escape" && u();
+		};
+		return window.addEventListener("keydown", t), () => {
+			document.body.style.overflow = e, window.removeEventListener("keydown", t);
+		};
+	}, [
+		c,
+		g,
+		u
+	]), !c || typeof document > "u" ? null : s(/* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
+		className: n.overlay,
+		onClick: () => {
+			h && u();
+		}
+	}), /* @__PURE__ */ o("aside", {
+		role: "dialog",
+		"aria-modal": "true",
+		className: e(n.panel, n[S], v),
+		children: [
+			b && (S === "bottom" || S === "top") && /* @__PURE__ */ a("div", {
+				className: e(n.handle, S === "top" && n.handleTop),
+				"aria-hidden": !0
+			}),
+			(f || !_) && /* @__PURE__ */ o("header", {
+				className: n.header,
+				children: [/* @__PURE__ */ a("h3", {
+					className: n.title,
+					children: f
+				}), !_ && /* @__PURE__ */ a("button", {
+					type: "button",
+					"aria-label": "Fechar",
+					className: n.close,
+					onClick: u,
+					children: /* @__PURE__ */ a(l, {})
+				})]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: n.body,
+				children: p
+			}),
+			m && /* @__PURE__ */ a("footer", {
+				className: n.footer,
+				children: m
+			})
+		]
+	})] }), document.body);
 }
-function E() {
-  return /* @__PURE__ */ r("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ r(
-    "path",
-    {
-      d: "M6 6l12 12M6 18L18 6",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round"
-    }
-  ) });
+function l() {
+	return /* @__PURE__ */ a("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		children: /* @__PURE__ */ a("path", {
+			d: "M6 6l12 12M6 18L18 6",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})
+	});
 }
-export {
-  K as Drawer
-};
-//# sourceMappingURL=Drawer.js.map
+//#endregion
+export { c as Drawer };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    if (!open || typeof document === \"undefined\") return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        document.body,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"names":["Drawer","open","onClose","placement","title","children","footer","closeOnBackdrop","closeOnEsc","hideCloseButton","className","mobilePlacement","showHandle","isMobile","useBreakpoint","effectivePlacement","useEffect","previousOverflow","handleKey","event","createPortal","jsxs","Fragment","jsx","styles","cn","CloseIcon"],"mappings":";;;;;;AAkCO,SAASA,EAAO;AAAA,EACnB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,GAAgB;AACZ,QAAM,EAAE,UAAAC,EAAA,IAAaC,EAAA,GACfC,IACFF,KAAYF,IAAkBA,IAAkBR;AAgBpD,SAdAa,EAAU,MAAM;AACZ,QAAI,CAACf,EAAM;AACX,UAAMgB,IAAmB,SAAS,KAAK,MAAM;AAC7C,aAAS,KAAK,MAAM,WAAW;AAC/B,UAAMC,IAAY,CAACC,MAA+B;AAC9C,MAAIX,KAAcW,EAAM,QAAQ,YAAUjB,EAAA;AAAA,IAC9C;AACA,kBAAO,iBAAiB,WAAWgB,CAAS,GACrC,MAAM;AACT,eAAS,KAAK,MAAM,WAAWD,GAC/B,OAAO,oBAAoB,WAAWC,CAAS;AAAA,IACnD;AAAA,EACJ,GAAG,CAACjB,GAAMO,GAAYN,CAAO,CAAC,GAE1B,CAACD,KAAQ,OAAO,WAAa,MAAoB,OAE9CmB;AAAA,IACH,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,SAAS,MAAM;AACX,YAAIjB,KAAiBL,EAAA;AAAA,UACzB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,cAAW;AAAA,UACX,WAAWI,EAAGD,EAAO,OAAOA,EAAOT,CAAkB,GAAGL,CAAS;AAAA,UAEhE,UAAA;AAAA,YAAAE,MACIG,MAAuB,YAAYA,MAAuB,UACvD,gBAAAQ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAWE;AAAA,kBACPD,EAAO;AAAA,kBACPT,MAAuB,SAASS,EAAO;AAAA,gBAAA;AAAA,gBAE3C,eAAW;AAAA,cAAA;AAAA,YAAA;AAAA,aAGrBpB,KAAS,CAACK,wBACP,UAAA,EAAO,WAAWe,EAAO,QACtB,UAAA;AAAA,cAAA,gBAAAD,EAAC,MAAA,EAAG,WAAWC,EAAO,OAAQ,UAAApB,GAAM;AAAA,cACnC,CAACK,KACE,gBAAAc;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAK;AAAA,kBACL,cAAW;AAAA,kBACX,WAAWC,EAAO;AAAA,kBAClB,SAAStB;AAAA,kBAET,4BAACwB,GAAA,CAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACf,GAER;AAAA,YAEJ,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAO,MAAO,UAAAnB,GAAS;AAAA,YACtCC,KAAU,gBAAAiB,EAAC,UAAA,EAAO,WAAWC,EAAO,QAAS,UAAAlB,EAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzD,GACJ;AAAA,IACA,SAAS;AAAA,EAAA;AAEjB;AAEA,SAASoB,IAAY;AACjB,SACI,gBAAAH,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACjD,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,IAAA;AAAA,EAAA,GAEtB;AAER;"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    if (!open || typeof document === \"undefined\") return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        document.body,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;;;AAkCA,SAAgB,EAAO,EACnB,SACA,YACA,eAAY,SACZ,UACA,aACA,WACA,qBAAkB,IAClB,gBAAa,IACb,qBAAkB,IAClB,cACA,oBACA,gBAAa,MACD;CACZ,IAAM,EAAE,gBAAa,EAAc,GAC7B,IACF,KAAY,IAAkB,IAAkB;CAkBpD,OAhBA,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAC7C,SAAS,KAAK,MAAM,WAAW;EAC/B,IAAM,KAAa,MAA+B;GAC9C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ;EACtD;EAEA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B;GAET,AADA,SAAS,KAAK,MAAM,WAAW,GAC/B,OAAO,oBAAoB,WAAW,CAAS;EACnD;CACJ,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC,GAE1B,CAAC,KAAQ,OAAO,WAAa,MAAoB,OAE9C,EACH,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;CACH,CAAA,GACD,kBAAC,SAAD;EACI,MAAK;EACL,cAAW;EACX,WAAW,EAAG,EAAO,OAAO,EAAO,IAAqB,CAAS;YAHrE;GAKK,MACI,MAAuB,YAAY,MAAuB,UACvD,kBAAC,OAAD;IACI,WAAW,EACP,EAAO,QACP,MAAuB,SAAS,EAAO,SAC3C;IACA,eAAA;GACH,CAAA;IAEP,KAAS,CAAC,MACR,kBAAC,UAAD;IAAQ,WAAW,EAAO;cAA1B,CACI,kBAAC,MAAD;KAAI,WAAW,EAAO;eAAQ;IAAU,CAAA,GACvC,CAAC,KACE,kBAAC,UAAD;KACI,MAAK;KACL,cAAW;KACX,WAAW,EAAO;KAClB,SAAS;eAET,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,CAER;;GAEZ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO;GAAc,CAAA;GAC3C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;cAAS;GAAe,CAAA;EAC1D;GACT,EAAA,CAAA,GACF,SAAS,IACb;AACJ;AAEA,SAAS,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACjD,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}

package/dist/components/Drawer/Drawer.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_overlay_hcG1G`,t=`tempest_tempest-drawer-overlay_XFbxY`,n=`tempest_panel_wUX0N`,r=`tempest_right_-oX-6`,i=`tempest_tempest-drawer-in-right_pWYHv`,a=`tempest_left_xi3nD`,o=`tempest_tempest-drawer-in-left_o7JSb`,s=`tempest_top_7rGCn`,c=`tempest_tempest-drawer-in-top_kn6AF`,l=`tempest_bottom_zd-25`,u=`tempest_tempest-drawer-in-bottom_0x3u7`,d=`tempest_handle_5B-TB`,f=`tempest_handleTop_7aMf-`,p=`tempest_header_sYoP1`,m=`tempest_title_LqUOu`,h=`tempest_close_tYPhU`,g=`tempest_body_aV9FG`,_=`tempest_footer_AuvUP`,v={overlay:e,tempestDrawerOverlay:t,panel:n,right:r,tempestDrawerInRight:i,left:a,tempestDrawerInLeft:o,top:s,tempestDrawerInTop:c,bottom:l,tempestDrawerInBottom:u,handle:d,handleTop:f,header:p,title:m,close:h,body:g,footer:_};exports.body=g,exports.bottom=l,exports.close=h,exports.default=v,exports.footer=_,exports.handle=d,exports.handleTop=f,exports.header=p,exports.left=a,exports.overlay=e,exports.panel=n,exports.right=r,exports.tempestDrawerInBottom=u,exports.tempestDrawerInLeft=o,exports.tempestDrawerInRight=i,exports.tempestDrawerInTop=c,exports.tempestDrawerOverlay=t,exports.title=m,exports.top=s;
+//# sourceMappingURL=Drawer.module.cjs.map

package/dist/components/Drawer/Drawer.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.module.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.5);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    z-index: var(--tempest-z-modal);\n    animation: tempest-drawer-overlay var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.panel {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    box-shadow: var(--tempest-shadow-xl);\n    display: flex;\n    flex-direction: column;\n    z-index: calc(var(--tempest-z-modal) + 1);\n    animation-duration: var(--tempest-duration-slow);\n    animation-timing-function: var(--tempest-ease-emphasized);\n    animation-fill-mode: both;\n}\n\n.right {\n    right: 0;\n    width: min(420px, 92vw);\n    padding-right: var(--tempest-safe-area-right);\n    animation-name: tempest-drawer-in-right;\n}\n\n.left {\n    left: 0;\n    width: min(420px, 92vw);\n    padding-left: var(--tempest-safe-area-left);\n    animation-name: tempest-drawer-in-left;\n}\n\n.top {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: auto;\n    height: min(70vh, 480px);\n    height: min(70dvh, 480px);\n    padding-top: var(--tempest-safe-area-top);\n    border-radius: 0 0 var(--tempest-radius-xl) var(--tempest-radius-xl);\n    animation-name: tempest-drawer-in-top;\n}\n\n.bottom {\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: auto;\n    height: min(70vh, 480px);\n    height: min(70dvh, 480px);\n    padding-bottom: var(--tempest-safe-area-bottom);\n    border-radius: var(--tempest-radius-xl) var(--tempest-radius-xl) 0 0;\n    animation-name: tempest-drawer-in-bottom;\n}\n\n/* Bottom-sheet drag handle (4px pill at top center). */\n.handle {\n    position: relative;\n    width: 36px;\n    height: 4px;\n    margin: var(--tempest-space-2) auto;\n    background-color: var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-full);\n    flex-shrink: 0;\n}\n\n.handleTop {\n    margin-top: auto;\n    margin-bottom: var(--tempest-space-2);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n}\n\n.close {\n    background: none;\n    border: none;\n    color: var(--tempest-text-muted);\n    padding: var(--tempest-space-1);\n    border-radius: var(--tempest-radius-sm);\n    display: flex;\n    align-items: center;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .close:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.body {\n    padding: var(--tempest-space-5);\n    overflow-y: auto;\n    flex: 1;\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n@keyframes tempest-drawer-overlay {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-drawer-in-right {\n    from {\n        transform: translateX(100%);\n    }\n    to {\n        transform: translateX(0);\n    }\n}\n\n@keyframes tempest-drawer-in-left {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(0);\n    }\n}\n\n@keyframes tempest-drawer-in-top {\n    from {\n        transform: translateY(-100%);\n    }\n    to {\n        transform: translateY(0);\n    }\n}\n\n@keyframes tempest-drawer-in-bottom {\n    from {\n        transform: translateY(100%);\n    }\n    to {\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel,\n    .overlay {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Drawer/Drawer.module.js

@@ -0,0 +1,25 @@
+//#region src/components/Drawer/Drawer.module.css
+var e = "tempest_overlay_hcG1G", t = "tempest_tempest-drawer-overlay_XFbxY", n = "tempest_panel_wUX0N", r = "tempest_right_-oX-6", i = "tempest_tempest-drawer-in-right_pWYHv", a = "tempest_left_xi3nD", o = "tempest_tempest-drawer-in-left_o7JSb", s = "tempest_top_7rGCn", c = "tempest_tempest-drawer-in-top_kn6AF", l = "tempest_bottom_zd-25", u = "tempest_tempest-drawer-in-bottom_0x3u7", d = "tempest_handle_5B-TB", f = "tempest_handleTop_7aMf-", p = "tempest_header_sYoP1", m = "tempest_title_LqUOu", h = "tempest_close_tYPhU", g = "tempest_body_aV9FG", _ = "tempest_footer_AuvUP", v = {
+	overlay: e,
+	tempestDrawerOverlay: t,
+	panel: n,
+	right: r,
+	tempestDrawerInRight: i,
+	left: a,
+	tempestDrawerInLeft: o,
+	top: s,
+	tempestDrawerInTop: c,
+	bottom: l,
+	tempestDrawerInBottom: u,
+	handle: d,
+	handleTop: f,
+	header: p,
+	title: m,
+	close: h,
+	body: g,
+	footer: _
+};
+//#endregion
+export { g as body, l as bottom, h as close, v as default, _ as footer, d as handle, f as handleTop, p as header, a as left, e as overlay, n as panel, r as right, u as tempestDrawerInBottom, o as tempestDrawerInLeft, i as tempestDrawerInRight, c as tempestDrawerInTop, t as tempestDrawerOverlay, m as title, s as top };
+
+//# sourceMappingURL=Drawer.module.js.map

package/dist/components/Drawer/Drawer.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.module.js","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.5);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    z-index: var(--tempest-z-modal);\n    animation: tempest-drawer-overlay var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.panel {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    box-shadow: var(--tempest-shadow-xl);\n    display: flex;\n    flex-direction: column;\n    z-index: calc(var(--tempest-z-modal) + 1);\n    animation-duration: var(--tempest-duration-slow);\n    animation-timing-function: var(--tempest-ease-emphasized);\n    animation-fill-mode: both;\n}\n\n.right {\n    right: 0;\n    width: min(420px, 92vw);\n    padding-right: var(--tempest-safe-area-right);\n    animation-name: tempest-drawer-in-right;\n}\n\n.left {\n    left: 0;\n    width: min(420px, 92vw);\n    padding-left: var(--tempest-safe-area-left);\n    animation-name: tempest-drawer-in-left;\n}\n\n.top {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: auto;\n    height: min(70vh, 480px);\n    height: min(70dvh, 480px);\n    padding-top: var(--tempest-safe-area-top);\n    border-radius: 0 0 var(--tempest-radius-xl) var(--tempest-radius-xl);\n    animation-name: tempest-drawer-in-top;\n}\n\n.bottom {\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: auto;\n    height: min(70vh, 480px);\n    height: min(70dvh, 480px);\n    padding-bottom: var(--tempest-safe-area-bottom);\n    border-radius: var(--tempest-radius-xl) var(--tempest-radius-xl) 0 0;\n    animation-name: tempest-drawer-in-bottom;\n}\n\n/* Bottom-sheet drag handle (4px pill at top center). */\n.handle {\n    position: relative;\n    width: 36px;\n    height: 4px;\n    margin: var(--tempest-space-2) auto;\n    background-color: var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-full);\n    flex-shrink: 0;\n}\n\n.handleTop {\n    margin-top: auto;\n    margin-bottom: var(--tempest-space-2);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n}\n\n.close {\n    background: none;\n    border: none;\n    color: var(--tempest-text-muted);\n    padding: var(--tempest-space-1);\n    border-radius: var(--tempest-radius-sm);\n    display: flex;\n    align-items: center;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .close:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.body {\n    padding: var(--tempest-space-5);\n    overflow-y: auto;\n    flex: 1;\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n@keyframes tempest-drawer-overlay {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-drawer-in-right {\n    from {\n        transform: translateX(100%);\n    }\n    to {\n        transform: translateX(0);\n    }\n}\n\n@keyframes tempest-drawer-in-left {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(0);\n    }\n}\n\n@keyframes tempest-drawer-in-top {\n    from {\n        transform: translateY(-100%);\n    }\n    to {\n        transform: translateY(0);\n    }\n}\n\n@keyframes tempest-drawer-in-bottom {\n    from {\n        transform: translateY(100%);\n    }\n    to {\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel,\n    .overlay {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/DropdownMenu/DropdownMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("react"),k=require("../../utils/cn.cjs"),t=require("./DropdownMenu.module.css.cjs");function C(l){switch(l){case"bottom-end":return t.default.bottomEnd;case"top-start":return t.default.topStart;case"top-end":return t.default.topEnd;default:return t.default.bottomStart}}function D({trigger:l,items:b,placement:j="bottom-start",className:v}){const[u,h]=a.useState(!1),[d,i]=a.useState(-1),x=a.useId(),p=a.useRef(null),m=a.useRef([]),r=b.map((e,n)=>e.type==="item"&&!e.disabled?n:-1).filter(e=>e!==-1),f=a.useCallback(()=>{h(!1),i(-1)},[]);a.useEffect(()=>{if(!u)return;const e=o=>{if(o.key==="Escape"){f();return}if(o.key==="ArrowDown"){o.preventDefault();const w=r.indexOf(d),c=r[(w+1)%r.length]??-1;i(c),m.current[c]?.focus()}if(o.key==="ArrowUp"){o.preventDefault();const w=r.indexOf(d),c=r[(w-1+r.length)%r.length]??-1;i(c),m.current[c]?.focus()}},n=o=>{p.current&&!p.current.contains(o.target)&&f()};return window.addEventListener("keydown",e),window.addEventListener("mousedown",n),()=>{window.removeEventListener("keydown",e),window.removeEventListener("mousedown",n)}},[u,d,r,f]);const E=e=>{l.props.onClick?.(e),h(n=>!n)},g={...l,props:{...l.props,onClick:E,"aria-expanded":u,"aria-controls":x,"aria-haspopup":"menu"}},S=e=>{e.onSelect(),f()};return s.jsxs("span",{ref:p,className:t.default.root,children:[g,u&&s.jsx("ul",{id:x,role:"menu",className:k.cn(t.default.menu,C(j),v),children:b.map((e,n)=>e.type==="separator"?s.jsx("li",{role:"separator",className:t.default.separator,"aria-hidden":!0},e.id):e.type==="label"?s.jsx("li",{role:"presentation",className:t.default.label,children:e.label},e.id):s.jsx("li",{role:"none",children:s.jsxs("button",{ref:o=>{m.current[n]=o},type:"button",role:"menuitem",className:k.cn(t.default.item,e.danger&&t.default.danger,d===n&&t.default.active),disabled:e.disabled,onClick:()=>S(e),onMouseEnter:()=>i(n),children:[e.icon&&s.jsx("span",{"aria-hidden":!0,children:e.icon}),e.label]})},e.id))})]})}exports.DropdownMenu=D;
-//# sourceMappingURL=DropdownMenu.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./DropdownMenu.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e){switch(e){case`bottom-end`:return t.default.bottomEnd;case`top-start`:return t.default.topStart;case`top-end`:return t.default.topEnd;default:return t.default.bottomStart}}function a({trigger:a,items:o,placement:s=`bottom-start`,className:c}){let[l,u]=(0,n.useState)(!1),[d,f]=(0,n.useState)(-1),p=(0,n.useId)(),m=(0,n.useRef)(null),h=(0,n.useRef)([]),g=o.map((e,t)=>e.type===`item`&&!e.disabled?t:-1).filter(e=>e!==-1),_=(0,n.useCallback)(()=>{u(!1),f(-1)},[]);(0,n.useEffect)(()=>{if(!l)return;let e=e=>{if(e.key===`Escape`){_();return}if(e.key===`ArrowDown`){e.preventDefault();let t=g.indexOf(d),n=g[(t+1)%g.length]??-1;f(n),h.current[n]?.focus()}if(e.key===`ArrowUp`){e.preventDefault();let t=g.indexOf(d),n=g[(t-1+g.length)%g.length]??-1;f(n),h.current[n]?.focus()}},t=e=>{m.current&&!m.current.contains(e.target)&&_()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t)}},[l,d,g,_]);let v=e=>{a.props.onClick?.(e),u(e=>!e)},y={...a,props:{...a.props,onClick:v,"aria-expanded":l,"aria-controls":p,"aria-haspopup":`menu`}},b=e=>{e.onSelect(),_()};return(0,r.jsxs)(`span`,{ref:m,className:t.default.root,children:[y,l&&(0,r.jsx)(`ul`,{id:p,role:`menu`,className:e.cn(t.default.menu,i(s),c),children:o.map((n,i)=>n.type===`separator`?(0,r.jsx)(`li`,{role:`separator`,className:t.default.separator,"aria-hidden":!0},n.id):n.type===`label`?(0,r.jsx)(`li`,{role:`presentation`,className:t.default.label,children:n.label},n.id):(0,r.jsx)(`li`,{role:`none`,children:(0,r.jsxs)(`button`,{ref:e=>{h.current[i]=e},type:`button`,role:`menuitem`,className:e.cn(t.default.item,n.danger&&t.default.danger,d===i&&t.default.active),disabled:n.disabled,onClick:()=>b(n),onMouseEnter:()=>f(i),children:[n.icon&&(0,r.jsx)(`span`,{"aria-hidden":!0,children:n.icon}),n.label]})},n.id))})]})}exports.DropdownMenu=a;
+//# sourceMappingURL=DropdownMenu.cjs.map

package/dist/components/DropdownMenu/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./DropdownMenu.module.css\";\n\nexport type DropdownMenuPlacement = \"bottom-start\" | \"bottom-end\" | \"top-start\" | \"top-end\";\n\nexport type DropdownMenuEntry =\n    | {\n          type: \"item\";\n          id: string;\n          label: ReactNode;\n          icon?: ReactNode;\n          danger?: boolean;\n          disabled?: boolean;\n          onSelect: () => void;\n      }\n    | { type: \"separator\"; id: string }\n    | { type: \"label\"; id: string; label: ReactNode };\n\nexport interface DropdownMenuProps {\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n        \"aria-haspopup\"?: boolean | \"menu\";\n    }>;\n    items: DropdownMenuEntry[];\n    placement?: DropdownMenuPlacement;\n    className?: string;\n}\n\nfunction placementClass(placement: DropdownMenuPlacement): string {\n    switch (placement) {\n        case \"bottom-end\":\n            return styles.bottomEnd;\n        case \"top-start\":\n            return styles.topStart;\n        case \"top-end\":\n            return styles.topEnd;\n        case \"bottom-start\":\n        default:\n            return styles.bottomStart;\n    }\n}\n\n/**\n * Dropdown menu — list of selectable actions anchored to a trigger.\n *\n * - Toggle on trigger click.\n * - Close on outside click / Escape / item selection.\n * - Arrow keys navigate, Enter activates focused item.\n */\nexport function DropdownMenu({\n    trigger,\n    items,\n    placement = \"bottom-start\",\n    className,\n}: DropdownMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const selectableIndexes = items\n        .map((entry, index) => (entry.type === \"item\" && !entry.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                return;\n            }\n            if (event.key === \"ArrowDown\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const next = selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1;\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowUp\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const prev =\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1;\n                setActiveIndex(prev);\n                itemRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.current.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [open, activeIndex, selectableIndexes, close]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen((prev) => !prev);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": open,\n            \"aria-controls\": id,\n            \"aria-haspopup\": \"menu\" as const,\n        },\n    } as ReactElement;\n\n    const handleSelect = (entry: Extract<DropdownMenuEntry, { type: \"item\" }>): void => {\n        entry.onSelect();\n        close();\n    };\n\n    return (\n        <span ref={rootRef} className={styles.root}>\n            {triggerClone}\n            {open && (\n                <ul\n                    id={id}\n                    role=\"menu\"\n                    className={cn(styles.menu, placementClass(placement), className)}\n                >\n                    {items.map((entry, index) => {\n                        if (entry.type === \"separator\") {\n                            return (\n                                <li\n                                    key={entry.id}\n                                    role=\"separator\"\n                                    className={styles.separator}\n                                    aria-hidden\n                                />\n                            );\n                        }\n                        if (entry.type === \"label\") {\n                            return (\n                                <li key={entry.id} role=\"presentation\" className={styles.label}>\n                                    {entry.label}\n                                </li>\n                            );\n                        }\n                        return (\n                            <li key={entry.id} role=\"none\">\n                                <button\n                                    ref={(el) => {\n                                        itemRefs.current[index] = el;\n                                    }}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    className={cn(\n                                        styles.item,\n                                        entry.danger && styles.danger,\n                                        activeIndex === index && styles.active,\n                                    )}\n                                    disabled={entry.disabled}\n                                    onClick={() => handleSelect(entry)}\n                                    onMouseEnter={() => setActiveIndex(index)}\n                                >\n                                    {entry.icon && <span aria-hidden>{entry.icon}</span>}\n                                    {entry.label}\n                                </button>\n                            </li>\n                        );\n                    })}\n                </ul>\n            )}\n        </span>\n    );\n}\n"],"names":["placementClass","placement","styles","DropdownMenu","trigger","items","className","open","setOpen","useState","activeIndex","setActiveIndex","id","useId","rootRef","useRef","itemRefs","selectableIndexes","entry","index","i","close","useCallback","useEffect","onKey","event","current","next","prev","onDown","handleTriggerClick","triggerClone","handleSelect","jsx","cn","jsxs","el"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./DropdownMenu.module.css\";\n\nexport type DropdownMenuPlacement = \"bottom-start\" | \"bottom-end\" | \"top-start\" | \"top-end\";\n\nexport type DropdownMenuEntry =\n    | {\n          type: \"item\";\n          id: string;\n          label: ReactNode;\n          icon?: ReactNode;\n          danger?: boolean;\n          disabled?: boolean;\n          onSelect: () => void;\n      }\n    | { type: \"separator\"; id: string }\n    | { type: \"label\"; id: string; label: ReactNode };\n\nexport interface DropdownMenuProps {\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n        \"aria-haspopup\"?: boolean | \"menu\";\n    }>;\n    items: DropdownMenuEntry[];\n    placement?: DropdownMenuPlacement;\n    className?: string;\n}\n\nfunction placementClass(placement: DropdownMenuPlacement): string {\n    switch (placement) {\n        case \"bottom-end\":\n            return styles.bottomEnd;\n        case \"top-start\":\n            return styles.topStart;\n        case \"top-end\":\n            return styles.topEnd;\n        case \"bottom-start\":\n        default:\n            return styles.bottomStart;\n    }\n}\n\n/**\n * Dropdown menu — list of selectable actions anchored to a trigger.\n *\n * - Toggle on trigger click.\n * - Close on outside click / Escape / item selection.\n * - Arrow keys navigate, Enter activates focused item.\n */\nexport function DropdownMenu({\n    trigger,\n    items,\n    placement = \"bottom-start\",\n    className,\n}: DropdownMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const selectableIndexes = items\n        .map((entry, index) => (entry.type === \"item\" && !entry.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                return;\n            }\n            if (event.key === \"ArrowDown\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const next = selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1;\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowUp\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const prev =\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1;\n                setActiveIndex(prev);\n                itemRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.current.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [open, activeIndex, selectableIndexes, close]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen((prev) => !prev);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": open,\n            \"aria-controls\": id,\n            \"aria-haspopup\": \"menu\" as const,\n        },\n    } as ReactElement;\n\n    const handleSelect = (entry: Extract<DropdownMenuEntry, { type: \"item\" }>): void => {\n        entry.onSelect();\n        close();\n    };\n\n    return (\n        <span ref={rootRef} className={styles.root}>\n            {triggerClone}\n            {open && (\n                <ul\n                    id={id}\n                    role=\"menu\"\n                    className={cn(styles.menu, placementClass(placement), className)}\n                >\n                    {items.map((entry, index) => {\n                        if (entry.type === \"separator\") {\n                            return (\n                                <li\n                                    key={entry.id}\n                                    role=\"separator\"\n                                    className={styles.separator}\n                                    aria-hidden\n                                />\n                            );\n                        }\n                        if (entry.type === \"label\") {\n                            return (\n                                <li key={entry.id} role=\"presentation\" className={styles.label}>\n                                    {entry.label}\n                                </li>\n                            );\n                        }\n                        return (\n                            <li key={entry.id} role=\"none\">\n                                <button\n                                    ref={(el) => {\n                                        itemRefs.current[index] = el;\n                                    }}\n                                    type=\"button\"\n                                    role=\"menuitem\"\n                                    className={cn(\n                                        styles.item,\n                                        entry.danger && styles.danger,\n                                        activeIndex === index && styles.active,\n                                    )}\n                                    disabled={entry.disabled}\n                                    onClick={() => handleSelect(entry)}\n                                    onMouseEnter={() => setActiveIndex(index)}\n                                >\n                                    {entry.icon && <span aria-hidden>{entry.icon}</span>}\n                                    {entry.label}\n                                </button>\n                            </li>\n                        );\n                    })}\n                </ul>\n            )}\n        </span>\n    );\n}\n"],"mappings":"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"}

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,109 +1,100 @@
-import { jsxs as k, jsx as c } from "react/jsx-runtime";
-import { useState as E, useId as I, useRef as v, useCallback as L, useEffect as A } from "react";
-import { cn as x } from "../../utils/cn.js";
-import t from "./DropdownMenu.module.css.js";
-function O(s) {
-  switch (s) {
-    case "bottom-end":
-      return t.bottomEnd;
-    case "top-start":
-      return t.topStart;
-    case "top-end":
-      return t.topEnd;
-    default:
-      return t.bottomStart;
-  }
+import { cn as e } from "../../utils/cn.js";
+import t from "./DropdownMenu.module.js";
+import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/DropdownMenu/DropdownMenu.tsx
+function l(e) {
+	switch (e) {
+		case "bottom-end": return t.bottomEnd;
+		case "top-start": return t.topStart;
+		case "top-end": return t.topEnd;
+		default: return t.bottomStart;
+	}
 }
-function T({
-  trigger: s,
-  items: w,
-  placement: C = "bottom-start",
-  className: g
-}) {
-  const [i, b] = E(!1), [l, d] = E(-1), h = I(), p = v(null), m = v([]), r = w.map((e, n) => e.type === "item" && !e.disabled ? n : -1).filter((e) => e !== -1), u = L(() => {
-    b(!1), d(-1);
-  }, []);
-  A(() => {
-    if (!i) return;
-    const e = (o) => {
-      if (o.key === "Escape") {
-        u();
-        return;
-      }
-      if (o.key === "ArrowDown") {
-        o.preventDefault();
-        const f = r.indexOf(l), a = r[(f + 1) % r.length] ?? -1;
-        d(a), m.current[a]?.focus();
-      }
-      if (o.key === "ArrowUp") {
-        o.preventDefault();
-        const f = r.indexOf(l), a = r[(f - 1 + r.length) % r.length] ?? -1;
-        d(a), m.current[a]?.focus();
-      }
-    }, n = (o) => {
-      p.current && !p.current.contains(o.target) && u();
-    };
-    return window.addEventListener("keydown", e), window.addEventListener("mousedown", n), () => {
-      window.removeEventListener("keydown", e), window.removeEventListener("mousedown", n);
-    };
-  }, [i, l, r, u]);
-  const D = (e) => {
-    s.props.onClick?.(e), b((n) => !n);
-  }, N = {
-    ...s,
-    props: {
-      ...s.props,
-      onClick: D,
-      "aria-expanded": i,
-      "aria-controls": h,
-      "aria-haspopup": "menu"
-    }
-  }, S = (e) => {
-    e.onSelect(), u();
-  };
-  return /* @__PURE__ */ k("span", { ref: p, className: t.root, children: [
-    N,
-    i && /* @__PURE__ */ c(
-      "ul",
-      {
-        id: h,
-        role: "menu",
-        className: x(t.menu, O(C), g),
-        children: w.map((e, n) => e.type === "separator" ? /* @__PURE__ */ c(
-          "li",
-          {
-            role: "separator",
-            className: t.separator,
-            "aria-hidden": !0
-          },
-          e.id
-        ) : e.type === "label" ? /* @__PURE__ */ c("li", { role: "presentation", className: t.label, children: e.label }, e.id) : /* @__PURE__ */ c("li", { role: "none", children: /* @__PURE__ */ k(
-          "button",
-          {
-            ref: (o) => {
-              m.current[n] = o;
-            },
-            type: "button",
-            role: "menuitem",
-            className: x(
-              t.item,
-              e.danger && t.danger,
-              l === n && t.active
-            ),
-            disabled: e.disabled,
-            onClick: () => S(e),
-            onMouseEnter: () => d(n),
-            children: [
-              e.icon && /* @__PURE__ */ c("span", { "aria-hidden": !0, children: e.icon }),
-              e.label
-            ]
-          }
-        ) }, e.id))
-      }
-    )
-  ] });
+function u({ trigger: u, items: d, placement: f = "bottom-start", className: p }) {
+	let [m, h] = o(!1), [g, _] = o(-1), v = i(), y = a(null), b = a([]), x = d.map((e, t) => e.type === "item" && !e.disabled ? t : -1).filter((e) => e !== -1), S = n(() => {
+		h(!1), _(-1);
+	}, []);
+	r(() => {
+		if (!m) return;
+		let e = (e) => {
+			if (e.key === "Escape") {
+				S();
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = x.indexOf(g), n = x[(t + 1) % x.length] ?? -1;
+				_(n), b.current[n]?.focus();
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				let t = x.indexOf(g), n = x[(t - 1 + x.length) % x.length] ?? -1;
+				_(n), b.current[n]?.focus();
+			}
+		}, t = (e) => {
+			y.current && !y.current.contains(e.target) && S();
+		};
+		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), () => {
+			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t);
+		};
+	}, [
+		m,
+		g,
+		x,
+		S
+	]);
+	let C = (e) => {
+		u.props.onClick?.(e), h((e) => !e);
+	}, w = {
+		...u,
+		props: {
+			...u.props,
+			onClick: C,
+			"aria-expanded": m,
+			"aria-controls": v,
+			"aria-haspopup": "menu"
+		}
+	}, T = (e) => {
+		e.onSelect(), S();
+	};
+	return /* @__PURE__ */ c("span", {
+		ref: y,
+		className: t.root,
+		children: [w, m && /* @__PURE__ */ s("ul", {
+			id: v,
+			role: "menu",
+			className: e(t.menu, l(f), p),
+			children: d.map((n, r) => n.type === "separator" ? /* @__PURE__ */ s("li", {
+				role: "separator",
+				className: t.separator,
+				"aria-hidden": !0
+			}, n.id) : n.type === "label" ? /* @__PURE__ */ s("li", {
+				role: "presentation",
+				className: t.label,
+				children: n.label
+			}, n.id) : /* @__PURE__ */ s("li", {
+				role: "none",
+				children: /* @__PURE__ */ c("button", {
+					ref: (e) => {
+						b.current[r] = e;
+					},
+					type: "button",
+					role: "menuitem",
+					className: e(t.item, n.danger && t.danger, g === r && t.active),
+					disabled: n.disabled,
+					onClick: () => T(n),
+					onMouseEnter: () => _(r),
+					children: [n.icon && /* @__PURE__ */ s("span", {
+						"aria-hidden": !0,
+						children: n.icon
+					}), n.label]
+				})
+			}, n.id))
+		})]
+	});
 }
-export {
-  T as DropdownMenu
-};
-//# sourceMappingURL=DropdownMenu.js.map
+//#endregion
+export { u as DropdownMenu };
+
+//# sourceMappingURL=DropdownMenu.js.map