tempest-react-sdk 0.53.0 → 0.55.0

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -11,90 +11,134 @@ function l(e) {
 		default: return t.bottomStart;
 	}
 }
-function u({ trigger: u, items: d, placement: f = "bottom-start", className: p }) {
-	let [m, h] = o(!1), [g, _] = o(-1), v = i(), y = a(null), b = a([]), x = d.map((e, t) => e.type === "item" && !e.disabled ? t : -1).filter((e) => e !== -1), S = n(() => {
-		h(!1), _(-1);
-	}, []);
+function u(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 (!m) return;
+		if (!h || S.current === null) return;
+		let e = S.current === "last" ? C.at(-1) : C[0];
+		S.current = null, e !== void 0 && E(e);
+	}, [
+		h,
+		C,
+		E
+	]), r(() => {
+		if (!h) return;
 		let e = (e) => {
-			if (e.key === "Escape") {
-				S();
+			b.current && !b.current.contains(e.target) && T(!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");
 				return;
 			}
-			if (e.key === "ArrowDown") {
+			e.key === "ArrowUp" && (e.preventDefault(), O("last"));
+		}
+	}, A = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), D(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), D(-1);
+				break;
+			case "Home":
+				e.preventDefault(), C[0] !== void 0 && E(C[0]);
+				break;
+			case "End": {
 				e.preventDefault();
-				let t = x.indexOf(g), n = x[(t + 1) % x.length] ?? -1;
-				_(n), b.current[n]?.focus();
+				let t = C.at(-1);
+				t !== void 0 && E(t);
+				break;
 			}
-			if (e.key === "ArrowUp") {
-				e.preventDefault();
-				let t = x.indexOf(g), n = x[(t - 1 + x.length) % x.length] ?? -1;
-				_(n), b.current[n]?.focus();
+			case "Escape":
+				e.preventDefault(), T(!0);
+				break;
+			case "Tab": T(!1);
+		}
+	}, j = (e) => {
+		if (d.props.onClick?.(e), !e.defaultPrevented) {
+			if (h) {
+				T(!1);
+				return;
 			}
-		}, t = (e) => {
-			y.current && !y.current.contains(e.target) && S();
-		};
-		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), () => {
-			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t);
-		};
-	}, [
-		m,
-		g,
-		x,
-		S
-	]);
-	let C = (e) => {
-		u.props.onClick?.(e), h((e) => !e);
-	}, w = {
-		...u,
+			O("first");
+		}
+	}, M = {
+		...d,
 		props: {
-			...u.props,
-			onClick: C,
-			"aria-expanded": m,
-			"aria-controls": v,
+			...d.props,
+			onClick: j,
+			onKeyDown: k,
+			"aria-expanded": h,
+			"aria-controls": y,
 			"aria-haspopup": "menu"
 		}
-	}, T = (e) => {
-		e.onSelect(), S();
+	}, N = (e) => {
+		e.onSelect(), e.type !== "checkbox" && T(!0);
 	};
 	return /* @__PURE__ */ c("span", {
-		ref: y,
+		ref: b,
 		className: t.root,
-		children: [w, m && /* @__PURE__ */ s("ul", {
-			id: v,
+		children: [M, h && /* @__PURE__ */ s("ul", {
+			id: y,
 			role: "menu",
-			className: e(t.menu, l(f), p),
-			children: d.map((n, r) => n.type === "separator" ? /* @__PURE__ */ s("li", {
-				role: "separator",
-				className: t.separator,
-				"aria-hidden": !0
-			}, n.id) : n.type === "label" ? /* @__PURE__ */ s("li", {
-				role: "presentation",
-				className: t.label,
-				children: n.label
-			}, n.id) : /* @__PURE__ */ s("li", {
-				role: "none",
-				children: /* @__PURE__ */ c("button", {
-					ref: (e) => {
-						b.current[r] = e;
-					},
-					type: "button",
-					role: "menuitem",
-					className: e(t.item, n.danger && t.danger, g === r && t.active),
-					disabled: n.disabled,
-					onClick: () => T(n),
-					onMouseEnter: () => _(r),
-					children: [n.icon && /* @__PURE__ */ s("span", {
-						"aria-hidden": !0,
-						children: n.icon
-					}), n.label]
-				})
-			}, n.id))
+			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);
+			})
 		})]
 	});
 }
 //#endregion
