tempest-react-sdk 0.66.0 → 0.68.0

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,144 +1,168 @@
 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";
+import { Portal as t } from "../Portal/Portal.js";
+import { useAnchorPosition as n } from "../Portal/anchor-position.js";
+import r from "./DropdownMenu.module.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/DropdownMenu/DropdownMenu.tsx
-function l(e) {
+function d(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;
+		case "bottom-end": return r.bottomEnd;
+		case "top-start": return r.topStart;
+		case "top-end": return r.topEnd;
+		default: return r.bottomStart;
 	}
 }
-function u(e) {
+var f = {
+	"bottom-start": ["bottom", "start"],
+	"bottom-end": ["bottom", "end"],
+	"top-start": ["top", "start"],
+	"top-end": ["top", "end"]
+}, p = 4;
+function m(e) {
 	return (e.type === "item" || e.type === "checkbox") && !e.disabled;
 }
-function d({ trigger: d, items: f, placement: p = "bottom-start", className: m }) {
-	let [h, g] = o(!1), [_, v] = o(-1), y = i(), b = a(null), x = a([]), S = a(null), C = f.map((e, t) => u(e) ? t : -1).filter((e) => e !== -1), w = n(() => {
-		b.current?.querySelector("[aria-haspopup='menu']")?.focus();
-	}, []), T = n((e) => {
-		g(!1), v(-1), e && w();
-	}, [w]), E = n((e) => {
-		v(e), x.current[e]?.focus();
-	}, []), D = (e) => {
-		if (C.length === 0) return;
-		let t = (C.indexOf(_) + e + C.length) % C.length;
-		E(C[t] ?? -1);
-	};
-	r(() => {
-		if (!h || S.current === null) return;
-		let e = S.current === "last" ? C.at(-1) : C[0];
-		S.current = null, e !== void 0 && E(e);
+function h({ trigger: h, items: g, placement: _ = "bottom-start", portal: v = !0, className: y }) {
+	let [b, x] = c(!1), [S, C] = c(-1), w = o(), [T, E] = c(null), [D, O] = c(null), k = s([]), A = s(null), j = g.map((e, t) => m(e) ? t : -1).filter((e) => e !== -1), M = i(() => {
+		T?.querySelector("[aria-haspopup='menu']")?.focus();
+	}, [T]), N = i((e) => {
+		x(!1), C(-1), e && M();
+	}, [M]), P = i((e) => {
+		C(e), k.current[e]?.focus();
+	}, []), F = (e) => {
+		if (j.length === 0) return;
+		let t = (j.indexOf(S) + e + j.length) % j.length;
+		P(j[t] ?? -1);
+	}, [I, L] = f[_], R = n({
+		anchor: T,
+		floating: D,
+		side: I,
+		align: L,
+		offset: p,
+		enabled: v && b
+	});
+	a(() => {
+		if (!b || !D || A.current === null) return;
+		let e = A.current === "last" ? j.at(-1) : j[0];
+		A.current = null, e !== void 0 && P(e);
 	}, [
-		h,
-		C,
-		E
-	]), r(() => {
-		if (!h) return;
+		b,
+		D,
+		j,
+		P
+	]), a(() => {
+		if (!b) return;
 		let e = (e) => {
-			b.current && !b.current.contains(e.target) && T(!1);
+			let t = e.target;
+			T?.contains(t) || D?.contains(t) || N(!1);
 		};
 		return window.addEventListener("mousedown", e), () => window.removeEventListener("mousedown", e);
-	}, [h, T]);
-	let O = (e) => {
-		S.current = e, g(!0);
-	}, k = (e) => {
-		if (d.props.onKeyDown?.(e), !e.defaultPrevented) {
-			if (e.key === "ArrowDown" || !h && (e.key === "Enter" || e.key === " ")) {
-				e.preventDefault(), O("first");
+	}, [
+		b,
+		N,
+		T,
+		D
+	]);
+	let z = (e) => {
+		A.current = e, x(!0);
+	}, B = (e) => {
+		if (h.props.onKeyDown?.(e), !e.defaultPrevented) {
+			if (e.key === "ArrowDown" || !b && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault(), z("first");
 				return;
 			}
-			e.key === "ArrowUp" && (e.preventDefault(), O("last"));
+			e.key === "ArrowUp" && (e.preventDefault(), z("last"));
 		}
-	}, A = (e) => {
+	}, V = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), D(1);
+				e.preventDefault(), F(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), D(-1);
+				e.preventDefault(), F(-1);
 				break;
 			case "Home":
-				e.preventDefault(), C[0] !== void 0 && E(C[0]);
+				e.preventDefault(), j[0] !== void 0 && P(j[0]);
 				break;
 			case "End": {
 				e.preventDefault();
-				let t = C.at(-1);
-				t !== void 0 && E(t);
+				let t = j.at(-1);
+				t !== void 0 && P(t);
 				break;
 			}
 			case "Escape":
-				e.preventDefault(), T(!0);
+				e.preventDefault(), N(!0);
 				break;
-			case "Tab": T(!1);
+			case "Tab": N(!0);
 		}
-	}, j = (e) => {
-		if (d.props.onClick?.(e), !e.defaultPrevented) {
-			if (h) {
-				T(!1);
+	}, H = (e) => {
+		if (h.props.onClick?.(e), !e.defaultPrevented) {
+			if (b) {
+				N(!1);
 				return;
 			}
-			O("first");
+			z("first");
 		}
-	}, M = {
-		...d,
+	}, U = {
+		...h,
 		props: {
-			...d.props,
-			onClick: j,
-			onKeyDown: k,
-			"aria-expanded": h,
-			"aria-controls": y,
+			...h.props,
+			onClick: H,
+			onKeyDown: B,
+			"aria-expanded": b,
+			"aria-controls": w,
 			"aria-haspopup": "menu"
 		}
-	}, N = (e) => {
-		e.onSelect(), e.type !== "checkbox" && T(!0);
-	};
-	return /* @__PURE__ */ c("span", {
-		ref: b,
-		className: t.root,
-		children: [M, h && /* @__PURE__ */ s("ul", {
-			id: y,
-			role: "menu",
-			className: e(t.menu, l(p), m),
-			onKeyDown: A,
-			children: f.map((n, r) => {
-				if (n.type === "separator") return /* @__PURE__ */ s("li", {
-					role: "separator",
-					className: t.separator,
-					"aria-hidden": !0
-				}, n.id);
-				if (n.type === "label") return /* @__PURE__ */ s("li", {
-					role: "presentation",
-					className: t.label,
-					children: n.label
-				}, n.id);
-				let i = n.type === "checkbox";
-				return /* @__PURE__ */ s("li", {
-					role: "none",
-					children: /* @__PURE__ */ c("button", {
-						ref: (e) => {
-							x.current[r] = e;
-						},
-						type: "button",
-						role: i ? "menuitemcheckbox" : "menuitem",
-						"aria-checked": i ? n.checked : void 0,
-						tabIndex: _ === r ? 0 : -1,
-						className: e(t.item, n.type === "item" && n.danger && t.danger, _ === r && t.active),
-						disabled: n.disabled,
-						onClick: () => N(n),
-						onMouseEnter: () => v(r),
-						children: [n.icon && /* @__PURE__ */ s("span", {
-							"aria-hidden": !0,
-							children: n.icon
-						}), n.label]
-					})
-				}, n.id);
-			})
-		})]
+	}, W = (e) => {
+		e.onSelect(), e.type !== "checkbox" && N(!0);
+	}, G = /* @__PURE__ */ l("ul", {
+		ref: O,
+		id: w,
+		role: "menu",
+		className: e(r.menu, v ? r.portalled : d(_), y),
+		style: R,
+		onKeyDown: V,
+		children: g.map((t, n) => {
+			if (t.type === "separator") return /* @__PURE__ */ l("li", {
+				role: "separator",
+				className: r.separator,
+				"aria-hidden": !0
+			}, t.id);
+			if (t.type === "label") return /* @__PURE__ */ l("li", {
+				role: "presentation",
+				className: r.label,
+				children: t.label
+			}, t.id);
+			let i = t.type === "checkbox";
+			return /* @__PURE__ */ l("li", {
+				role: "none",
+				children: /* @__PURE__ */ u("button", {
+					ref: (e) => {
+						k.current[n] = e;
+					},
+					type: "button",
+					role: i ? "menuitemcheckbox" : "menuitem",
+					"aria-checked": i ? t.checked : void 0,
+					tabIndex: S === n ? 0 : -1,
+					className: e(r.item, t.type === "item" && t.danger && r.danger, S === n && r.active),
+					disabled: t.disabled,
+					onClick: () => W(t),
+					onMouseEnter: () => C(n),
+					children: [t.icon && /* @__PURE__ */ l("span", {
+						"aria-hidden": !0,
+						children: t.icon
+					}), t.label]
+				})
+			}, t.id);
+		})
+	});
+	return /* @__PURE__ */ u("span", {
+		ref: E,
+		className: r.root,
+		children: [U, b && (v ? /* @__PURE__ */ l(t, { children: G }) : G)]
 	});
 }
 //#endregion
-export { d as DropdownMenu };
+export { h as DropdownMenu };
 
 //# sourceMappingURL=DropdownMenu.js.map

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, function-lines — the body owns placement, outside-\n * click, and the whole APG menu-button keyboard model, which has to see the entire\n * entry list to know where the next stop is. Splitting it would move the focus\n * bookkeeping away from the list it indexes into.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, 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    | {\n          /**\n           * An entry that carries on/off state.\n           *\n           * Rendered as `role=\"menuitemcheckbox\"` with `aria-checked`, which is how\n           * a screen reader announces \"checked\" instead of leaving the state\n           * invisible. Selecting it does **not** close the menu: toggling two\n           * settings in a row is the ordinary case, and closing after the first\n           * would make the second a second trip.\n           */\n          type: \"checkbox\";\n          id: string;\n          label: ReactNode;\n          icon?: ReactNode;\n          checked: boolean;\n          disabled?: boolean;\n          onSelect: () => void;\n      }\n    | { type: \"separator\"; id: string }\n    | { type: \"label\"; id: string; label: ReactNode };\n\n/** The entry kinds a user can move focus to and activate. */\ntype SelectableEntry = Extract<DropdownMenuEntry, { type: \"item\" | \"checkbox\" }>;\n\nexport interface DropdownMenuProps {\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        onKeyDown?: (e: ReactKeyboardEvent) => 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/** Whether an entry can take focus — an item or checkbox that is not disabled. */\nfunction isSelectable(entry: DropdownMenuEntry): entry is SelectableEntry {\n    return (entry.type === \"item\" || entry.type === \"checkbox\") && !entry.disabled;\n}\n\n/**\n * Dropdown menu — a list of actions anchored to a trigger, following the\n * [APG menu button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).\n *\n * `role=\"menu\"` is a promise about the keyboard, and this component keeps it:\n *\n * - `Enter`, `Space` or `ArrowDown` on the trigger opens and focuses the first\n *   entry; `ArrowUp` opens and focuses the last.\n * - `ArrowUp` / `ArrowDown` move with wrap, `Home` / `End` jump to the ends.\n * - `Escape` closes and returns focus to the trigger, so the next `Tab` continues\n *   from where the user was rather than from the top of the document.\n * - `Tab` closes the menu and lets the page's own tab order take over.\n * - Focus is managed: entries carry `tabIndex={-1}` and only the active one is\n *   `0`, which is what stops `Tab` from walking the menu one entry at a time.\n *\n * Disabled entries, separators and labels are skipped by every movement.\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    const pendingFocus = useRef<\"first\" | \"last\" | null>(null);\n\n    const selectable = items\n        .map((entry, index) => (isSelectable(entry) ? index : -1))\n        .filter((index) => index !== -1);\n\n    /**\n     * Focus the trigger again.\n     *\n     * Found through the `aria-haspopup` this component puts on it, rather than\n     * through a ref: `ref` lives in different places in React 18 and 19, and a\n     * consumer's custom trigger is under no obligation to forward one. The\n     * attribute is on the element either way.\n     *\n     * @returns Nothing.\n     */\n    const focusTrigger = useCallback((): void => {\n        rootRef.current?.querySelector<HTMLElement>(\"[aria-haspopup='menu']\")?.focus();\n    }, []);\n\n    const close = useCallback(\n        (restoreFocus: boolean): void => {\n            setOpen(false);\n            setActiveIndex(-1);\n            if (restoreFocus) focusTrigger();\n        },\n        [focusTrigger],\n    );\n\n    const focusIndex = useCallback((index: number): void => {\n        setActiveIndex(index);\n        itemRefs.current[index]?.focus();\n    }, []);\n\n    /**\n     * Move focus to the entry `step` positions away, wrapping at both ends.\n     *\n     * Walks the selectable positions rather than the raw list, so separators,\n     * labels and disabled entries are never a stop.\n     */\n    const move = (step: number): void => {\n        if (selectable.length === 0) return;\n        const current = selectable.indexOf(activeIndex);\n        const next = (current + step + selectable.length) % selectable.length;\n        focusIndex(selectable[next] ?? -1);\n    };\n\n    useEffect(() => {\n        if (!open || pendingFocus.current === null) return;\n        const target = pendingFocus.current === \"last\" ? selectable.at(-1) : selectable[0];\n        pendingFocus.current = null;\n        if (target !== undefined) focusIndex(target);\n    }, [open, selectable, focusIndex]);\n\n    useEffect(() => {\n        if (!open) return;\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.current.contains(event.target as Node)) close(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => window.removeEventListener(\"mousedown\", onDown);\n    }, [open, close]);\n\n    const openWith = (edge: \"first\" | \"last\"): void => {\n        pendingFocus.current = edge;\n        setOpen(true);\n    };\n\n    const handleTriggerKeyDown = (event: ReactKeyboardEvent): void => {\n        trigger.props.onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        if (event.key === \"ArrowDown\" || (!open && (event.key === \"Enter\" || event.key === \" \"))) {\n            event.preventDefault();\n            openWith(\"first\");\n            return;\n        }\n        if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            openWith(\"last\");\n        }\n    };\n\n    /**\n     * Keyboard model of the open menu.\n     *\n     * Handled on the list rather than on `window`: focus is inside the menu by\n     * then, so the keys arrive here by bubbling and cannot be pre-empted by an\n     * unrelated global listener — which is how the arrows used to go missing in a\n     * host application.\n     */\n    const handleMenuKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>): void => {\n        switch (event.key) {\n            case \"ArrowDown\":\n                event.preventDefault();\n                move(1);\n                break;\n            case \"ArrowUp\":\n                event.preventDefault();\n                move(-1);\n                break;\n            case \"Home\":\n                event.preventDefault();\n                if (selectable[0] !== undefined) focusIndex(selectable[0]);\n                break;\n            case \"End\": {\n                event.preventDefault();\n                const last = selectable.at(-1);\n                if (last !== undefined) focusIndex(last);\n                break;\n            }\n            case \"Escape\":\n                event.preventDefault();\n                close(true);\n                break;\n            case \"Tab\":\n                close(false);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        if (event.defaultPrevented) return;\n        if (open) {\n            close(false);\n            return;\n        }\n        openWith(\"first\");\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            onKeyDown: handleTriggerKeyDown,\n            \"aria-expanded\": open,\n            \"aria-controls\": id,\n            \"aria-haspopup\": \"menu\" as const,\n        },\n    } as ReactElement;\n\n    const handleSelect = (entry: SelectableEntry): void => {\n        entry.onSelect();\n        if (entry.type === \"checkbox\") return;\n        close(true);\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                    onKeyDown={handleMenuKeyDown}\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                        const checkbox = entry.type === \"checkbox\";\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={checkbox ? \"menuitemcheckbox\" : \"menuitem\"}\n                                    aria-checked={checkbox ? entry.checked : undefined}\n                                    tabIndex={activeIndex === index ? 0 : -1}\n                                    className={cn(\n                                        styles.item,\n                                        entry.type === \"item\" && 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":";;;;;AA4DA,SAAS,EAAe,GAA0C;CAC9D,QAAQ,GAAR;EACI,KAAK,cACD,OAAO,EAAO;EAClB,KAAK,aACD,OAAO,EAAO;EAClB,KAAK,WACD,OAAO,EAAO;EAElB,SACI,OAAO,EAAO;CACtB;AACJ;AAGA,SAAS,EAAa,GAAoD;CACtE,QAAQ,EAAM,SAAS,UAAU,EAAM,SAAS,eAAe,CAAC,EAAM;AAC1E;AAmBA,SAAgB,EAAa,EACzB,YACA,UACA,eAAY,gBACZ,gBACkB;CAClB,IAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAa,KAAkB,EAAiB,EAAE,GACnD,IAAK,EAAM,GACX,IAAU,EAAwB,IAAI,GACtC,IAAW,EAAwC,CAAC,CAAC,GACrD,IAAe,EAAgC,IAAI,GAEnD,IAAa,EACd,KAAK,GAAO,MAAW,EAAa,CAAK,IAAI,IAAQ,EAAG,CAAC,CACzD,QAAQ,MAAU,MAAU,EAAE,GAY7B,IAAe,QAAwB;EACzC,EAAQ,SAAS,cAA2B,wBAAwB,CAAC,EAAE,MAAM;CACjF,GAAG,CAAC,CAAC,GAEC,IAAQ,GACT,MAAgC;EAG7B,AAFA,EAAQ,EAAK,GACb,EAAe,EAAE,GACb,KAAc,EAAa;CACnC,GACA,CAAC,CAAY,CACjB,GAEM,IAAa,GAAa,MAAwB;EAEpD,AADA,EAAe,CAAK,GACpB,EAAS,QAAQ,EAAM,EAAE,MAAM;CACnC,GAAG,CAAC,CAAC,GAQC,KAAQ,MAAuB;EACjC,IAAI,EAAW,WAAW,GAAG;EAE7B,IAAM,KADU,EAAW,QAAQ,CACrB,IAAU,IAAO,EAAW,UAAU,EAAW;EAC/D,EAAW,EAAW,MAAS,EAAE;CACrC;CASA,AAPA,QAAgB;EACZ,IAAI,CAAC,KAAQ,EAAa,YAAY,MAAM;EAC5C,IAAM,IAAS,EAAa,YAAY,SAAS,EAAW,GAAG,EAAE,IAAI,EAAW;EAEhF,AADA,EAAa,UAAU,MACnB,MAAW,KAAA,KAAW,EAAW,CAAM;CAC/C,GAAG;EAAC;EAAM;EAAY;CAAU,CAAC,GAEjC,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,KAAU,MAA4B;GACxC,AAAI,EAAQ,WAAW,CAAC,EAAQ,QAAQ,SAAS,EAAM,MAAc,KAAG,EAAM,EAAK;EACvF;EAEA,OADA,OAAO,iBAAiB,aAAa,CAAM,SAC9B,OAAO,oBAAoB,aAAa,CAAM;CAC/D,GAAG,CAAC,GAAM,CAAK,CAAC;CAEhB,IAAM,KAAY,MAAiC;EAE/C,AADA,EAAa,UAAU,GACvB,EAAQ,EAAI;CAChB,GAEM,KAAwB,MAAoC;EAC9D,MAAQ,MAAM,YAAY,CAAK,GAC3B,GAAM,kBACV;OAAI,EAAM,QAAQ,eAAgB,CAAC,MAAS,EAAM,QAAQ,WAAW,EAAM,QAAQ,MAAO;IAEtF,AADA,EAAM,eAAe,GACrB,EAAS,OAAO;IAChB;GACJ;GACA,AAAI,EAAM,QAAQ,cACd,EAAM,eAAe,GACrB,EAAS,MAAM;EAHnB;CAKJ,GAUM,KAAqB,MAAsD;EAC7E,QAAQ,EAAM,KAAd;GACI,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAK,CAAC;IACN;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAK,EAAE;IACP;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACjB,EAAW,OAAO,KAAA,KAAW,EAAW,EAAW,EAAE;IACzD;GACJ,KAAK,OAAO;IACR,EAAM,eAAe;IACrB,IAAM,IAAO,EAAW,GAAG,EAAE;IAC7B,AAAI,MAAS,KAAA,KAAW,EAAW,CAAI;IACvC;GACJ;GACA,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAM,EAAI;IACV;GACJ,KAAK,OACD,EAAM,EAAK;EAInB;CACJ,GAEM,KAAsB,MAAkC;EAC1D,MAAQ,MAAM,UAAU,CAAK,GACzB,GAAM,kBACV;OAAI,GAAM;IACN,EAAM,EAAK;IACX;GACJ;GACA,EAAS,OAAO;EADhB;CAEJ,GAEM,IAAe;EACjB,GAAG;EACH,OAAO;GACH,GAAG,EAAQ;GACX,SAAS;GACT,WAAW;GACX,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;EACrB;CACJ,GAEM,KAAgB,MAAiC;EACnD,EAAM,SAAS,GACX,EAAM,SAAS,cACnB,EAAM,EAAI;CACd;CAEA,OACI,kBAAC,QAAD;EAAM,KAAK;EAAS,WAAW,EAAO;EAAtC,UAAA,CACK,GACA,KACG,kBAAC,MAAD;GACQ;GACJ,MAAK;GACL,WAAW,EAAG,EAAO,MAAM,EAAe,CAAS,GAAG,CAAS;GAC/D,WAAW;GAEV,UAAA,EAAM,KAAK,GAAO,MAAU;IACzB,IAAI,EAAM,SAAS,aACf,OACI,kBAAC,MAAD;KAEI,MAAK;KACL,WAAW,EAAO;KAClB,eAAA;IACH,GAJQ,EAAM,EAId;IAGT,IAAI,EAAM,SAAS,SACf,OACI,kBAAC,MAAD;KAAmB,MAAK;KAAe,WAAW,EAAO;KACpD,UAAA,EAAM;IACP,GAFK,EAAM,EAEX;IAGZ,IAAM,IAAW,EAAM,SAAS;IAChC,OACI,kBAAC,MAAD;KAAmB,MAAK;KACpB,UAAA,kBAAC,UAAD;MACI,MAAM,MAAO;OACT,EAAS,QAAQ,KAAS;MAC9B;MACA,MAAK;MACL,MAAM,IAAW,qBAAqB;MACtC,gBAAc,IAAW,EAAM,UAAU,KAAA;MACzC,UAAU,MAAgB,IAAQ,IAAI;MACtC,WAAW,EACP,EAAO,MACP,EAAM,SAAS,UAAU,EAAM,UAAU,EAAO,QAChD,MAAgB,KAAS,EAAO,MACpC;MACA,UAAU,EAAM;MAChB,eAAe,EAAa,CAAK;MACjC,oBAAoB,EAAe,CAAK;MAf5C,UAAA,CAiBK,EAAM,QAAQ,kBAAC,QAAD;OAAM,eAAA;OAAa,UAAA,EAAM;MAAW,CAAA,GAClD,EAAM,KACH;;IACR,GArBK,EAAM,EAqBX;GAEZ,CAAC;EACD,CAAA,CAEN;;AAEd"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, function-lines — the body owns placement, outside-\n * click, and the whole APG menu-button keyboard model, which has to see the entire\n * entry list to know where the next stop is. Splitting it would move the focus\n * bookkeeping away from the list it indexes into.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport type { AnchorAlign, AnchorSide } from \"@/components/Portal/anchor-position\";\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    | {\n          /**\n           * An entry that carries on/off state.\n           *\n           * Rendered as `role=\"menuitemcheckbox\"` with `aria-checked`, which is how\n           * a screen reader announces \"checked\" instead of leaving the state\n           * invisible. Selecting it does **not** close the menu: toggling two\n           * settings in a row is the ordinary case, and closing after the first\n           * would make the second a second trip.\n           */\n          type: \"checkbox\";\n          id: string;\n          label: ReactNode;\n          icon?: ReactNode;\n          checked: boolean;\n          disabled?: boolean;\n          onSelect: () => void;\n      }\n    | { type: \"separator\"; id: string }\n    | { type: \"label\"; id: string; label: ReactNode };\n\n/** The entry kinds a user can move focus to and activate. */\ntype SelectableEntry = Extract<DropdownMenuEntry, { type: \"item\" | \"checkbox\" }>;\n\nexport interface DropdownMenuProps {\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        onKeyDown?: (e: ReactKeyboardEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n        \"aria-haspopup\"?: boolean | \"menu\";\n    }>;\n    items: DropdownMenuEntry[];\n    placement?: DropdownMenuPlacement;\n    /**\n     * Render the menu in a portal, positioned against the trigger. Default `true`.\n     *\n     * Without it the menu is `position: absolute` inside the trigger's wrapper,\n     * and any ancestor with `overflow` other than `visible` clips it. The ordinary\n     * victim is the action column of a `DataTable`: its wrapper scrolls\n     * horizontally, `overflow-x: auto` forces `overflow-y` to `auto` too, and the\n     * menu of the last row showed one of three entries (measured in Chrome at\n     * 1440 px). In a portal the menu escapes the clip, flips above the trigger\n     * when there is no room below, and follows the trigger on scroll and resize.\n     *\n     * The portalled menu stacks at `--tempest-z-popover`, above\n     * `--tempest-z-modal`, so a menu opened inside a `Modal` still paints on top.\n     * `false` keeps the in-flow menu, for a container that must own the menu's\n     * stacking or clipping on purpose.\n     */\n    portal?: boolean;\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\nconst PLACEMENT_GEOMETRY: Record<DropdownMenuPlacement, [AnchorSide, AnchorAlign]> = {\n    \"bottom-start\": [\"bottom\", \"start\"],\n    \"bottom-end\": [\"bottom\", \"end\"],\n    \"top-start\": [\"top\", \"start\"],\n    \"top-end\": [\"top\", \"end\"],\n};\n\n/** Gap between trigger and menu, in px — the in-flow CSS uses the same 4 px. */\nconst MENU_OFFSET = 4;\n\n/** Whether an entry can take focus — an item or checkbox that is not disabled. */\nfunction isSelectable(entry: DropdownMenuEntry): entry is SelectableEntry {\n    return (entry.type === \"item\" || entry.type === \"checkbox\") && !entry.disabled;\n}\n\n/**\n * Dropdown menu — a list of actions anchored to a trigger, following the\n * [APG menu button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).\n *\n * `role=\"menu\"` is a promise about the keyboard, and this component keeps it:\n *\n * - `Enter`, `Space` or `ArrowDown` on the trigger opens and focuses the first\n *   entry; `ArrowUp` opens and focuses the last.\n * - `ArrowUp` / `ArrowDown` move with wrap, `Home` / `End` jump to the ends.\n * - `Escape` closes and returns focus to the trigger, so the next `Tab` continues\n *   from where the user was rather than from the top of the document.\n * - `Tab` closes the menu and lets the page's own tab order take over, counted\n *   from the trigger: focus goes back to the trigger synchronously and the key's\n *   default action then moves on from there. Without that, a portalled menu —\n *   the last thing in `body` — would hand `Tab` to whatever follows it, which\n *   inside a `Modal` is outside the dialog.\n * - Focus is managed: entries carry `tabIndex={-1}` and only the active one is\n *   `0`, which is what stops `Tab` from walking the menu one entry at a time.\n *\n * Disabled entries, separators and labels are skipped by every movement.\n */\nexport function DropdownMenu({\n    trigger,\n    items,\n    placement = \"bottom-start\",\n    portal = true,\n    className,\n}: DropdownMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [menuNode, setMenuNode] = useState<HTMLUListElement | null>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n    const pendingFocus = useRef<\"first\" | \"last\" | null>(null);\n\n    const selectable = items\n        .map((entry, index) => (isSelectable(entry) ? index : -1))\n        .filter((index) => index !== -1);\n\n    /**\n     * Focus the trigger again.\n     *\n     * Found through the `aria-haspopup` this component puts on it, rather than\n     * through a ref: `ref` lives in different places in React 18 and 19, and a\n     * consumer's custom trigger is under no obligation to forward one. The\n     * attribute is on the element either way.\n     *\n     * @returns Nothing.\n     */\n    const focusTrigger = useCallback((): void => {\n        rootNode?.querySelector<HTMLElement>(\"[aria-haspopup='menu']\")?.focus();\n    }, [rootNode]);\n\n    const close = useCallback(\n        (restoreFocus: boolean): void => {\n            setOpen(false);\n            setActiveIndex(-1);\n            if (restoreFocus) focusTrigger();\n        },\n        [focusTrigger],\n    );\n\n    const focusIndex = useCallback((index: number): void => {\n        setActiveIndex(index);\n        itemRefs.current[index]?.focus();\n    }, []);\n\n    /**\n     * Move focus to the entry `step` positions away, wrapping at both ends.\n     *\n     * Walks the selectable positions rather than the raw list, so separators,\n     * labels and disabled entries are never a stop.\n     */\n    const move = (step: number): void => {\n        if (selectable.length === 0) return;\n        const current = selectable.indexOf(activeIndex);\n        const next = (current + step + selectable.length) % selectable.length;\n        focusIndex(selectable[next] ?? -1);\n    };\n\n    const [side, align] = PLACEMENT_GEOMETRY[placement];\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: menuNode,\n        side,\n        align,\n        offset: MENU_OFFSET,\n        enabled: portal && open,\n    });\n\n    /**\n     * Focus the entry the opening key asked for.\n     *\n     * Keyed off the menu node rather than off `open` alone: in a portal the menu\n     * mounts one commit after `open` flips, and an effect that ran on `open` would\n     * find no entries to focus.\n     */\n    useEffect(() => {\n        if (!open || !menuNode || pendingFocus.current === null) return;\n        const target = pendingFocus.current === \"last\" ? selectable.at(-1) : selectable[0];\n        pendingFocus.current = null;\n        if (target !== undefined) focusIndex(target);\n    }, [open, menuNode, selectable, focusIndex]);\n\n    /**\n     * Close on a press outside both the trigger and the menu.\n     *\n     * The menu is checked separately because in a portal it is not inside the\n     * trigger's wrapper: testing the wrapper alone would treat a press on an entry\n     * as outside and close the menu before the entry's click lands.\n     */\n    useEffect(() => {\n        if (!open) return;\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootNode?.contains(target) || menuNode?.contains(target)) return;\n            close(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => window.removeEventListener(\"mousedown\", onDown);\n    }, [open, close, rootNode, menuNode]);\n\n    const openWith = (edge: \"first\" | \"last\"): void => {\n        pendingFocus.current = edge;\n        setOpen(true);\n    };\n\n    const handleTriggerKeyDown = (event: ReactKeyboardEvent): void => {\n        trigger.props.onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        if (event.key === \"ArrowDown\" || (!open && (event.key === \"Enter\" || event.key === \" \"))) {\n            event.preventDefault();\n            openWith(\"first\");\n            return;\n        }\n        if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            openWith(\"last\");\n        }\n    };\n\n    /**\n     * Keyboard model of the open menu.\n     *\n     * Handled on the list rather than on `window`: focus is inside the menu by\n     * then, so the keys arrive here by bubbling and cannot be pre-empted by an\n     * unrelated global listener — which is how the arrows used to go missing in a\n     * host application.\n     */\n    const handleMenuKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>): void => {\n        switch (event.key) {\n            case \"ArrowDown\":\n                event.preventDefault();\n                move(1);\n                break;\n            case \"ArrowUp\":\n                event.preventDefault();\n                move(-1);\n                break;\n            case \"Home\":\n                event.preventDefault();\n                if (selectable[0] !== undefined) focusIndex(selectable[0]);\n                break;\n            case \"End\": {\n                event.preventDefault();\n                const last = selectable.at(-1);\n                if (last !== undefined) focusIndex(last);\n                break;\n            }\n            case \"Escape\":\n                event.preventDefault();\n                close(true);\n                break;\n            case \"Tab\":\n                close(true);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        if (event.defaultPrevented) return;\n        if (open) {\n            close(false);\n            return;\n        }\n        openWith(\"first\");\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            onKeyDown: handleTriggerKeyDown,\n            \"aria-expanded\": open,\n            \"aria-controls\": id,\n            \"aria-haspopup\": \"menu\" as const,\n        },\n    } as ReactElement;\n\n    const handleSelect = (entry: SelectableEntry): void => {\n        entry.onSelect();\n        if (entry.type === \"checkbox\") return;\n        close(true);\n    };\n\n    const menu = (\n        <ul\n            ref={setMenuNode}\n            id={id}\n            role=\"menu\"\n            className={cn(\n                styles.menu,\n                portal ? styles.portalled : placementClass(placement),\n                className,\n            )}\n            style={floatingStyle}\n            onKeyDown={handleMenuKeyDown}\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                const checkbox = entry.type === \"checkbox\";\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={checkbox ? \"menuitemcheckbox\" : \"menuitem\"}\n                            aria-checked={checkbox ? entry.checked : undefined}\n                            tabIndex={activeIndex === index ? 0 : -1}\n                            className={cn(\n                                styles.item,\n                                entry.type === \"item\" && 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\n    return (\n        <span ref={setRootNode} className={styles.root}>\n            {triggerClone}\n            {open && (portal ? <Portal>{menu}</Portal> : menu)}\n        </span>\n    );\n}\n"],"mappings":"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"}

package/dist/components/DropdownMenu/DropdownMenu.module.cjs

@@ -1,3 +1,3 @@
 require("../../styles/component/DropdownMenu.css");
-var e=`tempest_root_5ZetV`,t=`tempest_menu_-RiRW`,n=`tempest_tempest-menu-in_uCs9q`,r=`tempest_bottomStart_z60h9`,i=`tempest_bottomEnd_b1tmU`,a=`tempest_topStart_A0em2`,o=`tempest_topEnd_cFA5-`,s=`tempest_item_T-QPZ`,c=`tempest_active_WNqoX`,l=`tempest_danger_C0jN3`,u=`tempest_separator_RimQa`,d=`tempest_label_6yP76`,f={root:e,menu:t,tempestMenuIn:n,bottomStart:r,bottomEnd:i,topStart:a,topEnd:o,item:s,active:c,danger:l,separator:u,label:d};exports.active=c,exports.bottomEnd=i,exports.bottomStart=r,exports.danger=l,exports.default=f,exports.item=s,exports.label=d,exports.menu=t,exports.root=e,exports.separator=u,exports.tempestMenuIn=n,exports.topEnd=o,exports.topStart=a;
+var e=`tempest_root_5ZetV`,t=`tempest_menu_-RiRW`,n=`tempest_tempest-menu-in_uCs9q`,r=`tempest_portalled_b7vCf`,i=`tempest_bottomStart_z60h9`,a=`tempest_bottomEnd_b1tmU`,o=`tempest_topStart_A0em2`,s=`tempest_topEnd_cFA5-`,c=`tempest_item_T-QPZ`,l=`tempest_active_WNqoX`,u=`tempest_danger_C0jN3`,d=`tempest_separator_RimQa`,f=`tempest_label_6yP76`,p={root:e,menu:t,tempestMenuIn:n,portalled:r,bottomStart:i,bottomEnd:a,topStart:o,topEnd:s,item:c,active:l,danger:u,separator:d,label:f};exports.active=l,exports.bottomEnd=a,exports.bottomStart=i,exports.danger=u,exports.default=p,exports.item=c,exports.label=f,exports.menu=t,exports.portalled=r,exports.root=e,exports.separator=d,exports.tempestMenuIn=n,exports.topEnd=s,exports.topStart=o;
 //# sourceMappingURL=DropdownMenu.module.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.module.cjs","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.menu {\n    position: absolute;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\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    padding: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.bottomStart {\n    top: calc(100% + 4px);\n    left: 0;\n}\n.bottomEnd {\n    top: calc(100% + 4px);\n    right: 0;\n}\n.topStart {\n    bottom: calc(100% + 4px);\n    left: 0;\n}\n.topEnd {\n    bottom: calc(100% + 4px);\n    right: 0;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus,\n.item.active {\n    outline: none;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: inset 3px 0 0 0 var(--tempest-selected-indicator);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.item.danger {\n    color: var(--tempest-danger);\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n.label {\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text-muted);\n    text-transform: uppercase;\n    letter-spacing: var(--tempest-tracking-wider);\n}\n\n@keyframes tempest-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .menu {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"DropdownMenu.module.cjs","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.menu {\n    position: absolute;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\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    padding: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.portalled {\n    z-index: var(--tempest-z-popover);\n}\n\n.bottomStart {\n    top: calc(100% + 4px);\n    left: 0;\n}\n.bottomEnd {\n    top: calc(100% + 4px);\n    right: 0;\n}\n.topStart {\n    bottom: calc(100% + 4px);\n    left: 0;\n}\n.topEnd {\n    bottom: calc(100% + 4px);\n    right: 0;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus,\n.item.active {\n    outline: none;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: inset 3px 0 0 0 var(--tempest-selected-indicator);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.item.danger {\n    color: var(--tempest-danger);\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n.label {\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text-muted);\n    text-transform: uppercase;\n    letter-spacing: var(--tempest-tracking-wider);\n}\n\n@keyframes tempest-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .menu {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/DropdownMenu/DropdownMenu.module.js

@@ -1,20 +1,21 @@
 import "../../styles/component/DropdownMenu.css";
 //#region src/components/DropdownMenu/DropdownMenu.module.css
-var e = "tempest_root_5ZetV", t = "tempest_menu_-RiRW", n = "tempest_tempest-menu-in_uCs9q", r = "tempest_bottomStart_z60h9", i = "tempest_bottomEnd_b1tmU", a = "tempest_topStart_A0em2", o = "tempest_topEnd_cFA5-", s = "tempest_item_T-QPZ", c = "tempest_active_WNqoX", l = "tempest_danger_C0jN3", u = "tempest_separator_RimQa", d = "tempest_label_6yP76", f = {
+var e = "tempest_root_5ZetV", t = "tempest_menu_-RiRW", n = "tempest_tempest-menu-in_uCs9q", r = "tempest_portalled_b7vCf", i = "tempest_bottomStart_z60h9", a = "tempest_bottomEnd_b1tmU", o = "tempest_topStart_A0em2", s = "tempest_topEnd_cFA5-", c = "tempest_item_T-QPZ", l = "tempest_active_WNqoX", u = "tempest_danger_C0jN3", d = "tempest_separator_RimQa", f = "tempest_label_6yP76", p = {
 	root: e,
 	menu: t,
 	tempestMenuIn: n,
-	bottomStart: r,
-	bottomEnd: i,
-	topStart: a,
-	topEnd: o,
-	item: s,
-	active: c,
-	danger: l,
-	separator: u,
-	label: d
+	portalled: r,
+	bottomStart: i,
+	bottomEnd: a,
+	topStart: o,
+	topEnd: s,
+	item: c,
+	active: l,
+	danger: u,
+	separator: d,
+	label: f
 };
 //#endregion
-export { c as active, i as bottomEnd, r as bottomStart, l as danger, f as default, s as item, d as label, t as menu, e as root, u as separator, n as tempestMenuIn, o as topEnd, a as topStart };
+export { l as active, a as bottomEnd, i as bottomStart, u as danger, p as default, c as item, f as label, t as menu, r as portalled, e as root, d as separator, n as tempestMenuIn, s as topEnd, o as topStart };
 
 //# sourceMappingURL=DropdownMenu.module.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.module.js","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.menu {\n    position: absolute;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\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    padding: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.bottomStart {\n    top: calc(100% + 4px);\n    left: 0;\n}\n.bottomEnd {\n    top: calc(100% + 4px);\n    right: 0;\n}\n.topStart {\n    bottom: calc(100% + 4px);\n    left: 0;\n}\n.topEnd {\n    bottom: calc(100% + 4px);\n    right: 0;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus,\n.item.active {\n    outline: none;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: inset 3px 0 0 0 var(--tempest-selected-indicator);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.item.danger {\n    color: var(--tempest-danger);\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n.label {\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text-muted);\n    text-transform: uppercase;\n    letter-spacing: var(--tempest-tracking-wider);\n}\n\n@keyframes tempest-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .menu {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"DropdownMenu.module.js","names":[],"sources":["../../../src/components/DropdownMenu/DropdownMenu.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.menu {\n    position: absolute;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\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    padding: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.portalled {\n    z-index: var(--tempest-z-popover);\n}\n\n.bottomStart {\n    top: calc(100% + 4px);\n    left: 0;\n}\n.bottomEnd {\n    top: calc(100% + 4px);\n    right: 0;\n}\n.topStart {\n    bottom: calc(100% + 4px);\n    left: 0;\n}\n.topEnd {\n    bottom: calc(100% + 4px);\n    right: 0;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus,\n.item.active {\n    outline: none;\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    box-shadow: inset 3px 0 0 0 var(--tempest-selected-indicator);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.item.danger {\n    color: var(--tempest-danger);\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n.label {\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text-muted);\n    text-transform: uppercase;\n    letter-spacing: var(--tempest-tracking-wider);\n}\n\n@keyframes tempest-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .menu {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/FilterPanel/FilterPanel.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../Button/Button.cjs"),n=require("../Card/Card.cjs"),r=require("../Layout/Layout.cjs"),i=require("./FilterPanel.module.cjs");let a=require("react"),o=require("react/jsx-runtime");var s={"pt-BR":{title:`Filtros`,clear:`Limpar filtros`,apply:`Filtrar`},en:{title:`Filters`,clear:`Clear filters`,apply:`Apply filters`}};function c({children:c,title:l,actions:u,onClear:d,onApply:f,applyDisabled:p=!1,locale:m=`pt-BR`,labels:h,minFieldWidth:g=`12rem`,columns:_,className:v,style:y,...b}){let x=(0,a.useId)(),S={...s[m],...h},C=l??S.title,w=e=>{e.preventDefault(),f?.()},T=u!==void 0||d!==void 0||f!==void 0?(0,o.jsxs)(`div`,{className:i.default.actions,children:[u,d&&(0,o.jsx)(t.Button,{type:`button`,variant:`ghost`,size:`sm`,onClick:d,children:S.clear}),f&&(0,o.jsx)(t.Button,{type:`submit`,size:`sm`,form:x,disabled:p,children:S.apply})]}):void 0,E=(0,o.jsx)(r.Grid,{className:i.default.fields,columns:_??`repeat(auto-fill, minmax(min(100%, var(--tempest-filter-panel-min)), 1fr))`,children:c});return(0,o.jsx)(n.Card,{flush:!0,role:`search`,"aria-label":typeof C==`string`?C:void 0,title:C,actions:T,className:e.cn(i.default.panel,v),style:{"--tempest-filter-panel-min":g,...y},...b,children:f?(0,o.jsx)(`form`,{id:x,className:i.default.form,onSubmit:w,noValidate:!0,children:E}):E})}exports.FilterPanel=c;
+//# sourceMappingURL=FilterPanel.cjs.map

package/dist/components/FilterPanel/FilterPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.cjs","names":[],"sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"sourcesContent":["import {\n    useId,\n    type CSSProperties,\n    type FormEvent,\n    type HTMLAttributes,\n    type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Button } from \"../Button\";\nimport { Card } from \"../Card\";\nimport { Grid, type ResponsiveValue } from \"../Layout\";\nimport styles from \"./FilterPanel.module.css\";\n\n/** Labels the panel writes itself. */\nexport interface FilterPanelLabels {\n    /** Default title. `\"Filtros\"` / `\"Filters\"`. */\n    title: string;\n    /** The clear button. `\"Limpar filtros\"` / `\"Clear filters\"`. */\n    clear: string;\n    /** The apply button. `\"Filtrar\"` / `\"Apply filters\"`. */\n    apply: string;\n}\n\n/** Built-in labels per locale. */\nconst LABELS: Record<\"pt-BR\" | \"en\", FilterPanelLabels> = {\n    \"pt-BR\": { title: \"Filtros\", clear: \"Limpar filtros\", apply: \"Filtrar\" },\n    en: { title: \"Filters\", clear: \"Clear filters\", apply: \"Apply filters\" },\n};\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"title\" | \"children\" | \"onSubmit\";\n\nexport interface FilterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The filter controls the screen declares — `Input`, `Select`, a date picker. One grid cell each. */\n    children: ReactNode;\n    /** Heading. Default from `locale`. A string renders as an `h3`; a node renders as given. */\n    title?: ReactNode;\n    /** Header actions that are not fields — \"Atualizar a cada 30s\", \"Exportar CSV\". */\n    actions?: ReactNode;\n    /** Return the screen to its initial filters. Renders the clear button only when set. */\n    onClear?: () => void;\n    /**\n     * Publish the draft. When set, the fields sit in a `<form>`: the apply button\n     * submits it and Enter in any text field applies.\n     */\n    onApply?: () => void;\n    /**\n     * Disable the apply button — pass `!filters.isDirty`. Enter follows the button:\n     * it is the form's default button, so a disabled one blocks implicit submission\n     * too, and nothing is re-applied when nothing changed.\n     */\n    applyDisabled?: boolean;\n    /** Locale for the default title and button labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Override any of the labels. */\n    labels?: Partial<FilterPanelLabels>;\n    /**\n     * Narrowest a field may get before the grid drops a column. Default `\"12rem\"`.\n     * The count follows the **panel's** width, so the same panel fits a page and a\n     * sidebar.\n     */\n    minFieldWidth?: string;\n    /**\n     * Fixed columns per viewport, as in `Grid` — `{ mobile: 1, tablet: 2, desktop: 4 }`.\n     * Replaces `minFieldWidth`, and follows the **viewport**, not the panel.\n     */\n    columns?: ResponsiveValue<number | string>;\n}\n\n/**\n * The frame around a fixed set of filters: a card with a title, a grid of the\n * fields the screen declares, and the actions that belong to no field — clear,\n * apply, export.\n *\n * It holds no state and has no opinion on the fields. `FilterBar` is for ad hoc\n * querying (the user picks field, operator and value); this is for the set a\n * screen already knows — município, UF, situação, a search box. Pair it with\n * `useDraftFilters`: the fields edit `draft`, `onApply` and `onClear` are the\n * hook's `apply` and `clear`.\n *\n * What it settles, each measured in Chromium against the `Card` + `Grid`\n * composition it replaces:\n *\n * - **The grid follows the panel, not the viewport.** `Grid` switches columns on\n *   viewport breakpoints, so the same filters in a 360 px column of a 1280 px\n *   screen got four 57.5 px fields. The default here is\n *   `repeat(auto-fill, minmax(min(100%, minFieldWidth), 1fr))`: the column count\n *   comes from the room the panel has, and `min(100%, …)` keeps a floor wider than\n *   the phone from overflowing it.\n * - **Cells align to the top.** A field showing an error is taller; with the grid\n *   default (`stretch`), its row-mates' boxes grew to match.\n * - **The header wraps.** Three actions next to the title measured 527 px in a\n *   308 px header at 390 px wide, and scrolled the whole page sideways. `Card`'s\n *   header now wraps, and so do the actions inside it.\n * - **Clear and apply have a fixed place**, at the end of the header, apply last.\n *\n * @example\n * const filters = useDraftFilters({ search: \"\", uf: \"\" });\n * <FilterPanel\n *     onApply={() => filters.apply()}\n *     onClear={filters.clear}\n *     applyDisabled={!filters.isDirty}\n * >\n *     <Input label=\"Busca\" value={filters.draft.search}\n *         onChange={(e) => filters.set({ search: e.target.value })} />\n *     <Select label=\"UF\" options={UFS} value={filters.draft.uf}\n *         onChange={(e) => filters.set({ uf: e.target.value })} />\n * </FilterPanel>\n */\nexport function FilterPanel({\n    children,\n    title,\n    actions,\n    onClear,\n    onApply,\n    applyDisabled = false,\n    locale = \"pt-BR\",\n    labels,\n    minFieldWidth = \"12rem\",\n    columns,\n    className,\n    style,\n    ...props\n}: FilterPanelProps) {\n    const formId = useId();\n    const text: FilterPanelLabels = { ...LABELS[locale], ...labels };\n    const heading = title ?? text.title;\n\n    const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n        event.preventDefault();\n        onApply?.();\n    };\n\n    const hasActions = actions !== undefined || onClear !== undefined || onApply !== undefined;\n    const headerActions = hasActions ? (\n        <div className={styles.actions}>\n            {actions}\n            {onClear && (\n                <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClear}>\n                    {text.clear}\n                </Button>\n            )}\n            {onApply && (\n                <Button type=\"submit\" size=\"sm\" form={formId} disabled={applyDisabled}>\n                    {text.apply}\n                </Button>\n            )}\n        </div>\n    ) : undefined;\n\n    const fields = (\n        <Grid\n            className={styles.fields}\n            columns={\n                columns ??\n                \"repeat(auto-fill, minmax(min(100%, var(--tempest-filter-panel-min)), 1fr))\"\n            }\n        >\n            {children}\n        </Grid>\n    );\n\n    return (\n        <Card\n            flush\n            role=\"search\"\n            aria-label={typeof heading === \"string\" ? heading : undefined}\n            title={heading}\n            actions={headerActions}\n            className={cn(styles.panel, className)}\n            style={{ \"--tempest-filter-panel-min\": minFieldWidth, ...style } as CSSProperties}\n            {...props}\n        >\n            {onApply ? (\n                <form id={formId} className={styles.form} onSubmit={handleSubmit} noValidate>\n                    {fields}\n                </form>\n            ) : (\n                fields\n            )}\n        </Card>\n    );\n}\n"],"mappings":"oOA0BA,IAAM,EAAoD,CACtD,QAAS,CAAE,MAAO,UAAW,MAAO,iBAAkB,MAAO,SAAU,EACvE,GAAI,CAAE,MAAO,UAAW,MAAO,gBAAiB,MAAO,eAAgB,CAC3E,EAkFA,SAAgB,EAAY,CACxB,WACA,QACA,UACA,UACA,UACA,gBAAgB,GAChB,SAAS,QACT,SACA,gBAAgB,QAChB,UACA,YACA,QACA,GAAG,GACc,CACjB,IAAM,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,EAA0B,CAAE,GAAG,EAAO,GAAS,GAAG,CAAO,EACzD,EAAU,GAAS,EAAK,MAExB,EAAgB,GAA4C,CAC9D,EAAM,eAAe,EACrB,IAAU,CACd,EAGM,EADa,IAAY,IAAA,IAAa,IAAY,IAAA,IAAa,IAAY,IAAA,IAE7E,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAvB,SAAA,CACK,EACA,IACG,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,KAAK,KAAK,QAAS,EACpD,SAAA,EAAK,KACF,CAAA,EAEX,IACG,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAQ,KAAK,SAAS,KAAK,KAAK,KAAM,EAAQ,SAAU,EACnD,SAAA,EAAK,KACF,CAAA,CAEX,CACL,CAAA,EAAA,IAAA,GAEE,GACF,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CACI,UAAW,EAAA,QAAO,OAClB,QACI,GACA,6EAGH,UACC,CAAA,EAGV,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CACI,MAAA,GACA,KAAK,SACL,aAAY,OAAO,GAAY,SAAW,EAAU,IAAA,GACpD,MAAO,EACP,QAAS,EACT,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EACrC,MAAO,CAAE,6BAA8B,EAAe,GAAG,CAAM,EAC/D,GAAI,EAEH,SAAA,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,EAAQ,UAAW,EAAA,QAAO,KAAM,SAAU,EAAc,WAAA,GAC7D,SAAA,CACC,CAAA,EAEN,CAEF,CAAA,CAEd"}

package/dist/components/FilterPanel/FilterPanel.js

@@ -0,0 +1,75 @@
+import { cn as e } from "../../utils/cn.js";
+import { Button as t } from "../Button/Button.js";
+import { Card as n } from "../Card/Card.js";
+import { Grid as r } from "../Layout/Layout.js";
+import i from "./FilterPanel.module.js";
+import { useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/FilterPanel/FilterPanel.tsx
+var c = {
+	"pt-BR": {
+		title: "Filtros",
+		clear: "Limpar filtros",
+		apply: "Filtrar"
+	},
+	en: {
+		title: "Filters",
+		clear: "Clear filters",
+		apply: "Apply filters"
+	}
+};
+function l({ children: l, title: u, actions: d, onClear: f, onApply: p, applyDisabled: m = !1, locale: h = "pt-BR", labels: g, minFieldWidth: _ = "12rem", columns: v, className: y, style: b, ...x }) {
+	let S = a(), C = {
+		...c[h],
+		...g
+	}, w = u ?? C.title, T = (e) => {
+		e.preventDefault(), p?.();
+	}, E = d !== void 0 || f !== void 0 || p !== void 0 ? /* @__PURE__ */ s("div", {
+		className: i.actions,
+		children: [
+			d,
+			f && /* @__PURE__ */ o(t, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				onClick: f,
+				children: C.clear
+			}),
+			p && /* @__PURE__ */ o(t, {
+				type: "submit",
+				size: "sm",
+				form: S,
+				disabled: m,
+				children: C.apply
+			})
+		]
+	}) : void 0, D = /* @__PURE__ */ o(r, {
+		className: i.fields,
+		columns: v ?? "repeat(auto-fill, minmax(min(100%, var(--tempest-filter-panel-min)), 1fr))",
+		children: l
+	});
+	return /* @__PURE__ */ o(n, {
+		flush: !0,
+		role: "search",
+		"aria-label": typeof w == "string" ? w : void 0,
+		title: w,
+		actions: E,
+		className: e(i.panel, y),
+		style: {
+			"--tempest-filter-panel-min": _,
+			...b
+		},
+		...x,
+		children: p ? /* @__PURE__ */ o("form", {
+			id: S,
+			className: i.form,
+			onSubmit: T,
+			noValidate: !0,
+			children: D
+		}) : D
+	});
+}
+//#endregion
+export { l as FilterPanel };
+
+//# sourceMappingURL=FilterPanel.js.map

package/dist/components/FilterPanel/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","names":[],"sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"sourcesContent":["import {\n    useId,\n    type CSSProperties,\n    type FormEvent,\n    type HTMLAttributes,\n    type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Button } from \"../Button\";\nimport { Card } from \"../Card\";\nimport { Grid, type ResponsiveValue } from \"../Layout\";\nimport styles from \"./FilterPanel.module.css\";\n\n/** Labels the panel writes itself. */\nexport interface FilterPanelLabels {\n    /** Default title. `\"Filtros\"` / `\"Filters\"`. */\n    title: string;\n    /** The clear button. `\"Limpar filtros\"` / `\"Clear filters\"`. */\n    clear: string;\n    /** The apply button. `\"Filtrar\"` / `\"Apply filters\"`. */\n    apply: string;\n}\n\n/** Built-in labels per locale. */\nconst LABELS: Record<\"pt-BR\" | \"en\", FilterPanelLabels> = {\n    \"pt-BR\": { title: \"Filtros\", clear: \"Limpar filtros\", apply: \"Filtrar\" },\n    en: { title: \"Filters\", clear: \"Clear filters\", apply: \"Apply filters\" },\n};\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"title\" | \"children\" | \"onSubmit\";\n\nexport interface FilterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The filter controls the screen declares — `Input`, `Select`, a date picker. One grid cell each. */\n    children: ReactNode;\n    /** Heading. Default from `locale`. A string renders as an `h3`; a node renders as given. */\n    title?: ReactNode;\n    /** Header actions that are not fields — \"Atualizar a cada 30s\", \"Exportar CSV\". */\n    actions?: ReactNode;\n    /** Return the screen to its initial filters. Renders the clear button only when set. */\n    onClear?: () => void;\n    /**\n     * Publish the draft. When set, the fields sit in a `<form>`: the apply button\n     * submits it and Enter in any text field applies.\n     */\n    onApply?: () => void;\n    /**\n     * Disable the apply button — pass `!filters.isDirty`. Enter follows the button:\n     * it is the form's default button, so a disabled one blocks implicit submission\n     * too, and nothing is re-applied when nothing changed.\n     */\n    applyDisabled?: boolean;\n    /** Locale for the default title and button labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Override any of the labels. */\n    labels?: Partial<FilterPanelLabels>;\n    /**\n     * Narrowest a field may get before the grid drops a column. Default `\"12rem\"`.\n     * The count follows the **panel's** width, so the same panel fits a page and a\n     * sidebar.\n     */\n    minFieldWidth?: string;\n    /**\n     * Fixed columns per viewport, as in `Grid` — `{ mobile: 1, tablet: 2, desktop: 4 }`.\n     * Replaces `minFieldWidth`, and follows the **viewport**, not the panel.\n     */\n    columns?: ResponsiveValue<number | string>;\n}\n\n/**\n * The frame around a fixed set of filters: a card with a title, a grid of the\n * fields the screen declares, and the actions that belong to no field — clear,\n * apply, export.\n *\n * It holds no state and has no opinion on the fields. `FilterBar` is for ad hoc\n * querying (the user picks field, operator and value); this is for the set a\n * screen already knows — município, UF, situação, a search box. Pair it with\n * `useDraftFilters`: the fields edit `draft`, `onApply` and `onClear` are the\n * hook's `apply` and `clear`.\n *\n * What it settles, each measured in Chromium against the `Card` + `Grid`\n * composition it replaces:\n *\n * - **The grid follows the panel, not the viewport.** `Grid` switches columns on\n *   viewport breakpoints, so the same filters in a 360 px column of a 1280 px\n *   screen got four 57.5 px fields. The default here is\n *   `repeat(auto-fill, minmax(min(100%, minFieldWidth), 1fr))`: the column count\n *   comes from the room the panel has, and `min(100%, …)` keeps a floor wider than\n *   the phone from overflowing it.\n * - **Cells align to the top.** A field showing an error is taller; with the grid\n *   default (`stretch`), its row-mates' boxes grew to match.\n * - **The header wraps.** Three actions next to the title measured 527 px in a\n *   308 px header at 390 px wide, and scrolled the whole page sideways. `Card`'s\n *   header now wraps, and so do the actions inside it.\n * - **Clear and apply have a fixed place**, at the end of the header, apply last.\n *\n * @example\n * const filters = useDraftFilters({ search: \"\", uf: \"\" });\n * <FilterPanel\n *     onApply={() => filters.apply()}\n *     onClear={filters.clear}\n *     applyDisabled={!filters.isDirty}\n * >\n *     <Input label=\"Busca\" value={filters.draft.search}\n *         onChange={(e) => filters.set({ search: e.target.value })} />\n *     <Select label=\"UF\" options={UFS} value={filters.draft.uf}\n *         onChange={(e) => filters.set({ uf: e.target.value })} />\n * </FilterPanel>\n */\nexport function FilterPanel({\n    children,\n    title,\n    actions,\n    onClear,\n    onApply,\n    applyDisabled = false,\n    locale = \"pt-BR\",\n    labels,\n    minFieldWidth = \"12rem\",\n    columns,\n    className,\n    style,\n    ...props\n}: FilterPanelProps) {\n    const formId = useId();\n    const text: FilterPanelLabels = { ...LABELS[locale], ...labels };\n    const heading = title ?? text.title;\n\n    const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n        event.preventDefault();\n        onApply?.();\n    };\n\n    const hasActions = actions !== undefined || onClear !== undefined || onApply !== undefined;\n    const headerActions = hasActions ? (\n        <div className={styles.actions}>\n            {actions}\n            {onClear && (\n                <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClear}>\n                    {text.clear}\n                </Button>\n            )}\n            {onApply && (\n                <Button type=\"submit\" size=\"sm\" form={formId} disabled={applyDisabled}>\n                    {text.apply}\n                </Button>\n            )}\n        </div>\n    ) : undefined;\n\n    const fields = (\n        <Grid\n            className={styles.fields}\n            columns={\n                columns ??\n                \"repeat(auto-fill, minmax(min(100%, var(--tempest-filter-panel-min)), 1fr))\"\n            }\n        >\n            {children}\n        </Grid>\n    );\n\n    return (\n        <Card\n            flush\n            role=\"search\"\n            aria-label={typeof heading === \"string\" ? heading : undefined}\n            title={heading}\n            actions={headerActions}\n            className={cn(styles.panel, className)}\n            style={{ \"--tempest-filter-panel-min\": minFieldWidth, ...style } as CSSProperties}\n            {...props}\n        >\n            {onApply ? (\n                <form id={formId} className={styles.form} onSubmit={handleSubmit} noValidate>\n                    {fields}\n                </form>\n            ) : (\n                fields\n            )}\n        </Card>\n    );\n}\n"],"mappings":";;;;;;;;AA0BA,IAAM,IAAoD;CACtD,SAAS;EAAE,OAAO;EAAW,OAAO;EAAkB,OAAO;CAAU;CACvE,IAAI;EAAE,OAAO;EAAW,OAAO;EAAiB,OAAO;CAAgB;AAC3E;AAkFA,SAAgB,EAAY,EACxB,aACA,UACA,YACA,YACA,YACA,mBAAgB,IAChB,YAAS,SACT,WACA,mBAAgB,SAChB,YACA,cACA,UACA,GAAG,KACc;CACjB,IAAM,IAAS,EAAM,GACf,IAA0B;EAAE,GAAG,EAAO;EAAS,GAAG;CAAO,GACzD,IAAU,KAAS,EAAK,OAExB,KAAgB,MAA4C;EAE9D,AADA,EAAM,eAAe,GACrB,IAAU;CACd,GAGM,IADa,MAAY,KAAA,KAAa,MAAY,KAAA,KAAa,MAAY,KAAA,IAE7E,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAvB,UAAA;GACK;GACA,KACG,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAK;IAAK,SAAS;IACpD,UAAA,EAAK;GACF,CAAA;GAEX,KACG,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAK,MAAM;IAAQ,UAAU;IACnD,UAAA,EAAK;GACF,CAAA;EAEX;CACL,CAAA,IAAA,KAAA,GAEE,IACF,kBAAC,GAAD;EACI,WAAW,EAAO;EAClB,SACI,KACA;EAGH;CACC,CAAA;CAGV,OACI,kBAAC,GAAD;EACI,OAAA;EACA,MAAK;EACL,cAAY,OAAO,KAAY,WAAW,IAAU,KAAA;EACpD,OAAO;EACP,SAAS;EACT,WAAW,EAAG,EAAO,OAAO,CAAS;EACrC,OAAO;GAAE,8BAA8B;GAAe,GAAG;EAAM;EAC/D,GAAI;EAEH,UAAA,IACG,kBAAC,QAAD;GAAM,IAAI;GAAQ,WAAW,EAAO;GAAM,UAAU;GAAc,YAAA;GAC7D,UAAA;EACC,CAAA,IAEN;CAEF,CAAA;AAEd"}

package/dist/components/FilterPanel/FilterPanel.module.cjs

@@ -0,0 +1,3 @@
+require("../../styles/component/FilterPanel.css");
+var e=`tempest_panel_ab2ba`,t=`tempest_actions_9a-Sm`,n=`tempest_form_bMDhN`,r=`tempest_fields_M30-g`,i={panel:e,actions:t,form:n,fields:r};exports.actions=t,exports.default=i,exports.fields=r,exports.form=n,exports.panel=e;
+//# sourceMappingURL=FilterPanel.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.module.cjs","names":[],"sources":["../../../src/components/FilterPanel/FilterPanel.module.css"],"sourcesContent":[".panel {\n    min-width: 0;\n}\n\n/*\n * Actions share the header row with the title on a wide screen and move under it,\n * wrapping among themselves, when they do not fit. Apply stays last.\n */\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    margin-left: auto;\n}\n\n.form {\n    margin: 0;\n}\n\n/*\n * Top alignment keeps a field's box its own height: the grid default stretches every\n * cell of a row to the tallest one, which is the field showing an error.\n */\n.fields {\n    align-items: start;\n}\n"],"mappings":";"}

package/dist/components/FilterPanel/FilterPanel.module.js

@@ -0,0 +1,12 @@
+import "../../styles/component/FilterPanel.css";
+//#region src/components/FilterPanel/FilterPanel.module.css
+var e = "tempest_panel_ab2ba", t = "tempest_actions_9a-Sm", n = "tempest_form_bMDhN", r = "tempest_fields_M30-g", i = {
+	panel: e,
+	actions: t,
+	form: n,
+	fields: r
+};
+//#endregion
+export { t as actions, i as default, r as fields, n as form, e as panel };
+
+//# sourceMappingURL=FilterPanel.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.module.js","names":[],"sources":["../../../src/components/FilterPanel/FilterPanel.module.css"],"sourcesContent":[".panel {\n    min-width: 0;\n}\n\n/*\n * Actions share the header row with the title on a wide screen and move under it,\n * wrapping among themselves, when they do not fit. Apply stays last.\n */\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    margin-left: auto;\n}\n\n.form {\n    margin: 0;\n}\n\n/*\n * Top alignment keeps a field's box its own height: the grid default stretches every\n * cell of a row to the tallest one, which is the field showing an error.\n */\n.fields {\n    align-items: start;\n}\n"],"mappings":";"}

package/dist/components/HoverCard/HoverCard.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./HoverCard.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({trigger:i,children:a,openDelay:o=300,closeDelay:s=150,placement:c=`bottom`,className:l,...u}){let[d,f]=(0,n.useState)(!1),p=(0,n.useId)(),m=(0,n.useRef)(null),h=(0,n.useCallback)(()=>{m.current!==null&&(clearTimeout(m.current),m.current=null)},[]),g=(0,n.useCallback)(()=>{h(),m.current=setTimeout(()=>f(!0),o)},[h,o]),_=(0,n.useCallback)(()=>{h(),m.current=setTimeout(()=>f(!1),s)},[h,s]);return(0,n.useEffect)(()=>h,[h]),(0,r.jsxs)(`span`,{className:t.default.root,onMouseEnter:g,onMouseLeave:_,onFocus:g,onBlur:_,children:[(0,r.jsx)(`span`,{"aria-describedby":d?p:void 0,className:t.default.trigger,children:i}),d&&(0,r.jsx)(`div`,{id:p,role:`dialog`,className:e.cn(t.default.card,t.default[c],l),...u,children:a})]})}exports.HoverCard=i;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/Portal.cjs"),n=require("../Portal/anchor-position.cjs"),r=require("../Portal/tab-bridge.cjs"),i=require("./HoverCard.module.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=8;function c({trigger:c,children:l,openDelay:u=300,closeDelay:d=150,placement:f=`bottom`,portal:p=!0,className:m,style:h,...g}){let[_,v]=(0,a.useState)(!1),[y,b]=(0,a.useState)(null),[x,S]=(0,a.useState)(null),C=n.useAnchorPosition({anchor:y,floating:x,side:f,align:`center`,offset:s,enabled:p&&_});r.usePortalTabOrder({enabled:p&&_,anchor:y,panel:x});let w=(0,a.useId)(),T=(0,a.useRef)(null),E=(0,a.useCallback)(()=>{T.current!==null&&(clearTimeout(T.current),T.current=null)},[]),D=(0,a.useCallback)(()=>{E(),T.current=setTimeout(()=>v(!0),u)},[E,u]),O=(0,a.useCallback)(()=>{E(),T.current=setTimeout(()=>v(!1),d)},[E,d]);(0,a.useEffect)(()=>E,[E]);let k=(0,o.jsx)(`div`,{ref:S,id:w,role:`dialog`,className:e.cn(i.default.card,i.default[f],p&&i.default.portalled,m),style:{...h,...C},...g,children:l});return(0,o.jsxs)(`span`,{ref:b,className:i.default.root,onMouseEnter:D,onMouseLeave:O,onFocus:D,onBlur:O,children:[(0,o.jsx)(`span`,{"aria-describedby":_?w:void 0,className:i.default.trigger,children:c}),_&&(p?(0,o.jsx)(t.Portal,{children:k}):k)]})}exports.HoverCard=c;
 //# sourceMappingURL=HoverCard.cjs.map