pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/SelectV2/SelectV2.js

@@ -1,258 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = SelectV2;
+exports.chipTriggerSizeStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const react_2 = require("@chakra-ui/react");
-const lucide_react_1 = require("lucide-react");
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
-const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
-const fieldStyles_1 = require("../Common/fieldStyles");
-const FormLabel_1 = require("../Common/FormLabel");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-// Mirrors Select.styles.ts sizing so a call site swapping Select -> SelectV2 keeps its layout.
-const SIZE_MAP = {
-    sm: { h: "2.125rem", fontSize: "0.8125rem", px: "0.5rem" },
-    md: { h: "2.375rem", fontSize: "0.875rem", px: "0.75rem" },
-    lg: { h: "2.75rem", fontSize: "0.9375rem", px: "1rem" },
-};
-const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
-// Derived from the option's own id (not its index) so it stays stable across filtering/reordering.
-const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
-const OptionRow = react_1.default.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, renderOption, onSelect, onActivate, }) {
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !isMulti ? 600 : 500, color: isSelected && !isMulti
-            ? theme.colors.accentText
-            : theme.colors.text[700], bg: isActive ? theme.colors.primary.opacity[8] : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
+const react_1 = require("react");
+const Select_1 = __importDefault(require("../Select/Select"));
+const chipTriggerSize_1 = require("../Common/chipTriggerSize");
+Object.defineProperty(exports, "chipTriggerSizeStyles", { enumerable: true, get: function () { return chipTriggerSize_1.chipTriggerSizeStyles; } });
+/** @deprecated Use `Select` with `native={false}`; every prop is forwarded to it unchanged. */
+const SelectV2 = (0, react_1.forwardRef)(function SelectV2(props, ref) {
+    return (0, jsx_runtime_1.jsx)(Select_1.default, { ...props, native: false, ref: ref });
 });
-function SelectV2(props) {
-    var _a, _b;
-    const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)({ defaultIsOpen: defaultOpen });
-    const [filterText, setFilterText] = (0, react_1.useState)("");
-    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
-    const triggerRef = (0, react_1.useRef)(null);
-    const filterInputRef = (0, react_1.useRef)(null);
-    const listRef = (0, react_1.useRef)(null);
-    const s = (_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : SIZE_MAP.md;
-    const fieldStyles = (0, react_1.useMemo)(() => (0, fieldStyles_1.getFieldStateStyles)(theme, { error, focused: isOpen }), [theme, error, isOpen]);
-    const selectedIds = (0, react_1.useMemo)(() => props.isMulti
-        ? asIdSet(props.value)
-        : asIdSet(props.value !== undefined ? [props.value] : undefined), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.isMulti, props.isMulti ? props.value : props.value]);
-    const selectedOptions = (0, react_1.useMemo)(() => options.filter((option) => selectedIds.has(option.id.toString())), [options, selectedIds]);
-    const filteredOptions = (0, react_1.useMemo)(() => {
-        if (!isSearchable || !filterText.trim())
-            return options;
-        const needle = filterText.trim().toLowerCase();
-        return options.filter((option) => option.label.toString().toLowerCase().includes(needle));
-    }, [options, filterText, isSearchable]);
-    const resetAndClose = (0, react_1.useCallback)((opts) => {
-        if (props.isMulti && (opts === null || opts === void 0 ? void 0 : opts.keepOpenForMulti))
-            return;
-        onClose();
-        setFilterText("");
-        setActiveIndex(-1);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onClose, onBlur, props.isMulti]);
-    const handleOpen = () => {
-        var _a;
-        if (isDisabled)
-            return;
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-        onOpen();
-        const firstSelected = props.isMulti ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[0] : props.value;
-        const selectedFilteredIndex = filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString()));
-        setActiveIndex(selectedFilteredIndex);
-    };
-    const handleSelect = (0, react_1.useCallback)((option) => {
-        var _a, _b;
-        if (option.isDisabled)
-            return;
-        if (props.isMulti) {
-            const alreadySelected = selectedIds.has(option.id.toString());
-            const next = alreadySelected
-                ? selectedOptions.filter((selected) => selected.id.toString() !== option.id.toString())
-                : [...selectedOptions, option];
-            props.onChange(next);
-            resetAndClose({ keepOpenForMulti: true });
-            (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        props.onChange(option);
-        resetAndClose();
-        (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.isMulti, props.onChange, selectedIds, selectedOptions, resetAndClose]);
-    (0, react_1.useEffect)(() => {
-        if (isOpen && isSearchable) {
-            // Popover content mounts after open; defer focus so it lands on the rendered input.
-            const id = requestAnimationFrame(() => { var _a; return (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-            return () => cancelAnimationFrame(id);
-        }
-    }, [isOpen, isSearchable]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (activeIndex < 0 || !listRef.current)
-            return;
-        const activeEl = listRef.current.querySelector(`[data-index="${activeIndex}"]`);
-        (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(activeEl, { block: "nearest" });
-    }, [activeIndex]);
-    const moveActive = (delta) => {
-        if (!filteredOptions.length)
-            return;
-        setActiveIndex((current) => {
-            const next = current + delta;
-            if (next < 0)
-                return filteredOptions.length - 1;
-            if (next >= filteredOptions.length)
-                return 0;
-            return next;
-        });
-    };
-    // Page keys jump-and-clamp rather than wrap, matching the APG listbox pattern.
-    const PAGE_STEP = 8;
-    const moveActiveBy = (delta) => {
-        if (!filteredOptions.length)
-            return;
-        setActiveIndex((current) => Math.min(Math.max(current + delta, 0), filteredOptions.length - 1));
-    };
-    const moveActiveToEdge = (edge) => {
-        if (!filteredOptions.length)
-            return;
-        setActiveIndex(edge === "start" ? 0 : filteredOptions.length - 1);
-    };
-    const handleTriggerKeyDown = (event) => {
-        if (isDisabled)
-            return;
-        if (!isOpen) {
-            if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                handleOpen();
-            }
-            return;
-        }
-        // Popup already open with focus still on the trigger (isSearchable=false has no
-        // filter input to move focus into) — drive the same listbox navigation from here.
-        handleListKeyDown(event);
-    };
-    const handleListKeyDown = (event) => {
-        var _a, _b;
-        // Home/End on the type-ahead filter input must move the text cursor, not the active option.
-        const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
-        switch (event.key) {
-            case "ArrowDown":
-                event.preventDefault();
-                moveActive(1);
-                break;
-            case "ArrowUp":
-                event.preventDefault();
-                moveActive(-1);
-                break;
-            case "Home":
-                if (isTextInput)
-                    break;
-                event.preventDefault();
-                moveActiveToEdge("start");
-                break;
-            case "End":
-                if (isTextInput)
-                    break;
-                event.preventDefault();
-                moveActiveToEdge("end");
-                break;
-            case "PageUp":
-                event.preventDefault();
-                moveActiveBy(-PAGE_STEP);
-                break;
-            case "PageDown":
-                event.preventDefault();
-                moveActiveBy(PAGE_STEP);
-                break;
-            case "Enter": {
-                event.preventDefault();
-                const activeOption = filteredOptions[activeIndex];
-                if (activeOption)
-                    handleSelect(activeOption);
-                break;
-            }
-            case "Escape":
-                event.preventDefault();
-                resetAndClose();
-                (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                break;
-            case "Tab":
-                resetAndClose();
-                break;
-            default:
-                break;
-        }
-    };
-    const instanceId = (0, react_1.useId)();
-    const listboxId = `selectv2-listbox-${instanceId}`;
-    const triggerId = `selectv2-trigger-${instanceId}`;
-    const activeOption = filteredOptions[activeIndex];
-    const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
-    const listScrollStyles = (0, react_1.useMemo)(() => (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), [theme]);
-    const defaultTriggerContent = () => {
-        var _a;
-        if (props.isMulti) {
-            const max = (_a = props.maxLabelsBeforeSummary) !== null && _a !== void 0 ? _a : 2;
-            if (selectedOptions.length === 0)
-                return placeholder;
-            if (selectedOptions.length > max) {
-                return `${selectedOptions.length} selected`;
-            }
-            return selectedOptions.map((o) => o.label).join(", ");
-        }
-        return selectedOptions[0] ? selectedOptions[0].label : placeholder;
-    };
-    const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: triggerId, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : (0, placeholderInk_1.placeholderInk)(theme.colors), "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
-                                            setFilterText(event.target.value);
-                                            setActiveIndex(0);
-                                        }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: theme.colors.textMuted, children: "No Options" })), filteredOptions.map((option, index) => {
-                                            var _a;
-                                            return ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: index, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
-                                        })] })] }) })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-}
+/** @deprecated Use `Select` with `native={false}`. */
+exports.default = SelectV2;

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -1,40 +1,60 @@
 import type { ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** SelectV2 option shape; adds optional `icon`/`description`/`isDisabled` beyond the plain id/label pair. */
 export type OptionProp = {
+    /** Unique value of the option; what `value` selects by. */
     id: string | number;
+    /** Text shown in the row and the trigger; the search filter matches against it. */
     label: string | number;
     /** Optional leading icon/avatar for this option's row (and the trigger, when selected). */
     icon?: ReactNode;
-    /** Optional secondary line under the label (e.g. an email under a name). */
+    /** Optional secondary line under the label (e.g. an email under a name); not matched by the search filter. */
     description?: string;
+    /** Row is shown dimmed and clicks/Enter on it are ignored. */
     isDisabled?: boolean;
 };
+/** sm/md/lg subset kept for existing importers; the `size` prop takes the full `ControlSize` scale. */
 export type SelectV2Size = "sm" | "md" | "lg";
 type SelectV2CommonProps = {
+    /** Choices in display order. */
     options: OptionProp[];
+    /** DOM id of the trigger; the label's `for` and the message ids derive from it. Auto-generated when omitted. */
+    id?: string;
+    /** Submits the selection with a surrounding `<form>` via hidden input(s) — one per value in multi mode. */
+    name?: string;
+    /** Trigger text when nothing is selected. Defaults to "Select Option". */
     placeholder?: string;
+    /** Label above the trigger. */
     label?: string;
+    /** Marks the field invalid and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Rendered only while `error` is true. */
     errorMessage?: string;
+    /** Hint under the field; hidden while `error` is true. */
     helperText?: string;
+    /** Disables the trigger; the popup cannot open. */
     isDisabled?: boolean;
+    /** Shows the value but never opens; exposed as `aria-readonly`. */
+    isReadOnly?: boolean;
+    /** Label asterisk + `aria-required` only; never blocks an empty submit. */
     isRequired?: boolean;
-    size?: SelectV2Size;
+    /** Field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
+    size?: ControlSize;
     /** Shows a type-ahead filter input at the top of the popup. Defaults to true. */
     isSearchable?: boolean;
     /** Width applied to the trigger + popup. Defaults to 100% of the container. */
     width?: string | number;
+    /** Inline style on the wrapping FormControl (label + trigger + message). */
     formControlStyle?: React.CSSProperties;
+    /** Fires when the popup closes, not on DOM blur; stays silent while multi-select keeps it open. */
     onBlur?: () => void;
+    /** Fires when the popup opens, not on DOM focus of the trigger. */
     onFocus?: () => void;
     /** Forwarded to the trigger button — lets call sites keep existing RTL/e2e queries when migrating from `Select`. */
     "data-testid"?: string;
     /** Forwarded to the trigger button — for a labelless select (no `label` prop) that still needs an accessible name. */
     "aria-label"?: string;
-    /**
-     * Full control over an option row's contents (icon + label + badge, avatar + name/email, etc).
-     * Falls back to plain `option.label` text when omitted. Receives `isSelected`/`isActive` so a
-     * custom row can mirror the built-in selected/keyboard-active styling if it re-implements them.
-     */
+    /** Full control over an option row's contents; receives `isSelected`/`isActive` to mirror the built-in states. */
     renderOption?: (option: OptionProp, state: {
         isSelected: boolean;
         isActive: boolean;
@@ -43,24 +63,42 @@ type SelectV2CommonProps = {
     renderValue?: (selected: OptionProp[]) => ReactNode;
     /** Max popup height before the option list scrolls. Defaults to "16rem". */
     maxMenuHeight?: string;
-    /**
-     * Opens the popup immediately on mount instead of waiting for a click — for inline-edit
-     * patterns (a table cell that swaps to a select the instant it becomes editable). Clicking
-     * away still closes it via the normal Popover close-on-blur behavior (which fires `onBlur`).
-     */
+    /** Opens the popup on mount (inline-edit cells); click-away still closes it and fires `onBlur`. */
     defaultOpen?: boolean;
+    /** Shows a loading row under the options and marks the listbox `aria-busy`. */
+    isLoading?: boolean;
+    /** Text of the loading row. Defaults to "Loading...". */
+    loadingText?: string;
+    /** Fires when the list is scrolled to its end and `isLoading` is false — append the next page to `options`. */
+    onLoadMore?: () => void;
+    /** Fires with the filter text on every keystroke, for server-side search; local label filtering still applies. */
+    onSearchChange?: (query: string) => void;
 };
+/** Single-select arm of `SelectV2Props`; `isMulti` false/absent discriminates it from the multi variant. */
+/** @deprecated Use `SelectSingleProps` (`native={false}`). */
 export type SelectV2SingleProps = SelectV2CommonProps & {
+    /** False or absent selects this single-select variant. */
     isMulti?: false;
+    /** Selected option `id`; compared as strings, so `1` matches `"1"`. */
     value?: string | number;
+    /** The canonical change callback for every picker in this library. */
     onChange: (selectedOption: OptionProp | undefined) => void;
 };
+/** Multi-select arm of `SelectV2Props`; `isMulti: true` discriminates it and makes `value` an array. */
+/** @deprecated Use `SelectMultiProps` (`native={false}`). */
 export type SelectV2MultiProps = SelectV2CommonProps & {
+    /** True makes `value` an array and `onChange` receive the full selection. */
     isMulti: true;
+    /** Selected option ids; ids with no matching option are dropped from the display. */
     value?: (string | number)[];
+    /** The canonical change callback; receives the full selection. */
     onChange: (selectedOptions: OptionProp[]) => void;
-    /** Show "N selected" once more than this many are chosen, instead of listing every label. Defaults to 2. */
+    /** Feeds the trigger's aria-label summary once chips are collapsed. Defaults to 2. */
     maxLabelsBeforeSummary?: number;
+    /** Chips shown before the rest collapse into a "+N" chip. Defaults to 6. */
+    maxVisibleChips?: number;
 };
+/** Props for `SelectV2`; a discriminated union on `isMulti` between the single and multi variants. */
+/** @deprecated Use `SelectProps` with `native={false}`; `SelectV2` forwards every prop to `Select` unchanged. */
 export type SelectV2Props = SelectV2SingleProps | SelectV2MultiProps;
 export {};

package/dist/Components/SettingRow/SettingRow.d.ts

@@ -0,0 +1,4 @@
+import type { SettingRowProps } from "./SettingRowProps";
+/** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
+declare const SettingRow: ({ title, description, control, htmlFor, descriptionId, isDisabled }: SettingRowProps) => import("react/jsx-runtime").JSX.Element;
+export default SettingRow;

package/dist/Components/SettingRow/SettingRow.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+/** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
+const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDisabled = false }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const rowId = (0, react_2.useId)().replace(/:/g, "");
+    const titleId = `setting-row-title-${rowId}`;
+    const resolvedDescriptionId = descriptionId !== null && descriptionId !== void 0 ? descriptionId : `setting-row-desc-${rowId}`;
+    const controlProps = (0, react_2.isValidElement)(control) ? control.props : undefined;
+    const isSelfNamed = Boolean((controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-label"]) || (controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-labelledby"]));
+    const namedControl = !htmlFor && (0, react_2.isValidElement)(control) && !isSelfNamed
+        ? (0, react_2.cloneElement)(control, {
+            "aria-labelledby": titleId,
+            "aria-describedby": (_a = controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-describedby"]) !== null && _a !== void 0 ? _a : resolvedDescriptionId,
+        })
+        : control;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { borderColor: (0, planeStep_1.cardRule)(colors) }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { children: [htmlFor ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), (0, jsx_runtime_1.jsx)(react_1.Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "xs-plus", color: colors.textMuted, children: description })] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
+};
+exports.default = SettingRow;

package/dist/Components/SettingRow/SettingRowProps.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** Props for one settings row: title/description on the left, one control right-aligned. */
+export interface SettingRowProps {
+    /** Row title — 14px/500/text[800]; becomes a `<label>` when `htmlFor` is set. */
+    title: ReactNode;
+    /** Muted helper text under the title — 13px/textMuted. */
+    description: ReactNode;
+    /** The field/switch/button for this row, right-aligned on desktop. Auto-named via aria-labelledby/aria-describedby unless it already has its own aria-label or htmlFor is set. */
+    control: ReactNode;
+    /** The control's id — makes `title` a `<label htmlFor>` instead of plain text. */
+    htmlFor?: string;
+    /** Id on the description; auto-generated when omitted, and read by the control's aria-describedby. */
+    descriptionId?: string;
+    /** Dims the row to signal it can't be changed right now (e.g. plan-gated). */
+    isDisabled?: boolean;
+}

package/dist/Components/SettingRow/SettingRowProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SettingRow/SettingsSection.d.ts

@@ -0,0 +1,4 @@
+import type { SettingsSectionProps } from "./SettingsSectionProps";
+/** Titled Card wrapping SettingRows; rows and an optional footer separate with one divider each, never a nested border. */
+declare const SettingsSection: ({ id, title, description, children, footer, action, isDanger }: SettingsSectionProps) => import("react/jsx-runtime").JSX.Element;
+export default SettingsSection;

package/dist/Components/SettingRow/SettingsSection.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Card_1 = __importDefault(require("../Card/Card"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+/** Titled Card wrapping SettingRows; rows and an optional footer separate with one divider each, never a nested border. */
+const SettingsSection = ({ id, title, description, children, footer, action, isDanger = false }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const titleColor = isDanger ? colors.semanticText.error : colors.header[900];
+    return ((0, jsx_runtime_1.jsxs)(Card_1.default, { id: id, scrollMarginTop: 4, variant: isDanger ? "outline" : undefined, borderColor: isDanger ? colors.semanticText.error : undefined, header: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: titleColor, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "xs", fontWeight: 400, color: colors.textMuted, children: description }))] }), action && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: action })] }), children: [children, footer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { borderColor: (0, planeStep_1.cardRule)(colors) }), (0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, children: footer })] }))] }));
+};
+exports.default = SettingsSection;