-export { u as DropdownMenu };
+export { d 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, 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.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":"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"}

package/dist/components/Modal/Modal.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Modal.module.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("react-dom");function a({open:a,onClose:c,title:l,children:u,footer:d,size:f=`md`,closeOnBackdrop:p=!0,closeOnEsc:m=!0,className:h,hideCloseButton:g=!1,fullscreen:_=!1,fullscreenOnMobile:v=!1,"aria-label":y}){let b=(0,n.useId)();return(0,n.useEffect)(()=>{if(!a)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)}},[a,m,c]),!a||typeof document>`u`?null:(0,i.createPortal)((0,r.jsx)(`div`,{className:t.default.overlay,role:`presentation`,onClick:()=>{p&&c()},children:(0,r.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":l?b:void 0,"aria-label":l?void 0:y,className:e.cn(t.default.dialog,o(f),_&&t.default.fullscreen,v&&t.default.fullscreenOnMobile,h),onClick:e=>e.stopPropagation(),children:[(l||!g)&&(0,r.jsxs)(`header`,{className:t.default.header,children:[l&&(0,r.jsx)(`h3`,{id:b,className:t.default.title,children:l}),!g&&(0,r.jsx)(`button`,{type:`button`,className:t.default.close,"aria-label":`Fechar`,onClick:c,children:(0,r.jsx)(s,{})})]}),(0,r.jsx)(`div`,{className:t.default.body,children:u}),d&&(0,r.jsx)(`footer`,{className:t.default.footer,children:d})]})}),document.body)}function o(e){return e===`2xl`?t.default.size2xl:e===`3xl`?t.default.size3xl:t.default[e]}function s(){return(0,r.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,children:(0,r.jsx)(`path`,{d:`M6 6l12 12M6 18L18 6`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}exports.Modal=a;
+const e=require("../../utils/cn.cjs"),t=require("../Portal/portal-host.cjs"),n=require("./Modal.module.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("react-dom");function o({open:o,onClose:l,title:u,children:d,footer:f,size:p=`md`,closeOnBackdrop:m=!0,closeOnEsc:h=!0,className:g,hideCloseButton:_=!1,fullscreen:v=!1,fullscreenOnMobile:y=!1,"aria-label":b}){let x=(0,r.useId)();(0,r.useEffect)(()=>{if(!o)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)}},[o,h,l]);let S=t.usePortalHost();return!o||!S?null:(0,a.createPortal)((0,i.jsx)(`div`,{className:n.default.overlay,role:`presentation`,onClick:()=>{m&&l()},children:(0,i.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":u?x:void 0,"aria-label":u?void 0:b,className:e.cn(n.default.dialog,s(p),v&&n.default.fullscreen,y&&n.default.fullscreenOnMobile,g),onClick:e=>e.stopPropagation(),children:[(u||!_)&&(0,i.jsxs)(`header`,{className:n.default.header,children:[u&&(0,i.jsx)(`h3`,{id:x,className:n.default.title,children:u}),!_&&(0,i.jsx)(`button`,{type:`button`,className:n.default.close,"aria-label":`Fechar`,onClick:l,children:(0,i.jsx)(c,{})})]}),(0,i.jsx)(`div`,{className:n.default.body,children:d}),f&&(0,i.jsx)(`footer`,{className:n.default.footer,children:f})]})}),S)}function s(e){return e===`2xl`?n.default.size2xl:e===`3xl`?n.default.size3xl:n.default[e]}function c(){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.Modal=o;
 //# sourceMappingURL=Modal.cjs.map

package/dist/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — size, fullscreen and\n * fullscreenOnMobile are three distinct decisions (a fixed width, always full, full\n * only on a phone), and the rest is the dialog contract: open, onClose, title,\n * children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton. The body is the\n * focus trap and the scroll lock, which must be installed and torn down together.\n */\nimport { useEffect, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Modal.module.css\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport interface ModalProps {\n    open: boolean;\n    onClose: () => void;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    size?: ModalSize;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    className?: string;\n    hideCloseButton?: boolean;\n    /** Force fullscreen at all breakpoints. */\n    fullscreen?: boolean;\n    /** Auto-fullscreen on mobile viewports (< 640px). Default `false`. */\n    fullscreenOnMobile?: boolean;\n    /**\n     * Accessible name for the dialog. Only needed when there is no `title` —\n     * with a `title` the dialog is named by it through `aria-labelledby`.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * Portal-rendered modal dialog with backdrop, Esc handler, and slots for\n * header/body/footer. Locks body scroll while open.\n *\n * The `dialog` role needs an accessible name: a `title` supplies it via\n * `aria-labelledby`, and a titleless dialog should pass `aria-label`. The\n * header heading is only rendered when there is a title, so a close-button-only\n * header does not leave an empty `h3` behind.\n */\nexport function Modal({\n    open,\n    onClose,\n    title,\n    children,\n    footer,\n    size = \"md\",\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    className,\n    hideCloseButton = false,\n    fullscreen = false,\n    fullscreenOnMobile = false,\n    \"aria-label\": ariaLabel,\n}: ModalProps) {\n    const titleId = useId();\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n\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        <div\n            className={styles.overlay}\n            role=\"presentation\"\n            onClick={() => {\n                if (closeOnBackdrop) onClose();\n            }}\n        >\n            <div\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={title ? titleId : undefined}\n                aria-label={title ? undefined : ariaLabel}\n                className={cn(\n                    styles.dialog,\n                    sizeClassName(size),\n                    fullscreen && styles.fullscreen,\n                    fullscreenOnMobile && styles.fullscreenOnMobile,\n                    className,\n                )}\n                onClick={(event) => event.stopPropagation()}\n            >\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        {title && (\n                            <h3 id={titleId} className={styles.title}>\n                                {title}\n                            </h3>\n                        )}\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                className={styles.close}\n                                aria-label=\"Fechar\"\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            </div>\n        </div>,\n        document.body,\n    );\n}\n\nfunction sizeClassName(size: ModalSize): string | undefined {\n    if (size === \"2xl\") return styles.size2xl;\n    if (size === \"3xl\") return styles.size3xl;\n    return styles[size];\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":"mJA8CA,SAAgB,EAAM,CAClB,OACA,UACA,QACA,WACA,SACA,OAAO,KACP,kBAAkB,GAClB,aAAa,GACb,YACA,kBAAkB,GAClB,aAAa,GACb,qBAAqB,GACrB,aAAc,GACH,CACX,IAAM,GAAA,EAAU,EAAA,MAAA,CAAM,EAmBtB,OAlBA,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAC7C,SAAS,KAAK,MAAM,SAAW,SAE/B,IAAM,EAAa,GAA+B,CAC1C,GAAc,EAAM,MAAQ,UAAU,EAAQ,CACtD,EAGA,OAFA,OAAO,iBAAiB,UAAW,CAAS,MAE/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,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,KAAK,eACL,YAAe,CACP,GAAiB,EAAQ,CACjC,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,aAAY,EAAQ,IAAA,GAAY,EAChC,UAAW,EAAA,GACP,EAAA,QAAO,OACP,EAAc,CAAI,EAClB,GAAc,EAAA,QAAO,WACrB,GAAsB,EAAA,QAAO,mBAC7B,CACJ,EACA,QAAU,GAAU,EAAM,gBAAgB,EAZ9C,SAAA,EAcM,GAAS,CAAC,KACR,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,CACK,IACG,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,GAAI,EAAS,UAAW,EAAA,QAAO,MAC9B,SAAA,CACD,CAAA,EAEP,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,MAClB,aAAW,SACX,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,CAC5D,GACJ,CAAA,EACL,SAAS,IACb,CACJ,CAEA,SAAS,EAAc,EAAqC,CAGxD,OAFI,IAAS,MAAc,EAAA,QAAO,QAC9B,IAAS,MAAc,EAAA,QAAO,QAC3B,EAAA,QAAO,EAClB,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":"Modal.cjs","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — size, fullscreen and\n * fullscreenOnMobile are three distinct decisions (a fixed width, always full, full\n * only on a phone), and the rest is the dialog contract: open, onClose, title,\n * children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton. The body is the\n * focus trap and the scroll lock, which must be installed and torn down together.\n */\nimport { useEffect, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Modal.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport interface ModalProps {\n    open: boolean;\n    onClose: () => void;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    size?: ModalSize;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    className?: string;\n    hideCloseButton?: boolean;\n    /** Force fullscreen at all breakpoints. */\n    fullscreen?: boolean;\n    /** Auto-fullscreen on mobile viewports (< 640px). Default `false`. */\n    fullscreenOnMobile?: boolean;\n    /**\n     * Accessible name for the dialog. Only needed when there is no `title` —\n     * with a `title` the dialog is named by it through `aria-labelledby`.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * Portal-rendered modal dialog with backdrop, Esc handler, and slots for\n * header/body/footer. Locks body scroll while open.\n *\n * The `dialog` role needs an accessible name: a `title` supplies it via\n * `aria-labelledby`, and a titleless dialog should pass `aria-label`. The\n * header heading is only rendered when there is a title, so a close-button-only\n * header does not leave an empty `h3` behind.\n */\nexport function Modal({\n    open,\n    onClose,\n    title,\n    children,\n    footer,\n    size = \"md\",\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    className,\n    hideCloseButton = false,\n    fullscreen = false,\n    fullscreenOnMobile = false,\n    \"aria-label\": ariaLabel,\n}: ModalProps) {\n    const titleId = useId();\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n\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        <div\n            className={styles.overlay}\n            role=\"presentation\"\n            onClick={() => {\n                if (closeOnBackdrop) onClose();\n            }}\n        >\n            <div\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={title ? titleId : undefined}\n                aria-label={title ? undefined : ariaLabel}\n                className={cn(\n                    styles.dialog,\n                    sizeClassName(size),\n                    fullscreen && styles.fullscreen,\n                    fullscreenOnMobile && styles.fullscreenOnMobile,\n                    className,\n                )}\n                onClick={(event) => event.stopPropagation()}\n            >\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        {title && (\n                            <h3 id={titleId} className={styles.title}>\n                                {title}\n                            </h3>\n                        )}\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                className={styles.close}\n                                aria-label=\"Fechar\"\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            </div>\n        </div>,\n        portalHost,\n    );\n}\n\nfunction sizeClassName(size: ModalSize): string | undefined {\n    if (size === \"2xl\") return styles.size2xl;\n    if (size === \"3xl\") return styles.size3xl;\n    return styles[size];\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":"0LA+CA,SAAgB,EAAM,CAClB,OACA,UACA,QACA,WACA,SACA,OAAO,KACP,kBAAkB,GAClB,aAAa,GACb,YACA,kBAAkB,GAClB,aAAa,GACb,qBAAqB,GACrB,aAAc,GACH,CACX,IAAM,GAAA,EAAU,EAAA,MAAA,CAAM,GACtB,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAC7C,SAAS,KAAK,MAAM,SAAW,SAE/B,IAAM,EAAa,GAA+B,CAC1C,GAAc,EAAM,MAAQ,UAAU,EAAQ,CACtD,EAGA,OAFA,OAAO,iBAAiB,UAAW,CAAS,MAE/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,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,KAAK,eACL,YAAe,CACP,GAAiB,EAAQ,CACjC,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,aAAY,EAAQ,IAAA,GAAY,EAChC,UAAW,EAAA,GACP,EAAA,QAAO,OACP,EAAc,CAAI,EAClB,GAAc,EAAA,QAAO,WACrB,GAAsB,EAAA,QAAO,mBAC7B,CACJ,EACA,QAAU,GAAU,EAAM,gBAAgB,EAZ9C,SAAA,EAcM,GAAS,CAAC,KACR,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAA1B,SAAA,CACK,IACG,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,GAAI,EAAS,UAAW,EAAA,QAAO,MAC9B,SAAA,CACD,CAAA,EAEP,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,MAClB,aAAW,SACX,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,CAC5D,GACJ,CAAA,EACL,CACJ,CACJ,CAEA,SAAS,EAAc,EAAqC,CAGxD,OAFI,IAAS,MAAc,EAAA,QAAO,QAC9B,IAAS,MAAc,EAAA,QAAO,QAC3B,EAAA,QAAO,EAClB,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/Modal/Modal.js

@@ -1,75 +1,78 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "./Modal.module.js";
-import { useEffect as n, useId as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createPortal as o } from "react-dom";
+import { usePortalHost as t } from "../Portal/portal-host.js";
+import n from "./Modal.module.js";
+import { useEffect as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
 //#region src/components/Modal/Modal.tsx
-function s({ open: s, onClose: u, title: d, children: f, footer: p, size: m = "md", closeOnBackdrop: h = !0, closeOnEsc: g = !0, className: _, hideCloseButton: v = !1, fullscreen: y = !1, fullscreenOnMobile: b = !1, "aria-label": x }) {
-	let S = r();
-	return n(() => {
-		if (!s) return;
+function c({ open: c, onClose: d, title: f, children: p, footer: m, size: h = "md", closeOnBackdrop: g = !0, closeOnEsc: _ = !0, className: v, hideCloseButton: y = !1, fullscreen: b = !1, fullscreenOnMobile: x = !1, "aria-label": S }) {
+	let C = i();
+	r(() => {
+		if (!c) 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);
 		};
 	}, [
-		s,
-		g,
-		u
-	]), !s || typeof document > "u" ? null : o(/* @__PURE__ */ i("div", {
-		className: t.overlay,
+		c,
+		_,
+		d
+	]);
+	let w = t();
+	return !c || !w ? null : s(/* @__PURE__ */ a("div", {
+		className: n.overlay,
 		role: "presentation",
 		onClick: () => {
-			h && u();
+			g && d();
 		},
-		children: /* @__PURE__ */ a("div", {
+		children: /* @__PURE__ */ o("div", {
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": d ? S : void 0,
-			"aria-label": d ? void 0 : x,
-			className: e(t.dialog, c(m), y && t.fullscreen, b && t.fullscreenOnMobile, _),
+			"aria-labelledby": f ? C : void 0,
+			"aria-label": f ? void 0 : S,
+			className: e(n.dialog, l(h), b && n.fullscreen, x && n.fullscreenOnMobile, v),
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				(d || !v) && /* @__PURE__ */ a("header", {
-					className: t.header,
-					children: [d && /* @__PURE__ */ i("h3", {
-						id: S,
-						className: t.title,
-						children: d
-					}), !v && /* @__PURE__ */ i("button", {
+				(f || !y) && /* @__PURE__ */ o("header", {
+					className: n.header,
+					children: [f && /* @__PURE__ */ a("h3", {
+						id: C,
+						className: n.title,
+						children: f
+					}), !y && /* @__PURE__ */ a("button", {
 						type: "button",
-						className: t.close,
+						className: n.close,
 						"aria-label": "Fechar",
-						onClick: u,
-						children: /* @__PURE__ */ i(l, {})
+						onClick: d,
+						children: /* @__PURE__ */ a(u, {})
 					})]
 				}),
-				/* @__PURE__ */ i("div", {
-					className: t.body,
-					children: f
-				}),
-				p && /* @__PURE__ */ i("footer", {
-					className: t.footer,
+				/* @__PURE__ */ a("div", {
+					className: n.body,
 					children: p
+				}),
+				m && /* @__PURE__ */ a("footer", {
+					className: n.footer,
+					children: m
 				})
 			]
 		})
-	}), document.body);
+	}), w);
 }
-function c(e) {
-	return e === "2xl" ? t.size2xl : e === "3xl" ? t.size3xl : t[e];
+function l(e) {
+	return e === "2xl" ? n.size2xl : e === "3xl" ? n.size3xl : n[e];
 }
-function l() {
-	return /* @__PURE__ */ i("svg", {
+function u() {
+	return /* @__PURE__ */ a("svg", {
 		width: "18",
 		height: "18",
 		viewBox: "0 0 24 24",
 		fill: "none",
-		children: /* @__PURE__ */ i("path", {
+		children: /* @__PURE__ */ a("path", {
 			d: "M6 6l12 12M6 18L18 6",
 			stroke: "currentColor",
 			strokeWidth: "2",
@@ -78,6 +81,6 @@ function l() {
 	});
 }
 //#endregion
-export { s as Modal };
+export { c as Modal };
 
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — size, fullscreen and\n * fullscreenOnMobile are three distinct decisions (a fixed width, always full, full\n * only on a phone), and the rest is the dialog contract: open, onClose, title,\n * children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton. The body is the\n * focus trap and the scroll lock, which must be installed and torn down together.\n */\nimport { useEffect, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Modal.module.css\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport interface ModalProps {\n    open: boolean;\n    onClose: () => void;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    size?: ModalSize;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    className?: string;\n    hideCloseButton?: boolean;\n    /** Force fullscreen at all breakpoints. */\n    fullscreen?: boolean;\n    /** Auto-fullscreen on mobile viewports (< 640px). Default `false`. */\n    fullscreenOnMobile?: boolean;\n    /**\n     * Accessible name for the dialog. Only needed when there is no `title` —\n     * with a `title` the dialog is named by it through `aria-labelledby`.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * Portal-rendered modal dialog with backdrop, Esc handler, and slots for\n * header/body/footer. Locks body scroll while open.\n *\n * The `dialog` role needs an accessible name: a `title` supplies it via\n * `aria-labelledby`, and a titleless dialog should pass `aria-label`. The\n * header heading is only rendered when there is a title, so a close-button-only\n * header does not leave an empty `h3` behind.\n */\nexport function Modal({\n    open,\n    onClose,\n    title,\n    children,\n    footer,\n    size = \"md\",\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    className,\n    hideCloseButton = false,\n    fullscreen = false,\n    fullscreenOnMobile = false,\n    \"aria-label\": ariaLabel,\n}: ModalProps) {\n    const titleId = useId();\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n\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        <div\n            className={styles.overlay}\n            role=\"presentation\"\n            onClick={() => {\n                if (closeOnBackdrop) onClose();\n            }}\n        >\n            <div\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={title ? titleId : undefined}\n                aria-label={title ? undefined : ariaLabel}\n                className={cn(\n                    styles.dialog,\n                    sizeClassName(size),\n                    fullscreen && styles.fullscreen,\n                    fullscreenOnMobile && styles.fullscreenOnMobile,\n                    className,\n                )}\n                onClick={(event) => event.stopPropagation()}\n            >\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        {title && (\n                            <h3 id={titleId} className={styles.title}>\n                                {title}\n                            </h3>\n                        )}\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                className={styles.close}\n                                aria-label=\"Fechar\"\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            </div>\n        </div>,\n        document.body,\n    );\n}\n\nfunction sizeClassName(size: ModalSize): string | undefined {\n    if (size === \"2xl\") return styles.size2xl;\n    if (size === \"3xl\") return styles.size3xl;\n    return styles[size];\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":";;;;;;AA8CA,SAAgB,EAAM,EAClB,SACA,YACA,UACA,aACA,WACA,UAAO,MACP,qBAAkB,IAClB,gBAAa,IACb,cACA,qBAAkB,IAClB,gBAAa,IACb,wBAAqB,IACrB,cAAc,KACH;CACX,IAAM,IAAU,EAAM;CAmBtB,OAlBA,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAC7C,SAAS,KAAK,MAAM,WAAW;EAE/B,IAAM,KAAa,MAA+B;GAC9C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ;EACtD;EAGA,OAFA,OAAO,iBAAiB,WAAW,CAAS,SAE/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,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,MAAK;EACL,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;EAEA,UAAA,kBAAC,OAAD;GACI,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,cAAY,IAAQ,KAAA,IAAY;GAChC,WAAW,EACP,EAAO,QACP,EAAc,CAAI,GAClB,KAAc,EAAO,YACrB,KAAsB,EAAO,oBAC7B,CACJ;GACA,UAAU,MAAU,EAAM,gBAAgB;GAZ9C,UAAA;KAcM,KAAS,CAAC,MACR,kBAAC,UAAD;KAAQ,WAAW,EAAO;KAA1B,UAAA,CACK,KACG,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAW,EAAO;MAC9B,UAAA;KACD,CAAA,GAEP,CAAC,KACE,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAO;MAClB,cAAW;MACX,SAAS;MAET,UAAA,kBAAC,GAAD,CAAY,CAAA;KACR,CAAA,CAER;;IAEZ,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;IAC3C,KAAU,kBAAC,UAAD;KAAQ,WAAW,EAAO;KAAS,UAAA;IAAe,CAAA;GAC5D;;CACJ,CAAA,GACL,SAAS,IACb;AACJ;AAEA,SAAS,EAAc,GAAqC;CAGxD,OAFI,MAAS,QAAc,EAAO,UAC9B,MAAS,QAAc,EAAO,UAC3B,EAAO;AAClB;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":"Modal.js","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — size, fullscreen and\n * fullscreenOnMobile are three distinct decisions (a fixed width, always full, full\n * only on a phone), and the rest is the dialog contract: open, onClose, title,\n * children, footer, closeOnBackdrop, closeOnEsc, hideCloseButton. The body is the\n * focus trap and the scroll lock, which must be installed and torn down together.\n */\nimport { useEffect, useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Modal.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\";\n\nexport interface ModalProps {\n    open: boolean;\n    onClose: () => void;\n    title?: ReactNode;\n    children?: ReactNode;\n    footer?: ReactNode;\n    size?: ModalSize;\n    closeOnBackdrop?: boolean;\n    closeOnEsc?: boolean;\n    className?: string;\n    hideCloseButton?: boolean;\n    /** Force fullscreen at all breakpoints. */\n    fullscreen?: boolean;\n    /** Auto-fullscreen on mobile viewports (< 640px). Default `false`. */\n    fullscreenOnMobile?: boolean;\n    /**\n     * Accessible name for the dialog. Only needed when there is no `title` —\n     * with a `title` the dialog is named by it through `aria-labelledby`.\n     */\n    \"aria-label\"?: string;\n}\n\n/**\n * Portal-rendered modal dialog with backdrop, Esc handler, and slots for\n * header/body/footer. Locks body scroll while open.\n *\n * The `dialog` role needs an accessible name: a `title` supplies it via\n * `aria-labelledby`, and a titleless dialog should pass `aria-label`. The\n * header heading is only rendered when there is a title, so a close-button-only\n * header does not leave an empty `h3` behind.\n */\nexport function Modal({\n    open,\n    onClose,\n    title,\n    children,\n    footer,\n    size = \"md\",\n    closeOnBackdrop = true,\n    closeOnEsc = true,\n    className,\n    hideCloseButton = false,\n    fullscreen = false,\n    fullscreenOnMobile = false,\n    \"aria-label\": ariaLabel,\n}: ModalProps) {\n    const titleId = useId();\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n\n        const handleKey = (event: KeyboardEvent): void => {\n            if (closeOnEsc && event.key === \"Escape\") onClose();\n        };\n        window.addEventListener(\"keydown\", handleKey);\n\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        <div\n            className={styles.overlay}\n            role=\"presentation\"\n            onClick={() => {\n                if (closeOnBackdrop) onClose();\n            }}\n        >\n            <div\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={title ? titleId : undefined}\n                aria-label={title ? undefined : ariaLabel}\n                className={cn(\n                    styles.dialog,\n                    sizeClassName(size),\n                    fullscreen && styles.fullscreen,\n                    fullscreenOnMobile && styles.fullscreenOnMobile,\n                    className,\n                )}\n                onClick={(event) => event.stopPropagation()}\n            >\n                {(title || !hideCloseButton) && (\n                    <header className={styles.header}>\n                        {title && (\n                            <h3 id={titleId} className={styles.title}>\n                                {title}\n                            </h3>\n                        )}\n                        {!hideCloseButton && (\n                            <button\n                                type=\"button\"\n                                className={styles.close}\n                                aria-label=\"Fechar\"\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            </div>\n        </div>,\n        portalHost,\n    );\n}\n\nfunction sizeClassName(size: ModalSize): string | undefined {\n    if (size === \"2xl\") return styles.size2xl;\n    if (size === \"3xl\") return styles.size3xl;\n    return styles[size];\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":";;;;;;;AA+CA,SAAgB,EAAM,EAClB,SACA,YACA,UACA,aACA,WACA,UAAO,MACP,qBAAkB,IAClB,gBAAa,IACb,cACA,qBAAkB,IAClB,gBAAa,IACb,wBAAqB,IACrB,cAAc,KACH;CACX,IAAM,IAAU,EAAM;CACtB,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAC7C,SAAS,KAAK,MAAM,WAAW;EAE/B,IAAM,KAAa,MAA+B;GAC9C,AAAI,KAAc,EAAM,QAAQ,YAAU,EAAQ;EACtD;EAGA,OAFA,OAAO,iBAAiB,WAAW,CAAS,SAE/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,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,MAAK;EACL,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;EAEA,UAAA,kBAAC,OAAD;GACI,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,cAAY,IAAQ,KAAA,IAAY;GAChC,WAAW,EACP,EAAO,QACP,EAAc,CAAI,GAClB,KAAc,EAAO,YACrB,KAAsB,EAAO,oBAC7B,CACJ;GACA,UAAU,MAAU,EAAM,gBAAgB;GAZ9C,UAAA;KAcM,KAAS,CAAC,MACR,kBAAC,UAAD;KAAQ,WAAW,EAAO;KAA1B,UAAA,CACK,KACG,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAW,EAAO;MAC9B,UAAA;KACD,CAAA,GAEP,CAAC,KACE,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAO;MAClB,cAAW;MACX,SAAS;MAET,UAAA,kBAAC,GAAD,CAAY,CAAA;KACR,CAAA,CAER;;IAEZ,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;IAC3C,KAAU,kBAAC,UAAD;KAAQ,WAAW,EAAO;KAAS,UAAA;IAAe,CAAA;GAC5D;;CACJ,CAAA,GACL,CACJ;AACJ;AAEA,SAAS,EAAc,GAAqC;CAGxD,OAFI,MAAS,QAAc,EAAO,UAC9B,MAAS,QAAc,EAAO,UAC3B,EAAO;AAClB;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/Money/Money.cjs

@@ -1,2 +1,2 @@
-let e=require("react/jsx-runtime");function t({cents:t,currency:n=`BRL`,locale:r=`pt-BR`,...i}){let a=new Intl.NumberFormat(r,{style:`currency`,currency:n}).format(t/100);return(0,e.jsx)(`span`,{...i,children:a})}exports.Money=t;
+const e=require("../../utils/intl-cache.cjs");let t=require("react/jsx-runtime");function n({cents:n,currency:r=`BRL`,locale:i=`pt-BR`,...a}){let o=e.numberFormat(i,{style:`currency`,currency:r}).format(n/100);return(0,t.jsx)(`span`,{...a,children:o})}exports.Money=n;
 //# sourceMappingURL=Money.cjs.map

package/dist/components/Money/Money.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Money.cjs","names":[],"sources":["../../../src/components/Money/Money.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nexport interface MoneyProps extends HTMLAttributes<HTMLSpanElement> {\n    /** Amount in the smallest currency unit (e.g. cents). */\n    cents: number;\n    /** ISO 4217 currency code. Defaults to \"BRL\". */\n    currency?: string;\n    /** BCP 47 locale used for formatting. Defaults to \"pt-BR\". */\n    locale?: string;\n}\n\n/**\n * Render a monetary amount given in cents as a localized currency string\n * inside a `<span>`.\n *\n * The integer cents are divided by 100 and formatted with `Intl.NumberFormat`.\n *\n * @example\n * <Money cents={1990} />            // \"R$ 19,90\"\n * <Money cents={500} currency=\"USD\" locale=\"en-US\" /> // \"$5.00\"\n */\nexport function Money({ cents, currency = \"BRL\", locale = \"pt-BR\", ...props }: MoneyProps) {\n    const formatted = new Intl.NumberFormat(locale, {\n        style: \"currency\",\n        currency,\n    }).format(cents / 100);\n\n    return <span {...props}>{formatted}</span>;\n}\n"],"mappings":"mCAqBA,SAAgB,EAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,GAAG,GAAqB,CACvF,IAAM,EAAY,IAAI,KAAK,aAAa,EAAQ,CAC5C,MAAO,WACP,UACJ,CAAC,CAAC,CAAC,OAAO,EAAQ,GAAG,EAErB,OAAO,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,EAAQ,SAAA,CAAgB,CAAA,CAC7C"}
+{"version":3,"file":"Money.cjs","names":[],"sources":["../../../src/components/Money/Money.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { numberFormat } from \"@/utils/intl-cache\";\n\nexport interface MoneyProps extends HTMLAttributes<HTMLSpanElement> {\n    /** Amount in the smallest currency unit (e.g. cents). */\n    cents: number;\n    /** ISO 4217 currency code. Defaults to \"BRL\". */\n    currency?: string;\n    /** BCP 47 locale used for formatting. Defaults to \"pt-BR\". */\n    locale?: string;\n}\n\n/**\n * Render a monetary amount given in cents as a localized currency string\n * inside a `<span>`.\n *\n * The integer cents are divided by 100 and formatted with `Intl.NumberFormat`.\n *\n * @example\n * <Money cents={1990} />            // \"R$ 19,90\"\n * <Money cents={500} currency=\"USD\" locale=\"en-US\" /> // \"$5.00\"\n */\nexport function Money({ cents, currency = \"BRL\", locale = \"pt-BR\", ...props }: MoneyProps) {\n    const formatted = numberFormat(locale, { style: \"currency\", currency }).format(cents / 100);\n\n    return <span {...props}>{formatted}</span>;\n}\n"],"mappings":"iFAsBA,SAAgB,EAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,GAAG,GAAqB,CACvF,IAAM,EAAY,EAAA,aAAa,EAAQ,CAAE,MAAO,WAAY,UAAS,CAAC,CAAC,CAAC,OAAO,EAAQ,GAAG,EAE1F,OAAO,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,EAAQ,SAAA,CAAgB,CAAA,CAC7C"}

package/dist/components/Money/Money.js

@@ -1,16 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
+import { numberFormat as e } from "../../utils/intl-cache.js";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Money/Money.tsx
-function t({ cents: t, currency: n = "BRL", locale: r = "pt-BR", ...i }) {
-	let a = new Intl.NumberFormat(r, {
+function n({ cents: n, currency: r = "BRL", locale: i = "pt-BR", ...a }) {
+	let o = e(i, {
 		style: "currency",
-		currency: n
-	}).format(t / 100);
-	return /* @__PURE__ */ e("span", {
-		...i,
-		children: a
+		currency: r
+	}).format(n / 100);
+	return /* @__PURE__ */ t("span", {
+		...a,
+		children: o
 	});
 }
 //#endregion
-export { t as Money };
+export { n as Money };
 
 //# sourceMappingURL=Money.js.map

package/dist/components/Money/Money.js.map

@@ -1 +1 @@
-{"version":3,"file":"Money.js","names":[],"sources":["../../../src/components/Money/Money.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\n\nexport interface MoneyProps extends HTMLAttributes<HTMLSpanElement> {\n    /** Amount in the smallest currency unit (e.g. cents). */\n    cents: number;\n    /** ISO 4217 currency code. Defaults to \"BRL\". */\n    currency?: string;\n    /** BCP 47 locale used for formatting. Defaults to \"pt-BR\". */\n    locale?: string;\n}\n\n/**\n * Render a monetary amount given in cents as a localized currency string\n * inside a `<span>`.\n *\n * The integer cents are divided by 100 and formatted with `Intl.NumberFormat`.\n *\n * @example\n * <Money cents={1990} />            // \"R$ 19,90\"\n * <Money cents={500} currency=\"USD\" locale=\"en-US\" /> // \"$5.00\"\n */\nexport function Money({ cents, currency = \"BRL\", locale = \"pt-BR\", ...props }: MoneyProps) {\n    const formatted = new Intl.NumberFormat(locale, {\n        style: \"currency\",\n        currency,\n    }).format(cents / 100);\n\n    return <span {...props}>{formatted}</span>;\n}\n"],"mappings":";;AAqBA,SAAgB,EAAM,EAAE,UAAO,cAAW,OAAO,YAAS,SAAS,GAAG,KAAqB;CACvF,IAAM,IAAY,IAAI,KAAK,aAAa,GAAQ;EAC5C,OAAO;EACP;CACJ,CAAC,CAAC,CAAC,OAAO,IAAQ,GAAG;CAErB,OAAO,kBAAC,QAAD;EAAM,GAAI;EAAQ,UAAA;CAAgB,CAAA;AAC7C"}
+{"version":3,"file":"Money.js","names":[],"sources":["../../../src/components/Money/Money.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { numberFormat } from \"@/utils/intl-cache\";\n\nexport interface MoneyProps extends HTMLAttributes<HTMLSpanElement> {\n    /** Amount in the smallest currency unit (e.g. cents). */\n    cents: number;\n    /** ISO 4217 currency code. Defaults to \"BRL\". */\n    currency?: string;\n    /** BCP 47 locale used for formatting. Defaults to \"pt-BR\". */\n    locale?: string;\n}\n\n/**\n * Render a monetary amount given in cents as a localized currency string\n * inside a `<span>`.\n *\n * The integer cents are divided by 100 and formatted with `Intl.NumberFormat`.\n *\n * @example\n * <Money cents={1990} />            // \"R$ 19,90\"\n * <Money cents={500} currency=\"USD\" locale=\"en-US\" /> // \"$5.00\"\n */\nexport function Money({ cents, currency = \"BRL\", locale = \"pt-BR\", ...props }: MoneyProps) {\n    const formatted = numberFormat(locale, { style: \"currency\", currency }).format(cents / 100);\n\n    return <span {...props}>{formatted}</span>;\n}\n"],"mappings":";;;AAsBA,SAAgB,EAAM,EAAE,UAAO,cAAW,OAAO,YAAS,SAAS,GAAG,KAAqB;CACvF,IAAM,IAAY,EAAa,GAAQ;EAAE,OAAO;EAAY;CAAS,CAAC,CAAC,CAAC,OAAO,IAAQ,GAAG;CAE1F,OAAO,kBAAC,QAAD;EAAM,GAAI;EAAQ,UAAA;CAAgB,CAAA;AAC7C"}

package/dist/components/Pagination/Pagination.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./Pagination.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e,t,n){if(t<=n+4)return Array.from({length:t},(e,t)=>t+1);let r=Math.max(2,e-Math.floor(n/2)),i=Math.min(t-1,r+n-1),a=[1];r>2&&a.push(`...`);for(let e=r;e<=i;e++)a.push(e);return i<t-1&&a.push(`...`),a.push(t),a}function a({page:a,totalPages:o,onPageChange:s,pageSize:c,onPageSizeChange:l,pageSizeOptions:u=[10,25,50,100],totalItems:d,siblingCount:f=3,className:p}){let m=(0,n.useMemo)(()=>i(a,o,f),[a,o,f]);return o<=1&&!l?null:(0,r.jsxs)(`div`,{className:e.cn(t.default.wrapper,p),children:[(0,r.jsx)(`div`,{className:t.default.summary,children:typeof d==`number`?`${d} resultado${d===1?``:`s`}`:`Página ${a} de ${o}`}),(0,r.jsxs)(`div`,{className:t.default.controls,children:[(0,r.jsx)(`button`,{type:`button`,className:t.default.page,onClick:()=>s(Math.max(1,a-1)),disabled:a<=1,"aria-label":`Página anterior`,children:`‹`}),m.map((n,i)=>n===`...`?(0,r.jsx)(`span`,{className:e.cn(t.default.ellipsis,t.default.numeric),children:`…`},`ellipsis-${i}`):(0,r.jsx)(`button`,{type:`button`,className:e.cn(t.default.page,t.default.numeric,n===a&&t.default.active),onClick:()=>s(n),"aria-current":n===a?`page`:void 0,children:n},n)),(0,r.jsx)(`button`,{type:`button`,className:t.default.page,onClick:()=>s(Math.min(o,a+1)),disabled:a>=o,"aria-label":`Próxima página`,children:`›`}),l&&(0,r.jsx)(`select`,{className:t.default.sizeSelect,value:c,onChange:e=>l(Number(e.target.value)),"aria-label":`Itens por página`,children:u.map(e=>(0,r.jsxs)(`option`,{value:e,children:[e,` / página`]},e))})]})]})}exports.Pagination=a;
+const e=require("../../utils/cn.cjs"),t=require("./Pagination.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e,t,n){if(t<=n+4)return Array.from({length:t},(e,t)=>t+1);let r=Math.max(2,e-Math.floor(n/2)),i=Math.min(t-1,r+n-1),a=[1];r>2&&a.push(`...`);for(let e=r;e<=i;e++)a.push(e);return i<t-1&&a.push(`...`),a.push(t),a}function a({page:a,totalPages:o,onPageChange:s,pageSize:c,onPageSizeChange:l,pageSizeOptions:u=[10,25,50,100],totalItems:d,siblingCount:f=3,compactOnMobile:p=!0,className:m}){let h=(0,n.useMemo)(()=>i(a,o,f),[a,o,f]),g=(0,n.useRef)(null);return(0,n.useEffect)(()=>{p||g.current?.scrollIntoView?.({block:`nearest`,inline:`nearest`})},[a,p]),o<=1&&!l?null:(0,r.jsxs)(`div`,{className:e.cn(t.default.wrapper,m),"data-compact":String(p),children:[(0,r.jsx)(`div`,{className:t.default.summary,children:typeof d==`number`?`${d} resultado${d===1?``:`s`}`:`Página ${a} de ${o}`}),(0,r.jsxs)(`div`,{className:t.default.controls,children:[(0,r.jsx)(`button`,{type:`button`,className:t.default.page,onClick:()=>s(Math.max(1,a-1)),disabled:a<=1,"aria-label":`Página anterior`,children:`‹`}),h.map((n,i)=>n===`...`?(0,r.jsx)(`span`,{className:e.cn(t.default.ellipsis,t.default.numeric),children:`…`},`ellipsis-${i}`):(0,r.jsx)(`button`,{type:`button`,ref:n===a?g:void 0,className:e.cn(t.default.page,t.default.numeric,n===a&&t.default.active),onClick:()=>s(n),"aria-current":n===a?`page`:void 0,children:n},n)),(0,r.jsx)(`button`,{type:`button`,className:t.default.page,onClick:()=>s(Math.min(o,a+1)),disabled:a>=o,"aria-label":`Próxima página`,children:`›`}),l&&(0,r.jsx)(`select`,{className:t.default.sizeSelect,value:c,onChange:e=>l(Number(e.target.value)),"aria-label":`Itens por página`,children:u.map(e=>(0,r.jsxs)(`option`,{value:e,children:[e,` / página`]},e))})]})]})}exports.Pagination=a;
 //# sourceMappingURL=Pagination.cjs.map

package/dist/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useMemo } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Max number of numbered page buttons to show. Default 7. */\n    siblingCount?: number;\n    className?: string;\n}\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = [10, 25, 50, 100],\n    totalItems,\n    siblingCount = 3,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {pageSizeOptions.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"iIAyBA,SAAS,EAAW,EAAc,EAAoB,EAAsC,CAExF,GAAI,GADe,EAAW,EAE1B,OAAO,MAAM,KAAK,CAAE,OAAQ,CAAW,GAAI,EAAG,IAAM,EAAI,CAAC,EAE7D,IAAM,EAAQ,KAAK,IAAI,EAAG,EAAO,KAAK,MAAM,EAAW,CAAC,CAAC,EACnD,EAAM,KAAK,IAAI,EAAa,EAAG,EAAQ,EAAW,CAAC,EACnD,EAA4B,CAAC,CAAC,EAChC,EAAQ,GAAG,EAAM,KAAK,KAAK,EAC/B,IAAK,IAAI,EAAI,EAAO,GAAK,EAAK,IAAK,EAAM,KAAK,CAAC,EAG/C,OAFI,EAAM,EAAa,GAAG,EAAM,KAAK,KAAK,EAC1C,EAAM,KAAK,CAAU,EACd,CACX,CAKA,SAAgB,EAAW,CACvB,OACA,aACA,eACA,WACA,mBACA,kBAAkB,CAAC,GAAI,GAAI,GAAI,GAAG,EAClC,aACA,eAAe,EACf,aACgB,CAChB,IAAM,GAAA,EAAQ,EAAA,QAAA,KACJ,EAAW,EAAM,EAAY,CAAY,EAC/C,CAAC,EAAM,EAAY,CAAY,CACnC,EAIA,OAFI,GAAc,GAAK,CAAC,EAAyB,MAG7C,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAS,EAA5C,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAClB,SAAA,OAAO,GAAe,SACjB,GAAG,EAAW,YAAY,IAAe,EAAI,GAAK,MAClD,UAAU,EAAK,MAAM,GAC1B,CAAA,GACL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAvB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,KAClB,YAAe,EAAa,KAAK,IAAI,EAAG,EAAO,CAAC,CAAC,EACjD,SAAU,GAAQ,EAClB,aAAW,kBACd,SAAA,GAEO,CAAA,EACP,EAAM,KAAK,EAAO,IACf,IAAU,OACN,EAAA,EAAA,IAAA,CAAC,OAAD,CAEI,UAAW,EAAA,GAAG,EAAA,QAAO,SAAU,EAAA,QAAO,OAAO,EAChD,SAAA,GAEK,EAJG,YAAY,GAIf,GAEN,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SAEL,UAAW,EAAA,GACP,EAAA,QAAO,KACP,EAAA,QAAO,QACP,IAAU,GAAQ,EAAA,QAAO,MAC7B,EACA,YAAe,EAAa,CAAK,EACjC,eAAc,IAAU,EAAO,OAAS,IAAA,GAEvC,SAAA,CACG,EAVC,CAUD,CAEhB,GACA,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,KAClB,YAAe,EAAa,KAAK,IAAI,EAAY,EAAO,CAAC,CAAC,EAC1D,SAAU,GAAQ,EAClB,aAAW,iBACd,SAAA,GAEO,CAAA,EACP,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,UAAW,EAAA,QAAO,WAClB,MAAO,EACP,SAAW,GAAU,EAAiB,OAAO,EAAM,OAAO,KAAK,CAAC,EAChE,aAAW,mBAEV,SAAA,EAAgB,IAAK,IAClB,EAAA,EAAA,KAAA,CAAC,SAAD,CAAkB,MAAO,EAAzB,SAAA,CACK,EAAI,WACD,CAFK,EAAA,CAEL,CACX,CACG,CAAA,CAEX,CACJ,CAAA,CAAA,GAEb"}
+{"version":3,"file":"Pagination.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = [10, 25, 50, 100],\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {pageSizeOptions.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}