doom-design-system 0.3.3 → 0.4.0

package/README.md

@@ -1,5 +1,9 @@
 # Doom Design System
 
+[![Doom CI](https://github.com/ornelasEduardo/doom/actions/workflows/ci.yml/badge.svg)](https://github.com/ornelasEduardo/doom/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/doom-design-system.svg)](https://www.npmjs.com/package/doom-design-system)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 A modern, premium, neubrutalist and comic book inspired design system built with React and SASS Modules.
 
 ## Features
@@ -34,11 +38,11 @@ npm install lucide-react
 Wrap your application with the `DesignSystemProvider` to ensure all styles and themes are applied correctly. It injects the necessary global CSS and theme variables.
 
 ```tsx
-import { DesignSystemProvider } from 'doom-design-system';
-import { Montserrat } from 'next/font/google';
+import { DesignSystemProvider } from "doom-design-system";
+import { Montserrat } from "next/font/google";
 
 // Optional: Use a custom google font
-const montserrat = Montserrat({ subsets: ['latin'] });
+const montserrat = Montserrat({ subsets: ["latin"] });
 
 export default function RootLayout({ children }) {
   return (
@@ -56,7 +60,7 @@ export default function RootLayout({ children }) {
 Import and use components in your application. They are now fully tree-shakeable and lightweight.
 
 ```tsx
-import { Button, Card, Text, Link } from 'doom-design-system';
+import { Button, Card, Text, Link } from "doom-design-system";
 
 function MyComponent() {
   return (
@@ -65,7 +69,7 @@ function MyComponent() {
       <p>
         Check out this <Link href="#">awesome link</Link>.
       </p>
-      <Button variant="primary" onClick={() => alert('Boom!')}>
+      <Button variant="primary" onClick={() => alert("Boom!")}>
         Click Me
       </Button>
     </Card>
@@ -78,7 +82,7 @@ function MyComponent() {
 The Design System uses CSS Variables for theming. You can control the theme using the `DesignSystemProvider`.
 
 ```tsx
-<DesignSystemProvider initialTheme="doom" >
+<DesignSystemProvider initialTheme="doom">
   {/* The entire app will be themed automatically */}
 </DesignSystemProvider>
 ```

package/dist/components/Avatar/Avatar.js

@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import clsx from "clsx";
 import styles from "./Avatar.module.css";
+import { Image } from "../Image/Image.js";
 export function Avatar({ src, alt = "Avatar", fallback, size = "md", shape = "square", className, }) {
     const [hasError, setHasError] = useState(false);
-    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx("img", { src: src, alt: alt, className: styles.image, onError: () => setHasError(true) })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
+    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx(Image, { src: src, alt: alt, className: styles.image, onError: () => setHasError(true), fit: "cover", rounded: false })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
 }

package/dist/components/Badge/Badge.d.ts

@@ -1,8 +1,10 @@
-import React from 'react';
-type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'secondary';
+import React from "react";
+type BadgeVariant = "primary" | "success" | "warning" | "error" | "secondary" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    size?: BadgeSize;
     children: React.ReactNode;
 }
-export declare function Badge({ variant, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ variant, size, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Badge/Badge.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Badge.module.css';
+import clsx from "clsx";
+import styles from "./Badge.module.css";
 export function Badge(_a) {
-    var { variant = 'primary', children, className } = _a, props = __rest(_a, ["variant", "children", "className"]);
-    return (_jsx("span", Object.assign({ className: clsx(styles.badge, styles[variant], className) }, props, { children: children })));
+    var { variant = "primary", size = "md", children, className } = _a, props = __rest(_a, ["variant", "size", "children", "className"]);
+    return (_jsx("span", Object.assign({ className: clsx(styles.badge, styles[variant], styles[size], className) }, props, { children: children })));
 }

package/dist/components/Badge/Badge.module.css

@@ -1,13 +1,25 @@
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.75rem;
+  justify-content: center;
   border-radius: var(--radius-pill);
-  font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   border: 2px solid var(--card-border);
   box-shadow: 2px 2px 0px 0px var(--card-border);
+  line-height: 1;
+}
+.badge.sm {
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+}
+.badge.md {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+.badge.lg {
+  padding: 0.375rem 1rem;
+  font-size: 0.875rem;
 }
 .badge.primary {
   background-color: var(--primary);
@@ -29,3 +41,9 @@
   background-color: var(--secondary);
   color: var(--secondary-foreground);
 }
+.badge.outline {
+  background-color: transparent;
+  color: var(--muted-foreground);
+  border-color: var(--border-strong);
+  box-shadow: none;
+}

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'success';
-type ButtonSize = 'sm' | 'md' | 'lg';
+import React from "react";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "outline" | "success" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/components/Button/Button.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { Spinner } from '../Spinner/index.js';
-import styles from './Button.module.css';
+import clsx from "clsx";
+import { Spinner } from "../Spinner/index.js";
+import styles from "./Button.module.css";
 export function Button(_a) {
-    var { children, variant = 'primary', size = 'md', loading = false, className, disabled } = _a, props = __rest(_a, ["children", "variant", "size", "loading", "className", "disabled"]);
+    var { children, variant = "primary", size = "md", loading = false, className, disabled } = _a, props = __rest(_a, ["children", "variant", "size", "loading", "className", "disabled"]);
     const buttonClass = clsx(styles.button, styles[variant], styles[size], loading && styles.loading, className);
-    return (_jsxs("button", Object.assign({ className: buttonClass, disabled: disabled || loading }, props, { children: [loading && (_jsx(Spinner, { size: "sm", className: styles.spinnerIcon })), children] })));
+    return (_jsxs("button", Object.assign({ className: buttonClass, disabled: disabled || loading }, props, { children: [loading && _jsx(Spinner, { size: "sm", className: styles.spinnerIcon }), children] })));
 }

package/dist/components/Button/Button.module.css

@@ -34,7 +34,14 @@
 }
 .button:disabled {
   opacity: 0.6;
-  cursor: not-allowed;
+  cursor: not-allowed !important;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+}
+.button:disabled:hover {
+  transform: none !important;
+  filter: none !important;
+}
+.button:disabled {
   transform: none;
   box-shadow: var(--shadow-hard);
 }
@@ -47,7 +54,7 @@
   color: var(--primary-foreground);
   border-color: var(--border-strong);
 }
-.primary:hover {
+.primary:hover:not(:disabled) {
   filter: brightness(1.1);
 }
 
@@ -58,7 +65,7 @@
   color: var(--secondary-foreground);
   border-color: var(--border-strong);
 }
-.secondary:hover {
+.secondary:hover:not(:disabled) {
   filter: brightness(1.1);
 }
 
@@ -69,12 +76,24 @@
   color: var(--success-foreground);
   border-color: var(--border-strong);
 }
-.success:hover {
+.success:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.danger {
+  --btn-focus-border: var(--card-border);
+  --btn-focus-shadow: #000000;
+  background-color: var(--error);
+  color: var(--error-foreground);
+  border-color: var(--border-strong);
+}
+.danger:hover:not(:disabled) {
   filter: brightness(1.1);
 }
 
 .outline {
   background-color: transparent;
+  border-color: currentColor;
 }
 
 .ghost {
@@ -82,7 +101,7 @@
   border-color: transparent;
   box-shadow: none;
 }
-.ghost:hover, .ghost:focus-visible {
+.ghost:hover:not(:disabled), .ghost:focus-visible:not(:disabled) {
   background-color: color-mix(in srgb, var(--primary), transparent 90%);
   color: var(--primary);
   transform: none;
@@ -90,6 +109,9 @@
   border-color: transparent;
   outline: none;
 }
+.ghost:disabled {
+  box-shadow: none;
+}
 .ghost:active {
   transform: scale(0.95);
   transition: none;
@@ -97,8 +119,10 @@
 
 /* Sizes */
 .sm {
-  padding: 0.25rem 0.5rem;
+  padding: 0.25rem;
   font-size: var(--text-sm);
+  min-width: 24px;
+  justify-content: center;
 }
 
 .md {

package/dist/components/Drawer/Drawer.js

@@ -33,5 +33,5 @@ export function Drawer({ isOpen, onClose, title, side = "right", children, foote
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], styles[variant], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Drawer" : undefined, children: [_jsxs("div", { className: styles.header, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[side], styles[variant], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Drawer" : undefined, children: [_jsxs("div", { className: styles.header, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "danger", size: "sm", onClick: onClose, "aria-label": "Close drawer", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
 }

package/dist/components/Drawer/Drawer.module.css

@@ -76,11 +76,6 @@
   background-color: transparent !important;
   color: var(--solid-fg);
 }
-.panel.solid .header button {
-  background-color: var(--error) !important;
-  color: var(--error-foreground) !important;
-  border-color: var(--border-strong) !important;
-}
 .panel.solid .content {
   background-color: transparent !important;
 }
@@ -97,23 +92,6 @@
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
-  /* Match Modal's Close Button Styling */
-}
-.header button {
-  background-color: var(--error) !important;
-  color: var(--error-foreground) !important;
-  border: var(--border-width) solid var(--border-strong) !important;
-  box-shadow: var(--shadow-sm) !important;
-}
-.header button:hover {
-  background-color: var(--error) !important;
-  filter: brightness(1.1);
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-sm-hover) !important;
-}
-.header button:active {
-  transform: translate(2px, 2px);
-  box-shadow: var(--shadow-sm-checked) !important;
 }
 
 .title {

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export interface FileUploadProps {
+    /** Label for the file upload */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Accepted file types (e.g., "image/*", ".pdf,.doc") */
+    accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Initial files to show */
+    defaultFiles?: File[];
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Error message */
+    errorMessage?: string;
+    /** Required field */
+    required?: boolean;
+    /** Show image previews for supported file types */
+    showPreview?: boolean;
+    /** Callback when files are selected */
+    onChange?: (files: File[]) => void;
+    /** Custom class name */
+    className?: string;
+    /** Force active/void state for debugging */
+    forceActive?: boolean;
+}
+export declare const FileUpload: React.FC<FileUploadProps>;

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,237 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useMemo, useEffect, } from "react";
+import styles from "./FileUpload.module.css";
+import { Button } from "../Button/Button.js";
+import { Text } from "../Text/Text.js";
+import { Stack, Flex, Switcher } from "../Layout/Layout.js";
+import { Badge } from "../Badge/Badge.js";
+import { Slat } from "../Slat/Slat.js";
+import { Upload, File as FileIcon, FileImage, FileVideo, FileAudio, FileCode, FileArchive, FileText, FileSpreadsheet, Asterisk, X, } from "lucide-react";
+import { Image } from "../Image/Image.js";
+import clsx from "clsx";
+var Status;
+(function (Status) {
+    Status["Disabled"] = "disabled";
+    Status["Error"] = "error";
+    Status["Void"] = "void";
+    Status["HasFiles"] = "hasFiles";
+    Status["Idle"] = "idle";
+})(Status || (Status = {}));
+export const FileUpload = ({ label, helperText, accept, maxSize, multiple = false, defaultFiles = [], disabled = false, error = false, errorMessage, required = false, showPreview = false, onChange, className = "", forceActive = false, }) => {
+    const [files, setFiles] = useState(defaultFiles);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isActive, setIsActive] = useState(false);
+    const [uploadError, setUploadError] = useState("");
+    const [previews, setPreviews] = useState({});
+    const inputRef = useRef(null);
+    const previewsRef = useRef({});
+    // Keep ref in sync for unmount cleanup
+    useEffect(() => {
+        previewsRef.current = previews;
+    }, [previews]);
+    // Clean up object URLs on unmount
+    useEffect(() => {
+        return () => {
+            Object.values(previewsRef.current).forEach((url) => URL.revokeObjectURL(url));
+        };
+    }, []);
+    const getFileIcon = (fileName) => {
+        var _a;
+        const ext = (_a = fileName.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const size = 20;
+        if (["jpg", "jpeg", "png", "gif", "svg", "webp"].includes(ext || ""))
+            return _jsx(FileImage, { size: size });
+        if (["mp4", "mov", "avi", "mkv", "webm", "flv"].includes(ext || ""))
+            return _jsx(FileVideo, { size: size });
+        if (["mp3", "wav", "ogg", "m4a", "flac"].includes(ext || ""))
+            return _jsx(FileAudio, { size: size });
+        if ([
+            "js",
+            "ts",
+            "jsx",
+            "tsx",
+            "html",
+            "css",
+            "json",
+            "py",
+            "java",
+            "cpp",
+            "c",
+            "go",
+        ].includes(ext || ""))
+            return _jsx(FileCode, { size: size });
+        if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
+            return _jsx(FileArchive, { size: size });
+        if (["pdf"].includes(ext || ""))
+            return _jsx(FileText, { size: size });
+        if (["xls", "xlsx", "csv", "ods"].includes(ext || ""))
+            return _jsx(FileSpreadsheet, { size: size });
+        return _jsx(FileIcon, { size: size });
+    };
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    const generatePreview = useCallback((file) => {
+        if (showPreview && file.type.startsWith("image/")) {
+            const url = URL.createObjectURL(file);
+            setPreviews((prev) => (Object.assign(Object.assign({}, prev), { [file.name]: url })));
+        }
+    }, [showPreview]);
+    const validateFiles = (fileList) => {
+        if (!fileList)
+            return [];
+        const validFiles = [];
+        setUploadError("");
+        Array.from(fileList).forEach((file) => {
+            if (maxSize && file.size > maxSize) {
+                setUploadError(`File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`);
+                return;
+            }
+            validFiles.push(file);
+            generatePreview(file);
+        });
+        return validFiles;
+    };
+    const handleFileChange = (event) => {
+        const validFiles = validateFiles(event.target.files);
+        if (validFiles.length > 0) {
+            const newFiles = multiple ? [...files, ...validFiles] : validFiles;
+            setFiles(newFiles);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+        }
+    };
+    const handleDragHandlers = {
+        onDragEnter: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!disabled)
+                setIsDragging(true);
+        },
+        onDragLeave: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Check if we're moving to a child element
+            if (e.currentTarget.contains(e.relatedTarget)) {
+                return;
+            }
+            setIsDragging(false);
+        },
+        onDragOver: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(false);
+            if (disabled)
+                return;
+            const validFiles = validateFiles(e.dataTransfer.files);
+            if (validFiles.length > 0) {
+                const newFiles = multiple ? [...files, ...validFiles] : validFiles;
+                setFiles(newFiles);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+            }
+        },
+    };
+    const handleRemoveFile = (index) => {
+        const fileToRemove = files[index];
+        if (fileToRemove) {
+            const key = fileToRemove.name;
+            if (previews[key]) {
+                URL.revokeObjectURL(previews[key]);
+                const newPreviews = Object.assign({}, previews);
+                delete newPreviews[key];
+                setPreviews(newPreviews);
+            }
+        }
+        const newFiles = files.filter((_, i) => i !== index);
+        setFiles(newFiles);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newFiles);
+        if (inputRef.current)
+            inputRef.current.value = "";
+    };
+    const handleClick = () => {
+        var _a;
+        if (!disabled) {
+            setIsActive(true);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            const handleFocus = () => {
+                setIsActive(false);
+                window.removeEventListener("focus", handleFocus);
+            };
+            window.addEventListener("focus", handleFocus);
+        }
+    };
+    const displayError = error && errorMessage ? errorMessage : uploadError;
+    const hasFiles = files.length > 0;
+    const isVoid = (isDragging || isActive || forceActive) && !hasFiles;
+    const status = useMemo(() => {
+        if (disabled)
+            return Status.Disabled;
+        if (displayError)
+            return Status.Error;
+        if (isVoid)
+            return Status.Void;
+        if (hasFiles)
+            return Status.HasFiles;
+        return Status.Idle;
+    }, [disabled, displayError, isVoid, hasFiles]);
+    return (_jsxs("div", Object.assign({ className: clsx(styles.window, className, {
+            [styles.void]: isVoid,
+            [styles.disabled]: disabled,
+        }) }, handleDragHandlers, { children: [_jsxs(Switcher, { threshold: "xxs", className: clsx(styles.header, {
+                    [styles.errorHeader]: status === Status.Error,
+                    [styles.disabledHeader]: disabled,
+                }), justify: "space-between", align: "center", gap: "var(--spacing-sm)", children: [_jsx("div", { className: styles.headerContent, children: _jsxs(Text, { className: styles.headerTitle, id: "upload-title", children: [label || "Upload Files", required && (_jsx("span", { className: styles.requiredMark, children: _jsx(Asterisk, { size: 14, "aria-label": "required" }) }))] }) }), _jsx(Badge, { variant: status === Status.Error
+                            ? "error"
+                            : status === Status.HasFiles
+                                ? "success"
+                                : isVoid
+                                    ? "primary"
+                                    : "secondary", role: "status", "aria-live": "polite", children: status === Status.Error
+                            ? "Error"
+                            : status === Status.HasFiles
+                                ? `${files.length} selected`
+                                : isVoid
+                                    ? "Waiting..."
+                                    : disabled
+                                        ? "Disabled"
+                                        : "Ready" })] }), _jsxs("div", { className: clsx(styles.body, {
+                    [styles.hasFiles]: hasFiles,
+                    [styles.dragging]: isDragging || forceActive,
+                    [styles.disabled]: disabled,
+                    [styles.error]: !!displayError,
+                }), children: [_jsx("div", { className: styles.starField, "aria-hidden": "true" }), _jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, disabled: disabled, className: styles.hiddenInput, "aria-label": "File upload input", "aria-required": required, "aria-invalid": !!displayError, "aria-describedby": clsx({
+                            "upload-helper": !!helperText,
+                            "upload-error": !!displayError,
+                        }) }), !hasFiles ? (_jsx("div", { className: styles.emptyState, onClick: handleClick, onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleClick();
+                            }
+                        }, role: "button", tabIndex: disabled ? -1 : 0, children: _jsxs(Stack, { gap: "var(--spacing-md)", align: "center", children: [_jsx("div", { className: styles.voidIconWrapper, "aria-hidden": "true", children: _jsx(Upload, { className: styles.icon, size: 48, strokeWidth: 2 }) }), _jsxs(Stack, { gap: "var(--spacing-xs)", align: "center", children: [_jsx(Text, { weight: "bold", className: styles.voidText, children: isDragging || isActive || forceActive
+                                                ? "Drop files now"
+                                                : "Drag and drop files" }), _jsx(Text, { variant: "small", className: styles.secondary, children: "or click to browse" })] }), helperText && (_jsx(Text, { variant: "small", className: styles.helperText, id: "upload-helper", children: helperText })), displayError && (_jsx(Text, { variant: "small", className: styles.errorText, id: "upload-error", children: displayError }))] }) })) : (_jsxs(Flex, { direction: "column", justify: "space-between", gap: "var(--spacing-md)", className: styles.fileList, children: [_jsx(Stack, { gap: "var(--spacing-sm)", children: files.map((file, index) => {
+                                    const previewUrl = previews[file.name];
+                                    return (_jsx(Slat, { label: file.name, secondaryLabel: formatFileSize(file.size), prependContent: previewUrl ? (_jsx(PreviewImage, { src: previewUrl, alt: file.name })) : (getFileIcon(file.name)), appendContent: _jsx(Button, { type: "button", variant: "danger", size: "sm", onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleRemoveFile(index);
+                                            }, className: styles.removeButton, "aria-label": `Remove ${file.name}`, children: _jsx(X, { size: 16, "aria-hidden": "true" }) }) }, `${file.name}-${index}`));
+                                }) }), multiple && (_jsx(Button, { variant: "secondary", onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleClick();
+                                }, children: "UPLOAD MORE FILES" }))] }))] })] })));
+};
+const PreviewImage = ({ src, alt }) => {
+    return (_jsx("div", { className: styles.previewWrapper, children: _jsx(Image, { src: src, alt: alt
+                .replace(/\.(jpg|jpeg|png|gif|webp|svg)$/i, "")
+                .replace(/[-_]/g, " ") || "File preview", className: styles.previewImg, fit: "cover", rounded: false }) }));
+};