tempest-react-sdk 0.77.0 → 0.79.0

package/dist/components/Masonry/masonry-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"masonry-layout.js","names":[],"sources":["../../../src/components/Masonry/masonry-layout.ts"],"sourcesContent":["/**\n * Column count for a width, from a breakpoint map.\n *\n * The map is read as \"from this width up\", so `{ 0: 1, 640: 2, 1024: 3 }` means one\n * column on a phone and three on a desktop. Keys are sorted here rather than\n * trusted in insertion order — an object literal written out of order would\n * otherwise pick the wrong column count, silently.\n *\n * @param width - Container width in pixels.\n * @param columns - Breakpoint → column count, or a fixed number.\n * @returns At least 1, always.\n */\nexport function columnsFor(width: number, columns: number | Record<number, number>): number {\n    if (typeof columns === \"number\") return Math.max(1, Math.floor(columns));\n    const steps = Object.keys(columns)\n        .map(Number)\n        .filter((key) => Number.isFinite(key))\n        .sort((a, b) => a - b);\n    let count = 1;\n    for (const step of steps) {\n        if (width >= step) count = columns[step];\n    }\n    return Math.max(1, Math.floor(count));\n}\n\n/**\n * Deal items into columns, shortest column first.\n *\n * Round-robin (`index % columns`) is the obvious approach and produces ragged\n * columns the moment items differ in height — which is the only reason to reach\n * for a masonry layout at all. Feeding the shortest column keeps the bottom edge\n * as even as the content allows.\n *\n * Reading order is the cost, and it is why this is a layout for **independent**\n * cards: down a column rather than across the row. A list where item 2 must follow\n * item 1 wants a grid, not this.\n *\n * @param heights - Estimated or measured height per item, in the items' order.\n * @param columnCount - How many columns to fill.\n * @returns Item indexes per column.\n */\nexport function distribute(heights: readonly number[], columnCount: number): number[][] {\n    const count = Math.max(1, Math.floor(columnCount));\n    const columns: number[][] = Array.from({ length: count }, () => []);\n    const totals = new Array<number>(count).fill(0);\n\n    for (let index = 0; index < heights.length; index += 1) {\n        let shortest = 0;\n        for (let column = 1; column < count; column += 1) {\n            if (totals[column] < totals[shortest]) shortest = column;\n        }\n        columns[shortest].push(index);\n        totals[shortest] += Math.max(1, heights[index] ?? 1);\n    }\n\n    return columns;\n}\n"],"mappings":";AAYA,SAAgB,EAAW,GAAe,GAAkD;CACxF,IAAI,OAAO,KAAY,UAAU,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,CAAO,CAAC;CACvE,IAAM,IAAQ,OAAO,KAAK,CAAO,CAAC,CAC7B,IAAI,MAAM,CAAC,CACX,QAAQ,MAAQ,OAAO,SAAS,CAAG,CAAC,CAAC,CACrC,MAAM,GAAG,MAAM,IAAI,CAAC,GACrB,IAAQ;CACZ,KAAK,IAAM,KAAQ,GACf,AAAI,KAAS,MAAM,IAAQ,EAAQ;CAEvC,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,CAAK,CAAC;AACxC;AAkBA,SAAgB,EAAW,GAA4B,GAAiC;CACpF,IAAM,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,CAAW,CAAC,GAC3C,IAAsB,MAAM,KAAK,EAAE,QAAQ,EAAM,SAAS,CAAC,CAAC,GAC5D,IAAa,MAAc,CAAK,CAAC,CAAC,KAAK,CAAC;CAE9C,KAAK,IAAI,IAAQ,GAAG,IAAQ,EAAQ,QAAQ,KAAS,GAAG;EACpD,IAAI,IAAW;EACf,KAAK,IAAI,IAAS,GAAG,IAAS,GAAO,KAAU,GAC3C,AAAI,EAAO,KAAU,EAAO,OAAW,IAAW;EAGtD,AADA,EAAQ,EAAS,CAAC,KAAK,CAAK,GAC5B,EAAO,MAAa,KAAK,IAAI,GAAG,EAAQ,MAAU,CAAC;CACvD;CAEA,OAAO;AACX"}
+{"version":3,"file":"masonry-layout.js","names":["columnsFor","columns","steps","key","a","b","count","step","width","distribute","columnCount","totals","index","heights","shortest","column"],"sources":["../../../src/components/Masonry/masonry-layout.ts"],"sourcesContent":["/**\n * Column count for a width, from a breakpoint map.\n *\n * The map is read as \"from this width up\", so `{ 0: 1, 640: 2, 1024: 3 }` means one\n * column on a phone and three on a desktop. Keys are sorted here rather than\n * trusted in insertion order — an object literal written out of order would\n * otherwise pick the wrong column count, silently.\n *\n * @param width - Container width in pixels.\n * @param columns - Breakpoint → column count, or a fixed number.\n * @returns At least 1, always.\n */\nexport function columnsFor(width: number, columns: number | Record<number, number>): number {\n    if (typeof columns === \"number\") return Math.max(1, Math.floor(columns));\n    const steps = Object.keys(columns)\n        .map(Number)\n        .filter((key) => Number.isFinite(key))\n        .sort((a, b) => a - b);\n    let count = 1;\n    for (const step of steps) {\n        if (width >= step) count = columns[step];\n    }\n    return Math.max(1, Math.floor(count));\n}\n\n/**\n * Deal items into columns, shortest column first.\n *\n * Round-robin (`index % columns`) is the obvious approach and produces ragged\n * columns the moment items differ in height — which is the only reason to reach\n * for a masonry layout at all. Feeding the shortest column keeps the bottom edge\n * as even as the content allows.\n *\n * Reading order is the cost, and it is why this is a layout for **independent**\n * cards: down a column rather than across the row. A list where item 2 must follow\n * item 1 wants a grid, not this.\n *\n * @param heights - Estimated or measured height per item, in the items' order.\n * @param columnCount - How many columns to fill.\n * @returns Item indexes per column.\n */\nexport function distribute(heights: readonly number[], columnCount: number): number[][] {\n    const count = Math.max(1, Math.floor(columnCount));\n    const columns: number[][] = Array.from({ length: count }, () => []);\n    const totals = new Array<number>(count).fill(0);\n\n    for (let index = 0; index < heights.length; index += 1) {\n        let shortest = 0;\n        for (let column = 1; column < count; column += 1) {\n            if (totals[column] < totals[shortest]) shortest = column;\n        }\n        columns[shortest].push(index);\n        totals[shortest] += Math.max(1, heights[index] ?? 1);\n    }\n\n    return columns;\n}\n"],"mappings":";AAYA,SAAgBA,EAAW,GAAe,GAAkD;CACxF,IAAI,OAAOC,KAAY,UAAU,OAAO,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAO,CAAC;CACvE,IAAMC,IAAQ,OAAO,KAAKD,CAAO,CAAC,CAC7B,IAAI,MAAM,CAAC,CACX,QAAQ,MAAQ,OAAO,SAASE,CAAG,CAAC,CAAC,CACrC,MAAM,GAAG,MAAMC,IAAIC,CAAC,GACrBC,IAAQ;CACZ,KAAK,IAAMC,KAAQL,GACf,AAAIM,KAASD,MAAM,IAAQN,EAAQM;CAEvC,OAAO,KAAK,IAAI,GAAG,KAAK,MAAMD,CAAK,CAAC;AACxC;AAkBA,SAAgBG,EAAW,GAA4B,GAAiC;CACpF,IAAMH,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAMI,CAAW,CAAC,GAC3CT,IAAsB,MAAM,KAAK,EAAE,QAAQK,EAAM,SAAS,CAAC,CAAC,GAC5DK,IAAa,MAAcL,CAAK,CAAC,CAAC,KAAK,CAAC;CAE9C,KAAK,IAAIM,IAAQ,GAAGA,IAAQC,EAAQ,QAAQ,KAAS,GAAG;EACpD,IAAIC,IAAW;EACf,KAAK,IAAIC,IAAS,GAAGA,IAAST,GAAO,KAAU,GAC3C,AAAIK,EAAOI,KAAUJ,EAAOG,OAAW,IAAWC;EAGtD,AADAd,EAAQa,EAAS,CAAC,KAAKF,CAAK,GAC5B,EAAOE,MAAa,KAAK,IAAI,GAAGD,EAAQD,MAAU,CAAC;CACvD;CAEA,OAAOX;AACX"}

