pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/esm/Components/Select/optionRowInk.js

@@ -0,0 +1,18 @@
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+export const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];
+// A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
+export const optionRowDescriptionInk = (colors) => liftToContrast(colors.textMuted, listRowBackgrounds(colors).selectedActive, AA_NORMAL_TEXT);
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+export const optionRowFill = (rows, isActive) => isActive ? rows.active : "transparent";
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+export const optionRowCursorSx = (rows) => ({
+    _hover: { bg: rows.active },
+    _focus: { bg: rows.active },
+});
+export const OPTION_ROW_REST_WEIGHT = 400;
+// NOTE: 600 beside a tinted fill and a check read as three signals for one state.
+export const OPTION_ROW_SELECTED_WEIGHT = 500;
+export const optionRowWeight = (isSingleSelected) => isSingleSelected ? OPTION_ROW_SELECTED_WEIGHT : OPTION_ROW_REST_WEIGHT;

package/dist/esm/Components/Select/selectKeyboardRing.js

@@ -0,0 +1,3 @@
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+export const NAVIGATION_KEYS = new Set(["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"]);
+export const keyboardRingShadow = (ring) => `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${ring}`;

package/dist/esm/Components/Select/selectRowInk.js

@@ -0,0 +1,33 @@
+import { isDarkCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, neutralStep } from "../../Theme/tokens/builders/outlineRung.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowInk } from "./optionRowInk.js";
+export const SELECT_ROW_DISABLED_CONTENT_OPACITY = 0.55;
+const NEUTRAL_INK_STEPS = {
+    label: 12.8,
+    selected: 15.4,
+    description: 7,
+    disabled: 3.6,
+    placeholder: 4.6,
+};
+// NOTE: light is a brand-free grey ladder off the panel; dark keeps the shared inks.
+const neutralInk = (colors, role) => neutralStep(colors.surfaceRaised, NEUTRAL_INK_STEPS[role]);
+const isDarkPanel = (colors) => isDarkCanvas(colors.surfaceRaised);
+export const selectRowInk = (colors, isSingleSelected) => {
+    if (isDarkPanel(colors))
+        return optionRowInk(colors, isSingleSelected);
+    return neutralInk(colors, isSingleSelected ? "selected" : "label");
+};
+export const selectRowDescriptionInk = (colors) => isDarkPanel(colors)
+    ? liftToContrast(colors.textMuted, selectRowBackgrounds(colors).selectedActive, AA_NORMAL_TEXT)
+    : neutralInk(colors, "description");
+/** Solid ink for a disabled row's content in light; dark dims content by opacity instead (null). */
+export const selectRowDisabledInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "disabled");
+/** Placeholder of the popup's filter input in light; dark keeps the shared placeholder ink (null). */
+export const selectFilterPlaceholderInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "placeholder");
+/** Cursor and selection each paint a rung; the stacked state paints the third. */
+export const selectRowFill = (rows, state) => {
+    if (state.isActive)
+        return state.isSelected ? rows.selectedActive : rows.active;
+    return state.isSelected ? rows.selected : "transparent";
+};

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

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Box, Input, Spinner, VStack, Text, InputGroup, InputRightElement, HStack, Tag, TagLabel, TagCloseButton, FormControl, } from "@chakra-ui/react";
+import Avatar from "../Avatar/Avatar.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { optionRowSpec, OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowDescriptionInk, selectRowInk } from "../Select/selectRowInk.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { PlusIcon, Check } from "lucide-react";
+import { onActivationKey } from "../Common/activationKey.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
+const ROW_TRANSITION = transitionFor(["background-color"]);
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, size, isMultipleSelect, }) => {
+    const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
+    const spec = optionRowSpec(size);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: keyboardRingShadow(rowBackgrounds.keyboardRing),
+    };
+    if (isOptionLoading) {
+        return (_jsxs(VStack, { py: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Text, { color: theme.colors.accentText, children: loadingText })] }));
+    }
+    if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
+        return (_jsx(_Fragment, { children: filteredOptions.map((option, index) => {
+                const selected = isOptionSelected(option);
+                const isSingleSelected = selected && !isMultipleSelect;
+                const isActive = index === activeIndex;
+                return (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
+                        optionRefs.current[index] = el;
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: selected ? rowBackgrounds.selected : "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: selectRowInk(theme.colors, isSingleSelected), fontWeight: optionRowWeight(isSingleSelected), transition: ROW_TRANSITION, sx: reducedMotionSx(), _hover: { bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, onClick: () => handleOptionClick(option), onKeyDown: onActivationKey(() => handleOptionClick(option)), display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "full" })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: spec.descriptionFontSize, color: selectRowDescriptionInk(theme.colors), children: option.email }))] }), isSingleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+            }) }));
+    }
+    return (_jsx(Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
+};
+/** Prefer `Select` (`native={false}`): onOptionSelect→onChange, inputOnchange→onSearchChange, the footer row→footerAction. */
+export default 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, helperText, size = DEFAULT_CONTROL_SIZE, BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
+    const theme = useCustomTheme();
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const [selectedOptions, setSelectedOptions] = useState(initialSelectedOption ? [initialSelectedOption] : []);
+    const [inputValue, setInputValue] = useState(searchQuery);
+    const [isOpen, setIsOpen] = useState(false);
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, () => setIsOpen(false));
+    const openDropdown = useCallback(() => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    }, [requestExclusiveOpen]);
+    const [position, setPosition] = useState("below");
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const listboxId = useId();
+    // NOTE: roving-tabindex nav (same shape as Table/filters/CompactSelect) — real DOM focus, no aria-activedescendant needed.
+    const optionRefs = useRef([]);
+    const footerRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const pendingFocusFirstOption = useRef(false);
+    const skipNextInputFocusOpen = useRef(false);
+    const closeAndFocusInput = useCallback(() => {
+        var _a;
+        setIsOpen(false);
+        if (document.activeElement !== inputRef.current) {
+            skipNextInputFocusOpen.current = true;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, []);
+    const filteredOptions = useMemo(() => {
+        return options.filter((option) => {
+            const isNotSelected = isMultipleSelect
+                ? !selectedOptions.some((selected) => selected.id === option.id)
+                : true;
+            const optionLabel = option.label || "";
+            const searchValue = inputValue || "";
+            return (isNotSelected &&
+                optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
+        });
+    }, [options, inputValue, isMultipleSelect, selectedOptions]);
+    const rowCount = isOptionLoading ? 0 : filteredOptions.length;
+    const hasOptionRows = rowCount > 0 || isBottomIcon;
+    const footerStop = isBottomIcon ? rowCount : -1;
+    const stopCount = rowCount + (isBottomIcon ? 1 : 0);
+    // NOTE: inset — the popup panel clips overflow, so an outer ring would be cut off.
+    const footerFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: insetFocusRingShadow(theme.colors),
+    };
+    const focusOption = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = (next === footerStop ? footerRef.current : optionRefs.current[next])) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [footerStop]);
+    const handleOptionClick = useCallback((option) => {
+        if (isMultipleSelect) {
+            setSelectedOptions((prev) => {
+                const isSelected = prev.some((selected) => selected.id === option.id);
+                const newSelected = isSelected
+                    ? prev.filter((selected) => selected.id !== option.id)
+                    : [...prev, option];
+                // Update the input value and notify the parent
+                setInputValue("");
+                if (onOptionMultiSelect) {
+                    // Call the prop to update state in the parent component
+                    // Note: This should not directly set the state in SelectSearch
+                    setTimeout(() => onOptionMultiSelect(newSelected), 0);
+                }
+                return newSelected;
+            });
+        }
+        else {
+            setInputValue(option.label);
+            closeAndFocusInput();
+            if (onOptionSelect) {
+                onOptionSelect(option);
+            }
+        }
+    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect, closeAndFocusInput]);
+    const isOptionSelected = useCallback((option) => selectedOptions.some((selected) => selected.id === option.id), [selectedOptions]);
+    useEffect(() => setActiveIndex(0), [inputValue, isOpen]);
+    useEffect(() => {
+        if (isOpen && pendingFocusFirstOption.current) {
+            pendingFocusFirstOption.current = false;
+            // Refs are already attached by the time this effect runs (React
+            // commits before running effects), so this can focus synchronously.
+            focusOption(0);
+        }
+    }, [isOpen, focusOption]);
+    useLayoutEffect(() => {
+        if (isOpen && isBottomIcon && dropdownRef.current && footerRef.current) {
+            dropdownRef.current.style.scrollPaddingBottom = `${footerRef.current.offsetHeight}px`;
+        }
+    }, [isOpen, isBottomIcon, BottomText]);
+    const handleListKeyDown = (e) => {
+        if (stopCount === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + stopCount) % stopCount);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(stopCount - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndFocusInput();
+        }
+    };
+    const handleRemoveOption = (option) => {
+        setSelectedOptions((prev) => prev.filter((selected) => selected.id !== option.id));
+        if (onOptionMultiSelect) {
+            onOptionMultiSelect(selectedOptions.filter((selected) => selected.id !== option.id));
+            setInputValue("");
+        }
+    };
+    const handleInputChange = (value) => {
+        setInputValue(value);
+        inputOnchange(value);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            const matchingOption = options.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
+            if (matchingOption) {
+                handleOptionClick(matchingOption);
+            }
+            else if (!isOpen) {
+                openDropdown();
+            }
+        }
+        else if (e.key === "ArrowDown") {
+            // Space is left untouched here (unlike a button trigger) since this
+            // trigger is a text field — Space must still type a literal space.
+            e.preventDefault();
+            if (!isOpen) {
+                pendingFocusFirstOption.current = true;
+                openDropdown();
+            }
+            else if (stopCount > 0) {
+                focusOption(0);
+            }
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndFocusInput();
+        }
+    };
+    const updateDropdownPosition = () => {
+        if (inputRef.current && dropdownRef.current) {
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const dropdownRect = dropdownRef.current.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
+            const spaceAbove = inputRect.top + window.scrollY;
+            if (spaceBelow >= dropdownRect.height) {
+                setPosition("below");
+            }
+            else if (spaceAbove >= dropdownRect.height) {
+                setPosition("above");
+            }
+            else {
+                setPosition("below");
+            }
+        }
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPosition();
+    }, [isOpen]);
+    useOutsideMouseDown([inputRef, dropdownRef], () => {
+        if (inputRef.current && dropdownRef.current)
+            setIsOpen(false);
+    }, { enabled: isOpen });
+    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, onBlur: (e) => {
+                    if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) {
+                        setIsOpen(false);
+                    }
+                }, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "3.125rem", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { size: size, children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
+                                    if (skipNextInputFocusOpen.current) {
+                                        skipNextInputFocusOpen.current = false;
+                                        return;
+                                    }
+                                    openDropdown();
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, id: listboxId, role: hasOptionRows ? "listbox" : undefined, "aria-label": hasOptionRows ? (label !== null && label !== void 0 ? label : placeholder) : undefined, tabIndex: -1, _focus: { outline: "none" }, onKeyDown: handleListKeyDown, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }), _jsx(Box, { as: "hr", role: "presentation", borderColor: raisedRule(theme.colors) }), isBottomIcon && (_jsxs(Box, { as: "button", type: "button", ref: footerRef, role: "option", "aria-selected": false, tabIndex: activeIndex === footerStop ? 0 : -1, w: "100%", textAlign: "left", position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, onFocus: () => setActiveIndex(footerStop), _focusVisible: footerFocusRing, borderColor: raisedRule(theme.colors), zIndex: 1, borderTop: `1px solid ${raisedRule(theme.colors)}`, children: [_jsx(Box, { as: "span", children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { as: "span", fontSize: "sm", color: BottomTextColor
+                                            ? BottomTextColor
+                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
+}

package/dist/esm/Components/SelectSearch/SelectSearchProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SelectV2/SelectV2.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Select from "../Select/Select.js";
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize.js";
+export { chipTriggerSizeStyles };
+/** @deprecated Use `Select` with `native={false}`; every prop is forwarded to it unchanged. */
+const SelectV2 = forwardRef(function SelectV2(props, ref) {
+    return _jsx(Select, { ...props, native: false, ref: ref });
+});
+/** @deprecated Use `Select` with `native={false}`. */
+export default SelectV2;

package/dist/esm/Components/SelectV2/SelectV2Props.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/esm/Components/SettingRow/SettingRowProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SettingRow/SettingsSection.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Flex, Heading, Text } from "@chakra-ui/react";
+import Card from "../Card/Card.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
+/** 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 } = useCustomTheme();
+    const titleColor = isDanger ? colors.semanticText.error : colors.header[900];
+    return (_jsxs(Card, { id: id, scrollMarginTop: 4, variant: isDanger ? "outline" : undefined, borderColor: isDanger ? colors.semanticText.error : undefined, header: _jsxs(Flex, { align: "flex-start", gap: 3, children: [_jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: titleColor, children: title }), description && (_jsx(Text, { mt: 0.5, fontSize: "xs", fontWeight: 400, color: colors.textMuted, children: description }))] }), action && _jsx(Box, { flexShrink: 0, children: action })] }), children: [children, footer && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: cardRule(colors) }), _jsx(Box, { pt: 4, children: footer })] }))] }));
+};
+export default SettingsSection;

package/dist/esm/Components/SettingRow/SettingsSectionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex, Icon, VStack, Badge, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { sidebarFocusStyles } from "./sidebarFocus.js";
+import { menuDisabled } from "./menuDisabled.js";
+import { ChevronLeft, ChevronRight, LockKeyhole } from "lucide-react";
+import OverflowTooltipText from "./components/OverflowTooltipText.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { sanitizeId } from "./sidebarId.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { sidebarRowPeak } from "../../Theme/tokens/builders/sidebarAccent.js";
+import { scaleFor } from "../../Theme/chakra/paletteFromTheme.js";
+import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+import { SIDEBAR_ROW } from "./sidebarScale.js";
+import { SIDEBAR_BG_TRANSITION, SIDEBAR_INK_TRANSITION } from "./sidebarMotion.js";
+const softBadge = (colors, colorScheme, surface) => {
+    const tone = resolveSoftTone(colors, scaleFor(colors, colorScheme), surface);
+    return { bg: tone.bg, color: tone.fg };
+};
+const parseBadge = (badge) => {
+    var _a, _b, _c;
+    return ({
+        badgeVal: badge === null || badge === void 0 ? void 0 : badge.count,
+        colorScheme: (_a = badge === null || badge === void 0 ? void 0 : badge.color) !== null && _a !== void 0 ? _a : "teal",
+        radius: (_b = badge === null || badge === void 0 ? void 0 : badge.radius) !== null && _b !== void 0 ? _b : "full",
+        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) => menuDisabled(item) || !!item.locked;
+const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
+    var _a;
+    const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
+    const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
+    const blocked = isItemBlocked(item);
+    return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(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 ? 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 (!blocked)
+                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(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.popover, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 500, as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
+};
+const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
+    var _a;
+    const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
+    const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
+    const blocked = isItemBlocked(item);
+    const row = (_jsxs(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 ? DISABLED_OPACITY : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: blocked ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+        }, onClick: (e) => {
+            e.preventDefault();
+            if (!blocked)
+                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: SIDEBAR_INK_TRANSITION }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { 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 ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+    return item.locked && item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: row })) : (row);
+};
+/** 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", shrinkable = false, headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
+    const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
+    const scrollContainerId = sanitizeId(useId());
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const width = collapsed ? collapsedWidth : expandedWidth;
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, minW: shrinkable ? collapsedWidth : undefined, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(Flex, { align: "center", gap: "7px", flex: "1", minW: 0, overflow: "hidden", children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(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: SIDEBAR_BG_TRANSITION, sx: sidebarFocusStyles(theme.colors), children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: items.map((item) => {
+                        var _a;
+                        const isActive = String(selected) === String(item.id) ||
+                            String(selected) === String(item.title);
+                        const key = String((_a = item.id) !== null && _a !== void 0 ? _a : item.title);
+                        return collapsed ? (_jsx(CollapsedItem, { item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }, key)) : (_jsx(ExpandedItem, { item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }, key));
+                    }) })] }) }));
+};
+export default SecondaryBar;