infinity-ui-elements 1.8.13 → 1.8.15

package/dist/index.js

@@ -82,6 +82,14 @@ const iconRegistry = {
     close: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M18 6L6 18M6 6L18 18" stroke="#081416" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`,
+    upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19ZM13 9V16H11V9H6L12 3L18 9H13Z" fill="#081416"/>
+</svg>
+`,
+    file: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1111 21H4.88889C4.39797 21 4 20.5971 4 20.1V3.9C4 3.40295 4.39797 3 4.88889 3H19.1111C19.602 3 20 3.40295 20 3.9V20.1C20 20.5971 19.602 21 19.1111 21ZM18.2222 19.2V4.8H5.77778V19.2H18.2222ZM8.44444 9.3H15.5556V11.1H8.44444V9.3ZM8.44444 12.9H15.5556V14.7H8.44444V12.9Z" fill="#081416"/>
+</svg>
+`,
 };
 const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
     const svgContent = iconRegistry[name];
@@ -3105,7 +3113,7 @@ const Radio = React__namespace.forwardRef(({ label, errorText, size = "medium",
 });
 Radio.displayName = "Radio";
 
-const textFieldVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
+const textFieldVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -3197,7 +3205,7 @@ const TextField = React__namespace.forwardRef(({ label, helperText, errorText, s
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsxRuntime.jsx("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled font-display", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsxRuntime.jsx("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -4236,6 +4244,357 @@ const TextArea = React__namespace.forwardRef(({ label, helperText, errorText, su
 });
 TextArea.displayName = "TextArea";
 
+const uploadBoxVariants = classVarianceAuthority.cva("relative flex flex-col items-center justify-center border-2 border-dashed rounded-large transition-all font-display", {
+    variants: {
+        size: {
+            small: "min-h-[120px] p-4 gap-2",
+            medium: "min-h-[160px] p-6 gap-3",
+            large: "min-h-[200px] p-8 gap-4",
+        },
+        validationState: {
+            none: `
+          border-action-outline-neutral-faded 
+          hover:border-action-outline-primary-hover 
+          focus-within:border-action-outline-primary-hover 
+          focus-within:ring-2 
+          ring-action-outline-primary-faded-hover
+          bg-surface-fill-neutral-intense`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover
+          bg-surface-fill-neutral-intense`,
+            negative: `
+          border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover
+          bg-surface-fill-neutral-intense`,
+        },
+        isDisabled: {
+            true: `
+          border-[var(--border-width-thinner)]
+          hover:border-action-outline-neutral-disabled
+          border-action-outline-neutral-disabled
+          bg-surface-fill-neutral-intense 
+          cursor-not-allowed 
+          opacity-60`,
+            false: "cursor-pointer",
+        },
+        isDragging: {
+            true: "border-action-outline-primary-hover bg-action-fill-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+        isDragging: false,
+    },
+});
+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 isImageFile = (file, url) => {
+    if (file) {
+        return file.type.startsWith("image/");
+    }
+    if (url) {
+        const lowerUrl = url.toLowerCase();
+        return (lowerUrl.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)(\?.*)?$/i) !== null ||
+            url.match(/data:image\//) !== null);
+    }
+    return false;
+};
+const isPdfFile = (file, url) => {
+    if (file) {
+        return file.type === "application/pdf";
+    }
+    if (url) {
+        return url.toLowerCase().match(/\.pdf(\?.*)?$/i) !== null;
+    }
+    return false;
+};
+const getFileNameFromUrl = (url) => {
+    try {
+        const urlObj = new URL(url);
+        const pathname = urlObj.pathname;
+        const fileName = pathname.split("/").pop() || "file";
+        return decodeURIComponent(fileName);
+    }
+    catch {
+        // If URL parsing fails, try to extract from the string
+        const parts = url.split("/");
+        const lastPart = parts[parts.length - 1] || "file";
+        return decodeURIComponent(lastPart.split("?")[0]);
+    }
+};
+// Component to handle image preview with error fallback
+const ImagePreview = ({ src, alt }) => {
+    const [hasError, setHasError] = React__namespace.useState(false);
+    if (hasError) {
+        return (jsxRuntime.jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium  flex items-center justify-center bg-surface-fill-neutral-subtle", children: jsxRuntime.jsx(Icon, { name: "file", size: 24, className: "text-surface-ink-neutral-subtle" }) }));
+    }
+    return (jsxRuntime.jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium overflow-hidden ", children: jsxRuntime.jsx("img", { src: src, alt: alt, className: "w-full h-full object-cover", onError: () => setHasError(true) }) }));
+};
+const UploadBox = React__namespace.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, accept, multiple = false, maxSize, maxFiles, value, onChange, onFileRemove, containerClassName, labelClassName, uploadAreaClassName, previewClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, uploadText, dragText, showPreview = true, className, ...props }, ref) => {
+    const fileInputRef = React__namespace.useRef(null);
+    const [isDragging, setIsDragging] = React__namespace.useState(false);
+    const [uploadedFiles, setUploadedFiles] = React__namespace.useState([]);
+    const [error, setError] = React__namespace.useState(null);
+    // Initialize uploaded files from value prop
+    React__namespace.useEffect(() => {
+        if (value) {
+            const filesArray = Array.isArray(value) ? value : [value];
+            const processedFiles = filesArray.map((item) => {
+                if (item instanceof File) {
+                    const uploadedFile = {
+                        file: item,
+                        name: item.name,
+                        size: item.size,
+                        id: `${item.name}-${item.size}-${item.lastModified}`,
+                    };
+                    if (isImageFile(item) && showPreview) {
+                        uploadedFile.preview = URL.createObjectURL(item);
+                    }
+                    return uploadedFile;
+                }
+                else if (typeof item === "string") {
+                    // It's a URL string
+                    const uploadedFile = {
+                        url: item,
+                        name: getFileNameFromUrl(item),
+                        id: `url-${item}-${Date.now()}`,
+                    };
+                    // Always set preview for URLs when showPreview is true
+                    // The rendering logic will determine if it's an image or PDF
+                    if (showPreview) {
+                        uploadedFile.preview = item;
+                    }
+                    return uploadedFile;
+                }
+                else {
+                    // It's already an UploadedFile
+                    const uploadedFile = item;
+                    // If it has a URL but no preview set, set it
+                    if (uploadedFile.url && !uploadedFile.preview && showPreview) {
+                        uploadedFile.preview = uploadedFile.url;
+                    }
+                    return uploadedFile;
+                }
+            });
+            setUploadedFiles(processedFiles);
+        }
+        else {
+            setUploadedFiles([]);
+        }
+    }, [value, showPreview]);
+    // Cleanup preview URLs (only revoke object URLs, not regular URLs)
+    React__namespace.useEffect(() => {
+        return () => {
+            uploadedFiles.forEach((uploadedFile) => {
+                // Only revoke object URLs (created with URL.createObjectURL)
+                // Regular URLs (http/https) should not be revoked
+                if (uploadedFile.preview &&
+                    uploadedFile.preview.startsWith("blob:")) {
+                    URL.revokeObjectURL(uploadedFile.preview);
+                }
+            });
+        };
+    }, [uploadedFiles]);
+    const processFiles = (files) => {
+        const fileArray = Array.from(files);
+        const validFiles = [];
+        let currentError = null;
+        // Check max files limit
+        if (maxFiles && uploadedFiles.length + fileArray.length > maxFiles) {
+            currentError = `Maximum ${maxFiles} file(s) allowed`;
+            setError(currentError);
+            return validFiles;
+        }
+        fileArray.forEach((file) => {
+            // Check file size
+            if (maxSize && file.size > maxSize) {
+                currentError = `File "${file.name}" exceeds maximum size of ${formatFileSize(maxSize)}`;
+                setError(currentError);
+                return;
+            }
+            // Check if file type is accepted
+            if (accept) {
+                const acceptedTypes = accept.split(",").map((type) => type.trim());
+                const isAccepted = acceptedTypes.some((type) => {
+                    if (type.startsWith(".")) {
+                        return file.name.toLowerCase().endsWith(type.toLowerCase());
+                    }
+                    if (type.includes("/*")) {
+                        const baseType = type.split("/")[0];
+                        return file.type.startsWith(baseType + "/");
+                    }
+                    return file.type === type;
+                });
+                if (!isAccepted) {
+                    currentError = `File type "${file.type}" is not accepted`;
+                    setError(currentError);
+                    return;
+                }
+            }
+            validFiles.push(file);
+        });
+        if (currentError) {
+            setError(currentError);
+        }
+        else {
+            setError(null);
+        }
+        return validFiles;
+    };
+    const handleFiles = (files) => {
+        if (files.length === 0)
+            return;
+        const newUploadedFiles = files.map((file) => {
+            const uploadedFile = {
+                file,
+                id: `${file.name}-${file.size}-${file.lastModified}-${Date.now()}`,
+            };
+            if (isImageFile(file) && showPreview) {
+                uploadedFile.preview = URL.createObjectURL(file);
+            }
+            return uploadedFile;
+        });
+        const updatedFiles = multiple
+            ? [...uploadedFiles, ...newUploadedFiles]
+            : newUploadedFiles;
+        setUploadedFiles(updatedFiles);
+        // Call onChange with File objects only (filter out URL-only items)
+        if (onChange) {
+            const filesToReturn = updatedFiles
+                .map((uf) => uf.file)
+                .filter((file) => file !== undefined);
+            onChange(multiple ? filesToReturn : filesToReturn[0] || null);
+        }
+    };
+    const handleFileInputChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const validFiles = processFiles(e.target.files);
+            if (validFiles.length > 0) {
+                handleFiles(validFiles);
+            }
+            // Reset input value to allow selecting the same file again
+            e.target.value = "";
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isDisabled) {
+            setIsDragging(true);
+        }
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (isDisabled)
+            return;
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            const validFiles = processFiles(e.dataTransfer.files);
+            if (validFiles.length > 0) {
+                handleFiles(validFiles);
+            }
+        }
+    };
+    const handleClick = () => {
+        if (!isDisabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleRemoveFile = (e, uploadedFile) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        // Revoke preview URL if exists
+        if (uploadedFile.preview) {
+            URL.revokeObjectURL(uploadedFile.preview);
+        }
+        const updatedFiles = uploadedFiles.filter((f) => f.id !== uploadedFile.id);
+        setUploadedFiles(updatedFiles);
+        if (onFileRemove) {
+            onFileRemove(uploadedFile);
+        }
+        if (onChange) {
+            // Only return File objects (filter out URL-only items)
+            const filesToReturn = updatedFiles
+                .map((uf) => uf.file)
+                .filter((file) => file !== undefined);
+            onChange(multiple ? filesToReturn : filesToReturn[0] || null);
+        }
+    };
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText || error;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            iconSize: 16,
+            textSize: "text-body-small-medium",
+        },
+        medium: {
+            gap: "gap-2",
+            iconSize: 16,
+            textSize: "text-body-small-medium",
+        },
+        large: {
+            gap: "gap-3",
+            iconSize: 16,
+            textSize: "text-body-small-medium",
+        },
+    };
+    const config = sizeConfig[size];
+    const defaultUploadText = "Click to upload or drag and drop";
+    const defaultDragText = "Drop files here";
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full flex flex-col", config.gap, containerClassName), ...props, children: [label && (jsxRuntime.jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, className: "mb-2", labelClassName: labelClassName })), jsxRuntime.jsxs("div", { className: cn(uploadBoxVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                    isDragging,
+                }), uploadAreaClassName, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, disabled: isDisabled, onChange: handleFileInputChange, className: "hidden", "aria-label": label || "File upload" }), uploadedFiles.length === 0 ? (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center", children: [jsxRuntime.jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-surface-fill-neutral-subtle", children: jsxRuntime.jsx(Icon, { name: "upload", size: config.iconSize }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx(Text, { variant: "body", size: "small", weight: "medium", color: isDisabled ? "disabled" : "default", children: isDragging
+                                            ? dragText || defaultDragText
+                                            : uploadText || defaultUploadText }), accept && (jsxRuntime.jsxs(Text, { variant: "caption", size: "small", color: isDisabled ? "disabled" : "muted", children: ["Accepted: ", accept] })), maxSize && (jsxRuntime.jsxs(Text, { variant: "caption", size: "small", color: isDisabled ? "disabled" : "muted", children: ["Max size: ", formatFileSize(maxSize)] }))] })] })) : (jsxRuntime.jsxs("div", { className: cn("w-full flex flex-col gap-3", previewClassName), children: [uploadedFiles.map((uploadedFile) => {
+                                const { file, url, preview, name, size, id } = uploadedFile;
+                                const fileName = name ||
+                                    file?.name ||
+                                    (url ? getFileNameFromUrl(url) : "Unknown file");
+                                const fileSize = size || file?.size;
+                                const canPreview = showPreview && preview;
+                                const isImage = isImageFile(file, url);
+                                const isPdf = isPdfFile(file, url);
+                                // For URLs, try to show as image if not explicitly a PDF
+                                // If it's a URL without extension, assume it might be an image
+                                // Always try to show URLs as images unless they're explicitly PDFs
+                                const shouldShowAsImage = canPreview && preview && (isImage || (url && !isPdf));
+                                return (jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-3 border border-surface-outline-neutral-muted rounded-large bg-surface-fill-neutral-intense", children: [shouldShowAsImage ? (jsxRuntime.jsx(ImagePreview, { src: preview, alt: fileName })) : canPreview && isPdf ? (jsxRuntime.jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium border border-action-outline-neutral-faded flex items-center justify-center bg-surface-fill-neutral-subtle", children: jsxRuntime.jsx(Icon, { name: "file", size: 24, className: "text-surface-ink-neutral-subtle" }) })) : (jsxRuntime.jsx("div", { className: "shrink-0 w-16 h-16 rounded-medium border border-action-outline-neutral-faded flex items-center justify-center bg-surface-fill-neutral-subtle", children: jsxRuntime.jsx(Icon, { name: "file", size: 24, className: "text-surface-ink-neutral-subtle" }) })), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: jsxRuntime.jsx(Text, { variant: "body", size: "small", weight: "medium", color: isDisabled ? "disabled" : "default", as: "span", className: "truncate", title: fileName, children: fileName }) }), fileSize !== undefined && (jsxRuntime.jsx(Text, { variant: "caption", size: "small", color: isDisabled ? "disabled" : "muted", as: "span", children: formatFileSize(fileSize) }))] }), !isDisabled && (jsxRuntime.jsx(IconButton, { icon: "close", size: "xsmall", onClick: (e) => handleRemoveFile(e, uploadedFile), "aria-label": `Remove ${fileName}` }))] }, id));
+                            }), multiple && !isDisabled && (jsxRuntime.jsx(Button, { variant: "tertiary", color: "primary", size: "small", onClick: handleClick, leadingIcon: jsxRuntime.jsx(Icon, { name: "add", size: 16 }), className: "mt-2 w-fit", children: "Add more files" }))] }))] }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText || undefined, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+UploadBox.displayName = "UploadBox";
+
 exports.Alert = Alert;
 exports.Amount = Amount;
 exports.Avatar = Avatar;
@@ -4275,6 +4634,7 @@ exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Tooltip = Tooltip;
+exports.UploadBox = UploadBox;
 exports.alertVariants = alertVariants;
 exports.avatarVariants = avatarVariants;
 exports.badgeVariants = badgeVariants;
@@ -4302,4 +4662,5 @@ exports.tableVariants = tableVariants;
 exports.textAreaVariants = textAreaVariants;
 exports.textFieldVariants = textFieldVariants;
 exports.tooltipVariants = tooltipVariants;
+exports.uploadBoxVariants = uploadBoxVariants;
 //# sourceMappingURL=index.js.map