pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -8,252 +8,111 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const Accordion_1 = __importDefault(require("../Accordion/Accordion"));
-const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
-const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const filterHoverStyle_1 = require("./filterHoverStyle");
-const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
-// headerPadding = 2,
-panelPadding = 3, clearAllButton = true, onClearAllHandler,
-// sliderMode = "native",
- }) => {
+const RangeSection_1 = __importDefault(require("./RangeSection"));
+const OptionsSection_1 = __importDefault(require("./OptionsSection"));
+const SectionHeader_1 = require("./SectionHeader");
+const useStableCallback_1 = require("./useStableCallback");
+const CLEAR_RIGHT = "2.25rem";
+const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, panelPadding = 3, clearAllButton = true, onClearAllHandler, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // `gray[50]` (this file's hover fill throughout) is a pale light-mode tint that collapses to
-    // ~1.08:1 against the dark-mode canvas — see `filterHoverStyle.ts` for the fix + numbers.
-    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
-    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors, isDark), [theme.colors, isDark]);
-    const [openPrice, setOpenPrice] = (0, react_1.useState)({});
-    // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
+    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors), [theme.colors]);
+    const rule = (0, react_1.useMemo)(() => (0, planeStep_1.cardRule)(theme.colors), [theme.colors]);
     const isControlled = selected !== undefined;
-    // Local state for uncontrolled mode
     const [localSelected, setLocalSelected] = (0, react_1.useState)(() => ({ ...(selected || {}) }));
-    // Derived state: use prop if controlled, otherwise local state
-    const internalSelected = (selected !== undefined ? selected : localSelected);
-    // Wrapper for state updates to handle both modes
-    const setInternalSelected = (updater) => {
-        const next = typeof updater === 'function' ? (updater)(internalSelected) : updater;
-        // In the existing code, the updater function often handles calling onChange.
-        // However, for safety in uncontrolled mode, we update local state.
-        if (!isControlled) {
-            setLocalSelected(next);
-        }
-    };
+    const internalSelected = selected !== undefined ? selected : localSelected;
     const [expanded, setExpanded] = (0, react_1.useState)(() => {
         const initial = {};
         sidebarOptions.forEach((s) => (initial[s.id] = !!s.initiallyExpanded));
         return initial;
     });
     const [searchTerms, setSearchTerms] = (0, react_1.useState)({});
