pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

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

@@ -0,0 +1,147 @@
+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;
+/** Shared control 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;
+    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 {
+    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;
+    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";
+/** One row; exported so a `renderItem` override can still reuse the chassis. */
+export interface NotificationItemProps {
+    item: NotificationItemModel;
+    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;
+    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;
+}
+/** Props shared by NotificationList and NotificationPanel — generic over the caller's own row type. */
+export interface NotificationListProps<T> {
+    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;
+    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;
+    unreadIndicator?: NotificationUnreadIndicator;
+    actionsAlwaysVisible?: boolean;
+    "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 {
+    id: string;
+    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 {
+    id: string;
+    label: string;
+    count?: number;
+}
+/** The panel shell. Generic over the caller's row type — the library defines no notification shape. */
+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[];
+    activeZone?: string;
+    onZoneChange?: (zoneId: string) => void;
+    filters?: NotificationFilter[];
+    activeFilter?: string;
+    onFilterChange?: (filterId: string) => void;
+    isLoading?: boolean;
+    /** Anything non-nullish shows the error state — closes tickets' documented no-error-state gap. */
+    error?: unknown;
+    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;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    isLoadingMore?: boolean;
+    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";
+/** One notification row; used by NotificationList and reusable standalone under a `renderItem` override. */
+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";
+/** One notification row; used by NotificationList and reusable standalone under a `renderItem` override. */
+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: "0.6875rem", 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: "0.875rem", 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: "0.8125rem", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1, fontSize: "0.75rem", 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";
+/** Day sections + consecutive groupKey runs over NotificationItem rows. Generic over the caller's row type. */
+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;

package/dist/Components/NotificationBell/NotificationList.js

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

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

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

package/dist/Components/NotificationBell/NotificationPanel.js

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

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

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

package/dist/Components/NotificationBell/index.js

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

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

@@ -0,0 +1,29 @@
+import { type RefObject } from "react";
+export interface DaySection<T> {
+    label: string;
+    rows: T[];
+}
+export interface ConsecutiveGroup<T> {
+    key: string | null;
+    rows: T[];
+}
+export interface DaySectionLabels {
+    today: string;
+    yesterday: string;
+    earlier: string;
+}
+export declare const DEFAULT_DAY_LABELS: DaySectionLabels;
+/** Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket. */
+export declare function sectionizeByDay<T>(rows: T[], getTime: (row: T) => number | string | Date, labels?: DaySectionLabels): DaySection<T>[];
+/** Merges only adjacent rows sharing a key; a null/undefined key never merges with anything. */
+export declare function groupConsecutive<T>(rows: T[], getKey: (row: T) => string | null | undefined): ConsecutiveGroup<T>[];
+/** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
+export declare function formatCount(value: number, max?: number): string;
+/** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
+export declare function formatRelativeTime(value: number | string | Date, now?: number | Date): string;
+export interface AnchoredPanelHeightOptions {
+    min?: number;
+    gutter?: number;
+}
+/** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
+export declare function useAnchoredPanelHeight(ref: RefObject<HTMLElement>, options?: AnchoredPanelHeightOptions): number;

package/dist/Components/NotificationBell/notificationHelpers.js

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

package/dist/Components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
-/** Labelled numeric field; unlike most fields here, `isRequired` propagates natively via `FormControl`, not just the label asterisk. */
-declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").NumberInputProps, "maxW" | "defaultValue" | "onBlur" | "onChange" | "size" | "max" | "min" | "step" | "name" | "value" | "precision" | "clampValueOnBlur" | "keepWithinRange" | "allowMouseWheel"> & {
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").NumberInputProps, "maxW" | "max" | "min" | "size" | "defaultValue" | "onBlur" | "onChange" | "step" | "isDisabled" | "name" | "value" | "isReadOnly" | "precision" | "clampValueOnBlur" | "keepWithinRange" | "allowMouseWheel"> & {
     NumberIncrementStepperBg?: string;
     NumberIncrementStepperActive?: import("./NumberInputProps").ActiveStyle;
     NumberIncrementStepperChildren?: string;
@@ -11,6 +11,10 @@ declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import
     informationMessage?: string;
     isRequired?: boolean;
     id?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    placeholder?: string;
     width?: string;
     minW?: string;
     maxW?: string;

package/dist/Components/NumberInput/NumberInput.js

@@ -1,13 +1,17 @@
 "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("@chakra-ui/react");
 const react_2 = require("react");
 const FormLabel_1 = require("../Common/FormLabel");
-/** Labelled numeric field; unlike most fields here, `isRequired` propagates natively via `FormControl`, not just the label asterisk. */
-const NumberInput = (0, react_2.forwardRef)(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }, ref) {
-    const generatedId = (0, react_2.useId)();
-    const resolvedId = id !== null && id !== void 0 ? id : generatedId;
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, id: resolvedId, isRequired: isRequired, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: resolvedId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+/** Labelled numeric field with the shared helper/error row; `isRequired` propagates natively via `FormControl`. */
+const NumberInput = (0, react_2.forwardRef)(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, error, errorMessage, helperText, placeholder, isDisabled, isReadOnly, ...props }, ref) {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, isRequired: isRequired, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, id: ids.inputId, isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, "aria-describedby": ids.describedBy, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref, placeholder: placeholder }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, sx: { flex: "none" }, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, sx: { flex: "none" }, children: NumberDecrementStepperChildren })] })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.default = NumberInput;

package/dist/Components/NumberInput/NumberInput.styles.js

@@ -1,88 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
-const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
-exports.NumberInput = {
-    baseStyle: ({ theme }) => ({
-        field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            pt: "0.813rem",
-            pb: "0.813rem",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            _placeholder: {
-                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-            },
-        },
-    }),
-    sizes: {
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
+const TextInput_styles_1 = require("../Input/TextInput.styles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const stepperSizes = Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => {
+    const half = `calc(${controlSizes_1.CONTROL_SIZES[size].height} / 2)`;
+    return [
+        size,
+        {
+            stepperGroup: { width: "1.5rem", height: controlSizes_1.CONTROL_SIZES[size].height },
+            stepper: { height: half, fontSize: "0.5rem", boxSizing: "border-box" },
         },
-    },
+    ];
+}));
+const numberInputSizes = (0, TextInput_styles_1.fieldSizes)("field");
+for (const size of controlSizes_1.CONTROL_SIZE_NAMES) {
+    Object.assign(numberInputSizes[size], stepperSizes[size]);
+}
+exports.NumberInput = {
+    sizes: numberInputSizes,
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                field: {
-                    bg: theme.colors.background[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _placeholder: {
-                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                    },
-                    _hover: {
-                        borderColor: primary,
-                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                    },
-                    _readOnly: {
-                        boxShadow: 'inherit',
-                    },
-                    _disabled: {
-                        bg: theme.colors.background[100],
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: (0, TextInput_styles_1.fieldPartStyles)(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };