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

package/dist/Components/Modal/ModalProps.d.ts

@@ -1,12 +1,27 @@
-import { ModalProps } from "@chakra-ui/react";
-/** Props for our Modal wrapper — a curated subset of Chakra's ModalProps plus overlay/loading extras. */
-export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+import { ModalContentProps, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from "@chakra-ui/react";
+/** Curated Chakra ModalProps; overlay* override the theme scrim, contentProps spreads onto ModalContent. */
+export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "closeOnEsc" | "trapFocus" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+    /** Overrides the theme scrim colour on ModalOverlay. */
     overlaybg?: string;
     overlaybackdropFilter?: string;
     overlaybackdropInvert?: string;
     overlaybackdropBlur?: string;
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full";
-    /** Only ModalHeader/ModalBody/ModalFooter render; other elements and fragment-wrapped slots are silently dropped. */
+    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type one fragment deep; any other sibling is dropped. */
     children?: React.ReactNode;
+    /** Spinner replaces body and footer; header and close button stay. */
     isLoading?: boolean;
+    /** Header text; ignored when a ModalHeader child is passed. */
+    title?: React.ReactNode;
+    /** Muted line under the header; renders a header even without `title`. */
+    subtitle?: React.ReactNode;
+    hideCloseButton?: boolean;
+    /** Spread onto ModalContent last, so it overrides `aria-busy` and theme styles. */
+    contentProps?: ModalContentProps;
 };
+/** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered ModalHeader; omit to keep theme defaults. */
+export type ModalHeaderSlotProps = ModalHeaderProps;
+/** Chakra style props (padding, borderTop, gap, sx, ...) spread onto the rendered ModalBody; omit to keep theme defaults. */
+export type ModalBodySlotProps = ModalBodyProps;
+/** Chakra style props (padding, borderTop, gap, justify, sx, ...) spread onto the rendered ModalFooter; omit to keep theme defaults. */
+export type ModalFooterSlotProps = ModalFooterProps;

package/dist/Components/MoreItems/MoreItems.js

@@ -4,6 +4,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 /** "+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 = (0, useCustomTheme_1.useCustomTheme)();
@@ -11,10 +13,10 @@ const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = fa
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.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: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.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: (0, primitives_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.background[50] }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.surfaceRaised }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.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/Components/MultiSelect/MultiSelect.js

@@ -10,8 +10,12 @@ const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/chakra/motion");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const lucide_react_1 = require("lucide-react");
 const generateUniqueId = (() => {
@@ -21,13 +25,16 @@ const generateUniqueId = (() => {
         return `${Date.now()}-${counter}`;
     };
 })();
-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, }) {
+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 = controlSizes_1.DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || controlSizes_1.DEFAULT_CONTROL_SIZE));
     const options = value;
     const [inputValue, setInputValue] = (0, react_1.useState)("");
     const [localError, setLocalError] = (0, react_1.useState)("");
     const inputRef = (0, react_1.useRef)(null);
+    const isInvalid = Boolean(error || localError);
+    const shownErrorMessage = localError || errorMessage;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error: isInvalid, errorMessage: shownErrorMessage, helperText });
     const handleInputChange = (0, react_1.useCallback)((e) => {
         setInputValue(e.target.value);
         setLocalError("");
@@ -56,20 +63,14 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
     const handleRemove = (0, react_1.useCallback)((optionToRemove) => {
         onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, sx: {
+                    ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme),
+                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.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: (0, placeholderInk_1.placeholderInk)(theme.colors), opacity: 1 }, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
-                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: localError || errorMessage })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -1,25 +1,33 @@
 /** No `options` prop — typed text is validated as an email, not picked from a list; use `SearchSelect isMultiple`. */
 export type MultiSelectProps = {
-    value: MultiSelctOPtions[];
-    onValueChange: (options: MultiSelctOPtions[]) => void;
+    value: MultiSelectOption[];
+    onValueChange: (options: MultiSelectOption[]) => void;
     width?: string;
     label?: string;
+    /** DOM id of the input; the label's `for` and the message ids derive from it. Auto-generated when omitted. */
     id?: string;
     name?: string;
+    /** Sets native `required` + `aria-required` on the field, and draws the label asterisk. Defaults to true. */
     isRequired?: boolean;
     isInformation?: boolean;
     informationMessage?: string;
     placeholderText?: string;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    /** Marks the field invalid (`aria-invalid` + error border) and swaps `helperText` for `errorMessage`; a rejected email sets this internally too. */
     error?: boolean;
+    /** Height on the shared control scale (xs 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     inputStyle?: object;
+    /** Rendered only while `error` is true; a rejected email's internal "Invalid email address" text wins over this until the input changes. */
     errorMessage?: string;
+    /** Hint under the field; hidden while invalid. */
     helperText?: string;
 };
 /** One entered chip — id is a generated key, label is the email text the user typed. */
