pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.40

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,89 @@
+"use strict";
+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");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const SIZES = {
+    sm: { h: "1.625rem", px: "0.625rem", fontSize: "0.75rem" },
+    md: { h: "2rem", px: "0.875rem", fontSize: "0.8125rem" },
+};
+/** 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 = "md", isFullWidth = false, variant = "default", "aria-label": ariaLabel, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const dims = SIZES[size];
+    const refs = (0, react_1.useRef)([]);
+    const trackRef = (0, react_1.useRef)(null);
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const [pill, setPill] = (0, react_1.useState)(null);
+    const selectedIndex = options.findIndex((o) => o.value === value);
+    const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
+    // WAI-APG: with nothing selected, the first enabled segment owns the tab stop.
+    const tabIndex = selectedIndex >= 0 ? selectedIndex : enabled[0];
+    (0, react_1.useLayoutEffect)(() => {
+        if (!hasIndicator)
+            return;
+        const track = trackRef.current;
+        const node = refs.current[selectedIndex];
+        if (!track || !node) {
+            setPill(null);
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
+    }, [hasIndicator, selectedIndex, options, isFullWidth, size]);
+    const selectAt = (index) => {
+        var _a;
+        (_a = refs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        onChange(options[index].value);
+    };
+    const handleKeyDown = (event) => {
+        if (enabled.length === 0)
+            return;
+        const step = (delta) => {
+            const position = enabled.indexOf(tabIndex);
+            selectAt(enabled[(position + delta + enabled.length) % enabled.length]);
+        };
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            step(1);
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            step(-1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            selectAt(enabled[0]);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            selectAt(enabled[enabled.length - 1]);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : "0.125rem", p: isUnderlineSlide ? "0" : "0.125rem", borderRadius: isUnderlineSlide ? "none" : "md", borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: dims.h, w: `${pill.width}px`, borderRadius: "base", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), options.map((option, index) => {
+                const isSelected = option.value === value;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (node) => {
+                        refs.current[index] = node;
+                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: dims.h, px: dims.px, borderRadius: isUnderlineSlide ? "none" : "base", borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                        ? "transparent"
+                        : isSelected
+                            ? colors.primary.opacity[32]
+                            : "transparent", bg: hasIndicator ? "transparent" : isSelected ? colors.backgroundColor.light : "transparent", boxShadow: hasIndicator ? "none" : isSelected ? "sm" : "none", color: isBrandSlide
+                        ? isSelected
+                            ? brandFill.color
+                            : colors.text[600]
+                        : isSelected
+                            ? colors.accentText
+                            : colors.text[600], fontSize: dims.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: "color 0.2s ease", _hover: option.isDisabled || isSelected ? undefined : { color: colors.text[900] }, _focusVisible: {
+                        outline: "none",
+                        boxShadow: `0 0 0 2px ${colors.primary[300]}`,
+                    }, children: [option.icon, option.label] }, option.value));
+            })] }));
+}

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

@@ -0,0 +1,23 @@
+/** Only two sizes; controls track height and font size — defaults to "md". */
+export type SegmentedControlSize = "sm" | "md";
+/** brandSlide = primary view switcher; underlineSlide = dense toolbar; default = plain buttons. */
+export type SegmentedControlVariant = "default" | "brandSlide" | "underlineSlide";
+/** One selectable segment; disabled options are skipped by keyboard nav (arrows/Home/End). */
+export type SegmentedControlOption<T extends string = string> = {
+    value: T;
+    label: string;
+    icon?: JSX.Element;
+    isDisabled?: boolean;
+};
+/** Props for SegmentedControl; T narrows options/value/onChange to the caller's literal union. */
+export type SegmentedControlProps<T extends string = string> = {
+    /** Two to five mutually exclusive options. Beyond five, use a Select. */
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: SegmentedControlSize;
+    isFullWidth?: boolean;
+    /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
+    variant?: SegmentedControlVariant;
+    "aria-label": string;
+};

package/dist/Components/SegmentedControl/SegmentedControlProps.js

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

package/dist/Components/Select/Select.d.ts

@@ -1,2 +1,2 @@
 import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Select/Select.js

@@ -11,9 +11,11 @@ const textInputIconSize_1 = require("../Input/textInputIconSize");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
-function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
+function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
     const sizeKey = typeof size === "string" ? size : "md";
     const iconSizePx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
