tempest-react-sdk 0.53.0 → 0.55.0

package/dist/components/Command/Command.js

@@ -1,14 +1,15 @@
 import { cn as e } from "../../utils/cn.js";
-import { useFocusTrap as t } from "../../hooks/use-focus-trap.js";
-import n from "./Command.module.js";
-import { useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { createPortal as l } from "react-dom";
+import { usePortalHost as t } from "../Portal/portal-host.js";
+import { useFocusTrap as n } from "../../hooks/use-focus-trap.js";
+import r from "./Command.module.js";
+import { useEffect 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 { createPortal as u } from "react-dom";
 //#region src/components/Command/Command.tsx
-function u(e, t) {
+function d(e, t) {
 	return t === "" || e.label.toLowerCase().includes(t) ? !0 : (e.keywords ?? []).some((e) => e.toLowerCase().includes(t));
 }
-function d(e) {
+function f(e) {
 	let t = [], n = /* @__PURE__ */ new Map();
 	for (let r of e) {
 		let e = n.get(r.group);
@@ -19,98 +20,100 @@ function d(e) {
 	}
 	return t;
 }
-function f({ open: f, onOpenChange: m, items: h, placeholder: g = "Type a command…", emptyMessage: _ = "No results", className: v }) {
-	let y = a(null), [b, x] = o(""), [S, C] = o(0), w = "tempest-command-list";
-	t(y, f);
-	let T = i(() => {
-		let e = b.trim().toLowerCase();
-		return d(h.filter((t) => u(t, e))).flatMap((e) => e.items);
-	}, [h, b]), E = i(() => d(T), [T]);
-	if (r(() => {
-		f && (x(""), C(0));
-	}, [f]), r(() => {
-		C((e) => T.length === 0 ? 0 : Math.min(e, T.length - 1));
-	}, [T.length]), !f || typeof document > "u") return null;
-	function D(e) {
-		e.onSelect(), m(!1);
+function p({ open: p, onOpenChange: h, items: g, placeholder: _ = "Type a command…", emptyMessage: v = "No results", className: y }) {
+	let b = o(null), [x, S] = s(""), [C, w] = s(0), T = "tempest-command-list";
+	n(b, p);
+	let E = a(() => {
+		let e = x.trim().toLowerCase();
+		return f(g.filter((t) => d(t, e))).flatMap((e) => e.items);
+	}, [g, x]), D = a(() => f(E), [E]);
+	i(() => {
+		p && (S(""), w(0));
+	}, [p]), i(() => {
+		w((e) => E.length === 0 ? 0 : Math.min(e, E.length - 1));
+	}, [E.length]);
+	let O = t();
+	if (!p || !O) return null;
+	function k(e) {
+		e.onSelect(), h(!1);
 	}
-	function O(e) {
+	function A(e) {
 		if (e.key === "Escape") {
-			e.preventDefault(), m(!1);
+			e.preventDefault(), h(!1);
 			return;
 		}
 		if (e.key === "ArrowDown") {
-			if (e.preventDefault(), T.length === 0) return;
-			C((e) => (e + 1) % T.length);
+			if (e.preventDefault(), E.length === 0) return;
+			w((e) => (e + 1) % E.length);
 			return;
 		}
 		if (e.key === "ArrowUp") {
-			if (e.preventDefault(), T.length === 0) return;
-			C((e) => (e - 1 + T.length) % T.length);
+			if (e.preventDefault(), E.length === 0) return;
+			w((e) => (e - 1 + E.length) % E.length);
 			return;
 		}
 		if (e.key === "Enter") {
 			e.preventDefault();
-			let t = T[S];
-			t && D(t);
+			let t = E[C];
+			t && k(t);
 		}
 	}
-	let k = -1;
-	return l(/* @__PURE__ */ s("div", {
-		className: n.overlay,
+	let j = -1;
+	return u(/* @__PURE__ */ c("div", {
+		className: r.overlay,
 		role: "presentation",
-		onClick: () => m(!1),
-		children: /* @__PURE__ */ c("div", {
-			ref: y,
+		onClick: () => h(!1),
+		children: /* @__PURE__ */ l("div", {
+			ref: b,
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": "Command palette",
-			className: e(n.dialog, v),
+			className: e(r.dialog, y),
 			onClick: (e) => e.stopPropagation(),
-			children: [/* @__PURE__ */ c("div", {
-				className: n.inputRow,
-				children: [/* @__PURE__ */ s(p, {}), /* @__PURE__ */ s("input", {
+			children: [/* @__PURE__ */ l("div", {
+				className: r.inputRow,
+				children: [/* @__PURE__ */ c(m, {}), /* @__PURE__ */ c("input", {
 					type: "text",
 					role: "combobox",
 					"aria-expanded": "true",
-					"aria-controls": w,
+					"aria-controls": T,
 					"aria-autocomplete": "list",
 					autoFocus: !0,
-					className: n.input,
-					placeholder: g,
-					value: b,
-					onChange: (e) => x(e.target.value),
-					onKeyDown: O
+					className: r.input,
+					placeholder: _,
+					value: x,
+					onChange: (e) => S(e.target.value),
+					onKeyDown: A
 				})]
-			}), /* @__PURE__ */ s("ul", {
-				id: w,
+			}), /* @__PURE__ */ c("ul", {
+				id: T,
 				role: "listbox",
-				className: n.list,
-				children: T.length === 0 ? /* @__PURE__ */ s("li", {
-					className: n.empty,
-					children: _
-				}) : E.map((t) => /* @__PURE__ */ c("li", {
-					className: n.group,
-					children: [t.name && /* @__PURE__ */ s("div", {
-						className: n.groupHeading,
+				className: r.list,
+				children: E.length === 0 ? /* @__PURE__ */ c("li", {
+					className: r.empty,
+					children: v
+				}) : D.map((t) => /* @__PURE__ */ l("li", {
+					className: r.group,
+					children: [t.name && /* @__PURE__ */ c("div", {
+						className: r.groupHeading,
 						children: t.name
-					}), /* @__PURE__ */ s("ul", {
+					}), /* @__PURE__ */ c("ul", {
 						role: "presentation",
-						className: n.groupList,
+						className: r.groupList,
 						children: t.items.map((t) => {
-							k += 1;
-							let r = k === S, i = k;
-							return /* @__PURE__ */ c("li", {
+							j += 1;
+							let n = j === C, i = j;
+							return /* @__PURE__ */ l("li", {
 								role: "option",
-								"aria-selected": r,
-								className: e(n.option, r && n.active),
-								onMouseMove: () => C(i),
-								onClick: () => D(t),
-								children: [t.icon && /* @__PURE__ */ s("span", {
-									className: n.icon,
+								"aria-selected": n,
+								className: e(r.option, n && r.active),
+								onMouseMove: () => w(i),
+								onClick: () => k(t),
+								children: [t.icon && /* @__PURE__ */ c("span", {
+									className: r.icon,
 									children: t.icon
-								}), /* @__PURE__ */ s("span", {
-									className: n.label,
+								}), /* @__PURE__ */ c("span", {
+									className: r.label,
 									children: t.label
 								})]
 							}, t.id);
@@ -119,23 +122,23 @@ function f({ open: f, onOpenChange: m, items: h, placeholder: g = "Type a comman
 				}, t.name ?? "__ungrouped__"))
 			})]
 		})
-	}), document.body);
+	}), O);
 }
-function p() {
-	return /* @__PURE__ */ c("svg", {
-		className: n.searchIcon,
+function m() {
+	return /* @__PURE__ */ l("svg", {
+		className: r.searchIcon,
 		width: "18",
 		height: "18",
 		viewBox: "0 0 24 24",
 		fill: "none",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ s("circle", {
+		children: [/* @__PURE__ */ c("circle", {
 			cx: "11",
 			cy: "11",
 			r: "7",
 			stroke: "currentColor",
 			strokeWidth: "2"
-		}), /* @__PURE__ */ s("path", {
+		}), /* @__PURE__ */ c("path", {
 			d: "M20 20l-3.5-3.5",
 			stroke: "currentColor",
 			strokeWidth: "2",
@@ -144,6 +147,6 @@ function p() {
 	});
 }
 //#endregion
-export { f as Command };
+export { p as Command };
 
 //# sourceMappingURL=Command.js.map

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.js","names":[],"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, function-lines — a command palette is a filtered\n * listbox with its own keyboard contract: the body holds the query, the flattened\n * result list, the active index and the Escape/Enter handling, all of which read\n * each other on every keystroke.\n */\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport styles from \"./Command.module.css\";\n\nexport interface CommandItem {\n    /** Stable unique identifier for the item. */\n    id: string;\n    /** Human-readable label shown in the list and matched against the query. */\n    label: string;\n    /** Optional group heading; items sharing a group are rendered together. */\n    group?: string;\n    /** Extra terms matched against the query in addition to `label`. */\n    keywords?: string[];\n    /** Invoked when the item is chosen (click or Enter on the active row). */\n    onSelect: () => void;\n    /** Optional leading icon. */\n    icon?: ReactNode;\n}\n\nexport interface CommandProps {\n    /** Whether the palette is visible. */\n    open: boolean;\n    /** Called with the next open state (Escape, selection, backdrop click). */\n    onOpenChange: (open: boolean) => void;\n    /** Candidate items to filter and display. */\n    items: CommandItem[];\n    /** Placeholder for the search input. */\n    placeholder?: string;\n    /** Rendered when no item matches the current query. */\n    emptyMessage?: ReactNode;\n    /** Forwarded to the dialog element. */\n    className?: string;\n}\n\ninterface CommandGroup {\n    name: string | undefined;\n    items: CommandItem[];\n}\n\n/**\n * Case-insensitively test whether `item` matches `query` by substring against\n * its label and any keywords. An empty query matches everything.\n *\n * @param item - The candidate command item.\n * @param query - The lowercased search query.\n * @returns `true` when the item should be shown.\n */\nfunction matchesQuery(item: CommandItem, query: string): boolean {\n    if (query === \"\") return true;\n    if (item.label.toLowerCase().includes(query)) return true;\n    return (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(query));\n}\n\n/**\n * Partition a flat item list into ordered groups, preserving first-seen order\n * for both groups and the items within them.\n *\n * @param items - The (already filtered) items to group.\n * @returns An ordered list of groups.\n */\nfunction groupItems(items: CommandItem[]): CommandGroup[] {\n    const groups: CommandGroup[] = [];\n    const indexByName = new Map<string | undefined, number>();\n    for (const item of items) {\n        const existing = indexByName.get(item.group);\n        if (existing === undefined) {\n            indexByName.set(item.group, groups.length);\n            groups.push({ name: item.group, items: [item] });\n        } else {\n            groups[existing]!.items.push(item);\n        }\n    }\n    return groups;\n}\n\n/**\n * A ⌘K-style command palette: an overlay dialog with a search input that\n * substring-filters items by label and keywords, groups results, and supports\n * full keyboard navigation (Arrow up/down, Enter, Escape). Traps focus while\n * open.\n */\nexport function Command({\n    open,\n    onOpenChange,\n    items,\n    placeholder = \"Type a command…\",\n    emptyMessage = \"No results\",\n    className,\n}: CommandProps) {\n    const dialogRef = useRef<HTMLDivElement>(null);\n    const [query, setQuery] = useState<string>(\"\");\n    const [activeIndex, setActiveIndex] = useState<number>(0);\n    const listId = \"tempest-command-list\";\n\n    useFocusTrap(dialogRef, open);\n\n    const filtered = useMemo<CommandItem[]>(() => {\n        const normalized = query.trim().toLowerCase();\n        const visible = items.filter((item) => matchesQuery(item, normalized));\n        return groupItems(visible).flatMap((group) => group.items);\n    }, [items, query]);\n\n    const groups = useMemo<CommandGroup[]>(() => groupItems(filtered), [filtered]);\n\n    // Reset transient state whenever the palette opens.\n    useEffect(() => {\n        if (open) {\n            setQuery(\"\");\n            setActiveIndex(0);\n        }\n    }, [open]);\n\n    // Keep the active index within bounds as the filtered list shrinks/grows.\n    useEffect(() => {\n        setActiveIndex((index) => {\n            if (filtered.length === 0) return 0;\n            return Math.min(index, filtered.length - 1);\n        });\n    }, [filtered.length]);\n\n    if (!open || typeof document === \"undefined\") return null;\n\n    function selectItem(item: CommandItem): void {\n        item.onSelect();\n        onOpenChange(false);\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onOpenChange(false);\n            return;\n        }\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            if (filtered.length === 0) return;\n            setActiveIndex((index) => (index + 1) % filtered.length);\n            return;\n        }\n        if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            if (filtered.length === 0) return;\n            setActiveIndex((index) => (index - 1 + filtered.length) % filtered.length);\n            return;\n        }\n        if (event.key === \"Enter\") {\n            event.preventDefault();\n            const item = filtered[activeIndex];\n            if (item) selectItem(item);\n        }\n    }\n\n    let renderIndex = -1;\n\n    return createPortal(\n        <div className={styles.overlay} role=\"presentation\" onClick={() => onOpenChange(false)}>\n            <div\n                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label=\"Command palette\"\n                className={cn(styles.dialog, className)}\n                onClick={(event) => event.stopPropagation()}\n            >\n                <div className={styles.inputRow}>\n                    <SearchIcon />\n                    <input\n                        type=\"text\"\n                        role=\"combobox\"\n                        aria-expanded=\"true\"\n                        aria-controls={listId}\n                        aria-autocomplete=\"list\"\n                        autoFocus\n                        className={styles.input}\n                        placeholder={placeholder}\n                        value={query}\n                        onChange={(event) => setQuery(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                    />\n                </div>\n                <ul id={listId} role=\"listbox\" className={styles.list}>\n                    {filtered.length === 0 ? (\n                        <li className={styles.empty}>{emptyMessage}</li>\n                    ) : (\n                        groups.map((group) => (\n                            <li key={group.name ?? \"__ungrouped__\"} className={styles.group}>\n                                {group.name && (\n                                    <div className={styles.groupHeading}>{group.name}</div>\n                                )}\n                                <ul role=\"presentation\" className={styles.groupList}>\n                                    {group.items.map((item) => {\n                                        renderIndex += 1;\n                                        const isActive = renderIndex === activeIndex;\n                                        const index = renderIndex;\n                                        return (\n                                            <li\n                                                key={item.id}\n                                                role=\"option\"\n                                                aria-selected={isActive}\n                                                className={cn(\n                                                    styles.option,\n                                                    isActive && styles.active,\n                                                )}\n                                                onMouseMove={() => setActiveIndex(index)}\n                                                onClick={() => selectItem(item)}\n                                            >\n                                                {item.icon && (\n                                                    <span className={styles.icon}>{item.icon}</span>\n                                                )}\n                                                <span className={styles.label}>{item.label}</span>\n                                            </li>\n                                        );\n                                    })}\n                                </ul>\n                            </li>\n                        ))\n                    )}\n                </ul>\n            </div>\n        </div>,\n        document.body,\n    );\n}\n\nfunction SearchIcon() {\n    return (\n        <svg\n            className={styles.searchIcon}\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n        >\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Command.js","names":[],"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, function-lines — a command palette is a filtered\n * listbox with its own keyboard contract: the body holds the query, the flattened\n * result list, the active index and the Escape/Enter handling, all of which read\n * each other on every keystroke.\n */\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport styles from \"./Command.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport interface CommandItem {\n    /** Stable unique identifier for the item. */\n    id: string;\n    /** Human-readable label shown in the list and matched against the query. */\n    label: string;\n    /** Optional group heading; items sharing a group are rendered together. */\n    group?: string;\n    /** Extra terms matched against the query in addition to `label`. */\n    keywords?: string[];\n    /** Invoked when the item is chosen (click or Enter on the active row). */\n    onSelect: () => void;\n    /** Optional leading icon. */\n    icon?: ReactNode;\n}\n\nexport interface CommandProps {\n    /** Whether the palette is visible. */\n    open: boolean;\n    /** Called with the next open state (Escape, selection, backdrop click). */\n    onOpenChange: (open: boolean) => void;\n    /** Candidate items to filter and display. */\n    items: CommandItem[];\n    /** Placeholder for the search input. */\n    placeholder?: string;\n    /** Rendered when no item matches the current query. */\n    emptyMessage?: ReactNode;\n    /** Forwarded to the dialog element. */\n    className?: string;\n}\n\ninterface CommandGroup {\n    name: string | undefined;\n    items: CommandItem[];\n}\n\n/**\n * Case-insensitively test whether `item` matches `query` by substring against\n * its label and any keywords. An empty query matches everything.\n *\n * @param item - The candidate command item.\n * @param query - The lowercased search query.\n * @returns `true` when the item should be shown.\n */\nfunction matchesQuery(item: CommandItem, query: string): boolean {\n    if (query === \"\") return true;\n    if (item.label.toLowerCase().includes(query)) return true;\n    return (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(query));\n}\n\n/**\n * Partition a flat item list into ordered groups, preserving first-seen order\n * for both groups and the items within them.\n *\n * @param items - The (already filtered) items to group.\n * @returns An ordered list of groups.\n */\nfunction groupItems(items: CommandItem[]): CommandGroup[] {\n    const groups: CommandGroup[] = [];\n    const indexByName = new Map<string | undefined, number>();\n    for (const item of items) {\n        const existing = indexByName.get(item.group);\n        if (existing === undefined) {\n            indexByName.set(item.group, groups.length);\n            groups.push({ name: item.group, items: [item] });\n        } else {\n            groups[existing]!.items.push(item);\n        }\n    }\n    return groups;\n}\n\n/**\n * A ⌘K-style command palette: an overlay dialog with a search input that\n * substring-filters items by label and keywords, groups results, and supports\n * full keyboard navigation (Arrow up/down, Enter, Escape). Traps focus while\n * open.\n */\nexport function Command({\n    open,\n    onOpenChange,\n    items,\n    placeholder = \"Type a command…\",\n    emptyMessage = \"No results\",\n    className,\n}: CommandProps) {\n    const dialogRef = useRef<HTMLDivElement>(null);\n    const [query, setQuery] = useState<string>(\"\");\n    const [activeIndex, setActiveIndex] = useState<number>(0);\n    const listId = \"tempest-command-list\";\n\n    useFocusTrap(dialogRef, open);\n\n    const filtered = useMemo<CommandItem[]>(() => {\n        const normalized = query.trim().toLowerCase();\n        const visible = items.filter((item) => matchesQuery(item, normalized));\n        return groupItems(visible).flatMap((group) => group.items);\n    }, [items, query]);\n\n    const groups = useMemo<CommandGroup[]>(() => groupItems(filtered), [filtered]);\n\n    // Reset transient state whenever the palette opens.\n    useEffect(() => {\n        if (open) {\n            setQuery(\"\");\n            setActiveIndex(0);\n        }\n    }, [open]);\n\n    // Keep the active index within bounds as the filtered list shrinks/grows.\n    useEffect(() => {\n        setActiveIndex((index) => {\n            if (filtered.length === 0) return 0;\n            return Math.min(index, filtered.length - 1);\n        });\n    }, [filtered.length]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    function selectItem(item: CommandItem): void {\n        item.onSelect();\n        onOpenChange(false);\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onOpenChange(false);\n            return;\n        }\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            if (filtered.length === 0) return;\n            setActiveIndex((index) => (index + 1) % filtered.length);\n            return;\n        }\n        if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            if (filtered.length === 0) return;\n            setActiveIndex((index) => (index - 1 + filtered.length) % filtered.length);\n            return;\n        }\n        if (event.key === \"Enter\") {\n            event.preventDefault();\n            const item = filtered[activeIndex];\n            if (item) selectItem(item);\n        }\n    }\n\n    let renderIndex = -1;\n\n    return createPortal(\n        <div className={styles.overlay} role=\"presentation\" onClick={() => onOpenChange(false)}>\n            <div\n                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label=\"Command palette\"\n                className={cn(styles.dialog, className)}\n                onClick={(event) => event.stopPropagation()}\n            >\n                <div className={styles.inputRow}>\n                    <SearchIcon />\n                    <input\n                        type=\"text\"\n                        role=\"combobox\"\n                        aria-expanded=\"true\"\n                        aria-controls={listId}\n                        aria-autocomplete=\"list\"\n                        autoFocus\n                        className={styles.input}\n                        placeholder={placeholder}\n                        value={query}\n                        onChange={(event) => setQuery(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                    />\n                </div>\n                <ul id={listId} role=\"listbox\" className={styles.list}>\n                    {filtered.length === 0 ? (\n                        <li className={styles.empty}>{emptyMessage}</li>\n                    ) : (\n                        groups.map((group) => (\n                            <li key={group.name ?? \"__ungrouped__\"} className={styles.group}>\n                                {group.name && (\n                                    <div className={styles.groupHeading}>{group.name}</div>\n                                )}\n                                <ul role=\"presentation\" className={styles.groupList}>\n                                    {group.items.map((item) => {\n                                        renderIndex += 1;\n                                        const isActive = renderIndex === activeIndex;\n                                        const index = renderIndex;\n                                        return (\n                                            <li\n                                                key={item.id}\n                                                role=\"option\"\n                                                aria-selected={isActive}\n                                                className={cn(\n                                                    styles.option,\n                                                    isActive && styles.active,\n                                                )}\n                                                onMouseMove={() => setActiveIndex(index)}\n                                                onClick={() => selectItem(item)}\n                                            >\n                                                {item.icon && (\n                                                    <span className={styles.icon}>{item.icon}</span>\n                                                )}\n                                                <span className={styles.label}>{item.label}</span>\n                                            </li>\n                                        );\n                                    })}\n                                </ul>\n                            </li>\n                        ))\n                    )}\n                </ul>\n            </div>\n        </div>,\n        portalHost,\n    );\n}\n\nfunction SearchIcon() {\n    return (\n        <svg\n            className={styles.searchIcon}\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n        >\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Drawer/Drawer.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    if (!open || typeof document === \"undefined\") return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        document.body,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"gMAyCA,SAAgB,EAAO,CACnB,OACA,UACA,YAAY,QACZ,QACA,WACA,SACA,kBAAkB,GAClB,aAAa,GACb,kBAAkB,GAClB,YACA,kBACA,aAAa,IACD,CACZ,GAAM,CAAE,YAAa,EAAA,cAAc,EAC7B,EACF,GAAY,EAAkB,EAAkB,EAkBpD,OAhBA,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAC7C,SAAS,KAAK,MAAM,SAAW,SAC/B,IAAM,EAAa,GAA+B,CAC1C,GAAc,EAAM,MAAQ,UAAU,EAAQ,CACtD,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAS,MAC/B,CACT,SAAS,KAAK,MAAM,SAAW,EAC/B,OAAO,oBAAoB,UAAW,CAAS,CACnD,CACJ,EAAG,CAAC,EAAM,EAAY,CAAO,CAAC,EAE1B,CAAC,GAAQ,OAAO,SAAa,IAAoB,MAErD,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,YAAe,CACP,GAAiB,EAAQ,CACjC,CACH,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,QAAD,CACI,KAAK,SACL,aAAW,OACX,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAqB,CAAS,EAHrE,SAAA,CAKK,IACI,IAAuB,UAAY,IAAuB,SACvD,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,OACP,IAAuB,OAAS,EAAA,QAAO,SAC3C,EACA,cAAA,EACH,CAAA,GAEP,GAAS,CAAC,KACR,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAU,CAAA,EACvC,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,aAAW,SACX,UAAW,EAAA,QAAO,MAClB,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAER,KAEZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,EAC3C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC1D,CACT,CAAA,CAAA,CAAA,CAAA,EACF,SAAS,IACb,CACJ,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        portalHost,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"uOA0CA,SAAgB,EAAO,CACnB,OACA,UACA,YAAY,QACZ,QACA,WACA,SACA,kBAAkB,GAClB,aAAa,GACb,kBAAkB,GAClB,YACA,kBACA,aAAa,IACD,CACZ,GAAM,CAAE,YAAa,EAAA,cAAc,EAC7B,EACF,GAAY,EAAkB,EAAkB,GAEpD,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAC7C,SAAS,KAAK,MAAM,SAAW,SAC/B,IAAM,EAAa,GAA+B,CAC1C,GAAc,EAAM,MAAQ,UAAU,EAAQ,CACtD,EAEA,OADA,OAAO,iBAAiB,UAAW,CAAS,MAC/B,CACT,SAAS,KAAK,MAAM,SAAW,EAC/B,OAAO,oBAAoB,UAAW,CAAS,CACnD,CACJ,EAAG,CAAC,EAAM,EAAY,CAAO,CAAC,EAE9B,IAAM,EAAa,EAAA,cAAc,EAIjC,MAFI,CAAC,GAAQ,CAAC,EAAmB,MAEjC,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,YAAe,CACP,GAAiB,EAAQ,CACjC,CACH,CAAA,GACD,EAAA,EAAA,KAAA,CAAC,QAAD,CACI,KAAK,SACL,aAAW,OACX,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAqB,CAAS,EAHrE,SAAA,CAKK,IACI,IAAuB,UAAY,IAAuB,SACvD,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,OACP,IAAuB,OAAS,EAAA,QAAO,SAC3C,EACA,cAAA,EACH,CAAA,GAEP,GAAS,CAAC,KACR,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAU,CAAA,EACvC,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,aAAW,SACX,UAAW,EAAA,QAAO,MAClB,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAER,KAEZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,EAC3C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC1D,CACT,CAAA,CAAA,CAAA,CAAA,EACF,CACJ,CACJ,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}

package/dist/components/Drawer/Drawer.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    if (!open || typeof document === \"undefined\") return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        document.body,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;;;AAyCA,SAAgB,EAAO,EACnB,SACA,YACA,eAAY,SACZ,UACA,aACA,WACA,qBAAkB,IAClB,gBAAa,IACb,qBAAkB,IAClB,cACA,oBACA,gBAAa,MACD;CACZ,IAAM,EAAE,gBAAa,EAAc,GAC7B,IACF,KAAY,IAAkB,IAAkB;CAkBpD,OAhBA,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAC7C,SAAS,KAAK,MAAM,WAAW;EAC/B,IAAM,KAAa,MAA+B;GAC9C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ;EACtD;EAEA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B;GAET,AADA,SAAS,KAAK,MAAM,WAAW,GAC/B,OAAO,oBAAoB,WAAW,CAAS;EACnD;CACJ,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC,GAE1B,CAAC,KAAQ,OAAO,WAAa,MAAoB,OAE9C,EACH,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;CACH,CAAA,GACD,kBAAC,SAAD;EACI,MAAK;EACL,cAAW;EACX,WAAW,EAAG,EAAO,OAAO,EAAO,IAAqB,CAAS;EAHrE,UAAA;GAKK,MACI,MAAuB,YAAY,MAAuB,UACvD,kBAAC,OAAD;IACI,WAAW,EACP,EAAO,QACP,MAAuB,SAAS,EAAO,SAC3C;IACA,eAAA;GACH,CAAA;IAEP,KAAS,CAAC,MACR,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAA1B,UAAA,CACI,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAQ,UAAA;IAAU,CAAA,GACvC,CAAC,KACE,kBAAC,UAAD;KACI,MAAK;KACL,cAAW;KACX,WAAW,EAAO;KAClB,SAAS;KAET,UAAA,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,CAER;;GAEZ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO;GAAc,CAAA;GAC3C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC1D;CACT,CAAA,CAAA,EAAA,CAAA,GACF,SAAS,IACb;AACJ;AAEA,SAAS,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — placement plus mobilePlacement is\n * the whole point — a drawer that comes from the side on desktop and from the bottom\n * on a phone — and the rest is the dialog contract the SDK's Modal also has (open,\n * onClose, title, children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton)\n * plus showHandle for the sheet affordance.\n */\nimport { useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./Drawer.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type DrawerPlacement = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n    open: boolean;\n    onClose: () => void;\n    placement?: DrawerPlacement;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    hideCloseButton?: boolean;\n    className?: string;\n    /**\n     * Auto-switch to bottom-sheet placement on mobile viewports (< md).\n     * Modern mobile apps default to bottom drawers; on desktop the original\n     * `placement` is preserved.\n     */\n    mobilePlacement?: DrawerPlacement;\n    /** Render a drag handle indicator at the leading edge (bottom-sheet style). */\n    showHandle?: boolean;\n}\n\n/**\n * Sliding side panel. Same building blocks as {@link Modal} but anchored to\n * an edge. Locks body scroll while open.\n */\nexport function Drawer({\n    open,\n    onClose,\n    placement = \"right\",\n    title,\n    children,\n    footer,\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    hideCloseButton = false,\n    className,\n    mobilePlacement,\n    showHandle = false,\n}: DrawerProps) {\n    const { isMobile } = useBreakpoint();\n    const effectivePlacement: DrawerPlacement =\n        isMobile && mobilePlacement ? mobilePlacement : placement;\n\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n        return () => {\n            document.body.style.overflow = previousOverflow;\n            window.removeEventListener(\"keydown\", handleKey);\n        };\n    }, [open, closeOnEsc, onClose]);\n\n    const portalHost = usePortalHost();\n\n    if (!open || !portalHost) return null;\n\n    return createPortal(\n        <>\n            <div\n                className={styles.overlay}\n                onClick={() => {\n                    if (closeOnBackdrop) onClose();\n                }}\n            />\n            <aside\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={cn(styles.panel, styles[effectivePlacement], className)}\n            >\n                {showHandle &&\n                    (effectivePlacement === \"bottom\" || effectivePlacement === \"top\") && (\n                        <div\n                            className={cn(\n                                styles.handle,\n                                effectivePlacement === \"top\" && styles.handleTop,\n                            )}\n                            aria-hidden\n                        />\n                    )}\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        <h3 className={styles.title}>{title}</h3>\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                aria-label=\"Fechar\"\n                                className={styles.close}\n                                onClick={onClose}\n                            >\n                                <CloseIcon />\n                            </button>\n                        )}\n                    </header>\n                )}\n                <div className={styles.body}>{children}</div>\n                {footer && <footer className={styles.footer}>{footer}</footer>}\n            </aside>\n        </>,\n        portalHost,\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":";;;;;;;;AA0CA,SAAgB,EAAO,EACnB,SACA,YACA,eAAY,SACZ,UACA,aACA,WACA,qBAAkB,IAClB,gBAAa,IACb,qBAAkB,IAClB,cACA,oBACA,gBAAa,MACD;CACZ,IAAM,EAAE,gBAAa,EAAc,GAC7B,IACF,KAAY,IAAkB,IAAkB;CAEpD,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAC7C,SAAS,KAAK,MAAM,WAAW;EAC/B,IAAM,KAAa,MAA+B;GAC9C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ;EACtD;EAEA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B;GAET,AADA,SAAS,KAAK,MAAM,WAAW,GAC/B,OAAO,oBAAoB,WAAW,CAAS;EACnD;CACJ,GAAG;EAAC;EAAM;EAAY;CAAO,CAAC;CAE9B,IAAM,IAAa,EAAc;CAIjC,OAFI,CAAC,KAAQ,CAAC,IAAmB,OAE1B,EACH,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;CACH,CAAA,GACD,kBAAC,SAAD;EACI,MAAK;EACL,cAAW;EACX,WAAW,EAAG,EAAO,OAAO,EAAO,IAAqB,CAAS;EAHrE,UAAA;GAKK,MACI,MAAuB,YAAY,MAAuB,UACvD,kBAAC,OAAD;IACI,WAAW,EACP,EAAO,QACP,MAAuB,SAAS,EAAO,SAC3C;IACA,eAAA;GACH,CAAA;IAEP,KAAS,CAAC,MACR,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAA1B,UAAA,CACI,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAQ,UAAA;IAAU,CAAA,GACvC,CAAC,KACE,kBAAC,UAAD;KACI,MAAK;KACL,cAAW;KACX,WAAW,EAAO;KAClB,SAAS;KAET,UAAA,kBAAC,GAAD,CAAY,CAAA;IACR,CAAA,CAER;;GAEZ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO;GAAc,CAAA;GAC3C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC1D;CACT,CAAA,CAAA,EAAA,CAAA,GACF,CACJ;AACJ;AAEA,SAAS,IAAY;CACjB,OACI,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EACjD,UAAA,kBAAC,QAAD;GACI,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACjB,CAAA;CACA,CAAA;AAEb"}

package/dist/components/DropdownMenu/DropdownMenu.cjs

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

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

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