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

package/dist/Components/NotificationCenter/core/useNotificationEngine.js

@@ -0,0 +1,415 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotificationEngine = exports.CLOCK_TICK_MS = exports.ARCHIVE_FOLD_MS = exports.DECISION_FOLD_MS = exports.UNDO_WINDOW_MS = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const Toaster_1 = require("../../Toaster/Toaster");
+const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+const actionError_1 = require("./actionError");
+const format_1 = require("./format");
+const grouping_1 = require("./grouping");
+const labels_1 = require("./labels");
+const overlay_1 = require("./overlay");
+exports.UNDO_WINDOW_MS = 6000;
+exports.DECISION_FOLD_MS = 900;
+exports.ARCHIVE_FOLD_MS = 220;
+exports.CLOCK_TICK_MS = 60000;
+const TOAST_POSITION = "bottom-right";
+const ZERO_WIDTH_SPACE = String.fromCodePoint(0x200b);
+const unique = (ids) => [...new Set(ids)];
+const hasActionId = (entry, actionId) => Boolean(entry.actions && entry.actions.some((action) => action.id === actionId));
+const isLive = (item) => item !== undefined;
+const createEngineActions = (ctx) => {
+    const { latest, windows, undoOrder, mounted, batches, dispatch, announce } = ctx;
+    const nextBatch = () => {
+        batches.current += 1;
+        return `batch-${batches.current}`;
+    };
+    const toast = (props) => latest.current.toaster.showToast({ position: TOAST_POSITION, ...props });
+    const closeWindow = (win) => {
+        win.timers.forEach(clearTimeout);
+        if (win.toastId !== undefined)
+            latest.current.toaster.close(win.toastId);
+        windows.current.delete(win.batch);
+        undoOrder.current = undoOrder.current.filter((batch) => batch !== win.batch);
+    };
+    const sendWindow = (batch) => {
+        const win = windows.current.get(batch);
+        if (!win)
+            return;
+        closeWindow(win);
+        dispatch({ type: "fold", batch });
+        dispatch({ type: "send", batch });
+        win.send();
+    };
+    const undoWindow = (batch) => {
+        const win = windows.current.get(batch);
+        if (!win)
+            return false;
+        closeWindow(win);
+        dispatch({ type: "drop", batch });
+        const { labels } = latest.current;
+        announce(win.kind === "decision" ? labels.decisionUndone : labels.undone);
+        return true;
+    };
+    const openWindow = (win, foldAfter, props) => {
+        const timers = [];
+        if (foldAfter !== null)
+            timers.push(setTimeout(() => dispatch({ type: "fold", batch: win.batch }), foldAfter));
+        timers.push(setTimeout(() => sendWindow(win.batch), exports.UNDO_WINDOW_MS));
+        const record = { ...win, timers };
+        windows.current.set(win.batch, record);
+        undoOrder.current = [...undoOrder.current, win.batch];
+        const { labels } = latest.current;
+        record.toastId = toast({
+            ...props,
+            duration: null,
+            actions: () => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", label: labels.undo, onClick: () => undoWindow(win.batch) })),
+        });
+    };
+    const sendThen = (batch, call, failTitle) => {
+        Promise.resolve()
+            .then(call)
+            .then(() => {
+            if (mounted.current)
+                dispatch({ type: "settle", batch });
+        }, () => {
+            if (!mounted.current)
+                return;
+            dispatch({ type: "drop", batch });
+            toast({ status: "error", title: failTitle });
+        });
+    };
+    const retryButton = (ids) => {
+        const renderRetry = (onClose) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: controlSizes_1.BUTTON_SIZES.xs.iconSize, "aria-hidden": "true" }), label: latest.current.labels.retry, onClick: () => {
+                onClose();
+                retryMany(ids);
+            } }));
+        return renderRetry;
+    };
+    const finishDecisions = (batch, decision, results) => {
+        var _a, _b;
+        if (!mounted.current)
+            return;
+        const { labels } = latest.current;
+        const outcomes = {};
+        results.forEach((result) => {
+            outcomes[result.id] = { batch, error: result.error };
+        });
+        dispatch({ type: "settleDecisions", outcomes });
+        const ofKind = (kind) => results.filter((result) => { var _a; return ((_a = result.error) === null || _a === void 0 ? void 0 : _a.kind) === kind; });
+        const soleMessage = (list) => { var _a; return (list.length === 1 ? (_a = list[0].error) === null || _a === void 0 ? void 0 : _a.message : undefined); };
+        const failed = ofKind("failed");
+        const conflicts = ofKind("conflict");
+        const forbidden = ofKind("forbidden");
+        const needsReason = ofKind("reasonRequired");
+        if (failed.length) {
+            toast({
+                status: "error",
+                title: labels.decisionFailed(decision.label, failed.length),
+                description: (_a = soleMessage(failed)) !== null && _a !== void 0 ? _a : labels.failedMessage,
+                actions: retryButton(failed.map((result) => result.id)),
+            });
+        }
+        if (conflicts.length) {
+            const title = labels.conflicted(conflicts.length);
+            toast({ status: "info", title, description: soleMessage(conflicts) });
+            announce(title);
+        }
+        if (forbidden.length) {
+            toast({ status: "error", title: labels.forbidden(forbidden.length), description: soleMessage(forbidden) });
+        }
+        if (needsReason.length) {
+            const title = labels.reasonNeeded(decision.label);
+            toast({ status: "warning", title, description: (_b = soleMessage(needsReason)) !== null && _b !== void 0 ? _b : labels.reasonRequiredMessage });
+            announce(title);
+        }
+    };
+    const sendDecisions = (batch, targets, decision) => {
+        const { onAction } = latest.current.source;
+        if (!onAction || !targets.length)
+            return;
+        const sends = targets.map((entry) => {
+            const action = entry.actions && entry.actions.find((candidate) => candidate.id === decision.actionId);
+            if (!action)
+                return Promise.resolve({ id: entry.id, error: { kind: "conflict" } });
+            return Promise.resolve()
+                .then(() => onAction(entry, action, decision.reason))
+                .then(() => ({ id: entry.id }), (error) => ({ id: entry.id, error: (0, actionError_1.toNotificationActionError)(error) }));
+        });
+        Promise.all(sends).then((results) => finishDecisions(batch, decision, results));
+    };
+    const retryMany = (ids) => {
+        const { source, live } = latest.current;
+        if (source.isOffline)
+            return;
+        const byDecision = new Map();
+        unique(ids)
+            .map((id) => live.byId.get(id))
+            .filter(isLive)
+            .forEach(({ entry, state }) => {
+            if (state.status !== "failed" || !state.decision)
+                return;
+            const group = byDecision.get(state.decision);
+            if (group)
+                group.push(entry);
+            else
+                byDecision.set(state.decision, [entry]);
+        });
+        byDecision.forEach((group, decision) => {
+            const batch = nextBatch();
+            dispatch({ type: "retry", batch, ids: group.map((entry) => entry.id) });
+            sendDecisions(batch, group, decision);
+        });
+    };
+    const setRead = (ids, read) => {
+        const { source, live, labels } = latest.current;
+        const { onMarkRead } = source;
+        if (!onMarkRead || source.isOffline)
+            return;
+        const targets = unique(ids).filter((id) => {
+            const item = live.byId.get(id);
+            return item !== undefined && item.entry.isRead !== undefined && item.entry.isRead !== read;
+        });
+        if (!targets.length)
+            return;
+        const batch = nextBatch();
+        dispatch({ type: "flag", key: "read", batch, ids: targets, value: read, phase: "sending" });
+        sendThen(batch, () => onMarkRead(targets, read), labels.readFailed(read));
+    };
+    const actions = {
+        open: (entry, event, action) => {
+            const { source, live } = latest.current;
+            const item = live.byId.get(entry.id);
+            if (item && item.entry.isRead === false)
+                setRead([entry.id], true);
+            source.onOpen(action && action.href ? { ...entry, href: action.href } : entry, event, action);
+        },
+        decide: (ids, action, reason) => {
+            var _a, _b;
+            const { source, live, labels } = latest.current;
+            if (!source.onAction || source.isOffline)
+                return;
+            const items = unique(ids)
+                .map((id) => live.byId.get(id))
+                .filter(isLive)
+                .filter((item) => item.state.status === "open" && hasActionId(item.entry, action.id));
+            if (!items.length)
+                return;
+            const trimmed = reason === undefined ? "" : reason.trim();
+            const decision = {
+                actionId: action.id,
+                label: action.label,
+                doneLabel: (_a = action.doneLabel) !== null && _a !== void 0 ? _a : action.label,
+                intent: (_b = action.intent) !== null && _b !== void 0 ? _b : "neutral",
+                reason: trimmed ? trimmed : undefined,
+            };
+            const targetIds = items.map((item) => item.entry.id);
+            const batch = nextBatch();
+            dispatch({ type: "decide", batch, ids: targetIds, decision });
+            const subject = items.length > 1 ? labels.requests(items.length) : items[0].entry.subject;
+            announce(labels.decidedAnnouncement(decision.doneLabel, subject));
+            const decided = items.map((item) => item.entry);
+            openWindow({ batch, kind: "decision", ids: targetIds, send: () => sendDecisions(batch, decided, decision) }, exports.DECISION_FOLD_MS, {
+                status: decision.intent === "negative" ? "info" : "success",
+                title: labels.decided(decision.doneLabel, subject),
+                description: decision.reason ? labels.reasonQuote(decision.reason) : undefined,
+            });
+        },
+        undo: (id) => {
+            const hit = [...windows.current.values()].find((win) => win.ids.includes(id));
+            if (hit)
+                undoWindow(hit.batch);
+        },
+        undoLast: () => {
+            const batch = undoOrder.current[undoOrder.current.length - 1];
+            return batch === undefined ? false : undoWindow(batch);
+        },
+        retry: (id) => retryMany([id]),
+        dismiss: (id) => dispatch({ type: "dismiss", id }),
+        clearReasonRequest: (id) => dispatch({ type: "clearReasonRequest", id }),
+        setRead,
+        markAllRead: (scope) => {
+            const { source, live, labels, counts } = latest.current;
+            const { onMarkAllRead } = source;
+            if (!onMarkAllRead || source.isOffline)
+                return;
+            const query = scope.query ? scope.query.trim() : "";
+            const ids = live.lists[scope.zone]
+                .filter((item) => item.entry.isRead === false &&
+                !item.state.isHidden &&
+                (!scope.category || item.entry.category === scope.category) &&
+                (!query || (0, grouping_1.matchesNotificationQuery)(item.entry, query)))
+                .map((item) => item.entry.id);
+            const wholeActivity = scope.zone === "activity" && !scope.category && !query;
+            const count = wholeActivity ? Math.max(ids.length, counts.unread) : ids.length;
+            if (!count)
+                return;
+            const batch = nextBatch();
+            dispatch({ type: "markAll", batch, scope, ids });
+            const title = labels.markedRead(count);
+            announce(title);
+            openWindow({ batch, kind: "markAll", ids, send: () => sendThen(batch, () => onMarkAllRead(scope), labels.markAllFailed) }, null, { status: "success", title });
+        },
+        archive: (ids) => {
+            const { source, live, labels } = latest.current;
+            const { onArchive } = source;
+            if (!onArchive || source.isOffline)
+                return;
+            const items = unique(ids)
+                .map((id) => live.byId.get(id))
+                .filter(isLive)
+                .filter((item) => item.state.zone === "activity" && !item.state.isHidden);
+            if (!items.length)
+                return;
+            const targetIds = items.map((item) => item.entry.id);
+            const batch = nextBatch();
+            dispatch({ type: "flag", key: "archived", batch, ids: targetIds, value: true, phase: "undo" });
+            const title = labels.archived(targetIds.length);
+            announce(title);
+            openWindow({ batch, kind: "archive", ids: targetIds, send: () => sendThen(batch, () => onArchive(targetIds), labels.archiveFailed) }, exports.ARCHIVE_FOLD_MS, { status: "success", title, description: targetIds.length === 1 ? (0, grouping_1.plainTitle)(items[0].entry.title) : undefined });
+        },
+        restore: (ids) => {
+            const { source, live, labels } = latest.current;
+            const { onRestore } = source;
+            if (!onRestore || source.isOffline)
+                return;
+            const targets = unique(ids).filter((id) => {
+                const item = live.byId.get(id);
+                return item !== undefined && item.state.zone === "archived";
+            });
+            if (!targets.length)
+                return;
+            const batch = nextBatch();
+            dispatch({ type: "flag", key: "archived", batch, ids: targets, value: false, phase: "sending" });
+            toast({ status: "success", title: labels.restored });
+            announce(labels.restored);
+            sendThen(batch, () => onRestore(targets), labels.restoreFailed);
+        },
+        extraActionsFor: (entry) => {
+            const { extraActions } = latest.current.source;
+            return extraActions ? extraActions(entry) : [];
+        },
+        runExtraAction: (entry, extra) => {
+            const { labels } = latest.current;
+            Promise.resolve()
+                .then(() => extra.onSelect(entry))
+                .then(() => {
+                if (mounted.current && extra.doneLabel)
+                    toast({ status: "success", title: extra.doneLabel });
+            }, () => {
+                if (mounted.current)
+                    toast({ status: "error", title: labels.extraFailed(extra.label) });
+            });
+        },
+        loadMore: () => {
+            const { onLoadMore } = latest.current.source;
+            if (onLoadMore)
+                onLoadMore();
+        },
+        retryLoad: () => {
+            const { onRetry } = latest.current.source;
+            if (onRetry)
+                onRetry();
+        },
+        announce,
+        flush: () => {
+            [...windows.current.keys()].forEach(sendWindow);
+        },
+    };
+    return actions;
+};
+const useNotificationEngine = (source) => {
+    const { entries, counts, categories, locale = labels_1.DEFAULT_NOTIFICATION_LOCALE, labels: labelOverrides, status = "ready", isOffline = false, hasMore = false, isLoadingMore = false, loadedAt, appName, } = source;
+    const toaster = (0, Toaster_1.useToaster)();
+    const [overlay, dispatch] = (0, react_1.useReducer)(overlay_1.overlayReducer, overlay_1.EMPTY_OVERLAY);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const [now, setNow] = (0, react_1.useState)(() => Date.now());
+    const cache = (0, react_1.useRef)(new WeakMap());
+    const labels = (0, react_1.useMemo)(() => (0, labels_1.resolveNotificationLabels)(locale, labelOverrides), [locale, labelOverrides]);
+    const format = (0, react_1.useMemo)(() => (0, format_1.createNotificationFormatter)(locale, labels), [locale, labels]);
+    const live = (0, react_1.useMemo)(() => (0, overlay_1.buildLiveLists)(entries, overlay, categories, cache.current), [entries, overlay, categories]);
+    const { needsYou: serverNeedsYou, unread: serverUnread } = counts;
+    const liveCounts = (0, react_1.useMemo)(() => (0, overlay_1.optimisticCounts)(live, overlay, categories, { needsYou: serverNeedsYou, unread: serverUnread }), [live, overlay, categories, serverNeedsYou, serverUnread]);
+    const latest = (0, react_1.useRef)({ source, labels, live, counts: liveCounts, toaster });
+    (0, react_1.useLayoutEffect)(() => {
+        latest.current = { source, labels, live, counts: liveCounts, toaster };
+    });
+    const windows = (0, react_1.useRef)(new Map());
+    const undoOrder = (0, react_1.useRef)([]);
+    const mounted = (0, react_1.useRef)(true);
+    const batches = (0, react_1.useRef)(0);
+    const flip = (0, react_1.useRef)(false);
+    const announce = (0, react_1.useCallback)((message) => {
+        flip.current = !flip.current;
+        setAnnouncement(flip.current ? `${message}${ZERO_WIDTH_SPACE}` : message);
+    }, []);
+    const actions = (0, react_1.useMemo)(() => createEngineActions({ latest, windows, undoOrder, mounted, batches, dispatch, announce }), [announce]);
+    const find = (0, react_1.useCallback)((id) => live.byId.get(id), [live]);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            actions.flush();
+        };
+    }, [actions]);
+    (0, react_1.useEffect)(() => {
+        const onPageHide = () => actions.flush();
+        const onVisibility = () => {
+            if (document.visibilityState === "hidden")
+                actions.flush();
+        };
+        window.addEventListener("pagehide", onPageHide);
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => {
+            window.removeEventListener("pagehide", onPageHide);
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }, [actions]);
+    (0, react_1.useEffect)(() => {
+        const id = setInterval(() => setNow(Date.now()), exports.CLOCK_TICK_MS);
+        return () => clearInterval(id);
+    }, []);
+    const countsKey = `${serverNeedsYou}|${serverUnread}`;
+    const lastCounts = (0, react_1.useRef)(countsKey);
+    (0, react_1.useEffect)(() => {
+        if (lastCounts.current === countsKey)
+            return;
+        lastCounts.current = countsKey;
+        dispatch({ type: "countsChanged" });
+    }, [countsKey]);
+    (0, react_1.useEffect)(() => {
+        dispatch({ type: "reconcile", entries });
+    }, [entries]);
+    const seen = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (status !== "ready")
+            return;
+        const newest = entries.reduce((max, entry) => Math.max(max, entry.createdAt), 0);
+        const known = seen.current;
+        seen.current = { ids: new Set(entries.map((entry) => entry.id)), newest: Math.max(newest, known ? known.newest : 0) };
+        if (!known)
+            return;
+        const fresh = entries.filter((entry) => !known.ids.has(entry.id) && entry.createdAt > known.newest && !entry.archived);
+        if (fresh.length === 1)
+            announce(labels.arrivedOne((0, grouping_1.plainTitle)(fresh[0].title)));
+        else if (fresh.length > 1)
+            announce(labels.arrivedMany(fresh.length));
+    }, [entries, status, labels, announce]);
+    const decide = Boolean(source.onAction);
+    const markRead = Boolean(source.onMarkRead);
+    const markAllRead = Boolean(source.onMarkAllRead);
+    const archive = Boolean(source.onArchive);
+    const restore = Boolean(source.onRestore);
+    const loadMore = Boolean(source.onLoadMore);
+    const features = (0, react_1.useMemo)(() => ({ decide, markRead, markAllRead, archive, restore, loadMore }), [decide, markRead, markAllRead, archive, restore, loadMore]);
+    const shared = (0, react_1.useMemo)(() => ({ labels, format, now, categories, features, isOffline, appName, actions }), [labels, format, now, categories, features, isOffline, appName, actions]);
+    const value = (0, react_1.useMemo)(() => ({ ...shared, lists: live.lists, counts: liveCounts, status, loadedAt, hasMore, isLoadingMore, find }), [shared, live, liveCounts, status, loadedAt, hasMore, isLoadingMore, find]);
+    return { value, shared, announcement };
+};
+exports.useNotificationEngine = useNotificationEngine;

