npm - pixelize-design-library - Versions diffs - 2.4.2-beta.62 → 2.4.2-beta.63 - Mend

pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/dist/esm/Components/FilterSidebar/FilterSidebar.js CHANGED Viewed

@@ -7,6 +7,7 @@ import CheckBox from "../Checkbox/Checkbox.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { getFilterHoverBg } from "./filterHoverStyle.js";
 import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight,
@@ -16,6 +17,8 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
  }) => {
     const theme = useCustomTheme();
     const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
+    const rangePick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
+    const ratingPick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
     const [openPrice, setOpenPrice] = useState({});
     // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
     const isControlled = selected !== undefined;
@@ -146,20 +149,20 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, onClick: () => {
+                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? rangePick : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, onClick: () => {
                                                                 const min = v;
                                                                 const max = currentMax;
                                                                 const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                                 setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                                 setOpenPrice({});
-                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.primary[50] : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, onClick: () => {
+                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? rangePick : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, onClick: () => {
                                                             const max = v;
                                                             const min = currentMin;
                                                             const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                             setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                             setOpenPrice({});
                                                         }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
-            })()) : (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => (_jsx(Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.primary[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
+            })()) : (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => (_jsx(Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? ratingPick : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
                                 setInternalSelected((prev) => {
                                     const next = { ...prev, [section.id]: String(r) };
                                     onChange === null || onChange === void 0 ? void 0 : onChange(next);
@@ -169,7 +172,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             // orange[500] on background[50] ~2.2:1, fails the 3:1 icon bar — walk the scale like
                                             // Notification's clock icon. Canvas mirrors this row's own bg ternary (red[50] when selected).
                                             const isRowSelected = String(internalSelected[section.id] || "") === String(r);
-                                            const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? theme.colors.primary[50] : theme.colors.background[50]);
+                                            const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? ratingPick : theme.colors.background[50]);
                                             return Array.from({ length: 5 }, (_, i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
                                         })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid",
                         // NOTE: boxborder[500] not gray[200] — WCAG 1.4.11 needs >=3:1 for a control boundary; gray[200] fails in dark.

package/dist/esm/Components/KanbanBoard/AccountCard.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { Box, Flex, Text, Tooltip, HStack, VStack, Collapse, Spacer, } from "@ch
 import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
@@ -16,6 +17,7 @@ const ACTION_TRANSITION = transitionFor(["background-color", "color"]);
 const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = useCustomTheme();
     const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    const openHover = bandOn(colors.primary[50], colors.background[50]);
     const keys = useMemo(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
@@ -26,8 +28,8 @@ const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false,
             boxShadow: "md",
             transform: "translateY(-0.063rem)",
         }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "sm", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "xs-plus", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "xs", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: focusVisibleStyles(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: transitionFor(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: reducedMotionSx(), children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: {
-                                            bg: colors.primary[50],
-                                            color: accentTextOnCanvas(colors.primary, colors.primary[50]),
+                                            bg: openHover,
+                                            color: accentTextOnCanvas(colors.primary, openHover),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 export default AccountCard;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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 { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.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";
@@ -51,10 +52,10 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         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) => {
+                                        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: raisedRule(theme.colors) }), _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: {
+                                                    }) }), _jsx(MenuDivider, { borderColor: raisedRule(theme.colors) }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: theme.colors.semanticText.error,
                                                         _hover: { bg: dangerTone.bg, color: dangerTone.fg },

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

@@ -9,8 +9,9 @@ import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import Avatar from "../Avatar/Avatar.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
-const CARD_TRANSITION = "box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease";
-const DISMISS_TRANSITION = "background-color 0.2s ease, color 0.2s ease, transform 0.2s ease";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const CARD_TRANSITION = transitionFor(["box-shadow", "background-color", "border-color"], "base");
+const DISMISS_TRANSITION = transitionFor(["background-color", "color", "transform"], "base");
 /** 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;
@@ -103,7 +104,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
         return (_jsx(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(SkeletonCircle, { size: "4" }), _jsx(Skeleton, { height: "14px", width: "60%" })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(SkeletonCircle, { size: "8" }), _jsxs(VStack, { align: "start", spacing: 1, flex: "1", children: [_jsx(Skeleton, { height: "16px", width: "70%" }), _jsx(Skeleton, { height: "12px", width: "50%" })] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "40%" }), _jsx(Skeleton, { height: "12px", width: "30%" })] })] }) }));
     }
     // 🧩 Normal render
-    return (_jsxs(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: CARD_TRANSITION, sx: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
+    return (_jsxs(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: reducedMotionSx(), position: "relative", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         onClose();

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

@@ -7,6 +7,7 @@ import EmptyState from "../EmptyState/EmptyState.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 import NotificationList from "./NotificationList.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { formatCount, useAnchoredPanelHeight } from "./notificationHelpers.js";
 const DEFAULT_EMPTY = { title: "No notifications yet", description: "You're all caught up.", size: "sm" };
 /** The panel shell: header, zone/filter row, scroll body with loading/empty/error, footer. */
@@ -18,14 +19,14 @@ function NotificationPanel({ items, toItem, zones, activeZone, onZoneChange, fil
     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) => {
+    return (_jsxs(Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 3, borderBottom: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: [header !== null && header !== void 0 ? header : (_jsx(Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? (_jsx(Flex, { role: "group", "aria-label": "Notification zones", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: zones.map((zone) => {
                     const isActive = zone.id === activeZone;
                     const label = zone.count ? `${zone.label} (${formatCount(zone.count)})` : zone.label;
                     return (_jsx(Button, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "primary", "aria-pressed": isActive, onClick: () => onZoneChange === null || onZoneChange === void 0 ? void 0 : onZoneChange(zone.id) }, zone.id));
-                }) })) : null, filters && filters.length ? (_jsx(Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: filters.map((filter) => {
+                }) })) : null, filters && filters.length ? (_jsx(Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: filters.map((filter) => {
                     const isActive = filter.id === activeFilter;
                     const label = typeof filter.count === "number" ? `${filter.label} (${formatCount(filter.count)})` : filter.label;
                     return (_jsx(Button, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "secondary", "aria-pressed": isActive, onClick: () => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(filter.id) }, filter.id));
-                }) })) : null, _jsx(Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? (_jsx(Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => (_jsxs(Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [_jsx(Skeletons, { type: "circle", size: "7" }), _jsxs(Box, { flex: "1", children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "70%" }), _jsx(Box, { mt: 1.5, children: _jsx(Skeletons, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? (_jsx(EmptyState, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? _jsx(Button, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? (_jsx(EmptyState, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : (_jsxs(_Fragment, { children: [_jsx(NotificationList, { items: items, toItem: toItem, groupBy: groupBy, collapseGroups: collapseGroups, dayLabels: dayLabels, onItemClick: onItemClick, itemActions: itemActions, renderItem: renderItem, renderSectionHeader: renderSectionHeader, unreadIndicator: unreadIndicator, actionsAlwaysVisible: actionsAlwaysVisible, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Notifications" }), hasMore ? (_jsx(Flex, { justify: "center", py: 3, children: _jsx(Button, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? (_jsx(Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: footer })) : null] }));
+                }) })) : null, _jsx(Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? (_jsx(Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => (_jsxs(Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [_jsx(Skeletons, { type: "circle", size: "7" }), _jsxs(Box, { flex: "1", children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "70%" }), _jsx(Box, { mt: 1.5, children: _jsx(Skeletons, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? (_jsx(EmptyState, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? _jsx(Button, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? (_jsx(EmptyState, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : (_jsxs(_Fragment, { children: [_jsx(NotificationList, { items: items, toItem: toItem, groupBy: groupBy, collapseGroups: collapseGroups, dayLabels: dayLabels, onItemClick: onItemClick, itemActions: itemActions, renderItem: renderItem, renderSectionHeader: renderSectionHeader, unreadIndicator: unreadIndicator, actionsAlwaysVisible: actionsAlwaysVisible, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Notifications" }), hasMore ? (_jsx(Flex, { justify: "center", py: 3, children: _jsx(Button, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? (_jsx(Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: raisedRule(colors), flexShrink: 0, children: footer })) : null] }));
 }
 export default NotificationPanel;

package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 const EMPTY = {
@@ -51,6 +52,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
         });
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 export default CreateOrgModal;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton,
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
@@ -72,7 +73,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
     const primarySolid = resolveFilledSurface(colors.primary, colors);
-    const onPrimary50 = accentTextOnCanvas(colors.primary, colors.primary[50]);
+    const primaryTile = bandOn(primary50, surface);
+    const onPrimaryTile = accentTextOnCanvas(colors.primary, primaryTile);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -126,12 +128,12 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (e) => {
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (e) => {
                                         if (e.key !== "Enter" && e.key !== " ")
                                             return;
                                         e.preventDefault();
                                         onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId);
-                                    }, children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+                                    }, children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js CHANGED Viewed

@@ -4,9 +4,13 @@ import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-u
 import { Eye, FileText, SquarePen, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+const RING_TRANSITION = transitionFor(["box-shadow"], "base");
+const FADE_TRANSITION = transitionFor(["opacity"], "base");
+const ACTION_TRANSITION = transitionFor(["transform", "background", "box-shadow"], "base");
 /** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
@@ -62,13 +66,13 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
         return (_jsx(Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: c.primary.opacity[16], color: accentTextOnCanvas(c.primary, c.backgroundColor.main), children: fallbackText ? (_jsx(Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : (_jsx(User, { size: "48%" })) }));
     };
     const hasActions = isEditable || isView;
-    return (_jsxs(Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+    return (_jsxs(Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: RING_TRANSITION, sx: {
             "&:hover .ppv-overlay": { opacity: 1 },
             "&:hover .ppv-actions": { opacity: 1 },
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
                                         bg: c.primary[600],
                                         color: labelOnFill(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
@@ -76,7 +80,7 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
                                     }, _active: {
                                         bg: c.primary[700],
                                         color: labelOnFill(c.primary[700], c.white, c.black),
-                                    } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                                    } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
                                         bg: c.gray[50],
                                         color: accentTextOnCanvas(c.primary, c.gray[50]),
                                         transform: "scale(1.1)",

package/dist/esm/Components/SearchSelect/SearchSelect.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { Check, ChevronDown, ChevronUp, CircleX, Plus, X } from "lucide-react";
 import { TextLabel } from "../Common/FormLabel.js";
 import Tag from "../Tag/Tag.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
@@ -22,6 +23,7 @@ import SelectTruncatedLabel from "./SelectTruncatedLabel.js";
 import { getSearchSelectSizeStyles, } from "./searchSelectSize.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { ADD_NEW_ROW, NO_ROW, SELECT_ALL_ROW, firstRow, hasRow, lastRow, stepRow } from "./searchSelectNav.js";
 const SEGMENT_TRANSITION = transitionFor(["background-color", "box-shadow"]);
 const CHEVRON_TRANSITION = transitionFor(["transform", "color"], "base");
 const normalizeSingleValue = (val) => {
@@ -49,7 +51,7 @@ const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSel
             bg: isSelected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
         }, onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: optionRowInk(colors, singleSelected),
         // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
-        fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), borderBottom: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
+        fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
 });
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
 /** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
@@ -94,7 +96,9 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     const listboxId = `${baseId}-listbox`;
     const insideSelectPortalId = `${baseId}-inside-select`;
     const getOptionId = (index) => `${baseId}-option-${index}`;
-    const [activeIndex, setActiveIndex] = useState(-1);
+    const selectAllId = `${baseId}-select-all`;
+    const addNewId = `${baseId}-add-new`;
+    const [activeIndex, setActiveIndex] = useState(NO_ROW);
     const pendingFocusRestoreRef = useRef(false);
     // NOTE: the ARIA host follows real focus; opening from a button doesn't move it.
     const [focusedTrigger, setFocusedTrigger] = useState(null);
@@ -190,9 +194,22 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         }
         setInputValue("");
     };
-    const activeOptionId = isOpen && activeIndex >= 0 && filteredOptions[activeIndex]
-        ? getOptionId(activeIndex)
-        : undefined;
+    const hasSelectAllRow = isMultiple && isSelectAll;
+    const hasAddNewRow = Boolean(addNew === null || addNew === void 0 ? void 0 : addNew.enabled);
+    const rowLayout = {
+        optionCount: filteredOptions.length,
+        hasSelectAll: hasSelectAllRow,
+        hasAddNew: hasAddNewRow,
+    };
+    const activeOptionId = !isOpen
+        ? undefined
+        : activeIndex === SELECT_ALL_ROW && hasSelectAllRow
+            ? selectAllId
+            : activeIndex === ADD_NEW_ROW && hasAddNewRow
+                ? addNewId
+                : activeIndex >= 0 && filteredOptions[activeIndex]
+                    ? getOptionId(activeIndex)
+                    : undefined;
     // One element hosts the field's ARIA at a time: real focus wins, else render state.
     const primaryTarget = focusedTrigger !== null && focusedTrigger !== void 0 ? focusedTrigger : (isOpen || inputValue || !selectedValues.length
         ? "input"
@@ -235,19 +252,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         setIsOpen(true);
     };
     const moveActive = (delta) => {
-        setActiveIndex((prev) => {
-            if (!filteredOptions.length)
-                return -1;
-            if (prev < 0)
-                return delta > 0 ? 0 : filteredOptions.length - 1;
-            return (prev + delta + filteredOptions.length) % filteredOptions.length;
-        });
+        setActiveIndex((prev) => stepRow(rowLayout, prev, delta));
     };
     const restoreFocus = () => {
         pendingFocusRestoreRef.current = true;
     };
     // NOTE: only reacts to keys from the combobox triggers — without this guard, Tag's own "Remove" button lost its clicks.
     const handleControlKeyDown = (e) => {
+        var _a;
         const target = e.target;
         const isKnownTrigger = target === inputRef.current ||
             target === triggerButtonRef.current ||
@@ -275,15 +287,15 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                 }
                 break;
             case "Home":
-                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                if (isOpen && firstRow(rowLayout) !== NO_ROW && !isTextInputTarget) {
                     e.preventDefault();
-                    setActiveIndex(0);
+                    setActiveIndex(firstRow(rowLayout));
                 }
                 break;
             case "End":
-                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                if (isOpen && lastRow(rowLayout) !== NO_ROW && !isTextInputTarget) {
                     e.preventDefault();
-                    setActiveIndex(filteredOptions.length - 1);
+                    setActiveIndex(lastRow(rowLayout));
                 }
                 break;
             case "Enter":
@@ -291,6 +303,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                     e.preventDefault();
                     openMenu();
                 }
+                else if (activeIndex === SELECT_ALL_ROW && hasSelectAllRow) {
+                    e.preventDefault();
+                    handleSelectAll();
+                }
+                else if (activeIndex === ADD_NEW_ROW && (addNew === null || addNew === void 0 ? void 0 : addNew.enabled)) {
+                    e.preventDefault();
+                    (_a = addNew.onClick) === null || _a === void 0 ? void 0 : _a.call(addNew);
+                }
                 else if (activeIndex >= 0 && filteredOptions[activeIndex]) {
                     e.preventDefault();
                     handleSelect(filteredOptions[activeIndex]);
@@ -309,7 +329,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                 if (isOpen) {
                     e.preventDefault();
                     setIsOpen(false);
-                    setActiveIndex(-1);
+                    setActiveIndex(NO_ROW);
                     restoreFocus();
                 }
                 break;
@@ -321,11 +341,12 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     // (e.g. typing), rather than leaving it pointing at a now out-of-range or stale option.
     useEffect(() => {
         if (!isOpen) {
-            setActiveIndex(-1);
+            setActiveIndex(NO_ROW);
             return;
         }
-        setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
-    }, [isOpen, filteredOptions.length]);
+        const layout = { optionCount: filteredOptions.length, hasSelectAll: hasSelectAllRow, hasAddNew: hasAddNewRow };
+        setActiveIndex((prev) => (hasRow(prev, layout) ? prev : NO_ROW));
+    }, [isOpen, filteredOptions.length, hasSelectAllRow, hasAddNewRow]);
     useEffect(() => {
         var _a, _b;
         if (!isOpen || activeIndex < 0 || !optionsListRef.current)
@@ -640,6 +661,6 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                         top: `${dropdownPos.top}px`,
                         left: `${dropdownPos.left}px`,
                         width: `${dropdownPos.width}px`,
-                    }, zIndex: zIndices.popover, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && (_jsxs(Box, { py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsx(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], bg: theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                    }, zIndex: zIndices.popover, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [hasSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === SELECT_ALL_ROW ? rowBackgrounds.active : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsx(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), bg: activeIndex === ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export default SearchSelect;

package/dist/esm/Components/SearchSelect/searchSelectNav.js ADDED Viewed

@@ -0,0 +1,32 @@
+export const NO_ROW = -1;
+export const SELECT_ALL_ROW = -2;
+export const ADD_NEW_ROW = -3;
+export const navRows = ({ optionCount, hasSelectAll, hasAddNew }) => [
+    ...(hasSelectAll ? [SELECT_ALL_ROW] : []),
+    ...Array.from({ length: optionCount }, (_, index) => index),
+    ...(hasAddNew ? [ADD_NEW_ROW] : []),
+];
+export const hasRow = (row, { optionCount, hasSelectAll, hasAddNew }) => (row >= 0 && row < optionCount) || (row === SELECT_ALL_ROW && hasSelectAll) || (row === ADD_NEW_ROW && hasAddNew);
+export const stepRow = (layout, current, delta) => {
+    const rows = navRows(layout);
+    if (!rows.length)
+        return NO_ROW;
+    const at = rows.indexOf(current);
+    if (at < 0)
+        return delta > 0 ? rows[0] : rows[rows.length - 1];
+    return rows[(at + delta + rows.length) % rows.length];
+};
+export const firstRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasSelectAll)
+        return SELECT_ALL_ROW;
+    if (optionCount > 0)
+        return 0;
+    return hasAddNew ? ADD_NEW_ROW : NO_ROW;
+};
+export const lastRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasAddNew)
+        return ADD_NEW_ROW;
+    if (optionCount > 0)
+        return optionCount - 1;
+    return hasSelectAll ? SELECT_ALL_ROW : NO_ROW;
+};

package/dist/esm/Components/Select/SelectPopup.js CHANGED Viewed

@@ -3,6 +3,7 @@ import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, us
 import { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverContent, Portal, Spinner, useDisclosure, useMergeRefs, } from "@chakra-ui/react";
 import { Check, ChevronDown, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { optionRowDescriptionInk, optionRowInk, optionRowWeight } from "./optionRowInk.js";
@@ -436,7 +437,7 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const selectedValueIds = selectedOptions.map((option) => option.id.toString());
     const hiddenValues = !name ? [] : props.isMulti ? selectedValueIds : [(_c = selectedValueIds[0]) !== null && _c !== void 0 ? _c : ""];
     const groupedRows = useMemo(() => (hasGroups ? buildGroupedRows(filteredOptions) : []), [hasGroups, filteredOptions]);
-    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "div", ref: mergedTriggerRef, ...ids.controlProps, role: "combobox", tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-owns": `${listboxId} ${filterInputId}`, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled || undefined, "data-readonly": isReadOnly || undefined, "aria-required": isRequired || undefined, "aria-label": triggerAriaLabel(), "aria-labelledby": ariaLabelledBy, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", textAlign: "left", cursor: isDisabled ? "not-allowed" : isReadOnly ? "default" : "pointer", "data-testid": dataTestId, sx: triggerSx, children: [_jsx(Box, { as: "span", display: "inline-flex", flexWrap: showChips ? "wrap" : "nowrap", alignItems: "center", gap: showChips ? 1 : 1.5, minW: 0, flex: 1, isTruncated: !showChips, children: showChips ? (_jsxs(_Fragment, { children: [visibleChipOptions.map((option) => (_jsx(Tag, { label: String(option.label), size: chipSize, variant: "subtle", icon: isInteractive ? X : undefined, onIconClick: isInteractive ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && (_jsx(Tag, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : (_jsxs(_Fragment, { children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear selection", onClick: handleClear, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: _jsx(X, { size: CONTROL_SIZES[size].iconSize }) })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) })] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, width: "max-content", minWidth: triggerWidth ? `${triggerWidth}px` : undefined, maxWidth: "min(24rem, calc(100vw - 2rem))", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [_jsx(Box, { p: spec.mx, borderBottom: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, display: isSearchable ? undefined : "none", children: _jsx(Input, { ref: filterInputRef, id: filterInputId, size: size, px: spec.px, placeholder: "Type to filter...", value: currentSearch, onChange: handleFilterChange, "aria-activedescendant": activeDescendantId, "aria-controls": listboxId, "aria-label": "Filter options", tabIndex: isSearchable ? undefined : -1 }) }), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-label": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : placeholder, "aria-multiselectable": props.isMulti || undefined, "aria-busy": isLoading || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, onScroll: handleListScroll, children: [filteredOptions.length === 0 && !isLoading && !showCreateRow && (_jsx(Box, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, color: colors.textMuted, children: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options" })), showCreateRow && (_jsx(Box, { id: createRowId, role: "option", "aria-selected": false, "data-index": -1, onClick: handleCreate, mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), hasGroups
+    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "div", ref: mergedTriggerRef, ...ids.controlProps, role: "combobox", tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-owns": `${listboxId} ${filterInputId}`, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled || undefined, "data-readonly": isReadOnly || undefined, "aria-required": isRequired || undefined, "aria-label": triggerAriaLabel(), "aria-labelledby": ariaLabelledBy, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", textAlign: "left", cursor: isDisabled ? "not-allowed" : isReadOnly ? "default" : "pointer", "data-testid": dataTestId, sx: triggerSx, children: [_jsx(Box, { as: "span", display: "inline-flex", flexWrap: showChips ? "wrap" : "nowrap", alignItems: "center", gap: showChips ? 1 : 1.5, minW: 0, flex: 1, isTruncated: !showChips, children: showChips ? (_jsxs(_Fragment, { children: [visibleChipOptions.map((option) => (_jsx(Tag, { label: String(option.label), size: chipSize, variant: "subtle", icon: isInteractive ? X : undefined, onIconClick: isInteractive ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && (_jsx(Tag, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : (_jsxs(_Fragment, { children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear selection", onClick: handleClear, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: _jsx(X, { size: CONTROL_SIZES[size].iconSize }) })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) })] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, width: "max-content", minWidth: triggerWidth ? `${triggerWidth}px` : undefined, maxWidth: "min(24rem, calc(100vw - 2rem))", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [_jsx(Box, { p: spec.mx, borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, display: isSearchable ? undefined : "none", children: _jsx(Input, { ref: filterInputRef, id: filterInputId, size: size, px: spec.px, placeholder: "Type to filter...", value: currentSearch, onChange: handleFilterChange, "aria-activedescendant": activeDescendantId, "aria-controls": listboxId, "aria-label": "Filter options", tabIndex: isSearchable ? undefined : -1 }) }), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-label": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : placeholder, "aria-multiselectable": props.isMulti || undefined, "aria-busy": isLoading || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, onScroll: handleListScroll, children: [filteredOptions.length === 0 && !isLoading && !showCreateRow && (_jsx(Box, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, color: colors.textMuted, children: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options" })), showCreateRow && (_jsx(Box, { id: createRowId, role: "option", "aria-selected": false, "data-index": -1, onClick: handleCreate, mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), hasGroups
                                             ? groupedRows.map((row) => {
                                                 var _a;
                                                 return row.kind === "header" ? (_jsx(Box, { mx: spec.mx, px: spec.px, pt: 2, pb: 1, fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.03em", color: colors.textMuted, children: row.group }, row.key)) : (_jsx(OptionRow, { option: row.option, index: row.index, listboxId: listboxId, isSelected: selectedIds.has(row.option.id.toString()), isActive: row.index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, spec: spec, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, row.key));

package/dist/esm/Components/SelectSearch/SelectSearch.js CHANGED Viewed

@@ -12,6 +12,7 @@ import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes
 import { optionRowSpec, OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { optionRowDescriptionInk, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
@@ -229,7 +230,7 @@ export default function SelectSearch({ options, initialSelectedOption, onOptionS
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "sm", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: raisedRule(theme.colors), zIndex: 1, borderTop: `1px solid ${raisedRule(theme.colors)}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "sm", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

package/dist/esm/Components/SettingRow/SettingRow.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Divider, Flex, Grid, Text } from "@chakra-ui/react";
 import { cloneElement, isValidElement, useId } from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
 /** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
 const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDisabled = false }) => {
     var _a;
@@ -17,6 +18,6 @@ const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDis
             "aria-describedby": (_a = controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-describedby"]) !== null && _a !== void 0 ? _a : resolvedDescriptionId,
         })
         : control;
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: colors.boxborder[200] }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [_jsxs(Box, { children: [htmlFor ? (_jsx(Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : (_jsx(Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), _jsx(Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "xs-plus", color: colors.textMuted, children: description })] }), _jsx(Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: cardRule(colors) }), _jsxs(Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [_jsxs(Box, { children: [htmlFor ? (_jsx(Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : (_jsx(Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), _jsx(Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "xs-plus", color: colors.textMuted, children: description })] }), _jsx(Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
 };
 export default SettingRow;