tempest-react-sdk 0.77.0 → 0.79.0

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":"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"}

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":";;AA8DA,SAASA,EAAO,GAAkC,GAAwC;CACtF,IAAMC,IAAQ,OAAOC,EAAQ,SAAU,WAAWA,EAAQ,QAAQ;CAElE,OADKD,IACE;EACH,IAAI,OAAOC,EAAQ,MAAO,WAAWA,EAAQ,KAAK,MAAMA,EAAQ,OAAOC,EAAM,GAAGF;EAChF;EACA,MAAM,OAAOC,EAAQ,QAAS,WAAWA,EAAQ,OAAO,KAAA;EACxD,YACI,OAAOA,EAAQ,cAAe,WAAWA,EAAQ,8BAAa,IAAI,KAAK,EAAA,CAAE,QAAQ;EACrF,KAAK,OAAOA,EAAQ,OAAQ,WAAWA,EAAQ,MAAM,KAAA;EACrD,MAAOA,EAAQ,QAAgD,KAAA;EAC/D,MAAM;CACV,IAVmB;AAWvB;AA2BA,SAAgBE,EACZ,IAAuC,CAAC,GACd;CAC1B,IAAM,EACF,kBAAe,CAAC,GAChB,2BAAwB,IACxB,iBAAc,wBACd,WAAQ,KACR,gBACAC,GAEE,CAACC,GAAOC,KAAYC,QACtB,CAAC,GAAGC,CAAY,CAAC,CAAC,MAAM,GAAG,MAAMC,EAAE,aAAaC,EAAE,UAAU,CAAC,CAAC,MAAM,GAAGC,CAAK,CAChF,GAEMC,IAASC,GACV,MAA8D;EAC3D,GAAU,MAAY;GAClB,IAAMC,IAASC,EAAKC,CAAO;GAE3B,OADAC,IAAWH,CAAM,GACVA;EACX,CAAC;CACL,GACA,CAACG,CAAQ,CACb,GAEMC,IAAML,GACP,MAA2B;EACxB,GAAQ,MAEG,CAACM,GAAM,GADEH,EAAQ,QAAQ,MAAUI,EAAM,OAAOD,EAAK,EAC3C,CAAO,CAAC,CACpB,MAAM,GAAG,MAAMV,EAAE,aAAaC,EAAE,UAAU,CAAC,CAC3C,MAAM,GAAGC,CAAK,CACtB;CACL,GACA,CAACC,GAAQD,CAAK,CAClB,GAEMU,IAAUR,GACX,GAAY,MAAkB;EAC3B,GAAQ,MACJG,EAAQ,KAAK,MAAWI,EAAM,OAAOE,IAAK;GAAE,GAAGF;GAAO;EAAK,IAAIA,CAAM,CACzE;CACJ,GACA,CAACR,CAAM,CACX,GAEMW,IAAWV,GAAa,MAAeQ,EAAQC,GAAI,EAAI,GAAG,CAACD,CAAO,CAAC,GACnEG,IAAaX,GAAa,MAAeQ,EAAQC,GAAI,EAAK,GAAG,CAACD,CAAO,CAAC,GAEtEI,IAAcZ,QAAkB;EAClC,GAAQ,MAAYG,EAAQ,KAAK,OAAW;GAAE,GAAGI;GAAO,MAAM;EAAK,EAAE,CAAC;CAC1E,GAAG,CAACR,CAAM,CAAC,GAELc,IAASb,GACV,MAAe;EACZ,GAAQ,MAAYG,EAAQ,QAAQ,MAAUI,EAAM,OAAOE,CAAE,CAAC;CAClE,GACA,CAACV,CAAM,CACX,GAEMe,IAAQd,QAAkBD,QAAa,CAAC,CAAC,GAAG,CAACA,CAAM,CAAC;CAgC1D,OA9BAgB,QAAgB;EAEZ,IADI,CAACC,KACD,OAAO,YAAc,OAAe,CAAC,UAAU,eAAe;EASlE,IAAMC,IAAY,UAAU,eAEtBC,KAAW,MAAwB;GACrC,IAAM9B,IAAU+B,EAAM;GACtB,IAAI,CAAC/B,KAAWA,EAAQ,SAASgC,GAAa;GAK9C,IAAMd,IAAOpB,EAJAE,EAAQ,gBAAgBA,EAAQ,WAAWA,GAI/B,CAAC;GAC1B,AAAIkB,KAAMD,EAAIC,CAAI;EACtB;EAGA,OADAW,EAAU,iBAAiB,WAAWC,CAAO,SAChCD,EAAU,oBAAoB,WAAWC,CAAO;CACjE,GAAG;EAACF;EAAuBI;EAAaf;CAAG,CAAC,GAIrC;EAAE;EAAO,aAFIgB,QAAc7B,EAAM,QAAQ,MAAS,CAACc,EAAK,IAAI,CAAC,CAAC,QAAQ,CAACd,CAAK,CAEnE;EAAa;EAAK;EAAU;EAAY;EAAa;EAAQ;CAAM;AACvF"}

