tempest-react-sdk 0.66.0 → 0.67.0

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./BottomSheet.module.cjs"),n=require("../Portal/portal-host.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("react-dom");function o({open:o,onClose:s,title:c,showHandle:l=!0,dismissOnBackdrop:u=!0,dismissOnEsc:d=!0,className:f,children:p,...m}){(0,r.useEffect)(()=>{if(!o||!d)return;let e=e=>{e.key===`Escape`&&s()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[o,d,s]),(0,r.useEffect)(()=>{if(!o)return;let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}},[o]);let h=n.usePortalHost();return!o||!h?null:(0,a.createPortal)((0,i.jsxs)(`div`,{className:t.default.root,role:`dialog`,"aria-modal":`true`,children:[(0,i.jsx)(`div`,{className:t.default.backdrop,onClick:()=>u&&s(),"aria-hidden":`true`}),(0,i.jsxs)(`div`,{className:e.cn(t.default.sheet,f),...m,children:[l&&(0,i.jsx)(`button`,{type:`button`,className:t.default.handle,"aria-label":`Arrastar para fechar`,onClick:s,children:(0,i.jsx)(`span`,{className:t.default.handleBar})}),c&&(0,i.jsx)(`div`,{className:t.default.title,children:c}),(0,i.jsx)(`div`,{className:t.default.body,children:p})]})]}),h)}exports.BottomSheet=o;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/escape-layer.cjs"),n=require("./BottomSheet.module.cjs"),r=require("../Portal/portal-host.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("react-dom");function s({open:s,onClose:c,title:l,showHandle:u=!0,dismissOnBackdrop:d=!0,dismissOnEsc:f=!0,className:p,children:m,...h}){t.useEscapeLayer(s,f?c:null),(0,i.useEffect)(()=>{if(!s)return;let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}},[s]);let g=r.usePortalHost();return!s||!g?null:(0,o.createPortal)((0,a.jsxs)(`div`,{className:n.default.root,role:`dialog`,"aria-modal":`true`,children:[(0,a.jsx)(`div`,{className:n.default.backdrop,onClick:()=>d&&c(),"aria-hidden":`true`}),(0,a.jsxs)(`div`,{className:e.cn(n.default.sheet,p),...h,children:[u&&(0,a.jsx)(`button`,{type:`button`,className:n.default.handle,"aria-label":`Arrastar para fechar`,onClick:c,children:(0,a.jsx)(`span`,{className:n.default.handleBar})}),l&&(0,a.jsx)(`div`,{className:n.default.title,children:l}),(0,a.jsx)(`div`,{className:n.default.body,children:m})]})]}),g)}exports.BottomSheet=s;
 //# sourceMappingURL=BottomSheet.cjs.map

