infinity-ui-elements 1.9.28 → 1.13.0

package/dist/index.js

@@ -3334,6 +3334,188 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
 });
 Dropdown.displayName = "Dropdown";
 
+const fileInputVariants = classVarianceAuthority.cva("relative flex items-center gap-3 border rounded-large transition-all font-functional font-size-100 leading-100", {
+    variants: {
+        size: {
+            small: "h-[28px] px-3 text-xs gap-2",
+            medium: "h-[36px] px-4 text-sm gap-2",
+            large: "h-[44px] px-5 text-base gap-3",
+        },
+        validationState: {
+            none: `
+        border-action-outline-neutral-faded 
+        focus-within:border-action-outline-primary-default 
+        focus-within:bg-white!
+        focus-within:ring-2 
+        ring-surface-outline-primary-muted`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover`,
+            negative: `border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover`,
+        },
+        isDisabled: {
+            true: `
+        border
+        border-action-outline-neutral-disabled
+        hover:border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense 
+        hover:bg-surface-fill-neutral-intense 
+        cursor-not-allowed`,
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+    },
+});
+const formatFileSize$1 = (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 FileInput = React__namespace.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, accept, multiple = false, maxSize, value, onChange, containerClassName, labelClassName, inputClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, buttonText = "Choose File", placeholderText = "No file chosen", showClearButton = true, onClear, className, ...props }, ref) => {
+    const fileInputRef = React__namespace.useRef(null);
+    const [selectedFiles, setSelectedFiles] = React__namespace.useState([]);
+    const [error, setError] = React__namespace.useState(null);
+    // Initialize from value prop
+    React__namespace.useEffect(() => {
+        if (value) {
+            const filesArray = Array.isArray(value) ? value : [value];
+            setSelectedFiles(filesArray);
+        }
+        else {
+            setSelectedFiles([]);
+        }
+    }, [value]);
+    const processFiles = (files) => {
+        const fileArray = Array.from(files);
+        const validFiles = [];
+        let currentError = null;
+        fileArray.forEach((file) => {
+            // Check file size
+            if (maxSize && file.size > maxSize) {
+                currentError = `File "${file.name}" exceeds maximum size of ${formatFileSize$1(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 handleFileInputChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const validFiles = processFiles(e.target.files);
+            if (validFiles.length > 0) {
+                const newFiles = multiple
+                    ? [...selectedFiles, ...validFiles]
+                    : validFiles;
+                setSelectedFiles(newFiles);
+                if (onChange) {
+                    onChange(multiple ? newFiles : newFiles[0] || null);
+                }
+            }
+            // Reset input value to allow selecting the same file again
+            e.target.value = "";
+        }
+    };
+    const handleButtonClick = () => {
+        if (!isDisabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleClear = () => {
+        if (isDisabled)
+            return;
+        setSelectedFiles([]);
+        setError(null);
+        // Clear the file input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+        if (onClear) {
+            onClear();
+        }
+        if (onChange) {
+            onChange(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",
+            buttonSize: "xsmall",
+        },
+        medium: {
+            gap: "gap-2",
+            buttonSize: "small",
+        },
+        large: {
+            gap: "gap-3",
+            buttonSize: "small",
+        },
+    };
+    const config = sizeConfig[size];
+    const getDisplayText = () => {
+        if (selectedFiles.length === 0) {
+            return placeholderText;
+        }
+        if (selectedFiles.length === 1) {
+            return selectedFiles[0].name;
+        }
+        return `${selectedFiles.length} file(s) selected`;
+    };
+    const hasFiles = selectedFiles.length > 0;
+    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(fileInputVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), className), children: [jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, disabled: isDisabled, onChange: handleFileInputChange, className: "hidden", "aria-label": label || "File upload" }), jsxRuntime.jsx(Link, { type: "action", color: "primary", size: config.buttonSize, onClick: handleButtonClick, isDisabled: isDisabled, className: "shrink-0", children: buttonText }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(Text, { variant: "body", size: "small", color: isDisabled ? "disabled" : "muted", className: "truncate", title: getDisplayText(), children: getDisplayText() }) }), showClearButton && hasFiles && !isDisabled && (jsxRuntime.jsx(IconButton, { icon: "close", size: "xsmall", onClick: handleClear, "aria-label": "Clear selected files", className: "shrink-0" }))] }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText || undefined, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+FileInput.displayName = "FileInput";
+
 const Modal = React__namespace.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", size = "medium", showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
     const modalRef = React__namespace.useRef(null);
     const contentRef = ref || modalRef;
@@ -6190,6 +6372,7 @@ exports.DateRangePicker = DateRangePicker;
 exports.Divider = Divider;
 exports.Dropdown = Dropdown;
 exports.DropdownMenu = DropdownMenu;
+exports.FileInput = FileInput;
 exports.FormFooter = FormFooter;
 exports.FormHeader = FormHeader;
 exports.Icon = Icon;
@@ -6232,6 +6415,7 @@ exports.counterVariants = counterVariants;
 exports.datePickerVariants = datePickerVariants;
 exports.dateRangePickerVariants = dateRangePickerVariants;
 exports.dropdownVariants = dropdownVariants;
+exports.fileInputVariants = fileInputVariants;
 exports.getAvailableIcons = getAvailableIcons;
 exports.hasIcon = hasIcon;
 exports.iconButtonVariants = iconButtonVariants;