-    const activeCount = (0, react_1.useMemo)(() => {
-        return Object.values(internalSelected).reduce((acc, v) => acc + (Array.isArray(v) ? v.length : 0), 0);
-    }, [internalSelected]);
-    const toggleOption = (sectionId, optionId, checked) => {
-        setInternalSelected((prev) => {
-            const raw = prev[sectionId];
-            const current = new Set(Array.isArray(raw) ? raw : []);
-            if (checked)
-                current.add(optionId);
-            else
-                current.delete(optionId);
-            const next = { ...prev, [sectionId]: Array.from(current) };
-            onChange === null || onChange === void 0 ? void 0 : onChange(next);
-            return next;
-        });
-    };
-    const clearFilter = (sectionId, optionId) => {
-        setInternalSelected((prev) => {
-            const next = { ...prev };
-            if (optionId) {
-                const list = (next[sectionId] || []);
-                next[sectionId] = list.filter((id) => id !== optionId);
-            }
-            else {
-                delete next[sectionId];
-            }
-            onChange === null || onChange === void 0 ? void 0 : onChange(next);
-            return next;
-        });
-    };
+    const activeCount = (0, react_1.useMemo)(() => Object.values(internalSelected).reduce((acc, v) => acc + (Array.isArray(v) ? v.length : 0), 0), [internalSelected]);
+    const commit = (0, useStableCallback_1.useStableCallback)((next) => {
+        if (!isControlled)
+            setLocalSelected(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    });
+    const setValue = (0, useStableCallback_1.useStableCallback)((sectionId, value) => {
+        commit({ ...internalSelected, [sectionId]: value });
+    });
+    const toggleOption = (0, useStableCallback_1.useStableCallback)((sectionId, optionId, checked) => {
+        const raw = internalSelected[sectionId];
+        const current = new Set(Array.isArray(raw) ? raw : []);
+        if (checked)
+            current.add(optionId);
+        else
+            current.delete(optionId);
+        setValue(sectionId, Array.from(current));
+    });
+    const clearSection = (0, useStableCallback_1.useStableCallback)((sectionId, control) => {
+        var _a, _b;
+        (_b = (_a = control.closest("h2")) === null || _a === void 0 ? void 0 : _a.querySelector("button")) === null || _b === void 0 ? void 0 : _b.focus();
+        const next = { ...internalSelected };
+        delete next[sectionId];
+        commit(next);
+    });
     const clearAll = () => {
         onClearAllHandler === null || onClearAllHandler === void 0 ? void 0 : onClearAllHandler();
-        setInternalSelected(() => {
-            const next = {};
-            onChange === null || onChange === void 0 ? void 0 : onChange(next);
-            return next;
-        });
+        commit({});
     };
-    const items = sidebarOptions.map((section) => ({
-        header: ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: section.label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: section.label }) }), (() => {
-                    const sel = internalSelected[section.id];
-                    const hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
-                    return hasValue;
-                })() ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: (e) => {
-                        e.stopPropagation();
-                        clearFilter(section.id);
-                    }, borderRadius: "full", px: 2, children: "Clear" })) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { size: 10 })] })),
-        content: ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, py: 0, children: section.range ? ((() => {
-                var _a, _b;
-                const range = section.range;
-                const step = range.step || 1;
-                const rangeVal = internalSelected[section.id];
-                const rangeArr = Array.isArray(rangeVal) ? rangeVal : [];
-                const currentMin = (_a = rangeArr[0]) !== null && _a !== void 0 ? _a : range.min;
-                const currentMax = (_b = rangeArr[1]) !== null && _b !== void 0 ? _b : range.max;
-                const values = range.values || Array.from({ length: Math.floor((range.max - range.min) / (step || 1)) + 1 }, (_, i) => range.min + i * (step || 1));
-                // Calculate percentages
-                const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
-                const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
-                const primaryColor = theme.colors.red[300];
-                const secondaryColor = theme.colors.red[600];
-                const primaryGlowColor = theme.colors.primary.opacity[32];
-                const thumbShadow = theme.shadows.md;
-                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", px: 3, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                      .custom-range-slider::-webkit-slider-thumb {
-                        pointer-events: auto;
-                        width: 24px;
-                        height: 24px;
-                        -webkit-appearance: none;
-                        cursor: pointer;
-                      }
-                      .custom-range-slider::-moz-range-thumb {
-                        pointer-events: auto;
-                        width: 24px;
-                        height: 24px;
-                        border: none;
-                        cursor: pointer;
-                      }
-                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "md", fontSize: "10px", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
-                                        const min = Math.min(Number(e.target.value), currentMax - (step || 1));
-                                        const nextVal = [min, currentMax];
-                                        setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
-                                    }, style: {
-                                        position: 'absolute',
-                                        width: '100%',
-                                        height: '100%',
-                                        opacity: 0,
-                                        appearance: 'none',
-                                        pointerEvents: 'none', // Allow clicks to pass through track
-                                        zIndex: 3,
-                                        margin: 0,
-                                    } }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => {
-                                        const max = Math.max(Number(e.target.value), currentMin + (step || 1));
-                                        const nextVal = [currentMin, max];
-                                        setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
-                                    }, style: {
-                                        position: 'absolute',
-                                        width: '100%',
-                                        height: '100%',
-                                        opacity: 0,
-                                        appearance: 'none',
-                                        pointerEvents: 'none', // Allow clicks to pass through track
-                                        zIndex: 3,
-                                        margin: 0,
-                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
-                                                                const min = v;
-                                                                const max = currentMax;
-                                                                const nextVal = [Math.min(min, max), Math.max(min, max)];
-                                                                setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
-                                                                setOpenPrice({});
-                                                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
-                                                            const max = v;
-                                                            const min = currentMin;
-                                                            const nextVal = [Math.min(min, max), Math.max(min, max)];
-                                                            setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
-                                                            setOpenPrice({});
-                                                        }, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
-            })()) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.red[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.red[200]}` : "none", _hover: { bg: hoverBg }, onClick: () => {
-                                setInternalSelected((prev) => {
-                                    const next = { ...prev, [section.id]: String(r) };
-                                    onChange === null || onChange === void 0 ? void 0 : onChange(next);
-                                    return next;
-                                });
-                            }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (() => {
-                                            // orange[500] on background[50] ~2.2:1, fails the 3:1 icon bar — walk the scale like
-                                            // Notification's clock icon. Canvas mirrors this row's own bg ternary (red[50] when selected).
-                                            const isRowSelected = String(internalSelected[section.id] || "") === String(r);
-                                            const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
-                                            return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                        })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", 
-                        // boxborder[500], not raw gray[200]: WCAG 1.4.11 needs >=3.0 for a control
-                        // boundary against any named surface up to `muted` (lightest); gray[200] fails
-                        // there in dark mode.
-                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
-                            const v = e.target.value;
-                            setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
-                            if (v)
-                                setExpanded((prev) => ({ ...prev, [section.id]: true }));
-                        } })), section.id !== "rating" && (() => {
-                        const filteredOptions = (expanded[section.id] ? (section.options || []) : (section.options || []).slice(0, maxVisible))
-                            .filter((opt) => !section.searchable || !(searchTerms[section.id]) || opt.label.toLowerCase().includes((searchTerms[section.id] || "").toLowerCase()));
-                        if (filteredOptions.length === 0 && searchTerms[section.id]) {
-                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], children: "No Data Found" }) }));
-                        }
-                        return ((section.type === "radio") || section.radio) ? ((0, jsx_runtime_1.jsx)(react_2.RadioGroup, { w: "full", value: internalSelected[section.id] || "", onChange: (val) => {
-                                setInternalSelected((prev) => {
-                                    const next = { ...prev, [section.id]: val };
-                                    onChange === null || onChange === void 0 ? void 0 : onChange(next);
-                                    return next;
-                                });
-                            }, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", colorScheme: "red", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) })) : (filteredOptions.map((opt) => {
-                            const selectedForSection = internalSelected[section.id];
-                            const selectedIds = Array.isArray(selectedForSection)
-                                ? selectedForSection
-                                : [];
-                            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: selectedIds.includes(opt.id), onChange: (e) => {
-                                                    toggleOption(section.id, opt.id, e.target.checked);
-                                                }, size: "sm", iconSize: "0.5rem", sx: {
-                                                    '.chakra-checkbox__control': {
-                                                        width: '12px',
-                                                        height: '12px',
-                                                    },
-                                                    marginLeft: "2px",
-                                                }, color: "red" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => {
-                                                    const isChecked = selectedIds.includes(opt.id);
-                                                    toggleOption(section.id, opt.id, !isChecked);
-                                                }, children: opt.label })] }), typeof opt.count === "number" && ((0, jsx_runtime_1.jsx)(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
-                        }));
-                    })(), (section.options && section.options.length > maxVisible) && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: theme.colors.blue[600], cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), children: expanded[section.id] ? "Show less" : `+ ${(section.options.length - maxVisible)} more` }))] })) })),
-        itemProps: {
-            borderTop: "none",
-            borderBottom: `1px solid ${theme.colors.gray[100]}`,
-            _last: { borderBottom: "none" }
-        },
-        buttonProps: {
-            _hover: { bg: hoverBg }
-        },
-        panelProps: {},
-        customStyles: {
-            buttonStyle: variant === "minimal"
-                ? {
-                    justifyContent: "space-between",
-                    padding: 0,
-                    background: "transparent",
-                }
-                : {
-                    justifyContent: "space-between",
-                    padding: 0,
-                    background: theme.colors.gray[50],
-                    borderRadius: theme.radii.lg,
-                    border: `1px solid ${theme.colors.gray[200]}`,
-                    marginBottom: 6,
-                },
-            // Reasserts the same hover fill via the `sx` path (belt-and-suspenders alongside
-            // `buttonProps._hover` above) so the header hover doesn't depend on a single merge path.
-            hoverbuttonStyle: { background: hoverBg },
-            panelStyle: variant === "minimal"
-                ? {
-                    padding: "10px 0 12px 0",
-                    overflow: "visible",
-                }
-                : {
-                    padding: panelPadding,
-                    background: theme.colors.background[50],
-                    borderRadius: theme.radii.lg,
-                    overflow: "visible",
-                },
-        },
-    }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.background[50] : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.gray[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    const setSearchTerm = (0, useStableCallback_1.useStableCallback)((sectionId, term) => {
+        setSearchTerms((prev) => ({ ...prev, [sectionId]: term }));
+        if (term)
+            setExpanded((prev) => ({ ...prev, [sectionId]: true }));
+    });
+    const toggleExpanded = (0, useStableCallback_1.useStableCallback)((sectionId) => {
+        setExpanded((prev) => ({ ...prev, [sectionId]: !prev[sectionId] }));
+    });
+    const items = sidebarOptions.map((section) => {
+        const sel = internalSelected[section.id];
+        const hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
+        return {
+            header: ((0, jsx_runtime_1.jsx)(SectionHeader_1.SectionHeader, { label: section.label, hasValue: hasValue })),
+            headerAction: hasValue ? ((0, jsx_runtime_1.jsx)(SectionHeader_1.SectionClear, { sectionId: section.id, label: section.label, onClear: clearSection })) : undefined,
+            content: ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, py: 0, children: section.range ? ((0, jsx_runtime_1.jsx)(RangeSection_1.default, { sectionId: section.id, label: section.label, range: section.range, value: sel, onChange: setValue })) : ((0, jsx_runtime_1.jsx)(OptionsSection_1.default, { section: section, value: sel, searchTerm: searchTerms[section.id] || "", isExpanded: !!expanded[section.id], maxVisible: maxVisible, onToggle: toggleOption, onValue: setValue, onSearch: setSearchTerm, onToggleExpanded: toggleExpanded })) })),
+            itemProps: {
+                borderTop: "none",
+                borderBottom: `1px solid ${rule}`,
+                _last: { borderBottom: "none" },
+            },
+            buttonProps: {
+                _hover: { bg: hoverBg },
+            },
+            panelProps: {},
+            customStyles: {
+                buttonStyle: variant === "minimal"
+                    ? {
+                        justifyContent: "space-between",
+                        padding: 0,
+                        background: "transparent",
+                    }
+                    : {
+                        justifyContent: "space-between",
+                        padding: 0,
+                        background: theme.colors.background[50],
+                        borderRadius: theme.radii.lg,
+                        border: `1px solid ${rule}`,
+                        marginBottom: 6,
+                    },
+                hoverbuttonStyle: { background: hoverBg },
+                headerActionStyle: { right: CLEAR_RIGHT },
+                panelStyle: variant === "minimal"
+                    ? {
+                        padding: "10px 0 12px 0",
+                        overflow: "visible",
+                    }
+                    : {
+                        padding: panelPadding,
+                        background: theme.colors.background[50],
+                        borderRadius: theme.radii.lg,
+                        overflow: "visible",
+                    },
+            },
+        };
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.boxborder[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: rule, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: 700, color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 exports.default = FilterSidebar;

package/dist/Components/FilterSidebar/OptionsSection.d.ts

@@ -0,0 +1,14 @@
+import type { FilterSection } from "./FilterSidebar";
+type OptionsSectionProps = {
+    section: FilterSection;
+    value: unknown;
+    searchTerm: string;
+    isExpanded: boolean;
+    maxVisible: number;
+    onToggle: (sectionId: string, optionId: string, checked: boolean) => void;
+    onValue: (sectionId: string, value: string) => void;
+    onSearch: (sectionId: string, term: string) => void;
+    onToggleExpanded: (sectionId: string) => void;
+};
+declare const OptionsSection: import("react").MemoExoticComponent<({ section, value, searchTerm, isExpanded, maxVisible, onToggle, onValue, onSearch, onToggleExpanded, }: OptionsSectionProps) => import("react/jsx-runtime").JSX.Element>;
+export default OptionsSection;

package/dist/Components/FilterSidebar/OptionsSection.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filterHoverStyle_1 = require("./filterHoverStyle");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
+const RATINGS = [4, 3, 2, 1];
+const STARS = [0, 1, 2, 3, 4];
+const OptionsSection = (0, react_1.memo)(({ section, value, searchTerm, isExpanded, maxVisible, onToggle, onValue, onSearch, onToggleExpanded, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors), [theme.colors]);
+    const ratingPick = (0, react_1.useMemo)(() => (0, planeStep_1.bandOn)(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
+    const insetFocusRing = (0, react_1.useMemo)(() => ({ outline: "2px solid transparent", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors) }), [theme.colors]);
+    const options = section.options || [];
+    const selectedIds = Array.isArray(value) ? value : [];
+    const isRadio = section.type === "radio" || section.radio;
+    const visible = (isExpanded ? options : options.slice(0, maxVisible)).filter((opt) => !section.searchable || !searchTerm || opt.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    const renderList = () => {
+        if (visible.length === 0 && searchTerm) {
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
+        }
+        if (isRadio) {
+            return ((0, jsx_runtime_1.jsx)(react_2.RadioGroup, { w: "full", value: value || "", onChange: (val) => onValue(section.id, val), children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: visible.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) }));
+        }
+        return visible.map((opt) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `${section.label}: ${opt.label}`, isChecked: selectedIds.includes(opt.id), onChange: (e) => onToggle(section.id, opt.id, e.target.checked), size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => onToggle(section.id, opt.id, !selectedIds.includes(opt.id)), children: opt.label })] }), typeof opt.count === "number" && ((0, jsx_runtime_1.jsx)(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id)));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: RATINGS.map((r) => {
+                    const isRowSelected = String(value || "") === String(r);
+                    // NOTE: orange[500] is ~2.2:1 on background[50]; walk the scale for 3:1.
+                    const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? ratingPick : theme.colors.background[50]);
+                    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", "aria-pressed": isRowSelected, "aria-label": `${section.label}: ${r} stars & up`, align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: isRowSelected ? ratingPick : "transparent", border: isRowSelected ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, _focusVisible: insetFocusRing, onClick: () => onValue(section.id, String(r)), children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: STARS.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`))) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`));
+                }) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
+                // NOTE: boxborder[500] not gray[200]; WCAG 1.4.11 needs 3:1 for a control boundary.
+                borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, value: searchTerm, onChange: (e) => onSearch(section.id, e.target.value) })), section.id !== "rating" && renderList(), options.length > maxVisible && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: 500, color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => onToggleExpanded(section.id), onKeyDown: (0, activationKey_1.onActivationKey)(() => onToggleExpanded(section.id)), children: isExpanded ? "Show less" : `+ ${options.length - maxVisible} more` }))] }));
+});
+exports.default = OptionsSection;

package/dist/Components/FilterSidebar/RangeSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type FilterRange = {
+    min: number;
+    max: number;
+    step?: number;
+    values?: number[];
+    unit?: string;
+};
+type RangeSectionProps = {
+    sectionId: string;
+    label: string;
+    range: FilterRange;
+    value: unknown;
+    onChange: (sectionId: string, next: number[]) => void;
+};
+declare const RangeSection: React.MemoExoticComponent<({ sectionId, label, range, value, onChange }: RangeSectionProps) => import("react/jsx-runtime").JSX.Element>;
+export default RangeSection;

package/dist/Components/FilterSidebar/RangeSection.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filterHoverStyle_1 = require("./filterHoverStyle");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const SLIDER_CSS = `
+  .custom-range-slider::-webkit-slider-thumb {
+    pointer-events: auto;
+    width: 24px;
+    height: 24px;
+    -webkit-appearance: none;
+    cursor: pointer;
+  }
+  .custom-range-slider::-moz-range-thumb {
+    pointer-events: auto;
+    width: 24px;
+    height: 24px;
+    border: none;
+    cursor: pointer;
+  }
+`;
+const NATIVE_INPUT_STYLE = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    appearance: "none",
+    pointerEvents: "none",
+    zIndex: 3,
+    margin: 0,
+};
+const TICKS = [0, 25, 50, 75, 100];
+const BoundPicker = ({ bound, sectionId, label, values, current, unit, isOpen, onOpen, onClose, onPick }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors), [theme.colors]);
+    const pickFill = (0, react_1.useMemo)(() => (0, planeStep_1.bandOn)(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
+    const focusRing = (0, react_1.useMemo)(() => (0, focusRing_styles_1.focusVisibleRing)(theme.colors), [theme.colors]);
+    const insetFocusRing = (0, react_1.useMemo)(() => ({ outline: "2px solid transparent", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors) }), [theme.colors]);
+    const unitSuffix = unit ? ` ${unit}` : "";
+    const boundName = bound === "min" ? "minimum" : "maximum";
+    // NOTE: raw scale ink can miss 3:1 on its own fill; onFilled matches it.
+    const checkInk = (0, accentText_1.onFilled)(theme.colors.primary[100], theme.colors.white, theme.colors.black);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", "aria-label": `${label} ${boundName}: ${current}${unitSuffix}`, borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", _focusVisible: focusRing, "data-testid": `range-trigger-${bound}-${sectionId}`, onClick: onOpen, gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [current, unitSuffix] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, "aria-label": `${label} ${boundName}`, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-pressed": current === v, px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: current === v ? pickFill : theme.colors.surfaceRaised, borderLeftWidth: current === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: current === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, _focusVisible: insetFocusRing, "data-testid": `range-option-${bound}-${sectionId}-${v}`, onClick: () => onPick(v), children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, unitSuffix] }), current === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: checkInk }) })) : null] }, `${bound}-${v}`))) }) }) }) })] }));
+};
+const RangeSection = (0, react_1.memo)(({ sectionId, label, range, value, onChange }) => {
+    var _a, _b;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [openBound, setOpenBound] = (0, react_1.useState)(null);
+    const step = range.step || 1;
+    const rangeArr = Array.isArray(value) ? value : [];
+    const currentMin = (_a = rangeArr[0]) !== null && _a !== void 0 ? _a : range.min;
+    const currentMax = (_b = rangeArr[1]) !== null && _b !== void 0 ? _b : range.max;
+    const values = (0, react_1.useMemo)(() => range.values || Array.from({ length: Math.floor((range.max - range.min) / step) + 1 }, (_, i) => range.min + i * step), [range.values, range.min, range.max, step]);
+    const unitSuffix = range.unit ? ` ${range.unit}` : "";
+    const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
+    const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
+    const primaryColor = theme.colors.primary[300];
+    const secondaryColor = theme.colors.primary[600];
+    const trackColor = (0, planeStep_1.cardRule)(theme.colors);
+    const chipBorder = `1px solid ${trackColor}`;
+    const thumbSize = { base: "16px", md: "20px" };
+    const chipTop = { base: "-18px", md: "-22px" };
+    const pick = (bound, v) => {
+        const other = bound === "min" ? currentMax : currentMin;
+        onChange(sectionId, [Math.min(v, other), Math.max(v, other)]);
+        setOpenBound(null);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", px: 3, children: [(0, jsx_runtime_1.jsx)("style", { children: SLIDER_CSS }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: trackColor, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", height: "6px", style: {
+                            left: `${minPercent}%`,
+                            width: `${maxPercent - minPercent}%`,
+                            background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`,
+                        }, borderRadius: "full", boxShadow: `0 0 8px ${theme.colors.primary.opacity[32]}` }), [[minPercent, primaryColor], [maxPercent, secondaryColor]].map(([percent, color], i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", style: { left: `${percent}%` }, transform: "translate(-50%, 0)", w: thumbSize, h: thumbSize, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: color, boxShadow: theme.shadows.md, zIndex: 2 }, i))), [[minPercent, currentMin], [maxPercent, currentMax]].map(([percent, current], i) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", style: { left: `${percent}%` }, top: chipTop, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: chipBorder, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [current, unitSuffix] }, i))), TICKS.map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", "aria-label": `${label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => onChange(sectionId, [Math.min(Number(e.target.value), currentMax - step), currentMax]), style: NATIVE_INPUT_STYLE }), (0, jsx_runtime_1.jsx)("input", { type: "range", "aria-label": `${label}: maximum`, min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => onChange(sectionId, [currentMin, Math.max(Number(e.target.value), currentMin + step)]), style: NATIVE_INPUT_STYLE })] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: ["min", "max"].map((bound) => ((0, jsx_runtime_1.jsx)(BoundPicker, { bound: bound, sectionId: sectionId, label: label, values: values, current: bound === "min" ? currentMin : currentMax, unit: range.unit, isOpen: openBound === bound, onOpen: () => setOpenBound(bound), onClose: () => setOpenBound(null), onPick: (v) => pick(bound, v) }, bound))) })] }));
+});
+exports.default = RangeSection;

