pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

package/dist/esm/Components/EmptyState/FilteredEmptyState.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { SearchX } from "lucide-react";
+import Button from "../Button/Button.js";
+import EmptyState from "./EmptyState.js";
+const plural = (count, one, many) => (count === 1 ? one : many);
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+const FilteredEmptyState = ({ title = "Nothing matched these filters", description, scale = "page", filterCount, onClearFilters, clearLabel, onRemoveLastFilter, removeLastFilterLabel = "Remove last filter", minH, }) => {
+    const hasCount = filterCount !== undefined && filterCount > 0;
+    const resolvedDescription = description !== null && description !== void 0 ? description : (hasCount
+        ? `${filterCount} ${plural(filterCount, "filter is", "filters are")} active. Remove or clear ${plural(filterCount, "it", "them")} to see more results.`
+        : undefined);
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (hasCount ? `Clear ${filterCount} ${plural(filterCount, "filter", "filters")}` : "Clear filters");
+    const buttonSize = scale === "card" ? "sm" : "md";
+    const actions = onRemoveLastFilter || onClearFilters ? (_jsxs(_Fragment, { children: [onRemoveLastFilter && (_jsx(Button, { size: buttonSize, label: removeLastFilterLabel, onClick: onRemoveLastFilter })), onClearFilters && (_jsx(Button, { size: buttonSize, variant: "outline", colorScheme: "gray", label: resolvedClearLabel, onClick: onClearFilters }))] })) : undefined;
+    return (_jsx(Box, { role: "status", w: "100%", children: _jsx(EmptyState, { icon: SearchX, colorScheme: "gray", variant: "subtle", size: scale === "card" ? "sm" : "md", minH: minH !== null && minH !== void 0 ? minH : (scale === "card" ? "6rem" : undefined), title: title, description: resolvedDescription, action: actions }) }));
+};
+export default FilteredEmptyState;

package/dist/esm/Components/FilePreview/FilePreview.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Flex, IconButton, Image, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text, useDisclosure, } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { MotionConfig, motion } from "framer-motion";
 import { Download, Eye, FileQuestion, Minus, Plus, RotateCw, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BASE_TRANSFORM_TRANSITION = transitionFor(["transform"], "base");
+const OPACITY_TRANSITION = transitionFor(["opacity"]);
 const MotionContent = motion(ModalContent);
 const blackScrim = (black, opacity) => {
     const { r, g, b } = hexToRgb(black);
@@ -57,7 +61,7 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
     };
     const renderBody = () => {
         if (kind === "image") {
-            return (_jsx(Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: _jsx(Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: "transform 0.2s ease", objectFit: "contain" }) }));
+            return (_jsx(Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: _jsx(Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: BASE_TRANSFORM_TRANSITION, objectFit: "contain" }) }));
         }
         if (kind === "pdf") {
             return (_jsx(Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "lg" }));
@@ -67,13 +71,13 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
         }
         return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [_jsx(FileQuestion, { size: 48, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && (_jsxs(Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: downloadFill.fill, color: downloadFill.color, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [_jsx(Download, { size: 16 }), " Download file"] }))] }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { ...overlayScrimStyles(theme.colors) }), _jsxs(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
+    return (_jsx(MotionConfig, { reducedMotion: "user", children: _jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [_jsx(ModalOverlay, { ...overlayScrimStyles(theme.colors) }), _jsxs(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }) }));
 };
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: _jsx(Eye, { size: 18 }) })), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "button", type: "button", "aria-label": `Preview ${fileName || "file"}`, "data-group": true, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", _focusVisible: focusVisibleRing(theme.colors), onClick: onOpen, children: [kind === "image" ? (_jsx(Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : (_jsx(Flex, { as: "span", align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: _jsx(Eye, { size: 18 }) })), _jsx(Flex, { as: "span", position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: OPACITY_TRANSITION, _groupHover: { opacity: 1 }, _groupFocusVisible: { opacity: 1 }, children: _jsx(Eye, { size: 18 }) })] }), _jsx(FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 export default FilePreview;

package/dist/esm/Components/FileUpload/FileUpload.js

@@ -14,6 +14,8 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { FIELD_RADIUS, FIELD_TRANSITION } from "../Common/fieldStyles.js";
 import { focusVisibleRing, focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const DROP_PROMPT = "Drag and drop files here";
 const FileThumbnail = ({ file, radius, onPreview, }) => {
     const url = useObjectUrl(file);
     const { colors } = useCustomTheme();
@@ -23,12 +25,7 @@ const FileThumbnail = ({ file, radius, onPreview, }) => {
                 opacity: 1,
                 bg: "blackAlpha.500",
             },
-        }, onClick: preview, onKeyDown: (event) => {
-            if (event.key !== "Enter" && event.key !== " ")
-                return;
-            event.preventDefault();
-            preview();
-        }, children: [_jsx("img", { src: url, alt: file.name, style: {
+        }, onClick: preview, onKeyDown: onActivationKey(() => preview()), children: [_jsx("img", { src: url, alt: file.name, style: {
                     width: "100%",
                     height: "100%",
                     objectFit: "cover",
@@ -45,6 +42,8 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
     const [previewTitle, setPreviewTitle] = React.useState(null);
     const [errors, setErrors] = React.useState([]);
     const border = error ? colors.semanticText.error : colors.boxborder[500];
+    const limitParts = [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""];
+    const limits = limitParts.join("").trim();
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = mimeMap[ext];
         if (mime) {
@@ -86,10 +85,10 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
     });
     return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired })), _jsx(Box, { ...getRootProps({
                                     role: "button",
-                                    "aria-label": label !== null && label !== void 0 ? label : inputAriaLabel,
+                                    "aria-label": `${label !== null && label !== void 0 ? label : inputAriaLabel}, ${DROP_PROMPT} ${limits}`,
                                     "aria-describedby": ids.describedBy,
                                     "aria-disabled": isDisabled || undefined,
-                                }), border: "1px dashed", borderColor: border, borderRadius: FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: focusVisibleStyles(colors), position: "relative", children: _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }) }), _jsx("input", { ...getInputProps({
+                                }), border: "1px dashed", borderColor: border, borderRadius: FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: focusVisibleStyles(colors), position: "relative", children: _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: DROP_PROMPT }), _jsx(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: limitParts })] })] }) }), _jsx("input", { ...getInputProps({
                                     id: ids.inputId,
                                     disabled: isDisabled,
                                     "aria-label": label ? undefined : inputAriaLabel,
@@ -98,7 +97,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
                                                                 setPreviewUrl(url);
                                                                 setPreviewTitle(file.name);
                                                                 onOpen();
-                                                            } })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
+                                                            } })) : (_jsx(ListIcon, { as: FileText, color: accentTextOnCanvas(colors.blue, colors.background[50]), boxSize: 8 })), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontSize: "sm", noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: [toMB(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && (_jsx(CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (_jsx(Progress, { "aria-label": `Upload progress for ${file.name}`, value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), _jsxs(Modal, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

package/dist/esm/Components/FileUploader/FileUploader.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Box, Text, Grid, Flex, HStack, Image, IconButton, Tooltip, } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { useToaster } from "../Toaster/Toaster.js";
@@ -8,6 +8,7 @@ import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { FIELD_RADIUS } from "../Common/fieldStyles.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { onActivationKey } from "../Common/activationKey.js";
 const revokePreviews = (files) => files.forEach((f) => f.previewUrl && URL.revokeObjectURL(f.previewUrl));
 /** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
@@ -17,6 +18,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     const [uploadedFiles, setUploadedFiles] = useState([]);
     const [isDragOver, setIsDragOver] = useState(false);
     const fileInputRef = useRef(null);
+    const filesRef = useRef(uploadedFiles);
+    filesRef.current = uploadedFiles;
+    useEffect(() => () => revokePreviews(filesRef.current), []);
     const totalSize = uploadedFiles.reduce((acc, f) => acc + f.size, 0);
     const maxTotalBytes = maxTotalSize * 1024 * 1024;
     const formatFileSize = (bytes) => {
@@ -79,11 +83,6 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     return (_jsxs(Box, { maxW: "500px", mx: "auto", p: 6, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", _jsxs(Text, { as: "span", fontWeight: 500, color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", _jsxs(Text, { as: "span", fontWeight: 500, children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), _jsxs(Box, { "data-testid": "file-uploader-dropzone", border: "1px dashed", borderColor: isDragOver ? colors.primary[500] : colors.boxborder[500], bg: isDragOver ? colors.backgroundColor.muted : undefined, borderRadius: FIELD_RADIUS, transition: transitionFor(["border-color", "background-color"]), p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && (_jsx(Box, { children: _jsx(Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
                                 var _a;
                                 return (_jsxs(Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [_jsxs(HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? (_jsx(Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (_jsx(Box, { boxSize: "28px", borderRadius: "sm", bg: colors.backgroundColor.muted, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), _jsxs(Box, { minW: "0", children: [_jsx(Text, { fontSize: "sm", fontWeight: 500, noOfLines: 1, children: file.name }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), _jsx(HStack, { spacing: 1, children: _jsx(Tooltip, { label: "Remove", children: _jsx(IconButton, { "aria-label": "Remove", icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: handleBrowseClick, onKeyDown: (e) => {
-                            if (e.key !== "Enter" && e.key !== " ")
-                                return;
-                            e.preventDefault();
-                            handleBrowseClick();
-                        }, children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: 500, fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+                            }) }) })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), _jsxs(Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: handleBrowseClick, onKeyDown: onActivationKey(() => handleBrowseClick()), children: [_jsx(Box, { children: _jsxs(Text, { fontWeight: 500, fontSize: "md", children: ["Drag and drop the files here, or", _jsx(Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), _jsxs(Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 export default FileUploader;

package/dist/esm/Components/FilterSidebar/FilterSidebar.js

@@ -1,256 +1,113 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { Box, Flex, Text, VStack, HStack, Badge, Input, Radio, RadioGroup, Button, SimpleGrid, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal } from "@chakra-ui/react";
-import { Star, X, Check, ChevronDownIcon } from "lucide-react";
+import { Box, Flex, Text, VStack, Button } from "@chakra-ui/react";
+import { X } from "lucide-react";
 import Accordion from "../Accordion/Accordion.js";
-import CheckBox from "../Checkbox/Checkbox.js";
-import ToolTip from "../ToolTip/ToolTip.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
-import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import { getFilterHoverBg } from "./filterHoverStyle.js";
-import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
-const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
-// headerPadding = 2,
-panelPadding = 3, clearAllButton = true, onClearAllHandler,
-// sliderMode = "native",
- }) => {
+import RangeSection from "./RangeSection.js";
+import OptionsSection from "./OptionsSection.js";
+import { SectionHeader, SectionClear } from "./SectionHeader.js";
+import { useStableCallback } from "./useStableCallback.js";
+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 = useCustomTheme();
     const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
-    const rangePick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
-    const ratingPick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
-    const [openPrice, setOpenPrice] = useState({});
-    // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
+    const rule = useMemo(() => cardRule(theme.colors), [theme.colors]);
     const isControlled = selected !== undefined;
-    // Local state for uncontrolled mode
     const [localSelected, setLocalSelected] = 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] = useState(() => {
         const initial = {};
         sidebarOptions.forEach((s) => (initial[s.id] = !!s.initiallyExpanded));
         return initial;
     });
     const [searchTerms, setSearchTerms] = useState({});
-    const activeCount = 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 = useMemo(() => Object.values(internalSelected).reduce((acc, v) => acc + (Array.isArray(v) ? v.length : 0), 0), [internalSelected]);
+    const commit = useStableCallback((next) => {
+        if (!isControlled)
+            setLocalSelected(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    });
+    const setValue = useStableCallback((sectionId, value) => {
+        commit({ ...internalSelected, [sectionId]: value });
+    });
+    const toggleOption = 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 = 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: (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: section.label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Text, { fontWeight: 700, 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;
-                })() ? (_jsx(Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: (e) => {
-                        e.stopPropagation();
-                        clearFilter(section.id);
-                    }, borderRadius: "full", px: 2, children: "Clear" })) : _jsx(ChevronDownIcon, { size: 10 })] })),
-        content: (_jsx(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.primary[300];
-                const secondaryColor = theme.colors.primary[600];
-                const primaryGlowColor = theme.colors.primary.opacity[32];
-                const thumbShadow = theme.shadows.md;
-                return (_jsxs(Box, { w: "full", px: 3, children: [_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;
-                      }
-                    ` }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.boxborder[200], borderRadius: "full" }), _jsx(Box, { position: "absolute", height: "6px", style: {
-                                        left: `${minPercent}%`,
-                                        width: `${maxPercent - minPercent}%`,
-                                        background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`,
-                                    }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), _jsx(Box, { position: "absolute", style: { 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 }), _jsx(Box, { position: "absolute", style: { 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 }), _jsxs(Box, { position: "absolute", style: { 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.boxborder[200]}`, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), _jsxs(Box, { position: "absolute", style: { 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.boxborder[200]}`, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), _jsx("input", { type: "range", "aria-label": `${section.label}: minimum`, 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,
-                                    } }), _jsx("input", { type: "range", "aria-label": `${section.label}: maximum`, 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,
-                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-min-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? rangePick : theme.colors.surfaceRaised, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-min-${section.id}-${v}`, 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: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", "data-testid": `range-trigger-max-${section.id}`, onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? rangePick : theme.colors.surfaceRaised, borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, "data-testid": `range-option-max-${section.id}-${v}`, 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: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMax === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black) }) })) : null] }, `max-${v}`))) }) }) })] })] })] }));
-            })()) : (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: [4, 3, 2, 1].map((r) => (_jsx(Flex, { align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? ratingPick : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? `1px solid ${theme.colors.primary[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: _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(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 = accentTextOnCanvas(theme.colors.orange, isRowSelected ? ratingPick : theme.colors.background[50]);
-                                            return Array.from({ length: 5 }, (_, i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                        })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(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; gray[200] fails in dark.
-                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, 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 (_jsx(Box, { p: 2, w: "full", textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
-                        }
-                        return ((section.type === "radio") || section.radio) ? (_jsx(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: _jsx(VStack, { align: "start", spacing: 1, w: "full", children: filteredOptions.map((opt) => (_jsx(Radio, { value: opt.id, size: "sm", children: _jsx(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 (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [_jsxs(Flex, { align: "center", gap: 1, children: [_jsx(CheckBox, { "aria-label": `${section.label}: ${opt.label}`, isChecked: selectedIds.includes(opt.id), onChange: (e) => {
-                                                    toggleOption(section.id, opt.id, e.target.checked);
-                                                }, size: "sm" }), _jsx(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" && (_jsx(Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id));
-                        }));
-                    })(), (section.options && section.options.length > maxVisible) && (_jsx(Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: 500, color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => setExpanded((prev) => ({ ...prev, [section.id]: !prev[section.id] })), onKeyDown: (e) => {
-                            if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                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.boxborder[200]}`,
-            _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 ${theme.colors.boxborder[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 (_jsxs(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: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Text, { fontSize: "lg", fontWeight: 700, color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    const setSearchTerm = useStableCallback((sectionId, term) => {
+        setSearchTerms((prev) => ({ ...prev, [sectionId]: term }));
+        if (term)
+            setExpanded((prev) => ({ ...prev, [sectionId]: true }));
+    });
+    const toggleExpanded = 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: (_jsx(SectionHeader, { label: section.label, hasValue: hasValue })),
+            headerAction: hasValue ? (_jsx(SectionClear, { sectionId: section.id, label: section.label, onClear: clearSection })) : undefined,
+            content: (_jsx(VStack, { align: "start", spacing: 1, py: 0, children: section.range ? (_jsx(RangeSection, { sectionId: section.id, label: section.label, range: section.range, value: sel, onChange: setValue })) : (_jsx(OptionsSection, { 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 (_jsxs(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: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: rule, children: [_jsx(Text, { fontSize: "lg", fontWeight: 700, color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 export default FilterSidebar;