pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/NotificationBell/NotificationList.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Primitives_1 = require("../Primitives/Primitives");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const NotificationItem_1 = __importDefault(require("./NotificationItem"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const notificationHelpers_1 = require("./notificationHelpers");
+/** @deprecated Use NotificationInbox, or NotificationCenter for the bell panel. */
+function NotificationList({ items, toItem, groupBy = "day", collapseGroups = false, dayLabels = notificationHelpers_1.DEFAULT_DAY_LABELS, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator = "bar", actionsAlwaysVisible = false, "aria-label": ariaLabel, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const [expandedGroups, setExpandedGroups] = (0, react_1.useState)(new Set());
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: "No notifications yet", description: "You're all caught up.", size: "sm" });
+    }
+    const sections = groupBy === "day" ? (0, notificationHelpers_1.sectionizeByDay)(items, (row) => toItem(row).timestamp, dayLabels) : [{ label: "", rows: items }];
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, children: sections.map((section, sectionIndex) => {
+            const groups = (0, notificationHelpers_1.groupConsecutive)(section.rows, (row) => (collapseGroups ? toItem(row).groupKey : undefined));
+            return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { position: "sticky", top: 0, zIndex: 1, px: 3, py: 1.5, fontSize: "xs-minus", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: colors.text[500], bg: colors.backgroundColor.main, children: section.label }))) : null, groups.map((group, groupIndex) => {
+                        var _a;
+                        const groupId = `${section.label}-${(_a = group.key) !== null && _a !== void 0 ? _a : `__row${groupIndex}`}`;
+                        const isCollapsedRun = collapseGroups && group.rows.length > 1 && !expandedGroups.has(groupId);
+                        const rowsToRender = isCollapsedRun ? group.rows.slice(0, 1) : group.rows;
+                        return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { children: rowsToRender.map((row, rowIndex) => {
+                                const model = toItem(row);
+                                if (renderItem)
+                                    return (0, jsx_runtime_1.jsx)(Primitives_1.Box, { children: renderItem(row, model) }, model.id);
+                                return ((0, jsx_runtime_1.jsx)(NotificationItem_1.default, { item: model, onClick: onItemClick ? () => onItemClick(row) : undefined, actions: itemActions === null || itemActions === void 0 ? void 0 : itemActions(row), actionsAlwaysVisible: actionsAlwaysVisible, unreadIndicator: unreadIndicator, groupCount: isCollapsedRun && rowIndex === 0 ? group.rows.length : undefined, onExpandGroup: () => setExpandedGroups((prev) => {
+                                        const next = new Set(prev);
+                                        next.add(groupId);
+                                        return next;
+                                    }) }, model.id));
+                            }) }, groupId));
+                    })] }, section.label || sectionIndex));
+        }) }));
+}
+exports.default = NotificationList;

package/dist/Components/NotificationBell/NotificationPanel.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationPanelProps } from "./NotificationBellProps";
+/** @deprecated Use NotificationCenter, which wraps NotificationBell with a two-tab panel. */
+declare function NotificationPanel<T>({ items, toItem, zones, activeZone, onZoneChange, filters, activeFilter, onFilterChange, isLoading, error, onRetry, empty, header, headerAction, footer, variant, maxH, onLoadMore, hasMore, isLoadingMore, panelRef, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }: NotificationPanelProps<T>): import("react/jsx-runtime").JSX.Element;
+export default NotificationPanel;