-export type MultiSelctOPtions = {
+export type MultiSelectOption = {
     id: string;
     label: string;
 };
+/** @deprecated Typo'd name — use `MultiSelectOption`. */
+export type MultiSelctOPtions = MultiSelectOption;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = NavBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const lucide_react_1 = require("lucide-react");
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
@@ -23,7 +28,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         h: "1.75rem",
         alignItems: "center",
         justifyContent: "center",
-        borderRadius: "md",
+        borderRadius: "lg",
         cursor: "pointer",
         border: "none",
         bg: "transparent",
@@ -47,14 +52,11 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.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 }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.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 }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, pb: 2, px: 4, children: (0, jsx_runtime_1.jsx)(PersonChip_1.default, { name: userName, imageUrl: userAvathar, secondary: userRole, orientation: "vertical", size: "xl", maxW: "100%" }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.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}`));
                                                     }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,5 @@
+import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-/** 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, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): import("react/jsx-runtime").JSX.Element;
+/** Self-contained note composer (optional title + textarea + Save); `ref` forwards to the primary textarea. */
+declare const NoteTextArea: React.ForwardRefExoticComponent<NoteTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default NoteTextArea;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = NoteTextArea;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -9,16 +8,19 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const fieldStyles_1 = require("../Common/fieldStyles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
 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. */
-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 = (0, react_1.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 = (0, useCustomTheme_1.useCustomTheme)();
     const noteAreaRef = (0, react_1.useRef)(null);
+    const mergedNoteRef = (0, react_2.useMergeRefs)(noteAreaRef, ref);
+    const fileInputId = `note-text-area-file-${(0, react_1.useId)().replace(/:/g, "")}`;
     const [isActive, setIsActive] = (0, react_1.useState)(false);
     const [noteValue, setNoteValue] = (0, react_1.useState)("");
     const [titleValue, setTitleValue] = (0, react_1.useState)("");
@@ -122,15 +124,15 @@ function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title
     const isOverLimit = noteWordCount > maxNoteWordCount;
     const collapsedHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.background[50]);
     const activeControlHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.gray[50]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.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 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, value: titleValue, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.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: (0, motion_1.transitionFor)(["border-color"]), children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: {
+                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.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: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.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" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.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: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.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);
@@ -143,5 +145,7 @@ function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title
                                     if (validFiles.length > 0) {
                                         setFiles((prev) => [...prev, ...validFiles]);
                                     }
-                                }, multiple: true }), fileError && ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { size: 13, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }) })] }, idx))) }))] })] }))] }));
-}
+                                }, multiple: true }), fileError && ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { size: 13, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+});
+NoteTextArea.displayName = "NoteTextArea";
+exports.default = NoteTextArea;

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -1,4 +1,3 @@
-import { LegacyRef } from "react";
 /** Plain Chakra Textarea + title + file attach, not a rich text editor — no formatting toolbar despite the "note" naming. Use Editor for HTML content. */
 export type NoteTextAreaProps = {
     width?: number | string;
@@ -14,7 +13,10 @@ export type NoteTextAreaProps = {
     maxFilesSizeError?: string;
     maxNoteWordCount?: number;
     onChange?: (value: string) => void;
-    ref?: LegacyRef<HTMLInputElement>;
     customPlaceholder?: string;
     cancelButtonHide?: boolean;
+    /** Accessible name for the title input. Defaults to `"Note title"`. */
+    titleAriaLabel?: string;
+    /** Accessible name for the note textarea. Defaults to `customPlaceholder`. */
+    noteAriaLabel?: string;
 };

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

@@ -1,4 +1,4 @@
 import { NotificationProps } from "./NotificationProps";
-/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
+/** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
 declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;

package/dist/Components/Notification/Notification.js

@@ -1,4 +1,7 @@
 "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");
@@ -7,7 +10,9 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
-/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+/** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -16,11 +21,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 : (0, outlineRung_1.liftToContrast)(theme.colors.text[800], bgColor, accentText_1.AA_NORMAL_TEXT);
     // The dot is a graphic on the canvas: `semantic[tone][500]` measures under 3:1 there.
     const warningColor = (_e = colors === null || colors === void 0 ? void 0 : colors.warningColor) !== null && _e !== void 0 ? _e : theme.colors.semanticText.warning;
     const errorColor = (_f = colors === null || colors === void 0 ? void 0 : colors.errorColor) !== null && _f !== void 0 ? _f : theme.colors.semanticText.error;
     const successColor = (_g = colors === null || colors === void 0 ? void 0 : colors.successColor) !== null && _g !== void 0 ? _g : theme.colors.semanticText.success;
+    const dueLabelColor = (0, outlineRung_1.liftToContrast)(theme.colors.orange[500], bgColor, accentText_1.AA_NORMAL_TEXT);
+    const metaColor = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, bgColor, accentText_1.AA_NORMAL_TEXT);
     const startDate = (0, react_1.useMemo)(() => notification.startDate
         ? new Date(notification.startDate)
         : null, [notification.startDate]);
@@ -106,6 +113,6 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                     bg: closeTone.bg,
                     color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: "all 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, bgColor), boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, bgColor), fontWeight: "semibold", children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.textMuted, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.textMuted, boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+                }, transition: "all 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: dueLabelColor, fontWeight: "semibold", children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "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 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: metaColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: metaColor, boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };
 exports.default = Notification;

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

@@ -12,7 +12,7 @@ export type NotificationData = {
     status?: string;
     type: "task" | "meeting" | "call";
 };
-/** Wraps a NotificationData record with the click/close handlers and optional color overrides that render it. */
+/** Props for the `Notification` countdown card. */
 export type NotificationProps = {
     notification: NotificationData;
     onClose?: () => void;

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

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

package/dist/Components/NotificationBell/NotificationBell.js

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