+    const generatedId = (0, react_1.useId)();
+    const selectId = id !== null && id !== void 0 ? id : (label ? generatedId : undefined);
     const getOptionsList = (0, react_1.useCallback)(() => {
         if (!options.length)
             return (0, jsx_runtime_1.jsx)("option", { value: "", children: "No Options" });
@@ -26,5 +28,5 @@ function Select({ placeholder = "Select Option", size = "md", variant = "outline
             onChange(selectedOption);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: selectId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_2.Select, { id: selectId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 }

package/dist/Components/Select/Select.styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.Select = {
     baseStyle: ({ theme }) => ({
         field: {
@@ -19,7 +20,7 @@ exports.Select = {
             width: "100%", // full container width
             maxWidth: "100%",
             _placeholder: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                 whiteSpace: "nowrap",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -69,7 +70,7 @@ exports.Select = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
                     _hover: {

package/dist/Components/Select/SelectProps.d.ts

@@ -1,18 +1,24 @@
 import { SelectProps } from "@chakra-ui/react";
+/** Props for `Select`; named lowercase to avoid clashing with Chakra's own imported `SelectProps`. */
 export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
     label?: string;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     error?: boolean;
     errorMessage?: string;
     helperText?: string;
     options: OptionProp[];
     width?: string | number;
     height?: string | number;
+    /** Selecting the built-in placeholder (value="") never fires this unless `options` has an explicit `id: ""` entry. */
     onChange: (selectedOption: OptionProp | undefined) => void;
     formControlStyle?: React.CSSProperties;
     isInformation?: boolean;
     informationMessage?: string;
     selectStyle?: React.CSSProperties;
 };
+/** Single Select option: id/label pair used in `options` and passed back via `onChange`. */
 export type OptionProp = {
     id: string | number;
     label: string | number;

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,2 +1,3 @@
 import { SelectSearchProps } from "./SelectSearchProps";
+/** Search-as-you-type combobox with avatar/color/email rows — Enter only picks on an exact label match, not the highlighted option. */
 export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -10,25 +10,42 @@ const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     if (isOptionLoading) {
         return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.accentText, children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
-                    optionRefs.current[index] = el;
-                }, role: "option", "aria-selected": isOptionSelected(option), tabIndex: index === activeIndex ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleOptionClick(option);
-                    }
-                }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id))) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => {
+                const selected = isOptionSelected(option);
+                const isActive = index === activeIndex;
+                const rowBg = selected
+                    ? isActive
+                        ? rowBackgrounds.selectedActive
+                        : rowBackgrounds.selected
+                    : isActive
+                        ? rowBackgrounds.active
+                        : "transparent";
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
+                        optionRefs.current[index] = el;
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, px: 4, py: 2, cursor: "pointer", color: theme.colors.text[700], fontWeight: selected ? 600 : 500, transition: "background 0.12s ease", _hover: {
+                        bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                    }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            handleOptionClick(option);
+                        }
+                    }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id));
+            }) }));
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
+/** Search-as-you-type combobox with avatar/color/email rows — Enter only picks on an exact label match, not the highlighted option. */
 function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, 
 // BottomIconStyle,
 BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
@@ -40,6 +57,11 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []);
     const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
+    const openDropdown = (0, react_1.useCallback)(() => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    }, [requestExclusiveOpen]);
     const [position, setPosition] = (0, react_1.useState)("below");
     const inputRef = (0, react_1.useRef)(null);
     const dropdownRef = (0, react_1.useRef)(null);
@@ -191,7 +213,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                 handleOptionClick(matchingOption);
             }
             else if (!isOpen) {
-                setIsOpen(true);
+                openDropdown();
             }
         }
         else if (e.key === "ArrowDown") {
@@ -200,7 +222,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             e.preventDefault();
             if (!isOpen) {
                 pendingFocusFirstOption.current = true;
-                setIsOpen(true);
+                openDropdown();
             }
             else if (filteredOptions.length > 0) {
                 focusOption(0);
@@ -246,12 +268,12 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
-                                    setIsOpen(true);
+                                    openDropdown();
                                 }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
                                     borderColor: error
                                         ? theme.colors.semanticText.error
@@ -263,14 +285,14 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                     boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme, !!error),
                                 }, style: {
                                     ...inputStyle,
-                                    backgroundColor: theme.colors.gray[50],
+                                    backgroundColor: theme.colors.background[50],
                                     fontWeight: 600,
-                                    color: theme.colors.gray[700],
+                                    color: theme.colors.text[700],
                                     padding: "0 0.75rem",
                                     fontSize: 15,
                                     letterSpacing: 0.7,
                                     border: error ? errorBorder : defaultBorderThin,
-                                } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
+                                } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }) }) }));
 }

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -1,6 +1,9 @@
+/** Props for the searchable combobox `SelectSearch`; supports multi-select chips and profile/color option rows. */
 export type SelectSearchProps = {
     options: selectOptions[];
+    /** Not implemented — never read by the component; the search input always renders regardless of this value. */
     isSearchEnabled?: boolean;
+    /** Seeds state once on mount (useState initializer) — changing it later does not update the selection; no sync effect. */
     initialSelectedOption?: selectOptions | null;
     onOptionSelect?: (option: selectOptions) => void;
     onOptionMultiSelect?: (option: selectOptions[]) => void;
@@ -28,9 +31,11 @@ export type SelectSearchProps = {
     BottomIcon?: boolean | undefined | JSX.Element;
     BottomIconStyle?: React.CSSProperties;
     BottomText?: string | number;
+    /** Despite the CSSProperties type, pass a plain color string (e.g. "red") — used directly as one, not spread as styles. */
     BottomTextColor?: React.CSSProperties;
     handleBottomClick?: () => void;
 };
+/** Option shape for SelectSearch; `email`/`profileUrl` back `isProfile` rows, `color` backs `isColorOptions` rows. */
 export type selectOptions = {
     id: string;
     label: string;

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

@@ -1,2 +1,3 @@
 import { SelectV2Props } from "./SelectV2Props";
+/** Themed custom-popup select (fully React-rendered popup); not virtualized — for very large option lists, prefer SearchSelect. */
 export default function SelectV2(props: SelectV2Props): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SelectV2/SelectV2.js

@@ -42,8 +42,11 @@ 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 rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const fieldStyles_1 = require("../Common/fieldStyles");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
@@ -56,16 +59,24 @@ const SIZE_MAP = {
 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, }) {
+const OptionRow = react_1.default.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, 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] })] }))] }));
+            : theme.colors.text[700], bg: isSelected && !isMulti
+            ? isActive
+                ? backgrounds.selectedActive
+                : backgrounds.selected
+            : isActive
+                ? backgrounds.active
+                : "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] })] }))] }));
 });