package/dist/Components/NotificationBell/NotificationPanel.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../Primitives/Primitives");
+const Button_1 = __importDefault(require("../Button/Button"));
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const NotificationList_1 = __importDefault(require("./NotificationList"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const notificationHelpers_1 = require("./notificationHelpers");
+const DEFAULT_EMPTY = { title: "No notifications yet", description: "You're all caught up.", size: "sm" };
+/** @deprecated Use NotificationCenter, which wraps NotificationBell with a two-tab panel. */
+function NotificationPanel({ items, toItem, zones, activeZone, onZoneChange, filters, activeFilter, onFilterChange, isLoading = false, error, onRetry, empty, header, headerAction, footer, variant = "popover", maxH, onLoadMore, hasMore = false, isLoadingMore = false, panelRef, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const internalRef = (0, react_1.useRef)(null);
+    const ref = panelRef !== null && panelRef !== void 0 ? panelRef : internalRef;
+    const isPopover = variant === "popover";
+    const measuredHeight = (0, notificationHelpers_1.useAnchoredPanelHeight)(ref);
+    const resolvedMaxH = maxH !== null && maxH !== void 0 ? maxH : (isPopover ? measuredHeight : undefined);
+    const activeZoneConfig = zones === null || zones === void 0 ? void 0 : zones.find((zone) => zone.id === activeZone);
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 3, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: [header !== null && header !== void 0 ? header : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": "Notification zones", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: zones.map((zone) => {
+                    const isActive = zone.id === activeZone;
+                    const label = zone.count ? `${zone.label} (${(0, notificationHelpers_1.formatCount)(zone.count)})` : zone.label;
+                    return ((0, jsx_runtime_1.jsx)(Button_1.default, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "primary", "aria-pressed": isActive, onClick: () => onZoneChange === null || onZoneChange === void 0 ? void 0 : onZoneChange(zone.id) }, zone.id));
+                }) })) : null, filters && filters.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: filters.map((filter) => {
+                    const isActive = filter.id === activeFilter;
+                    const label = typeof filter.count === "number" ? `${filter.label} (${(0, notificationHelpers_1.formatCount)(filter.count)})` : filter.label;
+                    return ((0, jsx_runtime_1.jsx)(Button_1.default, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "secondary", "aria-pressed": isActive, onClick: () => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(filter.id) }, filter.id));
+                }) })) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle", size: "7" }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "70%" }), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: lucide_react_1.AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NotificationList_1.default, { items: items, toItem: toItem, groupBy: groupBy, collapseGroups: collapseGroups, dayLabels: dayLabels, onItemClick: onItemClick, itemActions: itemActions, renderItem: renderItem, renderSectionHeader: renderSectionHeader, unreadIndicator: unreadIndicator, actionsAlwaysVisible: actionsAlwaysVisible, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Notifications" }), hasMore ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { justify: "center", py: 3, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: footer })) : null] }));
+}
+exports.default = NotificationPanel;

package/dist/Components/NotificationBell/index.d.ts

@@ -0,0 +1,6 @@
+export { default as NotificationBell } from "./NotificationBell";
+export { default as NotificationPanel } from "./NotificationPanel";
+export { default as NotificationList } from "./NotificationList";
+export { default as NotificationItem } from "./NotificationItem";
+export * from "./NotificationBellProps";
+export * from "./notificationHelpers";

package/dist/Components/NotificationBell/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = void 0;
+var NotificationBell_1 = require("./NotificationBell");
+Object.defineProperty(exports, "NotificationBell", { enumerable: true, get: function () { return __importDefault(NotificationBell_1).default; } });
+var NotificationPanel_1 = require("./NotificationPanel");
+Object.defineProperty(exports, "NotificationPanel", { enumerable: true, get: function () { return __importDefault(NotificationPanel_1).default; } });
+var NotificationList_1 = require("./NotificationList");
+Object.defineProperty(exports, "NotificationList", { enumerable: true, get: function () { return __importDefault(NotificationList_1).default; } });
+var NotificationItem_1 = require("./NotificationItem");
+Object.defineProperty(exports, "NotificationItem", { enumerable: true, get: function () { return __importDefault(NotificationItem_1).default; } });
+__exportStar(require("./NotificationBellProps"), exports);
+__exportStar(require("./notificationHelpers"), exports);

package/dist/Components/NotificationBell/notificationHelpers.d.ts