package/dist/components/BottomSheet/BottomSheet.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./BottomSheet.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n    /** Controlled open state. */\n    open: boolean;\n    /** Fires when user dismisses (backdrop click, Esc, swipe). */\n    onClose: () => void;\n    /** Optional title rendered at the top of the sheet. */\n    title?: ReactNode;\n    /** Show a drag handle indicator at the top. Default `true`. */\n    showHandle?: boolean;\n    /** When `true`, clicking the backdrop closes the sheet. Default `true`. */\n    dismissOnBackdrop?: boolean;\n    /** When `true`, pressing Esc closes the sheet. Default `true`. */\n    dismissOnEsc?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Slide-up modal panel — mobile-style sheet anchored to the bottom edge.\n * Uses portal + safe-area padding + scroll lock.\n *\n * @example\n * <BottomSheet open={open} onClose={() => setOpen(false)} title=\"Filters\">\n *     <FilterForm />\n * </BottomSheet>\n */\nexport function BottomSheet({\n    open,\n    onClose,\n    title,\n    showHandle = true,\n    dismissOnBackdrop = true,\n    dismissOnEsc = true,\n    className,\n    children,\n    ...props\n}: BottomSheetProps) {\n    useEffect(() => {\n        if (!open || !dismissOnEsc) return;\n        const handler = (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handler);\n        return () => window.removeEventListener(\"keydown\", handler);\n    }, [open, dismissOnEsc, onClose]);\n\n    useEffect(() => {\n        if (!open) return;\n        const previous = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previous;\n        };\n    }, [open]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <div className={styles.root} role=\"dialog\" aria-modal=\"true\">\n            <div\n                className={styles.backdrop}\n                onClick={() => dismissOnBackdrop && onClose()}\n                aria-hidden=\"true\"\n            />\n            <div className={cn(styles.sheet, className)} {...props}>\n                {showHandle && (\n                    <button\n                        type=\"button\"\n                        className={styles.handle}\n                        aria-label=\"Arrastar para fechar\"\n                        onClick={onClose}\n                    >\n                        <span className={styles.handleBar} />\n                    </button>\n                )}\n                {title && <div className={styles.title}>{title}</div>}\n                <div className={styles.body}>{children}</div>\n            </div>\n        </div>,\n        portalHost,\n    );\n}\n"],"mappings":"gMAgCA,SAAgB,EAAY,CACxB,OACA,UACA,QACA,aAAa,GACb,oBAAoB,GACpB,eAAe,GACf,YACA,WACA,GAAG,GACc,EACjB,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,GAAQ,CAAC,EAAc,OAC5B,IAAM,EAAW,GAAqB,CAC9B,EAAE,MAAQ,UAAU,EAAQ,CACpC,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAO,MAC7B,OAAO,oBAAoB,UAAW,CAAO,CAC9D,EAAG,CAAC,EAAM,EAAc,CAAO,CAAC,GAEhC,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAW,SAAS,KAAK,MAAM,SAErC,MADA,UAAS,KAAK,MAAM,SAAW,aAClB,CACT,SAAS,KAAK,MAAM,SAAW,CACnC,CACJ,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,EAAa,EAAA,cAAc,EAIjC,MAFI,CAAC,GAAQ,CAAC,EAAmB,MAEjC,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAM,KAAK,SAAS,aAAW,OAAtD,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,SAClB,YAAe,GAAqB,EAAQ,EAC5C,cAAY,MACf,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,GAAI,EAAjD,SAAA,CACK,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAW,uBACX,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAY,CAAA,CAChC,CAAA,EAEX,IAAS,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAW,CAAA,GACpD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,CAC3C,CACJ,CAAA,CAAA,CACL,CAAA,EAAA,CACJ,CACJ"}
+{"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./BottomSheet.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n    /** Controlled open state. */\n    open: boolean;\n    /** Fires when user dismisses (backdrop click, Esc, swipe). */\n    onClose: () => void;\n    /** Optional title rendered at the top of the sheet. */\n    title?: ReactNode;\n    /** Show a drag handle indicator at the top. Default `true`. */\n    showHandle?: boolean;\n    /** When `true`, clicking the backdrop closes the sheet. Default `true`. */\n    dismissOnBackdrop?: boolean;\n    /** When `true`, pressing Esc closes the sheet. Default `true`. */\n    dismissOnEsc?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Slide-up modal panel — mobile-style sheet anchored to the bottom edge.\n * Uses portal + safe-area padding + scroll lock.\n *\n * @example\n * <BottomSheet open={open} onClose={() => setOpen(false)} title=\"Filters\">\n *     <FilterForm />\n * </BottomSheet>\n */\nexport function BottomSheet({\n    open,\n    onClose,\n    title,\n    showHandle = true,\n    dismissOnBackdrop = true,\n    dismissOnEsc = true,\n    className,\n    children,\n    ...props\n}: BottomSheetProps) {\n    useEscapeLayer(open, dismissOnEsc ? onClose : null);\n\n    useEffect(() => {\n        if (!open) return;\n        const previous = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previous;\n        };\n    }, [open]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <div className={styles.root} role=\"dialog\" aria-modal=\"true\">\n            <div\n                className={styles.backdrop}\n                onClick={() => dismissOnBackdrop && onClose()}\n                aria-hidden=\"true\"\n            />\n            <div className={cn(styles.sheet, className)} {...props}>\n                {showHandle && (\n                    <button\n                        type=\"button\"\n                        className={styles.handle}\n                        aria-label=\"Arrastar para fechar\"\n                        onClick={onClose}\n                    >\n                        <span className={styles.handleBar} />\n                    </button>\n                )}\n                {title && <div className={styles.title}>{title}</div>}\n                <div className={styles.body}>{children}</div>\n            </div>\n        </div>,\n        portalHost,\n    );\n}\n"],"mappings":"wOAiCA,SAAgB,EAAY,CACxB,OACA,UACA,QACA,aAAa,GACb,oBAAoB,GACpB,eAAe,GACf,YACA,WACA,GAAG,GACc,CACjB,EAAA,eAAe,EAAM,EAAe,EAAU,IAAI,GAElD,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAW,SAAS,KAAK,MAAM,SAErC,MADA,UAAS,KAAK,MAAM,SAAW,aAClB,CACT,SAAS,KAAK,MAAM,SAAW,CACnC,CACJ,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,EAAa,EAAA,cAAc,EAIjC,MAFI,CAAC,GAAQ,CAAC,EAAmB,MAEjC,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAM,KAAK,SAAS,aAAW,OAAtD,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,SAClB,YAAe,GAAqB,EAAQ,EAC5C,cAAY,MACf,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,GAAI,EAAjD,SAAA,CACK,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAW,uBACX,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAY,CAAA,CAChC,CAAA,EAEX,IAAS,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAW,CAAA,GACpD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,CAC3C,CACJ,CAAA,CAAA,CACL,CAAA,EAAA,CACJ,CACJ"}

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,61 +1,52 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "./BottomSheet.module.js";
-import { usePortalHost as n } from "../Portal/portal-host.js";
-import { useEffect as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createPortal as o } from "react-dom";
+import { useEscapeLayer as t } from "../Portal/escape-layer.js";
+import n from "./BottomSheet.module.js";
+import { usePortalHost as r } from "../Portal/portal-host.js";
+import { useEffect as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
 //#region src/components/BottomSheet/BottomSheet.tsx
-function s({ open: s, onClose: c, title: l, showHandle: u = !0, dismissOnBackdrop: d = !0, dismissOnEsc: f = !0, className: p, children: m, ...h }) {
-	r(() => {
-		if (!s || !f) return;
-		let e = (e) => {
-			e.key === "Escape" && c();
-		};
-		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [
-		s,
-		f,
-		c
-	]), r(() => {
-		if (!s) return;
+function c({ open: c, onClose: l, title: u, showHandle: d = !0, dismissOnBackdrop: f = !0, dismissOnEsc: p = !0, className: m, children: h, ...g }) {
+	t(c, p ? l : null), i(() => {
+		if (!c) return;
 		let e = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.body.style.overflow = e;
 		};
-	}, [s]);
-	let g = n();
-	return !s || !g ? null : o(/* @__PURE__ */ a("div", {
-		className: t.root,
+	}, [c]);
+	let _ = r();
+	return !c || !_ ? null : s(/* @__PURE__ */ o("div", {
+		className: n.root,
 		role: "dialog",
 		"aria-modal": "true",
-		children: [/* @__PURE__ */ i("div", {
-			className: t.backdrop,
-			onClick: () => d && c(),
+		children: [/* @__PURE__ */ a("div", {
+			className: n.backdrop,
+			onClick: () => f && l(),
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ a("div", {
-			className: e(t.sheet, p),
-			...h,
+		}), /* @__PURE__ */ o("div", {
+			className: e(n.sheet, m),
+			...g,
 			children: [
-				u && /* @__PURE__ */ i("button", {
+				d && /* @__PURE__ */ a("button", {
 					type: "button",
-					className: t.handle,
+					className: n.handle,
 					"aria-label": "Arrastar para fechar",
-					onClick: c,
-					children: /* @__PURE__ */ i("span", { className: t.handleBar })
+					onClick: l,
+					children: /* @__PURE__ */ a("span", { className: n.handleBar })
 				}),
-				l && /* @__PURE__ */ i("div", {
-					className: t.title,
-					children: l
+				u && /* @__PURE__ */ a("div", {
+					className: n.title,
+					children: u
 				}),
-				/* @__PURE__ */ i("div", {
-					className: t.body,
-					children: m
+				/* @__PURE__ */ a("div", {
+					className: n.body,
+					children: h
 				})
 			]
 		})]
-	}), g);
+	}), _);
 }
 //#endregion
-export { s as BottomSheet };
+export { c as BottomSheet };
 
 //# sourceMappingURL=BottomSheet.js.map

package/dist/components/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./BottomSheet.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n    /** Controlled open state. */\n    open: boolean;\n    /** Fires when user dismisses (backdrop click, Esc, swipe). */\n    onClose: () => void;\n    /** Optional title rendered at the top of the sheet. */\n    title?: ReactNode;\n    /** Show a drag handle indicator at the top. Default `true`. */\n    showHandle?: boolean;\n    /** When `true`, clicking the backdrop closes the sheet. Default `true`. */\n    dismissOnBackdrop?: boolean;\n    /** When `true`, pressing Esc closes the sheet. Default `true`. */\n    dismissOnEsc?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Slide-up modal panel — mobile-style sheet anchored to the bottom edge.\n * Uses portal + safe-area padding + scroll lock.\n *\n * @example\n * <BottomSheet open={open} onClose={() => setOpen(false)} title=\"Filters\">\n *     <FilterForm />\n * </BottomSheet>\n */\nexport function BottomSheet({\n    open,\n    onClose,\n    title,\n    showHandle = true,\n    dismissOnBackdrop = true,\n    dismissOnEsc = true,\n    className,\n    children,\n    ...props\n}: BottomSheetProps) {\n    useEffect(() => {\n        if (!open || !dismissOnEsc) return;\n        const handler = (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handler);\n        return () => window.removeEventListener(\"keydown\", handler);\n    }, [open, dismissOnEsc, onClose]);\n\n    useEffect(() => {\n        if (!open) return;\n        const previous = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previous;\n        };\n    }, [open]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <div className={styles.root} role=\"dialog\" aria-modal=\"true\">\n            <div\n                className={styles.backdrop}\n                onClick={() => dismissOnBackdrop && onClose()}\n                aria-hidden=\"true\"\n            />\n            <div className={cn(styles.sheet, className)} {...props}>\n                {showHandle && (\n                    <button\n                        type=\"button\"\n                        className={styles.handle}\n                        aria-label=\"Arrastar para fechar\"\n                        onClick={onClose}\n                    >\n                        <span className={styles.handleBar} />\n                    </button>\n                )}\n                {title && <div className={styles.title}>{title}</div>}\n                <div className={styles.body}>{children}</div>\n            </div>\n        </div>,\n        portalHost,\n    );\n}\n"],"mappings":";;;;;;;AAgCA,SAAgB,EAAY,EACxB,SACA,YACA,UACA,gBAAa,IACb,uBAAoB,IACpB,kBAAe,IACf,cACA,aACA,GAAG,KACc;CAUjB,AATA,QAAgB;EACZ,IAAI,CAAC,KAAQ,CAAC,GAAc;EAC5B,IAAM,KAAW,MAAqB;GAClC,AAAI,EAAE,QAAQ,YAAU,EAAQ;EACpC;EAEA,OADA,OAAO,iBAAiB,WAAW,CAAO,SAC7B,OAAO,oBAAoB,WAAW,CAAO;CAC9D,GAAG;EAAC;EAAM;EAAc;CAAO,CAAC,GAEhC,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAW,SAAS,KAAK,MAAM;EAErC,OADA,SAAS,KAAK,MAAM,WAAW,gBAClB;GACT,SAAS,KAAK,MAAM,WAAW;EACnC;CACJ,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAa,EAAc;CAIjC,OAFI,CAAC,KAAQ,CAAC,IAAmB,OAE1B,EACH,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAM,MAAK;EAAS,cAAW;EAAtD,UAAA,CACI,kBAAC,OAAD;GACI,WAAW,EAAO;GAClB,eAAe,KAAqB,EAAQ;GAC5C,eAAY;EACf,CAAA,GACD,kBAAC,OAAD;GAAK,WAAW,EAAG,EAAO,OAAO,CAAS;GAAG,GAAI;GAAjD,UAAA;IACK,KACG,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,cAAW;KACX,SAAS;KAET,UAAA,kBAAC,QAAD,EAAM,WAAW,EAAO,UAAY,CAAA;IAChC,CAAA;IAEX,KAAS,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,UAAA;IAAW,CAAA;IACpD,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;GAC3C;EACJ,CAAA,CAAA;CACL,CAAA,GAAA,CACJ;AACJ"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./BottomSheet.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n    /** Controlled open state. */\n    open: boolean;\n    /** Fires when user dismisses (backdrop click, Esc, swipe). */\n    onClose: () => void;\n    /** Optional title rendered at the top of the sheet. */\n    title?: ReactNode;\n    /** Show a drag handle indicator at the top. Default `true`. */\n    showHandle?: boolean;\n    /** When `true`, clicking the backdrop closes the sheet. Default `true`. */\n    dismissOnBackdrop?: boolean;\n    /** When `true`, pressing Esc closes the sheet. Default `true`. */\n    dismissOnEsc?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Slide-up modal panel — mobile-style sheet anchored to the bottom edge.\n * Uses portal + safe-area padding + scroll lock.\n *\n * @example\n * <BottomSheet open={open} onClose={() => setOpen(false)} title=\"Filters\">\n *     <FilterForm />\n * </BottomSheet>\n */\nexport function BottomSheet({\n    open,\n    onClose,\n    title,\n    showHandle = true,\n    dismissOnBackdrop = true,\n    dismissOnEsc = true,\n    className,\n    children,\n    ...props\n}: BottomSheetProps) {\n    useEscapeLayer(open, dismissOnEsc ? onClose : null);\n\n    useEffect(() => {\n        if (!open) return;\n        const previous = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previous;\n        };\n    }, [open]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <div className={styles.root} role=\"dialog\" aria-modal=\"true\">\n            <div\n                className={styles.backdrop}\n                onClick={() => dismissOnBackdrop && onClose()}\n                aria-hidden=\"true\"\n            />\n            <div className={cn(styles.sheet, className)} {...props}>\n                {showHandle && (\n                    <button\n                        type=\"button\"\n                        className={styles.handle}\n                        aria-label=\"Arrastar para fechar\"\n                        onClick={onClose}\n                    >\n                        <span className={styles.handleBar} />\n                    </button>\n                )}\n                {title && <div className={styles.title}>{title}</div>}\n                <div className={styles.body}>{children}</div>\n            </div>\n        </div>,\n        portalHost,\n    );\n}\n"],"mappings":";;;;;;;;AAiCA,SAAgB,EAAY,EACxB,SACA,YACA,UACA,gBAAa,IACb,uBAAoB,IACpB,kBAAe,IACf,cACA,aACA,GAAG,KACc;CAGjB,AAFA,EAAe,GAAM,IAAe,IAAU,IAAI,GAElD,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAW,SAAS,KAAK,MAAM;EAErC,OADA,SAAS,KAAK,MAAM,WAAW,gBAClB;GACT,SAAS,KAAK,MAAM,WAAW;EACnC;CACJ,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAa,EAAc;CAIjC,OAFI,CAAC,KAAQ,CAAC,IAAmB,OAE1B,EACH,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAM,MAAK;EAAS,cAAW;EAAtD,UAAA,CACI,kBAAC,OAAD;GACI,WAAW,EAAO;GAClB,eAAe,KAAqB,EAAQ;GAC5C,eAAY;EACf,CAAA,GACD,kBAAC,OAAD;GAAK,WAAW,EAAG,EAAO,OAAO,CAAS;GAAG,GAAI;GAAjD,UAAA;IACK,KACG,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,cAAW;KACX,SAAS;KAET,UAAA,kBAAC,QAAD,EAAM,WAAW,EAAO,UAAY,CAAA;IAChC,CAAA;IAEX,KAAS,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,UAAA;IAAW,CAAA;IACpD,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;GAC3C;EACJ,CAAA,CAAA;CACL,CAAA,GAAA,CACJ;AACJ"}

package/dist/components/Combobox/Combobox.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Combobox.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e,t){return!t||e.label.toLowerCase().includes(t.toLowerCase())}function a({options:a,value:o,onChange:s,label:c,placeholder:l=`Selecione`,helperText:u,error:d,disabled:f,filter:p=i,emptyMessage:m=`Nenhuma opção encontrada`,className:h}){let g=(0,n.useId)(),_=(0,n.useRef)(null),v=(0,n.useRef)(null),[y,b]=(0,n.useState)(!1),[x,S]=(0,n.useState)(``),[C,w]=(0,n.useState)(0),T=(0,n.useMemo)(()=>a.find(e=>e.value===o)?.label??``,[a,o]),E=(0,n.useMemo)(()=>a.filter(e=>p(e,x)),[a,p,x]),D=(0,n.useCallback)(()=>{b(!1),S(``),w(0)},[]),O=(0,n.useCallback)(e=>{e.disabled||(s(e.value),D())},[s,D]);return(0,n.useEffect)(()=>{if(!y)return;let e=e=>{_.current&&!_.current.contains(e.target)&&D()};return window.addEventListener(`mousedown`,e),()=>window.removeEventListener(`mousedown`,e)},[y,D]),(0,r.jsxs)(`div`,{ref:_,className:e.cn(t.default.wrapper,d&&t.default.error,h),children:[c&&(0,r.jsx)(`label`,{htmlFor:g,className:t.default.label,children:c}),(0,r.jsxs)(`div`,{className:t.default.field,children:[(0,r.jsx)(`input`,{id:g,ref:v,type:`text`,role:`combobox`,"aria-expanded":y,"aria-controls":`${g}-listbox`,"aria-autocomplete":`list`,className:t.default.input,placeholder:l,disabled:f,value:y?x:T,onFocus:()=>b(!0),onChange:e=>{S(e.target.value),b(!0),w(0)},onKeyDown:e=>{if(e.key===`ArrowDown`)e.preventDefault(),b(!0),w(e=>Math.min(E.length-1,e+1));else if(e.key===`ArrowUp`)e.preventDefault(),w(e=>Math.max(0,e-1));else if(e.key===`Enter`){e.preventDefault();let t=E[C];t&&O(t)}else e.key===`Escape`&&D()}}),(0,r.jsx)(`span`,{className:t.default.caret,"aria-hidden":!0,children:`▾`})]}),y&&(0,r.jsx)(`ul`,{id:`${g}-listbox`,role:`listbox`,className:t.default.menu,children:E.length===0?(0,r.jsx)(`li`,{className:t.default.empty,children:m}):E.map((n,i)=>(0,r.jsx)(`li`,{role:`option`,"aria-selected":n.value===o,className:e.cn(t.default.option,i===C&&t.default.active,n.value===o&&t.default.selected),onMouseEnter:()=>w(i),onMouseDown:e=>{e.preventDefault(),O(n)},children:n.label},n.value))}),d?(0,r.jsx)(`span`,{className:t.default.errorText,children:d}):u?(0,r.jsx)(`span`,{className:t.default.helper,children:u}):null]})}exports.Combobox=a;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/Portal.cjs"),n=require("../Portal/anchor-position.cjs"),r=require("./Combobox.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=4;function s(e,t){return!t||e.label.toLowerCase().includes(t.toLowerCase())}function c({options:c,value:l,onChange:u,label:d,placeholder:f=`Selecione`,helperText:p,error:m,disabled:h,filter:g=s,emptyMessage:_=`Nenhuma opção encontrada`,portal:v=!0,className:y}){let b=(0,i.useId)(),x=(0,i.useRef)(null),S=(0,i.useRef)(null),[C,w]=(0,i.useState)(!1),[T,E]=(0,i.useState)(``),[D,O]=(0,i.useState)(0),[k,A]=(0,i.useState)(null),[j,M]=(0,i.useState)(null),N=n.useAnchorPosition({anchor:k,floating:j,side:`bottom`,align:`start`,offset:o,enabled:v&&C,matchWidth:!0}),P=(0,i.useMemo)(()=>c.find(e=>e.value===l)?.label??``,[c,l]),F=(0,i.useMemo)(()=>c.filter(e=>g(e,T)),[c,g,T]),I=(0,i.useCallback)(()=>{w(!1),E(``),O(0)},[]),L=(0,i.useCallback)(e=>{e.disabled||(u(e.value),I())},[u,I]);(0,i.useEffect)(()=>{if(!C)return;let e=e=>{let t=e.target;x.current?.contains(t)||j?.contains(t)||I()};return window.addEventListener(`mousedown`,e),()=>window.removeEventListener(`mousedown`,e)},[C,I,j]);let R=e=>{if(e.key===`ArrowDown`)e.preventDefault(),w(!0),O(e=>Math.min(F.length-1,e+1));else if(e.key===`ArrowUp`)e.preventDefault(),O(e=>Math.max(0,e-1));else if(e.key===`Enter`){e.preventDefault();let t=F[D];t&&L(t)}else e.key===`Escape`&&(C&&e.preventDefault(),I())},z=(0,a.jsx)(`ul`,{ref:M,id:`${b}-listbox`,role:`listbox`,className:e.cn(r.default.menu,v&&r.default.portalled),style:N,children:F.length===0?(0,a.jsx)(`li`,{className:r.default.empty,children:_}):F.map((t,n)=>(0,a.jsx)(`li`,{role:`option`,"aria-selected":t.value===l,className:e.cn(r.default.option,n===D&&r.default.active,t.value===l&&r.default.selected),onMouseEnter:()=>O(n),onMouseDown:e=>{e.preventDefault(),L(t)},children:t.label},t.value))});return(0,a.jsxs)(`div`,{ref:x,className:e.cn(r.default.wrapper,m&&r.default.error,y),children:[d&&(0,a.jsx)(`label`,{htmlFor:b,className:r.default.label,children:d}),(0,a.jsxs)(`div`,{ref:A,className:r.default.field,children:[(0,a.jsx)(`input`,{id:b,ref:S,type:`text`,role:`combobox`,"aria-expanded":C,"aria-controls":`${b}-listbox`,"aria-autocomplete":`list`,className:r.default.input,placeholder:f,disabled:h,value:C?T:P,onFocus:()=>w(!0),onChange:e=>{E(e.target.value),w(!0),O(0)},onKeyDown:R}),(0,a.jsx)(`span`,{className:r.default.caret,"aria-hidden":!0,children:`▾`})]}),C&&(v?(0,a.jsx)(t.Portal,{children:z}):z),m?(0,a.jsx)(`span`,{className:r.default.errorText,children:m}):p?(0,a.jsx)(`span`,{className:r.default.helper,children:p}):null]})}exports.Combobox=c;
 //# sourceMappingURL=Combobox.cjs.map

package/dist/components/Combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","names":[],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — options/value/onChange\n * plus the shared field contract (label, placeholder, helperText, error, disabled,\n * className) and the three combobox-specific knobs: filter, emptyMessage. The body\n * is the listbox — open state, active descendant, type-ahead and the ARIA wiring —\n * and those cannot be separated without passing the same active index back and\n * forth.\n */\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Combobox.module.css\";\n\nexport interface ComboboxOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n    options: ComboboxOption[];\n    value: string;\n    onChange: (value: string) => void;\n    label?: string;\n    placeholder?: string;\n    helperText?: string;\n    error?: string;\n    disabled?: boolean;\n    /** Custom filter — return true to keep the option. Default is case-insensitive substring match on label. */\n    filter?: (option: ComboboxOption, query: string) => boolean;\n    /** Message shown when no option matches. */\n    emptyMessage?: string;\n    className?: string;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n    if (!query) return true;\n    return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\n/**\n * Combobox — text input with a filterable dropdown of options.\n *\n * Selecting an option fires `onChange(value)`. Typing filters the list.\n * Keyboard: ArrowUp/ArrowDown to navigate, Enter to select, Esc to close.\n */\nexport function Combobox({\n    options,\n    value,\n    onChange,\n    label,\n    placeholder = \"Selecione\",\n    helperText,\n    error,\n    disabled,\n    filter = defaultFilter,\n    emptyMessage = \"Nenhuma opção encontrada\",\n    className,\n}: ComboboxProps) {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState(\"\");\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const selectedLabel = useMemo(\n        () => options.find((o) => o.value === value)?.label ?? \"\",\n        [options, value],\n    );\n\n    const filtered = useMemo(\n        () => options.filter((o) => filter(o, query)),\n        [options, filter, query],\n    );\n\n    const closeAndReset = useCallback((): void => {\n        setOpen(false);\n        setQuery(\"\");\n        setActiveIndex(0);\n    }, []);\n\n    const handleSelect = useCallback(\n        (option: ComboboxOption): void => {\n            if (option.disabled) return;\n            onChange(option.value);\n            closeAndReset();\n        },\n        [onChange, closeAndReset],\n    );\n\n    useEffect(() => {\n        if (!open) return;\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n                closeAndReset();\n            }\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => window.removeEventListener(\"mousedown\", onDown);\n    }, [open, closeAndReset]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            setOpen(true);\n            setActiveIndex((current) => Math.min(filtered.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            const option = filtered[activeIndex];\n            if (option) handleSelect(option);\n        } else if (event.key === \"Escape\") {\n            closeAndReset();\n        }\n    };\n\n    return (\n        <div ref={rootRef} className={cn(styles.wrapper, error && styles.error, className)}>\n            {label && (\n                <label htmlFor={id} className={styles.label}>\n                    {label}\n                </label>\n            )}\n            <div className={styles.field}>\n                <input\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    aria-controls={`${id}-listbox`}\n                    aria-autocomplete=\"list\"\n                    className={styles.input}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    value={open ? query : selectedLabel}\n                    onFocus={() => setOpen(true)}\n                    onChange={(event) => {\n                        setQuery(event.target.value);\n                        setOpen(true);\n                        setActiveIndex(0);\n                    }}\n                    onKeyDown={handleKeyDown}\n                />\n                <span className={styles.caret} aria-hidden>\n                    ▾\n                </span>\n            </div>\n            {open && (\n                <ul id={`${id}-listbox`} role=\"listbox\" className={styles.menu}>\n                    {filtered.length === 0 ? (\n                        <li className={styles.empty}>{emptyMessage}</li>\n                    ) : (\n                        filtered.map((option, index) => (\n                            <li\n                                key={option.value}\n                                role=\"option\"\n                                aria-selected={option.value === value}\n                                className={cn(\n                                    styles.option,\n                                    index === activeIndex && styles.active,\n                                    option.value === value && styles.selected,\n                                )}\n                                onMouseEnter={() => setActiveIndex(index)}\n                                onMouseDown={(event) => {\n                                    event.preventDefault();\n                                    handleSelect(option);\n                                }}\n                            >\n                                {option.label}\n                            </li>\n                        ))\n                    )}\n                </ul>\n            )}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.cjs","names":[],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — options/value/onChange\n * plus the shared field contract (label, placeholder, helperText, error, disabled,\n * className) and the combobox-specific knobs: filter, emptyMessage, portal. The body\n * is the listbox — open state, active descendant, type-ahead and the ARIA wiring —\n * and those cannot be separated without passing the same active index back and\n * forth.\n */\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Combobox.module.css\";\n\nexport interface ComboboxOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n    options: ComboboxOption[];\n    value: string;\n    onChange: (value: string) => void;\n    label?: string;\n    placeholder?: string;\n    helperText?: string;\n    error?: string;\n    disabled?: boolean;\n    /** Custom filter — return true to keep the option. Default is case-insensitive substring match on label. */\n    filter?: (option: ComboboxOption, query: string) => boolean;\n    /** Message shown when no option matches. */\n    emptyMessage?: string;\n    /**\n     * Render the list in a portal, positioned under the field. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the list —\n     * in the last row of a `DataTable` none of it was visible (measured in Chrome\n     * at 1440 px). In a portal it escapes the clip, takes the field's width,\n     * flips above the field when there is no room below, and follows it on\n     * scroll, resize and when the field or the list changes size.\n     */\n    portal?: boolean;\n    className?: string;\n}\n\n/** Gap between field and list, in px — the in-flow CSS uses the same 4 px. */\nconst LIST_OFFSET = 4;\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n    if (!query) return true;\n    return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\n/**\n * Combobox — text input with a filterable dropdown of options.\n *\n * Selecting an option fires `onChange(value)`. Typing filters the list.\n * Keyboard: ArrowUp/ArrowDown to navigate, Enter to select, Esc to close.\n */\nexport function Combobox({\n    options,\n    value,\n    onChange,\n    label,\n    placeholder = \"Selecione\",\n    helperText,\n    error,\n    disabled,\n    filter = defaultFilter,\n    emptyMessage = \"Nenhuma opção encontrada\",\n    portal = true,\n    className,\n}: ComboboxProps) {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState(\"\");\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [fieldNode, setFieldNode] = useState<HTMLDivElement | null>(null);\n    const [listNode, setListNode] = useState<HTMLUListElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: fieldNode,\n        floating: listNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: LIST_OFFSET,\n        enabled: portal && open,\n        matchWidth: true,\n    });\n\n    const selectedLabel = useMemo(\n        () => options.find((o) => o.value === value)?.label ?? \"\",\n        [options, value],\n    );\n\n    const filtered = useMemo(\n        () => options.filter((o) => filter(o, query)),\n        [options, filter, query],\n    );\n\n    const closeAndReset = useCallback((): void => {\n        setOpen(false);\n        setQuery(\"\");\n        setActiveIndex(0);\n    }, []);\n\n    const handleSelect = useCallback(\n        (option: ComboboxOption): void => {\n            if (option.disabled) return;\n            onChange(option.value);\n            closeAndReset();\n        },\n        [onChange, closeAndReset],\n    );\n\n    /**\n     * Close on a press outside both the field and the list.\n     *\n     * The list is checked on its own because in a portal it is not inside the\n     * field's wrapper: a press on its scrollbar, or on the empty message, would\n     * otherwise count as outside and close it.\n     */\n    useEffect(() => {\n        if (!open) return;\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootRef.current?.contains(target) || listNode?.contains(target)) return;\n            closeAndReset();\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => window.removeEventListener(\"mousedown\", onDown);\n    }, [open, closeAndReset, listNode]);\n\n    /**\n     * Keyboard model of the input.\n     *\n     * `Escape` calls `preventDefault()` only while the list is open: that marks the\n     * key as consumed, so an enclosing `Modal` or `Drawer` stays open and the next\n     * `Escape` reaches it. With the list closed the key is left alone and dismisses\n     * the enclosing layer, as the user expects.\n     */\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            setOpen(true);\n            setActiveIndex((current) => Math.min(filtered.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            const option = filtered[activeIndex];\n            if (option) handleSelect(option);\n        } else if (event.key === \"Escape\") {\n            if (open) event.preventDefault();\n            closeAndReset();\n        }\n    };\n\n    const list = (\n        <ul\n            ref={setListNode}\n            id={`${id}-listbox`}\n            role=\"listbox\"\n            className={cn(styles.menu, portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {filtered.length === 0 ? (\n                <li className={styles.empty}>{emptyMessage}</li>\n            ) : (\n                filtered.map((option, index) => (\n                    <li\n                        key={option.value}\n                        role=\"option\"\n                        aria-selected={option.value === value}\n                        className={cn(\n                            styles.option,\n                            index === activeIndex && styles.active,\n                            option.value === value && styles.selected,\n                        )}\n                        onMouseEnter={() => setActiveIndex(index)}\n                        onMouseDown={(event) => {\n                            event.preventDefault();\n                            handleSelect(option);\n                        }}\n                    >\n                        {option.label}\n                    </li>\n                ))\n            )}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} className={cn(styles.wrapper, error && styles.error, className)}>\n            {label && (\n                <label htmlFor={id} className={styles.label}>\n                    {label}\n                </label>\n            )}\n            <div ref={setFieldNode} className={styles.field}>\n                <input\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    aria-controls={`${id}-listbox`}\n                    aria-autocomplete=\"list\"\n                    className={styles.input}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    value={open ? query : selectedLabel}\n                    onFocus={() => setOpen(true)}\n                    onChange={(event) => {\n                        setQuery(event.target.value);\n                        setOpen(true);\n                        setActiveIndex(0);\n                    }}\n                    onKeyDown={handleKeyDown}\n                />\n                <span className={styles.caret} aria-hidden>\n                    ▾\n                </span>\n            </div>\n            {open && (portal ? <Portal>{list}</Portal> : list)}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Combobox/Combobox.js

@@ -1,98 +1,119 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "./Combobox.module.js";
-import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Portal as t } from "../Portal/Portal.js";
+import { useAnchorPosition as n } from "../Portal/anchor-position.js";
+import r from "./Combobox.module.js";
+import { useCallback as i, useEffect as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/Combobox/Combobox.tsx
-function u(e, t) {
+var f = 4;
+function p(e, t) {
 	return !t || e.label.toLowerCase().includes(t.toLowerCase());
 }
-function d({ options: d, value: f, onChange: p, label: m, placeholder: h = "Selecione", helperText: g, error: _, disabled: v, filter: y = u, emptyMessage: b = "Nenhuma opção encontrada", className: x }) {
-	let S = i(), C = o(null), w = o(null), [T, E] = s(!1), [D, O] = s(""), [k, A] = s(0), j = a(() => d.find((e) => e.value === f)?.label ?? "", [d, f]), M = a(() => d.filter((e) => y(e, D)), [
-		d,
-		y,
-		D
-	]), N = n(() => {
-		E(!1), O(""), A(0);
-	}, []), P = n((e) => {
-		e.disabled || (p(e.value), N());
-	}, [p, N]);
-	return r(() => {
-		if (!T) return;
+function m({ options: m, value: h, onChange: g, label: _, placeholder: v = "Selecione", helperText: y, error: b, disabled: x, filter: S = p, emptyMessage: C = "Nenhuma opção encontrada", portal: w = !0, className: T }) {
+	let E = o(), D = c(null), O = c(null), [k, A] = l(!1), [j, M] = l(""), [N, P] = l(0), [F, I] = l(null), [L, R] = l(null), z = n({
+		anchor: F,
+		floating: L,
+		side: "bottom",
+		align: "start",
+		offset: f,
+		enabled: w && k,
+		matchWidth: !0
+	}), B = s(() => m.find((e) => e.value === h)?.label ?? "", [m, h]), V = s(() => m.filter((e) => S(e, j)), [
+		m,
+		S,
+		j
+	]), H = i(() => {
+		A(!1), M(""), P(0);
+	}, []), U = i((e) => {
+		e.disabled || (g(e.value), H());
+	}, [g, H]);
+	a(() => {
+		if (!k) return;
 		let e = (e) => {
-			C.current && !C.current.contains(e.target) && N();
+			let t = e.target;
+			D.current?.contains(t) || L?.contains(t) || H();
 		};
 		return window.addEventListener("mousedown", e), () => window.removeEventListener("mousedown", e);
-	}, [T, N]), /* @__PURE__ */ l("div", {
-		ref: C,
-		className: e(t.wrapper, _ && t.error, x),
+	}, [
+		k,
+		H,
+		L
+	]);
+	let W = (e) => {
+		if (e.key === "ArrowDown") e.preventDefault(), A(!0), P((e) => Math.min(V.length - 1, e + 1));
+		else if (e.key === "ArrowUp") e.preventDefault(), P((e) => Math.max(0, e - 1));
+		else if (e.key === "Enter") {
+			e.preventDefault();
+			let t = V[N];
+			t && U(t);
+		} else e.key === "Escape" && (k && e.preventDefault(), H());
+	}, G = /* @__PURE__ */ u("ul", {
+		ref: R,
+		id: `${E}-listbox`,
+		role: "listbox",
+		className: e(r.menu, w && r.portalled),
+		style: z,
+		children: V.length === 0 ? /* @__PURE__ */ u("li", {
+			className: r.empty,
+			children: C
+		}) : V.map((t, n) => /* @__PURE__ */ u("li", {
+			role: "option",
+			"aria-selected": t.value === h,
+			className: e(r.option, n === N && r.active, t.value === h && r.selected),
+			onMouseEnter: () => P(n),
+			onMouseDown: (e) => {
+				e.preventDefault(), U(t);
+			},
+			children: t.label
+		}, t.value))
+	});
+	return /* @__PURE__ */ d("div", {
+		ref: D,
+		className: e(r.wrapper, b && r.error, T),
 		children: [
-			m && /* @__PURE__ */ c("label", {
-				htmlFor: S,
-				className: t.label,
-				children: m
+			_ && /* @__PURE__ */ u("label", {
+				htmlFor: E,
+				className: r.label,
+				children: _
 			}),
-			/* @__PURE__ */ l("div", {
-				className: t.field,
-				children: [/* @__PURE__ */ c("input", {
-					id: S,
-					ref: w,
+			/* @__PURE__ */ d("div", {
+				ref: I,
+				className: r.field,
+				children: [/* @__PURE__ */ u("input", {
+					id: E,
+					ref: O,
 					type: "text",
 					role: "combobox",
-					"aria-expanded": T,
-					"aria-controls": `${S}-listbox`,
+					"aria-expanded": k,
+					"aria-controls": `${E}-listbox`,
 					"aria-autocomplete": "list",
-					className: t.input,
-					placeholder: h,
-					disabled: v,
-					value: T ? D : j,
-					onFocus: () => E(!0),
+					className: r.input,
+					placeholder: v,
+					disabled: x,
+					value: k ? j : B,
+					onFocus: () => A(!0),
 					onChange: (e) => {
-						O(e.target.value), E(!0), A(0);
+						M(e.target.value), A(!0), P(0);
 					},
-					onKeyDown: (e) => {
-						if (e.key === "ArrowDown") e.preventDefault(), E(!0), A((e) => Math.min(M.length - 1, e + 1));
-						else if (e.key === "ArrowUp") e.preventDefault(), A((e) => Math.max(0, e - 1));
-						else if (e.key === "Enter") {
-							e.preventDefault();
-							let t = M[k];
-							t && P(t);
-						} else e.key === "Escape" && N();
-					}
-				}), /* @__PURE__ */ c("span", {
-					className: t.caret,
+					onKeyDown: W
+				}), /* @__PURE__ */ u("span", {
+					className: r.caret,
 					"aria-hidden": !0,
 					children: "▾"
 				})]
 			}),
-			T && /* @__PURE__ */ c("ul", {
-				id: `${S}-listbox`,
-				role: "listbox",
-				className: t.menu,
-				children: M.length === 0 ? /* @__PURE__ */ c("li", {
-					className: t.empty,
-					children: b
-				}) : M.map((n, r) => /* @__PURE__ */ c("li", {
-					role: "option",
-					"aria-selected": n.value === f,
-					className: e(t.option, r === k && t.active, n.value === f && t.selected),
-					onMouseEnter: () => A(r),
-					onMouseDown: (e) => {
-						e.preventDefault(), P(n);
-					},
-					children: n.label
-				}, n.value))
-			}),
-			_ ? /* @__PURE__ */ c("span", {
-				className: t.errorText,
-				children: _
-			}) : g ? /* @__PURE__ */ c("span", {
-				className: t.helper,
-				children: g
+			k && (w ? /* @__PURE__ */ u(t, { children: G }) : G),
+			b ? /* @__PURE__ */ u("span", {
+				className: r.errorText,
+				children: b
+			}) : y ? /* @__PURE__ */ u("span", {
+				className: r.helper,
+				children: y
 			}) : null
 		]
 	});
 }
 //#endregion
-export { d as Combobox };
+export { m as Combobox };
 
 //# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":[],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — options/value/onChange\n * plus the shared field contract (label, placeholder, helperText, error, disabled,\n * className) and the three combobox-specific knobs: filter, emptyMessage. The body\n * is the listbox — open state, active descendant, type-ahead and the ARIA wiring —\n * and those cannot be separated without passing the same active index back and\n * forth.\n */\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Combobox.module.css\";\n\nexport interface ComboboxOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n    options: ComboboxOption[];\n    value: string;\n    onChange: (value: string) => void;\n    label?: string;\n    placeholder?: string;\n    helperText?: string;\n    error?: string;\n    disabled?: boolean;\n    /** Custom filter — return true to keep the option. Default is case-insensitive substring match on label. */\n    filter?: (option: ComboboxOption, query: string) => boolean;\n    /** Message shown when no option matches. */\n    emptyMessage?: string;\n    className?: string;\n}\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n    if (!query) return true;\n    return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\n/**\n * Combobox — text input with a filterable dropdown of options.\n *\n * Selecting an option fires `onChange(value)`. Typing filters the list.\n * Keyboard: ArrowUp/ArrowDown to navigate, Enter to select, Esc to close.\n */\nexport function Combobox({\n    options,\n    value,\n    onChange,\n    label,\n    placeholder = \"Selecione\",\n    helperText,\n    error,\n    disabled,\n    filter = defaultFilter,\n    emptyMessage = \"Nenhuma opção encontrada\",\n    className,\n}: ComboboxProps) {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState(\"\");\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const selectedLabel = useMemo(\n        () => options.find((o) => o.value === value)?.label ?? \"\",\n        [options, value],\n    );\n\n    const filtered = useMemo(\n        () => options.filter((o) => filter(o, query)),\n        [options, filter, query],\n    );\n\n    const closeAndReset = useCallback((): void => {\n        setOpen(false);\n        setQuery(\"\");\n        setActiveIndex(0);\n    }, []);\n\n    const handleSelect = useCallback(\n        (option: ComboboxOption): void => {\n            if (option.disabled) return;\n            onChange(option.value);\n            closeAndReset();\n        },\n        [onChange, closeAndReset],\n    );\n\n    useEffect(() => {\n        if (!open) return;\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.current.contains(event.target as Node)) {\n                closeAndReset();\n            }\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => window.removeEventListener(\"mousedown\", onDown);\n    }, [open, closeAndReset]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            setOpen(true);\n            setActiveIndex((current) => Math.min(filtered.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            const option = filtered[activeIndex];\n            if (option) handleSelect(option);\n        } else if (event.key === \"Escape\") {\n            closeAndReset();\n        }\n    };\n\n    return (\n        <div ref={rootRef} className={cn(styles.wrapper, error && styles.error, className)}>\n            {label && (\n                <label htmlFor={id} className={styles.label}>\n                    {label}\n                </label>\n            )}\n            <div className={styles.field}>\n                <input\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    aria-controls={`${id}-listbox`}\n                    aria-autocomplete=\"list\"\n                    className={styles.input}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    value={open ? query : selectedLabel}\n                    onFocus={() => setOpen(true)}\n                    onChange={(event) => {\n                        setQuery(event.target.value);\n                        setOpen(true);\n                        setActiveIndex(0);\n                    }}\n                    onKeyDown={handleKeyDown}\n                />\n                <span className={styles.caret} aria-hidden>\n                    ▾\n                </span>\n            </div>\n            {open && (\n                <ul id={`${id}-listbox`} role=\"listbox\" className={styles.menu}>\n                    {filtered.length === 0 ? (\n                        <li className={styles.empty}>{emptyMessage}</li>\n                    ) : (\n                        filtered.map((option, index) => (\n                            <li\n                                key={option.value}\n                                role=\"option\"\n                                aria-selected={option.value === value}\n                                className={cn(\n                                    styles.option,\n                                    index === activeIndex && styles.active,\n                                    option.value === value && styles.selected,\n                                )}\n                                onMouseEnter={() => setActiveIndex(index)}\n                                onMouseDown={(event) => {\n                                    event.preventDefault();\n                                    handleSelect(option);\n                                }}\n                            >\n                                {option.label}\n                            </li>\n                        ))\n                    )}\n                </ul>\n            )}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","names":[],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — options/value/onChange\n * plus the shared field contract (label, placeholder, helperText, error, disabled,\n * className) and the combobox-specific knobs: filter, emptyMessage, portal. The body\n * is the listbox — open state, active descendant, type-ahead and the ARIA wiring —\n * and those cannot be separated without passing the same active index back and\n * forth.\n */\nimport { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Combobox.module.css\";\n\nexport interface ComboboxOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n    options: ComboboxOption[];\n    value: string;\n    onChange: (value: string) => void;\n    label?: string;\n    placeholder?: string;\n    helperText?: string;\n    error?: string;\n    disabled?: boolean;\n    /** Custom filter — return true to keep the option. Default is case-insensitive substring match on label. */\n    filter?: (option: ComboboxOption, query: string) => boolean;\n    /** Message shown when no option matches. */\n    emptyMessage?: string;\n    /**\n     * Render the list in a portal, positioned under the field. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the list —\n     * in the last row of a `DataTable` none of it was visible (measured in Chrome\n     * at 1440 px). In a portal it escapes the clip, takes the field's width,\n     * flips above the field when there is no room below, and follows it on\n     * scroll, resize and when the field or the list changes size.\n     */\n    portal?: boolean;\n    className?: string;\n}\n\n/** Gap between field and list, in px — the in-flow CSS uses the same 4 px. */\nconst LIST_OFFSET = 4;\n\nfunction defaultFilter(option: ComboboxOption, query: string): boolean {\n    if (!query) return true;\n    return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\n/**\n * Combobox — text input with a filterable dropdown of options.\n *\n * Selecting an option fires `onChange(value)`. Typing filters the list.\n * Keyboard: ArrowUp/ArrowDown to navigate, Enter to select, Esc to close.\n */\nexport function Combobox({\n    options,\n    value,\n    onChange,\n    label,\n    placeholder = \"Selecione\",\n    helperText,\n    error,\n    disabled,\n    filter = defaultFilter,\n    emptyMessage = \"Nenhuma opção encontrada\",\n    portal = true,\n    className,\n}: ComboboxProps) {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState(\"\");\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [fieldNode, setFieldNode] = useState<HTMLDivElement | null>(null);\n    const [listNode, setListNode] = useState<HTMLUListElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: fieldNode,\n        floating: listNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: LIST_OFFSET,\n        enabled: portal && open,\n        matchWidth: true,\n    });\n\n    const selectedLabel = useMemo(\n        () => options.find((o) => o.value === value)?.label ?? \"\",\n        [options, value],\n    );\n\n    const filtered = useMemo(\n        () => options.filter((o) => filter(o, query)),\n        [options, filter, query],\n    );\n\n    const closeAndReset = useCallback((): void => {\n        setOpen(false);\n        setQuery(\"\");\n        setActiveIndex(0);\n    }, []);\n\n    const handleSelect = useCallback(\n        (option: ComboboxOption): void => {\n            if (option.disabled) return;\n            onChange(option.value);\n            closeAndReset();\n        },\n        [onChange, closeAndReset],\n    );\n\n    /**\n     * Close on a press outside both the field and the list.\n     *\n     * The list is checked on its own because in a portal it is not inside the\n     * field's wrapper: a press on its scrollbar, or on the empty message, would\n     * otherwise count as outside and close it.\n     */\n    useEffect(() => {\n        if (!open) return;\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootRef.current?.contains(target) || listNode?.contains(target)) return;\n            closeAndReset();\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => window.removeEventListener(\"mousedown\", onDown);\n    }, [open, closeAndReset, listNode]);\n\n    /**\n     * Keyboard model of the input.\n     *\n     * `Escape` calls `preventDefault()` only while the list is open: that marks the\n     * key as consumed, so an enclosing `Modal` or `Drawer` stays open and the next\n     * `Escape` reaches it. With the list closed the key is left alone and dismisses\n     * the enclosing layer, as the user expects.\n     */\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            setOpen(true);\n            setActiveIndex((current) => Math.min(filtered.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            const option = filtered[activeIndex];\n            if (option) handleSelect(option);\n        } else if (event.key === \"Escape\") {\n            if (open) event.preventDefault();\n            closeAndReset();\n        }\n    };\n\n    const list = (\n        <ul\n            ref={setListNode}\n            id={`${id}-listbox`}\n            role=\"listbox\"\n            className={cn(styles.menu, portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {filtered.length === 0 ? (\n                <li className={styles.empty}>{emptyMessage}</li>\n            ) : (\n                filtered.map((option, index) => (\n                    <li\n                        key={option.value}\n                        role=\"option\"\n                        aria-selected={option.value === value}\n                        className={cn(\n                            styles.option,\n                            index === activeIndex && styles.active,\n                            option.value === value && styles.selected,\n                        )}\n                        onMouseEnter={() => setActiveIndex(index)}\n                        onMouseDown={(event) => {\n                            event.preventDefault();\n                            handleSelect(option);\n                        }}\n                    >\n                        {option.label}\n                    </li>\n                ))\n            )}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} className={cn(styles.wrapper, error && styles.error, className)}>\n            {label && (\n                <label htmlFor={id} className={styles.label}>\n                    {label}\n                </label>\n            )}\n            <div ref={setFieldNode} className={styles.field}>\n                <input\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    aria-controls={`${id}-listbox`}\n                    aria-autocomplete=\"list\"\n                    className={styles.input}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    value={open ? query : selectedLabel}\n                    onFocus={() => setOpen(true)}\n                    onChange={(event) => {\n                        setQuery(event.target.value);\n                        setOpen(true);\n                        setActiveIndex(0);\n                    }}\n                    onKeyDown={handleKeyDown}\n                />\n                <span className={styles.caret} aria-hidden>\n                    ▾\n                </span>\n            </div>\n            {open && (portal ? <Portal>{list}</Portal> : list)}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Combobox/Combobox.module.cjs

@@ -1,3 +1,3 @@
 require("../../styles/component/Combobox.css");
-var e=`tempest_wrapper_TNvle`,t=`tempest_label_KVkZO`,n=`tempest_field_BenH0`,r=`tempest_input_-HTv1`,i=`tempest_caret_jRplQ`,a=`tempest_menu_zPQG3`,o=`tempest_option_vhhn5`,s=`tempest_active_XCgtX`,c=`tempest_selected_T6nm2`,l=`tempest_empty_Ahw5K`,u=`tempest_helper_OzB7V`,d=`tempest_errorText_X18sQ`,f=`tempest_error_bnVuM`,p={wrapper:e,label:t,field:n,input:r,caret:i,menu:a,option:o,active:s,selected:c,empty:l,helper:u,errorText:d,error:f};exports.active=s,exports.caret=i,exports.default=p,exports.empty=l,exports.error=f,exports.errorText=d,exports.field=n,exports.helper=u,exports.input=r,exports.label=t,exports.menu=a,exports.option=o,exports.selected=c,exports.wrapper=e;
+var e=`tempest_wrapper_TNvle`,t=`tempest_label_KVkZO`,n=`tempest_field_BenH0`,r=`tempest_input_-HTv1`,i=`tempest_caret_jRplQ`,a=`tempest_menu_zPQG3`,o=`tempest_option_vhhn5`,s=`tempest_active_XCgtX`,c=`tempest_selected_T6nm2`,l=`tempest_empty_Ahw5K`,u=`tempest_helper_OzB7V`,d=`tempest_errorText_X18sQ`,f=`tempest_error_bnVuM`,p=`tempest_portalled_C9jFy`,m={wrapper:e,label:t,field:n,input:r,caret:i,menu:a,option:o,active:s,selected:c,empty:l,helper:u,errorText:d,error:f,portalled:p};exports.active=s,exports.caret=i,exports.default=m,exports.empty=l,exports.error=f,exports.errorText=d,exports.field=n,exports.helper=u,exports.input=r,exports.label=t,exports.menu=a,exports.option=o,exports.portalled=p,exports.selected=c,exports.wrapper=e;
 //# sourceMappingURL=Combobox.module.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.module.cjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    position: relative;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 32px 0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.input:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n}\n\n.caret {\n    position: absolute;\n    right: 12px;\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.menu {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-dropdown);\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    max-height: 280px;\n    overflow-y: auto;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n}\n\n.option {\n    display: flex;\n    align-items: center;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .option:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.option.active {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n.option.selected {\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.empty {\n    padding: var(--tempest-space-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n}\n\n.wrapper.error .input {\n    border-color: var(--tempest-danger);\n}\n"],"mappings":";"}
+{"version":3,"file":"Combobox.module.cjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    position: relative;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 32px 0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.input:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n}\n\n.caret {\n    position: absolute;\n    right: 12px;\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.menu {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-dropdown);\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    max-height: 280px;\n    overflow-y: auto;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n}\n\n.option {\n    display: flex;\n    align-items: center;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .option:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.option.active {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n.option.selected {\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.empty {\n    padding: var(--tempest-space-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n}\n\n.wrapper.error .input {\n    border-color: var(--tempest-danger);\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    right: auto;\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}

package/dist/components/Combobox/Combobox.module.js

@@ -1,6 +1,6 @@
 import "../../styles/component/Combobox.css";
 //#region src/components/Combobox/Combobox.module.css
-var e = "tempest_wrapper_TNvle", t = "tempest_label_KVkZO", n = "tempest_field_BenH0", r = "tempest_input_-HTv1", i = "tempest_caret_jRplQ", a = "tempest_menu_zPQG3", o = "tempest_option_vhhn5", s = "tempest_active_XCgtX", c = "tempest_selected_T6nm2", l = "tempest_empty_Ahw5K", u = "tempest_helper_OzB7V", d = "tempest_errorText_X18sQ", f = "tempest_error_bnVuM", p = {
+var e = "tempest_wrapper_TNvle", t = "tempest_label_KVkZO", n = "tempest_field_BenH0", r = "tempest_input_-HTv1", i = "tempest_caret_jRplQ", a = "tempest_menu_zPQG3", o = "tempest_option_vhhn5", s = "tempest_active_XCgtX", c = "tempest_selected_T6nm2", l = "tempest_empty_Ahw5K", u = "tempest_helper_OzB7V", d = "tempest_errorText_X18sQ", f = "tempest_error_bnVuM", p = "tempest_portalled_C9jFy", m = {
 	wrapper: e,
 	label: t,
 	field: n,
@@ -13,9 +13,10 @@ var e = "tempest_wrapper_TNvle", t = "tempest_label_KVkZO", n = "tempest_field_B
 	empty: l,
 	helper: u,
 	errorText: d,
-	error: f
+	error: f,
+	portalled: p
 };
 //#endregion
-export { s as active, i as caret, p as default, l as empty, f as error, d as errorText, n as field, u as helper, r as input, t as label, a as menu, o as option, c as selected, e as wrapper };
+export { s as active, i as caret, m as default, l as empty, f as error, d as errorText, n as field, u as helper, r as input, t as label, a as menu, o as option, p as portalled, c as selected, e as wrapper };
 
 //# sourceMappingURL=Combobox.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.module.js","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    position: relative;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 32px 0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.input:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n}\n\n.caret {\n    position: absolute;\n    right: 12px;\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.menu {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-dropdown);\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    max-height: 280px;\n    overflow-y: auto;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n}\n\n.option {\n    display: flex;\n    align-items: center;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .option:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.option.active {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n.option.selected {\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.empty {\n    padding: var(--tempest-space-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n}\n\n.wrapper.error .input {\n    border-color: var(--tempest-danger);\n}\n"],"mappings":";"}
+{"version":3,"file":"Combobox.module.js","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    position: relative;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n    line-height: var(--tempest-leading-snug);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.input {\n    width: 100%;\n    height: var(--tempest-control-height-md);\n    padding: 0 32px 0 var(--tempest-control-padding-md);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-control-radius);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-control-font-md);\n    box-shadow: var(--tempest-shadow-xs);\n    transition: var(--tempest-transition-color), var(--tempest-transition-shadow);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-subtle);\n}\n\n.input:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color);\n}\n\n.input:disabled {\n    background-color: var(--tempest-surface);\n    cursor: not-allowed;\n}\n\n.caret {\n    position: absolute;\n    right: 12px;\n    pointer-events: none;\n    color: var(--tempest-text-muted);\n}\n\n.menu {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-dropdown);\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    max-height: 280px;\n    overflow-y: auto;\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n}\n\n.option {\n    display: flex;\n    align-items: center;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .option:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.option.active {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n.option.selected {\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.empty {\n    padding: var(--tempest-space-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger);\n}\n\n.wrapper.error .input {\n    border-color: var(--tempest-danger);\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    right: auto;\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}

package/dist/components/ContextMenu/ContextMenu.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../Portal/Portal.cjs"),n=require("./ContextMenu.module.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=10;function o(e){return`separator`in e&&e.separator===!0}function s({items:s,children:l,className:u,trigger:d=`contextmenu`,longPressDelay:f=500,viewportMargin:p=8}){let[m,h]=(0,r.useState)(!1),[g,_]=(0,r.useState)({x:0,y:0}),[v,y]=(0,r.useState)(-1),b=(0,r.useId)(),[x,S]=(0,r.useState)(null),C=(0,r.useRef)([]),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=s.map((e,t)=>!o(e)&&!e.disabled?t:-1).filter(e=>e!==-1),D=(0,r.useCallback)(()=>{h(!1),y(-1)},[]),O=(0,r.useCallback)(e=>{_(e),y(-1),h(!0)},[]),k=(0,r.useCallback)(()=>{w.current!==null&&(clearTimeout(w.current),w.current=null),T.current=null},[]);(0,r.useEffect)(()=>k,[k]);let A=e=>{d!==`click`&&(e.preventDefault(),O({x:e.clientX,y:e.clientY}))},j=e=>{d!==`contextmenu`&&O({x:e.clientX,y:e.clientY})},M=e=>{if(f<=0||e.pointerType===`mouse`)return;let t={x:e.clientX,y:e.clientY};T.current=t,k(),T.current=t,w.current=setTimeout(()=>{w.current=null,T.current=null,c(),O(t)},f)},N=e=>{let t=T.current;t&&w.current!==null&&Math.hypot(e.clientX-t.x,e.clientY-t.y)>a&&k()};(0,r.useEffect)(()=>{if(!m)return;let e=e=>{if(e.key===`Escape`){D();return}let t=t=>{e.preventDefault(),y(t),C.current[t]?.focus()};if(E.length===0)return;let n=E.indexOf(v);e.key===`ArrowDown`&&t(E[(n+1)%E.length]??-1),e.key===`ArrowUp`&&t(E[(n-1+E.length)%E.length]??-1),e.key===`Home`&&t(E[0]??-1),e.key===`End`&&t(E[E.length-1]??-1)},t=e=>{x&&!x.contains(e.target)&&D()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),window.addEventListener(`resize`,D),window.addEventListener(`scroll`,D,!0),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t),window.removeEventListener(`resize`,D),window.removeEventListener(`scroll`,D,!0)}},[m,v,E,D,x]),(0,r.useLayoutEffect)(()=>{if(!m||!x)return;x.focus({preventScroll:!0});let{offsetWidth:e,offsetHeight:t}=x;if(e===0&&t===0)return;let n=window.innerWidth-e-p,r=window.innerHeight-t-p,i=Math.max(p,Math.min(g.x,n)),a=Math.max(p,Math.min(g.y,r));(i!==g.x||a!==g.y)&&_({x:i,y:a})},[m,x,g.x,g.y,p]);let P=e=>{e.onSelect?.(),D()};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`span`,{className:n.default.root,onContextMenu:A,onClick:j,onPointerDown:M,onPointerMove:N,onPointerUp:k,onPointerCancel:k,children:l}),m&&(0,i.jsx)(t.Portal,{children:(0,i.jsx)(`ul`,{ref:S,id:b,role:`menu`,"aria-orientation":`vertical`,tabIndex:-1,className:e.cn(n.default.menu,u),style:{top:g.y,left:g.x},children:s.map((t,r)=>o(t)?(0,i.jsx)(`li`,{role:`separator`,className:n.default.separator,"aria-hidden":!0},`separator-${r}`):(0,i.jsx)(`li`,{role:`none`,children:(0,i.jsx)(`button`,{ref:e=>{C.current[r]=e},type:`button`,role:`menuitem`,className:e.cn(n.default.item,t.danger&&n.default.danger,v===r&&n.default.active),disabled:t.disabled,onClick:()=>P(t),onMouseEnter:()=>y(r),children:t.label})},`item-${r}`))})})]})}function c(){typeof window>`u`||window.addEventListener(`click`,e=>{e.preventDefault(),e.stopPropagation()},{capture:!0,once:!0})}exports.ContextMenu=s;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/escape-layer.cjs"),n=require("../Portal/Portal.cjs"),r=require("./ContextMenu.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=10;function s(e){return`separator`in e&&e.separator===!0}function c({items:c,children:u,className:d,trigger:f=`contextmenu`,longPressDelay:p=500,viewportMargin:m=8}){let[h,g]=(0,i.useState)(!1),[_,v]=(0,i.useState)({x:0,y:0}),[y,b]=(0,i.useState)(-1),x=(0,i.useId)(),[S,C]=(0,i.useState)(null),w=(0,i.useRef)([]),T=(0,i.useRef)(null),E=(0,i.useRef)(null),D=c.map((e,t)=>!s(e)&&!e.disabled?t:-1).filter(e=>e!==-1),O=(0,i.useCallback)(()=>{g(!1),b(-1)},[]),k=(0,i.useCallback)(e=>{v(e),b(-1),g(!0)},[]),A=(0,i.useCallback)(()=>{T.current!==null&&(clearTimeout(T.current),T.current=null),E.current=null},[]);(0,i.useEffect)(()=>A,[A]);let j=e=>{f!==`click`&&(e.preventDefault(),k({x:e.clientX,y:e.clientY}))},M=e=>{f!==`contextmenu`&&k({x:e.clientX,y:e.clientY})},N=e=>{if(p<=0||e.pointerType===`mouse`)return;let t={x:e.clientX,y:e.clientY};E.current=t,A(),E.current=t,T.current=setTimeout(()=>{T.current=null,E.current=null,l(),k(t)},p)},P=e=>{let t=E.current;t&&T.current!==null&&Math.hypot(e.clientX-t.x,e.clientY-t.y)>o&&A()};t.useEscapeLayer(h,O),(0,i.useEffect)(()=>{if(!h)return;let e=e=>{let t=t=>{e.preventDefault(),b(t),w.current[t]?.focus()};if(D.length===0)return;let n=D.indexOf(y);e.key===`ArrowDown`&&t(D[(n+1)%D.length]??-1),e.key===`ArrowUp`&&t(D[(n-1+D.length)%D.length]??-1),e.key===`Home`&&t(D[0]??-1),e.key===`End`&&t(D[D.length-1]??-1)},t=e=>{S&&!S.contains(e.target)&&O()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),window.addEventListener(`resize`,O),window.addEventListener(`scroll`,O,!0),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t),window.removeEventListener(`resize`,O),window.removeEventListener(`scroll`,O,!0)}},[h,y,D,O,S]),(0,i.useLayoutEffect)(()=>{if(!h||!S)return;S.focus({preventScroll:!0});let{offsetWidth:e,offsetHeight:t}=S;if(e===0&&t===0)return;let n=window.innerWidth-e-m,r=window.innerHeight-t-m,i=Math.max(m,Math.min(_.x,n)),a=Math.max(m,Math.min(_.y,r));(i!==_.x||a!==_.y)&&v({x:i,y:a})},[h,S,_.x,_.y,m]);let F=e=>{e.onSelect?.(),O()};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`span`,{className:r.default.root,onContextMenu:j,onClick:M,onPointerDown:N,onPointerMove:P,onPointerUp:A,onPointerCancel:A,children:u}),h&&(0,a.jsx)(n.Portal,{children:(0,a.jsx)(`ul`,{ref:C,id:x,role:`menu`,"aria-orientation":`vertical`,tabIndex:-1,className:e.cn(r.default.menu,d),style:{top:_.y,left:_.x},children:c.map((t,n)=>s(t)?(0,a.jsx)(`li`,{role:`separator`,className:r.default.separator,"aria-hidden":!0},`separator-${n}`):(0,a.jsx)(`li`,{role:`none`,children:(0,a.jsx)(`button`,{ref:e=>{w.current[n]=e},type:`button`,role:`menuitem`,className:e.cn(r.default.item,t.danger&&r.default.danger,y===n&&r.default.active),disabled:t.disabled,onClick:()=>F(t),onMouseEnter:()=>b(n),children:t.label})},`item-${n}`))})})]})}function l(){typeof window>`u`||window.addEventListener(`click`,e=>{e.preventDefault(),e.stopPropagation()},{capture:!0,once:!0})}exports.ContextMenu=c;
 //# sourceMappingURL=ContextMenu.cjs.map