+/** Themed custom-popup select (fully React-rendered popup); not virtualized — for very large option lists, prefer SearchSelect. */
 function SelectV2(props) {
-    var _a, _b, _c;
+    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 requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
     const [filterText, setFilterText] = (0, react_1.useState)("");
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
     const triggerRef = (0, react_1.useRef)(null);
@@ -97,6 +108,7 @@ function SelectV2(props) {
         var _a;
         if (isDisabled)
             return;
+        requestExclusiveOpen();
         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;
@@ -233,6 +245,9 @@ function SelectV2(props) {
     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]);
+    // primary[500] is the filled-button rung, so resolveHoverTint short-circuited and every hovered
+    // row became a solid brand fill under unresolved ink.
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme]);
     const defaultTriggerContent = () => {
         var _a;
         if (props.isMulti) {
@@ -247,11 +262,11 @@ function SelectV2(props) {
         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] : theme.colors.placeholder[500], "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, fontStyle: selectedOptions.length ? "normal" : "italic", 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", border: `0.063rem solid ${theme.colors.boxborder[200]}`, boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.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) => {
+    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));
+                                            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, backgrounds: rowBackgrounds, 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 })] }));
 }

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

@@ -1,13 +1,15 @@
 import type { ReactNode } from "react";
+/** SelectV2 option shape; adds optional `icon`/`description`/`isDisabled` beyond the plain id/label pair. */
 export type OptionProp = {
     id: string | number;
     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;
     isDisabled?: boolean;
 };
+/** Trigger size keys; SelectV2's internal `SIZE_MAP` maps each to a height/fontSize/padding set. */
 export type SelectV2Size = "sm" | "md" | "lg";
 type SelectV2CommonProps = {
     options: OptionProp[];
@@ -50,11 +52,13 @@ type SelectV2CommonProps = {
      */
     defaultOpen?: boolean;
 };
+/** Single-select arm of `SelectV2Props`; `isMulti` false/absent discriminates it from the multi variant. */
 export type SelectV2SingleProps = SelectV2CommonProps & {
     isMulti?: false;
     value?: string | number;
     onChange: (selectedOption: OptionProp | undefined) => void;
 };
+/** Multi-select arm of `SelectV2Props`; `isMulti: true` discriminates it and makes `value` an array. */
 export type SelectV2MultiProps = SelectV2CommonProps & {
     isMulti: true;
     value?: (string | number)[];
@@ -62,5 +66,6 @@ export type SelectV2MultiProps = SelectV2CommonProps & {
     /** Show "N selected" once more than this many are chosen, instead of listing every label. Defaults to 2. */
     maxLabelsBeforeSummary?: number;
 };
+/** Props for `SelectV2`; a discriminated union on `isMulti` between the single and multi variants. */
 export type SelectV2Props = SelectV2SingleProps | SelectV2MultiProps;
 export {};

package/dist/Components/SideBar/SecondaryBar.js

@@ -36,7 +36,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!item.disabled)
                             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: "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: "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 }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;

package/dist/Components/SideBar/SideBar.js

@@ -8,7 +8,7 @@ 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 accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const Sidebar_1 = require("../../Constants/Sidebar");
 const lucide_react_1 = require("lucide-react");
@@ -33,7 +33,9 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: (0, accentText_1.onFilled)(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    const primaryFillRung = (0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white);
+    const primaryFill = theme.colors.primary[primaryFillRung];
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: primaryFill, color: (0, filledSurface_1.labelOnFill)(primaryFill, theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
 };
 const SkeletonMenuRow = ({ toggle }) => {
@@ -81,7 +83,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
             return null;
         return shell((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 14, color: activeAccent.icon }) }));
     }
-    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
+    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
 function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {