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

package/dist/esm/Components/Reorder/Reorder.js

@@ -3,6 +3,7 @@ import { Badge, Box, Divider, HStack, IconButton, Image, Text, } from "@chakra-u
 import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
 import { BetweenHorizonalStart, GripVertical, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 /** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = useCustomTheme();
@@ -14,9 +15,9 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
         reordered.splice(result.destination.index, 0, moved);
         onReorder(reordered);
     };
-    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
+    return (_jsxs(Box, { borderWidth: BORDER_WIDTHS.hairline, borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
                                     var _a;
-                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: `${BORDER_WIDTHS.hairline} solid`, borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
                                 } }, item.id))), provided.placeholder] })) }) })] }));
 };
 export default ReorderList;

package/dist/esm/Components/ReviewList/ReviewList.js

@@ -3,6 +3,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
 import { BadgeCheck, ThumbsUp } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
@@ -25,7 +26,6 @@ const DEFAULT_LABELS = {
     photoAlt: (author) => `Photo from ${author}'s review`,
 };
 const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
-const tabular = { fontVariantNumeric: "tabular-nums" };
 const SKELETON_ROWS = [0, 1, 2];
 const makeFormatter = (locale) => {
     const options = { day: "numeric", month: "short", year: "numeric" };
@@ -54,8 +54,8 @@ const ReviewRow = ({ review, index, clampChars, fmt, labels, pressed, expanded,
     const showHelpful = review.helpful !== undefined || pressed;
     return (_jsxs(Box, { as: "li", listStyleType: "none", "data-testid": `review-${review.id}`, children: [index > 0 && _jsx(Box, { "aria-hidden": true, h: "1px", bg: colors.background[100] }), _jsxs(Flex, { direction: "column", gap: 2.5, py: 6, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Rating, { value: review.rating, size: "sm", showValue: false }), review.title && (_jsx(Text, { as: "h3", fontSize: "md", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: review.title }))] }), _jsxs(Box, { children: [_jsx(Text, { id: bodyId, fontSize: "sm", lineHeight: 1.6, color: colors.text[700], noOfLines: isLong && !expanded ? 4 : undefined, children: review.body }), isLong && (_jsx(Box, { as: "button", type: "button", mt: 1, fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => onToggleExpanded(review.id), borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: expanded ? labels.readLess : labels.readMore }))] }), review.media && review.media.length > 0 && (_jsx(Flex, { gap: 2, wrap: "wrap", children: review.media.map((m) => {
                             var _a;
-                            return (_jsx(Box, { boxSize: "72px", borderRadius: "12px", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: _jsx("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
-                        }) })), _jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: tabular, children: [_jsx(Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: review.city })] })), _jsx(Dot, {}), date.valid ? (_jsx("time", { dateTime: review.date, children: date.text })) : (_jsx(Text, { as: "span", children: date.text })), review.purchasedSize && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs(Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [_jsx(BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && (_jsx(Box, { children: _jsx(Button, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: _jsx(ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, fontVariantNumeric: "tabular-nums" }, children: labels.helpful(count) }) }))] })] }));
+                            return (_jsx(Box, { boxSize: "72px", borderRadius: "xl", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: _jsx("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
+                        }) })), _jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: NUMERIC_TEXT, children: [_jsx(Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: review.city })] })), _jsx(Dot, {}), date.valid ? (_jsx("time", { dateTime: review.date, children: date.text })) : (_jsx(Text, { as: "span", children: date.text })), review.purchasedSize && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx(Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsxs(Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [_jsx(BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && (_jsx(Box, { children: _jsx(Button, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: _jsx(ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, ...NUMERIC_TEXT }, children: labels.helpful(count) }) }))] })] }));
 };
 const SkeletonRow = () => (_jsx(Box, { as: "li", listStyleType: "none", "aria-hidden": true, py: 6, children: _jsxs(Flex, { direction: "column", gap: 3, children: [_jsx(Skeletons, { type: "skeleton", width: "80px", height: "14px", borderRadius: "sm" }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(Skeletons, { type: "skeleton", width: "100%", height: "12px", borderRadius: "sm" }), _jsx(Skeletons, { type: "skeleton", width: "94%", height: "12px", borderRadius: "sm" }), _jsx(Skeletons, { type: "skeleton", width: "60%", height: "12px", borderRadius: "sm" })] }), _jsx(Skeletons, { type: "skeleton", width: "180px", height: "12px", borderRadius: "sm" })] }) }));
 /** Customer reviews: stars, clamped body, verified marker, helpful vote and load-more paging, with a slot for sorting. */

package/dist/esm/Components/ReviewSummary/ReviewSummary.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { Star } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { DEFAULT_LOCALE } from "../../Utils/price.js";
 import Rating from "../Rating/Rating.js";
 import Button from "../Button/Button.js";
 const STARS = [5, 4, 3, 2, 1];
 const DEFAULT_MIN_RATINGS_FOR_BARS = 10;
-const tabular = { fontVariantNumeric: "tabular-nums" };
 const defaultLabels = (locale) => ({
     heading: "Ratings & reviews",
     writeReview: "Write a review",
@@ -34,9 +34,9 @@ const ReviewSummary = ({ rating, count, breakdown, minRatingsForBars = DEFAULT_M
         const percentOf = percentages(counts);
         return (_jsx(Flex, { direction: "column", gap: 2, flex: "1", minW: 0, maxW: "26rem", w: "100%", children: STARS.map((stars) => {
                 const percent = percentOf(stars);
-                return (_jsxs(Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [_jsxs(Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: tabular, children: [_jsx("span", { children: stars }), _jsx(Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), _jsx(Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: _jsx(Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), _jsx(Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: tabular, children: nf.format(counts[stars]) })] }, stars));
+                return (_jsxs(Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [_jsxs(Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: NUMERIC_TEXT, children: [_jsx("span", { children: stars }), _jsx(Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), _jsx(Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: _jsx(Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), _jsx(Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: NUMERIC_TEXT, children: nf.format(counts[stars]) })] }, stars));
             }) }));
     };
-    return (_jsxs(Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [_jsx(Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? (_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? _jsx(Box, { mt: 3, children: writeButton }) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [_jsx(Text, { fontSize: "3rem", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: averageText }), _jsx(Rating, { value: average, size: "md", showValue: false }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? _jsx(Box, { mt: 5, children: writeButton }) : null] }))] }));
+    return (_jsxs(Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [_jsx(Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? (_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? _jsx(Box, { mt: 3, children: writeButton }) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [_jsxs(Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [_jsx(Text, { fontSize: "5xl", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, children: averageText }), _jsx(Rating, { value: average, size: "md", showValue: false }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, sx: NUMERIC_TEXT, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? _jsx(Box, { mt: 5, children: writeButton }) : null] }))] }));
 };
 export default ReviewSummary;

package/dist/esm/Components/SaveBar/SaveBar.js

@@ -6,7 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 /** Floating dirty-state bar: surfaceRaised card, slides/fades in on mount, unmounts when closed. */
-const SaveBar = ({ isOpen, message = "You have unsaved changes", onSave, onDiscard, isSaving = false, isSaveDisabled = false, saveLabel = "Save changes", discardLabel = "Discard", position = "sticky", }) => {
+const SaveBar = ({ isOpen, message = "You have unsaved changes", onSave, onDiscard, isSaving = false, isSaveDisabled = false, saveLabel = "Save changes", discardLabel = "Discard", position = "sticky", ...rest }) => {
     const { colors } = useCustomTheme();
     const [isVisible, setIsVisible] = useState(false);
     useEffect(() => {
@@ -14,6 +14,6 @@ const SaveBar = ({ isOpen, message = "You have unsaved changes", onSave, onDisca
     }, [isOpen]);
     if (!isOpen)
         return null;
-    return (_jsx(Box, { position: position, bottom: 0, left: 0, right: 0, zIndex: 1, px: { base: 4, md: 6 }, pb: { base: 4, md: 5 }, pointerEvents: "none", children: _jsxs(Flex, { align: "center", justify: "space-between", gap: 3, wrap: "wrap", mx: "auto", maxW: "64rem", px: 5, py: 3, bg: colors.surfaceRaised, borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "xl", boxShadow: "lg", pointerEvents: "auto", opacity: isVisible ? 1 : 0, transform: isVisible ? "translateY(0)" : "translateY(0.5rem)", transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [_jsx(Text, { role: "status", fontSize: "sm", color: colors.textMuted, children: message }), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { variant: "ghost", colorScheme: "gray", label: discardLabel, isDisabled: isSaving, onClick: onDiscard }), _jsx(Button, { variant: "solid", colorScheme: "primary", label: saveLabel, isLoading: isSaving, isDisabled: isSaveDisabled, onClick: onSave })] })] }) }));
+    return (_jsx(Box, { ...rest, position: position, bottom: 0, left: 0, right: 0, zIndex: 1, px: { base: 4, md: 6 }, pb: { base: 4, md: 5 }, pointerEvents: "none", children: _jsxs(Flex, { align: "center", justify: "space-between", gap: 3, wrap: "wrap", mx: "auto", maxW: "64rem", px: 5, py: 3, bg: colors.surfaceRaised, borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "xl", boxShadow: "lg", pointerEvents: "auto", opacity: isVisible ? 1 : 0, transform: isVisible ? "translateY(0)" : "translateY(0.5rem)", transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [_jsx(Text, { role: "status", fontSize: "sm", color: colors.textMuted, children: message }), _jsxs(Flex, { gap: 2, children: [_jsx(Button, { variant: "ghost", colorScheme: "gray", label: discardLabel, isDisabled: isSaving, onClick: onDiscard }), _jsx(Button, { variant: "solid", colorScheme: "primary", label: saveLabel, isLoading: isSaving, isDisabled: isSaveDisabled, onClick: onSave })] })] }) }));
 };
 export default SaveBar;

package/dist/esm/Components/Search/Search.js

@@ -11,6 +11,7 @@ import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitiv
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { registerCtrlShortcut } from "./ctrlShortcut.js";
 const HINT_WIDTH = "2.75rem";
 /** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
 const Search = forwardRef(function Search({ placeholder = "Search...", onSearch, onClear, onclose, shortcut = "Ctrl+K", showShortcutHint = true, query, size = DEFAULT_CONTROL_SIZE, name, isDisabled = false, error = false, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, "aria-label": ariaLabelProp, }, ref) {
@@ -27,15 +28,7 @@ const Search = forwardRef(function Search({ placeholder = "Search...", onSearch,
     useEffect(() => {
         if (!shortcutKey)
             return;
-        const handleKeyDown = (event) => {
-            var _a;
-            if (event.ctrlKey && event.key.toLowerCase() === shortcutKey) {
-                event.preventDefault();
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
+        return registerCtrlShortcut(shortcutKey, () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     }, [shortcutKey]);
     const clearSize = `calc(${spec.height} - 0.5rem)`;
     const rightPadding = `calc(${spec.paddingX} + ${showClear ? clearSize : "0rem"} + ${showHint ? HINT_WIDTH : "0rem"})`;

package/dist/esm/Components/Search/ctrlShortcut.js

@@ -0,0 +1,25 @@
+const focusers = new Map();
+const onKeyDown = (event) => {
+    if (!event.ctrlKey)
+        return;
+    const set = focusers.get(event.key.toLowerCase());
+    if (!set)
+        return;
+    event.preventDefault();
+    set.forEach((focus) => focus());
+};
+export const registerCtrlShortcut = (key, focus) => {
+    var _a;
+    if (focusers.size === 0)
+        window.addEventListener("keydown", onKeyDown);
+    const set = (_a = focusers.get(key)) !== null && _a !== void 0 ? _a : new Set();
+    set.add(focus);
+    focusers.set(key, set);
+    return () => {
+        set.delete(focus);
+        if (set.size === 0)
+            focusers.delete(key);
+        if (focusers.size === 0)
+            window.removeEventListener("keydown", onKeyDown);
+    };
+};

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

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Input, InputGroup, Spinner, Text, IconButton, useOutsideClick, Portal, } from "@chakra-ui/react";
 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";
@@ -13,13 +14,16 @@ import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
 import { fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
-import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { focusVisibleStyles, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import SelectTruncatedLabel from "./SelectTruncatedLabel.js";
-import { getSearchSelectSizeStyles } from "./searchSelectSize.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) => {
@@ -34,10 +38,25 @@ const normalizeMultiValue = (val) => {
     }
     return [];
 };
+const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
+const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSelected, isActive, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
+    const singleSelected = isSelected && !isMultiple;
+    return (_jsxs(Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: isSelected
+            ? isActive
+                ? rowBackgrounds.selectedActive
+                : rowBackgrounds.selected
+            : isActive
+                ? rowBackgrounds.active
+                : "transparent", _hover: {
+            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 ${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. */
 const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "sm", isDisabled = false, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const s = getSearchSelectSizeStyles(size);
     const spec = optionRowSpec(size);
     const emitChange = onChange !== null && onChange !== void 0 ? onChange : onSelect;
@@ -67,12 +86,19 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     });
     const theme = useCustomTheme();
     const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    // NOTE: inset — the trigger sits flush in the field and the menu clips overflow.
+    const insideFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: insetFocusRingShadow(theme.colors),
+    };
     const ids = useFieldIds(id, { error, errorMessage, helperText });
     const baseId = ids.inputId;
     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);
@@ -145,6 +171,9 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
             setInputValue("");
         }
     };
+    const handleSelectRef = useRef(handleSelect);
+    handleSelectRef.current = handleSelect;
+    const selectOption = useCallback((option) => handleSelectRef.current(option), []);
     const handleRemove = (id) => {
         const updated = selectedValues.filter((v) => v.id !== id);
         emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
@@ -165,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"
@@ -210,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 ||
@@ -250,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":
@@ -266,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]);
@@ -284,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;
@@ -296,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)
@@ -380,6 +426,82 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         }
         setCustomSelectOpen(false);
     };
+    const focusInsideOnOpenRef = useRef(false);
+    const toggleCustomSelect = () => {
+        if (isDisabled)
+            return;
+        setIsOpen(false);
+        if (customSelectOpen) {
+            setCustomSelectOpen(false);
+        }
+        else {
+            requestExclusiveOpen();
+            setCustomSelectOpen(true);
+        }
+    };
+    const closeCustomSelectToTrigger = () => {
+        var _a;
+        setCustomSelectOpen(false);
+        (_a = customSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleInsideTriggerKeyDown = (e) => {
+        if (e.target !== e.currentTarget || e.key === "Tab")
+            return;
+        e.stopPropagation();
+        if (e.key === "Escape" && customSelectOpen) {
+            e.preventDefault();
+            setCustomSelectOpen(false);
+            return;
+        }
+        if (e.key !== "Enter" && e.key !== " ")
+            return;
+        e.preventDefault();
+        focusInsideOnOpenRef.current = !customSelectOpen;
+        toggleCustomSelect();
+    };
+    const handleInsideMenuKeyDown = (e) => {
+        var _a, _b;
+        e.stopPropagation();
+        const rows = Array.from(e.currentTarget.querySelectorAll('[role="option"]'));
+        const index = rows.indexOf(document.activeElement);
+        const moveTo = (to) => {
+            var _a;
+            e.preventDefault();
+            (_a = rows[Math.max(0, Math.min(rows.length - 1, to))]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        switch (e.key) {
+            case "ArrowDown":
+                moveTo(index + 1);
+                break;
+            case "ArrowUp":
+                moveTo(index - 1);
+                break;
+            case "Home":
+                moveTo(0);
+                break;
+            case "End":
+                moveTo(rows.length - 1);
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (index < 0)
+                    return;
+                handleCustomSelect((_a = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _a === void 0 ? void 0 : _a[index]);
+                (_b = customSelectRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case "Escape":
+                e.preventDefault();
+                closeCustomSelectToTrigger();
+                break;
+            case "Tab":
+                closeCustomSelectToTrigger();
+                break;
+            default:
+                break;
+        }
+    };
+    const stopFocusBubbling = (e) => e.stopPropagation();
     // Anchor the insideSelect menu to its trigger (viewport-fixed). Prefer below;
     // flip above when near the bottom; clamp horizontally within the viewport.
     const updateInsideSelectPos = useCallback(() => {
@@ -410,9 +532,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         });
     }, []);
     const setInsideSelectMenuRef = useCallback((node) => {
+        var _a, _b;
         insideSelectMenuRef.current = node;
         if (node)
             updateInsideSelectPos();
+        if (node && focusInsideOnOpenRef.current) {
+            focusInsideOnOpenRef.current = false;
+            (_b = ((_a = node.querySelector('[aria-selected="true"]')) !== null && _a !== void 0 ? _a : node.querySelector('[role="option"]'))) === null || _b === void 0 ? void 0 : _b.focus();
+        }
     }, [updateInsideSelectPos]);
     useEffect(() => {
         if (!customSelectOpen)
@@ -481,30 +608,21 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             var _a, _b, _c;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
-                            return (_jsxs(Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: customSelectOpen
+                            return (_jsxs(Box, { position: "relative", ref: customSelectRef, role: "button", tabIndex: isDisabled ? undefined : 0, "aria-haspopup": "listbox", "aria-expanded": customSelectOpen, "aria-controls": customSelectOpen ? insideSelectPortalId : undefined, "aria-disabled": isDisabled || undefined, onKeyDown: handleInsideTriggerKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, _focusVisible: insideFocusRing, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], bg: customSelectOpen
                                     ? rowBackgrounds.active
                                     : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: SEGMENT_TRANSITION, boxShadow: customSelectOpen
                                     ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
                                     : "none", onClick: (e) => {
                                     e.stopPropagation();
-                                    if (isDisabled)
-                                        return;
-                                    setIsOpen(false);
-                                    if (customSelectOpen) {
-                                        setCustomSelectOpen(false);
-                                    }
-                                    else {
-                                        requestExclusiveOpen();
-                                        setCustomSelectOpen(true);
-                                    }
-                                }, children: [_jsxs(Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? (_jsx(SelectTruncatedLabel, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : (_jsx(Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: CHEVRON_TRANSITION, transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && (_jsx(Portal, { children: _jsx(Box, { ref: setInsideSelectMenuRef, id: insideSelectPortalId, position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.surfaceRaised, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_c = insideSelect.option) === null || _c === void 0 ? void 0 : _c.map((item) => {
+                                    toggleCustomSelect();
+                                }, children: [_jsxs(Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? (_jsx(SelectTruncatedLabel, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : (_jsx(Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: CHEVRON_TRANSITION, transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && (_jsx(Portal, { children: _jsx(Box, { ref: setInsideSelectMenuRef, id: insideSelectPortalId, role: "listbox", "aria-label": insidePlaceholder, onKeyDown: handleInsideMenuKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, position: "fixed", style: { top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px` }, zIndex: zIndices.popoverNested, bg: theme.colors.surfaceRaised, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_c = insideSelect.option) === null || _c === void 0 ? void 0 : _c.map((item) => {
                                                 var _a;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
                                                 return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), color: optionRowInk(theme.colors, selected), bg: selected ? rowBackgrounds.selected : "transparent", _hover: {
                                                         bg: selected
                                                             ? rowBackgrounds.selectedActive
                                                             : rowBackgrounds.active,
-                                                    }, cursor: "pointer", onClick: (e) => {
+                                                    }, cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleCustomSelect(item);
                                                     }, children: [_jsx(Text, { isTruncated: true, children: item.label }), selected && (_jsx(Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
@@ -525,7 +643,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             }, onBlur: () => {
                                 setFocused(false);
                                 setFocusedTrigger((prev) => (prev === "input" ? null : prev));
-                            }, placeholder: selectedValues.length ? "" : placeholder })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: _jsx(IconButton, { icon: _jsx(X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, placeholder: selectedValues.length ? "" : placeholder })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "xs", children: _jsx(IconButton, { icon: _jsx(X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },
@@ -539,20 +657,10 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                                         else {
                                             openMenu();
                                         }
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, 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: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, 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: "0.063rem 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) => {
-                                        const selected = isSelected(option.id);
-                                        const singleSelected = selected && !isMultiple;
-                                        return (_jsxs(Box, { id: getOptionId(index), "data-index": index, role: "option", "aria-selected": selected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: selected
-                                                ? index === activeIndex
-                                                    ? rowBackgrounds.selectedActive
-                                                    : rowBackgrounds.selected
-                                                : index === activeIndex
-                                                    ? rowBackgrounds.active
-                                                    : "transparent", _hover: {
-                                                bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: spec.gap, color: optionRowInk(theme.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: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: selected, sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, 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: "0.063rem 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 })] }));
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-label": (_f = label !== null && label !== void 0 ? label : ariaLabel) !== null && _f !== void 0 ? _f : placeholder, "aria-multiselectable": isMultiple || undefined, position: "fixed", style: {
+                        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: [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

@@ -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;
+};