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

package/dist/esm/Components/MediaViewer/useViewerChrome.js

@@ -0,0 +1,27 @@
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { mix, hexToRgb } from "../../Theme/tokens/builders/color.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+const AA_NORMAL_TEXT = 4.5;
+const MUTED_SEED_WEIGHT = 0.55;
+// A media lightbox stage stays near-black in both light and dark app modes, like every other lightbox.
+export function useViewerChrome() {
+    const { colors } = useCustomTheme();
+    const stage = colors.sidebar.background[500];
+    const ink = onFilled(stage, colors.white, colors.black);
+    const accent = colors.primary[500];
+    const { r, g, b } = hexToRgb(colors.black);
+    const accentRgb = hexToRgb(accent);
+    return {
+        stage,
+        ink,
+        muted: liftToContrast(mix(stage, ink, MUTED_SEED_WEIGHT), stage, AA_NORMAL_TEXT),
+        raised: mix(stage, ink, 0.1),
+        hover: mix(stage, ink, 0.2),
+        track: mix(stage, ink, 0.28),
+        accent,
+        onAccent: onFilled(accent, colors.white, colors.black),
+        scrim: (alpha) => `rgba(${r}, ${g}, ${b}, ${alpha})`,
+        accentGlow: (alpha) => `rgba(${accentRgb.r}, ${accentRgb.g}, ${accentRgb.b}, ${alpha})`,
+    };
+}

package/dist/esm/Components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader as ChakraModalHeader, ModalCloseButton, ModalBody as ChakraModalBody, ModalFooter as ChakraModalFooter, Spinner, } from "@chakra-ui/react";
+import { Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader as ChakraModalHeader, ModalCloseButton, ModalBody as ChakraModalBody, ModalFooter as ChakraModalFooter, Flex, Spinner, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 export const ModalHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
@@ -11,22 +11,28 @@ export const ModalBody = ({ children }) => {
 export const ModalFooter = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
-export default function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", overlaybackdropFilter = "blur(10px) hue-rotate(90deg)", overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }) {
-    const theme = useCustomTheme();
-    if (!isOpen)
-        return _jsx(_Fragment, {});
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ModalHeader);
-    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ModalBody);
-    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ModalFooter);
-    return (_jsxs(ChakraModal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsx(ModalContent, { children: isLoading ? (_jsx("div", { style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        height: "100%",
-                        width: "100%",
-                        padding: "25%",
-                    }, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: theme.colors.gray[200], color: theme.colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [header && _jsx(ChakraModalHeader, { children: header }), _jsx(ModalCloseButton, {}), _jsx(ChakraModalBody, { children: body }), footer && _jsx(ChakraModalFooter, { children: footer })] })) })] }));
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <ModalFooter>...</ModalFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of React.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === React.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+export default function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, }) {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    const headerSlot = findSlot(children, ModalHeader);
+    const bodySlot = findSlot(children, ModalBody);
+    const footerSlot = findSlot(children, ModalFooter);
+    const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
+    return (_jsxs(ChakraModal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsxs(ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && (_jsxs(ChakraModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && (_jsx(Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && _jsx(ModalCloseButton, {}), isLoading ? (_jsx(Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [_jsx(ChakraModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraModalFooter, { ...footerSlot.props, children: footerSlot }))] }))] })] }));
 }

package/dist/esm/Components/MoreItems/MoreItems.js

