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

package/dist/esm/Components/FieldSelectModal/FieldSelectModal.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Checkbox, Flex, Input, InputGroup, InputLeftElement, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, SimpleGrid, Text, } from "@chakra-ui/react";
+import { motion, useReducedMotion } from "framer-motion";
+import { Search } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const MotionModalContent = motion(ModalContent);
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
+const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
+    const theme = useCustomTheme();
+    const prefersReducedMotion = useReducedMotion();
+    const [selected, setSelected] = useState([]);
+    const [query, setQuery] = useState("");
+    useEffect(() => {
+        if (isOpen) {
+            setSelected(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : fields.map((f) => f.field_name));
+            setQuery("");
+        }
+    }, [isOpen, fields, defaultSelected]);
+    const showSearch = searchable !== null && searchable !== void 0 ? searchable : fields.length >= 8;
+    const visibleFields = useMemo(() => {
+        if (!query.trim())
+            return fields;
+        const q = query.toLowerCase();
+        return fields.filter((f) => f.field_label.toLowerCase().includes(q));
+    }, [fields, query]);
+    const toggle = (name) => setSelected((prev) => prev.includes(name) ? prev.filter((f) => f !== name) : [...prev, name]);
+    const isAllSelected = selected.length === fields.length && fields.length > 0;
+    const isIndeterminate = selected.length > 0 && selected.length < fields.length;
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { overflow: "hidden", maxH: "85vh", initial: prefersReducedMotion ? false : { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [_jsxs(ModalHeader, { children: [_jsx(Text, { color: theme.colors.text[900], children: title }), _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { overflowY: "auto", children: [_jsxs(Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && (_jsxs(InputGroup, { size: "sm", maxW: "13.75rem", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => (_jsx(Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: _jsx(Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && (_jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), _jsx(Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+};
+export default FieldSelectModal;

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

@@ -0,0 +1,83 @@
+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 { 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);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+const inferKind = (url, fileName) => {
+    const src = (fileName || url).split("?")[0].toLowerCase();
+    if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
+        return "image";
+    if (/\.pdf$/.test(src))
+        return "pdf";
+    if (/\.(mp4|webm|ogg|mov)$/.test(src))
+        return "video";
+    return "other";
+};
+const downloadFile = async (fileUrl, fileName) => {
+    try {
+        const res = await fetch(fileUrl);
+        const blob = await res.blob();
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName || "file";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    catch {
+        window.open(fileUrl, "_blank", "noopener,noreferrer");
+    }
+};
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
+export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
+    const theme = useCustomTheme();
+    const downloadFill = resolveFilledSurface(theme.colors.primary, theme.colors);
+    const [zoom, setZoom] = useState(1);
+    const [rotation, setRotation] = useState(0);
+    const kind = fileType || inferKind(fileUrl, fileName);
+    const reset = () => {
+        setZoom(1);
+        setRotation(0);
+    };
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
+    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: BASE_TRANSFORM_TRANSITION, objectFit: "contain" }) }));
+        }
+        if (kind === "pdf") {
+            return (_jsx(Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "lg" }));
+        }
+        if (kind === "video") {
+            return (_jsx(Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
+        }
+        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 (_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, { 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/FilePreview/FilePreviewProps.js

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

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { Box, Text, Stack, VStack, Icon, List, ListItem, ListIcon, CloseButton, HStack, Progress, useDisclosure, Image, } from "@chakra-ui/react";
+import { useDropzone } from "react-dropzone";
+import { Upload, FileText, Eye } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { DEFAULT_MAX_SIZE_KB, mimeMap, toMB } from "./constants.js";
+import { useObjectUrl } from "./useObjectUrl.js";
+import Modal, { ModalBody, ModalHeader } from "../Modal/Modal.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+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();
+    const preview = () => url && onPreview(url);
+    return (_jsxs(Box, { role: "button", tabIndex: 0, "aria-label": `Preview ${file.name}`, boxSize: "2.5rem", cursor: "pointer", position: "relative", _focusVisible: focusVisibleRing(colors), _hover: {
+            ".hover-icon": {
+                opacity: 1,
+                bg: "blackAlpha.500",
+            },
+        }, onClick: preview, onKeyDown: onActivationKey(() => preview()), children: [_jsx("img", { src: url, alt: file.name, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: radius,
+                } }), _jsx(Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: _jsx(Eye, { color: "white" }) })] }));
+};
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; `maxSizeKB` defaults to 5 MB. */
+const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = DEFAULT_MAX_SIZE_KB, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", id, label, isRequired = false, isDisabled = false, error = false, errorMessage, helperText, }) => {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const compact = size === "sm";
+    const { colors, radii } = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    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) {
+            acc[mime] = []; // File dropzone format
+        }
+        return acc;
+    }, {});
+    const onDrop = useCallback((acceptedFiles) => {
+        setErrors([]);
+        const totalFiles = uploadedFiles.length + acceptedFiles.length;
+        if (maxFiles && totalFiles > maxFiles) {
+            setErrors([
+                `Maximum ${maxFiles} files allowed. You already uploaded ${uploadedFiles.length}.`,
+            ]);
+            return;
+        }
+        onFilesUploaded(acceptedFiles);
+    }, [onFilesUploaded, uploadedFiles, maxFiles]);
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        accept: mappedAccept,
+        maxSize: maxSizeKB * 1024,
+        maxFiles,
+        disabled: isDisabled,
+        onDropRejected: (rejectedFiles) => {
+            const messages = rejectedFiles.flatMap((rejected) => rejected.errors.map((err) => {
+                if (err.code === "file-too-large") {
+                    return `File "${rejected.file.name}" is too large. Max size is ${toMB(maxSizeKB)}.`;
+                }
+                else if (err.code === "file-invalid-type") {
+                    return `File "${rejected.file.name}" is not an accepted file type.`;
+                }
+                else {
+                    return `File "${rejected.file.name}" was rejected: ${err.message}`;
+                }
+            }));
+            setErrors(messages);
+        },
+    });
+    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}, ${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: 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,
+                                    "aria-describedby": ids.describedBy,
+                                }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(ListItem, { borderWidth: BORDER_WIDTHS.hairline, borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsx(FileThumbnail, { file: file, radius: radii.base, onPreview: (url) => {
+                                                                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, { "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);
+                }, size: "xl", isCentered: true, children: [_jsx(ModalHeader, { children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "md", textTransform: "uppercase", children: previewTitle }) }), _jsx(ModalBody, { children: previewUrl && (_jsx(Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
+};
+export default FileUpload;

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

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

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

@@ -0,0 +1,26 @@
+export const mimeMap = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.svg': 'image/svg+xml',
+    '.pdf': 'application/pdf',
+    '.doc': 'application/msword',
+    '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    '.xls': 'application/vnd.ms-excel',
+    '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    '.ppt': 'application/vnd.ms-powerpoint',
+    '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    '.txt': 'text/plain',
+    '.csv': 'text/csv',
+    '.mp4': 'video/mp4',
+    '.mov': 'video/quicktime',
+    '.mp3': 'audio/mpeg',
+    '.wav': 'audio/wav',
+    '.zip': 'application/zip',
+    '.rar': 'application/vnd.rar',
+    '.7z': 'application/x-7z-compressed',
+};
+export const DEFAULT_MAX_SIZE_KB = 5 * 1024;
+export const toMB = (size) => `${(size / 1024).toFixed(2)} MB`;

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

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+export const useObjectUrl = (file) => {
+    const [url, setUrl] = useState();
+    useEffect(() => {
+        const created = URL.createObjectURL(file);
+        setUrl(created);
+        return () => URL.revokeObjectURL(created);
+    }, [file]);
+    return url;
+};

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

@@ -0,0 +1,88 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+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"], }) => {
+    const { showToast } = useToaster();
+    const { colors } = useCustomTheme();
+    const accentColor = accentTextOnCanvas(colors.blue, colors.backgroundColor.main);
+    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) => {
+        if (bytes === 0)
+            return "0 KB";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+    };
+    const handleFiles = (files) => {
+        // setError(null);
+        const newFiles = Array.from(files).map((file) => ({
+            id: Math.random().toString(36).substring(2),
+            name: file.name,
+            size: file.size,
+            previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : "",
+        }));
+        const combinedFiles = [...uploadedFiles, ...newFiles].slice(0, maxFiles);
+        const totalSizeBytes = combinedFiles.reduce((acc, f) => acc + f.size, 0);
+        revokePreviews(newFiles.filter((f) => !combinedFiles.includes(f)));
+        if (totalSizeBytes > maxTotalBytes) {
+            revokePreviews(newFiles);
+            showToast({
+                title: `Total file size exceeds ${maxTotalSize} MB limit.`,
+                duration: 3000,
+                status: "error",
+            });
+            return;
+        }
+        setUploadedFiles(combinedFiles);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(combinedFiles);
+    };
+    const handleFileInput = (e) => {
+        if (e.target.files) {
+            handleFiles(e.target.files);
+            e.target.value = ""; // fix: reopen file dialog for same files
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (e.dataTransfer.files)
+            handleFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = () => setIsDragOver(false);
+    const removeFile = (id) => {
+        const filtered = uploadedFiles.filter((f) => f.id !== id);
+        revokePreviews(uploadedFiles.filter((f) => f.id === id));
+        setUploadedFiles(filtered);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(filtered);
+    };
+    const handleBrowseClick = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
+    const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
+    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: 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/FileUploader/FileUploaderProps.js

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

package/dist/esm/Components/FilterBar/FilterBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import Tag from "../Tag/Tag.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Toolbar row: search + filter controls left, summary + actions right, active filters as chips below. */
+const FilterBar = ({ search, searchLabel = "Search", children, actions, summary, activeFilters = [], onRemoveFilter, onClearAll, ...rest }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { ...rest, direction: "column", gap: 2, w: "100%", children: [_jsxs(Flex, { gap: 3, wrap: "wrap", align: "center", children: [search && (_jsx(Flex, { role: "search", "aria-label": searchLabel, children: search })), children, _jsxs(Flex, { gap: 2, align: "center", wrap: "wrap", ml: { base: 0, md: "auto" }, children: [summary && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", children: summary })), actions] })] }), activeFilters.length > 0 && (_jsxs(Flex, { gap: 1.5, wrap: "wrap", align: "center", children: [activeFilters.map((filter) => (_jsx(Tag, { label: filter.label, colorScheme: "gray", icon: onRemoveFilter ? X : undefined, onIconClick: onRemoveFilter ? () => onRemoveFilter(filter.id) : undefined }, filter.id))), onClearAll && _jsx(Button, { variant: "ghost", colorScheme: "gray", label: "Clear all", onClick: onClearAll })] }))] }));
+};
+export default FilterBar;

package/dist/esm/Components/FilterBar/FilterBarProps.js

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

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Flex, Text, VStack, Button } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import Accordion from "../Accordion/Accordion.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { getFilterHoverBg } from "./filterHoverStyle.js";
+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 rule = useMemo(() => cardRule(theme.colors), [theme.colors]);
+    const isControlled = selected !== undefined;
+    const [localSelected, setLocalSelected] = useState(() => ({ ...(selected || {}) }));
+    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(() => 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();
+        commit({});
+    };
+    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;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Box, Flex, Text, VStack, HStack, Badge, Input, Radio, RadioGroup } from "@chakra-ui/react";
+import { Star } from "lucide-react";
+import CheckBox from "../Checkbox/Checkbox.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { getFilterHoverBg } from "./filterHoverStyle.js";
+import { fieldFocusVisible, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const RATINGS = [4, 3, 2, 1];
+const STARS = [0, 1, 2, 3, 4];
+const OptionsSection = memo(({ section, value, searchTerm, isExpanded, maxVisible, onToggle, onValue, onSearch, onToggleExpanded, }) => {
+    const theme = useCustomTheme();
+    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
+    const ratingPick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
+    const insetFocusRing = useMemo(() => ({ outline: "2px solid transparent", boxShadow: 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 (_jsx(Box, { p: 2, w: "full", textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
+        }
+        if (isRadio) {
+            return (_jsx(RadioGroup, { w: "full", value: value || "", onChange: (val) => onValue(section.id, val), children: _jsx(VStack, { align: "start", spacing: 1, w: "full", children: visible.map((opt) => (_jsx(Radio, { value: opt.id, size: "sm", children: _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) }));
+        }
+        return visible.map((opt) => (_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) => onToggle(section.id, opt.id, e.target.checked), size: "sm" }), _jsx(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" && (_jsx(Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id)));
+    };
+    return (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(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 = accentTextOnCanvas(theme.colors.orange, isRowSelected ? ratingPick : theme.colors.background[50]);
+                    return (_jsx(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: _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(HStack, { spacing: 1, children: STARS.map((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.
+                borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, value: searchTerm, onChange: (e) => onSearch(section.id, e.target.value) })), section.id !== "rating" && renderList(), 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: () => onToggleExpanded(section.id), onKeyDown: onActivationKey(() => onToggleExpanded(section.id)), children: isExpanded ? "Show less" : `+ ${options.length - maxVisible} more` }))] }));
+});
+export default OptionsSection;