package/dist/components/Menubar/Menubar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menubar.cjs","names":[],"sources":["../../../src/components/Menubar/Menubar.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — a menubar has two keyboard planes — arrow keys\n * move between menus, arrows inside one move between items — and the body owns both\n * because a key press is routed by which plane is open.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Menubar.module.css\";\n\nexport type MenubarItem =\n    | {\n          /** Visible label for the action. */\n          label: ReactNode;\n          /** Invoked when the action is selected. */\n          onSelect?: () => void;\n          /** Disable the action. */\n          disabled?: boolean;\n          /** Optional shortcut hint rendered right-aligned (e.g. `\"⌘S\"`). */\n          shortcut?: string;\n      }\n    | { separator: true };\n\nexport interface MenubarMenu {\n    /** Top-level menu label (e.g. `\"File\"`). */\n    label: ReactNode;\n    /** Items shown in the menu's dropdown. */\n    items: MenubarItem[];\n}\n\nexport interface MenubarProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top-level menus rendered left-to-right. */\n    menus: MenubarMenu[];\n    /**\n     * Render the open panel in a portal, positioned under its trigger. Default\n     * `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the panel,\n     * and the SDK's own `Navbar` is one: its `nav` slot scrolls horizontally, and\n     * `overflow-x: auto` forces `overflow-y` to `auto` too — a menu showed\n     * 0% of its panel there (measured in Chrome at 1440 px). In a portal the\n     * panel escapes the clip, flips at the viewport edge, stays in the tab order\n     * right after its trigger, and follows it on scroll and resize.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 4 px. */\nconst PANEL_OFFSET = 4;\n\nfunction isSeparator(item: MenubarItem): item is { separator: true } {\n    return \"separator\" in item;\n}\n\n/**\n * Application menubar (File / Edit-style).\n *\n * - `role=\"menubar\"`; each menu is a button that opens a dropdown.\n * - Arrow Left/Right moves between menus (wrapping); opening one closes others.\n * - Closes on outside click, Escape, or selecting an item.\n * - Items may carry a `shortcut` (right-aligned) or be a `{ separator: true }`.\n *\n * @example\n * <Menubar\n *     menus={[\n *         {\n *             label: \"File\",\n *             items: [\n *                 { label: \"New\", shortcut: \"⌘N\", onSelect: () => create() },\n *                 { separator: true },\n *                 { label: \"Quit\", onSelect: () => quit() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function Menubar({ menus, portal = true, className, ...props }: MenubarProps) {\n    const [openIndex, setOpenIndex] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const close = useCallback((): void => {\n        setOpenIndex(-1);\n    }, []);\n\n    const [anchorNode, setAnchorNode] = useState<HTMLDivElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLUListElement | null>(null);\n    const floating = portal && openIndex !== -1;\n    const floatingStyle = useAnchorPosition({\n        anchor: anchorNode,\n        floating: panelNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: PANEL_OFFSET,\n        enabled: floating,\n    });\n    usePortalTabOrder({ enabled: floating, anchor: anchorNode, panel: panelNode });\n\n    useEscapeLayer(openIndex !== -1, () => {\n        close();\n        triggerRefs.current[openIndex]?.focus();\n    });\n\n    /**\n     * Arrow keys move between menus while one is open; a press outside both the\n     * menubar and the open panel closes it.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menubar's root: a press on one of its items would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the item's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"ArrowRight\") {\n                event.preventDefault();\n                const next = (openIndex + 1) % menus.length;\n                setOpenIndex(next);\n                triggerRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault();\n                const prev = (openIndex - 1 + menus.length) % menus.length;\n                setOpenIndex(prev);\n                triggerRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootRef.current?.contains(target) || panelNode?.contains(target)) return;\n            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    }, [openIndex, menus.length, close, panelNode]);\n\n    /**\n     * The dropdown of one menu.\n     *\n     * @param menu - The menu whose items are listed.\n     * @param panelId - The id the trigger's `aria-controls` points at.\n     * @returns The panel element, in flow or for the portal.\n     */\n    const panel = (menu: MenubarMenu, panelId: string): ReactNode => (\n        <ul\n            ref={setPanelNode}\n            id={panelId}\n            role=\"menu\"\n            className={cn(styles.panel, portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {menu.items.map((item, itemIndex) => {\n                if (isSeparator(item)) {\n                    return (\n                        <li\n                            key={itemIndex}\n                            role=\"separator\"\n                            className={styles.separator}\n                            aria-hidden\n                        />\n                    );\n                }\n                return (\n                    <li key={itemIndex} role=\"none\">\n                        <button\n                            type=\"button\"\n                            role=\"menuitem\"\n                            className={styles.item}\n                            disabled={item.disabled}\n                            onClick={() => {\n                                item.onSelect?.();\n                                close();\n                            }}\n                        >\n                            <span className={styles.itemLabel}>{item.label}</span>\n                            {item.shortcut && (\n                                <span className={styles.shortcut}>{item.shortcut}</span>\n                            )}\n                        </button>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} role=\"menubar\" className={cn(styles.root, className)} {...props}>\n            {menus.map((menu, index) => {\n                const open = openIndex === index;\n                const panelId = `${baseId}-panel-${index}`;\n                return (\n                    <div key={index} ref={open ? setAnchorNode : undefined} className={styles.menu}>\n                        <button\n                            ref={(el) => {\n                                triggerRefs.current[index] = el;\n                            }}\n                            type=\"button\"\n                            role=\"menuitem\"\n                            aria-haspopup=\"menu\"\n                            aria-expanded={open}\n                            aria-controls={open ? panelId : undefined}\n                            className={cn(styles.trigger, open && styles.triggerOpen)}\n                            onClick={() => setOpenIndex((prev) => (prev === index ? -1 : index))}\n                        >\n                            {menu.label}\n                        </button>\n                        {open &&\n                            (portal ? (\n                                <Portal>{panel(menu, panelId)}</Portal>\n                            ) : (\n                                panel(menu, panelId)\n                            ))}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Menubar.cjs","names":["useState","useId","useRef","useCallback","useAnchorPosition","cn","styles","Portal","require_cn","require_escape_layer","require_Portal","require_anchor_position","require_tab_bridge","require_Menubar_module","react","react_jsx_runtime","PANEL_OFFSET","isSeparator","item","Menubar","props","openIndex","setOpenIndex","baseId","rootRef","triggerRefs","close","anchorNode","setAnchorNode","panelNode","setPanelNode","floating","portal","floatingStyle","onKey","event","next","menus","prev","onDown","target","panel","panelId","menu","itemIndex","className","open","index","el"],"sources":["../../../src/components/Menubar/Menubar.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — a menubar has two keyboard planes — arrow keys\n * move between menus, arrows inside one move between items — and the body owns both\n * because a key press is routed by which plane is open.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Menubar.module.css\";\n\nexport type MenubarItem =\n    | {\n          /** Visible label for the action. */\n          label: ReactNode;\n          /** Invoked when the action is selected. */\n          onSelect?: () => void;\n          /** Disable the action. */\n          disabled?: boolean;\n          /** Optional shortcut hint rendered right-aligned (e.g. `\"⌘S\"`). */\n          shortcut?: string;\n      }\n    | { separator: true };\n\nexport interface MenubarMenu {\n    /** Top-level menu label (e.g. `\"File\"`). */\n    label: ReactNode;\n    /** Items shown in the menu's dropdown. */\n    items: MenubarItem[];\n}\n\nexport interface MenubarProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top-level menus rendered left-to-right. */\n    menus: MenubarMenu[];\n    /**\n     * Render the open panel in a portal, positioned under its trigger. Default\n     * `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the panel,\n     * and the SDK's own `Navbar` is one: its `nav` slot scrolls horizontally, and\n     * `overflow-x: auto` forces `overflow-y` to `auto` too — a menu showed\n     * 0% of its panel there (measured in Chrome at 1440 px). In a portal the\n     * panel escapes the clip, flips at the viewport edge, stays in the tab order\n     * right after its trigger, and follows it on scroll and resize.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 4 px. */\nconst PANEL_OFFSET = 4;\n\nfunction isSeparator(item: MenubarItem): item is { separator: true } {\n    return \"separator\" in item;\n}\n\n/**\n * Application menubar (File / Edit-style).\n *\n * - `role=\"menubar\"`; each menu is a button that opens a dropdown.\n * - Arrow Left/Right moves between menus (wrapping); opening one closes others.\n * - Closes on outside click, Escape, or selecting an item.\n * - Items may carry a `shortcut` (right-aligned) or be a `{ separator: true }`.\n *\n * @example\n * <Menubar\n *     menus={[\n *         {\n *             label: \"File\",\n *             items: [\n *                 { label: \"New\", shortcut: \"⌘N\", onSelect: () => create() },\n *                 { separator: true },\n *                 { label: \"Quit\", onSelect: () => quit() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function Menubar({ menus, portal = true, className, ...props }: MenubarProps) {\n    const [openIndex, setOpenIndex] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const close = useCallback((): void => {\n        setOpenIndex(-1);\n    }, []);\n\n    const [anchorNode, setAnchorNode] = useState<HTMLDivElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLUListElement | null>(null);\n    const floating = portal && openIndex !== -1;\n    const floatingStyle = useAnchorPosition({\n        anchor: anchorNode,\n        floating: panelNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: PANEL_OFFSET,\n        enabled: floating,\n    });\n    usePortalTabOrder({ enabled: floating, anchor: anchorNode, panel: panelNode });\n\n    useEscapeLayer(openIndex !== -1, () => {\n        close();\n        triggerRefs.current[openIndex]?.focus();\n    });\n\n    /**\n     * Arrow keys move between menus while one is open; a press outside both the\n     * menubar and the open panel closes it.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menubar's root: a press on one of its items would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the item's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"ArrowRight\") {\n                event.preventDefault();\n                const next = (openIndex + 1) % menus.length;\n                setOpenIndex(next);\n                triggerRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault();\n                const prev = (openIndex - 1 + menus.length) % menus.length;\n                setOpenIndex(prev);\n                triggerRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootRef.current?.contains(target) || panelNode?.contains(target)) return;\n            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    }, [openIndex, menus.length, close, panelNode]);\n\n    /**\n     * The dropdown of one menu.\n     *\n     * @param menu - The menu whose items are listed.\n     * @param panelId - The id the trigger's `aria-controls` points at.\n     * @returns The panel element, in flow or for the portal.\n     */\n    const panel = (menu: MenubarMenu, panelId: string): ReactNode => (\n        <ul\n            ref={setPanelNode}\n            id={panelId}\n            role=\"menu\"\n            className={cn(styles.panel, portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {menu.items.map((item, itemIndex) => {\n                if (isSeparator(item)) {\n                    return (\n                        <li\n                            key={itemIndex}\n                            role=\"separator\"\n                            className={styles.separator}\n                            aria-hidden\n                        />\n                    );\n                }\n                return (\n                    <li key={itemIndex} role=\"none\">\n                        <button\n                            type=\"button\"\n                            role=\"menuitem\"\n                            className={styles.item}\n                            disabled={item.disabled}\n                            onClick={() => {\n                                item.onSelect?.();\n                                close();\n                            }}\n                        >\n                            <span className={styles.itemLabel}>{item.label}</span>\n                            {item.shortcut && (\n                                <span className={styles.shortcut}>{item.shortcut}</span>\n                            )}\n                        </button>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} role=\"menubar\" className={cn(styles.root, className)} {...props}>\n            {menus.map((menu, index) => {\n                const open = openIndex === index;\n                const panelId = `${baseId}-panel-${index}`;\n                return (\n                    <div key={index} ref={open ? setAnchorNode : undefined} className={styles.menu}>\n                        <button\n                            ref={(el) => {\n                                triggerRefs.current[index] = el;\n                            }}\n                            type=\"button\"\n                            role=\"menuitem\"\n                            aria-haspopup=\"menu\"\n                            aria-expanded={open}\n                            aria-controls={open ? panelId : undefined}\n                            className={cn(styles.trigger, open && styles.triggerOpen)}\n                            onClick={() => setOpenIndex((prev) => (prev === index ? -1 : index))}\n                        >\n                            {menu.label}\n                        </button>\n                        {open &&\n                            (portal ? (\n                                <Portal>{panel(menu, panelId)}</Portal>\n                            ) : (\n                                panel(menu, panelId)\n                            ))}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Menubar/Menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menubar.js","names":[],"sources":["../../../src/components/Menubar/Menubar.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — a menubar has two keyboard planes — arrow keys\n * move between menus, arrows inside one move between items — and the body owns both\n * because a key press is routed by which plane is open.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Menubar.module.css\";\n\nexport type MenubarItem =\n    | {\n          /** Visible label for the action. */\n          label: ReactNode;\n          /** Invoked when the action is selected. */\n          onSelect?: () => void;\n          /** Disable the action. */\n          disabled?: boolean;\n          /** Optional shortcut hint rendered right-aligned (e.g. `\"⌘S\"`). */\n          shortcut?: string;\n      }\n    | { separator: true };\n\nexport interface MenubarMenu {\n    /** Top-level menu label (e.g. `\"File\"`). */\n    label: ReactNode;\n    /** Items shown in the menu's dropdown. */\n    items: MenubarItem[];\n}\n\nexport interface MenubarProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top-level menus rendered left-to-right. */\n    menus: MenubarMenu[];\n    /**\n     * Render the open panel in a portal, positioned under its trigger. Default\n     * `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the panel,\n     * and the SDK's own `Navbar` is one: its `nav` slot scrolls horizontally, and\n     * `overflow-x: auto` forces `overflow-y` to `auto` too — a menu showed\n     * 0% of its panel there (measured in Chrome at 1440 px). In a portal the\n     * panel escapes the clip, flips at the viewport edge, stays in the tab order\n     * right after its trigger, and follows it on scroll and resize.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 4 px. */\nconst PANEL_OFFSET = 4;\n\nfunction isSeparator(item: MenubarItem): item is { separator: true } {\n    return \"separator\" in item;\n}\n\n/**\n * Application menubar (File / Edit-style).\n *\n * - `role=\"menubar\"`; each menu is a button that opens a dropdown.\n * - Arrow Left/Right moves between menus (wrapping); opening one closes others.\n * - Closes on outside click, Escape, or selecting an item.\n * - Items may carry a `shortcut` (right-aligned) or be a `{ separator: true }`.\n *\n * @example\n * <Menubar\n *     menus={[\n *         {\n *             label: \"File\",\n *             items: [\n *                 { label: \"New\", shortcut: \"⌘N\", onSelect: () => create() },\n *                 { separator: true },\n *                 { label: \"Quit\", onSelect: () => quit() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function Menubar({ menus, portal = true, className, ...props }: MenubarProps) {\n    const [openIndex, setOpenIndex] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const close = useCallback((): void => {\n        setOpenIndex(-1);\n    }, []);\n\n    const [anchorNode, setAnchorNode] = useState<HTMLDivElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLUListElement | null>(null);\n    const floating = portal && openIndex !== -1;\n    const floatingStyle = useAnchorPosition({\n        anchor: anchorNode,\n        floating: panelNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: PANEL_OFFSET,\n        enabled: floating,\n    });\n    usePortalTabOrder({ enabled: floating, anchor: anchorNode, panel: panelNode });\n\n    useEscapeLayer(openIndex !== -1, () => {\n        close();\n        triggerRefs.current[openIndex]?.focus();\n    });\n\n    /**\n     * Arrow keys move between menus while one is open; a press outside both the\n     * menubar and the open panel closes it.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menubar's root: a press on one of its items would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the item's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"ArrowRight\") {\n                event.preventDefault();\n                const next = (openIndex + 1) % menus.length;\n                setOpenIndex(next);\n                triggerRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault();\n                const prev = (openIndex - 1 + menus.length) % menus.length;\n                setOpenIndex(prev);\n                triggerRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootRef.current?.contains(target) || panelNode?.contains(target)) return;\n            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    }, [openIndex, menus.length, close, panelNode]);\n\n    /**\n     * The dropdown of one menu.\n     *\n     * @param menu - The menu whose items are listed.\n     * @param panelId - The id the trigger's `aria-controls` points at.\n     * @returns The panel element, in flow or for the portal.\n     */\n    const panel = (menu: MenubarMenu, panelId: string): ReactNode => (\n        <ul\n            ref={setPanelNode}\n            id={panelId}\n            role=\"menu\"\n            className={cn(styles.panel, portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {menu.items.map((item, itemIndex) => {\n                if (isSeparator(item)) {\n                    return (\n                        <li\n                            key={itemIndex}\n                            role=\"separator\"\n                            className={styles.separator}\n                            aria-hidden\n                        />\n                    );\n                }\n                return (\n                    <li key={itemIndex} role=\"none\">\n                        <button\n                            type=\"button\"\n                            role=\"menuitem\"\n                            className={styles.item}\n                            disabled={item.disabled}\n                            onClick={() => {\n                                item.onSelect?.();\n                                close();\n                            }}\n                        >\n                            <span className={styles.itemLabel}>{item.label}</span>\n                            {item.shortcut && (\n                                <span className={styles.shortcut}>{item.shortcut}</span>\n                            )}\n                        </button>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} role=\"menubar\" className={cn(styles.root, className)} {...props}>\n            {menus.map((menu, index) => {\n                const open = openIndex === index;\n                const panelId = `${baseId}-panel-${index}`;\n                return (\n                    <div key={index} ref={open ? setAnchorNode : undefined} className={styles.menu}>\n                        <button\n                            ref={(el) => {\n                                triggerRefs.current[index] = el;\n                            }}\n                            type=\"button\"\n                            role=\"menuitem\"\n                            aria-haspopup=\"menu\"\n                            aria-expanded={open}\n                            aria-controls={open ? panelId : undefined}\n                            className={cn(styles.trigger, open && styles.triggerOpen)}\n                            onClick={() => setOpenIndex((prev) => (prev === index ? -1 : index))}\n                        >\n                            {menu.label}\n                        </button>\n                        {open &&\n                            (portal ? (\n                                <Portal>{panel(menu, panelId)}</Portal>\n                            ) : (\n                                panel(menu, panelId)\n                            ))}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Menubar.js","names":["styles","Menubar_module_default","PANEL_OFFSET","isSeparator","item","Menubar","props","openIndex","setOpenIndex","useState","baseId","useId","rootRef","useRef","triggerRefs","close","useCallback","anchorNode","setAnchorNode","panelNode","setPanelNode","floating","portal","floatingStyle","useAnchorPosition","usePortalTabOrder","useEscapeLayer","useEffect","onKey","event","next","menus","prev","onDown","target","panel","panelId","cn","menu","itemIndex","className","open","index","el","Portal"],"sources":["../../../src/components/Menubar/Menubar.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — a menubar has two keyboard planes — arrow keys\n * move between menus, arrows inside one move between items — and the body owns both\n * because a key press is routed by which plane is open.\n */\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Menubar.module.css\";\n\nexport type MenubarItem =\n    | {\n          /** Visible label for the action. */\n          label: ReactNode;\n          /** Invoked when the action is selected. */\n          onSelect?: () => void;\n          /** Disable the action. */\n          disabled?: boolean;\n          /** Optional shortcut hint rendered right-aligned (e.g. `\"⌘S\"`). */\n          shortcut?: string;\n      }\n    | { separator: true };\n\nexport interface MenubarMenu {\n    /** Top-level menu label (e.g. `\"File\"`). */\n    label: ReactNode;\n    /** Items shown in the menu's dropdown. */\n    items: MenubarItem[];\n}\n\nexport interface MenubarProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top-level menus rendered left-to-right. */\n    menus: MenubarMenu[];\n    /**\n     * Render the open panel in a portal, positioned under its trigger. Default\n     * `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the panel,\n     * and the SDK's own `Navbar` is one: its `nav` slot scrolls horizontally, and\n     * `overflow-x: auto` forces `overflow-y` to `auto` too — a menu showed\n     * 0% of its panel there (measured in Chrome at 1440 px). In a portal the\n     * panel escapes the clip, flips at the viewport edge, stays in the tab order\n     * right after its trigger, and follows it on scroll and resize.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 4 px. */\nconst PANEL_OFFSET = 4;\n\nfunction isSeparator(item: MenubarItem): item is { separator: true } {\n    return \"separator\" in item;\n}\n\n/**\n * Application menubar (File / Edit-style).\n *\n * - `role=\"menubar\"`; each menu is a button that opens a dropdown.\n * - Arrow Left/Right moves between menus (wrapping); opening one closes others.\n * - Closes on outside click, Escape, or selecting an item.\n * - Items may carry a `shortcut` (right-aligned) or be a `{ separator: true }`.\n *\n * @example\n * <Menubar\n *     menus={[\n *         {\n *             label: \"File\",\n *             items: [\n *                 { label: \"New\", shortcut: \"⌘N\", onSelect: () => create() },\n *                 { separator: true },\n *                 { label: \"Quit\", onSelect: () => quit() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function Menubar({ menus, portal = true, className, ...props }: MenubarProps) {\n    const [openIndex, setOpenIndex] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const close = useCallback((): void => {\n        setOpenIndex(-1);\n    }, []);\n\n    const [anchorNode, setAnchorNode] = useState<HTMLDivElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLUListElement | null>(null);\n    const floating = portal && openIndex !== -1;\n    const floatingStyle = useAnchorPosition({\n        anchor: anchorNode,\n        floating: panelNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: PANEL_OFFSET,\n        enabled: floating,\n    });\n    usePortalTabOrder({ enabled: floating, anchor: anchorNode, panel: panelNode });\n\n    useEscapeLayer(openIndex !== -1, () => {\n        close();\n        triggerRefs.current[openIndex]?.focus();\n    });\n\n    /**\n     * Arrow keys move between menus while one is open; a press outside both the\n     * menubar and the open panel closes it.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menubar's root: a press on one of its items would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the item's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"ArrowRight\") {\n                event.preventDefault();\n                const next = (openIndex + 1) % menus.length;\n                setOpenIndex(next);\n                triggerRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault();\n                const prev = (openIndex - 1 + menus.length) % menus.length;\n                setOpenIndex(prev);\n                triggerRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            const target = event.target as Node;\n            if (rootRef.current?.contains(target) || panelNode?.contains(target)) return;\n            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    }, [openIndex, menus.length, close, panelNode]);\n\n    /**\n     * The dropdown of one menu.\n     *\n     * @param menu - The menu whose items are listed.\n     * @param panelId - The id the trigger's `aria-controls` points at.\n     * @returns The panel element, in flow or for the portal.\n     */\n    const panel = (menu: MenubarMenu, panelId: string): ReactNode => (\n        <ul\n            ref={setPanelNode}\n            id={panelId}\n            role=\"menu\"\n            className={cn(styles.panel, portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {menu.items.map((item, itemIndex) => {\n                if (isSeparator(item)) {\n                    return (\n                        <li\n                            key={itemIndex}\n                            role=\"separator\"\n                            className={styles.separator}\n                            aria-hidden\n                        />\n                    );\n                }\n                return (\n                    <li key={itemIndex} role=\"none\">\n                        <button\n                            type=\"button\"\n                            role=\"menuitem\"\n                            className={styles.item}\n                            disabled={item.disabled}\n                            onClick={() => {\n                                item.onSelect?.();\n                                close();\n                            }}\n                        >\n                            <span className={styles.itemLabel}>{item.label}</span>\n                            {item.shortcut && (\n                                <span className={styles.shortcut}>{item.shortcut}</span>\n                            )}\n                        </button>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} role=\"menubar\" className={cn(styles.root, className)} {...props}>\n            {menus.map((menu, index) => {\n                const open = openIndex === index;\n                const panelId = `${baseId}-panel-${index}`;\n                return (\n                    <div key={index} ref={open ? setAnchorNode : undefined} className={styles.menu}>\n                        <button\n                            ref={(el) => {\n                                triggerRefs.current[index] = el;\n                            }}\n                            type=\"button\"\n                            role=\"menuitem\"\n                            aria-haspopup=\"menu\"\n                            aria-expanded={open}\n                            aria-controls={open ? panelId : undefined}\n                            className={cn(styles.trigger, open && styles.triggerOpen)}\n                            onClick={() => setOpenIndex((prev) => (prev === index ? -1 : index))}\n                        >\n                            {menu.label}\n                        </button>\n                        {open &&\n                            (portal ? (\n                                <Portal>{panel(menu, panelId)}</Portal>\n                            ) : (\n                                panel(menu, panelId)\n                            ))}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Menubar.module.cjs","names":[],"sources":["../../../src/components/Menubar/Menubar.module.css"],"sourcesContent":[".root {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n}\n\n.menu {\n    position: relative;\n}\n\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.triggerOpen {\n    background-color: var(--tempest-surface);\n}\n\n.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 200px;\n    max-width: 360px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menubar-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-4);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus {\n    outline: none;\n    background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.itemLabel {\n    flex: 1;\n}\n\n.shortcut {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-menubar-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}
+{"version":3,"file":"Menubar.module.cjs","names":["root","menu","trigger","triggerOpen","panel","tempestMenubarIn","item","itemLabel","shortcut","separator","portalled","Menubar_module_default"],"sources":["../../../src/components/Menubar/Menubar.module.css"],"sourcesContent":[".root {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n}\n\n.menu {\n    position: relative;\n}\n\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.triggerOpen {\n    background-color: var(--tempest-surface);\n}\n\n.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 200px;\n    max-width: 360px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menubar-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-4);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus {\n    outline: none;\n    background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.itemLabel {\n    flex: 1;\n}\n\n.shortcut {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-menubar-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Menubar.module.js","names":[],"sources":["../../../src/components/Menubar/Menubar.module.css"],"sourcesContent":[".root {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n}\n\n.menu {\n    position: relative;\n}\n\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.triggerOpen {\n    background-color: var(--tempest-surface);\n}\n\n.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 200px;\n    max-width: 360px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menubar-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-4);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus {\n    outline: none;\n    background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.itemLabel {\n    flex: 1;\n}\n\n.shortcut {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-menubar-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}
+{"version":3,"file":"Menubar.module.js","names":["root","menu","trigger","triggerOpen","panel","tempestMenubarIn","item","itemLabel","shortcut","separator","portalled","Menubar_module_default"],"sources":["../../../src/components/Menubar/Menubar.module.css"],"sourcesContent":[".root {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n}\n\n.menu {\n    position: relative;\n}\n\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.trigger:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.triggerOpen {\n    background-color: var(--tempest-surface);\n}\n\n.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 200px;\n    max-width: 360px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-menubar-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-4);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus {\n    outline: none;\n    background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.itemLabel {\n    flex: 1;\n}\n\n.shortcut {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-menubar-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}

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, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\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 * Keyboard focus is trapped in the dialog while it is open (`useFocusTrap`): it\n * enters on the first tab stop — or the dialog itself when there is none —,\n * `Tab`/`Shift+Tab` cycle inside it, including the panels of a `Popover` or\n * `HoverCard` opened from it, and closing returns focus to the element that\n * opened it. `aria-modal=\"true\"` tells a screen reader the page behind is inert;\n * the trap is what makes that true for the keyboard.\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    const dialogRef = useRef<HTMLDivElement>(null);\n    useFocusTrap(dialogRef, open);\n    useEscapeLayer(open, closeOnEsc ? onClose : null);\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previousOverflow;\n        };\n    }, [open]);\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                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                tabIndex={-1}\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\n/**\n * Resolve the width class for a {@link ModalSize}.\n *\n * `2xl`/`3xl` are not valid CSS identifiers, so their rules are `.size2Xl` and\n * `.size3Xl` — spelled exactly as the build exports them. The build camelCases\n * CSS-module keys (`localsConvention: \"camelCaseOnly\"`), which turns `.size2xl`\n * into the key `size2Xl`; a lookup of `styles.size2xl` was `undefined` in `dist/`\n * and both sizes rendered with no `max-width` at all (issue #405).\n *\n * @param size - The requested modal size.\n * @returns The CSS-module class name for that size.\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":"8QAwDA,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,EAChB,GAAA,EAAY,EAAA,OAAA,CAAuB,IAAI,EAC7C,EAAA,aAAa,EAAW,CAAI,EAC5B,EAAA,eAAe,EAAM,EAAa,EAAU,IAAI,GAChD,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAM,OACX,IAAM,EAAmB,SAAS,KAAK,MAAM,SAE7C,MADA,UAAS,KAAK,MAAM,SAAW,aAClB,CACT,SAAS,KAAK,MAAM,SAAW,CACnC,CACJ,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,EAAa,EAAA,cAAc,EAIjC,MAFI,CAAC,GAAQ,CAAC,EAAmB,MAEjC,EAAO,EAAA,aAAA,EACH,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,QAClB,KAAK,eACL,YAAe,CACP,GAAiB,EAAQ,CACjC,EAEA,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,IAAK,EACL,KAAK,SACL,aAAW,OACX,SAAU,GACV,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,EAd9C,SAAA,EAgBM,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,CAcA,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":["useId","useRef","usePortalHost","createPortal","styles","cn","require_cn","require_escape_layer","require_use_focus_trap","require_portal_host","require_Modal_module","react","react_jsx_runtime","react_dom","Modal","ariaLabel","titleId","dialogRef","open","closeOnEsc","onClose","previousOverflow","portalHost","closeOnBackdrop","title","sizeClassName","size","fullscreen","fullscreenOnMobile","className","event","hideCloseButton","CloseIcon","footer"],"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, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\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 * Keyboard focus is trapped in the dialog while it is open (`useFocusTrap`): it\n * enters on the first tab stop — or the dialog itself when there is none —,\n * `Tab`/`Shift+Tab` cycle inside it, including the panels of a `Popover` or\n * `HoverCard` opened from it, and closing returns focus to the element that\n * opened it. `aria-modal=\"true\"` tells a screen reader the page behind is inert;\n * the trap is what makes that true for the keyboard.\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    const dialogRef = useRef<HTMLDivElement>(null);\n    useFocusTrap(dialogRef, open);\n    useEscapeLayer(open, closeOnEsc ? onClose : null);\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previousOverflow;\n        };\n    }, [open]);\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                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                tabIndex={-1}\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\n/**\n * Resolve the width class for a {@link ModalSize}.\n *\n * `2xl`/`3xl` are not valid CSS identifiers, so their rules are `.size2Xl` and\n * `.size3Xl` — spelled exactly as the build exports them. The build camelCases\n * CSS-module keys (`localsConvention: \"camelCaseOnly\"`), which turns `.size2xl`\n * into the key `size2Xl`; a lookup of `styles.size2xl` was `undefined` in `dist/`\n * and both sizes rendered with no `max-width` at all (issue #405).\n *\n * @param size - The requested modal size.\n * @returns The CSS-module class name for that size.\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":"A,8QAwDA,SAAgBc,EAAM,CAClB,OACA,UACA,QACA,WACA,SACA,OAAO,KACP,kBAAkB,GAClB,aAAa,GACb,YACA,kBAAkB,GAClB,aAAa,GACb,qBAAqB,GACrB,aAAcC,GACH,CACX,IAAMC,GAAA,EAAUhB,EAAAA,MAAAA,CAAM,EAChBiB,GAAA,EAAYhB,EAAAA,OAAAA,CAAuB,IAAI,EAC7CO,EAAA,aAAaS,EAAWC,CAAI,EAC5BX,EAAA,eAAeW,EAAMC,EAAaC,EAAU,IAAI,GAChD,EAAAT,EAAA,UAAA,KAAgB,CACZ,GAAI,CAACO,EAAM,OACX,IAAMG,EAAmB,SAAS,KAAK,MAAM,SAE7C,MADA,UAAS,KAAK,MAAM,SAAW,aAClB,CACT,SAAS,KAAK,MAAM,SAAWA,CACnC,CACJ,EAAG,CAACH,CAAI,CAAC,EAET,IAAMI,EAAapB,EAAAA,cAAc,EAIjC,MAFI,CAACgB,GAAQ,CAACI,EAAmB,MAEjC,EAAOnB,EAAAA,aAAAA,EACH,EAAAS,EAAA,IAAA,CAAC,MAAD,CACI,UAAWR,EAAAA,QAAO,QAClB,KAAK,eACL,YAAe,CACPmB,GAAiBH,EAAQ,CACjC,EAEA,UAAA,EAAAR,EAAA,KAAA,CAAC,MAAD,CACI,IAAKK,EACL,KAAK,SACL,aAAW,OACX,SAAU,GACV,kBAAiBO,EAAQR,EAAU,IAAA,GACnC,aAAYQ,EAAQ,IAAA,GAAYT,EAChC,UAAWV,EAAAA,GACPD,EAAAA,QAAO,OACPqB,EAAcC,CAAI,EAClBC,GAAcvB,EAAAA,QAAO,WACrBwB,GAAsBxB,EAAAA,QAAO,mBAC7ByB,CACJ,EACA,QAAU,GAAUC,EAAM,gBAAgB,EAd9C,SAAA,EAgBMN,GAAS,CAACO,KACR,EAAAnB,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAWR,EAAAA,QAAO,OAA1B,SAAA,CACKoB,IACG,EAAAZ,EAAA,IAAA,CAAC,KAAD,CAAI,GAAII,EAAS,UAAWZ,EAAAA,QAAO,MAC9B,SAAAoB,CACD,CAAA,EAEP,CAACO,IACE,EAAAnB,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWR,EAAAA,QAAO,MAClB,aAAW,SACX,QAASgB,EAET,UAAA,EAAAR,EAAA,IAAA,CAACoB,EAAD,CAAY,CAAA,CACR,CAAA,CAER,C,IAEZ,EAAApB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWR,EAAAA,QAAO,KAAO,UAAc,CAAA,EAC3C6B,IAAU,EAAArB,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAWR,EAAAA,QAAO,OAAS,SAAA6B,CAAe,CAAA,CAC5D,C,EACJ,CAAA,EACLX,CACJ,CACJ,CAcA,SAASG,EAAc,EAAqC,CAGxD,OAFIC,IAAS,MAActB,EAAAA,QAAO,QAC9BsB,IAAS,MAActB,EAAAA,QAAO,QAC3BA,EAAAA,QAAOsB,EAClB,CAEA,SAASM,GAAY,CACjB,OACI,EAAApB,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb,C"}

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, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\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 * Keyboard focus is trapped in the dialog while it is open (`useFocusTrap`): it\n * enters on the first tab stop — or the dialog itself when there is none —,\n * `Tab`/`Shift+Tab` cycle inside it, including the panels of a `Popover` or\n * `HoverCard` opened from it, and closing returns focus to the element that\n * opened it. `aria-modal=\"true\"` tells a screen reader the page behind is inert;\n * the trap is what makes that true for the keyboard.\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    const dialogRef = useRef<HTMLDivElement>(null);\n    useFocusTrap(dialogRef, open);\n    useEscapeLayer(open, closeOnEsc ? onClose : null);\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previousOverflow;\n        };\n    }, [open]);\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                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                tabIndex={-1}\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\n/**\n * Resolve the width class for a {@link ModalSize}.\n *\n * `2xl`/`3xl` are not valid CSS identifiers, so their rules are `.size2Xl` and\n * `.size3Xl` — spelled exactly as the build exports them. The build camelCases\n * CSS-module keys (`localsConvention: \"camelCaseOnly\"`), which turns `.size2xl`\n * into the key `size2Xl`; a lookup of `styles.size2xl` was `undefined` in `dist/`\n * and both sizes rendered with no `max-width` at all (issue #405).\n *\n * @param size - The requested modal size.\n * @returns The CSS-module class name for that size.\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":";;;;;;;;;AAwDA,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,GAChB,IAAY,EAAuB,IAAI;CAG7C,AAFA,EAAa,GAAW,CAAI,GAC5B,EAAe,GAAM,IAAa,IAAU,IAAI,GAChD,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,IAAmB,SAAS,KAAK,MAAM;EAE7C,OADA,SAAS,KAAK,MAAM,WAAW,gBAClB;GACT,SAAS,KAAK,MAAM,WAAW;EACnC;CACJ,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAa,EAAc;CAIjC,OAFI,CAAC,KAAQ,CAAC,IAAmB,OAE1B,EACH,kBAAC,OAAD;EACI,WAAW,EAAO;EAClB,MAAK;EACL,eAAe;GACX,AAAI,KAAiB,EAAQ;EACjC;EAEA,UAAA,kBAAC,OAAD;GACI,KAAK;GACL,MAAK;GACL,cAAW;GACX,UAAU;GACV,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;GAd9C,UAAA;KAgBM,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;AAcA,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":["styles","Modal_module_default","Modal","ariaLabel","titleId","useId","dialogRef","useRef","useFocusTrap","open","useEscapeLayer","closeOnEsc","onClose","useEffect","previousOverflow","portalHost","usePortalHost","createPortal","closeOnBackdrop","title","cn","sizeClassName","size","fullscreen","fullscreenOnMobile","className","event","hideCloseButton","CloseIcon","footer"],"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, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\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 * Keyboard focus is trapped in the dialog while it is open (`useFocusTrap`): it\n * enters on the first tab stop — or the dialog itself when there is none —,\n * `Tab`/`Shift+Tab` cycle inside it, including the panels of a `Popover` or\n * `HoverCard` opened from it, and closing returns focus to the element that\n * opened it. `aria-modal=\"true\"` tells a screen reader the page behind is inert;\n * the trap is what makes that true for the keyboard.\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    const dialogRef = useRef<HTMLDivElement>(null);\n    useFocusTrap(dialogRef, open);\n    useEscapeLayer(open, closeOnEsc ? onClose : null);\n    useEffect(() => {\n        if (!open) return;\n        const previousOverflow = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = previousOverflow;\n        };\n    }, [open]);\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                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                tabIndex={-1}\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\n/**\n * Resolve the width class for a {@link ModalSize}.\n *\n * `2xl`/`3xl` are not valid CSS identifiers, so their rules are `.size2Xl` and\n * `.size3Xl` — spelled exactly as the build exports them. The build camelCases\n * CSS-module keys (`localsConvention: \"camelCaseOnly\"`), which turns `.size2xl`\n * into the key `size2Xl`; a lookup of `styles.size2xl` was `undefined` in `dist/`\n * and both sizes rendered with no `max-width` at all (issue #405).\n *\n * @param size - The requested modal size.\n * @returns The CSS-module class name for that size.\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":";;;;;;;;;AAwDA,SAAgBE,EAAM,EAClB,SACA,YACA,UACA,aACA,WACA,UAAO,MACP,qBAAkB,IAClB,gBAAa,IACb,cACA,qBAAkB,IAClB,gBAAa,IACb,wBAAqB,IACrB,cAAcC,KACH;CACX,IAAMC,IAAUC,EAAM,GAChBC,IAAYC,EAAuB,IAAI;CAG7C,AAFAC,EAAaF,GAAWG,CAAI,GAC5BC,EAAeD,GAAME,IAAaC,IAAU,IAAI,GAChDC,QAAgB;EACZ,IAAI,CAACJ,GAAM;EACX,IAAMK,IAAmB,SAAS,KAAK,MAAM;EAE7C,OADA,SAAS,KAAK,MAAM,WAAW,gBAClB;GACT,SAAS,KAAK,MAAM,WAAWA;EACnC;CACJ,GAAG,CAACL,CAAI,CAAC;CAET,IAAMM,IAAaC,EAAc;CAIjC,OAFI,CAACP,KAAQ,CAACM,IAAmB,OAE1BE,EACH,kBAAC,OAAD;EACI,WAAWjB,EAAO;EAClB,MAAK;EACL,eAAe;GACX,AAAIkB,KAAiBN,EAAQ;EACjC;EAEA,UAAA,kBAAC,OAAD;GACI,KAAKN;GACL,MAAK;GACL,cAAW;GACX,UAAU;GACV,mBAAiBa,IAAQf,IAAU,KAAA;GACnC,cAAYe,IAAQ,KAAA,IAAYhB;GAChC,WAAWiB,EACPpB,EAAO,QACPqB,EAAcC,CAAI,GAClBC,KAAcvB,EAAO,YACrBwB,KAAsBxB,EAAO,oBAC7ByB,CACJ;GACA,UAAU,MAAUC,EAAM,gBAAgB;GAd9C,UAAA;KAgBMP,KAAS,CAACQ,MACR,kBAAC,UAAD;KAAQ,WAAW3B,EAAO;KAA1B,UAAA,CACKmB,KACG,kBAAC,MAAD;MAAI,IAAIf;MAAS,WAAWJ,EAAO;MAC9B,UAAAmB;KACD,CAAA,GAEP,CAACQ,KACE,kBAAC,UAAD;MACI,MAAK;MACL,WAAW3B,EAAO;MAClB,cAAW;MACX,SAASY;MAET,UAAA,kBAACgB,GAAD,CAAY,CAAA;KACR,CAAA,CAER;;IAEZ,kBAAC,OAAD;KAAK,WAAW5B,EAAO;KAAO;IAAc,CAAA;IAC3C6B,KAAU,kBAAC,UAAD;KAAQ,WAAW7B,EAAO;KAAS,UAAA6B;IAAe,CAAA;GAC5D;;CACJ,CAAA,GACLd,CACJ;AACJ;AAcA,SAASM,EAAc,GAAqC;CAGxD,OAFIC,MAAS,QAActB,EAAO,UAC9BsB,MAAS,QAActB,EAAO,UAC3BA,EAAOsB;AAClB;AAEA,SAASM,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/Modal/Modal.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.module.cjs","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: max(var(--tempest-space-4), var(--tempest-safe-area-top))\n        max(var(--tempest-space-4), var(--tempest-safe-area-right))\n        max(var(--tempest-space-4), var(--tempest-safe-area-bottom))\n        max(var(--tempest-space-4), var(--tempest-safe-area-left));\n    z-index: var(--tempest-z-modal);\n    animation: tempest-fade-in var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.dialog {\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-xl);\n    box-shadow: var(--tempest-shadow-xl);\n    width: 100%;\n    max-height: 90vh;\n    max-height: 90dvh;\n    display: flex;\n    flex-direction: column;\n    animation: tempest-modal-in var(--tempest-duration-base) var(--tempest-ease-emphasized);\n}\n\n.sm {\n    max-width: 400px;\n}\n.md {\n    max-width: 560px;\n}\n.lg {\n    max-width: 800px;\n}\n.xl {\n    max-width: 1024px;\n}\n.size2Xl {\n    max-width: 1280px;\n}\n.size3Xl {\n    max-width: 1440px;\n}\n\n/* Fullscreen — fill entire viewport regardless of size. */\n.fullscreen {\n    max-width: 100%;\n    max-height: 100vh;\n    max-height: 100dvh;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n}\n\n/* Auto-fullscreen below mobile breakpoint. */\n@media (max-width: 639.98px) {\n    .fullscreenOnMobile {\n        max-width: 100%;\n        max-height: 100vh;\n        max-height: 100dvh;\n        width: 100%;\n        height: 100%;\n        border-radius: 0;\n    }\n}\n\n/* Mobile padding adjustment for non-fullscreen modals. */\n@media (max-width: 639.98px) {\n    .dialog:not(.fullscreen):not(.fullscreenOnMobile) {\n        border-radius: var(--tempest-radius-lg);\n    }\n    .body {\n        padding: var(--tempest-space-4);\n    }\n    .header,\n    .footer {\n        padding: var(--tempest-space-3) var(--tempest-space-4);\n    }\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n    color: var(--tempest-text);\n}\n\n.close {\n    background: none;\n    border: none;\n    color: var(--tempest-text-muted);\n    padding: var(--tempest-space-1);\n    border-radius: var(--tempest-radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .close:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.body {\n    padding: var(--tempest-space-5);\n    overflow-y: auto;\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    border-radius: 0 0 var(--tempest-radius-xl) var(--tempest-radius-xl);\n}\n\n@keyframes tempest-fade-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-modal-in {\n    from {\n        opacity: 0;\n        transform: translateY(12px) scale(0.96);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay,\n    .dialog {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Modal.module.cjs","names":["overlay","tempestFadeIn","dialog","tempestModalIn","sm","md","lg","xl","size2Xl","size3Xl","fullscreen","fullscreenOnMobile","body","header","footer","title","close","Modal_module_default"],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: max(var(--tempest-space-4), var(--tempest-safe-area-top))\n        max(var(--tempest-space-4), var(--tempest-safe-area-right))\n        max(var(--tempest-space-4), var(--tempest-safe-area-bottom))\n        max(var(--tempest-space-4), var(--tempest-safe-area-left));\n    z-index: var(--tempest-z-modal);\n    animation: tempest-fade-in var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.dialog {\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-xl);\n    box-shadow: var(--tempest-shadow-xl);\n    width: 100%;\n    max-height: 90vh;\n    max-height: 90dvh;\n    display: flex;\n    flex-direction: column;\n    animation: tempest-modal-in var(--tempest-duration-base) var(--tempest-ease-emphasized);\n}\n\n.sm {\n    max-width: 400px;\n}\n.md {\n    max-width: 560px;\n}\n.lg {\n    max-width: 800px;\n}\n.xl {\n    max-width: 1024px;\n}\n.size2Xl {\n    max-width: 1280px;\n}\n.size3Xl {\n    max-width: 1440px;\n}\n\n/* Fullscreen — fill entire viewport regardless of size. */\n.fullscreen {\n    max-width: 100%;\n    max-height: 100vh;\n    max-height: 100dvh;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n}\n\n/* Auto-fullscreen below mobile breakpoint. */\n@media (max-width: 639.98px) {\n    .fullscreenOnMobile {\n        max-width: 100%;\n        max-height: 100vh;\n        max-height: 100dvh;\n        width: 100%;\n        height: 100%;\n        border-radius: 0;\n    }\n}\n\n/* Mobile padding adjustment for non-fullscreen modals. */\n@media (max-width: 639.98px) {\n    .dialog:not(.fullscreen):not(.fullscreenOnMobile) {\n        border-radius: var(--tempest-radius-lg);\n    }\n    .body {\n        padding: var(--tempest-space-4);\n    }\n    .header,\n    .footer {\n        padding: var(--tempest-space-3) var(--tempest-space-4);\n    }\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n    color: var(--tempest-text);\n}\n\n.close {\n    background: none;\n    border: none;\n    color: var(--tempest-text-muted);\n    padding: var(--tempest-space-1);\n    border-radius: var(--tempest-radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .close:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.body {\n    padding: var(--tempest-space-5);\n    overflow-y: auto;\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    border-radius: 0 0 var(--tempest-radius-xl) var(--tempest-radius-xl);\n}\n\n@keyframes tempest-fade-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-modal-in {\n    from {\n        opacity: 0;\n        transform: translateY(12px) scale(0.96);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay,\n    .dialog {\n        animation: none;\n    }\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.module.js","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: max(var(--tempest-space-4), var(--tempest-safe-area-top))\n        max(var(--tempest-space-4), var(--tempest-safe-area-right))\n        max(var(--tempest-space-4), var(--tempest-safe-area-bottom))\n        max(var(--tempest-space-4), var(--tempest-safe-area-left));\n    z-index: var(--tempest-z-modal);\n    animation: tempest-fade-in var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.dialog {\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-xl);\n    box-shadow: var(--tempest-shadow-xl);\n    width: 100%;\n    max-height: 90vh;\n    max-height: 90dvh;\n    display: flex;\n    flex-direction: column;\n    animation: tempest-modal-in var(--tempest-duration-base) var(--tempest-ease-emphasized);\n}\n\n.sm {\n    max-width: 400px;\n}\n.md {\n    max-width: 560px;\n}\n.lg {\n    max-width: 800px;\n}\n.xl {\n    max-width: 1024px;\n}\n.size2Xl {\n    max-width: 1280px;\n}\n.size3Xl {\n    max-width: 1440px;\n}\n\n/* Fullscreen — fill entire viewport regardless of size. */\n.fullscreen {\n    max-width: 100%;\n    max-height: 100vh;\n    max-height: 100dvh;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n}\n\n/* Auto-fullscreen below mobile breakpoint. */\n@media (max-width: 639.98px) {\n    .fullscreenOnMobile {\n        max-width: 100%;\n        max-height: 100vh;\n        max-height: 100dvh;\n        width: 100%;\n        height: 100%;\n        border-radius: 0;\n    }\n}\n\n/* Mobile padding adjustment for non-fullscreen modals. */\n@media (max-width: 639.98px) {\n    .dialog:not(.fullscreen):not(.fullscreenOnMobile) {\n        border-radius: var(--tempest-radius-lg);\n    }\n    .body {\n        padding: var(--tempest-space-4);\n    }\n    .header,\n    .footer {\n        padding: var(--tempest-space-3) var(--tempest-space-4);\n    }\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n    color: var(--tempest-text);\n}\n\n.close {\n    background: none;\n    border: none;\n    color: var(--tempest-text-muted);\n    padding: var(--tempest-space-1);\n    border-radius: var(--tempest-radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .close:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.body {\n    padding: var(--tempest-space-5);\n    overflow-y: auto;\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    border-radius: 0 0 var(--tempest-radius-xl) var(--tempest-radius-xl);\n}\n\n@keyframes tempest-fade-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-modal-in {\n    from {\n        opacity: 0;\n        transform: translateY(12px) scale(0.96);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay,\n    .dialog {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Modal.module.js","names":["overlay","tempestFadeIn","dialog","tempestModalIn","sm","md","lg","xl","size2Xl","size3Xl","fullscreen","fullscreenOnMobile","body","header","footer","title","close","Modal_module_default"],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: max(var(--tempest-space-4), var(--tempest-safe-area-top))\n        max(var(--tempest-space-4), var(--tempest-safe-area-right))\n        max(var(--tempest-space-4), var(--tempest-safe-area-bottom))\n        max(var(--tempest-space-4), var(--tempest-safe-area-left));\n    z-index: var(--tempest-z-modal);\n    animation: tempest-fade-in var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.dialog {\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-xl);\n    box-shadow: var(--tempest-shadow-xl);\n    width: 100%;\n    max-height: 90vh;\n    max-height: 90dvh;\n    display: flex;\n    flex-direction: column;\n    animation: tempest-modal-in var(--tempest-duration-base) var(--tempest-ease-emphasized);\n}\n\n.sm {\n    max-width: 400px;\n}\n.md {\n    max-width: 560px;\n}\n.lg {\n    max-width: 800px;\n}\n.xl {\n    max-width: 1024px;\n}\n.size2Xl {\n    max-width: 1280px;\n}\n.size3Xl {\n    max-width: 1440px;\n}\n\n/* Fullscreen — fill entire viewport regardless of size. */\n.fullscreen {\n    max-width: 100%;\n    max-height: 100vh;\n    max-height: 100dvh;\n    width: 100%;\n    height: 100%;\n    border-radius: 0;\n}\n\n/* Auto-fullscreen below mobile breakpoint. */\n@media (max-width: 639.98px) {\n    .fullscreenOnMobile {\n        max-width: 100%;\n        max-height: 100vh;\n        max-height: 100dvh;\n        width: 100%;\n        height: 100%;\n        border-radius: 0;\n    }\n}\n\n/* Mobile padding adjustment for non-fullscreen modals. */\n@media (max-width: 639.98px) {\n    .dialog:not(.fullscreen):not(.fullscreenOnMobile) {\n        border-radius: var(--tempest-radius-lg);\n    }\n    .body {\n        padding: var(--tempest-space-4);\n    }\n    .header,\n    .footer {\n        padding: var(--tempest-space-3) var(--tempest-space-4);\n    }\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-lg);\n    font-weight: var(--tempest-weight-semibold);\n    line-height: var(--tempest-leading-snug);\n    color: var(--tempest-text);\n}\n\n.close {\n    background: none;\n    border: none;\n    color: var(--tempest-text-muted);\n    padding: var(--tempest-space-1);\n    border-radius: var(--tempest-radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .close:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.body {\n    padding: var(--tempest-space-5);\n    overflow-y: auto;\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    border-radius: 0 0 var(--tempest-radius-xl) var(--tempest-radius-xl);\n}\n\n@keyframes tempest-fade-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-modal-in {\n    from {\n        opacity: 0;\n        transform: translateY(12px) scale(0.96);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay,\n    .dialog {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/ModalsManager/ModalsManager.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalsManager.cjs","names":[],"sources":["../../../src/components/ModalsManager/ModalsManager.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines — the imperative API (open, close, confirm, prompt) and\n * the stack that renders it live in one file so the returned promise and the mounted\n * element cannot drift apart.\n */\nimport { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ConfirmDialog } from \"@/components/ConfirmDialog\";\nimport { Modal } from \"@/components/Modal\";\nimport type { ModalSize } from \"@/components/Modal\";\nimport styles from \"./ModalsManager.module.css\";\n\n/** Options accepted by {@link ModalsApi.open}. */\nexport interface OpenModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Modal body content. */\n    children: ReactNode;\n    /** Dialog size. Default `md`. */\n    size?: ModalSize;\n    /** Allow closing by clicking the backdrop. Default `true`. */\n    closeOnBackdrop?: boolean;\n    /** Allow closing with the Esc key. Default `true`. */\n    closeOnEsc?: boolean;\n    /** Hide the header close button. */\n    hideCloseButton?: boolean;\n    /** Called after the modal is removed from the stack. */\n    onClose?: () => void;\n}\n\n/** Options accepted by {@link ModalsApi.confirm}. */\nexport interface ConfirmModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Prompt message rendered in the dialog body. */\n    message: ReactNode;\n    /** Confirm button label. Default `Confirmar`. */\n    confirmLabel?: string;\n    /** Cancel button label. Default `Cancelar`. */\n    cancelLabel?: string;\n    /** Render the confirm button in the danger variant. */\n    danger?: boolean;\n    /** Called when the user confirms. */\n    onConfirm?: () => void | Promise<void>;\n    /** Called when the user cancels or dismisses. */\n    onCancel?: () => void;\n}\n\n/** Imperative API returned by {@link useModals}. */\nexport interface ModalsApi {\n    /** Push a content modal. Returns its stack id. */\n    open: (options: OpenModalOptions) => string;\n    /** Push a confirmation dialog. Returns its stack id. */\n    confirm: (options: ConfirmModalOptions) => string;\n    /** Remove the modal with the given id. */\n    close: (id: string) => void;\n    /** Remove every modal from the stack. */\n    closeAll: () => void;\n}\n\ninterface ContentEntry {\n    kind: \"content\";\n    id: string;\n    options: OpenModalOptions;\n}\n\ninterface ConfirmEntry {\n    kind: \"confirm\";\n    id: string;\n    options: ConfirmModalOptions;\n}\n\ntype StackEntry = ContentEntry | ConfirmEntry;\n\nconst ModalsContext = createContext<ModalsApi | null>(null);\n\n/** Props for {@link ModalsProvider}. */\nexport interface ModalsProviderProps {\n    children: ReactNode;\n}\n\n/**\n * Provides imperative modal control via {@link useModals} and renders the open\n * modal stack. Mount once near the app root.\n *\n * @example\n * <ModalsProvider>\n *     <App />\n * </ModalsProvider>\n */\nexport function ModalsProvider({ children }: ModalsProviderProps) {\n    const [stack, setStack] = useState<StackEntry[]>([]);\n    const counter = useRef(0);\n\n    const nextId = useCallback((): string => {\n        counter.current += 1;\n        return `modal-${counter.current}`;\n    }, []);\n\n    const close = useCallback((id: string): void => {\n        setStack((current) => current.filter((entry) => entry.id !== id));\n    }, []);\n\n    const closeAll = useCallback((): void => {\n        setStack([]);\n    }, []);\n\n    const open = useCallback(\n        (options: OpenModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"content\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const confirm = useCallback(\n        (options: ConfirmModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"confirm\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const api = useMemo<ModalsApi>(\n        () => ({ open, confirm, close, closeAll }),\n        [open, confirm, close, closeAll],\n    );\n\n    return (\n        <ModalsContext.Provider value={api}>\n            {children}\n            <div className={styles.stack}>\n                {stack.map((entry) =>\n                    entry.kind === \"content\" ? (\n                        <ContentModal key={entry.id} entry={entry} close={close} />\n                    ) : (\n                        <ConfirmModal key={entry.id} entry={entry} close={close} />\n                    ),\n                )}\n            </div>\n        </ModalsContext.Provider>\n    );\n}\n\ninterface ContentModalProps {\n    entry: ContentEntry;\n    close: (id: string) => void;\n}\n\nfunction ContentModal({ entry, close }: ContentModalProps) {\n    const { options, id } = entry;\n    const handleClose = (): void => {\n        options.onClose?.();\n        close(id);\n    };\n    return (\n        <Modal\n            open\n            onClose={handleClose}\n            title={options.title}\n            size={options.size}\n            closeOnBackdrop={options.closeOnBackdrop}\n            closeOnEsc={options.closeOnEsc}\n            hideCloseButton={options.hideCloseButton}\n        >\n            {options.children}\n        </Modal>\n    );\n}\n\ninterface ConfirmModalProps {\n    entry: ConfirmEntry;\n    close: (id: string) => void;\n}\n\nfunction ConfirmModal({ entry, close }: ConfirmModalProps) {\n    const { options, id } = entry;\n    const [loading, setLoading] = useState(false);\n\n    const handleConfirm = async (): Promise<void> => {\n        try {\n            setLoading(true);\n            await options.onConfirm?.();\n        } finally {\n            setLoading(false);\n            close(id);\n        }\n    };\n\n    const handleCancel = (): void => {\n        options.onCancel?.();\n        close(id);\n    };\n\n    return (\n        <ConfirmDialog\n            open\n            title={options.title ?? \"\"}\n            description={options.message}\n            confirmLabel={options.confirmLabel}\n            cancelLabel={options.cancelLabel}\n            variant={options.danger ? \"danger\" : \"primary\"}\n            loading={loading}\n            onConfirm={handleConfirm}\n            onCancel={handleCancel}\n        />\n    );\n}\n\n/**\n * Access the imperative modals API. Must be used within a {@link ModalsProvider}.\n *\n * @example\n * const modals = useModals();\n * modals.confirm({ message: \"Excluir item?\", danger: true, onConfirm: del });\n *\n * @throws Error when called outside a {@link ModalsProvider}.\n */\nexport function useModals(): ModalsApi {\n    const api = useContext(ModalsContext);\n    if (api === null) {\n        throw new Error(\"useModals must be used within a <ModalsProvider>\");\n    }\n    return api;\n}\n"],"mappings":"oLA0EA,IAAM,GAAA,EAAgB,EAAA,cAAA,CAAgC,IAAI,EAgB1D,SAAgB,EAAe,CAAE,YAAiC,CAC9D,GAAM,CAAC,EAAO,IAAA,EAAY,EAAA,SAAA,CAAuB,CAAC,CAAC,EAC7C,GAAA,EAAU,EAAA,OAAA,CAAO,CAAC,EAElB,GAAA,EAAS,EAAA,YAAA,MACX,EAAQ,SAAW,EACZ,SAAS,EAAQ,WACzB,CAAC,CAAC,EAEC,GAAA,EAAQ,EAAA,YAAA,CAAa,GAAqB,CAC5C,EAAU,GAAY,EAAQ,OAAQ,GAAU,EAAM,KAAO,CAAE,CAAC,CACpE,EAAG,CAAC,CAAC,EAEC,GAAA,EAAW,EAAA,YAAA,KAAwB,CACrC,EAAS,CAAC,CAAC,CACf,EAAG,CAAC,CAAC,EAEC,GAAA,EAAO,EAAA,YAAA,CACR,GAAsC,CACnC,IAAM,EAAK,EAAO,EAElB,OADA,EAAU,GAAY,CAAC,GAAG,EAAS,CAAE,KAAM,UAAW,KAAI,SAAQ,CAAC,CAAC,EAC7D,CACX,EACA,CAAC,CAAM,CACX,EAEM,GAAA,EAAU,EAAA,YAAA,CACX,GAAyC,CACtC,IAAM,EAAK,EAAO,EAElB,OADA,EAAU,GAAY,CAAC,GAAG,EAAS,CAAE,KAAM,UAAW,KAAI,SAAQ,CAAC,CAAC,EAC7D,CACX,EACA,CAAC,CAAM,CACX,EAEM,GAAA,EAAM,EAAA,QAAA,MACD,CAAE,OAAM,UAAS,QAAO,UAAS,GACxC,CAAC,EAAM,EAAS,EAAO,CAAQ,CACnC,EAEA,OACI,EAAA,EAAA,KAAA,CAAC,EAAc,SAAf,CAAwB,MAAO,EAA/B,SAAA,CACK,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAClB,SAAA,EAAM,IAAK,GACR,EAAM,OAAS,WACX,EAAA,EAAA,IAAA,CAAC,EAAD,CAAoC,QAAc,OAAQ,EAAvC,EAAM,EAAiC,GAE1D,EAAA,EAAA,IAAA,CAAC,EAAD,CAAoC,QAAc,OAAQ,EAAvC,EAAM,EAAiC,CAElE,CACC,CAAA,CACe,GAEhC,CAOA,SAAS,EAAa,CAAE,QAAO,SAA4B,CACvD,GAAM,CAAE,UAAS,MAAO,EAKxB,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACI,KAAA,GACA,YAPwB,CAC5B,EAAQ,UAAU,EAClB,EAAM,CAAE,CACZ,EAKQ,MAAO,EAAQ,MACf,KAAM,EAAQ,KACd,gBAAiB,EAAQ,gBACzB,WAAY,EAAQ,WACpB,gBAAiB,EAAQ,gBAExB,SAAA,EAAQ,QACN,CAAA,CAEf,CAOA,SAAS,EAAa,CAAE,QAAO,SAA4B,CACvD,GAAM,CAAE,UAAS,MAAO,EAClB,CAAC,EAAS,IAAA,EAAc,EAAA,SAAA,CAAS,EAAK,EAiB5C,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CACI,KAAA,GACA,MAAO,EAAQ,OAAS,GACxB,YAAa,EAAQ,QACrB,aAAc,EAAQ,aACtB,YAAa,EAAQ,YACrB,QAAS,EAAQ,OAAS,SAAW,UAC5B,UACT,UAAW,SAxB8B,CAC7C,GAAI,CACA,EAAW,EAAI,EACf,MAAM,EAAQ,YAAY,CAC9B,QAAU,CACN,EAAW,EAAK,EAChB,EAAM,CAAE,CACZ,CACJ,EAiBQ,aAfyB,CAC7B,EAAQ,WAAW,EACnB,EAAM,CAAE,CACZ,CAaK,CAAA,CAET,CAWA,SAAgB,GAAuB,CACnC,IAAM,GAAA,EAAM,EAAA,WAAA,CAAW,CAAa,EACpC,GAAI,IAAQ,KACR,MAAU,MAAM,kDAAkD,EAEtE,OAAO,CACX"}
+{"version":3,"file":"ModalsManager.cjs","names":["createContext","useState","useRef","useCallback","useMemo","styles","Modal","ConfirmDialog","useContext","require_Modal","require_ConfirmDialog","require_ModalsManager_module","react","react_jsx_runtime","ModalsContext","ModalsProvider","stack","setStack","counter","nextId","close","current","entry","id","closeAll","open","confirm","api","children","ContentModal","ConfirmModal","options","loading","setLoading","useModals"],"sources":["../../../src/components/ModalsManager/ModalsManager.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines — the imperative API (open, close, confirm, prompt) and\n * the stack that renders it live in one file so the returned promise and the mounted\n * element cannot drift apart.\n */\nimport { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ConfirmDialog } from \"@/components/ConfirmDialog\";\nimport { Modal } from \"@/components/Modal\";\nimport type { ModalSize } from \"@/components/Modal\";\nimport styles from \"./ModalsManager.module.css\";\n\n/** Options accepted by {@link ModalsApi.open}. */\nexport interface OpenModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Modal body content. */\n    children: ReactNode;\n    /** Dialog size. Default `md`. */\n    size?: ModalSize;\n    /** Allow closing by clicking the backdrop. Default `true`. */\n    closeOnBackdrop?: boolean;\n    /** Allow closing with the Esc key. Default `true`. */\n    closeOnEsc?: boolean;\n    /** Hide the header close button. */\n    hideCloseButton?: boolean;\n    /** Called after the modal is removed from the stack. */\n    onClose?: () => void;\n}\n\n/** Options accepted by {@link ModalsApi.confirm}. */\nexport interface ConfirmModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Prompt message rendered in the dialog body. */\n    message: ReactNode;\n    /** Confirm button label. Default `Confirmar`. */\n    confirmLabel?: string;\n    /** Cancel button label. Default `Cancelar`. */\n    cancelLabel?: string;\n    /** Render the confirm button in the danger variant. */\n    danger?: boolean;\n    /** Called when the user confirms. */\n    onConfirm?: () => void | Promise<void>;\n    /** Called when the user cancels or dismisses. */\n    onCancel?: () => void;\n}\n\n/** Imperative API returned by {@link useModals}. */\nexport interface ModalsApi {\n    /** Push a content modal. Returns its stack id. */\n    open: (options: OpenModalOptions) => string;\n    /** Push a confirmation dialog. Returns its stack id. */\n    confirm: (options: ConfirmModalOptions) => string;\n    /** Remove the modal with the given id. */\n    close: (id: string) => void;\n    /** Remove every modal from the stack. */\n    closeAll: () => void;\n}\n\ninterface ContentEntry {\n    kind: \"content\";\n    id: string;\n    options: OpenModalOptions;\n}\n\ninterface ConfirmEntry {\n    kind: \"confirm\";\n    id: string;\n    options: ConfirmModalOptions;\n}\n\ntype StackEntry = ContentEntry | ConfirmEntry;\n\nconst ModalsContext = createContext<ModalsApi | null>(null);\n\n/** Props for {@link ModalsProvider}. */\nexport interface ModalsProviderProps {\n    children: ReactNode;\n}\n\n/**\n * Provides imperative modal control via {@link useModals} and renders the open\n * modal stack. Mount once near the app root.\n *\n * @example\n * <ModalsProvider>\n *     <App />\n * </ModalsProvider>\n */\nexport function ModalsProvider({ children }: ModalsProviderProps) {\n    const [stack, setStack] = useState<StackEntry[]>([]);\n    const counter = useRef(0);\n\n    const nextId = useCallback((): string => {\n        counter.current += 1;\n        return `modal-${counter.current}`;\n    }, []);\n\n    const close = useCallback((id: string): void => {\n        setStack((current) => current.filter((entry) => entry.id !== id));\n    }, []);\n\n    const closeAll = useCallback((): void => {\n        setStack([]);\n    }, []);\n\n    const open = useCallback(\n        (options: OpenModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"content\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const confirm = useCallback(\n        (options: ConfirmModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"confirm\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const api = useMemo<ModalsApi>(\n        () => ({ open, confirm, close, closeAll }),\n        [open, confirm, close, closeAll],\n    );\n\n    return (\n        <ModalsContext.Provider value={api}>\n            {children}\n            <div className={styles.stack}>\n                {stack.map((entry) =>\n                    entry.kind === \"content\" ? (\n                        <ContentModal key={entry.id} entry={entry} close={close} />\n                    ) : (\n                        <ConfirmModal key={entry.id} entry={entry} close={close} />\n                    ),\n                )}\n            </div>\n        </ModalsContext.Provider>\n    );\n}\n\ninterface ContentModalProps {\n    entry: ContentEntry;\n    close: (id: string) => void;\n}\n\nfunction ContentModal({ entry, close }: ContentModalProps) {\n    const { options, id } = entry;\n    const handleClose = (): void => {\n        options.onClose?.();\n        close(id);\n    };\n    return (\n        <Modal\n            open\n            onClose={handleClose}\n            title={options.title}\n            size={options.size}\n            closeOnBackdrop={options.closeOnBackdrop}\n            closeOnEsc={options.closeOnEsc}\n            hideCloseButton={options.hideCloseButton}\n        >\n            {options.children}\n        </Modal>\n    );\n}\n\ninterface ConfirmModalProps {\n    entry: ConfirmEntry;\n    close: (id: string) => void;\n}\n\nfunction ConfirmModal({ entry, close }: ConfirmModalProps) {\n    const { options, id } = entry;\n    const [loading, setLoading] = useState(false);\n\n    const handleConfirm = async (): Promise<void> => {\n        try {\n            setLoading(true);\n            await options.onConfirm?.();\n        } finally {\n            setLoading(false);\n            close(id);\n        }\n    };\n\n    const handleCancel = (): void => {\n        options.onCancel?.();\n        close(id);\n    };\n\n    return (\n        <ConfirmDialog\n            open\n            title={options.title ?? \"\"}\n            description={options.message}\n            confirmLabel={options.confirmLabel}\n            cancelLabel={options.cancelLabel}\n            variant={options.danger ? \"danger\" : \"primary\"}\n            loading={loading}\n            onConfirm={handleConfirm}\n            onCancel={handleCancel}\n        />\n    );\n}\n\n/**\n * Access the imperative modals API. Must be used within a {@link ModalsProvider}.\n *\n * @example\n * const modals = useModals();\n * modals.confirm({ message: \"Excluir item?\", danger: true, onConfirm: del });\n *\n * @throws Error when called outside a {@link ModalsProvider}.\n */\nexport function useModals(): ModalsApi {\n    const api = useContext(ModalsContext);\n    if (api === null) {\n        throw new Error(\"useModals must be used within a <ModalsProvider>\");\n    }\n    return api;\n}\n"],"mappings":"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"}

package/dist/components/ModalsManager/ModalsManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalsManager.js","names":[],"sources":["../../../src/components/ModalsManager/ModalsManager.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines — the imperative API (open, close, confirm, prompt) and\n * the stack that renders it live in one file so the returned promise and the mounted\n * element cannot drift apart.\n */\nimport { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ConfirmDialog } from \"@/components/ConfirmDialog\";\nimport { Modal } from \"@/components/Modal\";\nimport type { ModalSize } from \"@/components/Modal\";\nimport styles from \"./ModalsManager.module.css\";\n\n/** Options accepted by {@link ModalsApi.open}. */\nexport interface OpenModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Modal body content. */\n    children: ReactNode;\n    /** Dialog size. Default `md`. */\n    size?: ModalSize;\n    /** Allow closing by clicking the backdrop. Default `true`. */\n    closeOnBackdrop?: boolean;\n    /** Allow closing with the Esc key. Default `true`. */\n    closeOnEsc?: boolean;\n    /** Hide the header close button. */\n    hideCloseButton?: boolean;\n    /** Called after the modal is removed from the stack. */\n    onClose?: () => void;\n}\n\n/** Options accepted by {@link ModalsApi.confirm}. */\nexport interface ConfirmModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Prompt message rendered in the dialog body. */\n    message: ReactNode;\n    /** Confirm button label. Default `Confirmar`. */\n    confirmLabel?: string;\n    /** Cancel button label. Default `Cancelar`. */\n    cancelLabel?: string;\n    /** Render the confirm button in the danger variant. */\n    danger?: boolean;\n    /** Called when the user confirms. */\n    onConfirm?: () => void | Promise<void>;\n    /** Called when the user cancels or dismisses. */\n    onCancel?: () => void;\n}\n\n/** Imperative API returned by {@link useModals}. */\nexport interface ModalsApi {\n    /** Push a content modal. Returns its stack id. */\n    open: (options: OpenModalOptions) => string;\n    /** Push a confirmation dialog. Returns its stack id. */\n    confirm: (options: ConfirmModalOptions) => string;\n    /** Remove the modal with the given id. */\n    close: (id: string) => void;\n    /** Remove every modal from the stack. */\n    closeAll: () => void;\n}\n\ninterface ContentEntry {\n    kind: \"content\";\n    id: string;\n    options: OpenModalOptions;\n}\n\ninterface ConfirmEntry {\n    kind: \"confirm\";\n    id: string;\n    options: ConfirmModalOptions;\n}\n\ntype StackEntry = ContentEntry | ConfirmEntry;\n\nconst ModalsContext = createContext<ModalsApi | null>(null);\n\n/** Props for {@link ModalsProvider}. */\nexport interface ModalsProviderProps {\n    children: ReactNode;\n}\n\n/**\n * Provides imperative modal control via {@link useModals} and renders the open\n * modal stack. Mount once near the app root.\n *\n * @example\n * <ModalsProvider>\n *     <App />\n * </ModalsProvider>\n */\nexport function ModalsProvider({ children }: ModalsProviderProps) {\n    const [stack, setStack] = useState<StackEntry[]>([]);\n    const counter = useRef(0);\n\n    const nextId = useCallback((): string => {\n        counter.current += 1;\n        return `modal-${counter.current}`;\n    }, []);\n\n    const close = useCallback((id: string): void => {\n        setStack((current) => current.filter((entry) => entry.id !== id));\n    }, []);\n\n    const closeAll = useCallback((): void => {\n        setStack([]);\n    }, []);\n\n    const open = useCallback(\n        (options: OpenModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"content\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const confirm = useCallback(\n        (options: ConfirmModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"confirm\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const api = useMemo<ModalsApi>(\n        () => ({ open, confirm, close, closeAll }),\n        [open, confirm, close, closeAll],\n    );\n\n    return (\n        <ModalsContext.Provider value={api}>\n            {children}\n            <div className={styles.stack}>\n                {stack.map((entry) =>\n                    entry.kind === \"content\" ? (\n                        <ContentModal key={entry.id} entry={entry} close={close} />\n                    ) : (\n                        <ConfirmModal key={entry.id} entry={entry} close={close} />\n                    ),\n                )}\n            </div>\n        </ModalsContext.Provider>\n    );\n}\n\ninterface ContentModalProps {\n    entry: ContentEntry;\n    close: (id: string) => void;\n}\n\nfunction ContentModal({ entry, close }: ContentModalProps) {\n    const { options, id } = entry;\n    const handleClose = (): void => {\n        options.onClose?.();\n        close(id);\n    };\n    return (\n        <Modal\n            open\n            onClose={handleClose}\n            title={options.title}\n            size={options.size}\n            closeOnBackdrop={options.closeOnBackdrop}\n            closeOnEsc={options.closeOnEsc}\n            hideCloseButton={options.hideCloseButton}\n        >\n            {options.children}\n        </Modal>\n    );\n}\n\ninterface ConfirmModalProps {\n    entry: ConfirmEntry;\n    close: (id: string) => void;\n}\n\nfunction ConfirmModal({ entry, close }: ConfirmModalProps) {\n    const { options, id } = entry;\n    const [loading, setLoading] = useState(false);\n\n    const handleConfirm = async (): Promise<void> => {\n        try {\n            setLoading(true);\n            await options.onConfirm?.();\n        } finally {\n            setLoading(false);\n            close(id);\n        }\n    };\n\n    const handleCancel = (): void => {\n        options.onCancel?.();\n        close(id);\n    };\n\n    return (\n        <ConfirmDialog\n            open\n            title={options.title ?? \"\"}\n            description={options.message}\n            confirmLabel={options.confirmLabel}\n            cancelLabel={options.cancelLabel}\n            variant={options.danger ? \"danger\" : \"primary\"}\n            loading={loading}\n            onConfirm={handleConfirm}\n            onCancel={handleCancel}\n        />\n    );\n}\n\n/**\n * Access the imperative modals API. Must be used within a {@link ModalsProvider}.\n *\n * @example\n * const modals = useModals();\n * modals.confirm({ message: \"Excluir item?\", danger: true, onConfirm: del });\n *\n * @throws Error when called outside a {@link ModalsProvider}.\n */\nexport function useModals(): ModalsApi {\n    const api = useContext(ModalsContext);\n    if (api === null) {\n        throw new Error(\"useModals must be used within a <ModalsProvider>\");\n    }\n    return api;\n}\n"],"mappings":";;;;;;AA0EA,IAAM,IAAgB,EAAgC,IAAI;AAgB1D,SAAgB,EAAe,EAAE,eAAiC;CAC9D,IAAM,CAAC,GAAO,KAAY,EAAuB,CAAC,CAAC,GAC7C,IAAU,EAAO,CAAC,GAElB,IAAS,SACX,EAAQ,WAAW,GACZ,SAAS,EAAQ,YACzB,CAAC,CAAC,GAEC,IAAQ,GAAa,MAAqB;EAC5C,GAAU,MAAY,EAAQ,QAAQ,MAAU,EAAM,OAAO,CAAE,CAAC;CACpE,GAAG,CAAC,CAAC,GAEC,IAAW,QAAwB;EACrC,EAAS,CAAC,CAAC;CACf,GAAG,CAAC,CAAC,GAEC,IAAO,GACR,MAAsC;EACnC,IAAM,IAAK,EAAO;EAElB,OADA,GAAU,MAAY,CAAC,GAAG,GAAS;GAAE,MAAM;GAAW;GAAI;EAAQ,CAAC,CAAC,GAC7D;CACX,GACA,CAAC,CAAM,CACX,GAEM,IAAU,GACX,MAAyC;EACtC,IAAM,IAAK,EAAO;EAElB,OADA,GAAU,MAAY,CAAC,GAAG,GAAS;GAAE,MAAM;GAAW;GAAI;EAAQ,CAAC,CAAC,GAC7D;CACX,GACA,CAAC,CAAM,CACX,GAEM,IAAM,SACD;EAAE;EAAM;EAAS;EAAO;CAAS,IACxC;EAAC;EAAM;EAAS;EAAO;CAAQ,CACnC;CAEA,OACI,kBAAC,EAAc,UAAf;EAAwB,OAAO;EAA/B,UAAA,CACK,GACD,kBAAC,OAAD;GAAK,WAAW,EAAO;GAClB,UAAA,EAAM,KAAK,MACR,EAAM,SAAS,YACX,kBAAC,GAAD;IAAoC;IAAc;GAAQ,GAAvC,EAAM,EAAiC,IAE1D,kBAAC,GAAD;IAAoC;IAAc;GAAQ,GAAvC,EAAM,EAAiC,CAElE;EACC,CAAA,CACe;;AAEhC;AAOA,SAAS,EAAa,EAAE,UAAO,YAA4B;CACvD,IAAM,EAAE,YAAS,UAAO;CAKxB,OACI,kBAAC,GAAD;EACI,MAAA;EACA,eAPwB;GAE5B,AADA,EAAQ,UAAU,GAClB,EAAM,CAAE;EACZ;EAKQ,OAAO,EAAQ;EACf,MAAM,EAAQ;EACd,iBAAiB,EAAQ;EACzB,YAAY,EAAQ;EACpB,iBAAiB,EAAQ;EAExB,UAAA,EAAQ;CACN,CAAA;AAEf;AAOA,SAAS,EAAa,EAAE,UAAO,YAA4B;CACvD,IAAM,EAAE,YAAS,UAAO,GAClB,CAAC,GAAS,KAAc,EAAS,EAAK;CAiB5C,OACI,kBAAC,GAAD;EACI,MAAA;EACA,OAAO,EAAQ,SAAS;EACxB,aAAa,EAAQ;EACrB,cAAc,EAAQ;EACtB,aAAa,EAAQ;EACrB,SAAS,EAAQ,SAAS,WAAW;EAC5B;EACT,WAAW,YAxB8B;GAC7C,IAAI;IAEA,AADA,EAAW,EAAI,GACf,MAAM,EAAQ,YAAY;GAC9B,UAAU;IAEN,AADA,EAAW,EAAK,GAChB,EAAM,CAAE;GACZ;EACJ;EAiBQ,gBAfyB;GAE7B,AADA,EAAQ,WAAW,GACnB,EAAM,CAAE;EACZ;CAaK,CAAA;AAET;AAWA,SAAgB,IAAuB;CACnC,IAAM,IAAM,EAAW,CAAa;CACpC,IAAI,MAAQ,MACR,MAAU,MAAM,kDAAkD;CAEtE,OAAO;AACX"}
+{"version":3,"file":"ModalsManager.js","names":["styles","ModalsManager_module_default","ModalsContext","createContext","ModalsProvider","stack","setStack","useState","counter","useRef","nextId","useCallback","close","current","entry","id","closeAll","open","confirm","api","useMemo","children","ContentModal","ConfirmModal","Modal","options","loading","setLoading","ConfirmDialog","useModals","useContext"],"sources":["../../../src/components/ModalsManager/ModalsManager.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines — the imperative API (open, close, confirm, prompt) and\n * the stack that renders it live in one file so the returned promise and the mounted\n * element cannot drift apart.\n */\nimport { createContext, useCallback, useContext, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ConfirmDialog } from \"@/components/ConfirmDialog\";\nimport { Modal } from \"@/components/Modal\";\nimport type { ModalSize } from \"@/components/Modal\";\nimport styles from \"./ModalsManager.module.css\";\n\n/** Options accepted by {@link ModalsApi.open}. */\nexport interface OpenModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Modal body content. */\n    children: ReactNode;\n    /** Dialog size. Default `md`. */\n    size?: ModalSize;\n    /** Allow closing by clicking the backdrop. Default `true`. */\n    closeOnBackdrop?: boolean;\n    /** Allow closing with the Esc key. Default `true`. */\n    closeOnEsc?: boolean;\n    /** Hide the header close button. */\n    hideCloseButton?: boolean;\n    /** Called after the modal is removed from the stack. */\n    onClose?: () => void;\n}\n\n/** Options accepted by {@link ModalsApi.confirm}. */\nexport interface ConfirmModalOptions {\n    /** Header title. */\n    title?: ReactNode;\n    /** Prompt message rendered in the dialog body. */\n    message: ReactNode;\n    /** Confirm button label. Default `Confirmar`. */\n    confirmLabel?: string;\n    /** Cancel button label. Default `Cancelar`. */\n    cancelLabel?: string;\n    /** Render the confirm button in the danger variant. */\n    danger?: boolean;\n    /** Called when the user confirms. */\n    onConfirm?: () => void | Promise<void>;\n    /** Called when the user cancels or dismisses. */\n    onCancel?: () => void;\n}\n\n/** Imperative API returned by {@link useModals}. */\nexport interface ModalsApi {\n    /** Push a content modal. Returns its stack id. */\n    open: (options: OpenModalOptions) => string;\n    /** Push a confirmation dialog. Returns its stack id. */\n    confirm: (options: ConfirmModalOptions) => string;\n    /** Remove the modal with the given id. */\n    close: (id: string) => void;\n    /** Remove every modal from the stack. */\n    closeAll: () => void;\n}\n\ninterface ContentEntry {\n    kind: \"content\";\n    id: string;\n    options: OpenModalOptions;\n}\n\ninterface ConfirmEntry {\n    kind: \"confirm\";\n    id: string;\n    options: ConfirmModalOptions;\n}\n\ntype StackEntry = ContentEntry | ConfirmEntry;\n\nconst ModalsContext = createContext<ModalsApi | null>(null);\n\n/** Props for {@link ModalsProvider}. */\nexport interface ModalsProviderProps {\n    children: ReactNode;\n}\n\n/**\n * Provides imperative modal control via {@link useModals} and renders the open\n * modal stack. Mount once near the app root.\n *\n * @example\n * <ModalsProvider>\n *     <App />\n * </ModalsProvider>\n */\nexport function ModalsProvider({ children }: ModalsProviderProps) {\n    const [stack, setStack] = useState<StackEntry[]>([]);\n    const counter = useRef(0);\n\n    const nextId = useCallback((): string => {\n        counter.current += 1;\n        return `modal-${counter.current}`;\n    }, []);\n\n    const close = useCallback((id: string): void => {\n        setStack((current) => current.filter((entry) => entry.id !== id));\n    }, []);\n\n    const closeAll = useCallback((): void => {\n        setStack([]);\n    }, []);\n\n    const open = useCallback(\n        (options: OpenModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"content\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const confirm = useCallback(\n        (options: ConfirmModalOptions): string => {\n            const id = nextId();\n            setStack((current) => [...current, { kind: \"confirm\", id, options }]);\n            return id;\n        },\n        [nextId],\n    );\n\n    const api = useMemo<ModalsApi>(\n        () => ({ open, confirm, close, closeAll }),\n        [open, confirm, close, closeAll],\n    );\n\n    return (\n        <ModalsContext.Provider value={api}>\n            {children}\n            <div className={styles.stack}>\n                {stack.map((entry) =>\n                    entry.kind === \"content\" ? (\n                        <ContentModal key={entry.id} entry={entry} close={close} />\n                    ) : (\n                        <ConfirmModal key={entry.id} entry={entry} close={close} />\n                    ),\n                )}\n            </div>\n        </ModalsContext.Provider>\n    );\n}\n\ninterface ContentModalProps {\n    entry: ContentEntry;\n    close: (id: string) => void;\n}\n\nfunction ContentModal({ entry, close }: ContentModalProps) {\n    const { options, id } = entry;\n    const handleClose = (): void => {\n        options.onClose?.();\n        close(id);\n    };\n    return (\n        <Modal\n            open\n            onClose={handleClose}\n            title={options.title}\n            size={options.size}\n            closeOnBackdrop={options.closeOnBackdrop}\n            closeOnEsc={options.closeOnEsc}\n            hideCloseButton={options.hideCloseButton}\n        >\n            {options.children}\n        </Modal>\n    );\n}\n\ninterface ConfirmModalProps {\n    entry: ConfirmEntry;\n    close: (id: string) => void;\n}\n\nfunction ConfirmModal({ entry, close }: ConfirmModalProps) {\n    const { options, id } = entry;\n    const [loading, setLoading] = useState(false);\n\n    const handleConfirm = async (): Promise<void> => {\n        try {\n            setLoading(true);\n            await options.onConfirm?.();\n        } finally {\n            setLoading(false);\n            close(id);\n        }\n    };\n\n    const handleCancel = (): void => {\n        options.onCancel?.();\n        close(id);\n    };\n\n    return (\n        <ConfirmDialog\n            open\n            title={options.title ?? \"\"}\n            description={options.message}\n            confirmLabel={options.confirmLabel}\n            cancelLabel={options.cancelLabel}\n            variant={options.danger ? \"danger\" : \"primary\"}\n            loading={loading}\n            onConfirm={handleConfirm}\n            onCancel={handleCancel}\n        />\n    );\n}\n\n/**\n * Access the imperative modals API. Must be used within a {@link ModalsProvider}.\n *\n * @example\n * const modals = useModals();\n * modals.confirm({ message: \"Excluir item?\", danger: true, onConfirm: del });\n *\n * @throws Error when called outside a {@link ModalsProvider}.\n */\nexport function useModals(): ModalsApi {\n    const api = useContext(ModalsContext);\n    if (api === null) {\n        throw new Error(\"useModals must be used within a <ModalsProvider>\");\n    }\n    return api;\n}\n"],"mappings":";;;;;;AA0EA,IAAME,IAAgBC,EAAgC,IAAI;AAgB1D,SAAgBC,EAAe,EAAE,eAAiC;CAC9D,IAAM,CAACC,GAAOC,KAAYC,EAAuB,CAAC,CAAC,GAC7CC,IAAUC,EAAO,CAAC,GAElBC,IAASC,SACX,EAAQ,WAAW,GACZ,SAASH,EAAQ,YACzB,CAAC,CAAC,GAECI,IAAQD,GAAa,MAAqB;EAC5C,GAAU,MAAYE,EAAQ,QAAQ,MAAUC,EAAM,OAAOC,CAAE,CAAC;CACpE,GAAG,CAAC,CAAC,GAECC,IAAWL,QAAwB;EACrC,EAAS,CAAC,CAAC;CACf,GAAG,CAAC,CAAC,GAECM,IAAON,GACR,MAAsC;EACnC,IAAMI,IAAKL,EAAO;EAElB,OADAJ,GAAU,MAAY,CAAC,GAAGO,GAAS;GAAE,MAAM;GAAW;GAAI;EAAQ,CAAC,CAAC,GAC7DE;CACX,GACA,CAACL,CAAM,CACX,GAEMQ,IAAUP,GACX,MAAyC;EACtC,IAAMI,IAAKL,EAAO;EAElB,OADAJ,GAAU,MAAY,CAAC,GAAGO,GAAS;GAAE,MAAM;GAAW;GAAI;EAAQ,CAAC,CAAC,GAC7DE;CACX,GACA,CAACL,CAAM,CACX,GAEMS,IAAMC,SACD;EAAE;EAAM;EAAS;EAAO;CAAS,IACxC;EAACH;EAAMC;EAASN;EAAOI;CAAQ,CACnC;CAEA,OACI,kBAACd,EAAc,UAAf;EAAwB,OAAOiB;EAA/B,UAAA,CACKE,GACD,kBAAC,OAAD;GAAK,WAAWrB,EAAO;GAClB,UAAAK,EAAM,KAAK,MACRS,EAAM,SAAS,YACX,kBAACQ,GAAD;IAAoC;IAAc;GAAQ,GAAvCR,EAAM,EAAiC,IAE1D,kBAACS,GAAD;IAAoC;IAAc;GAAQ,GAAvCT,EAAM,EAAiC,CAElE;EACC,CAAA,CACe;;AAEhC;AAOA,SAASQ,EAAa,EAAE,UAAO,YAA4B;CACvD,IAAM,EAAE,YAAS,UAAOR;CAKxB,OACI,kBAACU,GAAD;EACI,MAAA;EACA,eAPwB;GAE5B,AADAC,EAAQ,UAAU,GAClBb,EAAMG,CAAE;EACZ;EAKQ,OAAOU,EAAQ;EACf,MAAMA,EAAQ;EACd,iBAAiBA,EAAQ;EACzB,YAAYA,EAAQ;EACpB,iBAAiBA,EAAQ;EAExB,UAAAA,EAAQ;CACN,CAAA;AAEf;AAOA,SAASF,EAAa,EAAE,UAAO,YAA4B;CACvD,IAAM,EAAE,YAAS,UAAOT,GAClB,CAACY,GAASC,KAAcpB,EAAS,EAAK;CAiB5C,OACI,kBAACqB,GAAD;EACI,MAAA;EACA,OAAOH,EAAQ,SAAS;EACxB,aAAaA,EAAQ;EACrB,cAAcA,EAAQ;EACtB,aAAaA,EAAQ;EACrB,SAASA,EAAQ,SAAS,WAAW;EAC5B;EACT,WAAW,YAxB8B;GAC7C,IAAI;IAEA,AADAE,EAAW,EAAI,GACf,MAAMF,EAAQ,YAAY;GAC9B,UAAU;IAEN,AADAE,EAAW,EAAK,GAChBf,EAAMG,CAAE;GACZ;EACJ;EAiBQ,gBAfyB;GAE7B,AADAU,EAAQ,WAAW,GACnBb,EAAMG,CAAE;EACZ;CAaK,CAAA;AAET;AAWA,SAAgBc,IAAuB;CACnC,IAAMV,IAAMW,EAAW5B,CAAa;CACpC,IAAIiB,MAAQ,MACR,MAAU,MAAM,kDAAkD;CAEtE,OAAOA;AACX"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalsManager.module.cjs","names":[],"sources":["../../../src/components/ModalsManager/ModalsManager.module.css"],"sourcesContent":[".stack {\n    display: contents;\n}\n"],"mappings":";"}
+{"version":3,"file":"ModalsManager.module.cjs","names":["stack","ModalsManager_module_default"],"sources":["../../../src/components/ModalsManager/ModalsManager.module.css"],"sourcesContent":[".stack {\n    display: contents;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalsManager.module.js","names":[],"sources":["../../../src/components/ModalsManager/ModalsManager.module.css"],"sourcesContent":[".stack {\n    display: contents;\n}\n"],"mappings":";"}
+{"version":3,"file":"ModalsManager.module.js","names":["stack","ModalsManager_module_default"],"sources":["../../../src/components/ModalsManager/ModalsManager.module.css"],"sourcesContent":[".stack {\n    display: contents;\n}\n"],"mappings":";"}

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\";\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"}
+{"version":3,"file":"Money.cjs","names":["numberFormat","require_intl_cache","react_jsx_runtime","Money","props","formatted","locale","cents"],"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":"A,iFAsBA,SAAgBG,EAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,GAAGC,GAAqB,CACvF,IAAMC,EAAYL,EAAAA,aAAaM,EAAQ,CAAE,MAAO,WAAY,UAAS,CAAC,CAAC,CAAC,OAAOC,EAAQ,GAAG,EAE1F,OAAO,EAAAL,EAAA,IAAA,CAAC,OAAD,CAAM,GAAIE,EAAQ,SAAAC,CAAgB,CAAA,CAC7C,C"}

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\";\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"}
+{"version":3,"file":"Money.js","names":["Money","props","formatted","numberFormat","locale","cents"],"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,SAAgBA,EAAM,EAAE,UAAO,cAAW,OAAO,YAAS,SAAS,GAAGC,KAAqB;CACvF,IAAMC,IAAYC,EAAaC,GAAQ;EAAE,OAAO;EAAY;CAAS,CAAC,CAAC,CAAC,OAAOC,IAAQ,GAAG;CAE1F,OAAO,kBAAC,QAAD;EAAM,GAAIJ;EAAQ,UAAAC;CAAgB,CAAA;AAC7C"}

package/dist/components/MultiSelect/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","names":[],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — options/value/onChange\n * plus the shared field contract, the knobs that make it multi (maxItems, filter,\n * emptyMessage) and portal. The body is the listbox with chip removal, type-ahead and\n * the ARIA active-descendant wiring reading one active index.\n */\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useListboxDismiss } from \"@/components/Combobox/use-listbox-dismiss\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./MultiSelect.module.css\";\n\nexport interface MultiSelectOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n    options: MultiSelectOption[];\n    /** Currently selected values. */\n    value: string[];\n    onChange: (value: string[]) => void;\n    label?: string;\n    placeholder?: string;\n    helperText?: string;\n    error?: string;\n    disabled?: boolean;\n    /** Cap the number of selectable items. */\n    maxItems?: number;\n    /** Custom filter — return true to keep the option. Default: case-insensitive substring on label. */\n    filter?: (option: MultiSelectOption, query: string) => boolean;\n    /** Message shown when no option matches. */\n    emptyMessage?: string;\n    /**\n     * Render the list in a portal, positioned under the field. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the list —\n     * in the last row of a `DataTable` none of it was visible (measured in Chrome\n     * at 1440 px). In a portal it escapes the clip, takes the field's width,\n     * flips above the field when there is no room below, and follows it on\n     * scroll, resize and when the field grows a line of chips.\n     */\n    portal?: boolean;\n    className?: string;\n}\n\nfunction defaultFilter(option: MultiSelectOption, query: string): boolean {\n    if (!query) return true;\n    return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\n/** Gap between field and list, in px — the in-flow CSS uses the same 4 px. */\nconst LIST_OFFSET = 4;\n\n/**\n * MultiSelect — a filterable dropdown that selects many options, shown as\n * removable chips inside the field. Selecting toggles a value; Backspace on an\n * empty query removes the last chip.\n *\n * Keyboard: ArrowUp/ArrowDown navigate — the active option is announced through\n * `aria-activedescendant`, focus stays on the input — Enter toggles the active\n * option, Esc closes, Backspace (empty input) pops the last chip, and\n * Tab/Shift+Tab leave the field closing the list.\n */\nexport function MultiSelect({\n    options,\n    value,\n    onChange,\n    label,\n    placeholder = \"Selecione\",\n    helperText,\n    error,\n    disabled,\n    maxItems,\n    filter = defaultFilter,\n    emptyMessage = \"Nenhuma opção encontrada\",\n    portal = true,\n    className,\n}: MultiSelectProps) {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState(\"\");\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [fieldNode, setFieldNode] = useState<HTMLDivElement | null>(null);\n    const [listNode, setListNode] = useState<HTMLUListElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: fieldNode,\n        floating: listNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: LIST_OFFSET,\n        enabled: portal && open,\n        matchWidth: true,\n    });\n\n    const selectedSet = useMemo(() => new Set(value), [value]);\n    const selectedOptions = useMemo(\n        () =>\n            value\n                .map((v) => options.find((o) => o.value === v))\n                .filter((o): o is MultiSelectOption => Boolean(o)),\n        [value, options],\n    );\n    const filtered = useMemo(\n        () => options.filter((o) => filter(o, query)),\n        [options, filter, query],\n    );\n\n    const atMax = maxItems !== undefined && value.length >= maxItems;\n\n    const toggle = useCallback(\n        (option: MultiSelectOption): void => {\n            if (option.disabled) return;\n            if (selectedSet.has(option.value)) {\n                onChange(value.filter((v) => v !== option.value));\n            } else {\n                if (atMax) return;\n                onChange([...value, option.value]);\n            }\n            setQuery(\"\");\n            inputRef.current?.focus();\n        },\n        [selectedSet, onChange, value, atMax],\n    );\n\n    const removeAt = useCallback(\n        (optionValue: string): void => {\n            onChange(value.filter((v) => v !== optionValue));\n        },\n        [onChange, value],\n    );\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setQuery(\"\");\n    }, []);\n\n    const { onInputBlur, onListMouseDown } = useListboxDismiss({\n        open,\n        rootRef,\n        listNode,\n        onDismiss: close,\n    });\n    const optionId = (index: number): string => `${id}-option-${index}`;\n    const activeOption = open ? filtered[activeIndex] : undefined;\n\n    /**\n     * Open the list and keep focus on the input when the empty part of the field\n     * is pressed.\n     *\n     * Only a press on the field itself counts: a press on a chip or on its remove\n     * button has its own handler, and the input focuses itself.\n     */\n    const handleFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n        if (disabled || event.target !== event.currentTarget) return;\n        event.preventDefault();\n        inputRef.current?.focus();\n        setOpen(true);\n    };\n\n    /**\n     * Keyboard model of the input.\n     *\n     * `Escape` calls `preventDefault()` only while the list is open: that marks the\n     * key as consumed, so an enclosing `Modal` or `Drawer` stays open and the next\n     * `Escape` reaches it. With the list closed the key is left alone and dismisses\n     * the enclosing layer, as the user expects.\n     */\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            setOpen(true);\n            setActiveIndex((current) => Math.min(filtered.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            const option = filtered[activeIndex];\n            if (option) toggle(option);\n        } else if (event.key === \"Escape\") {\n            if (open) event.preventDefault();\n            close();\n        } else if (event.key === \"Backspace\" && query === \"\" && value.length > 0) {\n            removeAt(value[value.length - 1]);\n        }\n    };\n\n    const list = (\n        <ul\n            ref={setListNode}\n            id={`${id}-listbox`}\n            role=\"listbox\"\n            aria-multiselectable\n            className={cn(styles.menu, portal && styles.portalled)}\n            style={floatingStyle}\n            onMouseDown={onListMouseDown}\n        >\n            {filtered.length === 0 ? (\n                <li className={styles.empty}>{emptyMessage}</li>\n            ) : (\n                filtered.map((option, index) => {\n                    const isSelected = selectedSet.has(option.value);\n                    return (\n                        <li\n                            key={option.value}\n                            id={optionId(index)}\n                            role=\"option\"\n                            aria-selected={isSelected}\n                            aria-disabled={option.disabled || (!isSelected && atMax)}\n                            className={cn(\n                                styles.option,\n                                index === activeIndex && styles.active,\n                                isSelected && styles.selected,\n                            )}\n                            onMouseEnter={() => setActiveIndex(index)}\n                            onMouseDown={() => toggle(option)}\n                        >\n                            <span className={styles.check} aria-hidden>\n                                {isSelected ? \"✓\" : \"\"}\n                            </span>\n                            {option.label}\n                        </li>\n                    );\n                })\n            )}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} className={cn(styles.wrapper, error && styles.error, className)}>\n            {label && (\n                <label htmlFor={id} className={styles.label}>\n                    {label}\n                </label>\n            )}\n            <div\n                ref={setFieldNode}\n                className={cn(styles.field, disabled && styles.disabled)}\n                onMouseDown={handleFieldMouseDown}\n            >\n                {selectedOptions.map((option) => (\n                    <span key={option.value} className={styles.chip}>\n                        {option.label}\n                        <button\n                            type=\"button\"\n                            className={styles.chipRemove}\n                            aria-label={`Remover ${option.label}`}\n                            disabled={disabled}\n                            onMouseDown={(event) => {\n                                event.preventDefault();\n                                removeAt(option.value);\n                            }}\n                        >\n                            ×\n                        </button>\n                    </span>\n                ))}\n                <input\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    aria-controls={`${id}-listbox`}\n                    aria-autocomplete=\"list\"\n                    aria-activedescendant={activeOption ? optionId(activeIndex) : undefined}\n                    className={styles.input}\n                    placeholder={value.length === 0 ? placeholder : \"\"}\n                    disabled={disabled}\n                    value={query}\n                    onFocus={() => setOpen(true)}\n                    onChange={(event) => {\n                        setQuery(event.target.value);\n                        setOpen(true);\n                        setActiveIndex(0);\n                    }}\n                    onKeyDown={handleKeyDown}\n                    onBlur={onInputBlur}\n                />\n            </div>\n            {open && (portal ? <Portal>{list}</Portal> : list)}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs","names":["useId","useRef","useState","useAnchorPosition","useMemo","useCallback","useListboxDismiss","cn","styles","Portal","require_cn","require_Portal","require_anchor_position","require_use_listbox_dismiss","require_MultiSelect_module","react","react_jsx_runtime","defaultFilter","query","option","LIST_OFFSET","MultiSelect","id","rootRef","inputRef","open","setOpen","setQuery","activeIndex","setActiveIndex","fieldNode","setFieldNode","listNode","setListNode","floatingStyle","portal","selectedSet","value","selectedOptions","options","o","v","filtered","filter","atMax","maxItems","toggle","onChange","removeAt","optionValue","close","optionId","index","activeOption","handleFieldMouseDown","disabled","event","handleKeyDown","current","list","onListMouseDown","emptyMessage","isSelected","error","className","label","placeholder","onInputBlur","helperText"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — options/value/onChange\n * plus the shared field contract, the knobs that make it multi (maxItems, filter,\n * emptyMessage) and portal. The body is the listbox with chip removal, type-ahead and\n * the ARIA active-descendant wiring reading one active index.\n */\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useListboxDismiss } from \"@/components/Combobox/use-listbox-dismiss\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./MultiSelect.module.css\";\n\nexport interface MultiSelectOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n    options: MultiSelectOption[];\n    /** Currently selected values. */\n    value: string[];\n    onChange: (value: string[]) => void;\n    label?: string;\n    placeholder?: string;\n    helperText?: string;\n    error?: string;\n    disabled?: boolean;\n    /** Cap the number of selectable items. */\n    maxItems?: number;\n    /** Custom filter — return true to keep the option. Default: case-insensitive substring on label. */\n    filter?: (option: MultiSelectOption, query: string) => boolean;\n    /** Message shown when no option matches. */\n    emptyMessage?: string;\n    /**\n     * Render the list in a portal, positioned under the field. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the list —\n     * in the last row of a `DataTable` none of it was visible (measured in Chrome\n     * at 1440 px). In a portal it escapes the clip, takes the field's width,\n     * flips above the field when there is no room below, and follows it on\n     * scroll, resize and when the field grows a line of chips.\n     */\n    portal?: boolean;\n    className?: string;\n}\n\nfunction defaultFilter(option: MultiSelectOption, query: string): boolean {\n    if (!query) return true;\n    return option.label.toLowerCase().includes(query.toLowerCase());\n}\n\n/** Gap between field and list, in px — the in-flow CSS uses the same 4 px. */\nconst LIST_OFFSET = 4;\n\n/**\n * MultiSelect — a filterable dropdown that selects many options, shown as\n * removable chips inside the field. Selecting toggles a value; Backspace on an\n * empty query removes the last chip.\n *\n * Keyboard: ArrowUp/ArrowDown navigate — the active option is announced through\n * `aria-activedescendant`, focus stays on the input — Enter toggles the active\n * option, Esc closes, Backspace (empty input) pops the last chip, and\n * Tab/Shift+Tab leave the field closing the list.\n */\nexport function MultiSelect({\n    options,\n    value,\n    onChange,\n    label,\n    placeholder = \"Selecione\",\n    helperText,\n    error,\n    disabled,\n    maxItems,\n    filter = defaultFilter,\n    emptyMessage = \"Nenhuma opção encontrada\",\n    portal = true,\n    className,\n}: MultiSelectProps) {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState(\"\");\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [fieldNode, setFieldNode] = useState<HTMLDivElement | null>(null);\n    const [listNode, setListNode] = useState<HTMLUListElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: fieldNode,\n        floating: listNode,\n        side: \"bottom\",\n        align: \"start\",\n        offset: LIST_OFFSET,\n        enabled: portal && open,\n        matchWidth: true,\n    });\n\n    const selectedSet = useMemo(() => new Set(value), [value]);\n    const selectedOptions = useMemo(\n        () =>\n            value\n                .map((v) => options.find((o) => o.value === v))\n                .filter((o): o is MultiSelectOption => Boolean(o)),\n        [value, options],\n    );\n    const filtered = useMemo(\n        () => options.filter((o) => filter(o, query)),\n        [options, filter, query],\n    );\n\n    const atMax = maxItems !== undefined && value.length >= maxItems;\n\n    const toggle = useCallback(\n        (option: MultiSelectOption): void => {\n            if (option.disabled) return;\n            if (selectedSet.has(option.value)) {\n                onChange(value.filter((v) => v !== option.value));\n            } else {\n                if (atMax) return;\n                onChange([...value, option.value]);\n            }\n            setQuery(\"\");\n            inputRef.current?.focus();\n        },\n        [selectedSet, onChange, value, atMax],\n    );\n\n    const removeAt = useCallback(\n        (optionValue: string): void => {\n            onChange(value.filter((v) => v !== optionValue));\n        },\n        [onChange, value],\n    );\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setQuery(\"\");\n    }, []);\n\n    const { onInputBlur, onListMouseDown } = useListboxDismiss({\n        open,\n        rootRef,\n        listNode,\n        onDismiss: close,\n    });\n    const optionId = (index: number): string => `${id}-option-${index}`;\n    const activeOption = open ? filtered[activeIndex] : undefined;\n\n    /**\n     * Open the list and keep focus on the input when the empty part of the field\n     * is pressed.\n     *\n     * Only a press on the field itself counts: a press on a chip or on its remove\n     * button has its own handler, and the input focuses itself.\n     */\n    const handleFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>): void => {\n        if (disabled || event.target !== event.currentTarget) return;\n        event.preventDefault();\n        inputRef.current?.focus();\n        setOpen(true);\n    };\n\n    /**\n     * Keyboard model of the input.\n     *\n     * `Escape` calls `preventDefault()` only while the list is open: that marks the\n     * key as consumed, so an enclosing `Modal` or `Drawer` stays open and the next\n     * `Escape` reaches it. With the list closed the key is left alone and dismisses\n     * the enclosing layer, as the user expects.\n     */\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            setOpen(true);\n            setActiveIndex((current) => Math.min(filtered.length - 1, current + 1));\n        } else if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            setActiveIndex((current) => Math.max(0, current - 1));\n        } else if (event.key === \"Enter\") {\n            event.preventDefault();\n            const option = filtered[activeIndex];\n            if (option) toggle(option);\n        } else if (event.key === \"Escape\") {\n            if (open) event.preventDefault();\n            close();\n        } else if (event.key === \"Backspace\" && query === \"\" && value.length > 0) {\n            removeAt(value[value.length - 1]);\n        }\n    };\n\n    const list = (\n        <ul\n            ref={setListNode}\n            id={`${id}-listbox`}\n            role=\"listbox\"\n            aria-multiselectable\n            className={cn(styles.menu, portal && styles.portalled)}\n            style={floatingStyle}\n            onMouseDown={onListMouseDown}\n        >\n            {filtered.length === 0 ? (\n                <li className={styles.empty}>{emptyMessage}</li>\n            ) : (\n                filtered.map((option, index) => {\n                    const isSelected = selectedSet.has(option.value);\n                    return (\n                        <li\n                            key={option.value}\n                            id={optionId(index)}\n                            role=\"option\"\n                            aria-selected={isSelected}\n                            aria-disabled={option.disabled || (!isSelected && atMax)}\n                            className={cn(\n                                styles.option,\n                                index === activeIndex && styles.active,\n                                isSelected && styles.selected,\n                            )}\n                            onMouseEnter={() => setActiveIndex(index)}\n                            onMouseDown={() => toggle(option)}\n                        >\n                            <span className={styles.check} aria-hidden>\n                                {isSelected ? \"✓\" : \"\"}\n                            </span>\n                            {option.label}\n                        </li>\n                    );\n                })\n            )}\n        </ul>\n    );\n\n    return (\n        <div ref={rootRef} className={cn(styles.wrapper, error && styles.error, className)}>\n            {label && (\n                <label htmlFor={id} className={styles.label}>\n                    {label}\n                </label>\n            )}\n            <div\n                ref={setFieldNode}\n                className={cn(styles.field, disabled && styles.disabled)}\n                onMouseDown={handleFieldMouseDown}\n            >\n                {selectedOptions.map((option) => (\n                    <span key={option.value} className={styles.chip}>\n                        {option.label}\n                        <button\n                            type=\"button\"\n                            className={styles.chipRemove}\n                            aria-label={`Remover ${option.label}`}\n                            disabled={disabled}\n                            onMouseDown={(event) => {\n                                event.preventDefault();\n                                removeAt(option.value);\n                            }}\n                        >\n                            ×\n                        </button>\n                    </span>\n                ))}\n                <input\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    aria-controls={`${id}-listbox`}\n                    aria-autocomplete=\"list\"\n                    aria-activedescendant={activeOption ? optionId(activeIndex) : undefined}\n                    className={styles.input}\n                    placeholder={value.length === 0 ? placeholder : \"\"}\n                    disabled={disabled}\n                    value={query}\n                    onFocus={() => setOpen(true)}\n                    onChange={(event) => {\n                        setQuery(event.target.value);\n                        setOpen(true);\n                        setActiveIndex(0);\n                    }}\n                    onKeyDown={handleKeyDown}\n                    onBlur={onInputBlur}\n                />\n            </div>\n            {open && (portal ? <Portal>{list}</Portal> : list)}\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}