@@ -0,0 +1,60 @@
+import { type RefObject } from "react";
+export interface DaySection<T> {
+    /** Section heading text, taken from the matching `DaySectionLabels` entry. */
+    label: string;
+    /** Rows in this bucket, in input order. */
+    rows: T[];
+}
+export interface ConsecutiveGroup<T> {
+    /** The shared key for the run, or null for a row that was not merged. */
+    key: string | null;
+    /** Adjacent rows in the run, in input order. */
+    rows: T[];
+}
+export interface DaySectionLabels {
+    /** Heading for rows dated on the current calendar day. */
+    today: string;
+    /** Heading for rows dated on the previous calendar day. */
+    yesterday: string;
+    /** Heading for every older row. */
+    earlier: string;
+}
+export declare const DEFAULT_DAY_LABELS: DaySectionLabels;
+/**
+ * Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket.
+ * `now` defaults to the wall clock; pass it to pin "today" in tests or a fixed-date view.
+ */
+export declare function sectionizeByDay<T>(rows: T[], getTime: (row: T) => number | string | Date, labels?: DaySectionLabels, now?: number | Date): DaySection<T>[];
+/** Merges only adjacent rows sharing a key; a null/undefined key never merges with anything. */
+export declare function groupConsecutive<T>(rows: T[], getKey: (row: T) => string | null | undefined): ConsecutiveGroup<T>[];
+/** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
+export declare function formatCount(value: number, max?: number): string;
+export interface RelativeTimeLabels {
+    /** Text shown for ages under one minute. */
+    justNow: string;
+    /** Receives whole minutes (1 to 59) and returns the label. */
+    minutesAgo: (count: number) => string;
+    /** Receives whole hours (1 to 23) and returns the label. */
+    hoursAgo: (count: number) => string;
+    /** Receives whole days (1 to 6) and returns the label; older times use a short date. */
+    daysAgo: (count: number) => string;
+}
+export declare const DEFAULT_RELATIVE_TIME_LABELS: RelativeTimeLabels;
+/** Overrides for the English wording and the date locale of `formatRelativeTime`. */
+export interface RelativeTimeOptions {
+    /** Replaces the English "Just now" / "5m ago" / "3h ago" / "2d ago" wording. */
+    labels?: RelativeTimeLabels;
+    /** BCP 47 tag for the short date shown past a week; defaults to "en-US". */
+    locale?: string;
+}
+/** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
+export declare function formatRelativeTime(value: number | string | Date, now?: number | Date, { labels, locale }?: RelativeTimeOptions): string;
+/** Minimum panel height and bottom gutter for `useAnchoredPanelHeight`. */
+export interface AnchoredPanelHeightOptions {
+    /** Smallest height in px the panel may measure to. Defaults to 280. */
+    min?: number;
+    /** Space in px kept between the panel's bottom edge and the viewport bottom. Defaults to 24. */
+    gutter?: number;
+}
+/** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
+export declare function useAnchoredPanelHeight(ref: RefObject<HTMLElement>, options?: AnchoredPanelHeightOptions): number;

package/dist/Components/NotificationBell/notificationHelpers.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_RELATIVE_TIME_LABELS = exports.DEFAULT_DAY_LABELS = void 0;
+exports.sectionizeByDay = sectionizeByDay;
+exports.groupConsecutive = groupConsecutive;
+exports.formatCount = formatCount;
+exports.formatRelativeTime = formatRelativeTime;
+exports.useAnchoredPanelHeight = useAnchoredPanelHeight;
+const react_1 = require("react");
+exports.DEFAULT_DAY_LABELS = {
+    today: "Today",
+    yesterday: "Yesterday",
+    earlier: "Earlier",
+};
+// Accepts epoch ms, an ISO string, or a numeric-string epoch — the three shapes seen across consumers.
+const toDate = (value) => {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === "number")
+        return new Date(value);
+    return new Date(/^-?\d+$/.test(value) ? Number(value) : value);
+};
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+// NOTE: calendar arithmetic, not -24h — a DST shift makes the day shorter or longer.
+const startOfPrevDay = (dayStart) => {
+    const d = new Date(dayStart);
+    d.setDate(d.getDate() - 1);
+    return startOfDay(d);
+};
+/**
+ * Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket.
+ * `now` defaults to the wall clock; pass it to pin "today" in tests or a fixed-date view.
+ */
+function sectionizeByDay(rows, getTime, labels = exports.DEFAULT_DAY_LABELS, now = Date.now()) {
+    const todayStart = startOfDay(toDate(now));
+    const yesterdayStart = startOfPrevDay(todayStart);
+    const today = [];
+    const yesterday = [];
+    const earlier = [];
+    for (const row of rows) {
+        const dayStart = startOfDay(toDate(getTime(row)));
+        if (dayStart === todayStart)
+            today.push(row);
+        else if (dayStart === yesterdayStart)
+            yesterday.push(row);
+        else
+            earlier.push(row);
+    }
+    const sections = [];
+    if (today.length)
+        sections.push({ label: labels.today, rows: today });
+    if (yesterday.length)
+        sections.push({ label: labels.yesterday, rows: yesterday });
+    if (earlier.length)
+        sections.push({ label: labels.earlier, rows: earlier });
+    return sections;
+}
+/** Merges only adjacent rows sharing a key; a null/undefined key never merges with anything. */
+function groupConsecutive(rows, getKey) {
+    var _a;
+    const groups = [];
+    for (const row of rows) {
+        const key = (_a = getKey(row)) !== null && _a !== void 0 ? _a : null;
+        const last = groups[groups.length - 1];
+        if (key !== null && last && last.key === key) {
+            last.rows.push(row);
+        }
+        else {
+            groups.push({ key, rows: [row] });
+        }
+    }
+    return groups;
+}
+/** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
+function formatCount(value, max = 99) {
+    const safe = Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+    return safe > max ? `${max}+` : String(safe);
+}
+const MINUTE = 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const WEEK = DAY * 7;
+exports.DEFAULT_RELATIVE_TIME_LABELS = {
+    justNow: "Just now",
+    minutesAgo: (count) => `${count}m ago`,
+    hoursAgo: (count) => `${count}h ago`,
+    daysAgo: (count) => `${count}d ago`,
+};
+/** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
+function formatRelativeTime(value, now = Date.now(), { labels = exports.DEFAULT_RELATIVE_TIME_LABELS, locale = "en-US" } = {}) {
+    const then = toDate(value);
+    const nowMs = typeof now === "number" ? now : now.getTime();
+    const diffSec = Math.max(0, Math.round((nowMs - then.getTime()) / 1000));
+    if (diffSec < MINUTE)
+        return labels.justNow;
+    if (diffSec < HOUR)
+        return labels.minutesAgo(Math.floor(diffSec / MINUTE));
+    if (diffSec < DAY)
+        return labels.hoursAgo(Math.floor(diffSec / HOUR));
+    if (diffSec < WEEK)
+        return labels.daysAgo(Math.floor(diffSec / DAY));
+    return then.toLocaleDateString(locale, { day: "2-digit", month: "short" });
+}
+/** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
+function useAnchoredPanelHeight(ref, options) {
+    var _a, _b;
+    const min = (_a = options === null || options === void 0 ? void 0 : options.min) !== null && _a !== void 0 ? _a : 280;
+    const gutter = (_b = options === null || options === void 0 ? void 0 : options.gutter) !== null && _b !== void 0 ? _b : 24;
+    const [height, setHeight] = (0, react_1.useState)(min);
+    (0, react_1.useLayoutEffect)(() => {
+        const measure = () => {
+            var _a, _b;
+            const top = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) !== null && _b !== void 0 ? _b : 0;
+            setHeight(Math.max(min, window.innerHeight - top - gutter));
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        return () => window.removeEventListener("resize", measure);
+    }, [ref, min, gutter]);
+    return height;
+}

package/dist/Components/NotificationCenter/center/CenterPanel.d.ts

@@ -0,0 +1,15 @@
+import type { NotificationCenterLabels, NotificationCenterTab } from "./NotificationCenterProps";
+export declare const PANEL_ROW_LIMIT = 20;
+interface CenterPanelProps {
+    isSheet: boolean;
+    tab: NotificationCenterTab;
+    onTabChange: (tab: NotificationCenterTab) => void;
+    labels: NotificationCenterLabels;
+    titleId: string;
+    onClose: () => void;
+    onOpenInbox?: () => void;
+    onOpenSettings?: () => void;
+    "data-testid"?: string;
+}
+declare const CenterPanel: import("react").ForwardRefExoticComponent<CenterPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CenterPanel;

package/dist/Components/NotificationCenter/center/CenterPanel.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PANEL_ROW_LIMIT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const IconButton_1 = __importDefault(require("../../IconButton/IconButton"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const Tabs_1 = __importDefault(require("../../Tabs/Tabs"));
+const TabsContext_1 = require("../../Tabs/TabsContext");
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const filledSurface_1 = require("../../../Theme/tokens/builders/filledSurface");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const grouping_1 = require("../core/grouping");
+const PanelStates_1 = require("./PanelStates");
+const PanelRows_1 = require("./PanelRows");
+const useArrivals_1 = require("./useArrivals");
+exports.PANEL_ROW_LIMIT = 20;
+const TAB_COUNT_CAP = 99;
+const CenterPanel = (0, react_1.forwardRef)(function CenterPanel({ isSheet, tab, onTabChange, labels, titleId, onClose, onOpenInbox, onOpenSettings, "data-testid": testId }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const center = (0, NotificationCenterProvider_1.useNotificationCenter)();
+    const { lists, counts, categories, features, format, now, status, isOffline, loadedAt, appName, actions } = center;
+    const bodyRef = (0, react_1.useRef)(null);
+    const all = tab === "needsYou" ? lists.needsYou : lists.activity;
+    const ids = (0, react_1.useMemo)(() => all.map((item) => item.entry.id), [all]);
+    const { heldIds, reveal, track } = (0, useArrivals_1.useArrivals)(ids, tab, bodyRef);
+    const visible = (0, react_1.useMemo)(() => {
+        const held = new Set(heldIds);
+        return all.slice(0, exports.PANEL_ROW_LIMIT).filter((item) => !held.has(item.entry.id));
+    }, [all, heldIds]);
+    const groups = (0, react_1.useMemo)(() => tab === "needsYou"
+        ? (0, grouping_1.groupByCategory)(visible, categories, center.labels.otherCategory)
+        : (0, grouping_1.groupByDay)(visible, format, now), [tab, visible, categories, center.labels.otherCategory, format, now]);
+    const isReady = status === "ready";
+    const hasUnreadHere = all.some((item) => item.entry.isRead === false && !item.state.isHidden);
+    const canMarkAll = tab === "activity" ? counts.unread > 0 || hasUnreadHere : hasUnreadHere;
+    const cap = (count) => (count > TAB_COUNT_CAP ? labels.overflowCount(TAB_COUNT_CAP) : format.number(count));
+    const tabItems = [
+        { id: "needsYou", label: labels.needsYouTab, count: isReady && counts.needsYou > 0 ? cap(counts.needsYou) : undefined },
+        { id: "activity", label: labels.activityTab, count: isReady && counts.unread > 0 ? cap(counts.unread) : undefined },
+    ];
+    const openItem = (0, react_1.useCallback)((item, event) => {
+        actions.open(item.entry, event);
+        onClose();
+    }, [actions, onClose]);
+    const pill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const banner = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, "neutral"), colors.surfaceRaised);
+    const rule = (0, surfaceRaised_1.raisedRule)(colors);
+    const toolSize = isSheet ? "md" : "sm";
+    const iconPx = isSheet ? 18 : 16;
+    const markAll = () => actions.markAllRead({ zone: tab });
+    let content;
+    if (status === "loading")
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelSkeleton, { isSheet: isSheet });
+    else if (status === "error")
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelError, { labels: labels, onRetry: actions.retryLoad });
+    else if (status === "noAccess")
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelNoAccess, { labels: labels, appName: appName });
+    else if (groups.length === 0)
+        content = (0, jsx_runtime_1.jsx)(PanelStates_1.PanelEmpty, { labels: labels, tab: tab });
+    else
+        content = (0, jsx_runtime_1.jsx)(PanelRows_1.PanelRows, { groups: groups, variant: isSheet ? "phone" : "panel", format: format, onOpenItem: openItem });
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: ref, direction: "column", flex: 1, minH: 0, w: "100%", bg: colors.surfaceRaised, color: colors.text[800], "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", justify: "space-between", gap: 2, flexShrink: 0, minH: isSheet ? "3.5rem" : "3rem", pl: 4, pr: 2, pt: 2, pb: 1, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Heading, { as: "h2", id: titleId, fontSize: "1rem", fontWeight: 600, lineHeight: "1.5", color: colors.header[900], children: labels.title }), (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1, children: [isReady && features.markAllRead && (isSheet ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.markAllRead, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.markAllRead, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.CheckCheck, boxSize: "1.125rem", "aria-hidden": "true" }), isDisabled: isOffline || !canMarkAll, onClick: markAll }) })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", label: labels.markAllRead, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCheck, { size: iconPx, "aria-hidden": "true" }), isDisabled: isOffline || !canMarkAll, onClick: markAll }))), onOpenSettings && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labels.settings, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: toolSize, variant: "ghost", colorScheme: "gray", "aria-label": labels.settings, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.Settings, boxSize: `${iconPx / 16}rem`, "aria-hidden": "true" }), onClick: onOpenSettings }) })), isSheet && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "md", variant: "ghost", colorScheme: "gray", "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.X, boxSize: "1.125rem", "aria-hidden": "true" }), onClick: onClose }))] })] }), isOffline && ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { role: "status", align: "flex-start", gap: 2, flexShrink: 0, px: 4, py: 2, fontSize: "xs", lineHeight: "1.5", bg: banner.bg, color: banner.fg, borderBottom: `1px solid ${rule}`, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.WifiOff, boxSize: "0.875rem", mt: "0.125rem", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: labels.offlineBanner(loadedAt === undefined ? undefined : format.absolute(loadedAt, now)) })] })), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { px: 2, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { id: `${titleId}-tabs`, items: tabItems, value: tab, onChange: (value) => onTabChange(value), variant: "line", size: isSheet ? "md" : "sm", isFitted: true, "aria-label": labels.tabsLabel }) }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { ref: bodyRef, role: "tabpanel", "aria-labelledby": (0, TabsContext_1.tabId)(`${titleId}-tabs`, tab), "aria-busy": status === "loading" ? true : undefined, tabIndex: -1, flex: 1, minH: 0, overflowY: "auto", position: "relative", sx: {
+                    overscrollBehavior: "contain",
+                    ...(0, scrollbar_1.scrollbarStyles)(colors, "hover"),
+                    "&:focus-visible": { outline: "none", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors) },
+                }, ...track, children: [heldIds.length > 0 && ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "sticky", top: 2, zIndex: 5, h: 0, display: "flex", justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: isSheet ? "md" : "xs", mt: 2, h: isSheet ? undefined : "1.75rem", borderRadius: "full", "aria-label": labels.newCountName(heldIds.length), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14, "aria-hidden": "true" }), label: labels.newCount(heldIds.length), onClick: reveal, sx: {
+                                bg: pill.fill,
+                                color: pill.color,
+                                boxShadow: "md",
+                                pointerEvents: "auto",
+                                "&:hover:not(:disabled)": { bg: pill.hoverFill, color: pill.hoverColor },
+                                "&:active:not(:disabled)": { bg: pill.activeFill, color: pill.activeColor },
+                            } }) })), status === "loading" && (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: labels.loading }), content] }), onOpenInbox && ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { flexShrink: 0, p: 2, borderTop: `1px solid ${rule}`, children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: isSheet ? "md" : "sm", variant: "ghost", colorScheme: "gray", width: "100%", label: labels.openInbox, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: iconPx, "aria-hidden": "true" }), onClick: onOpenInbox }) }))] }));
+});
+exports.default = CenterPanel;

package/dist/Components/NotificationCenter/center/NotificationCenter.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationCenterProps } from "./NotificationCenterProps";
+/** Bell with the server's Needs-you count (99+), else a dot for unread Activity; opens a two-tab panel or, on phones, a sheet. */
+declare const NotificationCenter: (props: NotificationCenterProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationCenter;

package/dist/Components/NotificationCenter/center/NotificationCenter.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const Drawer_1 = __importStar(require("../../Drawer/Drawer"));
+const NotificationBell_1 = __importDefault(require("../../NotificationBell/NotificationBell"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const NotificationCenterProvider_1 = require("../core/NotificationCenterProvider");
+const centerLabels_1 = require("./centerLabels");
+const useIsSheet_1 = require("./useIsSheet");
+const CenterPanel_1 = __importDefault(require("./CenterPanel"));
+const TOAST_SELECTOR = '[id^="chakra-toast-manager"]';
+const TAB_SELECTOR = '[role="tab"][aria-selected="true"]';
+const CenterBody = ({ variant, isOpen, onOpenChange, defaultTab, labels: overrides, onOpenInbox, onOpenSettings, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { counts, labels, format, lists, status, actions } = (0, NotificationCenterProvider_1.useNotificationCenter)();
+    const text = (0, react_1.useMemo)(() => (0, centerLabels_1.withCenterLabels)(labels, format, overrides), [labels, format, overrides]);
+    const isSheet = (0, useIsSheet_1.useIsSheet)(variant);
+    const titleId = (0, react_1.useId)();
+    const bellRef = (0, react_1.useRef)(null);
+    const panelRef = (0, react_1.useRef)(null);
+    const [ownOpen, setOwnOpen] = (0, react_1.useState)(false);
+    const open = isOpen === undefined ? ownOpen : isOpen;
+    const setOpen = (0, react_1.useCallback)((next) => {
+        setOwnOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const close = (0, react_1.useCallback)(() => setOpen(false), [setOpen]);
+    const startTab = () => {
+        if (defaultTab !== undefined)
+            return defaultTab;
+        const holdsAny = lists.needsYou.some((item) => !item.state.isHidden);
+        return status !== "ready" || holdsAny ? "needsYou" : "activity";
+    };
+    const [tab, setTab] = (0, react_1.useState)(startTab);
+    const [wasOpen, setWasOpen] = (0, react_1.useState)(open);
+    if (open !== wasOpen) {
+        setWasOpen(open);
+        if (open)
+            setTab(startTab());
+    }
+    (0, react_1.useEffect)(() => {
+        if (!open || isSheet)
+            return undefined;
+        const onPointerDown = (event) => {
+            var _a, _b;
+            const target = event.target;
+            const inside = ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = bellRef.current) === null || _b === void 0 ? void 0 : _b.contains(target));
+            if (!inside && !target.closest(TOAST_SELECTOR))
+                close();
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open, isSheet, close]);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return undefined;
+        const onKeyDown = (event) => {
+            const isUndo = (event.ctrlKey || event.metaKey) && !event.shiftKey && event.key.toLowerCase() === "z";
+            const isTyping = event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLInputElement;
+            if (isUndo && !isTyping && actions.undoLast())
+                event.preventDefault();
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [open, actions]);
+    const focusTarget = (0, react_1.useMemo)(() => ({ get current() { var _a, _b; return (_b = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(TAB_SELECTOR)) !== null && _b !== void 0 ? _b : null; } }), []);
+    const panel = ((0, jsx_runtime_1.jsx)(CenterPanel_1.default, { ref: panelRef, isSheet: isSheet, tab: tab, onTabChange: setTab, labels: text, titleId: titleId, onClose: close, onOpenInbox: onOpenInbox, onOpenSettings: onOpenSettings, "data-testid": testId ? `${testId}-panel` : undefined }));
+    const bellProps = {
+        ref: bellRef,
+        count: counts.needsYou,
+        showDot: counts.unread > 0,
+        "aria-label": text.bell(counts),
+        isOpen: open,
+    };
+    if (isSheet) {
+        return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { display: "inline-flex", "data-testid": testId ? `${testId}-bell` : undefined, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.title, isDisabled: open, children: (0, jsx_runtime_1.jsx)(Primitives_1.Box, { display: "inline-flex", children: (0, jsx_runtime_1.jsx)(NotificationBell_1.default, { ...bellProps, onClick: () => setOpen(!open) }) }) }), (0, jsx_runtime_1.jsx)(Drawer_1.default, { isOpen: open, onClose: close, placement: "bottom", size: "full", hideCloseButton: true, "aria-labelledby": titleId, initialFocusRef: focusTarget, finalFocusRef: bellRef, contentProps: {
+                        bg: colors.surfaceRaised,
+                        borderRadius: 0,
+                        border: "none",
+                        sx: { paddingTop: "env(safe-area-inset-top)", paddingBottom: "env(safe-area-inset-bottom)" },
+                    }, children: (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflow: "hidden", children: panel }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Popover, { isOpen: open, onOpen: () => setOpen(true), onClose: close, placement: "bottom-end", gutter: 8, isLazy: true, lazyBehavior: "keepMounted", closeOnBlur: false, initialFocusRef: focusTarget, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Box, { display: "inline-flex", "data-testid": testId ? `${testId}-bell` : undefined, children: (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.title, isDisabled: open, children: (0, jsx_runtime_1.jsx)(Primitives_1.Box, { display: "inline-flex", children: (0, jsx_runtime_1.jsx)(Primitives_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(NotificationBell_1.default, { ...bellProps }) }) }) }) }), (0, jsx_runtime_1.jsx)(Primitives_1.Portal, { children: (0, jsx_runtime_1.jsx)(Primitives_1.PopoverContent, { w: "25rem", maxW: "calc(100vw - 3rem)", p: 0, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: radii_1.RADIUS_ROLE.float, bg: colors.surfaceRaised, minH: "18.75rem", maxH: "min(40rem, calc(100dvh - 15rem))", _focus: { outline: "none", boxShadow: undefined }, _focusVisible: { outline: "none" }, "aria-label": text.title, children: panel }) })] }));
+};
+/** Bell with the server's Needs-you count (99+), else a dot for unread Activity; opens a two-tab panel or, on phones, a sheet. */
+const NotificationCenter = (props) => {
+    const { variant, onOpenInbox, onOpenSettings, isOpen, onOpenChange, defaultTab, labels, "data-testid": testId } = props;
+    return ((0, jsx_runtime_1.jsx)(NotificationCenterProvider_1.NotificationScope, { source: props, children: (0, jsx_runtime_1.jsx)(CenterBody, { variant: variant, onOpenInbox: onOpenInbox, onOpenSettings: onOpenSettings, isOpen: isOpen, onOpenChange: onOpenChange, defaultTab: defaultTab, labels: labels, "data-testid": testId }) }));
+};
+exports.default = NotificationCenter;