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

package/dist/Components/Notification/Notification.js

@@ -1,110 +1,106 @@
 "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 });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Notification = function (_a) {
-    var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, colors = _a.colors;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var bgColor = (colors === null || colors === void 0 ? void 0 : colors.bgColor) || theme.colors.white;
-    var borderColor = (colors === null || colors === void 0 ? void 0 : colors.borderColor) || theme.colors.gray[200];
-    var textColor = (colors === null || colors === void 0 ? void 0 : colors.textColor) || theme.colors.gray[700];
-    var titleColor = (colors === null || colors === void 0 ? void 0 : colors.titleColor) || theme.colors.gray[800];
-    var warningColor = (colors === null || colors === void 0 ? void 0 : colors.warningColor) || theme.colors.semantic.warning;
-    var errorColor = (colors === null || colors === void 0 ? void 0 : colors.errorColor) || theme.colors.semantic.error;
-    var successColor = (colors === null || colors === void 0 ? void 0 : colors.successColor) || theme.colors.semantic.success;
-    var startDate = (0, react_1.useMemo)(function () { return notification.startDate
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const activationKey_1 = require("../Common/activationKey");
+const CARD_TRANSITION = (0, motion_2.transitionFor)(["box-shadow", "background-color", "border-color"], "base");
+const DISMISS_TRANSITION = (0, motion_2.transitionFor)(["background-color", "color", "transform"], "base");
+const TICK_MS = 60000;
+/** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
+const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
+    const closeTone = (0, statusTone_1.resolveStatusTone)(theme.colors.semantic.error, mode);
+    const bgColor = (_a = colors === null || colors === void 0 ? void 0 : colors.bgColor) !== null && _a !== void 0 ? _a : theme.colors.background[50];
+    const borderColor = (_b = colors === null || colors === void 0 ? void 0 : colors.borderColor) !== null && _b !== void 0 ? _b : theme.colors.boxborder[200];
+    const textColor = (_c = colors === null || colors === void 0 ? void 0 : colors.textColor) !== null && _c !== void 0 ? _c : theme.colors.text[700];
+    const titleColor = (_d = colors === null || colors === void 0 ? void 0 : colors.titleColor) !== null && _d !== void 0 ? _d : (0, outlineRung_1.liftToContrast)(theme.colors.text[800], bgColor, accentText_1.AA_NORMAL_TEXT);
+    // The dot is a graphic on the canvas: `semantic[tone][500]` measures under 3:1 there.
+    const warningColor = (_e = colors === null || colors === void 0 ? void 0 : colors.warningColor) !== null && _e !== void 0 ? _e : theme.colors.semanticText.warning;
+    const errorColor = (_f = colors === null || colors === void 0 ? void 0 : colors.errorColor) !== null && _f !== void 0 ? _f : theme.colors.semanticText.error;
+    const successColor = (_g = colors === null || colors === void 0 ? void 0 : colors.successColor) !== null && _g !== void 0 ? _g : theme.colors.semanticText.success;
+    const dueLabelColor = (0, outlineRung_1.liftToContrast)(theme.colors.orange[500], bgColor, accentText_1.AA_NORMAL_TEXT);
+    const metaColor = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, bgColor, accentText_1.AA_NORMAL_TEXT);
+    const startDate = (0, react_1.useMemo)(() => notification.startDate
         ? new Date(notification.startDate)
-        : null; }, [notification.startDate]);
-    var _c = (0, react_1.useMemo)(function () {
-        var targetDate = notification.dueDate
+        : null, [notification.startDate]);
+    const hasTarget = Boolean(notification.dueDate || notification.endDate);
+    const [now, setNow] = (0, react_1.useState)(() => Date.now());
+    (0, react_1.useEffect)(() => {
+        if (!hasTarget || isLoading)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), TICK_MS);
+        return () => clearInterval(timer);
+    }, [hasTarget, isLoading, notification.dueDate, notification.endDate]);
+    const { timeLabel, diffDays } = (0, react_1.useMemo)(() => {
+        const targetDate = notification.dueDate
             ? new Date(notification.dueDate)
             : notification.endDate
                 ? new Date(notification.endDate)
                 : null;
         if (!targetDate)
             return { timeLabel: "", diffDays: null };
-        var now = new Date();
-        var diffMs = targetDate.getTime() - now.getTime();
-        var diffMinutes = Math.floor(diffMs / (1000 * 60));
-        var diffHours = diffMinutes / 60;
-        var diffDays = diffHours / 24;
-        var toTitle = function (text) {
+        const diffMs = targetDate.getTime() - now;
+        const diffMinutes = Math.floor(diffMs / (1000 * 60));
+        const diffHours = diffMinutes / 60;
+        const diffDays = diffHours / 24;
+        const toTitle = (text) => {
             if (!text)
                 return "Item";
             return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
         };
-        var typeLabel = toTitle(notification.type);
-        var label = "";
+        const typeLabel = toTitle(notification.type);
+        let label;
         if (diffMs < 0) {
-            var overdueMinutes = Math.abs(diffMinutes);
+            const overdueMinutes = Math.abs(diffMinutes);
             if (overdueMinutes < 60)
-                label = "".concat(typeLabel, " overdue by ").concat(overdueMinutes, " minute").concat(overdueMinutes === 1 ? "" : "s", " ago");
+                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"}`;
             else if (overdueMinutes < 1440)
-                label = "".concat(typeLabel, " overdue by ").concat(Math.floor(overdueMinutes / 60), " hour").concat(Math.floor(overdueMinutes / 60) === 1 ? "" : "s", " ago");
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"}`;
             else
-                label = "".concat(typeLabel, " overdue by ").concat(Math.floor(overdueMinutes / 1440), " day").concat(Math.floor(overdueMinutes / 1440) === 1 ? "" : "s", " ago");
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"}`;
         }
         else {
             if (diffMinutes < 60)
-                label = "".concat(typeLabel, " due in ").concat(diffMinutes, " minute").concat(diffMinutes === 1 ? "" : "s");
+                label = `${typeLabel} due in ${diffMinutes} minute${diffMinutes === 1 ? "" : "s"}`;
             else if (diffHours < 24)
-                label = "".concat(typeLabel, " due in ").concat(Math.floor(diffHours), " hour").concat(Math.floor(diffHours) === 1 ? "" : "s");
+                label = `${typeLabel} due in ${Math.floor(diffHours)} hour${Math.floor(diffHours) === 1 ? "" : "s"}`;
             else
-                label = "".concat(typeLabel, " due in ").concat(Math.ceil(diffDays), " day").concat(Math.ceil(diffDays) === 1 ? "" : "s");
+                label = `${typeLabel} due in ${Math.ceil(diffDays)} day${Math.ceil(diffDays) === 1 ? "" : "s"}`;
         }
-        return { timeLabel: label, diffDays: diffDays };
-    }, [notification.dueDate, notification.endDate, notification.type]), timeLabel = _c.timeLabel, diffDays = _c.diffDays;
-    var getStatusColor = function () {
+        return { timeLabel: label, diffDays };
+    }, [notification.dueDate, notification.endDate, notification.type, now]);
+    const getStatusColor = () => {
         if (diffDays === null)
-            return theme.colors.gray[400];
+            return theme.colors.textMuted;
         if (diffDays < 0)
             return errorColor;
         if (diffDays <= 0.04)
             return warningColor;
         if (diffDays <= 1)
-            return theme.colors.yellow[400];
+            return (0, accentText_1.accentTextOnCanvas)(theme.colors.yellow, bgColor);
         return successColor;
     };
-    var TimeIcon = diffDays !== null && diffDays < 0 ? lucide_react_1.AlertCircle : lucide_react_1.Clock;
-    var formattedStartDateTime = (0, react_1.useMemo)(function () {
+    const TimeIcon = diffDays !== null && diffDays < 0 ? lucide_react_1.AlertCircle : lucide_react_1.Clock;
+    const formattedStartDateTime = (0, react_1.useMemo)(() => {
         if (!startDate)
             return "";
-        var options = notification.type === "meeting"
+        const options = notification.type === "meeting"
             ? {
                 day: "2-digit",
                 month: "short",
@@ -118,53 +114,18 @@ var Notification = function (_a) {
             };
         return startDate.toLocaleString("en-US", options);
     }, [startDate, notification.type]);
-    // 🔄 If loading, show skeleton
     if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm" },
-            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "100%" },
-                react_1.default.createElement(react_2.HStack, { spacing: 2 },
-                    react_1.default.createElement(react_2.SkeletonCircle, { size: "4" }),
-                    react_1.default.createElement(react_2.Skeleton, { height: "14px", width: "60%" })),
-                react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
-                    react_1.default.createElement(react_2.SkeletonCircle, { size: "8" }),
-                    react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, flex: "1" },
-                        react_1.default.createElement(react_2.Skeleton, { height: "16px", width: "70%" }),
-                        react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "50%" }))),
-                react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
-                react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
-                    react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "40%" }),
-                    react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "30%" })))));
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "4" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "14px", width: "60%" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "8" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "16px", width: "70%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "50%" })] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "40%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%" })] })] }) }));
     }
-    // 🧩 Normal render
-    return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: "all 0.2s ease", position: "relative" },
-        onClose && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: function (e) {
-                if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    onClose();
-                }
-            }, tabIndex: 0, p: 1, borderRadius: "md", _hover: {
-                bg: theme.colors.red[100],
-                color: theme.colors.red[500],
-                transform: "scale(1.1)",
-            }, transition: "all 0.2s ease" },
-            react_1.default.createElement(lucide_react_1.X, { size: 16 }))),
-        react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "100%" },
-            react_1.default.createElement(react_2.HStack, { spacing: 2 },
-                react_1.default.createElement(react_2.Icon, { as: TimeIcon, color: theme.colors.orange[400], boxSize: 4 }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.orange[500], fontWeight: "semibold" }, timeLabel)),
-            react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
-                react_1.default.createElement(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }),
-                react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
-                    react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.primary[500] }, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type); } }, notification.title),
-                    notification.description && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: textColor }, notification.description)))),
-            react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
-            react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
-                react_1.default.createElement(react_2.HStack, { spacing: 2 },
-                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }),
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formattedStartDateTime)),
-                react_1.default.createElement(react_2.HStack, { spacing: 2 },
-                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }),
-                    notification.host && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.host))),
-                showStatus && (react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))))));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), position: "relative", children: [onClose && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (0, activationKey_1.onActivationKey)(() => onClose()), role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
+                    bg: closeTone.bg,
+                    color: closeTone.fg,
+                    transform: "scale(1.1)",
+                }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), transition: DISMISS_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
+                                            role: "button",
+                                            tabIndex: 0,
+                                            onKeyDown: (0, activationKey_1.onActivationKey)(() => onClick(notification.id, notification.type)),
+                                            _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
+                                        }), children: notification.title }), notification.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: metaColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: metaColor, boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };
 exports.default = Notification;

package/dist/Components/Notification/NotificationProps.d.ts

@@ -1,27 +1,50 @@
+/** The event/task/call record a Notification card renders; startDate/dueDate/endDate drive its countdown text. */
 export type NotificationData = {
+    /** Echoed back to onClick together with `type`. */
     id: number;
+    /** Card heading; also the avatar's initials when `host` is empty. */
     title: string;
+    /** Avatar image; initials from `host` or `title` show without it. */
+    avatarUrl?: string;
+    /** Date-parsable string shown in en-US; meetings add the time, others the year. */
     startDate: string;
+    /** Countdown target, preferred over endDate; the label refreshes every minute. */
     dueDate?: string;
+    /** Countdown target used only when dueDate is absent. */
     endDate?: string;
+    /** Shown in the footer and used for the avatar's initials. */
     host?: string;
     description?: string;
+    /** @deprecated Never read; the status dot colour comes from dueDate/endDate date math. */
     status?: string;
+    /** Prefixes the countdown label ("Task due in 3 days") and is echoed to onClick. */
     type: "task" | "meeting" | "call";
 };
+/** Props for the `Notification` countdown card. */
 export type NotificationProps = {
     notification: NotificationData;
+    /** Shows a dismiss control (also Enter/Space); the card never hides itself. */
     onClose?: () => void;
+    /** Adds a dot coloured by urgency: overdue, under an hour, under a day, later. */
     showStatus?: boolean;
+    /** Fires only when the title text is clicked — the avatar, description and card body are not clickable. */
     onClick?: (id: number, type: "task" | "meeting" | "call") => void;
+    /** Renders a skeleton card in place of the notification. */
     isLoading?: boolean;
+    /** Per-card colour overrides; raw values here do not follow dark mode. */
     colors?: NotificationColor;
 };
+/** Optional per-card palette override for Notification; any field left unset falls back to theme tokens. */
 export type NotificationColor = {
+    /** Card surface; the default title, due-label and meta inks are contrast-lifted against it. */
     bgColor?: string;
+    /** Card border and both dividers. */
     borderColor?: string;
+    /** Description text only. */
     textColor?: string;
+    /** Replaces the contrast-lifted title ink, so check AA contrast yourself. */
     titleColor?: string;
+    /** warningColor/errorColor/successColor only paint the status dot, and only when showStatus is true — otherwise inert. */
     warningColor?: string;
     errorColor?: string;
     successColor?: string;

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

@@ -0,0 +1,4 @@
+import type { NotificationBellProps } from "./NotificationBellProps";
+/** Trigger + three-state badge (capped count -> dot -> nothing); pair with a Popover the caller owns. */
+declare const NotificationBell: import("react").ForwardRefExoticComponent<NotificationBellProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default NotificationBell;

package/dist/Components/NotificationBell/NotificationBell.js

@@ -0,0 +1,39 @@
+"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 IconButton_1 = __importDefault(require("../IconButton/IconButton"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const notificationHelpers_1 = require("./notificationHelpers");
+const ICON_BOX = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+};
+const BADGE_OFFSET = {
+    xs: "-2px",
+    sm: "-3px",
+    md: "-4px",
+    lg: "-5px",
+};
+/** Trigger + three-state badge (capped count -> dot -> nothing); pair with a Popover the caller owns. */
+const NotificationBell = (0, react_1.forwardRef)(function NotificationBell({ count, showDot = false, max = 99, tone = "warning", dotTone = "info", icon = lucide_react_1.Bell, size = "sm", ringColor, onClick, isOpen, "aria-label": ariaLabel, }, ref) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const ring = ringColor !== null && ringColor !== void 0 ? ringColor : colors.backgroundColor.main;
+    const showCount = typeof count === "number" && count > 0;
+    const showFallbackDot = !showCount && showDot;
+    const badgeOffset = BADGE_OFFSET[size];
+    const countSurface = showCount ? (0, filledSurface_1.resolveFilledSurface)((0, tone_1.toneScale)(colors, tone), colors) : null;
+    const dotFill = showFallbackDot ? (0, tone_1.toneInk)(colors, dotTone) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { ref: ref, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: icon, boxSize: `${ICON_BOX[size]}px` }), variant: "ghost", size: size, onClick: onClick }), showCount && countSurface ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-count", position: "absolute", top: badgeOffset, right: badgeOffset, minW: "1.1rem", h: "1.1rem", px: "0.25rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700, lineHeight: 1, bg: countSurface.fill, color: countSurface.color, boxShadow: `0 0 0 2px ${ring}`, children: (0, notificationHelpers_1.formatCount)(count, max) })) : null, showFallbackDot ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-dot", position: "absolute", top: badgeOffset, right: badgeOffset, boxSize: "0.5rem", borderRadius: "full", bg: dotFill, boxShadow: `0 0 0 2px ${ring}` })) : null] }));
+});
+exports.default = NotificationBell;

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

@@ -0,0 +1,174 @@
+import type { ElementType, ReactNode, RefObject } from "react";
+import type { EmptyStateProps } from "../EmptyState/EmptyStateProps";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+import type { DaySectionLabels } from "./notificationHelpers";
+/** Shared tone vocabulary for the badge, row tile and zone/filter buttons — an alias of the theme's Tone. */
+export type NotificationTone = Tone;
+/** Button size scale for the bell trigger. */
+export type NotificationBellSize = "xs" | "sm" | "md" | "lg";
+/** Bell trigger with the three-state badge (capped count -> dot -> nothing); renders no panel itself. */
+export interface NotificationBellProps {
+    /** Renders the capped number pill. 0 or undefined falls through to `showDot`. */
+    count?: number;
+    /** Ambient-activity dot, shown only when `count` renders nothing. */
+    showDot?: boolean;
+    /** Counts above this render as "<max>+". Defaults to 99 (matches MUI/Ant). */
+    max?: number;
+    /** Number-pill tone; defaults to "warning". */
+    tone?: NotificationTone;
+    /** Dot tone; defaults to "info". */
+    dotTone?: NotificationTone;
+    /** Defaults to lucide `Bell`. Pass a component reference, not an element. */
+    icon?: ElementType;
+    /** Defaults to "sm". */
+    size?: NotificationBellSize;
+    /** Badge ring colour so the pill reads on a tinted bar. Defaults to the canvas. */
+    ringColor?: string;
+    /** Fires when the bell button is activated; the bell renders no panel, so toggle your popover here. */
+    onClick?: () => void;
+    /** Reflected as `aria-expanded`; pass the panel's open state when the bell drives a popover. */
+    isOpen?: boolean;
+    /** Required — tickets hardcoded English here; the caller must name the counts (i18n-able). */
+    "aria-label": string;
+}
+/** What the row chassis actually paints. Consumers map their own row type onto this. */
+export interface NotificationItemModel {
+    /** Used as the React key within a list; must be unique among the rows. */
+    id: string;
+    /** Main line; ReactNode so a caller can inject links/bold without the library parsing markup. */
+    title: ReactNode;
+    /** Secondary line, clamped to 2 lines. */
+    body?: ReactNode;
+    /** Epoch ms, an ISO string, or a Date; drives both the relative label and day bucketing. */
+    timestamp: number | string | Date;
+    /** False shows the unread indicator chosen by `unreadIndicator`; true renders the row plain. */
+    isRead: boolean;
+    /** Icon for the 28x28 tile; pass a component reference, not an element. */
+    icon?: ElementType;
+    /** Tints the tile and the unread indicator. */
+    tone?: NotificationTone;
+    /** Avatar overlaid on the tile's corner. */
+    actor?: {
+        name?: string;
+        avatarUrl?: string | null;
+    };
+    /** Small label above the title — tickets' "PT-104", hrms' "LEAVE". */
+    eyebrow?: ReactNode;
+    /** Adjacent rows sharing this key collapse into one expandable run; null/undefined never collapses. */
+    groupKey?: string | null;
+    /** Optional destination; NotificationItem never navigates itself. */
+    href?: string;
+}
+/** How the unread state reads on a row. Defaults to "bar" (the 2px left border both apps use). */
+export type NotificationUnreadIndicator = "bar" | "dot" | "tint" | "none";
+/** @deprecated Build rows with NotificationRow inside a NotificationCenterProvider. */
+export interface NotificationItemProps {
+    /** The mapped row model that this chassis paints. */
+    item: NotificationItemModel;
+    /** Makes the tile and text a focusable button when set; without it the row is non-interactive. */
+    onClick?: () => void;
+    /** Action cluster, hidden until row hover/focus unless `actionsAlwaysVisible`. */
+    actions?: ReactNode;
+    /** hrms' approval rows show Approve/Reject at rest; tickets reveals on hover. */
+    actionsAlwaysVisible?: boolean;
+    /** Extra block under the body: a comment blockquote, a status from-to pair. */
+    preview?: ReactNode;
+    /** Right-hand meta, e.g. hrms' "waiting 3 days". */
+    trailing?: ReactNode;
+    /** Applies only when `item.isRead` is false; `"none"` shows no unread cue. */
+    unreadIndicator?: NotificationUnreadIndicator;
+    /** When this row represents a collapsed run, the number of rows it stands in for. */
+    groupCount?: number;
+    /** Fires when a collapsed run's "Show N updates" affordance is activated. */
+    onExpandGroup?: () => void;
+}
+/** @deprecated Use NotificationCenter or NotificationInbox, which take NotificationEntry rows. */
+export interface NotificationListProps<T> {
+    /** Rows in display order; each is mapped through `toItem` for rendering and, with `groupBy` "day", bucketed by its timestamp. */
+    items: T[];
+    /** The adapter. The one required piece of consumer glue. */
+    toItem: (row: T) => NotificationItemModel;
+    /** "day" buckets into Today/Yesterday/Earlier; "none" is a flat list. Defaults to "day". */
+    groupBy?: "day" | "none";
+    /** Collapse adjacent rows sharing a `groupKey` behind "Show N updates". Defaults to false. */
+    collapseGroups?: boolean;
+    /** Overrides the three default bucket labels — the i18n hook. */
+    dayLabels?: DaySectionLabels;
+    /** Receives the original row, not the mapped model; setting it makes every default row a button. */
+    onItemClick?: (row: T) => void;
+    /** The hover-revealed, keyboard-reachable action cluster per row. */
+    itemActions?: (row: T) => ReactNode;
+    /** Full row override; receives the mapped model so a caller can decorate, not restart. */
+    renderItem?: (row: T, model: NotificationItemModel) => ReactNode;
+    /** Replaces the sticky day-section header. */
+    renderSectionHeader?: (label: string) => ReactNode;
+    /** Forwarded to each default row; has no effect when `renderItem` replaces the row. */
+    unreadIndicator?: NotificationUnreadIndicator;
+    /** Forwarded to each default row; shows `itemActions` at rest instead of on hover or focus. */
+    actionsAlwaysVisible?: boolean;
+    /** Names the list as a region landmark; no region role is added when omitted. */
+    "aria-label"?: string;
+}
+/** One tab in the zone row; `render` exists so a foreign queue (hrms' "Needs you") can host its own body. */
+export interface NotificationZone {
+    /** Matched against `activeZone` and passed to `onZoneChange` when the tab is clicked. */
+    id: string;
+    /** Tab text; the capped `count` is appended in parentheses. */
+    label: string;
+    /** Rendered as a capped count suffix on the tab; omit for no count. */
+    count?: number;
+    /** Tab tone; defaults to "warning". */
+    tone?: NotificationTone;
+    /** Replaces the whole zone body; when set, `items` for this zone is ignored. */
+    render?: () => ReactNode;
+}
+/** A filter chip rendered next to the zone row; count is suffixed as "(n)", capped like the badge. */
+export interface NotificationFilter {
+    /** Matched against `activeFilter` and passed to `onFilterChange` when the chip is clicked. */
+    id: string;
+    /** Chip text; `count` is appended in parentheses when set. */
+    label: string;
+    /** Shown even when 0, unlike a zone count; capped at 99 like the badge. Omit for no suffix. */
+    count?: number;
+}
+/** @deprecated Use NotificationCenter for the bell panel and NotificationInbox for the page. */
+export interface NotificationPanelProps<T> extends NotificationListProps<T> {
+    /** Omit for a single-zone panel (crm, spare-cart). Two zones is the tickets/hrms shape. */
+    zones?: NotificationZone[];
+    /** Id of the selected zone; that zone's `render`, if set, replaces the panel body. */
+    activeZone?: string;
+    /** Receives the clicked zone's id; the panel is controlled, so update `activeZone` yourself. */
+    onZoneChange?: (zoneId: string) => void;
+    /** Filter chips under the zone row; the row is omitted when empty or unset. */
+    filters?: NotificationFilter[];
+    /** Id of the selected filter chip; controlled, so update it from `onFilterChange`. */
+    activeFilter?: string;
+    /** Receives the clicked filter's id; update `activeFilter` yourself. */
+    onFilterChange?: (filterId: string) => void;
+    /** Shows four skeleton rows in place of the list; beats the error and empty states, but not a zone's `render`. */
+    isLoading?: boolean;
+    /** Anything non-nullish shows the error state — closes tickets' documented no-error-state gap. */
+    error?: unknown;
+    /** Adds a Retry button to the error state; the button is omitted when unset. */
+    onRetry?: () => void;
+    /** Props for the default EmptyState. */
+    empty?: EmptyStateProps;
+    /** Panel header content; omit for the default title row. */
+    header?: ReactNode;
+    /** Right side of the header, e.g. "Mark all as read". */
+    headerAction?: ReactNode;
+    /** Footer links under the scrollable list. */
+    footer?: ReactNode;
+    /** "popover" is height-bounded and scroll-locked; "page" grows with the document. Defaults to "popover". */
+    variant?: "popover" | "page";
+    /** Fixed max height; when unset the popover variant measures its own anchored height. */
+    maxH?: string | number;
+    /** Fires from the "Load more" button, which renders only while `hasMore` is true. */
+    onLoadMore?: () => void;
+    /** Shows the "Load more" button under the list. Defaults to false. */
+    hasMore?: boolean;
+    /** Puts the "Load more" button into its loading state. Defaults to false. */
+    isLoadingMore?: boolean;
+    /** Receives the panel root element; also the node whose top edge the popover height is measured from. */
+    panelRef?: RefObject<HTMLDivElement>;
+}

package/dist/Components/NotificationBell/NotificationBellProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,4 @@
+import type { NotificationItemProps } from "./NotificationBellProps";
+/** @deprecated Use NotificationRow inside a NotificationCenterProvider. */
+declare const NotificationItem: ({ item, onClick, actions, actionsAlwaysVisible, preview, trailing, unreadIndicator, groupCount, onExpandGroup, }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
+export default NotificationItem;

package/dist/Components/NotificationBell/NotificationItem.js

@@ -0,0 +1,34 @@
+"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 Primitives_1 = require("../Primitives/Primitives");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const notificationHelpers_1 = require("./notificationHelpers");
+const TILE_SIZE = "1.75rem";
+/** @deprecated Use NotificationRow inside a NotificationCenterProvider. */
+const NotificationItem = ({ item, onClick, actions, actionsAlwaysVisible = false, preview, trailing, unreadIndicator = "bar", groupCount, onExpandGroup, }) => {
+    var _a, _b, _c;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const tone = (_a = item.tone) !== null && _a !== void 0 ? _a : "neutral";
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const tile = (0, statusTone_1.resolveStatusTone)((0, tone_1.toneScale)(colors, tone), mode);
+    const ink = (0, tone_1.toneInk)(colors, tone);
+    const unread = !item.isRead;
+    const rowTint = unreadIndicator === "tint" && unread ? (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, tone)).bg : undefined;
+    const rowShadow = unreadIndicator === "bar" && unread ? `inset 2px 0 0 ${ink}` : undefined;
+    const hasTile = Boolean(item.icon) || Boolean(item.actor);
+    // Never nested inside the row's own clickable button — a real <button> can't contain another.
+    const tileAndText = ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: (_b = item.actor.name) !== null && _b !== void 0 ? _b : "?", src: (_c = item.actor.avatarUrl) !== null && _c !== void 0 ? _c : undefined, size: "2xs" }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [item.eyebrow ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "xs-minus", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? (0, jsx_runtime_1.jsx)(Primitives_1.Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "sm", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 0.5, fontSize: "xs-plus", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1, fontSize: "xs", color: colors.text[500], children: (0, notificationHelpers_1.formatRelativeTime)(item.timestamp) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { role: "group", position: "relative", align: "flex-start", gap: 2, px: 3, py: 2.5, bg: rowTint, boxShadow: rowShadow, _hover: { bg: rowTint !== null && rowTint !== void 0 ? rowTint : colors.backgroundColor.secondary }, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [onClick ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "button", type: "button", onClick: onClick, display: "flex", w: "100%", textAlign: "left", borderRadius: "md", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: tileAndText })) : (tileAndText), groupCount && groupCount > 1 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { label: `Show ${groupCount} updates`, variant: "link", size: "xs", colorScheme: "primary", mt: 1, pl: hasTile ? `calc(${TILE_SIZE} + 0.75rem)` : 0, onClick: onExpandGroup })) : null] }), trailing, actions ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { opacity: actionsAlwaysVisible ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, flexShrink: 0, children: actions })) : null] }));
+};
+exports.default = NotificationItem;

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

@@ -0,0 +1,4 @@
+import type { NotificationListProps } from "./NotificationBellProps";
+/** @deprecated Use NotificationInbox, or NotificationCenter for the bell panel. */
+declare function NotificationList<T>({ items, toItem, groupBy, collapseGroups, dayLabels, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator, actionsAlwaysVisible, "aria-label": ariaLabel, }: NotificationListProps<T>): import("react/jsx-runtime").JSX.Element;
+export default NotificationList;