package/dist/Components/SettingRow/SettingsSectionProps.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+/** Props for a titled group of SettingRows inside one outline Card. */
+export interface SettingsSectionProps {
+    /** Section title — Card header, md/600. */
+    title: ReactNode;
+    /** Muted helper text under the title. */
+    description?: ReactNode;
+    /** SettingRow elements; each renders its own leading divider. */
+    children: ReactNode;
+    /** Extra content after the rows, separated by a divider (e.g. a save note or link). */
+    footer?: ReactNode;
+    /** Header-right slot, aligned to the title row (e.g. an "Edit" button or a toggle). */
+    action?: ReactNode;
+    /** DOM id on the section, e.g. a scroll target for section nav. */
+    id?: string;
+    /** Red-bordered "danger zone" look for the header and border. */
+    isDanger?: boolean;
+}

package/dist/Components/SettingRow/SettingsSectionProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SideBar/SecondaryBar.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { SecondaryBarProps } from "./SideBarProps";
+/** Secondary flyout panel beside the main rail, listing the active menu's `secondaryItems`; collapses to icons. */
 declare const SecondaryBar: React.FC<SecondaryBarProps>;
 export default SecondaryBar;

package/dist/Components/SideBar/SecondaryBar.js

@@ -7,11 +7,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
+const sidebarFocus_1 = require("./sidebarFocus");
+const menuDisabled_1 = require("./menuDisabled");
 const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const Sidebar_1 = require("../../Constants/Sidebar");