package/dist/Components/NotificationCenter/inbox/InboxList.d.ts

@@ -0,0 +1,17 @@
+import type { RefCallback } from "react";
+import type { LiveNotificationEntry, NotificationGroup, NotificationThread } from "../core/NotificationEngineProps";
+import type { NotificationRowOpenEvent } from "../row/NotificationRowProps";
+interface InboxListProps {
+    groups: NotificationGroup[];
+    isPhone: boolean;
+    selectedId: string | null;
+    checked: ReadonlySet<string>;
+    openThreads: ReadonlySet<string>;
+    idPrefix: string;
+    onOpenRow: (item: LiveNotificationEntry, event: NotificationRowOpenEvent) => void;
+    onCheckedChange?: (item: LiveNotificationEntry, checked: boolean) => void;
+    onThreadToggle: (thread: NotificationThread) => void;
+    linkRefFor: (id: string) => RefCallback<HTMLElement>;
+}
+export declare const InboxList: ({ groups, isPhone, selectedId, checked, openThreads, idPrefix, onOpenRow, onCheckedChange, onThreadToggle, linkRefFor, }: InboxListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/inbox/InboxList.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InboxList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Primitives_1 = require("../../Primitives/Primitives");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const NotificationRow_1 = __importDefault(require("../row/NotificationRow"));
+const InboxList = ({ groups, isPhone, selectedId, checked, openThreads, idPrefix, onOpenRow, onCheckedChange, onThreadToggle, linkRefFor, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const variant = isPhone ? "phone" : "inbox";
+    const rowFor = (item, extra) => ((0, jsx_runtime_1.jsx)(NotificationRow_1.default, { item: item, variant: variant, isSelected: !isPhone && selectedId === item.entry.id, isChecked: checked.has(item.entry.id), onCheckedChange: onCheckedChange, thread: extra.thread, isThreadOpen: extra.isOpen, onThreadToggle: extra.thread ? onThreadToggle : undefined, isThreadChild: extra.isChild, onOpen: onOpenRow, linkRef: linkRefFor(item.entry.id) }, item.entry.id));
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { pb: 2, children: groups.map((group) => {
+            const headingId = `${idPrefix}-group-${group.key}`;
+            return ((0, jsx_runtime_1.jsxs)(react_1.chakra.section, { "aria-labelledby": group.label === null ? undefined : headingId, children: [group.label !== null && ((0, jsx_runtime_1.jsxs)(react_1.chakra.h2, { id: headingId, position: "sticky", top: 0, zIndex: "docked", display: "flex", alignItems: "center", gap: 1.5, m: 0, px: 4, pt: 3, pb: 1.5, bg: colors.surfaceRaised, color: colors.textMuted, fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", children: [(0, jsx_runtime_1.jsx)("span", { children: group.label }), group.count > 0 && (0, jsx_runtime_1.jsx)(react_1.chakra.span, { sx: { fontVariantNumeric: "tabular-nums" }, children: group.count })] })), (0, jsx_runtime_1.jsx)(react_1.chakra.ul, { listStyleType: "none", display: "grid", gap: "0.125rem", m: 0, px: 1.5, py: 0, children: group.threads.flatMap((thread) => {
+                            const isOpen = openThreads.has(thread.key);
+                            const lead = rowFor(thread.lead, { thread: thread.rest.length > 0 ? thread : undefined, isOpen });
+                            return isOpen ? [lead, ...thread.rest.map((item) => rowFor(item, { isChild: true }))] : [lead];
+                        }) })] }, group.key));
+        }) }));
+};
+exports.InboxList = InboxList;

