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

package/dist/Components/Search/Search.js

@@ -16,6 +16,7 @@ const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const motion_1 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ctrlShortcut_1 = require("./ctrlShortcut");
 const HINT_WIDTH = "2.75rem";
 /** Filter input with a clear button and an optional page-global Ctrl+K hotkey; no options list. */
 const Search = (0, react_1.forwardRef)(function Search({ placeholder = "Search...", onSearch, onClear, onclose, shortcut = "Ctrl+K", showShortcutHint = true, query, size = controlSizes_1.DEFAULT_CONTROL_SIZE, name, isDisabled = false, error = false, errorMessage, helperText, label, id, isInformation, informationMessage, isRequired, "aria-label": ariaLabelProp, }, ref) {
@@ -32,15 +33,7 @@ const Search = (0, react_1.forwardRef)(function Search({ placeholder = "Search..
     (0, react_1.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 (0, ctrlShortcut_1.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/Components/Search/ctrlShortcut.d.ts

@@ -0,0 +1 @@
+export declare const registerCtrlShortcut: (key: string, focus: () => void) => () => void;

package/dist/Components/Search/ctrlShortcut.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerCtrlShortcut = void 0;
+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());
+};
+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);
+    };
+};
+exports.registerCtrlShortcut = registerCtrlShortcut;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -43,6 +43,7 @@ const lucide_react_1 = require("lucide-react");
 const FormLabel_1 = require("../Common/FormLabel");
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const optionRowInk_1 = require("../Select/optionRowInk");
@@ -51,6 +52,8 @@ const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const useFieldIds_1 = require("../Common/useFieldIds");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
@@ -58,6 +61,7 @@ const SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel")
 const searchSelectSize_1 = require("./searchSelectSize");
 const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const searchSelectNav_1 = require("./searchSelectNav");
 const SEGMENT_TRANSITION = (0, motion_1.transitionFor)(["background-color", "box-shadow"]);
 const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["transform", "color"], "base");
 const normalizeSingleValue = (val) => {
@@ -72,10 +76,25 @@ const normalizeMultiValue = (val) => {
     }
     return [];
 };
+const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
+const OptionRow = react_1.default.memo(function OptionRow({ option, index, optionId, isSelected, isActive, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
+    const singleSelected = isSelected && !isMultiple;
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: (0, optionRowInk_1.optionRowInk)(colors, singleSelected), 
+        // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
+        fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(singleSelected), borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(colors)}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.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 = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
     const spec = (0, optionRowSizes_1.optionRowSpec)(size);
     const emitChange = onChange !== null && onChange !== void 0 ? onChange : onSelect;
@@ -105,12 +124,19 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     });
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.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: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors),
+    };
     const ids = (0, useFieldIds_1.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] = (0, react_1.useState)(-1);
+    const selectAllId = `${baseId}-select-all`;
+    const addNewId = `${baseId}-add-new`;
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(searchSelectNav_1.NO_ROW);
     const pendingFocusRestoreRef = (0, react_1.useRef)(false);
     // NOTE: the ARIA host follows real focus; opening from a button doesn't move it.
     const [focusedTrigger, setFocusedTrigger] = (0, react_1.useState)(null);
@@ -183,6 +209,9 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
             setInputValue("");
         }
     };
+    const handleSelectRef = (0, react_1.useRef)(handleSelect);
+    handleSelectRef.current = handleSelect;
+    const selectOption = (0, react_1.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);
@@ -203,9 +232,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 === searchSelectNav_1.SELECT_ALL_ROW && hasSelectAllRow
+            ? selectAllId
+            : activeIndex === searchSelectNav_1.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"
@@ -248,19 +290,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) => (0, searchSelectNav_1.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 ||
@@ -288,15 +325,15 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                 }
                 break;
             case "Home":
-                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                if (isOpen && (0, searchSelectNav_1.firstRow)(rowLayout) !== searchSelectNav_1.NO_ROW && !isTextInputTarget) {
                     e.preventDefault();
-                    setActiveIndex(0);
+                    setActiveIndex((0, searchSelectNav_1.firstRow)(rowLayout));
                 }
                 break;
             case "End":
