@techsio/ui-kit 0.41.2 → 0.43.0

package/dist/molecules/file-upload.js

@@ -0,0 +1,369 @@
+import { jsx } from "react/jsx-runtime";
+import { connect, machine } from "@zag-js/file-upload";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { Image } from "../atoms/image.js";
+import { Label } from "../atoms/label.js";
+import { tv } from "../utils.js";
+const fileUploadStyles = tv({
+    slots: {
+        root: "flex w-full flex-col items-start gap-file-upload-root",
+        label: [
+            "font-file-upload-label text-file-upload-label text-file-upload-label-fg",
+            "data-disabled:text-file-upload-label-disabled-fg"
+        ],
+        dropzone: [
+            "flex min-h-file-upload-dropzone-min-height w-full cursor-pointer flex-col items-center justify-center gap-file-upload-dropzone",
+            "file-upload-dropzone-border-dashed file-upload-dropzone-border-width rounded-file-upload-dropzone border-file-upload-dropzone-border bg-file-upload-dropzone-bg p-file-upload-dropzone",
+            "transition-colors hover:bg-file-upload-dropzone-hover-bg motion-reduce:transition-none",
+            "focus-visible:file-upload-focus",
+            "data-dragging:file-upload-dropzone-border-solid data-dragging:border-file-upload-dropzone-dragging-border data-dragging:bg-file-upload-dropzone-dragging-bg",
+            "data-invalid:border-file-upload-dropzone-invalid-border",
+            "data-disabled:cursor-not-allowed data-disabled:border-file-upload-dropzone-disabled-border data-disabled:bg-file-upload-dropzone-disabled-bg",
+            "data-readonly:cursor-default"
+        ],
+        trigger: "",
+        itemGroup: "flex w-full flex-col gap-file-upload-item-group empty:hidden",
+        item: [
+            "flex w-full items-center gap-file-upload-item",
+            "file-upload-item-border-width rounded-file-upload-item border-file-upload-item-border bg-file-upload-item-bg p-file-upload-item text-file-upload-item",
+            "data-[type=rejected]:border-file-upload-item-rejected-border data-[type=rejected]:bg-file-upload-item-rejected-bg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemPreview: [
+            "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-hidden rounded-file-upload-item-preview text-file-upload-item-preview-fg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemPreviewImage: "size-full object-cover",
+        itemName: [
+            "min-w-0 flex-1 truncate font-file-upload-item-name text-file-upload-item-name-fg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemSizeText: [
+            "text-file-upload-item-size text-file-upload-item-size-fg",
+            "data-disabled:text-file-upload-item-disabled-fg"
+        ],
+        itemDeleteTrigger: "",
+        clearTrigger: ""
+    }
+});
+const FileUploadContext = /*#__PURE__*/ createContext(null);
+function useFileUploadContext() {
+    const context = useContext(FileUploadContext);
+    if (!context) throw new Error("FileUpload components must be used within FileUpload.Root");
+    return context;
+}
+const FileUploadItemGroupContext = /*#__PURE__*/ createContext(null);
+function useFileUploadItemGroupContext() {
+    const context = useContext(FileUploadItemGroupContext);
+    if (!context) throw new Error("FileUpload.Item must be used within FileUpload.ItemGroup");
+    return context;
+}
+const FileUploadItemContext = /*#__PURE__*/ createContext(null);
+function useFileUploadItemContext() {
+    const context = useContext(FileUploadItemContext);
+    if (!context) throw new Error("FileUpload item components must be used within FileUpload.Item");
+    return context;
+}
+function FileUpload({ accept, acceptedFiles, allowDrop, capture, children, className, defaultAcceptedFiles, dir = "ltr", directory, disabled, getRootNode, id, ids, invalid, locale, maxFileSize, maxFiles, minFileSize, name, onFileAccept, onFileChange, onFileReject, preventDocumentDrop, readOnly, ref, required, transformFiles, translations, validate, ...props }) {
+    const generatedId = useId();
+    const service = useMachine(machine, {
+        accept,
+        acceptedFiles,
+        allowDrop,
+        capture,
+        defaultAcceptedFiles,
+        dir,
+        directory,
+        disabled,
+        getRootNode,
+        id: id ?? generatedId,
+        ids,
+        invalid,
+        locale,
+        maxFileSize,
+        maxFiles,
+        minFileSize,
+        name,
+        onFileAccept,
+        onFileChange,
+        onFileReject,
+        preventDocumentDrop,
+        readOnly,
+        required,
+        transformFiles,
+        translations,
+        validate
+    });
+    const api = connect(service, normalizeProps);
+    const styles = fileUploadStyles();
+    const rootProps = mergeProps(props, api.getRootProps());
+    return /*#__PURE__*/ jsx(FileUploadContext.Provider, {
+        value: {
+            api,
+            required,
+            styles
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: styles.root({
+                className
+            }),
+            ref: ref,
+            ...rootProps,
+            children: children
+        })
+    });
+}
+FileUpload.Context = function({ children }) {
+    const { api } = useFileUploadContext();
+    return children(api);
+};
+FileUpload.Label = function({ children, className, ref, ...props }) {
+    const { api, required, styles } = useFileUploadContext();
+    const labelProps = mergeProps({
+        ref
+    }, props, api.getLabelProps());
+    return /*#__PURE__*/ jsx(Label, {
+        className: styles.label({
+            className
+        }),
+        required: required,
+        size: "current",
+        ...labelProps,
+        children: children
+    });
+};
+FileUpload.Dropzone = function({ children, className, disableClick, onClick, onKeyDown, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { onClick: onMachineClick, onKeyDown: onMachineKeyDown, ...machineDropzoneProps } = api.getDropzoneProps({
+        disableClick
+    });
+    const dropzoneProps = mergeProps(props, machineDropzoneProps, {
+        onClick (event) {
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        onKeyDown (event) {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented) onMachineKeyDown?.(event);
+        }
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.dropzone({
+            className
+        }),
+        ref: ref,
+        ...dropzoneProps,
+        children: children
+    });
+};
+FileUpload.HiddenInput = function({ ref, ...props }) {
+    const { api } = useFileUploadContext();
+    const inputProps = mergeProps(props, api.getHiddenInputProps());
+    return /*#__PURE__*/ jsx("input", {
+        ref: ref,
+        ...inputProps
+    });
+};
+FileUpload.Trigger = function({ children, className, disabled, icon = "token-icon-file-upload-trigger", onClick, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineTriggerProps } = api.getTriggerProps();
+    const triggerProps = mergeProps(props, machineTriggerProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(Button, {
+        className: styles.trigger({
+            className
+        }),
+        disabled: isDisabled,
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: "md",
+        theme: "outlined",
+        type: "button",
+        variant: "primary",
+        ...triggerProps,
+        children: children
+    });
+};
+FileUpload.ItemGroup = function({ children, className, ref, type = "accepted", ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const itemGroupProps = mergeProps(props, api.getItemGroupProps({
+        type
+    }));
+    return /*#__PURE__*/ jsx(FileUploadItemGroupContext.Provider, {
+        value: {
+            type
+        },
+        children: /*#__PURE__*/ jsx("ul", {
+            className: styles.itemGroup({
+                className
+            }),
+            ref: ref,
+            ...itemGroupProps,
+            children: children
+        })
+    });
+};
+FileUpload.Item = function({ children, className, file, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { type } = useFileUploadItemGroupContext();
+    const itemProps = mergeProps(props, api.getItemProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx(FileUploadItemContext.Provider, {
+        value: {
+            file,
+            type
+        },
+        children: /*#__PURE__*/ jsx("li", {
+            className: styles.item({
+                className
+            }),
+            ref: ref,
+            ...itemProps,
+            children: children
+        })
+    });
+};
+FileUpload.ItemPreview = function({ children, className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const previewProps = mergeProps(props, api.getItemPreviewProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.itemPreview({
+            className
+        }),
+        ref: ref,
+        ...previewProps,
+        children: children ?? /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-file-upload-preview",
+            size: "lg"
+        })
+    });
+};
+FileUpload.ItemPreviewImage = function({ className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const apiRef = useRef(api);
+    const [url, setUrl] = useState();
+    apiRef.current = api;
+    useEffect(()=>{
+        setUrl(void 0);
+        return apiRef.current.createFileUrl(file, setUrl);
+    }, [
+        file
+    ]);
+    if (!url) return null;
+    const imageProps = mergeProps({
+        ref
+    }, props, api.getItemPreviewImageProps({
+        file,
+        type,
+        url
+    }));
+    const { alt, src, ...imageElementProps } = imageProps;
+    return /*#__PURE__*/ jsx(Image, {
+        alt: alt ?? file.name,
+        className: styles.itemPreviewImage({
+            className
+        }),
+        size: "custom",
+        src: src ?? url,
+        ...imageElementProps
+    });
+};
+FileUpload.ItemName = function({ children, className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const nameProps = mergeProps(props, api.getItemNameProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemName({
+            className
+        }),
+        ref: ref,
+        ...nameProps,
+        children: children ?? file.name
+    });
+};
+FileUpload.ItemSizeText = function({ children, className, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const sizeTextProps = mergeProps(props, api.getItemSizeTextProps({
+        file,
+        type
+    }));
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemSizeText({
+            className
+        }),
+        ref: ref,
+        ...sizeTextProps,
+        children: children ?? api.getFileSize(file)
+    });
+};
+FileUpload.ItemDeleteTrigger = function({ className, disabled, icon = "token-icon-file-upload-delete", onClick, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { file, type } = useFileUploadItemContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineDeleteProps } = api.getItemDeleteTriggerProps({
+        file,
+        type
+    });
+    const deleteProps = mergeProps(props, machineDeleteProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        className: styles.itemDeleteTrigger({
+            className
+        }),
+        disabled: isDisabled,
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: "md",
+        tone: "neutral",
+        type: "button",
+        ...deleteProps
+    });
+};
+FileUpload.ClearTrigger = function({ "aria-label": ariaLabel = "Clear files", className, disabled, icon = "token-icon-file-upload-clear", onClick, ref, ...props }) {
+    const { api, styles } = useFileUploadContext();
+    const { disabled: machineDisabled, onClick: onMachineClick, ...machineClearProps } = api.getClearTriggerProps();
+    const clearProps = mergeProps(props, machineClearProps);
+    const isDisabled = Boolean(disabled || machineDisabled);
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        "aria-label": ariaLabel,
+        className: styles.clearTrigger({
+            className
+        }),
+        disabled: isDisabled,
+        icon: icon,
+        onClick: (event)=>{
+            onClick?.(event);
+            if (!event.defaultPrevented) onMachineClick?.(event);
+        },
+        ref: ref,
+        size: "md",
+        tone: "neutral",
+        type: "button",
+        ...clearProps
+    });
+};
+FileUpload.Root = FileUpload;
+FileUpload.displayName = "FileUpload";
+export { FileUpload };