package/dist/components/OfflineIndicator/OfflineIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.cjs","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yMAoCA,SAAgB,EAAiB,CAC7B,WAAW,SACX,eAAe,sEACf,cAAc,yBACd,gBAAgB,IAChB,YACA,WACA,GAAG,GACmB,CACtB,IAAM,EAAS,EAAA,UAAU,EACnB,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAkB,EAAK,EACvD,GAAA,EAAgB,EAAA,OAAA,CAAgB,EAAK,EAe3C,IAbA,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAQ,CACT,EAAc,QAAU,GACxB,EAAe,EAAK,EACpB,MACJ,CACA,GAAI,CAAC,EAAc,SAAW,GAAiB,EAAG,OAClD,EAAc,QAAU,GACxB,EAAe,EAAI,EACnB,IAAM,EAAK,OAAO,eAAiB,EAAe,EAAK,EAAG,CAAa,EACvE,UAAa,OAAO,aAAa,CAAE,CACvC,EAAG,CAAC,EAAQ,CAAa,CAAC,EAEtB,GAAU,CAAC,EAAa,OAAO,KAEnC,IAAM,EAAgB,GAAU,EAChC,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GACP,EAAA,QAAO,IACP,EAAA,QAAO,GACP,EAAgB,EAAA,QAAO,OAAS,EAAA,QAAO,QACvC,CACJ,EACA,KAAK,SACL,YAAU,SACV,GAAI,EAEH,SAAA,IACG,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,CACK,GACG,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAAM,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAE5D,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CAAU,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAEpE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAO,EAAgB,EAAc,CAAmB,CAAA,CAC1D,CAAA,CAAA,CAEL,CAAA,CAEb"}
+{"version":3,"file":"OfflineIndicator.cjs","names":["useOnline","useState","useRef","cn","styles","_Fragment","Wifi","CloudOff","require_cn","require_use_online","require_OfflineIndicator_module","react","react_jsx_runtime","lucide_react","OfflineIndicator","props","online","flashOnline","setFlashOnline","wasOfflineRef","onlineFlashMs","id","showingOnline","position","className","children","onlineLabel","offlineLabel"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":"A,yMAoCA,SAAgBc,EAAiB,CAC7B,WAAW,SACX,eAAe,sEACf,cAAc,yBACd,gBAAgB,IAChB,YACA,WACA,GAAGC,GACmB,CACtB,IAAMC,EAAShB,EAAAA,UAAU,EACnB,CAACiB,EAAaC,IAAA,EAAkBjB,EAAAA,SAAAA,CAAkB,EAAK,EACvDkB,GAAA,EAAgBjB,EAAAA,OAAAA,CAAgB,EAAK,EAe3C,IAbA,EAAAS,EAAA,UAAA,KAAgB,CACZ,GAAI,CAACK,EAAQ,CACT,EAAc,QAAU,GACxBE,EAAe,EAAK,EACpB,MACJ,CACA,GAAI,CAACC,EAAc,SAAWC,GAAiB,EAAG,OAClD,EAAc,QAAU,GACxBF,EAAe,EAAI,EACnB,IAAMG,EAAK,OAAO,eAAiBH,EAAe,EAAK,EAAGE,CAAa,EACvE,UAAa,OAAO,aAAaC,CAAE,CACvC,EAAG,CAACL,EAAQI,CAAa,CAAC,EAEtBJ,GAAU,CAACC,EAAa,OAAO,KAEnC,IAAMK,EAAgBN,GAAUC,EAChC,OACI,EAAAL,EAAA,IAAA,CAAC,MAAD,CACI,UAAWT,EAAAA,GACPC,EAAAA,QAAO,IACPA,EAAAA,QAAOmB,GACPD,EAAgBlB,EAAAA,QAAO,OAASA,EAAAA,QAAO,QACvCoB,CACJ,EACA,KAAK,SACL,YAAU,SACV,GAAIT,EAEH,SAAAU,IACG,EAAAb,EAAA,KAAA,CAAAP,EAAAA,SAAA,CAAA,SAAA,CACKiB,GACG,EAAAV,EAAA,IAAA,CAACN,EAAAA,KAAD,CAAM,UAAWF,EAAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAE5D,EAAAQ,EAAA,IAAA,CAACL,EAAAA,SAAD,CAAU,UAAWH,EAAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GAEpE,EAAAQ,EAAA,IAAA,CAAC,OAAD,CAAA,SAAOU,EAAgBI,EAAcC,CAAmB,CAAA,CAC1D,CAAA,CAAA,CAEL,CAAA,CAEb,C"}

package/dist/components/OfflineIndicator/OfflineIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.js","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAAiB,EAC7B,cAAW,UACX,kBAAe,uEACf,iBAAc,0BACd,mBAAgB,KAChB,cACA,aACA,GAAG,KACmB;CACtB,IAAM,IAAS,EAAU,GACnB,CAAC,GAAa,KAAkB,EAAkB,EAAK,GACvD,IAAgB,EAAgB,EAAK;CAe3C,IAbA,QAAgB;EACZ,IAAI,CAAC,GAAQ;GAET,AADA,EAAc,UAAU,IACxB,EAAe,EAAK;GACpB;EACJ;EACA,IAAI,CAAC,EAAc,WAAW,KAAiB,GAAG;EAElD,AADA,EAAc,UAAU,IACxB,EAAe,EAAI;EACnB,IAAM,IAAK,OAAO,iBAAiB,EAAe,EAAK,GAAG,CAAa;EACvE,aAAa,OAAO,aAAa,CAAE;CACvC,GAAG,CAAC,GAAQ,CAAa,CAAC,GAEtB,KAAU,CAAC,GAAa,OAAO;CAEnC,IAAM,IAAgB,KAAU;CAChC,OACI,kBAAC,OAAD;EACI,WAAW,EACP,EAAO,KACP,EAAO,IACP,IAAgB,EAAO,SAAS,EAAO,SACvC,CACJ;EACA,MAAK;EACL,aAAU;EACV,GAAI;EAEH,UAAA,KACG,kBAAA,GAAA,EAAA,UAAA,CAEQ,EADH,IACI,IAEA,GAFD;GAAM,WAAW,EAAO;GAAM,MAAM;GAAI,eAAY;EAAQ,CAEI,GAEpE,kBAAC,QAAD,EAAA,UAAO,IAAgB,IAAc,EAAmB,CAAA,CAC1D,EAAA,CAAA;CAEL,CAAA;AAEb"}
+{"version":3,"file":"OfflineIndicator.js","names":["styles","_Fragment","OfflineIndicator_module_default","Fragment$1","OfflineIndicator","props","online","useOnline","flashOnline","setFlashOnline","useState","wasOfflineRef","useRef","useEffect","onlineFlashMs","id","showingOnline","cn","position","className","children","jsx","Wifi","CloudOff","onlineLabel","offlineLabel"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { CloudOff, Wifi } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport { useOnline } from \"@/hooks\";\nimport styles from \"./OfflineIndicator.module.css\";\n\nexport type OfflineIndicatorPosition = \"top\" | \"bottom\";\n\nexport interface OfflineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n    /** Where to pin the fixed bar. Default `\"bottom\"`. */\n    position?: OfflineIndicatorPosition;\n    /** Message shown while offline. */\n    offlineLabel?: ReactNode;\n    /** Message flashed briefly when connectivity returns. */\n    onlineLabel?: ReactNode;\n    /**\n     * How long (ms) to keep the \"back online\" flash visible. `0` hides it\n     * entirely. Default `3000`.\n     */\n    onlineFlashMs?: number;\n    /** Override the offline body entirely (icon + label ignored). */\n    children?: ReactNode;\n}\n\n/**\n * Fixed bar that appears while the browser is offline and, by default, flashes\n * a brief confirmation when the connection returns. Backed by {@link useOnline}\n * — no props needed for the common case.\n *\n * Renders nothing while online (after any flash has elapsed), so it is safe to\n * mount unconditionally at the app root.\n *\n * @example\n * <OfflineIndicator position=\"top\" />\n */\nexport function OfflineIndicator({\n    position = \"bottom\",\n    offlineLabel = \"Você está offline. As alterações serão sincronizadas ao reconectar.\",\n    onlineLabel = \"Conexão restabelecida.\",\n    onlineFlashMs = 3000,\n    className,\n    children,\n    ...props\n}: OfflineIndicatorProps) {\n    const online = useOnline();\n    const [flashOnline, setFlashOnline] = useState<boolean>(false);\n    const wasOfflineRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        if (!online) {\n            wasOfflineRef.current = true;\n            setFlashOnline(false);\n            return;\n        }\n        if (!wasOfflineRef.current || onlineFlashMs <= 0) return;\n        wasOfflineRef.current = false;\n        setFlashOnline(true);\n        const id = window.setTimeout(() => setFlashOnline(false), onlineFlashMs);\n        return () => window.clearTimeout(id);\n    }, [online, onlineFlashMs]);\n\n    if (online && !flashOnline) return null;\n\n    const showingOnline = online && flashOnline;\n    return (\n        <div\n            className={cn(\n                styles.bar,\n                styles[position],\n                showingOnline ? styles.online : styles.offline,\n                className,\n            )}\n            role=\"status\"\n            aria-live=\"polite\"\n            {...props}\n        >\n            {children ?? (\n                <>\n                    {showingOnline ? (\n                        <Wifi className={styles.icon} size={16} aria-hidden=\"true\" />\n                    ) : (\n                        <CloudOff className={styles.icon} size={16} aria-hidden=\"true\" />\n                    )}\n                    <span>{showingOnline ? onlineLabel : offlineLabel}</span>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgBI,EAAiB,EAC7B,cAAW,UACX,kBAAe,uEACf,iBAAc,0BACd,mBAAgB,KAChB,cACA,aACA,GAAGC,KACmB;CACtB,IAAMC,IAASC,EAAU,GACnB,CAACC,GAAaC,KAAkBC,EAAkB,EAAK,GACvDC,IAAgBC,EAAgB,EAAK;CAe3C,IAbAC,QAAgB;EACZ,IAAI,CAACP,GAAQ;GAET,AADA,EAAc,UAAU,IACxBG,EAAe,EAAK;GACpB;EACJ;EACA,IAAI,CAACE,EAAc,WAAWG,KAAiB,GAAG;EAElD,AADA,EAAc,UAAU,IACxBL,EAAe,EAAI;EACnB,IAAMM,IAAK,OAAO,iBAAiBN,EAAe,EAAK,GAAGK,CAAa;EACvE,aAAa,OAAO,aAAaC,CAAE;CACvC,GAAG,CAACT,GAAQQ,CAAa,CAAC,GAEtBR,KAAU,CAACE,GAAa,OAAO;CAEnC,IAAMQ,IAAgBV,KAAUE;CAChC,OACI,kBAAC,OAAD;EACI,WAAWS,EACPjB,EAAO,KACPA,EAAOkB,IACPF,IAAgBhB,EAAO,SAASA,EAAO,SACvCmB,CACJ;EACA,MAAK;EACL,aAAU;EACV,GAAId;EAEH,UAAAe,KACG,kBAAAnB,GAAA,EAAA,UAAA,CAEQoB,EADHL,IACIM,IAEAC,GAFD;GAAM,WAAWvB,EAAO;GAAM,MAAM;GAAI,eAAY;EAAQ,CAEI,GAEpE,kBAAC,QAAD,EAAA,UAAOgB,IAAgBQ,IAAcC,EAAmB,CAAA,CAC1D,EAAA,CAAA;CAEL,CAAA;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.module.cjs","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"OfflineIndicator.module.cjs","names":["bar","top","bottom","offline","online","icon","OfflineIndicator_module_default"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.module.js","names":[],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"OfflineIndicator.module.js","names":["bar","top","bottom","offline","online","icon","OfflineIndicator_module_default"],"sources":["../../../src/components/OfflineIndicator/OfflineIndicator.module.css"],"sourcesContent":[".bar {\n    position: fixed;\n    left: 0;\n    right: 0;\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n    text-align: center;\n}\n\n.top {\n    top: 0;\n    padding-top: max(var(--tempest-space-2), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: 0;\n    padding-bottom: max(var(--tempest-space-2), env(safe-area-inset-bottom));\n}\n\n.offline {\n    background: var(--tempest-surface-2);\n    color: var(--tempest-text-muted);\n    border-top: 1px solid var(--tempest-border-strong);\n}\n\n.online {\n    background: var(--tempest-success-bg);\n    color: var(--tempest-success-fg);\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n"],"mappings":";"}

package/dist/components/Page/Page.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.cjs","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":"wJAyCA,SAAgB,EAAK,CACjB,QACA,UACA,cACA,UACA,UACA,SACA,SAAS,GACT,YACA,WACA,GAAG,GACO,CACV,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAU,EAAA,QAAO,OAAQ,CAAS,EAAG,GAAI,EAA1E,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CACI,MAAO,EACE,UACF,QACM,cACJ,SACZ,CAAA,EACA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,GAC1D,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,EAC9C,IAAU,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,OAAS,SAAA,CAAe,CAAA,CAC3D,GAEd"}
+{"version":3,"file":"Page.cjs","names":["cn","styles","SectionHeader","require_cn","require_SectionHeader","require_Page_module","react_jsx_runtime","Page","props","padded","className","toolbar","footer"],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":"A,wJAyCA,SAAgBO,EAAK,CACjB,QACA,UACA,cACA,UACA,UACA,SACA,SAAS,GACT,YACA,WACA,GAAGC,GACO,CACV,OACI,EAAAF,EAAA,KAAA,CAAC,OAAD,CAAM,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,KAAMQ,GAAUR,EAAAA,QAAO,OAAQS,CAAS,EAAG,GAAIF,EAA1E,SAAA,EACI,EAAAF,EAAA,IAAA,CAACJ,EAAAA,cAAD,CACI,MAAO,EACE,UACF,QACM,cACJ,SACZ,CAAA,EACAS,IAAW,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,QAAO,QAAU,SAAAU,CAAa,CAAA,GAC1D,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,QAAO,QAAU,UAAc,CAAA,EAC9CW,IAAU,EAAAN,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAWL,EAAAA,QAAO,OAAS,SAAAW,CAAe,CAAA,CAC3D,C,EAEd,C"}

package/dist/components/Page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","names":[],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":";;;;;AAyCA,SAAgB,EAAK,EACjB,UACA,YACA,gBACA,YACA,YACA,WACA,YAAS,IACT,cACA,aACA,GAAG,KACO;CACV,OACI,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAO,MAAM,KAAU,EAAO,QAAQ,CAAS;EAAG,GAAI;EAA1E,UAAA;GACI,kBAAC,GAAD;IACI,OAAO;IACE;IACF;IACM;IACJ;GACZ,CAAA;GACA,KAAW,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU,UAAA;GAAa,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU;GAAc,CAAA;GAC9C,KAAU,kBAAC,UAAD;IAAQ,WAAW,EAAO;IAAS,UAAA;GAAe,CAAA;EAC3D;;AAEd"}
+{"version":3,"file":"Page.js","names":["styles","Page_module_default","Page","props","cn","padded","className","SectionHeader","toolbar","footer"],"sources":["../../../src/components/Page/Page.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a page shell is slots: eyebrow, title, description,\n * actions, toolbar, footer and children, with padded as the one behavioural switch.\n * Slots are the component.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { SectionHeader } from \"../SectionHeader\";\nimport styles from \"./Page.module.css\";\n\nexport interface PageProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n    /** Page title rendered as `<h1>`. */\n    title?: ReactNode;\n    /** Optional subtitle / breadcrumbs slot rendered above the title. */\n    eyebrow?: ReactNode;\n    /** Optional description rendered below the title. */\n    description?: ReactNode;\n    /** Right-side actions slot in the header (buttons, menus). */\n    actions?: ReactNode;\n    /** Sticky tab bar / filter row rendered just below the header. */\n    toolbar?: ReactNode;\n    /** Footer slot rendered at the bottom of the content area. */\n    footer?: ReactNode;\n    /** Page-level padding. Default `true`. */\n    padded?: boolean;\n    children?: ReactNode;\n}\n\n/**\n * Page wrapper with header + (optional) toolbar + content + footer. Pairs\n * with `Container` when you want a max-width content well.\n *\n * The header is a `SectionHeader` at `level={1}`, so the page title and the\n * `<h2>` of each section below it share one look; when every header slot is\n * empty no `<header>` is rendered.\n *\n * @example\n * <Page title=\"Pedidos\" description=\"Acompanhe seus pedidos\" actions={<Button>Novo</Button>}>\n *     <Table {...} />\n * </Page>\n */\nexport function Page({\n    title,\n    eyebrow,\n    description,\n    actions,\n    toolbar,\n    footer,\n    padded = true,\n    className,\n    children,\n    ...props\n}: PageProps) {\n    return (\n        <main className={cn(styles.page, padded && styles.padded, className)} {...props}>\n            <SectionHeader\n                level={1}\n                eyebrow={eyebrow}\n                title={title}\n                description={description}\n                actions={actions}\n            />\n            {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n            <div className={styles.content}>{children}</div>\n            {footer && <footer className={styles.footer}>{footer}</footer>}\n        </main>\n    );\n}\n"],"mappings":";;;;;AAyCA,SAAgBE,EAAK,EACjB,UACA,YACA,gBACA,YACA,YACA,WACA,YAAS,IACT,cACA,aACA,GAAGC,KACO;CACV,OACI,kBAAC,QAAD;EAAM,WAAWC,EAAGJ,EAAO,MAAMK,KAAUL,EAAO,QAAQM,CAAS;EAAG,GAAIH;EAA1E,UAAA;GACI,kBAACI,GAAD;IACI,OAAO;IACE;IACF;IACM;IACJ;GACZ,CAAA;GACAC,KAAW,kBAAC,OAAD;IAAK,WAAWR,EAAO;IAAU,UAAAQ;GAAa,CAAA;GAC1D,kBAAC,OAAD;IAAK,WAAWR,EAAO;IAAU;GAAc,CAAA;GAC9CS,KAAU,kBAAC,UAAD;IAAQ,WAAWT,EAAO;IAAS,UAAAS;GAAe,CAAA;EAC3D;;AAEd"}

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

@@ -1 +1 @@
-{"version":3,"file":"Page.module.cjs","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}
+{"version":3,"file":"Page.module.cjs","names":["page","padded","toolbar","content","footer","Page_module_default"],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Page.module.js","names":[],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}
+{"version":3,"file":"Page.module.js","names":["page","padded","toolbar","content","footer","Page_module_default"],"sources":["../../../src/components/Page/Page.module.css"],"sourcesContent":[".page {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-height: 100%;\n    font-family: var(--tempest-font-sans);\n    color: var(--tempest-text);\n}\n\n.padded {\n    padding: var(--tempest-space-5) var(--tempest-space-4);\n}\n\n@media (min-width: 768px) {\n    .padded {\n        padding: var(--tempest-space-6) var(--tempest-space-6);\n    }\n}\n\n.toolbar {\n    margin-bottom: var(--tempest-space-4);\n}\n\n.content {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.footer {\n    margin-top: var(--tempest-space-6);\n    padding-top: var(--tempest-space-4);\n    border-top: 1px solid var(--tempest-border);\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.cjs","names":["useMemo","useRef","cn","styles","require_cn","require_Pagination_module","react","react_jsx_runtime","DEFAULT_PAGE_SIZE_OPTIONS","buildRange","totalPages","siblings","i","start","page","end","range","Pagination","pages","siblingCount","sizes","pageSize","pageSizeOptions","a","b","activePage","compactOnMobile","onPageSizeChange","className","totalItems","onPageChange","entry","index","event","opt"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAM,IAAsC;CAAC;CAAI;CAAI;CAAI;AAAG;AAE5D,SAAS,EAAW,GAAc,GAAoB,GAAsC;CAExF,IAAI,KADe,IAAW,GAE1B,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MAAM,IAAI,CAAC;CAE7D,IAAM,IAAQ,KAAK,IAAI,GAAG,IAAO,KAAK,MAAM,IAAW,CAAC,CAAC,GACnD,IAAM,KAAK,IAAI,IAAa,GAAG,IAAQ,IAAW,CAAC,GACnD,IAA4B,CAAC,CAAC;CACpC,AAAI,IAAQ,KAAG,EAAM,KAAK,KAAK;CAC/B,KAAK,IAAI,IAAI,GAAO,KAAK,GAAK,KAAK,EAAM,KAAK,CAAC;CAG/C,OAFI,IAAM,IAAa,KAAG,EAAM,KAAK,KAAK,GAC1C,EAAM,KAAK,CAAU,GACd;AACX;AAgBA,SAAgB,EAAW,EACvB,SACA,eACA,iBACA,aACA,qBACA,qBAAkB,GAClB,eACA,kBAAe,GACf,qBAAkB,IAClB,gBACgB;CAChB,IAAM,IAAQ,QACJ,EAAW,GAAM,GAAY,CAAY,GAC/C;EAAC;EAAM;EAAY;CAAY,CACnC,GACM,IAAQ,QAEN,MAAa,KAAA,KAAa,EAAgB,SAAS,CAAQ,IACrD,IACA,CAAC,GAAG,GAAiB,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,GAC7D,CAAC,GAAU,CAAe,CAC9B,GACM,IAAa,EAAiC,IAAI;CASxD,OAPA,QAAgB;EACR,KACJ,EAAW,SAAS,iBAAiB;GAAE,OAAO;GAAW,QAAQ;EAAU,CAAC;CAChF,GAAG,CAAC,GAAM,CAAe,CAAC,GAEtB,KAAc,KAAK,CAAC,IAAyB,OAG7C,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,CAAS;EAAG,gBAAc,OAAO,CAAe;EAAnF,UAAA,CACI,kBAAC,OAAD;GAAK,WAAW,EAAO;GAClB,UAAA,OAAO,KAAe,WACjB,GAAG,EAAW,YAAY,MAAe,IAAI,KAAK,QAClD,UAAU,EAAK,MAAM;EAC1B,CAAA,GACL,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACI,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,eAAe,EAAa,KAAK,IAAI,GAAG,IAAO,CAAC,CAAC;KACjD,UAAU,KAAQ;KAClB,cAAW;KACd,UAAA;IAEO,CAAA;IACP,EAAM,KAAK,GAAO,MACf,MAAU,QACN,kBAAC,QAAD;KAEI,WAAW,EAAG,EAAO,UAAU,EAAO,OAAO;KAChD,UAAA;IAEK,GAJG,YAAY,GAIf,IAEN,kBAAC,UAAD;KACI,MAAK;KAEL,KAAK,MAAU,IAAO,IAAa,KAAA;KACnC,WAAW,EACP,EAAO,MACP,EAAO,SACP,MAAU,KAAQ,EAAO,MAC7B;KACA,eAAe,EAAa,CAAK;KACjC,gBAAc,MAAU,IAAO,SAAS,KAAA;KAEvC,UAAA;IACG,GAXC,CAWD,CAEhB;IACA,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,eAAe,EAAa,KAAK,IAAI,GAAY,IAAO,CAAC,CAAC;KAC1D,UAAU,KAAQ;KAClB,cAAW;KACd,UAAA;IAEO,CAAA;IACP,KACG,kBAAC,UAAD;KACI,WAAW,EAAO;KAClB,OAAO;KACP,WAAW,MAAU,EAAiB,OAAO,EAAM,OAAO,KAAK,CAAC;KAChE,cAAW;KAEV,UAAA,EAAM,KAAK,MACR,kBAAC,UAAD;MAAkB,OAAO;MAAzB,UAAA,CACK,GAAI,WACD;KAFK,GAAA,CAEL,CACX;IACG,CAAA;GAEX;EACJ,CAAA,CAAA;;AAEb"}
+{"version":3,"file":"Pagination.js","names":["styles","Pagination_module_default","DEFAULT_PAGE_SIZE_OPTIONS","buildRange","totalPages","siblings","i","start","page","end","range","Pagination","pages","useMemo","siblingCount","sizes","pageSize","pageSizeOptions","a","b","activePage","useRef","useEffect","compactOnMobile","onPageSizeChange","cn","className","totalItems","onPageChange","entry","index","event","opt"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — page/totalPages/onPageChange is the pager,\n * pageSize/onPageSizeChange/ pageSizeOptions is the size control that sits in the\n * same bar, and totalItems plus siblingCount decide the copy and how many page\n * buttons are rendered. They ship together because a footer that pages but cannot\n * resize is half a footer.\n */\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Pagination.module.css\";\n\nexport interface PaginationProps {\n    page: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    pageSize?: number;\n    onPageSizeChange?: (size: number) => void;\n    /**\n     * Sizes offered in the selector. Default `[10, 25, 50, 100]`.\n     *\n     * The current `pageSize` is always offered too, merged in ascending order. A\n     * `<select>` whose value matches no option displays its first option, so\n     * `pageSize={20}` against the default list used to read \"10 / página\" over a\n     * table showing 20 rows.\n     */\n    pageSizeOptions?: number[];\n    /** Total items count; if provided, renders the summary text. */\n    totalItems?: number;\n    /** Pages kept around the current one; ~`siblingCount + 4` buttons render. Default 3. */\n    siblingCount?: number;\n    /**\n     * Below 640px, drop to `‹` / `›` plus the summary and hide the numbered\n     * buttons and the size select. Default `true`.\n     *\n     * The default suits a desktop-first app, and costs the thing pagination is\n     * for on a phone: reaching page 7 becomes six taps on \"next\" instead of one\n     * tap on `7`. Pass `false` in a mobile-first app and the numbers stay at\n     * every width — the row scrolls horizontally by itself rather than pushing\n     * the page wider, and the current page is scrolled into view when it\n     * changes.\n     */\n    compactOnMobile?: boolean;\n    className?: string;\n}\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 25, 50, 100];\n\nfunction buildRange(page: number, totalPages: number, siblings: number): (number | \"...\")[] {\n    const totalSlots = siblings + 4;\n    if (totalPages <= totalSlots) {\n        return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n    const start = Math.max(2, page - Math.floor(siblings / 2));\n    const end = Math.min(totalPages - 1, start + siblings - 1);\n    const range: (number | \"...\")[] = [1];\n    if (start > 2) range.push(\"...\");\n    for (let i = start; i <= end; i++) range.push(i);\n    if (end < totalPages - 1) range.push(\"...\");\n    range.push(totalPages);\n    return range;\n}\n\n/**\n * Numeric pagination controls. Pair with {@link usePagination} for state.\n *\n * Narrow screens collapse to `‹` / `›` plus the summary by default, which turns\n * random access into sequential access — fine for a desktop-first app, wrong for\n * one whose traffic is phones. `compactOnMobile={false}` keeps the numbers at\n * every width: the row scrolls on its own instead of widening the page, and the\n * effect below keeps the current page inside the visible part of that row.\n *\n * The scroll is why this is one boolean rather than a `variant`. Simply\n * un-hiding the buttons would push a nine-button row past a 360px viewport and\n * give the whole document a horizontal scrollbar — the opt-out has to carry its\n * own layout, so it does.\n */\nexport function Pagination({\n    page,\n    totalPages,\n    onPageChange,\n    pageSize,\n    onPageSizeChange,\n    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n    totalItems,\n    siblingCount = 3,\n    compactOnMobile = true,\n    className,\n}: PaginationProps) {\n    const pages = useMemo(\n        () => buildRange(page, totalPages, siblingCount),\n        [page, totalPages, siblingCount],\n    );\n    const sizes = useMemo(\n        () =>\n            pageSize === undefined || pageSizeOptions.includes(pageSize)\n                ? pageSizeOptions\n                : [...pageSizeOptions, pageSize].sort((a, b) => a - b),\n        [pageSize, pageSizeOptions],\n    );\n    const activePage = useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (compactOnMobile) return;\n        activePage.current?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n    }, [page, compactOnMobile]);\n\n    if (totalPages <= 1 && !onPageSizeChange) return null;\n\n    return (\n        <div className={cn(styles.wrapper, className)} data-compact={String(compactOnMobile)}>\n            <div className={styles.summary}>\n                {typeof totalItems === \"number\"\n                    ? `${totalItems} resultado${totalItems === 1 ? \"\" : \"s\"}`\n                    : `Página ${page} de ${totalPages}`}\n            </div>\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.max(1, page - 1))}\n                    disabled={page <= 1}\n                    aria-label=\"Página anterior\"\n                >\n                    ‹\n                </button>\n                {pages.map((entry, index) =>\n                    entry === \"...\" ? (\n                        <span\n                            key={`ellipsis-${index}`}\n                            className={cn(styles.ellipsis, styles.numeric)}\n                        >\n                            …\n                        </span>\n                    ) : (\n                        <button\n                            type=\"button\"\n                            key={entry}\n                            ref={entry === page ? activePage : undefined}\n                            className={cn(\n                                styles.page,\n                                styles.numeric,\n                                entry === page && styles.active,\n                            )}\n                            onClick={() => onPageChange(entry)}\n                            aria-current={entry === page ? \"page\" : undefined}\n                        >\n                            {entry}\n                        </button>\n                    ),\n                )}\n                <button\n                    type=\"button\"\n                    className={styles.page}\n                    onClick={() => onPageChange(Math.min(totalPages, page + 1))}\n                    disabled={page >= totalPages}\n                    aria-label=\"Próxima página\"\n                >\n                    ›\n                </button>\n                {onPageSizeChange && (\n                    <select\n                        className={styles.sizeSelect}\n                        value={pageSize}\n                        onChange={(event) => onPageSizeChange(Number(event.target.value))}\n                        aria-label=\"Itens por página\"\n                    >\n                        {sizes.map((opt) => (\n                            <option key={opt} value={opt}>\n                                {opt} / página\n                            </option>\n                        ))}\n                    </select>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page: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.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect: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@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Pagination.module.cjs","names":["wrapper","controls","page","active","ellipsis","sizeSelect","summary","numeric","Pagination_module_default"],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page: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.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect: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@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.js","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page: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.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect: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@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Pagination.module.js","names":["wrapper","controls","page","active","ellipsis","sizeSelect","summary","numeric","Pagination_module_default"],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    color: var(--tempest-text-muted);\n    flex-wrap: wrap;\n}\n\n.controls {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    min-width: 0;\n}\n\n.page {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-md);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .page:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n        border-color: var(--tempest-border-strong);\n    }\n    .active:hover {\n        background-color: var(--tempest-primary-hover);\n        border-color: var(--tempest-primary-hover);\n    }\n}\n\n.page: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.page:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n}\n\n.active {\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.ellipsis {\n    padding: 0 var(--tempest-space-2);\n    color: var(--tempest-text-subtle);\n}\n\n.sizeSelect {\n    height: 32px;\n    padding: 0 var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.sizeSelect: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@media (max-width: 639.98px) {\n    .summary {\n        font-size: var(--tempest-text-xs);\n    }\n\n    .wrapper[data-compact=\"true\"] .numeric,\n    .wrapper[data-compact=\"true\"] .sizeSelect {\n        display: none;\n    }\n\n    .wrapper[data-compact=\"true\"] .controls {\n        flex: 1;\n        justify-content: space-between;\n    }\n\n    .wrapper[data-compact=\"false\"] .controls {\n        flex: 1 1 100%;\n        justify-content: flex-start;\n        overflow-x: auto;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-padding-inline: var(--tempest-space-2);\n        padding-block-end: var(--tempest-space-1);\n    }\n\n    .wrapper[data-compact=\"false\"] .page,\n    .wrapper[data-compact=\"false\"] .ellipsis,\n    .wrapper[data-compact=\"false\"] .sizeSelect {\n        flex: 0 0 auto;\n    }\n}\n"],"mappings":";"}