+const sidebarId_1 = require("./sidebarId");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const sidebarScale_1 = require("./sidebarScale");
+const sidebarMotion_1 = require("./sidebarMotion");
+const softBadge = (colors, colorScheme, surface) => {
+    const tone = (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, colorScheme), surface);
+    return { bg: tone.bg, color: tone.fg };
+};
 const parseBadge = (badge) => {
     var _a, _b, _c;
     return ({
@@ -21,42 +37,49 @@ const parseBadge = (badge) => {
         variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
     });
 };
+// Matches MenuItemBox/MenuPopoverContent's isBlocked — locked also blocks, not just disabled.
+const isItemBlocked = (item) => (0, menuDisabled_1.menuDisabled)(item) || !!item.locked;
 const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", py: "8px", mb: "2px", borderRadius: "md", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
-                        bg: item.disabled
+    const blocked = isItemBlocked(item);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? states_1.DISABLED_OPACITY : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
+                        bg: blocked
                             ? "transparent"
                             : isActive
                                 ? "whiteAlpha.400"
                                 : "whiteAlpha.200",
                     }, onClick: (e) => {
                         e.preventDefault();
-                        if (!item.disabled)
+                        if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 500, as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
-            bg: item.disabled ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+    const blocked = isItemBlocked(item);
+    const row = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? states_1.DISABLED_OPACITY : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: blocked ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();
-            if (!item.disabled)
+            if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+    return item.locked && item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
-const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
+/** Secondary flyout panel beside the main rail, listing the active menu's `secondaryItems`; collapses to icons. */
+const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "base", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);