@@ -2,6 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Box, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, SimpleGrid, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 /** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
 const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
     const theme = useCustomTheme();
@@ -9,10 +11,10 @@ const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = fa
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? _jsx(_Fragment, { children: triggerText }) : null;
-    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: "all 0.15s ease", _hover: { bg: listRowBackgrounds(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: focusVisibleStyles(theme.colors), children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: transitionFor(["background-color"]), _hover: { bg: listRowBackgrounds(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
-                bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [_jsx(PopoverArrow, { bg: theme.colors.background[50] }), _jsx(PopoverBody, { p: 3, children: _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                bg: theme.colors.surfaceRaised, boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [_jsx(PopoverArrow, { bg: theme.colors.surfaceRaised }), _jsx(PopoverBody, { p: 3, children: _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
                                 var _a, _b, _c;
                                 const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.textMuted;
                                 return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && (_jsx(Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), _jsx(Text, { fontSize: "13px", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));

package/dist/esm/Components/MultiSelect/MultiSelect.js

@@ -4,8 +4,12 @@ import { Box, Flex, Input, } from "@chakra-ui/react";
 import { TextLabel } from "../Common/FormLabel.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getSearchSelectSizeStyles, } from "../SearchSelect/searchSelectSize.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { fieldFocusRing, fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
 import Tag from "../Tag/Tag.js";
 import { X } from "lucide-react";
 const generateUniqueId = (() => {
@@ -15,13 +19,16 @@ const generateUniqueId = (() => {
         return `${Date.now()}-${counter}`;
     };
 })();
-export default function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = "md", inputStyle, helperText, error, errorMessage, }) {
+export default function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
     const theme = useCustomTheme();
-    const s = getSearchSelectSizeStyles((size || "md"));
+    const s = getSearchSelectSizeStyles((size || DEFAULT_CONTROL_SIZE));
     const options = value;
     const [inputValue, setInputValue] = useState("");
     const [localError, setLocalError] = useState("");
     const inputRef = useRef(null);
+    const isInvalid = Boolean(error || localError);
+    const shownErrorMessage = localError || errorMessage;
+    const ids = useFieldIds(id, { error: isInvalid, errorMessage: shownErrorMessage, helperText });
     const handleInputChange = useCallback((e) => {
         setInputValue(e.target.value);
         setLocalError("");
@@ -50,20 +57,14 @@ export default function MultiSelect({ value, onValueChange, width = "100%", labe
     const handleRemove = useCallback((optionToRemove) => {
         onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
-    return (_jsxs(Box, { width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", 
-                // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named
-                // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-                borderColor: error || localError
-                    ? theme.colors.semanticText.error
-                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.background[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
-                    borderColor: error || localError
-                        ? theme.colors.semanticText.error
-                        : theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${error || localError
-                        ? theme.colors.boxShadow.error
-                        : theme.colors.boxShadow.primary}`,
-                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.text[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+    return (_jsxs(Box, { width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, sx: {
+                    ...getFieldStateStyles(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...reducedMotionSx(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: fieldFocusRing(theme),
+                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: placeholderInk(theme.colors), opacity: 1 }, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
-                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && (_jsx(ErrorMessage, { errorMessage: localError || errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), _jsx(FieldMessage, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Button, Center, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
+import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
+import Avatar from "../Avatar/Avatar.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import PersonChip from "../PersonChip/PersonChip.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
@@ -20,7 +22,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         h: "1.75rem",
         alignItems: "center",
         justifyContent: "center",
-        borderRadius: "md",
+        borderRadius: "lg",
         cursor: "pointer",
         border: "none",
         bg: "transparent",
@@ -46,12 +48,9 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
     };
     return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
-                                        maxW: "18rem", bg: theme.colors.backgroundColor.light, 
-                                        // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
-                                        // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
-                                        // app never triggers). The `bg` prop above only recolors the list itself, not the
-                                        // inherited var, so items fall back to white until hover/focus — set the var too.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Center, { pt: 4, pb: 2, children: _jsx(Avatar, { size: "xl", name: userName, src: userAvathar }) }), _jsxs(Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && (_jsx(Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), _jsx(MenuDivider, { borderColor: theme.colors.boxborder[200] }), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                        maxW: "18rem", bg: theme.colors.surfaceRaised, 
+                                        // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Box, { pt: 4, pb: 2, px: 4, children: _jsx(PersonChip, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), _jsx(MenuDivider, { borderColor: theme.colors.boxborder[200] }), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c, _d;
                                                         return (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
                                                     }) }), _jsx(MenuDivider, { borderColor: theme.colors.boxborder[200] }), _jsxs(MenuItem, { onClick: handleLogout, sx: {

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

@@ -1,21 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Box, Flex, Text, Input, Textarea, Button, Divider, Spinner, Tooltip, } from "@chakra-ui/react";
+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 { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { FIELD_RADIUS } from "../Common/fieldStyles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.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); its `ref` only ever reaches the title input, never the primary textarea. */
-export default 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, ref: inputRef, customPlaceholder = "Add a note...", cancelButtonHide = false, }) {
+/** 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 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("");
@@ -119,15 +122,15 @@ export default function NoteTextArea({ width = "100%", handleSubmit, handleCance
     const isOverLimit = noteWordCount > maxNoteWordCount;
     const collapsedHoverBg = resolveHoverTint(theme.colors.gray[50], theme.colors.background[50]);
     const activeControlHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.gray[50]);
-    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 ? theme.colors.gray[50] : theme.colors.background[50], transition: "border-color 0.2s", children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _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, { ref: inputRef, value: titleValue, onChange: (e) => {
+    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 ? theme.colors.gray[50] : theme.colors.background[50], transition: transitionFor(["border-color"]), children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, 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...", variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", color: theme.colors.text[700], _placeholder: {
+                                        }, placeholder: "Add a title...", "aria-label": titleAriaLabel, variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", 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: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: {
+                                        } }), _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: "0.75rem", 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: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: "background 0.15s", _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: "background 0.15s", _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", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
+                                    }, 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: "label", htmlFor: fileInputId, 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", { 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);
@@ -140,5 +143,7 @@ export default function NoteTextArea({ width = "100%", handleSubmit, handleCance
                                     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: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.textMuted }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: "all 0.15s", _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
-}
+                                }, 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: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.textMuted }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: transitionFor(["background-color", "color"]), _hover: { bg: theme.colors.gray[200], 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/Notification/Notification.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Box, VStack, HStack, Text, Icon, Avatar, Divider, Skeleton, SkeletonCircle, } from "@chakra-ui/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 } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
-/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import Avatar from "../Avatar/Avatar.js";
+/** 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();
@@ -14,11 +16,13 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
     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 : theme.colors.text[800];
+    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]);
@@ -104,6 +108,6 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                     bg: closeTone.bg,
                     color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: "all 0.2s ease", children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: accentTextOnCanvas(theme.colors.orange, bgColor), boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.orange, bgColor), fontWeight: "semibold", children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), 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: theme.colors.textMuted, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: theme.colors.textMuted, boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+                }, transition: "all 0.2s ease", 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: "semibold", 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: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), 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/NotificationBell/NotificationBell.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Bell } from "lucide-react";
+import { Box, Icon, IconButton } from "../Primitives/Primitives.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";
+/** 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 = 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: "0.6875rem", 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: "0.875rem", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? (_jsx(Text, { mt: 0.5, fontSize: "0.8125rem", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, _jsx(Text, { mt: 1, fontSize: "0.75rem", 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";
+/** Day sections + consecutive groupKey runs over NotificationItem rows. Generic over the caller's row type. */
+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: "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 (_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,31 @@
+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 { formatCount, useAnchoredPanelHeight } from "./notificationHelpers.js";
+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 } = 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: colors.boxborder[200], 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: colors.boxborder[200], 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: colors.boxborder[200], 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: colors.boxborder[200], 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";