pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.10

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -30,6 +30,6 @@ const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select
     return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionModalContent, { borderRadius: "2xl", overflow: "hidden", maxH: "85vh", 
                 // Chakra's default dialog bg (`colors.white`, or `gray.700` under `_dark`) resolves to a
                 // white/light-grey panel against our palettes, so the surface must be set explicitly.
-                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { pb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: 600, children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "220px", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+                bg: theme.colors.background[50], initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { pb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: 600, children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "220px", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
 };
 exports.default = FieldSelectModal;

package/dist/Components/FilePreview/FilePreview.js

@@ -62,7 +62,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         if (kind === "video") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.gray[400] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.white, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionContent
             // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
@@ -70,7 +70,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
             , { 
                 // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
                 // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semantic.success[500], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
+                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */

package/dist/Components/FileUpload/FileUpload.js

@@ -39,17 +39,17 @@ const react_2 = require("@chakra-ui/react");
 const react_dropzone_1 = require("react-dropzone");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const constants_1 = require("./constants");
 const Modal_1 = __importStar(require("../Modal/Modal"));
 const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, }) => {
-    var _a, _b, _c, _d;
     const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const [previewUrl, setPreviewUrl] = react_1.default.useState(null);
     const [previewTitle, setPreviewTitle] = react_1.default.useState(null);
     const [errors, setErrors] = react_1.default.useState([]);
-    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[50];
-    const border = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[300];
+    const bg = colors.gray[50];
+    const border = colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = constants_1.mimeMap[ext];
         if (mime) {
@@ -88,27 +88,21 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[500], children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600], children: err }, idx));
-                        }) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => {
-                                    var _a, _b, _c, _d, _e, _f, _g;
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
-                                                                    ".hover-icon": {
-                                                                        opacity: 1,
-                                                                        bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[16],
-                                                                    },
-                                                                }, onClick: () => {
-                                                                    setPreviewUrl(URL.createObjectURL(file));
-                                                                    setPreviewTitle(file.name);
-                                                                    onOpen();
-                                                                }, children: [(0, jsx_runtime_1.jsx)("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                            width: "100%",
-                                                                            height: "100%",
-                                                                            objectFit: "cover",
-                                                                            borderRadius: radii.base,
-                                                                        } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_e = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _e === void 0 ? void 0 : _e[500], boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500], children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600] }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.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));
-                                }) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                                                ".hover-icon": {
+                                                                    opacity: 1,
+                                                                    bg: colors.secondary.opacity[16],
+                                                                },
+                                                            }, onClick: () => {
+                                                                setPreviewUrl(URL.createObjectURL(file));
+                                                                setPreviewTitle(file.name);
+                                                                onOpen();
+                                                            }, children: [(0, jsx_runtime_1.jsx)("img", { src: URL.createObjectURL(file), alt: file.name, style: {
+                                                                        width: "100%",
+                                                                        height: "100%",
+                                                                        objectFit: "cover",
+                                                                        borderRadius: radii.base,
+                                                                    } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: colors.background[100] }) })] })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.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))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
                     onClose();
                     setPreviewUrl(null);
                     setPreviewTitle(null);

package/dist/Components/FileUploader/FileUploader.js

@@ -8,10 +8,9 @@ const Toaster_1 = require("../Toaster/Toaster");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
-    var _a, _b;
     const { showToast } = (0, Toaster_1.useToaster)();
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, (_b = (_a = colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
+    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.backgroundColor.main);
     const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
     const [, setIsDragOver] = (0, react_1.useState)(false);
     // const [error, setError] = useState<string | null>(null);
@@ -72,9 +71,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.medium, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: (_e = (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[600]) !== null && _e !== void 0 ? _e : (_f = colors.text) === null || _f === void 0 ? void 0 : _f[600], children: (_g = file.name.split(".").pop()) === null || _g === void 0 ? void 0 : _g.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: (_j = (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = colors.text) === null || _k === void 0 ? void 0 : _k[600], children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
-                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: colors.boxborder[500], borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: colors.gray[200], 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() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 exports.default = FileUploader;