-                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                if (isOpen && (0, searchSelectNav_1.lastRow)(rowLayout) !== searchSelectNav_1.NO_ROW && !isTextInputTarget) {
                     e.preventDefault();
-                    setActiveIndex(filteredOptions.length - 1);
+                    setActiveIndex((0, searchSelectNav_1.lastRow)(rowLayout));
                 }
                 break;
             case "Enter":
@@ -304,6 +341,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                     e.preventDefault();
                     openMenu();
                 }
+                else if (activeIndex === searchSelectNav_1.SELECT_ALL_ROW && hasSelectAllRow) {
+                    e.preventDefault();
+                    handleSelectAll();
+                }
+                else if (activeIndex === searchSelectNav_1.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]);
@@ -322,7 +367,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                 if (isOpen) {
                     e.preventDefault();
                     setIsOpen(false);
-                    setActiveIndex(-1);
+                    setActiveIndex(searchSelectNav_1.NO_ROW);
                     restoreFocus();
                 }
                 break;
@@ -334,11 +379,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.
     (0, react_1.useEffect)(() => {
         if (!isOpen) {
-            setActiveIndex(-1);
+            setActiveIndex(searchSelectNav_1.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) => ((0, searchSelectNav_1.hasRow)(prev, layout) ? prev : searchSelectNav_1.NO_ROW));
+    }, [isOpen, filteredOptions.length, hasSelectAllRow, hasAddNewRow]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if (!isOpen || activeIndex < 0 || !optionsListRef.current)
@@ -418,6 +464,82 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         }
         setCustomSelectOpen(false);
     };
+    const focusInsideOnOpenRef = (0, react_1.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 = (0, react_1.useCallback)(() => {
@@ -448,9 +570,14 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         });
     }, []);
     const setInsideSelectMenuRef = (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         if (!customSelectOpen)
@@ -519,30 +646,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 ((0, jsx_runtime_1.jsxs)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.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: `${borderWidths_1.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: [(0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.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_1.default.popoverNested, bg: theme.colors.surfaceRaised, border: `${borderWidths_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), color: (0, optionRowInk_1.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: [(0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: item.label }), selected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
@@ -563,7 +681,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             }, onBlur: () => {
                                 setFocused(false);
                                 setFocusedTrigger((prev) => (prev === "input" ? null : prev));
-                            }, placeholder: selectedValues.length ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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" },
@@ -577,20 +695,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: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
-                                        const selected = isSelected(option.id);
-                                        const singleSelected = selected && !isMultiple;
-                                        return ((0, jsx_runtime_1.jsxs)(react_2.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: (0, optionRowInk_1.optionRowInk)(theme.colors, singleSelected), 
-                                            // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
-                                            fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(singleSelected), borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: selected, sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.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)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.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 || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { 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: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.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_1.default.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 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === searchSelectNav_1.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: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => ((0, jsx_runtime_1.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)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), bg: activeIndex === searchSelectNav_1.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 || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.default = SearchSelect;

package/dist/Components/SearchSelect/searchSelectNav.d.ts

@@ -0,0 +1,13 @@
+export declare const NO_ROW = -1;
+export declare const SELECT_ALL_ROW = -2;
+export declare const ADD_NEW_ROW = -3;
+export type RowLayout = {
+    optionCount: number;
+    hasSelectAll: boolean;
+    hasAddNew: boolean;
+};
+export declare const navRows: ({ optionCount, hasSelectAll, hasAddNew }: RowLayout) => number[];
+export declare const hasRow: (row: number, { optionCount, hasSelectAll, hasAddNew }: RowLayout) => boolean;
+export declare const stepRow: (layout: RowLayout, current: number, delta: number) => number;
+export declare const firstRow: ({ optionCount, hasSelectAll, hasAddNew }: RowLayout) => number;
+export declare const lastRow: ({ optionCount, hasSelectAll, hasAddNew }: RowLayout) => number;

package/dist/Components/SearchSelect/searchSelectNav.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastRow = exports.firstRow = exports.stepRow = exports.hasRow = exports.navRows = exports.ADD_NEW_ROW = exports.SELECT_ALL_ROW = exports.NO_ROW = void 0;
+exports.NO_ROW = -1;
+exports.SELECT_ALL_ROW = -2;
+exports.ADD_NEW_ROW = -3;
+const navRows = ({ optionCount, hasSelectAll, hasAddNew }) => [
+    ...(hasSelectAll ? [exports.SELECT_ALL_ROW] : []),
+    ...Array.from({ length: optionCount }, (_, index) => index),
+    ...(hasAddNew ? [exports.ADD_NEW_ROW] : []),
+];
+exports.navRows = navRows;
+const hasRow = (row, { optionCount, hasSelectAll, hasAddNew }) => (row >= 0 && row < optionCount) || (row === exports.SELECT_ALL_ROW && hasSelectAll) || (row === exports.ADD_NEW_ROW && hasAddNew);
+exports.hasRow = hasRow;
+const stepRow = (layout, current, delta) => {
+    const rows = (0, exports.navRows)(layout);
+    if (!rows.length)
+        return exports.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];
+};
+exports.stepRow = stepRow;
+const firstRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasSelectAll)
+        return exports.SELECT_ALL_ROW;
+    if (optionCount > 0)
+        return 0;
+    return hasAddNew ? exports.ADD_NEW_ROW : exports.NO_ROW;
+};
+exports.firstRow = firstRow;
+const lastRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasAddNew)
+        return exports.ADD_NEW_ROW;
+    if (optionCount > 0)
+        return optionCount - 1;
+    return hasSelectAll ? exports.SELECT_ALL_ROW : exports.NO_ROW;
+};
+exports.lastRow = lastRow;