package/dist/Components/NotificationCenter/inbox/InboxStates.d.ts

@@ -0,0 +1,17 @@
+import type { NotificationInboxLabels, NotificationInboxTab } from "./NotificationInboxProps";
+export declare const InboxSkeleton: ({ isPhone, label }: {
+    isPhone: boolean;
+    label: string;
+}) => import("react/jsx-runtime").JSX.Element;
+interface LoadFailureProps {
+    kind: "error" | "noAccess";
+    labels: NotificationInboxLabels;
+    appName?: string;
+    onRetry?: () => void;
+}
+export declare const InboxLoadFailure: ({ kind, labels, appName, onRetry }: LoadFailureProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InboxEmpty: ({ tab, labels }: {
+    tab: NotificationInboxTab;
+    labels: NotificationInboxLabels;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/inbox/InboxStates.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InboxEmpty = exports.InboxLoadFailure = exports.InboxSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 SKELETON_ROWS = 6;
+const InboxSkeleton = ({ isPhone, label }) => ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { direction: "column", gap: 1, px: 2, py: 2, role: "status", "aria-busy": "true", "aria-label": label, children: Array.from({ length: SKELETON_ROWS }, (_, index) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 3, px: 3, py: 2.5, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle", size: isPhone ? "10" : "8" }), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "text", noOfLines: index % 2 === 0 ? 3 : 2, spacing: 2, skeletonHeight: 2 }) })] }, index))) }));
+exports.InboxSkeleton = InboxSkeleton;
+const InboxLoadFailure = ({ kind, labels, appName, onRetry }) => kind === "error" ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.CircleAlert, colorScheme: "error", title: labels.loadErrorTitle, description: labels.loadErrorBody, action: onRetry && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "outline", colorScheme: "gray", label: labels.retry, onClick: onRetry }) })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Lock, colorScheme: "gray", title: labels.noAccessTitle, description: labels.noAccessBody(appName) }));
+exports.InboxLoadFailure = InboxLoadFailure;
+const InboxEmpty = ({ tab, labels }) => {
+    if (tab === "needsYou") {
+        return (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.CircleCheck, colorScheme: "success", title: labels.caughtUpTitle, description: labels.caughtUpBody });
+    }
+    if (tab === "archived") {
+        return (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Archive, colorScheme: "gray", title: labels.archivedEmptyTitle, description: labels.archivedEmptyBody });
+    }
+    return (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Bell, colorScheme: "gray", title: labels.activityEmptyTitle, description: labels.activityEmptyBody });
+};
+exports.InboxEmpty = InboxEmpty;

package/dist/Components/NotificationCenter/inbox/NotificationInbox.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationInboxProps } from "./NotificationInboxProps";
+/** Full-page inbox: Needs you, Activity and Archived tabs, search, a type filter, bulk actions and a reading pane. */
+declare const NotificationInbox: (props: NotificationInboxProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationInbox;