tempest-react-sdk 0.78.0 → 0.80.0

package/dist/components/Navbar/Navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.js","names":[],"sources":["../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Navbar.module.css\";\n\n/**\n * Visual tone of a {@link Navbar}.\n *\n * - `\"surface\"` — the page's surface and text.\n * - `\"primary\"` — the brand fill (`--tempest-primary`) with\n *   `--tempest-primary-foreground` ink. Only the bar's own text follows the fill:\n *   components inside it keep the page's tokens. Measured in Chromium over the\n *   SDK's `#0066ff`, a link button inside it reads 1:1, muted text 1.59:1 and the\n *   focus ring 1.41:1. Fine for a bar that holds a logo and plain text.\n * - `\"inverse\"` — the inverse surface: every color token inverted inside the bar,\n *   so a primary `Button`, a link, the focus ring and muted text are measured\n *   against the fill. See {@link NavbarProps.tone}.\n * - `\"transparent\"` — no background; the text inherits.\n */\nexport type NavbarTone = \"surface\" | \"primary\" | \"inverse\" | \"transparent\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n    /** Left slot — typically logo + brand name. */\n    logo?: ReactNode;\n    /** Center slot — typically nav links. */\n    nav?: ReactNode;\n    /** Right slot — typically user menu / actions. */\n    actions?: ReactNode;\n    /** Make the bar sticky at the top of the scroll container. Default `true`. */\n    sticky?: boolean;\n    /**\n     * Visual tone. Default `\"surface\"`.\n     *\n     * `\"inverse\"` writes `data-tempest-tone=\"inverse\"` and paints the bar with the\n     * inverse surface's `--tempest-bg`, so the components in the slots invert with\n     * it. The tokens are opt-in: `tempest-react-sdk/styles/inverse.css` for the\n     * SDK's own blue, or `createTheme({ primary, inverse: createInverseSurface })`\n     * for yours. With neither loaded the bar falls back to the page's\n     * `--tempest-bg` and `--tempest-text` — legible, not inverted.\n     *\n     * A separate tone rather than a change to `\"primary\"`, because the inverse\n     * fill is not always the brand's `500`: for `#0066ff` it is the `800`\n     * (`#042e75`), and turning `\"primary\"` into it would repaint every bar that\n     * uses it today.\n     */\n    tone?: NavbarTone;\n    /** When set, renders a thin bottom border. Default `true`. */\n    bordered?: boolean;\n}\n\n/**\n * Top app bar. Three-slot layout (logo / nav / actions) that collapses\n * gracefully on mobile (nav slot wraps below).\n *\n * @example\n * <Navbar\n *     logo={<img src=\"/logo.svg\" alt=\"App\" />}\n *     nav={<NavLinks />}\n *     actions={<UserMenu />}\n * />\n */\nexport function Navbar({\n    logo,\n    nav,\n    actions,\n    sticky = true,\n    tone = \"surface\",\n    bordered = true,\n    className,\n    ...props\n}: NavbarProps) {\n    return (\n        <header\n            className={cn(\n                styles.navbar,\n                styles[tone],\n                sticky && styles.sticky,\n                bordered && styles.bordered,\n                className,\n            )}\n            data-tempest-tone={tone === \"inverse\" ? \"inverse\" : undefined}\n            {...props}\n        >\n            {logo && <div className={styles.logo}>{logo}</div>}\n            {nav && <nav className={styles.nav}>{nav}</nav>}\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n"],"mappings":";;;;AA4DA,SAAgB,EAAO,EACnB,SACA,QACA,YACA,YAAS,IACT,UAAO,WACP,cAAW,IACX,cACA,GAAG,KACS;CACZ,OACI,kBAAC,UAAD;EACI,WAAW,EACP,EAAO,QACP,EAAO,IACP,KAAU,EAAO,QACjB,KAAY,EAAO,UACnB,CACJ;EACA,qBAAmB,MAAS,YAAY,YAAY,KAAA;EACpD,GAAI;EATR,UAAA;GAWK,KAAQ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO,UAAA;GAAU,CAAA;GAChD,KAAO,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAM,UAAA;GAAS,CAAA;GAC7C,KAAW,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU,UAAA;GAAa,CAAA;EACtD;;AAEhB"}
+{"version":3,"file":"Navbar.js","names":["styles","Navbar_module_default","Navbar","props","cn","tone","sticky","bordered","className","logo","nav","actions"],"sources":["../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Navbar.module.css\";\n\n/**\n * Visual tone of a {@link Navbar}.\n *\n * - `\"surface\"` — the page's surface and text.\n * - `\"primary\"` — the brand fill (`--tempest-primary`) with\n *   `--tempest-primary-foreground` ink. Only the bar's own text follows the fill:\n *   components inside it keep the page's tokens. Measured in Chromium over the\n *   SDK's `#0066ff`, a link button inside it reads 1:1, muted text 1.59:1 and the\n *   focus ring 1.41:1. Fine for a bar that holds a logo and plain text.\n * - `\"inverse\"` — the inverse surface: every color token inverted inside the bar,\n *   so a primary `Button`, a link, the focus ring and muted text are measured\n *   against the fill. See {@link NavbarProps.tone}.\n * - `\"transparent\"` — no background; the text inherits.\n */\nexport type NavbarTone = \"surface\" | \"primary\" | \"inverse\" | \"transparent\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n    /** Left slot — typically logo + brand name. */\n    logo?: ReactNode;\n    /** Center slot — typically nav links. */\n    nav?: ReactNode;\n    /** Right slot — typically user menu / actions. */\n    actions?: ReactNode;\n    /** Make the bar sticky at the top of the scroll container. Default `true`. */\n    sticky?: boolean;\n    /**\n     * Visual tone. Default `\"surface\"`.\n     *\n     * `\"inverse\"` writes `data-tempest-tone=\"inverse\"` and paints the bar with the\n     * inverse surface's `--tempest-bg`, so the components in the slots invert with\n     * it. The tokens are opt-in: `tempest-react-sdk/styles/inverse.css` for the\n     * SDK's own blue, or `createTheme({ primary, inverse: createInverseSurface })`\n     * for yours. With neither loaded the bar falls back to the page's\n     * `--tempest-bg` and `--tempest-text` — legible, not inverted.\n     *\n     * A separate tone rather than a change to `\"primary\"`, because the inverse\n     * fill is not always the brand's `500`: for `#0066ff` it is the `800`\n     * (`#042e75`), and turning `\"primary\"` into it would repaint every bar that\n     * uses it today.\n     */\n    tone?: NavbarTone;\n    /** When set, renders a thin bottom border. Default `true`. */\n    bordered?: boolean;\n}\n\n/**\n * Top app bar. Three-slot layout (logo / nav / actions) that collapses\n * gracefully on mobile (nav slot wraps below).\n *\n * @example\n * <Navbar\n *     logo={<img src=\"/logo.svg\" alt=\"App\" />}\n *     nav={<NavLinks />}\n *     actions={<UserMenu />}\n * />\n */\nexport function Navbar({\n    logo,\n    nav,\n    actions,\n    sticky = true,\n    tone = \"surface\",\n    bordered = true,\n    className,\n    ...props\n}: NavbarProps) {\n    return (\n        <header\n            className={cn(\n                styles.navbar,\n                styles[tone],\n                sticky && styles.sticky,\n                bordered && styles.bordered,\n                className,\n            )}\n            data-tempest-tone={tone === \"inverse\" ? \"inverse\" : undefined}\n            {...props}\n        >\n            {logo && <div className={styles.logo}>{logo}</div>}\n            {nav && <nav className={styles.nav}>{nav}</nav>}\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n"],"mappings":";;;;AA4DA,SAAgBE,EAAO,EACnB,SACA,QACA,YACA,YAAS,IACT,UAAO,WACP,cAAW,IACX,cACA,GAAGC,KACS;CACZ,OACI,kBAAC,UAAD;EACI,WAAWC,EACPJ,EAAO,QACPA,EAAOK,IACPC,KAAUN,EAAO,QACjBO,KAAYP,EAAO,UACnBQ,CACJ;EACA,qBAAmBH,MAAS,YAAY,YAAY,KAAA;EACpD,GAAIF;EATR,UAAA;GAWKM,KAAQ,kBAAC,OAAD;IAAK,WAAWT,EAAO;IAAO,UAAAS;GAAU,CAAA;GAChDC,KAAO,kBAAC,OAAD;IAAK,WAAWV,EAAO;IAAM,UAAAU;GAAS,CAAA;GAC7CC,KAAW,kBAAC,OAAD;IAAK,WAAWX,EAAO;IAAU,UAAAW;GAAa,CAAA;EACtD;;AAEhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Navbar.module.cjs","names":[],"sources":["../../../src/components/Navbar/Navbar.module.css"],"sourcesContent":[".navbar {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-4);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-height: 56px;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    padding-top: max(var(--tempest-space-3), env(safe-area-inset-top, 0));\n}\n\n.navbar.surface {\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.navbar.primary {\n    background: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.navbar.inverse {\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.navbar.transparent {\n    background: transparent;\n    color: inherit;\n}\n\n.navbar.bordered {\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.navbar.sticky {\n    position: sticky;\n    top: 0;\n    z-index: 30;\n    backdrop-filter: saturate(180%) blur(8px);\n}\n\n.logo {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.nav {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.actions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"Navbar.module.cjs","names":["navbar","surface","primary","inverse","transparent","bordered","sticky","logo","nav","actions","Navbar_module_default"],"sources":["../../../src/components/Navbar/Navbar.module.css"],"sourcesContent":[".navbar {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-4);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-height: 56px;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    padding-top: max(var(--tempest-space-3), env(safe-area-inset-top, 0));\n}\n\n.navbar.surface {\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.navbar.primary {\n    background: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.navbar.inverse {\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.navbar.transparent {\n    background: transparent;\n    color: inherit;\n}\n\n.navbar.bordered {\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.navbar.sticky {\n    position: sticky;\n    top: 0;\n    z-index: 30;\n    backdrop-filter: saturate(180%) blur(8px);\n}\n\n.logo {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.nav {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.actions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Navbar.module.js","names":[],"sources":["../../../src/components/Navbar/Navbar.module.css"],"sourcesContent":[".navbar {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-4);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-height: 56px;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    padding-top: max(var(--tempest-space-3), env(safe-area-inset-top, 0));\n}\n\n.navbar.surface {\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.navbar.primary {\n    background: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.navbar.inverse {\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.navbar.transparent {\n    background: transparent;\n    color: inherit;\n}\n\n.navbar.bordered {\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.navbar.sticky {\n    position: sticky;\n    top: 0;\n    z-index: 30;\n    backdrop-filter: saturate(180%) blur(8px);\n}\n\n.logo {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.nav {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.actions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"Navbar.module.js","names":["navbar","surface","primary","inverse","transparent","bordered","sticky","logo","nav","actions","Navbar_module_default"],"sources":["../../../src/components/Navbar/Navbar.module.css"],"sourcesContent":[".navbar {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-4);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-height: 56px;\n    width: 100%;\n    font-family: var(--tempest-font-sans);\n    padding-top: max(var(--tempest-space-3), env(safe-area-inset-top, 0));\n}\n\n.navbar.surface {\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.navbar.primary {\n    background: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.navbar.inverse {\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.navbar.transparent {\n    background: transparent;\n    color: inherit;\n}\n\n.navbar.bordered {\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.navbar.sticky {\n    position: sticky;\n    top: 0;\n    z-index: 30;\n    backdrop-filter: saturate(180%) blur(8px);\n}\n\n.logo {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.nav {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.actions {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    margin-left: auto;\n}\n"],"mappings":";"}

package/dist/components/NavigationMenu/NavigationMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.cjs","names":[],"sources":["../../../src/components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — the body resolves the active item from the\n * current path, owns the open submenu and the hover-intent delay, all of which\n * decide the same highlighted row.\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 \"./NavigationMenu.module.css\";\n\nexport interface NavigationMenuItem {\n    /** Visible label for the entry. */\n    label: ReactNode;\n    /** When set, the entry renders as an anchor. */\n    href?: string;\n    /** Invoked when the entry is activated (click / Enter). */\n    onSelect?: () => void;\n    /** Nested entries — presence turns the item into a submenu trigger. */\n    children?: NavigationMenuItem[];\n}\n\nexport interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {\n    /** Top-level navigation entries. */\n    items: NavigationMenuItem[];\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 submenu 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\n/**\n * Horizontal navigation menu with hover/click/focus dropdown submenus.\n *\n * - Top-level items render in a `<nav><ul>`.\n * - Items with `children` open a submenu panel (`role=\"menu\"`) on hover, focus,\n *   or click. Only one panel is open at a time.\n * - Closes on outside click, Escape, or selecting a leaf entry.\n *\n * @example\n * <NavigationMenu\n *     items={[\n *         { label: \"Home\", href: \"/\" },\n *         {\n *             label: \"Products\",\n *             children: [\n *                 { label: \"Analytics\", href: \"/analytics\" },\n *                 { label: \"Billing\", onSelect: () => openBilling() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function NavigationMenu({ items, portal = true, className, ...props }: NavigationMenuProps) {\n    const [clickedIndex, setClickedIndex] = useState<number>(-1);\n    const [hovered, setHovered] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLElement>(null);\n\n    const close = useCallback((): void => {\n        setClickedIndex(-1);\n        setHovered(-1);\n    }, []);\n\n    const openIndex = clickedIndex !== -1 ? clickedIndex : hovered;\n\n    const [anchorNode, setAnchorNode] = useState<HTMLLIElement | 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, close);\n\n    /**\n     * Close on a press outside both the menu and the open panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menu's root: a press on one of its entries would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the entry's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\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(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [openIndex, close, panelNode]);\n\n    const renderLeaf = (item: NavigationMenuItem, role: \"none\" | \"menuitem\"): ReactNode => {\n        const handleClick = (): void => {\n            item.onSelect?.();\n            close();\n        };\n        if (item.href) {\n            return (\n                <a\n                    href={item.href}\n                    role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                    className={styles.link}\n                    onClick={handleClick}\n                >\n                    {item.label}\n                </a>\n            );\n        }\n        return (\n            <button\n                type=\"button\"\n                role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                className={styles.link}\n                onClick={handleClick}\n            >\n                {item.label}\n            </button>\n        );\n    };\n\n    return (\n        <nav ref={rootRef} className={cn(styles.root, className)} {...props}>\n            <ul className={styles.list}>\n                {items.map((item, index) => {\n                    const hasChildren = !!item.children && item.children.length > 0;\n                    if (!hasChildren) {\n                        return (\n                            <li key={index} className={styles.item}>\n                                {renderLeaf(item, \"none\")}\n                            </li>\n                        );\n                    }\n                    const open = openIndex === index;\n                    const panelId = `${baseId}-panel-${index}`;\n                    const panel = (\n                        <ul\n                            ref={setPanelNode}\n                            id={panelId}\n                            role=\"menu\"\n                            className={cn(styles.panel, portal && styles.portalled)}\n                            style={floatingStyle}\n                        >\n                            {item.children!.map((child, childIndex) => (\n                                <li key={childIndex} role=\"none\" className={styles.subItem}>\n                                    {renderLeaf(child, \"menuitem\")}\n                                </li>\n                            ))}\n                        </ul>\n                    );\n                    return (\n                        <li\n                            key={index}\n                            ref={open ? setAnchorNode : undefined}\n                            className={styles.item}\n                            onMouseEnter={() => setHovered(index)}\n                            onMouseLeave={() => setHovered((prev) => (prev === index ? -1 : prev))}\n                        >\n                            <button\n                                type=\"button\"\n                                className={styles.trigger}\n                                aria-haspopup=\"menu\"\n                                aria-expanded={open}\n                                aria-controls={panelId}\n                                onClick={() =>\n                                    setClickedIndex((prev) => (prev === index ? -1 : index))\n                                }\n                                onFocus={() => setHovered(index)}\n                            >\n                                {item.label}\n                            </button>\n                            {open && (portal ? <Portal>{panel}</Portal> : panel)}\n                        </li>\n                    );\n                })}\n            </ul>\n        </nav>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"NavigationMenu.cjs","names":["useState","useId","useRef","useCallback","useAnchorPosition","styles","cn","Portal","require_cn","require_escape_layer","require_Portal","require_anchor_position","require_tab_bridge","require_NavigationMenu_module","react","react_jsx_runtime","PANEL_OFFSET","NavigationMenu","props","clickedIndex","setClickedIndex","hovered","setHovered","baseId","rootRef","close","openIndex","anchorNode","setAnchorNode","panelNode","setPanelNode","floating","portal","floatingStyle","onDown","target","event","renderLeaf","handleClick","item","role","className","items","index","open","panelId","panel","child","childIndex","prev"],"sources":["../../../src/components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — the body resolves the active item from the\n * current path, owns the open submenu and the hover-intent delay, all of which\n * decide the same highlighted row.\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 \"./NavigationMenu.module.css\";\n\nexport interface NavigationMenuItem {\n    /** Visible label for the entry. */\n    label: ReactNode;\n    /** When set, the entry renders as an anchor. */\n    href?: string;\n    /** Invoked when the entry is activated (click / Enter). */\n    onSelect?: () => void;\n    /** Nested entries — presence turns the item into a submenu trigger. */\n    children?: NavigationMenuItem[];\n}\n\nexport interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {\n    /** Top-level navigation entries. */\n    items: NavigationMenuItem[];\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 submenu 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\n/**\n * Horizontal navigation menu with hover/click/focus dropdown submenus.\n *\n * - Top-level items render in a `<nav><ul>`.\n * - Items with `children` open a submenu panel (`role=\"menu\"`) on hover, focus,\n *   or click. Only one panel is open at a time.\n * - Closes on outside click, Escape, or selecting a leaf entry.\n *\n * @example\n * <NavigationMenu\n *     items={[\n *         { label: \"Home\", href: \"/\" },\n *         {\n *             label: \"Products\",\n *             children: [\n *                 { label: \"Analytics\", href: \"/analytics\" },\n *                 { label: \"Billing\", onSelect: () => openBilling() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function NavigationMenu({ items, portal = true, className, ...props }: NavigationMenuProps) {\n    const [clickedIndex, setClickedIndex] = useState<number>(-1);\n    const [hovered, setHovered] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLElement>(null);\n\n    const close = useCallback((): void => {\n        setClickedIndex(-1);\n        setHovered(-1);\n    }, []);\n\n    const openIndex = clickedIndex !== -1 ? clickedIndex : hovered;\n\n    const [anchorNode, setAnchorNode] = useState<HTMLLIElement | 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, close);\n\n    /**\n     * Close on a press outside both the menu and the open panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menu's root: a press on one of its entries would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the entry's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\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(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [openIndex, close, panelNode]);\n\n    const renderLeaf = (item: NavigationMenuItem, role: \"none\" | \"menuitem\"): ReactNode => {\n        const handleClick = (): void => {\n            item.onSelect?.();\n            close();\n        };\n        if (item.href) {\n            return (\n                <a\n                    href={item.href}\n                    role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                    className={styles.link}\n                    onClick={handleClick}\n                >\n                    {item.label}\n                </a>\n            );\n        }\n        return (\n            <button\n                type=\"button\"\n                role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                className={styles.link}\n                onClick={handleClick}\n            >\n                {item.label}\n            </button>\n        );\n    };\n\n    return (\n        <nav ref={rootRef} className={cn(styles.root, className)} {...props}>\n            <ul className={styles.list}>\n                {items.map((item, index) => {\n                    const hasChildren = !!item.children && item.children.length > 0;\n                    if (!hasChildren) {\n                        return (\n                            <li key={index} className={styles.item}>\n                                {renderLeaf(item, \"none\")}\n                            </li>\n                        );\n                    }\n                    const open = openIndex === index;\n                    const panelId = `${baseId}-panel-${index}`;\n                    const panel = (\n                        <ul\n                            ref={setPanelNode}\n                            id={panelId}\n                            role=\"menu\"\n                            className={cn(styles.panel, portal && styles.portalled)}\n                            style={floatingStyle}\n                        >\n                            {item.children!.map((child, childIndex) => (\n                                <li key={childIndex} role=\"none\" className={styles.subItem}>\n                                    {renderLeaf(child, \"menuitem\")}\n                                </li>\n                            ))}\n                        </ul>\n                    );\n                    return (\n                        <li\n                            key={index}\n                            ref={open ? setAnchorNode : undefined}\n                            className={styles.item}\n                            onMouseEnter={() => setHovered(index)}\n                            onMouseLeave={() => setHovered((prev) => (prev === index ? -1 : prev))}\n                        >\n                            <button\n                                type=\"button\"\n                                className={styles.trigger}\n                                aria-haspopup=\"menu\"\n                                aria-expanded={open}\n                                aria-controls={panelId}\n                                onClick={() =>\n                                    setClickedIndex((prev) => (prev === index ? -1 : index))\n                                }\n                                onFocus={() => setHovered(index)}\n                            >\n                                {item.label}\n                            </button>\n                            {open && (portal ? <Portal>{panel}</Portal> : panel)}\n                        </li>\n                    );\n                })}\n            </ul>\n        </nav>\n    );\n}\n"],"mappings":"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"}

package/dist/components/NavigationMenu/NavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — the body resolves the active item from the\n * current path, owns the open submenu and the hover-intent delay, all of which\n * decide the same highlighted row.\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 \"./NavigationMenu.module.css\";\n\nexport interface NavigationMenuItem {\n    /** Visible label for the entry. */\n    label: ReactNode;\n    /** When set, the entry renders as an anchor. */\n    href?: string;\n    /** Invoked when the entry is activated (click / Enter). */\n    onSelect?: () => void;\n    /** Nested entries — presence turns the item into a submenu trigger. */\n    children?: NavigationMenuItem[];\n}\n\nexport interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {\n    /** Top-level navigation entries. */\n    items: NavigationMenuItem[];\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 submenu 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\n/**\n * Horizontal navigation menu with hover/click/focus dropdown submenus.\n *\n * - Top-level items render in a `<nav><ul>`.\n * - Items with `children` open a submenu panel (`role=\"menu\"`) on hover, focus,\n *   or click. Only one panel is open at a time.\n * - Closes on outside click, Escape, or selecting a leaf entry.\n *\n * @example\n * <NavigationMenu\n *     items={[\n *         { label: \"Home\", href: \"/\" },\n *         {\n *             label: \"Products\",\n *             children: [\n *                 { label: \"Analytics\", href: \"/analytics\" },\n *                 { label: \"Billing\", onSelect: () => openBilling() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function NavigationMenu({ items, portal = true, className, ...props }: NavigationMenuProps) {\n    const [clickedIndex, setClickedIndex] = useState<number>(-1);\n    const [hovered, setHovered] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLElement>(null);\n\n    const close = useCallback((): void => {\n        setClickedIndex(-1);\n        setHovered(-1);\n    }, []);\n\n    const openIndex = clickedIndex !== -1 ? clickedIndex : hovered;\n\n    const [anchorNode, setAnchorNode] = useState<HTMLLIElement | 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, close);\n\n    /**\n     * Close on a press outside both the menu and the open panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menu's root: a press on one of its entries would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the entry's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\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(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [openIndex, close, panelNode]);\n\n    const renderLeaf = (item: NavigationMenuItem, role: \"none\" | \"menuitem\"): ReactNode => {\n        const handleClick = (): void => {\n            item.onSelect?.();\n            close();\n        };\n        if (item.href) {\n            return (\n                <a\n                    href={item.href}\n                    role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                    className={styles.link}\n                    onClick={handleClick}\n                >\n                    {item.label}\n                </a>\n            );\n        }\n        return (\n            <button\n                type=\"button\"\n                role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                className={styles.link}\n                onClick={handleClick}\n            >\n                {item.label}\n            </button>\n        );\n    };\n\n    return (\n        <nav ref={rootRef} className={cn(styles.root, className)} {...props}>\n            <ul className={styles.list}>\n                {items.map((item, index) => {\n                    const hasChildren = !!item.children && item.children.length > 0;\n                    if (!hasChildren) {\n                        return (\n                            <li key={index} className={styles.item}>\n                                {renderLeaf(item, \"none\")}\n                            </li>\n                        );\n                    }\n                    const open = openIndex === index;\n                    const panelId = `${baseId}-panel-${index}`;\n                    const panel = (\n                        <ul\n                            ref={setPanelNode}\n                            id={panelId}\n                            role=\"menu\"\n                            className={cn(styles.panel, portal && styles.portalled)}\n                            style={floatingStyle}\n                        >\n                            {item.children!.map((child, childIndex) => (\n                                <li key={childIndex} role=\"none\" className={styles.subItem}>\n                                    {renderLeaf(child, \"menuitem\")}\n                                </li>\n                            ))}\n                        </ul>\n                    );\n                    return (\n                        <li\n                            key={index}\n                            ref={open ? setAnchorNode : undefined}\n                            className={styles.item}\n                            onMouseEnter={() => setHovered(index)}\n                            onMouseLeave={() => setHovered((prev) => (prev === index ? -1 : prev))}\n                        >\n                            <button\n                                type=\"button\"\n                                className={styles.trigger}\n                                aria-haspopup=\"menu\"\n                                aria-expanded={open}\n                                aria-controls={panelId}\n                                onClick={() =>\n                                    setClickedIndex((prev) => (prev === index ? -1 : index))\n                                }\n                                onFocus={() => setHovered(index)}\n                            >\n                                {item.label}\n                            </button>\n                            {open && (portal ? <Portal>{panel}</Portal> : panel)}\n                        </li>\n                    );\n                })}\n            </ul>\n        </nav>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"NavigationMenu.js","names":["styles","NavigationMenu_module_default","PANEL_OFFSET","NavigationMenu","props","clickedIndex","setClickedIndex","useState","hovered","setHovered","baseId","useId","rootRef","useRef","close","useCallback","openIndex","anchorNode","setAnchorNode","panelNode","setPanelNode","floating","portal","floatingStyle","useAnchorPosition","usePortalTabOrder","useEscapeLayer","useEffect","onDown","target","event","renderLeaf","handleClick","item","role","cn","className","items","index","open","panelId","panel","child","childIndex","prev","Portal"],"sources":["../../../src/components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["/**\n * @tempest-limits function-lines — the body resolves the active item from the\n * current path, owns the open submenu and the hover-intent delay, all of which\n * decide the same highlighted row.\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 \"./NavigationMenu.module.css\";\n\nexport interface NavigationMenuItem {\n    /** Visible label for the entry. */\n    label: ReactNode;\n    /** When set, the entry renders as an anchor. */\n    href?: string;\n    /** Invoked when the entry is activated (click / Enter). */\n    onSelect?: () => void;\n    /** Nested entries — presence turns the item into a submenu trigger. */\n    children?: NavigationMenuItem[];\n}\n\nexport interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {\n    /** Top-level navigation entries. */\n    items: NavigationMenuItem[];\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 submenu 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\n/**\n * Horizontal navigation menu with hover/click/focus dropdown submenus.\n *\n * - Top-level items render in a `<nav><ul>`.\n * - Items with `children` open a submenu panel (`role=\"menu\"`) on hover, focus,\n *   or click. Only one panel is open at a time.\n * - Closes on outside click, Escape, or selecting a leaf entry.\n *\n * @example\n * <NavigationMenu\n *     items={[\n *         { label: \"Home\", href: \"/\" },\n *         {\n *             label: \"Products\",\n *             children: [\n *                 { label: \"Analytics\", href: \"/analytics\" },\n *                 { label: \"Billing\", onSelect: () => openBilling() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function NavigationMenu({ items, portal = true, className, ...props }: NavigationMenuProps) {\n    const [clickedIndex, setClickedIndex] = useState<number>(-1);\n    const [hovered, setHovered] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLElement>(null);\n\n    const close = useCallback((): void => {\n        setClickedIndex(-1);\n        setHovered(-1);\n    }, []);\n\n    const openIndex = clickedIndex !== -1 ? clickedIndex : hovered;\n\n    const [anchorNode, setAnchorNode] = useState<HTMLLIElement | 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, close);\n\n    /**\n     * Close on a press outside both the menu and the open panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * menu's root: a press on one of its entries would otherwise count as\n     * outside, close the panel on `mousedown`, and swallow the entry's click.\n     */\n    useEffect(() => {\n        if (openIndex === -1) return;\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(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [openIndex, close, panelNode]);\n\n    const renderLeaf = (item: NavigationMenuItem, role: \"none\" | \"menuitem\"): ReactNode => {\n        const handleClick = (): void => {\n            item.onSelect?.();\n            close();\n        };\n        if (item.href) {\n            return (\n                <a\n                    href={item.href}\n                    role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                    className={styles.link}\n                    onClick={handleClick}\n                >\n                    {item.label}\n                </a>\n            );\n        }\n        return (\n            <button\n                type=\"button\"\n                role={role === \"menuitem\" ? \"menuitem\" : undefined}\n                className={styles.link}\n                onClick={handleClick}\n            >\n                {item.label}\n            </button>\n        );\n    };\n\n    return (\n        <nav ref={rootRef} className={cn(styles.root, className)} {...props}>\n            <ul className={styles.list}>\n                {items.map((item, index) => {\n                    const hasChildren = !!item.children && item.children.length > 0;\n                    if (!hasChildren) {\n                        return (\n                            <li key={index} className={styles.item}>\n                                {renderLeaf(item, \"none\")}\n                            </li>\n                        );\n                    }\n                    const open = openIndex === index;\n                    const panelId = `${baseId}-panel-${index}`;\n                    const panel = (\n                        <ul\n                            ref={setPanelNode}\n                            id={panelId}\n                            role=\"menu\"\n                            className={cn(styles.panel, portal && styles.portalled)}\n                            style={floatingStyle}\n                        >\n                            {item.children!.map((child, childIndex) => (\n                                <li key={childIndex} role=\"none\" className={styles.subItem}>\n                                    {renderLeaf(child, \"menuitem\")}\n                                </li>\n                            ))}\n                        </ul>\n                    );\n                    return (\n                        <li\n                            key={index}\n                            ref={open ? setAnchorNode : undefined}\n                            className={styles.item}\n                            onMouseEnter={() => setHovered(index)}\n                            onMouseLeave={() => setHovered((prev) => (prev === index ? -1 : prev))}\n                        >\n                            <button\n                                type=\"button\"\n                                className={styles.trigger}\n                                aria-haspopup=\"menu\"\n                                aria-expanded={open}\n                                aria-controls={panelId}\n                                onClick={() =>\n                                    setClickedIndex((prev) => (prev === index ? -1 : index))\n                                }\n                                onFocus={() => setHovered(index)}\n                            >\n                                {item.label}\n                            </button>\n                            {open && (portal ? <Portal>{panel}</Portal> : panel)}\n                        </li>\n                    );\n                })}\n            </ul>\n        </nav>\n    );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.module.cjs","names":[],"sources":["../../../src/components/NavigationMenu/NavigationMenu.module.css"],"sourcesContent":[".root {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n}\n\n.list {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.item {\n    position: relative;\n}\n\n.link,\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .link:hover,\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.link:focus-visible,\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.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-nav-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.subItem {\n    display: block;\n}\n\n.subItem .link {\n    width: 100%;\n}\n\n@keyframes tempest-nav-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}
+{"version":3,"file":"NavigationMenu.module.cjs","names":["root","list","item","link","trigger","panel","tempestNavMenuIn","subItem","portalled","NavigationMenu_module_default"],"sources":["../../../src/components/NavigationMenu/NavigationMenu.module.css"],"sourcesContent":[".root {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n}\n\n.list {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.item {\n    position: relative;\n}\n\n.link,\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .link:hover,\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.link:focus-visible,\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.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-nav-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.subItem {\n    display: block;\n}\n\n.subItem .link {\n    width: 100%;\n}\n\n@keyframes tempest-nav-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.module.js","names":[],"sources":["../../../src/components/NavigationMenu/NavigationMenu.module.css"],"sourcesContent":[".root {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n}\n\n.list {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.item {\n    position: relative;\n}\n\n.link,\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .link:hover,\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.link:focus-visible,\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.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-nav-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.subItem {\n    display: block;\n}\n\n.subItem .link {\n    width: 100%;\n}\n\n@keyframes tempest-nav-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}
+{"version":3,"file":"NavigationMenu.module.js","names":["root","list","item","link","trigger","panel","tempestNavMenuIn","subItem","portalled","NavigationMenu_module_default"],"sources":["../../../src/components/NavigationMenu/NavigationMenu.module.css"],"sourcesContent":[".root {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n}\n\n.list {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.item {\n    position: relative;\n}\n\n.link,\n.trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .link:hover,\n    .trigger:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.link:focus-visible,\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.panel {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: var(--tempest-z-dropdown);\n    min-width: 180px;\n    max-width: 320px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    list-style: none;\n    margin: 0;\n    animation: tempest-nav-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.subItem {\n    display: block;\n}\n\n.subItem .link {\n    width: 100%;\n}\n\n@keyframes tempest-nav-menu-in {\n    from {\n        opacity: 0;\n        transform: translateY(-4px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .panel {\n        animation: none;\n    }\n}\n\n.portalled {\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    z-index: var(--tempest-z-popover);\n}\n"],"mappings":";"}

package/dist/components/NavigationRail/NavigationRail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRail.cjs","names":[],"sources":["../../../src/components/NavigationRail/NavigationRail.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./NavigationRail.module.css\";\n\nexport interface NavigationRailItem {\n    /** Unique identifier — used as React key and for value matching. */\n    key: string;\n    /** Visible label. */\n    label: ReactNode;\n    /** Icon rendered above the label. */\n    icon?: ReactNode;\n    /** Optional badge content rendered over the icon. */\n    badge?: ReactNode;\n    /** When true, the item is not selectable. */\n    disabled?: boolean;\n}\n\nexport type NavigationRailLabelVisibility = \"all\" | \"selected\" | \"none\";\n\nexport interface NavigationRailProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    items: NavigationRailItem[];\n    /** Selected key. */\n    value: string;\n    /** Called with the new selected key on click. */\n    onChange: (key: string) => void;\n    /** Top slot — e.g. a FAB or logo. */\n    header?: ReactNode;\n    /** Bottom slot — pushed to the bottom of the rail. */\n    footer?: ReactNode;\n    /** Which item labels to show. Default `\"all\"`. */\n    labelVisibility?: NavigationRailLabelVisibility;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * Vertical, compact navigation column for desktop and tablet layouts. Each item\n * stacks an icon over its label, with the active item flagged via\n * `aria-current=\"page\"`. Use `labelVisibility=\"selected\"` to show only the\n * active item's label, or `\"none\"` for an icon-only rail.\n *\n * @example\n * <NavigationRail\n *     header={<FloatingActionButton icon={<Plus />} position=\"none\" />}\n *     items={[\n *         { key: \"home\", label: \"Início\", icon: <Home /> },\n *         { key: \"inbox\", label: \"Caixa\", icon: <Inbox />, badge: 3 },\n *     ]}\n *     value={tab}\n *     onChange={setTab}\n * />\n */\nexport function NavigationRail({\n    items,\n    value,\n    onChange,\n    header,\n    footer,\n    labelVisibility = \"all\",\n    className,\n    ...props\n}: NavigationRailProps) {\n    return (\n        <nav className={cn(styles.rail, className)} aria-label=\"Navegação lateral\" {...props}>\n            {header !== undefined && <div className={styles.header}>{header}</div>}\n            <ul className={styles.list}>\n                {items.map((item) => {\n                    const active = item.key === value;\n                    const showLabel =\n                        labelVisibility === \"all\" || (labelVisibility === \"selected\" && active);\n                    return (\n                        <li key={item.key}>\n                            <button\n                                type=\"button\"\n                                className={cn(styles.item, active && styles.active)}\n                                aria-current={active ? \"page\" : undefined}\n                                disabled={item.disabled}\n                                onClick={() => onChange(item.key)}\n                            >\n                                <span className={styles.iconWrap}>\n                                    {item.icon && <span className={styles.icon}>{item.icon}</span>}\n                                    {item.badge !== undefined && (\n                                        <span className={styles.badge}>{item.badge}</span>\n                                    )}\n                                </span>\n                                {showLabel && <span className={styles.label}>{item.label}</span>}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n            {footer !== undefined && <div className={styles.footer}>{footer}</div>}\n        </nav>\n    );\n}\n"],"mappings":"kHAoDA,SAAgB,EAAe,CAC3B,QACA,QACA,WACA,SACA,SACA,kBAAkB,MAClB,YACA,GAAG,GACiB,CACpB,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAS,EAAG,aAAW,oBAAoB,GAAI,EAA/E,SAAA,CACK,IAAW,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,SAAA,CAAY,CAAA,GACrE,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,KACjB,SAAA,EAAM,IAAK,GAAS,CACjB,IAAM,EAAS,EAAK,MAAQ,EACtB,EACF,IAAoB,OAAU,IAAoB,YAAc,EACpE,OACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAAA,UACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAU,EAAA,QAAO,MAAM,EAClD,eAAc,EAAS,OAAS,IAAA,GAChC,SAAU,EAAK,SACf,YAAe,EAAS,EAAK,GAAG,EALpC,SAAA,EAOI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAxB,SAAA,CACK,EAAK,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,SAAA,EAAK,IAAW,CAAA,EAC5D,EAAK,QAAU,IAAA,KACZ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAK,KAAY,CAAA,CAEnD,CACL,CAAA,EAAA,IAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAK,KAAY,CAAA,CAC3D,CACR,CAAA,CAAA,EAhBK,EAAK,GAgBV,CAEZ,CAAC,CACD,CAAA,EACH,IAAW,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,SAAA,CAAY,CAAA,CACpE,GAEb"}
+{"version":3,"file":"NavigationRail.cjs","names":["cn","styles","require_cn","require_NavigationRail_module","react_jsx_runtime","NavigationRail","props","className","header","items","active","item","value","showLabel","labelVisibility","onChange","footer"],"sources":["../../../src/components/NavigationRail/NavigationRail.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./NavigationRail.module.css\";\n\nexport interface NavigationRailItem {\n    /** Unique identifier — used as React key and for value matching. */\n    key: string;\n    /** Visible label. */\n    label: ReactNode;\n    /** Icon rendered above the label. */\n    icon?: ReactNode;\n    /** Optional badge content rendered over the icon. */\n    badge?: ReactNode;\n    /** When true, the item is not selectable. */\n    disabled?: boolean;\n}\n\nexport type NavigationRailLabelVisibility = \"all\" | \"selected\" | \"none\";\n\nexport interface NavigationRailProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    items: NavigationRailItem[];\n    /** Selected key. */\n    value: string;\n    /** Called with the new selected key on click. */\n    onChange: (key: string) => void;\n    /** Top slot — e.g. a FAB or logo. */\n    header?: ReactNode;\n    /** Bottom slot — pushed to the bottom of the rail. */\n    footer?: ReactNode;\n    /** Which item labels to show. Default `\"all\"`. */\n    labelVisibility?: NavigationRailLabelVisibility;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * Vertical, compact navigation column for desktop and tablet layouts. Each item\n * stacks an icon over its label, with the active item flagged via\n * `aria-current=\"page\"`. Use `labelVisibility=\"selected\"` to show only the\n * active item's label, or `\"none\"` for an icon-only rail.\n *\n * @example\n * <NavigationRail\n *     header={<FloatingActionButton icon={<Plus />} position=\"none\" />}\n *     items={[\n *         { key: \"home\", label: \"Início\", icon: <Home /> },\n *         { key: \"inbox\", label: \"Caixa\", icon: <Inbox />, badge: 3 },\n *     ]}\n *     value={tab}\n *     onChange={setTab}\n * />\n */\nexport function NavigationRail({\n    items,\n    value,\n    onChange,\n    header,\n    footer,\n    labelVisibility = \"all\",\n    className,\n    ...props\n}: NavigationRailProps) {\n    return (\n        <nav className={cn(styles.rail, className)} aria-label=\"Navegação lateral\" {...props}>\n            {header !== undefined && <div className={styles.header}>{header}</div>}\n            <ul className={styles.list}>\n                {items.map((item) => {\n                    const active = item.key === value;\n                    const showLabel =\n                        labelVisibility === \"all\" || (labelVisibility === \"selected\" && active);\n                    return (\n                        <li key={item.key}>\n                            <button\n                                type=\"button\"\n                                className={cn(styles.item, active && styles.active)}\n                                aria-current={active ? \"page\" : undefined}\n                                disabled={item.disabled}\n                                onClick={() => onChange(item.key)}\n                            >\n                                <span className={styles.iconWrap}>\n                                    {item.icon && <span className={styles.icon}>{item.icon}</span>}\n                                    {item.badge !== undefined && (\n                                        <span className={styles.badge}>{item.badge}</span>\n                                    )}\n                                </span>\n                                {showLabel && <span className={styles.label}>{item.label}</span>}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n            {footer !== undefined && <div className={styles.footer}>{footer}</div>}\n        </nav>\n    );\n}\n"],"mappings":"A,kHAoDA,SAAgBK,EAAe,CAC3B,QACA,QACA,WACA,SACA,SACA,kBAAkB,MAClB,YACA,GAAGC,GACiB,CACpB,OACI,EAAAF,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,GAAGC,EAAAA,QAAO,KAAMM,CAAS,EAAG,aAAW,oBAAoB,GAAID,EAA/E,SAAA,CACKE,IAAW,IAAA,KAAa,EAAAJ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWH,EAAAA,QAAO,OAAS,SAAAO,CAAY,CAAA,GACrE,EAAAJ,EAAA,IAAA,CAAC,KAAD,CAAI,UAAWH,EAAAA,QAAO,KACjB,SAAAQ,EAAM,IAAK,GAAS,CACjB,IAAMC,EAASC,EAAK,MAAQC,EACtBC,EACFC,IAAoB,OAAUA,IAAoB,YAAcJ,EACpE,OACI,EAAAN,EAAA,IAAA,CAAC,KAAD,CAAA,UACI,EAAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWJ,EAAAA,GAAGC,EAAAA,QAAO,KAAMS,GAAUT,EAAAA,QAAO,MAAM,EAClD,eAAcS,EAAS,OAAS,IAAA,GAChC,SAAUC,EAAK,SACf,YAAeI,EAASJ,EAAK,GAAG,EALpC,SAAA,EAOI,EAAAP,EAAA,KAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,SAAxB,SAAA,CACKU,EAAK,OAAQ,EAAAP,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,KAAO,SAAAU,EAAK,IAAW,CAAA,EAC5DA,EAAK,QAAU,IAAA,KACZ,EAAAP,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,MAAQ,SAAAU,EAAK,KAAY,CAAA,CAEnD,CACL,CAAA,EAAAE,IAAa,EAAAT,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWH,EAAAA,QAAO,MAAQ,SAAAU,EAAK,KAAY,CAAA,CAC3D,CACR,CAAA,CAAA,EAhBKA,EAAK,GAgBV,CAEZ,CAAC,CACD,CAAA,EACHK,IAAW,IAAA,KAAa,EAAAZ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWH,EAAAA,QAAO,OAAS,SAAAe,CAAY,CAAA,CACpE,C,EAEb,C"}

package/dist/components/NavigationRail/NavigationRail.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationRail.js","names":[],"sources":["../../../src/components/NavigationRail/NavigationRail.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./NavigationRail.module.css\";\n\nexport interface NavigationRailItem {\n    /** Unique identifier — used as React key and for value matching. */\n    key: string;\n    /** Visible label. */\n    label: ReactNode;\n    /** Icon rendered above the label. */\n    icon?: ReactNode;\n    /** Optional badge content rendered over the icon. */\n    badge?: ReactNode;\n    /** When true, the item is not selectable. */\n    disabled?: boolean;\n}\n\nexport type NavigationRailLabelVisibility = \"all\" | \"selected\" | \"none\";\n\nexport interface NavigationRailProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    items: NavigationRailItem[];\n    /** Selected key. */\n    value: string;\n    /** Called with the new selected key on click. */\n    onChange: (key: string) => void;\n    /** Top slot — e.g. a FAB or logo. */\n    header?: ReactNode;\n    /** Bottom slot — pushed to the bottom of the rail. */\n    footer?: ReactNode;\n    /** Which item labels to show. Default `\"all\"`. */\n    labelVisibility?: NavigationRailLabelVisibility;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * Vertical, compact navigation column for desktop and tablet layouts. Each item\n * stacks an icon over its label, with the active item flagged via\n * `aria-current=\"page\"`. Use `labelVisibility=\"selected\"` to show only the\n * active item's label, or `\"none\"` for an icon-only rail.\n *\n * @example\n * <NavigationRail\n *     header={<FloatingActionButton icon={<Plus />} position=\"none\" />}\n *     items={[\n *         { key: \"home\", label: \"Início\", icon: <Home /> },\n *         { key: \"inbox\", label: \"Caixa\", icon: <Inbox />, badge: 3 },\n *     ]}\n *     value={tab}\n *     onChange={setTab}\n * />\n */\nexport function NavigationRail({\n    items,\n    value,\n    onChange,\n    header,\n    footer,\n    labelVisibility = \"all\",\n    className,\n    ...props\n}: NavigationRailProps) {\n    return (\n        <nav className={cn(styles.rail, className)} aria-label=\"Navegação lateral\" {...props}>\n            {header !== undefined && <div className={styles.header}>{header}</div>}\n            <ul className={styles.list}>\n                {items.map((item) => {\n                    const active = item.key === value;\n                    const showLabel =\n                        labelVisibility === \"all\" || (labelVisibility === \"selected\" && active);\n                    return (\n                        <li key={item.key}>\n                            <button\n                                type=\"button\"\n                                className={cn(styles.item, active && styles.active)}\n                                aria-current={active ? \"page\" : undefined}\n                                disabled={item.disabled}\n                                onClick={() => onChange(item.key)}\n                            >\n                                <span className={styles.iconWrap}>\n                                    {item.icon && <span className={styles.icon}>{item.icon}</span>}\n                                    {item.badge !== undefined && (\n                                        <span className={styles.badge}>{item.badge}</span>\n                                    )}\n                                </span>\n                                {showLabel && <span className={styles.label}>{item.label}</span>}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n            {footer !== undefined && <div className={styles.footer}>{footer}</div>}\n        </nav>\n    );\n}\n"],"mappings":";;;;AAoDA,SAAgB,EAAe,EAC3B,UACA,UACA,aACA,WACA,WACA,qBAAkB,OAClB,cACA,GAAG,KACiB;CACpB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,MAAM,CAAS;EAAG,cAAW;EAAoB,GAAI;EAA/E,UAAA;GACK,MAAW,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,UAAA;GAAY,CAAA;GACrE,kBAAC,MAAD;IAAI,WAAW,EAAO;IACjB,UAAA,EAAM,KAAK,MAAS;KACjB,IAAM,IAAS,EAAK,QAAQ,GACtB,IACF,MAAoB,SAAU,MAAoB,cAAc;KACpE,OACI,kBAAC,MAAD,EAAA,UACI,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAG,EAAO,MAAM,KAAU,EAAO,MAAM;MAClD,gBAAc,IAAS,SAAS,KAAA;MAChC,UAAU,EAAK;MACf,eAAe,EAAS,EAAK,GAAG;MALpC,UAAA,CAOI,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAxB,UAAA,CACK,EAAK,QAAQ,kBAAC,QAAD;QAAM,WAAW,EAAO;QAAO,UAAA,EAAK;OAAW,CAAA,GAC5D,EAAK,UAAU,KAAA,KACZ,kBAAC,QAAD;QAAM,WAAW,EAAO;QAAQ,UAAA,EAAK;OAAY,CAAA,CAEnD;MACL,CAAA,GAAA,KAAa,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAQ,UAAA,EAAK;MAAY,CAAA,CAC3D;KACR,CAAA,EAAA,GAhBK,EAAK,GAgBV;IAEZ,CAAC;GACD,CAAA;GACH,MAAW,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,UAAA;GAAY,CAAA;EACpE;;AAEb"}
+{"version":3,"file":"NavigationRail.js","names":["styles","NavigationRail_module_default","NavigationRail","props","cn","className","header","items","active","item","value","showLabel","labelVisibility","onChange","footer"],"sources":["../../../src/components/NavigationRail/NavigationRail.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./NavigationRail.module.css\";\n\nexport interface NavigationRailItem {\n    /** Unique identifier — used as React key and for value matching. */\n    key: string;\n    /** Visible label. */\n    label: ReactNode;\n    /** Icon rendered above the label. */\n    icon?: ReactNode;\n    /** Optional badge content rendered over the icon. */\n    badge?: ReactNode;\n    /** When true, the item is not selectable. */\n    disabled?: boolean;\n}\n\nexport type NavigationRailLabelVisibility = \"all\" | \"selected\" | \"none\";\n\nexport interface NavigationRailProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    items: NavigationRailItem[];\n    /** Selected key. */\n    value: string;\n    /** Called with the new selected key on click. */\n    onChange: (key: string) => void;\n    /** Top slot — e.g. a FAB or logo. */\n    header?: ReactNode;\n    /** Bottom slot — pushed to the bottom of the rail. */\n    footer?: ReactNode;\n    /** Which item labels to show. Default `\"all\"`. */\n    labelVisibility?: NavigationRailLabelVisibility;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * Vertical, compact navigation column for desktop and tablet layouts. Each item\n * stacks an icon over its label, with the active item flagged via\n * `aria-current=\"page\"`. Use `labelVisibility=\"selected\"` to show only the\n * active item's label, or `\"none\"` for an icon-only rail.\n *\n * @example\n * <NavigationRail\n *     header={<FloatingActionButton icon={<Plus />} position=\"none\" />}\n *     items={[\n *         { key: \"home\", label: \"Início\", icon: <Home /> },\n *         { key: \"inbox\", label: \"Caixa\", icon: <Inbox />, badge: 3 },\n *     ]}\n *     value={tab}\n *     onChange={setTab}\n * />\n */\nexport function NavigationRail({\n    items,\n    value,\n    onChange,\n    header,\n    footer,\n    labelVisibility = \"all\",\n    className,\n    ...props\n}: NavigationRailProps) {\n    return (\n        <nav className={cn(styles.rail, className)} aria-label=\"Navegação lateral\" {...props}>\n            {header !== undefined && <div className={styles.header}>{header}</div>}\n            <ul className={styles.list}>\n                {items.map((item) => {\n                    const active = item.key === value;\n                    const showLabel =\n                        labelVisibility === \"all\" || (labelVisibility === \"selected\" && active);\n                    return (\n                        <li key={item.key}>\n                            <button\n                                type=\"button\"\n                                className={cn(styles.item, active && styles.active)}\n                                aria-current={active ? \"page\" : undefined}\n                                disabled={item.disabled}\n                                onClick={() => onChange(item.key)}\n                            >\n                                <span className={styles.iconWrap}>\n                                    {item.icon && <span className={styles.icon}>{item.icon}</span>}\n                                    {item.badge !== undefined && (\n                                        <span className={styles.badge}>{item.badge}</span>\n                                    )}\n                                </span>\n                                {showLabel && <span className={styles.label}>{item.label}</span>}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n            {footer !== undefined && <div className={styles.footer}>{footer}</div>}\n        </nav>\n    );\n}\n"],"mappings":";;;;AAoDA,SAAgBE,EAAe,EAC3B,UACA,UACA,aACA,WACA,WACA,qBAAkB,OAClB,cACA,GAAGC,KACiB;CACpB,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGJ,EAAO,MAAMK,CAAS;EAAG,cAAW;EAAoB,GAAIF;EAA/E,UAAA;GACKG,MAAW,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAWN,EAAO;IAAS,UAAAM;GAAY,CAAA;GACrE,kBAAC,MAAD;IAAI,WAAWN,EAAO;IACjB,UAAAO,EAAM,KAAK,MAAS;KACjB,IAAMC,IAASC,EAAK,QAAQC,GACtBC,IACFC,MAAoB,SAAUA,MAAoB,cAAcJ;KACpE,OACI,kBAAC,MAAD,EAAA,UACI,kBAAC,UAAD;MACI,MAAK;MACL,WAAWJ,EAAGJ,EAAO,MAAMQ,KAAUR,EAAO,MAAM;MAClD,gBAAcQ,IAAS,SAAS,KAAA;MAChC,UAAUC,EAAK;MACf,eAAeI,EAASJ,EAAK,GAAG;MALpC,UAAA,CAOI,kBAAC,QAAD;OAAM,WAAWT,EAAO;OAAxB,UAAA,CACKS,EAAK,QAAQ,kBAAC,QAAD;QAAM,WAAWT,EAAO;QAAO,UAAAS,EAAK;OAAW,CAAA,GAC5DA,EAAK,UAAU,KAAA,KACZ,kBAAC,QAAD;QAAM,WAAWT,EAAO;QAAQ,UAAAS,EAAK;OAAY,CAAA,CAEnD;MACL,CAAA,GAAAE,KAAa,kBAAC,QAAD;OAAM,WAAWX,EAAO;OAAQ,UAAAS,EAAK;MAAY,CAAA,CAC3D;KACR,CAAA,EAAA,GAhBKA,EAAK,GAgBV;IAEZ,CAAC;GACD,CAAA;GACHK,MAAW,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAWd,EAAO;IAAS,UAAAc;GAAY,CAAA;EACpE;;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationRail.module.cjs","names":[],"sources":["../../../src/components/NavigationRail/NavigationRail.module.css"],"sourcesContent":[".rail {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 80px;\n    height: 100%;\n    padding: var(--tempest-space-3) var(--tempest-space-2);\n    background: var(--tempest-surface);\n    border-right: 1px solid var(--tempest-border);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-bottom: var(--tempest-space-2);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-top: auto;\n    padding-top: var(--tempest-space-2);\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-1);\n    background: none;\n    border: 0;\n    border-radius: var(--tempest-radius-md);\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition:\n        color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out),\n        background var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n}\n\n.item:hover {\n    color: var(--tempest-text);\n    background: var(--tempest-surface-2);\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width, 2px) solid\n        var(--tempest-focus-ring-color, currentColor);\n    outline-offset: var(--tempest-focus-ring-offset, 2px);\n}\n\n.item.active {\n    color: var(--tempest-primary-on-soft);\n    background: var(--tempest-primary-soft);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 24px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on-solid);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n    text-align: center;\n}\n"],"mappings":";"}
+{"version":3,"file":"NavigationRail.module.cjs","names":["rail","header","list","footer","item","active","iconWrap","icon","badge","label","NavigationRail_module_default"],"sources":["../../../src/components/NavigationRail/NavigationRail.module.css"],"sourcesContent":[".rail {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 80px;\n    height: 100%;\n    padding: var(--tempest-space-3) var(--tempest-space-2);\n    background: var(--tempest-surface);\n    border-right: 1px solid var(--tempest-border);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-bottom: var(--tempest-space-2);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-top: auto;\n    padding-top: var(--tempest-space-2);\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-1);\n    background: none;\n    border: 0;\n    border-radius: var(--tempest-radius-md);\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition:\n        color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out),\n        background var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n}\n\n.item:hover {\n    color: var(--tempest-text);\n    background: var(--tempest-surface-2);\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width, 2px) solid\n        var(--tempest-focus-ring-color, currentColor);\n    outline-offset: var(--tempest-focus-ring-offset, 2px);\n}\n\n.item.active {\n    color: var(--tempest-primary-on-soft);\n    background: var(--tempest-primary-soft);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 24px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on-solid);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n    text-align: center;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationRail.module.js","names":[],"sources":["../../../src/components/NavigationRail/NavigationRail.module.css"],"sourcesContent":[".rail {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 80px;\n    height: 100%;\n    padding: var(--tempest-space-3) var(--tempest-space-2);\n    background: var(--tempest-surface);\n    border-right: 1px solid var(--tempest-border);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-bottom: var(--tempest-space-2);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-top: auto;\n    padding-top: var(--tempest-space-2);\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-1);\n    background: none;\n    border: 0;\n    border-radius: var(--tempest-radius-md);\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition:\n        color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out),\n        background var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n}\n\n.item:hover {\n    color: var(--tempest-text);\n    background: var(--tempest-surface-2);\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width, 2px) solid\n        var(--tempest-focus-ring-color, currentColor);\n    outline-offset: var(--tempest-focus-ring-offset, 2px);\n}\n\n.item.active {\n    color: var(--tempest-primary-on-soft);\n    background: var(--tempest-primary-soft);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 24px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on-solid);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n    text-align: center;\n}\n"],"mappings":";"}
+{"version":3,"file":"NavigationRail.module.js","names":["rail","header","list","footer","item","active","iconWrap","icon","badge","label","NavigationRail_module_default"],"sources":["../../../src/components/NavigationRail/NavigationRail.module.css"],"sourcesContent":[".rail {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 80px;\n    height: 100%;\n    padding: var(--tempest-space-3) var(--tempest-space-2);\n    background: var(--tempest-surface);\n    border-right: 1px solid var(--tempest-border);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-bottom: var(--tempest-space-2);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--tempest-space-1);\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin-top: auto;\n    padding-top: var(--tempest-space-2);\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-1);\n    background: none;\n    border: 0;\n    border-radius: var(--tempest-radius-md);\n    cursor: pointer;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-2xs);\n    transition:\n        color var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out),\n        background var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n}\n\n.item:hover {\n    color: var(--tempest-text);\n    background: var(--tempest-surface-2);\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width, 2px) solid\n        var(--tempest-focus-ring-color, currentColor);\n    outline-offset: var(--tempest-focus-ring-offset, 2px);\n}\n\n.item.active {\n    color: var(--tempest-primary-on-soft);\n    background: var(--tempest-primary-soft);\n}\n\n.item:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.iconWrap {\n    position: relative;\n    display: inline-flex;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    font-size: 24px;\n}\n\n.badge {\n    position: absolute;\n    top: -4px;\n    right: -8px;\n    min-width: 14px;\n    height: 14px;\n    padding: 0 4px;\n    border-radius: var(--tempest-radius-full);\n    background: var(--tempest-danger-solid);\n    color: var(--tempest-danger-on-solid);\n    font-size: 10px;\n    line-height: 14px;\n    text-align: center;\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.label {\n    line-height: 1;\n    text-align: center;\n}\n"],"mappings":";"}

package/dist/components/NotificationCenter/NotificationCenter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — an inbox has four actions the app\n * must implement (onSelect, onMarkRead, onMarkAllRead, onDismiss) over one list,\n * plus the presentation it needs to render a readable feed: renderIcon, locale, now\n * for relative timestamps, emptyState and title.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"NotificationCenter.cjs","names":["cn","styles","Badge","EmptyState","_Fragment","relativeTime","require_cn","require_Badge","require_EmptyState","require_relative_time","require_NotificationCenter_module","react_jsx_runtime","NotificationCenter","rest","unreadCount","items","item","reference","now","activate","onMarkRead","onSelect","interactive","className","title","onMarkAllRead","emptyState","renderIcon","onDismiss"],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — an inbox has four actions the app\n * must implement (onSelect, onMarkRead, onMarkAllRead, onDismiss) over one list,\n * plus the presentation it needs to render a readable feed: renderIcon, locale, now\n * for relative timestamps, emptyState and title.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/NotificationCenter/NotificationCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — an inbox has four actions the app\n * must implement (onSelect, onMarkRead, onMarkAllRead, onDismiss) over one list,\n * plus the presentation it needs to render a readable feed: renderIcon, locale, now\n * for relative timestamps, emptyState and title.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAmFA,SAAgB,EAAmB,EAC/B,UACA,WAAQ,gBACR,aACA,eACA,kBACA,cACA,eACA,YAAS,SACT,eACA,QACA,cACA,GAAG,KACqB;CACxB,IAAM,IAAc,EAAM,QAAQ,MAAS,CAAC,EAAK,IAAI,CAAC,CAAC,QACjD,IAAY,sBAAO,IAAI,KAAK,EAAA,CAAE,QAAQ,GAStC,KAAY,MAAiC;EAE/C,AADK,EAAK,QAAM,IAAa,EAAK,EAAE,GACpC,IAAW,CAAI;CACnB,GAEM,IAAc,GAAQ,KAAY;CAExC,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,GAAI;EAAjD,UAAA,EACM,KAAU,KAAiB,IAAc,MACvC,kBAAC,UAAD;GAAQ,WAAW,EAAO;GAA1B,UAAA,CACK,IACG,kBAAC,MAAD;IAAI,WAAW,EAAO;IAAtB,UAAA,CACK,GACA,IAAc,KACX,kBAAC,GAAD;KAAO,SAAQ;KAAU,cAAY,GAAG,EAAY;KAC/C,UAAA;IACE,CAAA,CAEX;GAEJ,CAAA,IAAA,kBAAC,QAAD,CAAO,CAAA,GAEV,KAAiB,IAAc,KAC5B,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;IACZ,UAAA;GAEO,CAAA,CAER;EAGX,CAAA,GAAA,EAAM,WAAW,IACb,KAAc,kBAAC,GAAD,EAAY,OAAM,sBAAuB,CAAA,IAExD,kBAAC,MAAD;GAAI,WAAW,EAAO;GACjB,UAAA,EAAM,KAAK,MACR,kBAAC,MAAD;IAEI,WAAW,EAAG,EAAO,MAAM,CAAC,EAAK,QAAQ,EAAO,MAAM;IACtD,gBAAe,EAAK,OAAgB,KAAA,IAAT;IAH/B,UAAA;KAKK,KAAc,kBAAC,QAAD;MAAM,WAAW,EAAO;MAAO,UAAA,EAAW,CAAI;KAAQ,CAAA;KAErE,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAvB,UAAA,CACK,IACG,kBAAC,UAAD;OACI,MAAK;OACL,WAAW,EAAO;OAClB,eAAe,EAAS,CAAI;OAHhC,UAAA,CAKI,kBAAC,QAAD;QAAM,WAAW,EAAO;QAAY,UAAA,EAAK;OAAY,CAAA,GACpD,EAAK,QACF,kBAAC,QAAD;QAAM,WAAW,EAAO;QAAW,UAAA,EAAK;OAAW,CAAA,CAEnD;MAER,CAAA,IAAA,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAY,UAAA,EAAK;MAAY,CAAA,GACpD,EAAK,QACF,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAW,UAAA,EAAK;MAAW,CAAA,CAEzD,EAAA,CAAA,GAEN,kBAAC,QAAD;OACI,WAAW,EAAO;OAClB,UAAU,IAAI,KAAK,EAAK,UAAU,CAAC,CAAC,YAAY;OAE/C,UAAA,EAAa,EAAK,YAAY;QAAE;QAAQ,KAAK;OAAU,CAAC;MACvD,CAAA,CACL;;KAEJ,KACG,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,EAAU,EAAK,EAAE;MAChC,cAAY,cAAc,EAAK;MAClC,UAAA;KAEO,CAAA;IAEZ;GA5CK,GAAA,EAAK,EA4CV,CACP;EACD,CAAA,CAEP;;AAEb"}
+{"version":3,"file":"NotificationCenter.js","names":["styles","_Fragment","NotificationCenter_module_default","NotificationCenter","rest","unreadCount","items","item","reference","now","activate","onMarkRead","onSelect","interactive","cn","className","title","onMarkAllRead","Badge","emptyState","EmptyState","renderIcon","Fragment","relativeTime","onDismiss"],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — an inbox has four actions the app\n * must implement (onSelect, onMarkRead, onMarkAllRead, onDismiss) over one list,\n * plus the presentation it needs to render a readable feed: renderIcon, locale, now\n * for relative timestamps, emptyState and title.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAmFA,SAAgBG,EAAmB,EAC/B,UACA,WAAQ,gBACR,aACA,eACA,kBACA,cACA,eACA,YAAS,SACT,eACA,QACA,cACA,GAAGC,KACqB;CACxB,IAAMC,IAAcC,EAAM,QAAQ,MAAS,CAACC,EAAK,IAAI,CAAC,CAAC,QACjDC,IAAYC,sBAAO,IAAI,KAAK,EAAA,CAAE,QAAQ,GAStCC,KAAY,MAAiC;EAE/C,AADKH,EAAK,QAAMI,IAAaJ,EAAK,EAAE,GACpCK,IAAWL,CAAI;CACnB,GAEMM,IAAc,GAAQD,KAAYD;CAExC,OACI,kBAAC,OAAD;EAAK,WAAWG,EAAGd,EAAO,OAAOe,CAAS;EAAG,GAAIX;EAAjD,UAAA,EACMY,KAAUC,KAAiBZ,IAAc,MACvC,kBAAC,UAAD;GAAQ,WAAWL,EAAO;GAA1B,UAAA,CACKgB,IACG,kBAAC,MAAD;IAAI,WAAWhB,EAAO;IAAtB,UAAA,CACKgB,GACAX,IAAc,KACX,kBAACa,GAAD;KAAO,SAAQ;KAAU,cAAY,GAAGb,EAAY;KAC/C,UAAAA;IACE,CAAA,CAEX;GAEJ,CAAA,IAAA,kBAAC,QAAD,CAAO,CAAA,GAEVY,KAAiBZ,IAAc,KAC5B,kBAAC,UAAD;IACI,MAAK;IACL,WAAWL,EAAO;IAClB,SAASiB;IACZ,UAAA;GAEO,CAAA,CAER;EAGX,CAAA,GAAAX,EAAM,WAAW,IACba,KAAc,kBAACC,GAAD,EAAY,OAAM,sBAAuB,CAAA,IAExD,kBAAC,MAAD;GAAI,WAAWpB,EAAO;GACjB,UAAAM,EAAM,KAAK,MACR,kBAAC,MAAD;IAEI,WAAWQ,EAAGd,EAAO,MAAM,CAACO,EAAK,QAAQP,EAAO,MAAM;IACtD,gBAAeO,EAAK,OAAgB,KAAA,IAAT;IAH/B,UAAA;KAKKc,KAAc,kBAAC,QAAD;MAAM,WAAWrB,EAAO;MAAO,UAAAqB,EAAWd,CAAI;KAAQ,CAAA;KAErE,kBAAC,OAAD;MAAK,WAAWP,EAAO;MAAvB,UAAA,CACKa,IACG,kBAAC,UAAD;OACI,MAAK;OACL,WAAWb,EAAO;OAClB,eAAeU,EAASH,CAAI;OAHhC,UAAA,CAKI,kBAAC,QAAD;QAAM,WAAWP,EAAO;QAAY,UAAAO,EAAK;OAAY,CAAA,GACpDA,EAAK,QACF,kBAAC,QAAD;QAAM,WAAWP,EAAO;QAAW,UAAAO,EAAK;OAAW,CAAA,CAEnD;MAER,CAAA,IAAA,kBAAAN,GAAA,EAAA,UAAA,CACI,kBAAC,QAAD;OAAM,WAAWD,EAAO;OAAY,UAAAO,EAAK;MAAY,CAAA,GACpDA,EAAK,QACF,kBAAC,QAAD;OAAM,WAAWP,EAAO;OAAW,UAAAO,EAAK;MAAW,CAAA,CAEzD,EAAA,CAAA,GAEN,kBAAC,QAAD;OACI,WAAWP,EAAO;OAClB,UAAU,IAAI,KAAKO,EAAK,UAAU,CAAC,CAAC,YAAY;OAE/C,UAAAgB,EAAahB,EAAK,YAAY;QAAE;QAAQ,KAAKC;OAAU,CAAC;MACvD,CAAA,CACL;;KAEJgB,KACG,kBAAC,UAAD;MACI,MAAK;MACL,WAAWxB,EAAO;MAClB,eAAewB,EAAUjB,EAAK,EAAE;MAChC,cAAY,cAAcA,EAAK;MAClC,UAAA;KAEO,CAAA;IAEZ;GA5CK,GAAAA,EAAK,EA4CV,CACP;EACD,CAAA,CAEP;;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.module.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\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-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\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    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss: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"],"mappings":";"}
+{"version":3,"file":"NotificationCenter.module.cjs","names":["panel","header","title","headerAction","list","item","unread","icon","body","trigger","itemTitle","itemBody","time","dismiss","NotificationCenter_module_default"],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\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-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\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    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss: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"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.module.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\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-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\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    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss: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"],"mappings":";"}
+{"version":3,"file":"NotificationCenter.module.js","names":["panel","header","title","headerAction","list","item","unread","icon","body","trigger","itemTitle","itemBody","time","dismiss","NotificationCenter_module_default"],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\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-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\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    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss: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"],"mappings":";"}

package/dist/components/NotificationCenter/use-notification-inbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-notification-inbox.cjs","names":[],"sources":["../../../src/components/NotificationCenter/use-notification-inbox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\n/** One entry in the inbox. */\nexport interface NotificationItem {\n    /** Stable id. Re-adding an existing id updates that entry instead of duplicating it. */\n    id: string;\n    title: string;\n    /** Body text. Optional — a title-only notification is a legitimate shape. */\n    body?: string;\n    /** Epoch milliseconds. Used for ordering and for the relative timestamp. */\n    receivedAt: number;\n    read?: boolean;\n    /** Where activating the notification should take the user. */\n    url?: string;\n    /** Free-form payload the app passes through, e.g. the entity it refers to. */\n    data?: Record<string, unknown>;\n}\n\nexport interface UseNotificationInboxOptions {\n    /** Entries the inbox starts with — typically what the API returned. */\n    initialItems?: readonly NotificationItem[];\n    /**\n     * Listen for `message` events from the service worker and add whatever\n     * arrives. Default `true`.\n     *\n     * This is the missing half of web push: a service worker runs outside the\n     * page and cannot touch React state, so a push that arrives while the app is\n     * open shows an OS notification and then vanishes as far as the UI is\n     * concerned. Have the worker `postMessage` the payload and it lands here.\n     */\n    listenToServiceWorker?: boolean;\n    /**\n     * Message `type` to accept from the worker. Default `\"tempest:notification\"`.\n     *\n     * Filtering by type matters because the SW message channel is shared — a\n     * sync-progress ping or a cache-updated notice would otherwise show up in the\n     * user's inbox.\n     */\n    messageType?: string;\n    /**\n     * Cap on stored entries; the oldest are dropped past it. Default `100`.\n     *\n     * An inbox fed by push grows without bound otherwise, and it lives in memory.\n     */\n    limit?: number;\n    /** Called whenever the list changes — the hook for persisting it. */\n    onChange?: (items: readonly NotificationItem[]) => void;\n}\n\nexport interface UseNotificationInboxResult {\n    items: NotificationItem[];\n    unreadCount: number;\n    /** Add an entry, or update the existing one with the same id. */\n    add: (item: NotificationItem) => void;\n    markRead: (id: string) => void;\n    markUnread: (id: string) => void;\n    markAllRead: () => void;\n    remove: (id: string) => void;\n    clear: () => void;\n}\n\n/** Coerce an unknown service-worker payload into an inbox entry. */\nfunction toItem(payload: Record<string, unknown>, index: number): NotificationItem | null {\n    const title = typeof payload.title === \"string\" ? payload.title : null;\n    if (!title) return null;\n    return {\n        id: typeof payload.id === \"string\" ? payload.id : `sw-${payload.tag ?? index}-${title}`,\n        title,\n        body: typeof payload.body === \"string\" ? payload.body : undefined,\n        receivedAt:\n            typeof payload.receivedAt === \"number\" ? payload.receivedAt : new Date().getTime(),\n        url: typeof payload.url === \"string\" ? payload.url : undefined,\n        data: (payload.data as Record<string, unknown> | undefined) ?? undefined,\n        read: false,\n    };\n}\n\n/**\n * Client-side inbox state for received notifications.\n *\n * Newest first, deduplicated by `id`, capped at `limit`. Pairs with\n * `NotificationCenter` for the UI and with the `push` module for the source:\n * point a service worker's `postMessage` at it and a push that arrives while the\n * app is open shows up in the inbox instead of only as an OS notification.\n *\n * Persistence is deliberately left out — where an inbox belongs (server, Dexie,\n * `localStorage`) is an app decision. Use `onChange` to write it wherever it goes,\n * and `initialItems` to read it back.\n *\n * @example\n * const inbox = useNotificationInbox({\n *     initialItems: await api.notifications.list(),\n *     onChange: (items) => storage.set(\"inbox\", items),\n * });\n *\n * <NotificationCenter\n *     items={inbox.items}\n *     onMarkRead={inbox.markRead}\n *     onMarkAllRead={inbox.markAllRead}\n *     onDismiss={inbox.remove}\n * />\n */\nexport function useNotificationInbox(\n    options: UseNotificationInboxOptions = {},\n): UseNotificationInboxResult {\n    const {\n        initialItems = [],\n        listenToServiceWorker = true,\n        messageType = \"tempest:notification\",\n        limit = 100,\n        onChange,\n    } = options;\n\n    const [items, setItems] = useState<NotificationItem[]>(() =>\n        [...initialItems].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, limit),\n    );\n\n    const update = useCallback(\n        (next: (current: NotificationItem[]) => NotificationItem[]) => {\n            setItems((current) => {\n                const result = next(current);\n                onChange?.(result);\n                return result;\n            });\n        },\n        [onChange],\n    );\n\n    const add = useCallback(\n        (item: NotificationItem) => {\n            update((current) => {\n                const without = current.filter((entry) => entry.id !== item.id);\n                return [item, ...without]\n                    .sort((a, b) => b.receivedAt - a.receivedAt)\n                    .slice(0, limit);\n            });\n        },\n        [update, limit],\n    );\n\n    const setRead = useCallback(\n        (id: string, read: boolean) => {\n            update((current) =>\n                current.map((entry) => (entry.id === id ? { ...entry, read } : entry)),\n            );\n        },\n        [update],\n    );\n\n    const markRead = useCallback((id: string) => setRead(id, true), [setRead]);\n    const markUnread = useCallback((id: string) => setRead(id, false), [setRead]);\n\n    const markAllRead = useCallback(() => {\n        update((current) => current.map((entry) => ({ ...entry, read: true })));\n    }, [update]);\n\n    const remove = useCallback(\n        (id: string) => {\n            update((current) => current.filter((entry) => entry.id !== id));\n        },\n        [update],\n    );\n\n    const clear = useCallback(() => update(() => []), [update]);\n\n    useEffect(() => {\n        if (!listenToServiceWorker) return;\n        if (typeof navigator === \"undefined\" || !navigator.serviceWorker) return;\n\n        /**\n         * Captured, not re-read in the cleanup.\n         *\n         * Looking `navigator.serviceWorker` up again at teardown throws if it is\n         * gone by then, and the listener would leak either way — the container has\n         * to be the same object the listener was added to.\n         */\n        const container = navigator.serviceWorker;\n\n        const handler = (event: MessageEvent) => {\n            const payload = event.data as Record<string, unknown> | null;\n            if (!payload || payload.type !== messageType) return;\n            const raw = (payload.notification ?? payload.payload ?? payload) as Record<\n                string,\n                unknown\n            >;\n            const item = toItem(raw, 0);\n            if (item) add(item);\n        };\n\n        container.addEventListener(\"message\", handler);\n        return () => container.removeEventListener(\"message\", handler);\n    }, [listenToServiceWorker, messageType, add]);\n\n    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);\n\n    return { items, unreadCount, add, markRead, markUnread, markAllRead, remove, clear };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-notification-inbox.cjs","names":["useState","useCallback","useMemo","react","toItem","title","payload","index","useNotificationInbox","options","items","setItems","initialItems","b","a","limit","update","result","next","current","onChange","add","item","entry","setRead","id","markRead","markUnread","markAllRead","remove","clear","listenToServiceWorker","container","handler","event","messageType"],"sources":["../../../src/components/NotificationCenter/use-notification-inbox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\n/** One entry in the inbox. */\nexport interface NotificationItem {\n    /** Stable id. Re-adding an existing id updates that entry instead of duplicating it. */\n    id: string;\n    title: string;\n    /** Body text. Optional — a title-only notification is a legitimate shape. */\n    body?: string;\n    /** Epoch milliseconds. Used for ordering and for the relative timestamp. */\n    receivedAt: number;\n    read?: boolean;\n    /** Where activating the notification should take the user. */\n    url?: string;\n    /** Free-form payload the app passes through, e.g. the entity it refers to. */\n    data?: Record<string, unknown>;\n}\n\nexport interface UseNotificationInboxOptions {\n    /** Entries the inbox starts with — typically what the API returned. */\n    initialItems?: readonly NotificationItem[];\n    /**\n     * Listen for `message` events from the service worker and add whatever\n     * arrives. Default `true`.\n     *\n     * This is the missing half of web push: a service worker runs outside the\n     * page and cannot touch React state, so a push that arrives while the app is\n     * open shows an OS notification and then vanishes as far as the UI is\n     * concerned. Have the worker `postMessage` the payload and it lands here.\n     */\n    listenToServiceWorker?: boolean;\n    /**\n     * Message `type` to accept from the worker. Default `\"tempest:notification\"`.\n     *\n     * Filtering by type matters because the SW message channel is shared — a\n     * sync-progress ping or a cache-updated notice would otherwise show up in the\n     * user's inbox.\n     */\n    messageType?: string;\n    /**\n     * Cap on stored entries; the oldest are dropped past it. Default `100`.\n     *\n     * An inbox fed by push grows without bound otherwise, and it lives in memory.\n     */\n    limit?: number;\n    /** Called whenever the list changes — the hook for persisting it. */\n    onChange?: (items: readonly NotificationItem[]) => void;\n}\n\nexport interface UseNotificationInboxResult {\n    items: NotificationItem[];\n    unreadCount: number;\n    /** Add an entry, or update the existing one with the same id. */\n    add: (item: NotificationItem) => void;\n    markRead: (id: string) => void;\n    markUnread: (id: string) => void;\n    markAllRead: () => void;\n    remove: (id: string) => void;\n    clear: () => void;\n}\n\n/** Coerce an unknown service-worker payload into an inbox entry. */\nfunction toItem(payload: Record<string, unknown>, index: number): NotificationItem | null {\n    const title = typeof payload.title === \"string\" ? payload.title : null;\n    if (!title) return null;\n    return {\n        id: typeof payload.id === \"string\" ? payload.id : `sw-${payload.tag ?? index}-${title}`,\n        title,\n        body: typeof payload.body === \"string\" ? payload.body : undefined,\n        receivedAt:\n            typeof payload.receivedAt === \"number\" ? payload.receivedAt : new Date().getTime(),\n        url: typeof payload.url === \"string\" ? payload.url : undefined,\n        data: (payload.data as Record<string, unknown> | undefined) ?? undefined,\n        read: false,\n    };\n}\n\n/**\n * Client-side inbox state for received notifications.\n *\n * Newest first, deduplicated by `id`, capped at `limit`. Pairs with\n * `NotificationCenter` for the UI and with the `push` module for the source:\n * point a service worker's `postMessage` at it and a push that arrives while the\n * app is open shows up in the inbox instead of only as an OS notification.\n *\n * Persistence is deliberately left out — where an inbox belongs (server, Dexie,\n * `localStorage`) is an app decision. Use `onChange` to write it wherever it goes,\n * and `initialItems` to read it back.\n *\n * @example\n * const inbox = useNotificationInbox({\n *     initialItems: await api.notifications.list(),\n *     onChange: (items) => storage.set(\"inbox\", items),\n * });\n *\n * <NotificationCenter\n *     items={inbox.items}\n *     onMarkRead={inbox.markRead}\n *     onMarkAllRead={inbox.markAllRead}\n *     onDismiss={inbox.remove}\n * />\n */\nexport function useNotificationInbox(\n    options: UseNotificationInboxOptions = {},\n): UseNotificationInboxResult {\n    const {\n        initialItems = [],\n        listenToServiceWorker = true,\n        messageType = \"tempest:notification\",\n        limit = 100,\n        onChange,\n    } = options;\n\n    const [items, setItems] = useState<NotificationItem[]>(() =>\n        [...initialItems].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, limit),\n    );\n\n    const update = useCallback(\n        (next: (current: NotificationItem[]) => NotificationItem[]) => {\n            setItems((current) => {\n                const result = next(current);\n                onChange?.(result);\n                return result;\n            });\n        },\n        [onChange],\n    );\n\n    const add = useCallback(\n        (item: NotificationItem) => {\n            update((current) => {\n                const without = current.filter((entry) => entry.id !== item.id);\n                return [item, ...without]\n                    .sort((a, b) => b.receivedAt - a.receivedAt)\n                    .slice(0, limit);\n            });\n        },\n        [update, limit],\n    );\n\n    const setRead = useCallback(\n        (id: string, read: boolean) => {\n            update((current) =>\n                current.map((entry) => (entry.id === id ? { ...entry, read } : entry)),\n            );\n        },\n        [update],\n    );\n\n    const markRead = useCallback((id: string) => setRead(id, true), [setRead]);\n    const markUnread = useCallback((id: string) => setRead(id, false), [setRead]);\n\n    const markAllRead = useCallback(() => {\n        update((current) => current.map((entry) => ({ ...entry, read: true })));\n    }, [update]);\n\n    const remove = useCallback(\n        (id: string) => {\n            update((current) => current.filter((entry) => entry.id !== id));\n        },\n        [update],\n    );\n\n    const clear = useCallback(() => update(() => []), [update]);\n\n    useEffect(() => {\n        if (!listenToServiceWorker) return;\n        if (typeof navigator === \"undefined\" || !navigator.serviceWorker) return;\n\n        /**\n         * Captured, not re-read in the cleanup.\n         *\n         * Looking `navigator.serviceWorker` up again at teardown throws if it is\n         * gone by then, and the listener would leak either way — the container has\n         * to be the same object the listener was added to.\n         */\n        const container = navigator.serviceWorker;\n\n        const handler = (event: MessageEvent) => {\n            const payload = event.data as Record<string, unknown> | null;\n            if (!payload || payload.type !== messageType) return;\n            const raw = (payload.notification ?? payload.payload ?? payload) as Record<\n                string,\n                unknown\n            >;\n            const item = toItem(raw, 0);\n            if (item) add(item);\n        };\n\n        container.addEventListener(\"message\", handler);\n        return () => container.removeEventListener(\"message\", handler);\n    }, [listenToServiceWorker, messageType, add]);\n\n    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);\n\n    return { items, unreadCount, add, markRead, markUnread, markAllRead, remove, clear };\n}\n"],"mappings":"A,uBA8DA,SAASI,EAAO,EAAkC,EAAwC,CACtF,IAAMC,EAAQ,OAAOC,EAAQ,OAAU,SAAWA,EAAQ,MAAQ,KAElE,OADKD,EACE,CACH,GAAI,OAAOC,EAAQ,IAAO,SAAWA,EAAQ,GAAK,MAAMA,EAAQ,KAAOC,EAAM,GAAGF,IAChF,QACA,KAAM,OAAOC,EAAQ,MAAS,SAAWA,EAAQ,KAAO,IAAA,GACxD,WACI,OAAOA,EAAQ,YAAe,SAAWA,EAAQ,WAAa,IAAI,KAAK,CAAA,CAAE,QAAQ,EACrF,IAAK,OAAOA,EAAQ,KAAQ,SAAWA,EAAQ,IAAM,IAAA,GACrD,KAAOA,EAAQ,MAAgD,IAAA,GAC/D,KAAM,EACV,EAVmB,IAWvB,CA2BA,SAAgBE,EACZ,EAAuC,CAAC,EACd,CAC1B,GAAM,CACF,eAAe,CAAC,EAChB,wBAAwB,GACxB,cAAc,uBACd,QAAQ,IACR,YACAC,EAEE,CAACC,EAAOC,IAAA,EAAYX,EAAAA,SAAAA,KACtB,CAAC,GAAGY,CAAY,CAAC,CAAC,MAAM,EAAG,IAAMC,EAAE,WAAaC,EAAE,UAAU,CAAC,CAAC,MAAM,EAAGC,CAAK,CAChF,EAEMC,GAAA,EAASf,EAAAA,YAAAA,CACV,GAA8D,CAC3DU,EAAU,GAAY,CAClB,IAAMM,EAASC,EAAKC,CAAO,EAE3B,OADAC,IAAWH,CAAM,EACVA,CACX,CAAC,CACL,EACA,CAACG,CAAQ,CACb,EAEMC,GAAA,EAAMpB,EAAAA,YAAAA,CACP,GAA2B,CACxBe,EAAQ,GAEG,CAACM,EAAM,GADEH,EAAQ,OAAQ,GAAUI,EAAM,KAAOD,EAAK,EAC3C,CAAO,CAAC,CACpB,MAAM,EAAG,IAAMT,EAAE,WAAaC,EAAE,UAAU,CAAC,CAC3C,MAAM,EAAGC,CAAK,CACtB,CACL,EACA,CAACC,EAAQD,CAAK,CAClB,EAEMS,GAAA,EAAUvB,EAAAA,YAAAA,EACX,EAAY,IAAkB,CAC3Be,EAAQ,GACJG,EAAQ,IAAK,GAAWI,EAAM,KAAOE,EAAK,CAAE,GAAGF,EAAO,MAAK,EAAIA,CAAM,CACzE,CACJ,EACA,CAACP,CAAM,CACX,EAEMU,GAAA,EAAWzB,EAAAA,YAAAA,CAAa,GAAeuB,EAAQC,EAAI,EAAI,EAAG,CAACD,CAAO,CAAC,EACnEG,GAAA,EAAa1B,EAAAA,YAAAA,CAAa,GAAeuB,EAAQC,EAAI,EAAK,EAAG,CAACD,CAAO,CAAC,EAEtEI,GAAA,EAAc3B,EAAAA,YAAAA,KAAkB,CAClCe,EAAQ,GAAYG,EAAQ,IAAK,IAAW,CAAE,GAAGI,EAAO,KAAM,EAAK,EAAE,CAAC,CAC1E,EAAG,CAACP,CAAM,CAAC,EAELa,GAAA,EAAS5B,EAAAA,YAAAA,CACV,GAAe,CACZe,EAAQ,GAAYG,EAAQ,OAAQ,GAAUI,EAAM,KAAOE,CAAE,CAAC,CAClE,EACA,CAACT,CAAM,CACX,EAEMc,GAAA,EAAQ7B,EAAAA,YAAAA,KAAkBe,MAAa,CAAC,CAAC,EAAG,CAACA,CAAM,CAAC,EAgC1D,OA9BA,EAAAb,EAAA,UAAA,KAAgB,CAEZ,GADI,CAAC4B,GACD,OAAO,UAAc,KAAe,CAAC,UAAU,cAAe,OASlE,IAAMC,EAAY,UAAU,cAEtBC,EAAW,GAAwB,CACrC,IAAM3B,EAAU4B,EAAM,KACtB,GAAI,CAAC5B,GAAWA,EAAQ,OAAS6B,EAAa,OAK9C,IAAMb,EAAOlB,EAJAE,EAAQ,cAAgBA,EAAQ,SAAWA,EAI/B,CAAC,EACtBgB,GAAMD,EAAIC,CAAI,CACtB,EAGA,OADAU,EAAU,iBAAiB,UAAWC,CAAO,MAChCD,EAAU,oBAAoB,UAAWC,CAAO,CACjE,EAAG,CAACF,EAAuBI,EAAad,CAAG,CAAC,EAIrC,CAAE,QAAO,aAAA,EAFInB,EAAAA,QAAAA,KAAcQ,EAAM,OAAQ,GAAS,CAACY,EAAK,IAAI,CAAC,CAAC,OAAQ,CAACZ,CAAK,CAEnE,EAAa,MAAK,WAAU,aAAY,cAAa,SAAQ,OAAM,CACvF,C"}

package/dist/components/NotificationCenter/use-notification-inbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-notification-inbox.js","names":[],"sources":["../../../src/components/NotificationCenter/use-notification-inbox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\n/** One entry in the inbox. */\nexport interface NotificationItem {\n    /** Stable id. Re-adding an existing id updates that entry instead of duplicating it. */\n    id: string;\n    title: string;\n    /** Body text. Optional — a title-only notification is a legitimate shape. */\n    body?: string;\n    /** Epoch milliseconds. Used for ordering and for the relative timestamp. */\n    receivedAt: number;\n    read?: boolean;\n    /** Where activating the notification should take the user. */\n    url?: string;\n    /** Free-form payload the app passes through, e.g. the entity it refers to. */\n    data?: Record<string, unknown>;\n}\n\nexport interface UseNotificationInboxOptions {\n    /** Entries the inbox starts with — typically what the API returned. */\n    initialItems?: readonly NotificationItem[];\n    /**\n     * Listen for `message` events from the service worker and add whatever\n     * arrives. Default `true`.\n     *\n     * This is the missing half of web push: a service worker runs outside the\n     * page and cannot touch React state, so a push that arrives while the app is\n     * open shows an OS notification and then vanishes as far as the UI is\n     * concerned. Have the worker `postMessage` the payload and it lands here.\n     */\n    listenToServiceWorker?: boolean;\n    /**\n     * Message `type` to accept from the worker. Default `\"tempest:notification\"`.\n     *\n     * Filtering by type matters because the SW message channel is shared — a\n     * sync-progress ping or a cache-updated notice would otherwise show up in the\n     * user's inbox.\n     */\n    messageType?: string;\n    /**\n     * Cap on stored entries; the oldest are dropped past it. Default `100`.\n     *\n     * An inbox fed by push grows without bound otherwise, and it lives in memory.\n     */\n    limit?: number;\n    /** Called whenever the list changes — the hook for persisting it. */\n    onChange?: (items: readonly NotificationItem[]) => void;\n}\n\nexport interface UseNotificationInboxResult {\n    items: NotificationItem[];\n    unreadCount: number;\n    /** Add an entry, or update the existing one with the same id. */\n    add: (item: NotificationItem) => void;\n    markRead: (id: string) => void;\n    markUnread: (id: string) => void;\n    markAllRead: () => void;\n    remove: (id: string) => void;\n    clear: () => void;\n}\n\n/** Coerce an unknown service-worker payload into an inbox entry. */\nfunction toItem(payload: Record<string, unknown>, index: number): NotificationItem | null {\n    const title = typeof payload.title === \"string\" ? payload.title : null;\n    if (!title) return null;\n    return {\n        id: typeof payload.id === \"string\" ? payload.id : `sw-${payload.tag ?? index}-${title}`,\n        title,\n        body: typeof payload.body === \"string\" ? payload.body : undefined,\n        receivedAt:\n            typeof payload.receivedAt === \"number\" ? payload.receivedAt : new Date().getTime(),\n        url: typeof payload.url === \"string\" ? payload.url : undefined,\n        data: (payload.data as Record<string, unknown> | undefined) ?? undefined,\n        read: false,\n    };\n}\n\n/**\n * Client-side inbox state for received notifications.\n *\n * Newest first, deduplicated by `id`, capped at `limit`. Pairs with\n * `NotificationCenter` for the UI and with the `push` module for the source:\n * point a service worker's `postMessage` at it and a push that arrives while the\n * app is open shows up in the inbox instead of only as an OS notification.\n *\n * Persistence is deliberately left out — where an inbox belongs (server, Dexie,\n * `localStorage`) is an app decision. Use `onChange` to write it wherever it goes,\n * and `initialItems` to read it back.\n *\n * @example\n * const inbox = useNotificationInbox({\n *     initialItems: await api.notifications.list(),\n *     onChange: (items) => storage.set(\"inbox\", items),\n * });\n *\n * <NotificationCenter\n *     items={inbox.items}\n *     onMarkRead={inbox.markRead}\n *     onMarkAllRead={inbox.markAllRead}\n *     onDismiss={inbox.remove}\n * />\n */\nexport function useNotificationInbox(\n    options: UseNotificationInboxOptions = {},\n): UseNotificationInboxResult {\n    const {\n        initialItems = [],\n        listenToServiceWorker = true,\n        messageType = \"tempest:notification\",\n        limit = 100,\n        onChange,\n    } = options;\n\n    const [items, setItems] = useState<NotificationItem[]>(() =>\n        [...initialItems].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, limit),\n    );\n\n    const update = useCallback(\n        (next: (current: NotificationItem[]) => NotificationItem[]) => {\n            setItems((current) => {\n                const result = next(current);\n                onChange?.(result);\n                return result;\n            });\n        },\n        [onChange],\n    );\n\n    const add = useCallback(\n        (item: NotificationItem) => {\n            update((current) => {\n                const without = current.filter((entry) => entry.id !== item.id);\n                return [item, ...without]\n                    .sort((a, b) => b.receivedAt - a.receivedAt)\n                    .slice(0, limit);\n            });\n        },\n        [update, limit],\n    );\n\n    const setRead = useCallback(\n        (id: string, read: boolean) => {\n            update((current) =>\n                current.map((entry) => (entry.id === id ? { ...entry, read } : entry)),\n            );\n        },\n        [update],\n    );\n\n    const markRead = useCallback((id: string) => setRead(id, true), [setRead]);\n    const markUnread = useCallback((id: string) => setRead(id, false), [setRead]);\n\n    const markAllRead = useCallback(() => {\n        update((current) => current.map((entry) => ({ ...entry, read: true })));\n    }, [update]);\n\n    const remove = useCallback(\n        (id: string) => {\n            update((current) => current.filter((entry) => entry.id !== id));\n        },\n        [update],\n    );\n\n    const clear = useCallback(() => update(() => []), [update]);\n\n    useEffect(() => {\n        if (!listenToServiceWorker) return;\n        if (typeof navigator === \"undefined\" || !navigator.serviceWorker) return;\n\n        /**\n         * Captured, not re-read in the cleanup.\n         *\n         * Looking `navigator.serviceWorker` up again at teardown throws if it is\n         * gone by then, and the listener would leak either way — the container has\n         * to be the same object the listener was added to.\n         */\n        const container = navigator.serviceWorker;\n\n        const handler = (event: MessageEvent) => {\n            const payload = event.data as Record<string, unknown> | null;\n            if (!payload || payload.type !== messageType) return;\n            const raw = (payload.notification ?? payload.payload ?? payload) as Record<\n                string,\n                unknown\n            >;\n            const item = toItem(raw, 0);\n            if (item) add(item);\n        };\n\n        container.addEventListener(\"message\", handler);\n        return () => container.removeEventListener(\"message\", handler);\n    }, [listenToServiceWorker, messageType, add]);\n\n    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);\n\n    return { items, unreadCount, add, markRead, markUnread, markAllRead, remove, clear };\n}\n"],"mappings":";;AA8DA,SAAS,EAAO,GAAkC,GAAwC;CACtF,IAAM,IAAQ,OAAO,EAAQ,SAAU,WAAW,EAAQ,QAAQ;CAElE,OADK,IACE;EACH,IAAI,OAAO,EAAQ,MAAO,WAAW,EAAQ,KAAK,MAAM,EAAQ,OAAO,EAAM,GAAG;EAChF;EACA,MAAM,OAAO,EAAQ,QAAS,WAAW,EAAQ,OAAO,KAAA;EACxD,YACI,OAAO,EAAQ,cAAe,WAAW,EAAQ,8BAAa,IAAI,KAAK,EAAA,CAAE,QAAQ;EACrF,KAAK,OAAO,EAAQ,OAAQ,WAAW,EAAQ,MAAM,KAAA;EACrD,MAAO,EAAQ,QAAgD,KAAA;EAC/D,MAAM;CACV,IAVmB;AAWvB;AA2BA,SAAgB,EACZ,IAAuC,CAAC,GACd;CAC1B,IAAM,EACF,kBAAe,CAAC,GAChB,2BAAwB,IACxB,iBAAc,wBACd,WAAQ,KACR,gBACA,GAEE,CAAC,GAAO,KAAY,QACtB,CAAC,GAAG,CAAY,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,MAAM,GAAG,CAAK,CAChF,GAEM,IAAS,GACV,MAA8D;EAC3D,GAAU,MAAY;GAClB,IAAM,IAAS,EAAK,CAAO;GAE3B,OADA,IAAW,CAAM,GACV;EACX,CAAC;CACL,GACA,CAAC,CAAQ,CACb,GAEM,IAAM,GACP,MAA2B;EACxB,GAAQ,MAEG,CAAC,GAAM,GADE,EAAQ,QAAQ,MAAU,EAAM,OAAO,EAAK,EAC3C,CAAO,CAAC,CACpB,MAAM,GAAG,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAC3C,MAAM,GAAG,CAAK,CACtB;CACL,GACA,CAAC,GAAQ,CAAK,CAClB,GAEM,IAAU,GACX,GAAY,MAAkB;EAC3B,GAAQ,MACJ,EAAQ,KAAK,MAAW,EAAM,OAAO,IAAK;GAAE,GAAG;GAAO;EAAK,IAAI,CAAM,CACzE;CACJ,GACA,CAAC,CAAM,CACX,GAEM,IAAW,GAAa,MAAe,EAAQ,GAAI,EAAI,GAAG,CAAC,CAAO,CAAC,GACnE,IAAa,GAAa,MAAe,EAAQ,GAAI,EAAK,GAAG,CAAC,CAAO,CAAC,GAEtE,IAAc,QAAkB;EAClC,GAAQ,MAAY,EAAQ,KAAK,OAAW;GAAE,GAAG;GAAO,MAAM;EAAK,EAAE,CAAC;CAC1E,GAAG,CAAC,CAAM,CAAC,GAEL,IAAS,GACV,MAAe;EACZ,GAAQ,MAAY,EAAQ,QAAQ,MAAU,EAAM,OAAO,CAAE,CAAC;CAClE,GACA,CAAC,CAAM,CACX,GAEM,IAAQ,QAAkB,QAAa,CAAC,CAAC,GAAG,CAAC,CAAM,CAAC;CAgC1D,OA9BA,QAAgB;EAEZ,IADI,CAAC,KACD,OAAO,YAAc,OAAe,CAAC,UAAU,eAAe;EASlE,IAAM,IAAY,UAAU,eAEtB,KAAW,MAAwB;GACrC,IAAM,IAAU,EAAM;GACtB,IAAI,CAAC,KAAW,EAAQ,SAAS,GAAa;GAK9C,IAAM,IAAO,EAJA,EAAQ,gBAAgB,EAAQ,WAAW,GAI/B,CAAC;GAC1B,AAAI,KAAM,EAAI,CAAI;EACtB;EAGA,OADA,EAAU,iBAAiB,WAAW,CAAO,SAChC,EAAU,oBAAoB,WAAW,CAAO;CACjE,GAAG;EAAC;EAAuB;EAAa;CAAG,CAAC,GAIrC;EAAE;EAAO,aAFI,QAAc,EAAM,QAAQ,MAAS,CAAC,EAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAK,CAEnE;EAAa;EAAK;EAAU;EAAY;EAAa;EAAQ;CAAM;AACvF"}
+{"version":3,"file":"use-notification-inbox.js","names":["toItem","title","payload","index","useNotificationInbox","options","items","setItems","useState","initialItems","b","a","limit","update","useCallback","result","next","current","onChange","add","item","entry","setRead","id","markRead","markUnread","markAllRead","remove","clear","useEffect","listenToServiceWorker","container","handler","event","messageType","useMemo"],"sources":["../../../src/components/NotificationCenter/use-notification-inbox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\n/** One entry in the inbox. */\nexport interface NotificationItem {\n    /** Stable id. Re-adding an existing id updates that entry instead of duplicating it. */\n    id: string;\n    title: string;\n    /** Body text. Optional — a title-only notification is a legitimate shape. */\n    body?: string;\n    /** Epoch milliseconds. Used for ordering and for the relative timestamp. */\n    receivedAt: number;\n    read?: boolean;\n    /** Where activating the notification should take the user. */\n    url?: string;\n    /** Free-form payload the app passes through, e.g. the entity it refers to. */\n    data?: Record<string, unknown>;\n}\n\nexport interface UseNotificationInboxOptions {\n    /** Entries the inbox starts with — typically what the API returned. */\n    initialItems?: readonly NotificationItem[];\n    /**\n     * Listen for `message` events from the service worker and add whatever\n     * arrives. Default `true`.\n     *\n     * This is the missing half of web push: a service worker runs outside the\n     * page and cannot touch React state, so a push that arrives while the app is\n     * open shows an OS notification and then vanishes as far as the UI is\n     * concerned. Have the worker `postMessage` the payload and it lands here.\n     */\n    listenToServiceWorker?: boolean;\n    /**\n     * Message `type` to accept from the worker. Default `\"tempest:notification\"`.\n     *\n     * Filtering by type matters because the SW message channel is shared — a\n     * sync-progress ping or a cache-updated notice would otherwise show up in the\n     * user's inbox.\n     */\n    messageType?: string;\n    /**\n     * Cap on stored entries; the oldest are dropped past it. Default `100`.\n     *\n     * An inbox fed by push grows without bound otherwise, and it lives in memory.\n     */\n    limit?: number;\n    /** Called whenever the list changes — the hook for persisting it. */\n    onChange?: (items: readonly NotificationItem[]) => void;\n}\n\nexport interface UseNotificationInboxResult {\n    items: NotificationItem[];\n    unreadCount: number;\n    /** Add an entry, or update the existing one with the same id. */\n    add: (item: NotificationItem) => void;\n    markRead: (id: string) => void;\n    markUnread: (id: string) => void;\n    markAllRead: () => void;\n    remove: (id: string) => void;\n    clear: () => void;\n}\n\n/** Coerce an unknown service-worker payload into an inbox entry. */\nfunction toItem(payload: Record<string, unknown>, index: number): NotificationItem | null {\n    const title = typeof payload.title === \"string\" ? payload.title : null;\n    if (!title) return null;\n    return {\n        id: typeof payload.id === \"string\" ? payload.id : `sw-${payload.tag ?? index}-${title}`,\n        title,\n        body: typeof payload.body === \"string\" ? payload.body : undefined,\n        receivedAt:\n            typeof payload.receivedAt === \"number\" ? payload.receivedAt : new Date().getTime(),\n        url: typeof payload.url === \"string\" ? payload.url : undefined,\n        data: (payload.data as Record<string, unknown> | undefined) ?? undefined,\n        read: false,\n    };\n}\n\n/**\n * Client-side inbox state for received notifications.\n *\n * Newest first, deduplicated by `id`, capped at `limit`. Pairs with\n * `NotificationCenter` for the UI and with the `push` module for the source:\n * point a service worker's `postMessage` at it and a push that arrives while the\n * app is open shows up in the inbox instead of only as an OS notification.\n *\n * Persistence is deliberately left out — where an inbox belongs (server, Dexie,\n * `localStorage`) is an app decision. Use `onChange` to write it wherever it goes,\n * and `initialItems` to read it back.\n *\n * @example\n * const inbox = useNotificationInbox({\n *     initialItems: await api.notifications.list(),\n *     onChange: (items) => storage.set(\"inbox\", items),\n * });\n *\n * <NotificationCenter\n *     items={inbox.items}\n *     onMarkRead={inbox.markRead}\n *     onMarkAllRead={inbox.markAllRead}\n *     onDismiss={inbox.remove}\n * />\n */\nexport function useNotificationInbox(\n    options: UseNotificationInboxOptions = {},\n): UseNotificationInboxResult {\n    const {\n        initialItems = [],\n        listenToServiceWorker = true,\n        messageType = \"tempest:notification\",\n        limit = 100,\n        onChange,\n    } = options;\n\n    const [items, setItems] = useState<NotificationItem[]>(() =>\n        [...initialItems].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, limit),\n    );\n\n    const update = useCallback(\n        (next: (current: NotificationItem[]) => NotificationItem[]) => {\n            setItems((current) => {\n                const result = next(current);\n                onChange?.(result);\n                return result;\n            });\n        },\n        [onChange],\n    );\n\n    const add = useCallback(\n        (item: NotificationItem) => {\n            update((current) => {\n                const without = current.filter((entry) => entry.id !== item.id);\n                return [item, ...without]\n                    .sort((a, b) => b.receivedAt - a.receivedAt)\n                    .slice(0, limit);\n            });\n        },\n        [update, limit],\n    );\n\n    const setRead = useCallback(\n        (id: string, read: boolean) => {\n            update((current) =>\n                current.map((entry) => (entry.id === id ? { ...entry, read } : entry)),\n            );\n        },\n        [update],\n    );\n\n    const markRead = useCallback((id: string) => setRead(id, true), [setRead]);\n    const markUnread = useCallback((id: string) => setRead(id, false), [setRead]);\n\n    const markAllRead = useCallback(() => {\n        update((current) => current.map((entry) => ({ ...entry, read: true })));\n    }, [update]);\n\n    const remove = useCallback(\n        (id: string) => {\n            update((current) => current.filter((entry) => entry.id !== id));\n        },\n        [update],\n    );\n\n    const clear = useCallback(() => update(() => []), [update]);\n\n    useEffect(() => {\n        if (!listenToServiceWorker) return;\n        if (typeof navigator === \"undefined\" || !navigator.serviceWorker) return;\n\n        /**\n         * Captured, not re-read in the cleanup.\n         *\n         * Looking `navigator.serviceWorker` up again at teardown throws if it is\n         * gone by then, and the listener would leak either way — the container has\n         * to be the same object the listener was added to.\n         */\n        const container = navigator.serviceWorker;\n\n        const handler = (event: MessageEvent) => {\n            const payload = event.data as Record<string, unknown> | null;\n            if (!payload || payload.type !== messageType) return;\n            const raw = (payload.notification ?? payload.payload ?? payload) as Record<\n                string,\n                unknown\n            >;\n            const item = toItem(raw, 0);\n            if (item) add(item);\n        };\n\n        container.addEventListener(\"message\", handler);\n        return () => container.removeEventListener(\"message\", handler);\n    }, [listenToServiceWorker, messageType, add]);\n\n    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);\n\n    return { items, unreadCount, add, markRead, markUnread, markAllRead, remove, clear };\n}\n"],"mappings":"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"}