package/dist/Components/SegmentedControl/SegmentedControl.d.ts

@@ -1,3 +1,9 @@
+import { type ReactElement, type RefAttributes } from "react";
 import { SegmentedControlProps } from "./SegmentedControlProps";
-/** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-export default function SegmentedControl<T extends string = string>({ options, value, onChange, size, isFullWidth, variant, orientation, surface, "aria-label": ariaLabel, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+type SegmentedControlComponent = {
+    <T extends string = string>(props: SegmentedControlProps<T> & RefAttributes<HTMLDivElement>): ReactElement | null;
+    displayName?: string;
+};
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle (see MODULE.md); `ref` is the radiogroup. */
+declare const SegmentedControl: SegmentedControlComponent;
+export default SegmentedControl;

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = SegmentedControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -11,6 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_2 = require("../../Theme/chakra/motion");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
@@ -19,13 +19,12 @@ const Tag_1 = __importDefault(require("../Tag/Tag"));
 const useSlidingPill_1 = require("./useSlidingPill");
 const segmentedInk_1 = require("./segmentedInk");
 const TRACK_PADDING = "0.125rem";
-const UNDERLINE_WIDTH = "0.0625rem";
+const UNDERLINE_WIDTH = borderWidths_1.BORDER_WIDTHS.hairline;
 const SLIDE = (0, motion_1.transitionFor)(["transform", "width"], "base");
 const MAX_COUNT = 99;
 const COUNT_TAG_SIZE = { sm: "xs", md: "sm", lg: "md" };
 const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`);
-/** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", orientation = "horizontal", surface, "aria-label": ariaLabel, }) {
+function SegmentedControlInner({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", orientation = "horizontal", surface, "aria-label": ariaLabel, }, ref) {
     var _a;
     const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
     const control = controlSizes_1.BUTTON_SIZES[size];
@@ -66,6 +65,7 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
         orientation,
         isCompact,
     ]);
+    const rootRef = (0, react_2.useMergeRefs)(trackRef, ref);
     const selectAt = (index) => {
         var _a;
         (_a = refs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -95,7 +95,7 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? trackFocusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: rootRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? trackFocusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : `-${UNDERLINE_WIDTH}`, left: isVertical ? `-${UNDERLINE_WIDTH}` : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 const showShortLabel = isCompact && !!option.shortLabel;
                 const displayLabel = showShortLabel ? option.shortLabel : option.label;
@@ -118,3 +118,7 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
                             : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...(0, motion_2.reducedMotionSx)() }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle (see MODULE.md); `ref` is the radiogroup. */
+const SegmentedControl = (0, react_1.forwardRef)(SegmentedControlInner);
+SegmentedControl.displayName = "SegmentedControl";
+exports.default = SegmentedControl;