package/dist/Components/FilterSidebar/SectionHeader.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type SectionHeaderProps = {
+    label: string;
+    hasValue: boolean;
+};
+export declare const SectionHeader: React.MemoExoticComponent<({ label, hasValue }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+type SectionClearProps = {
+    sectionId: string;
+    label: string;
+    onClear: (sectionId: string, control: HTMLElement) => void;
+};
+export declare const SectionClear: React.MemoExoticComponent<({ sectionId, label, onClear }: SectionClearProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/Components/FilterSidebar/SectionHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionClear = exports.SectionHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
+const CLEAR_BADGE = {
+    colorScheme: "red",
+    variant: "solid",
+    fontSize: "xs",
+    borderRadius: "full",
+    px: 2,
+};
+exports.SectionHeader = (0, react_1.memo)(({ label, hasValue }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 700, fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: label }) }), hasValue ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...CLEAR_BADGE, "aria-hidden": true, visibility: "hidden", _after: { content: '"Clear"' } })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { size: 10 }))] }));
+});
+exports.SectionClear = (0, react_1.memo)(({ sectionId, label, onClear }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...CLEAR_BADGE, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": `Clear ${label}`, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: (e) => onClear(sectionId, e.currentTarget), onKeyDown: (0, activationKey_1.onActivationKey)((e) => onClear(sectionId, e.currentTarget)), children: "Clear" }));
+});

package/dist/Components/FilterSidebar/filterHoverStyle.d.ts

@@ -1,11 +1,3 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
-/**
- * FilterSidebar's hover fill for option rows, popover list items, and the accordion trigger.
- * `gray[50]` (a pale near-white tint in light mode) sits within ~1 lightness point of the
- * dark-mode canvas once the whole scale flips (~1.08:1 contrast) — invisible, the QA-reported
- * "checkbox hover invisible" bug. `gray[300]` clears the resting canvas (~2.3:1, a clear visible
- * cue) while staying dark enough that the existing `gray[700]`/`gray[800]` row text (tuned for a
- * near-black canvas) still reads at/above AA (~4.9:1+) on top of it — no text-color flip needed
- * here, unlike the Table row hover fix.
- */
-export declare const getFilterHoverBg: (colors: PaletteProps, isDark: boolean) => string;
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+export declare const getFilterHoverBg: (colors: PaletteProps) => string;