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

package/dist/esm/Components/NoteTextArea/NoteTextArea.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { Box, Flex, Text, Input, Textarea, Button, Divider, Spinner, Tooltip, useMergeRefs, } from "@chakra-ui/react";
+import { Paperclip, X, SquarePen, File as FileIcon } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { FIELD_RADIUS } from "../Common/fieldStyles.js";
+import { onActivationKey } from "../Common/activationKey.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { focusVisibleRing, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+const countWords = (text = "") => {
+    const t = text.trim();
+    if (!t)
+        return 0;
+    return t.split(/\s+/).length;
+};
+/** Self-contained note composer (optional title + textarea + Save); `ref` forwards to the primary textarea. */
+const NoteTextArea = forwardRef(function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title, file, isEditable = false, saveButtonLoading, maxFileSize = 1 * 1024 * 1024, maxFilesSizeError = "Some files are too large. Maximum allowed size is", maxNoteWordCount = 15, onChange, customPlaceholder = "Add a note...", cancelButtonHide = false, titleAriaLabel = "Note title", noteAriaLabel = customPlaceholder, }, ref) {
+    const theme = useCustomTheme();
+    const noteAreaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const mergedNoteRef = useMergeRefs(noteAreaRef, ref);
+    const fileInputId = `note-text-area-file-${useId().replace(/:/g, "")}`;
+    const [isActive, setIsActive] = useState(false);
+    const [noteValue, setNoteValue] = useState("");
+    const [titleValue, setTitleValue] = useState("");
+    const [titleShow, setTitleShow] = useState(false);
+    const [files, setFiles] = useState([]);
+    const [fileError, setFileError] = useState("");
+    useEffect(() => {
+        if (isEditable) {
+            setIsActive(true);
+            if (value)
+                setNoteValue(value);
+            if (title) {
+                setTitleValue(title);
+                setTitleShow(true);
+            }
+            if (file)
+                setFiles(Array.isArray(file) ? file : []);
+        }
+    }, [value, title, file, isEditable]);
+    useEffect(() => {
+        if (!saveButtonLoading) {
+            if (!isEditable) {
+                setIsActive(false);
+                setNoteValue("");
+                setTitleValue("");
+                setTitleShow(false);
+                setFiles([]);
+            }
+        }
+        if (isEditable)
+            setIsActive(true);
+    }, [saveButtonLoading, isEditable]);
+    useEffect(() => {
+        if (isActive && noteAreaRef.current) {
+            noteAreaRef.current.style.height = "auto";
+            noteAreaRef.current.style.height = `${noteAreaRef.current.scrollHeight}px`;
+            noteAreaRef.current.focus();
+        }
+    }, [isActive]);
+    const adjustHeight = () => {
+        const t = noteAreaRef.current;
+        if (!t)
+            return;
+        t.style.height = "auto";
+        t.style.height = `${t.scrollHeight}px`;
+    };
+    const handleTextArea = () => {
+        setIsActive(true);
+        if (!isEditable) {
+            setNoteValue("");
+            setTitleValue("");
+            setTitleShow(false);
+            setFiles([]);
+        }
+    };
+    const openFilePicker = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    const handleCloseTextArea = () => {
+        setIsActive(false);
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel(!isActive);
+        if (!isEditable) {
+            setNoteValue("");
+            setTitleValue("");
+            setTitleShow(false);
+            setFiles([]);
+        }
+        setFileError("");
+    };
+    const handleNoteChange = (e) => {
+        const value = e.target.value;
+        // Allow typing, but prevent updating state with only spaces
+        if (value.trim() === "" && value !== "")
+            return;
+        setNoteValue(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        adjustHeight();
+    };
+    const formatBytes = (bytes, decimals = 2) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    };
+    const shortenFileName = (name, maxLength = 24) => {
+        const extension = name.substring(name.lastIndexOf("."));
+        if (name.length <= maxLength)
+            return name;
+        const nameWithoutExtension = name.replace(extension, "");
+        const start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
+        return `${start}...${extension}`;
+    };
+    const noteWordCount = countWords(noteValue);
+    const isOverLimit = noteWordCount > maxNoteWordCount;
+    const isSaveDisabled = isOverLimit || countWords(titleValue) > maxNoteWordCount;
+    const activeBandBg = bandOn(theme.colors.gray[50], theme.colors.background[50]);
+    const collapsedHoverBg = resolveHoverTint(theme.colors.gray[50], theme.colors.background[50]);
+    const activeControlHoverBg = resolveHoverTint(theme.colors.gray[100], activeBandBg);
+    const chipBg = bandOn(theme.colors.gray[100], activeBandBg);
+    const chipInk = liftToContrast(theme.colors.textMuted, chipBg, AA_NORMAL_TEXT);
+    const chipRemoveHoverBg = bandOn(theme.colors.gray[200], chipBg);
+    // NOTE: drawn inset because the rounded shell clips overflow.
+    const placeholderFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: insetFocusRingShadow(theme.colors),
+    };
+    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? activeBandBg : theme.colors.background[50], transition: transitionFor(["border-color"]), children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: onActivationKey(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: transitionFor(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { value: titleValue, onChange: (e) => {
+                                            if (e.target.value.length === 0)
+                                                setTitleShow(false);
+                                            setTitleValue(e.target.value);
+                                        }, placeholder: "Add a title...", "aria-label": titleAriaLabel, variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "sm", color: theme.colors.text[700], _placeholder: {
+                                            color: placeholderInk(theme.colors),
+                                        } }), _jsx(Divider, { borderColor: theme.colors.gray[200] })] })), _jsx(Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: _jsx(Textarea, { ref: mergedNoteRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, "aria-label": noteAriaLabel, variant: "unstyled", resize: "none", minH: "76px", fontSize: "xs", color: theme.colors.text[700], _placeholder: {
+                                        color: placeholderInk(theme.colors),
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), _jsx(Divider, { borderColor: theme.colors.gray[200] }), _jsxs(Box, { px: 3, py: 2.5, children: [_jsxs(Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: _jsx(Box, { as: "span", role: "button", tabIndex: 0, "aria-label": "Attach files", onClick: openFilePicker, onKeyDown: onActivationKey(openFilePicker), _focusVisible: focusVisibleRing(theme.colors), cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: transitionFor(["background-color"]), _hover: { bg: activeControlHoverBg }, children: _jsx(Paperclip, { size: 16 }) }) }), _jsx(Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? (_jsx(Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: transitionFor(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : (_jsx(Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), _jsxs(Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [_jsxs(Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : (_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), _jsxs(Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? (_jsx(Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), _jsx("input", { ref: fileInputRef, id: fileInputId, type: "file", style: { display: "none" }, onChange: (e) => {
+                                    const newFiles = Array.from(e.target.files || []);
+                                    const validFiles = newFiles.filter((f) => f.size <= maxFileSize);
+                                    const invalidFiles = newFiles.filter((f) => f.size > maxFileSize);
+                                    if (invalidFiles.length > 0) {
+                                        setFileError(`${maxFilesSizeError} ${formatBytes(maxFileSize)}.`);
+                                    }
+                                    else {
+                                        setFileError("");
+                                    }
+                                    if (validFiles.length > 0) {
+                                        setFiles((prev) => [...prev, ...validFiles]);
+                                    }
+                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: chipBg, maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: chipInk }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: chipInk, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${f.name}`, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: chipInk, transition: transitionFor(["background-color", "color"]), _hover: { bg: chipRemoveHoverBg, color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+});
+NoteTextArea.displayName = "NoteTextArea";
+export default NoteTextArea;

package/dist/esm/Components/NoteTextArea/NoteTextAreaProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Notification/Notification.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Box, VStack, HStack, Text, Icon, Divider, Skeleton, SkeletonCircle, } from "@chakra-ui/react";
+import { Clock, AlertCircle, Calendar, X, User } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, isDarkCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import Avatar from "../Avatar/Avatar.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const CARD_TRANSITION = transitionFor(["box-shadow", "background-color", "border-color"], "base");
+const DISMISS_TRANSITION = 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 = useCustomTheme();
+    const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
+    const closeTone = 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 : liftToContrast(theme.colors.text[800], bgColor, 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 = liftToContrast(theme.colors.orange[500], bgColor, AA_NORMAL_TEXT);
+    const metaColor = liftToContrast(theme.colors.textMuted, bgColor, AA_NORMAL_TEXT);
+    const startDate = useMemo(() => notification.startDate
+        ? new Date(notification.startDate)
+        : null, [notification.startDate]);
+    const hasTarget = Boolean(notification.dueDate || notification.endDate);
+    const [now, setNow] = useState(() => Date.now());
+    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 } = useMemo(() => {
+        const targetDate = notification.dueDate
+            ? new Date(notification.dueDate)
+            : notification.endDate
+                ? new Date(notification.endDate)
+                : null;
+        if (!targetDate)
+            return { timeLabel: "", diffDays: null };
+        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();
+        };
+        const typeLabel = toTitle(notification.type);
+        let label;
+        if (diffMs < 0) {
+            const overdueMinutes = Math.abs(diffMinutes);
+            if (overdueMinutes < 60)
+                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"}`;
+            else if (overdueMinutes < 1440)
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"}`;
+            else
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"}`;
+        }
+        else {
+            if (diffMinutes < 60)
+                label = `${typeLabel} due in ${diffMinutes} minute${diffMinutes === 1 ? "" : "s"}`;
+            else if (diffHours < 24)
+                label = `${typeLabel} due in ${Math.floor(diffHours)} hour${Math.floor(diffHours) === 1 ? "" : "s"}`;
+            else
+                label = `${typeLabel} due in ${Math.ceil(diffDays)} day${Math.ceil(diffDays) === 1 ? "" : "s"}`;
+        }
+        return { timeLabel: label, diffDays };
+    }, [notification.dueDate, notification.endDate, notification.type, now]);
+    const getStatusColor = () => {
+        if (diffDays === null)
+            return theme.colors.textMuted;
+        if (diffDays < 0)
+            return errorColor;
+        if (diffDays <= 0.04)
+            return warningColor;
+        if (diffDays <= 1)
+            return accentTextOnCanvas(theme.colors.yellow, bgColor);
+        return successColor;
+    };
+    const TimeIcon = diffDays !== null && diffDays < 0 ? AlertCircle : Clock;
+    const formattedStartDateTime = useMemo(() => {
+        if (!startDate)
+            return "";
+        const options = notification.type === "meeting"
+            ? {
+                day: "2-digit",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit",
+            }
+            : {
+                day: "2-digit",
+                month: "short",
+                year: "numeric",
+            };
+        return startDate.toLocaleString("en-US", options);
+    }, [startDate, notification.type]);
+    if (isLoading) {
+        return (_jsx(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(SkeletonCircle, { size: "4" }), _jsx(Skeleton, { height: "14px", width: "60%" })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(SkeletonCircle, { size: "8" }), _jsxs(VStack, { align: "start", spacing: 1, flex: "1", children: [_jsx(Skeleton, { height: "16px", width: "70%" }), _jsx(Skeleton, { height: "12px", width: "50%" })] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "40%" }), _jsx(Skeleton, { height: "12px", width: "30%" })] })] }) }));
+    }
+    return (_jsxs(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: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: 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: focusVisibleRing(theme.colors), transition: DISMISS_TRANSITION, sx: reducedMotionSx(), children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(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: onActivationKey(() => onClick(notification.id, notification.type)),
+                                            _focusVisible: focusVisibleRing(theme.colors),
+                                        }), children: notification.title }), notification.description && (_jsx(Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: Calendar, color: metaColor, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: metaColor, boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+};
+export default Notification;

package/dist/esm/Components/Notification/NotificationProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/NotificationBell/NotificationBell.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Bell } from "lucide-react";
+import { Box, Icon } from "../Primitives/Primitives.js";
+import IconButton from "../IconButton/IconButton.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { toneInk, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { formatCount } from "./notificationHelpers.js";
+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 = forwardRef(function NotificationBell({ count, showDot = false, max = 99, tone = "warning", dotTone = "info", icon = Bell, size = "sm", ringColor, onClick, isOpen, "aria-label": ariaLabel, }, ref) {
+    const theme = 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 ? resolveFilledSurface(toneScale(colors, tone), colors) : null;
+    const dotFill = showFallbackDot ? toneInk(colors, dotTone) : undefined;
+    return (_jsxs(Box, { position: "relative", display: "inline-flex", children: [_jsx(IconButton, { ref: ref, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", icon: _jsx(Icon, { as: icon, boxSize: `${ICON_BOX[size]}px` }), variant: "ghost", size: size, onClick: onClick }), showCount && countSurface ? (_jsx(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: formatCount(count, max) })) : null, showFallbackDot ? (_jsx(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] }));
+});
+export default NotificationBell;

package/dist/esm/Components/NotificationBell/NotificationBellProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/NotificationBell/NotificationItem.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Icon, Text } from "../Primitives/Primitives.js";
+import Avatar from "../Avatar/Avatar.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { resolveSoftTone, toneInk, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { formatRelativeTime } from "./notificationHelpers.js";
+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 = useCustomTheme();
+    const { colors } = theme;
+    const tone = (_a = item.tone) !== null && _a !== void 0 ? _a : "neutral";
+    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
+    const tile = resolveStatusTone(toneScale(colors, tone), mode);
+    const ink = toneInk(colors, tone);
+    const unread = !item.isRead;
+    const rowTint = unreadIndicator === "tint" && unread ? resolveSoftTone(colors, 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 = (_jsxs(Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? (_jsxs(Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [_jsx(Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? _jsx(Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? (_jsx(Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: _jsx(Avatar, { 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, _jsxs(Box, { flex: "1", minW: 0, children: [item.eyebrow ? (_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, _jsxs(Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? _jsx(Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, _jsx(Text, { fontSize: "sm", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? (_jsx(Text, { mt: 0.5, fontSize: "xs-plus", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, _jsx(Text, { mt: 1, fontSize: "xs", color: colors.text[500], children: formatRelativeTime(item.timestamp) })] })] }));
+    return (_jsxs(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: [_jsxs(Box, { flex: "1", minW: 0, children: [onClick ? (_jsx(Box, { as: "button", type: "button", onClick: onClick, display: "flex", w: "100%", textAlign: "left", borderRadius: "md", sx: focusVisibleStyles(colors), children: tileAndText })) : (tileAndText), groupCount && groupCount > 1 ? (_jsx(Button, { 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 ? (_jsx(Box, { opacity: actionsAlwaysVisible ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, flexShrink: 0, children: actions })) : null] }));
+};
+export default NotificationItem;

package/dist/esm/Components/NotificationBell/NotificationList.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text } from "../Primitives/Primitives.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import NotificationItem from "./NotificationItem.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_DAY_LABELS, groupConsecutive, sectionizeByDay } from "./notificationHelpers.js";
+/** @deprecated Use NotificationInbox, or NotificationCenter for the bell panel. */
+function NotificationList({ items, toItem, groupBy = "day", collapseGroups = false, dayLabels = DEFAULT_DAY_LABELS, onItemClick, itemActions, renderItem, renderSectionHeader, unreadIndicator = "bar", actionsAlwaysVisible = false, "aria-label": ariaLabel, }) {
+    const { colors } = useCustomTheme();
+    const [expandedGroups, setExpandedGroups] = useState(new Set());
+    if (!items.length) {
+        return _jsx(EmptyState, { title: "No notifications yet", description: "You're all caught up.", size: "sm" });
+    }
+    const sections = groupBy === "day" ? sectionizeByDay(items, (row) => toItem(row).timestamp, dayLabels) : [{ label: "", rows: items }];
+    return (_jsx(Box, { "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, children: sections.map((section, sectionIndex) => {
+            const groups = groupConsecutive(section.rows, (row) => (collapseGroups ? toItem(row).groupKey : undefined));
+            return (_jsxs(Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : (_jsx(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 (_jsx(Box, { children: rowsToRender.map((row, rowIndex) => {
+                                const model = toItem(row);
+                                if (renderItem)
+                                    return _jsx(Box, { children: renderItem(row, model) }, model.id);
+                                return (_jsx(NotificationItem, { 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));
+        }) }));
+}
+export default NotificationList;

package/dist/esm/Components/NotificationBell/NotificationPanel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { AlertCircle } from "lucide-react";
+import { Box, Flex, Text } from "../Primitives/Primitives.js";
+import Button from "../Button/Button.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import NotificationList from "./NotificationList.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { formatCount, useAnchoredPanelHeight } from "./notificationHelpers.js";
+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 } = useCustomTheme();
+    const internalRef = useRef(null);
+    const ref = panelRef !== null && panelRef !== void 0 ? panelRef : internalRef;
+    const isPopover = variant === "popover";
+    const measuredHeight = 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 (_jsxs(Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 3, borderBottom: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: [header !== null && header !== void 0 ? header : (_jsx(Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? (_jsx(Flex, { role: "group", "aria-label": "Notification zones", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: zones.map((zone) => {
+                    const isActive = zone.id === activeZone;
+                    const label = zone.count ? `${zone.label} (${formatCount(zone.count)})` : zone.label;
+                    return (_jsx(Button, { 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 ? (_jsx(Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: filters.map((filter) => {
+                    const isActive = filter.id === activeFilter;
+                    const label = typeof filter.count === "number" ? `${filter.label} (${formatCount(filter.count)})` : filter.label;
+                    return (_jsx(Button, { 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, _jsx(Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? (_jsx(Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => (_jsxs(Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [_jsx(Skeletons, { type: "circle", size: "7" }), _jsxs(Box, { flex: "1", children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "70%" }), _jsx(Box, { mt: 1.5, children: _jsx(Skeletons, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? (_jsx(EmptyState, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? _jsx(Button, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? (_jsx(EmptyState, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : (_jsxs(_Fragment, { children: [_jsx(NotificationList, { 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 ? (_jsx(Flex, { justify: "center", py: 3, children: _jsx(Button, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? (_jsx(Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: footer })) : null] }));
+}
+export default NotificationPanel;

package/dist/esm/Components/NotificationBell/index.js

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

package/dist/esm/Components/NotificationBell/notificationHelpers.js

@@ -0,0 +1,113 @@
+import { useLayoutEffect, useState } from "react";
+export const 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.
+ */
+export function sectionizeByDay(rows, getTime, labels = 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. */
+export 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. */
+export 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;
+export const 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. */
+export function formatRelativeTime(value, now = Date.now(), { labels = 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. */
+export 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] = useState(min);
+    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;
+}