uplofile 1.0.0 → 1.0.2

package/README.md

@@ -1,12 +1,8 @@
 # Uplofile
 
-[![Beta](https://img.shields.io/badge/status-beta-yellow.svg)](https://uplofile.kristofajosh.dev)
-
 **Composable file‑upload components for React.**  
 Accessible, unstyled primitives for building your own upload UI — with drag‑and‑drop, progress indicators, cancel/retry/remove actions, and an optional hidden input for classic form posts.
 
-> Heads‑up: Uplofile is currently in Beta. Expect some rough edges and occasional API tweaks. We’d love your feedback — please kick the tires and open issues!
-
 ---
 
 ## Features

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference lib="es2015.iterable" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { HTMLAttributes, PropsWithChildren, RefObject, ChangeEvent, DragEvent, ButtonHTMLAttributes } from 'react';
 
@@ -86,7 +87,7 @@ type PreviewRenderProps = {
 type Props = {
     render?: (api: PreviewRenderProps) => React.ReactNode;
 };
-declare const Preview: ({ render }: Props) => string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+declare const Preview: ({ render }: Props) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 declare const HiddenInput: ({ name }: {
     name?: string;
 }) => react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uplofile",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Composable file‑upload components for React (Beta).",
   "license": "MIT",
   "author": "Chris Josh <KristofaJosh>",
@@ -23,28 +23,19 @@
     "customizable"
   ],
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "bunchee src/index.ts --dts --external react,react-dom && pnpm run build:css",
-    "build:css": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/output.css",
+    "build": "bunchee src/index.ts --dts --external react,react-dom --format esm && sed -i '' '1i\\\n/// <reference lib=\"es2015.iterable\" />\n' dist/index.d.ts",
     "clean": "rm -rf dist",
     "prepare": "pnpm run build",
     "prepublishOnly": "pnpm run build",

package/dist/index.cjs

@@ -1,418 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-
-const uid = ()=>Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
-
-const UploaderCtx = /*#__PURE__*/ react.createContext(null);
-const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = "optimistic", onRemove, accept = "image/*", name = "images", maxCount, disabled, children })=>{
-    const [items, setItems] = react.useState([]);
-    const controllers = react.useRef(new Map());
-    const removeControllers = react.useRef(new Map());
-    const inputRef = react.useRef(null);
-    const hasHydratedInitialRef = react.useRef(false);
-    // Hydrate initial items from the server and keep them marked as done
-    react.useEffect(()=>{
-        if (hasHydratedInitialRef.current) return;
-        const arr = initial ?? [];
-        if (!Array.isArray(arr) || arr.length === 0) return;
-        const mapped = arr.map((it)=>{
-            return {
-                uid: it.uid || it.id,
-                id: it.id,
-                name: it.name,
-                url: it.url,
-                status: "done"
-            };
-        });
-        // Only hydrate if the user hasn't already added/modified items locally
-        setItems((prev)=>prev.length === 0 ? mapped : prev);
-        hasHydratedInitialRef.current = true;
-    }, [
-        initial
-    ]);
-    const hiddenInputValue = react.useMemo(()=>{
-        const done = items.filter((i)=>i.status === "done" && i.url);
-        return JSON.stringify(done.map(({ uid: _u, previewUrl: _p, file: _f, status: _s, progress: _pr, error: _e, ...rest })=>rest));
-    }, [
-        items
-    ]);
-    const emitChange = react.useCallback((next)=>{
-        setItems((prev)=>{
-            const nextState = typeof next === "function" ? next(prev) : next;
-            if (onChange) Promise.resolve(onChange(nextState)).catch(()=>{});
-            return nextState;
-        });
-    }, [
-        onChange
-    ]);
-    const startUpload = react.useCallback(async (item)=>{
-        if (!item.file) return;
-        const controller = new AbortController();
-        controllers.current.set(item.uid, controller);
-        const setProgress = (pct)=>{
-            emitChange((items)=>items.map((it)=>it.uid === item.uid ? {
-                        ...it,
-                        progress: Math.max(0, Math.min(100, pct))
-                    } : it));
-        };
-        emitChange((items)=>items.map((it)=>it.uid === item.uid ? {
-                    ...it,
-                    status: "uploading",
-                    error: undefined
-                } : it));
-        try {
-            const result = await upload(item.file, controller.signal, setProgress);
-            emitChange((items)=>items.map((it)=>{
-                    if (it.uid !== item.uid) return it;
-                    // Revoke the local objectURL preview to avoid memory leaks
-                    if (it.previewUrl && it.previewUrl.startsWith("blob:")) {
-                        try {
-                            URL.revokeObjectURL(it.previewUrl);
-                        } catch  {
-                        /*fail silently*/ }
-                    }
-                    const serverPreview = result?.preview || result.url;
-                    return {
-                        ...it,
-                        status: "done",
-                        url: result.url,
-                        id: result.id,
-                        previewUrl: serverPreview,
-                        progress: 100
-                    };
-                }));
-        } catch (err) {
-            const wasAborted = controller.signal.aborted;
-            emitChange((items)=>items.map((it)=>it.uid === item.uid ? {
-                        ...it,
-                        status: wasAborted ? "canceled" : "error",
-                        error: wasAborted ? undefined : err?.message || "Upload failed"
-                    } : it));
-        } finally{
-            controllers.current.delete(item.uid);
-        }
-    }, [
-        emitChange,
-        upload
-    ]);
-    const selectFiles = react.useCallback((files)=>{
-        if (!files || files.length === 0) return;
-        const selected = Array.from(files);
-        const remaining = maxCount ? Math.max(0, maxCount - items.filter((i)=>i.status !== "canceled").length) : undefined;
-        const toUse = typeof remaining === "number" ? selected.slice(0, remaining) : selected;
-        const newItems = toUse.map((file)=>({
-                uid: uid(),
-                name: file.name,
-                file,
-                previewUrl: URL.createObjectURL(file),
-                status: "idle",
-                progress: 0
-            }));
-        emitChange([
-            ...items,
-            ...newItems
-        ]);
-        newItems.forEach((it)=>startUpload(it));
-    }, [
-        emitChange,
-        items,
-        maxCount,
-        startUpload
-    ]);
-    const onInputChange = react.useCallback((e)=>{
-        selectFiles(e.target.files);
-        e.currentTarget.value = "";
-    }, [
-        selectFiles
-    ]);
-    const onDrop = react.useCallback((e)=>{
-        e.preventDefault();
-        if (disabled) return;
-        selectFiles(e.dataTransfer.files);
-    }, [
-        disabled,
-        selectFiles
-    ]);
-    const onDragOver = react.useCallback((e)=>e.preventDefault(), []);
-    const actions = react.useMemo(()=>({
-            cancel: (uidStr)=>{
-                const ctrl = controllers.current.get(uidStr);
-                ctrl?.abort();
-            },
-            remove: async (uidStr)=>{
-                const item = items.find((i)=>i.uid === uidStr);
-                if (!item) return;
-                // abort any in-flight upload first
-                controllers.current.get(uidStr)?.abort();
-                // If no server-side removal needed or not uploaded yet, just remove
-                if (!onRemove || item.status !== "done") {
-                    emitChange((list)=>list.filter((i)=>i.uid !== uidStr));
-                    return;
-                }
-                const ctrl = new AbortController();
-                removeControllers.current.set(uidStr, ctrl);
-                if (removeMode === "optimistic") {
-                    const prev = items;
-                    // remove from UI immediately
-                    emitChange((list)=>list.filter((i)=>i.uid !== uidStr));
-                    try {
-                        await onRemove(item, ctrl.signal);
-                    } catch  {
-                        // rollback UI if server delete fails
-                        emitChange(prev);
-                    } finally{
-                        removeControllers.current.delete(uidStr);
-                    }
-                } else {
-                    // strict: mark as removing, wait for API, then remove
-                    emitChange((list)=>list.map((it)=>it.uid === uidStr ? {
-                                ...it,
-                                status: "removing"
-                            } : it));
-                    try {
-                        await onRemove(item, ctrl.signal);
-                        emitChange((list)=>list.filter((i)=>i.uid !== uidStr));
-                    } catch  {
-                        // revert to done if delete fails
-                        emitChange((list)=>list.map((it)=>it.uid === uidStr ? {
-                                    ...it,
-                                    status: "done"
-                                } : it));
-                    } finally{
-                        removeControllers.current.delete(uidStr);
-                    }
-                }
-            },
-            retry: (uidStr)=>{
-                const item = items.find((i)=>i.uid === uidStr);
-                if (!item) return;
-                if (item.file) {
-                    void startUpload({
-                        ...item,
-                        status: "idle",
-                        error: undefined,
-                        progress: 0
-                    });
-                }
-            }
-        }), [
-        emitChange,
-        items,
-        onRemove,
-        removeMode,
-        startUpload
-    ]);
-    react.useEffect(()=>()=>{
-            items.forEach((i)=>i.previewUrl && URL.revokeObjectURL(i.previewUrl));
-            controllers.current.forEach((c)=>c.abort());
-        }, []);
-    const ctx = {
-        items,
-        disabled,
-        multiple,
-        accept,
-        actions,
-        openFileDialog: ()=>inputRef.current?.click(),
-        fileInputProps: {
-            ref: inputRef,
-            onChange: onInputChange,
-            accept,
-            multiple,
-            disabled
-        },
-        getDropzoneProps: ()=>({
-                role: "button",
-                tabIndex: 0,
-                onDrop,
-                onDragOver,
-                onKeyDown: (e)=>{
-                    if (disabled) return;
-                    if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
-                },
-                "data-disabled": disabled ? "" : undefined,
-                "data-multiple": multiple ? "" : undefined
-            }),
-        hiddenInputValue,
-        name
-    };
-    return /*#__PURE__*/ jsxRuntime.jsx(UploaderCtx.Provider, {
-        value: ctx,
-        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            "data-part": "root",
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("input", {
-                    type: "file",
-                    hidden: true,
-                    ...ctx.fileInputProps
-                }),
-                children
-            ]
-        })
-    });
-};
-
-const useUplofile = ()=>{
-    const ctx = react.useContext(UploaderCtx);
-    if (!ctx) throw new Error("useUplofile hook must be used within <Uplofile.Root>");
-    return ctx;
-};
-
-const Dropzone = ({ asChild, ...rest })=>{
-    const { getDropzoneProps } = useUplofile();
-    const Comp = asChild ? reactSlot.Slot : "div";
-    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
-        "data-part": "dropzone",
-        ...getDropzoneProps(),
-        ...rest
-    });
-};
-
-const Preview = ({ render })=>{
-    const { items, actions } = useUplofile();
-    if (render && typeof render === "function") return render({
-        items,
-        actions
-    });
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        "data-part": "preview",
-        className: "uplofile-preview",
-        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "uplofile-preview__wrapper grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",
-            children: items.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    onClick: (e)=>e.stopPropagation(),
-                    className: "uplofile-preview__item relative overflow-hidden rounded-xl border size-32",
-                    "data-state": item.status,
-                    children: [
-                        item.url || item.previewUrl ? /*#__PURE__*/ jsxRuntime.jsx("img", {
-                            src: item.url || item.previewUrl,
-                            alt: item.name,
-                            className: "uplofile-preview__image size-full object-cover"
-                        }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "uplofile-preview__no-preview flex h-32 w-full items-center justify-center text-xs text-gray-500",
-                            children: "No preview"
-                        }),
-                        item.status === "uploading" && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "uplofile-preview__progress absolute bottom-0 left-0 right-0 h-1 bg-gray-200",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: "uplofile-preview__progress-bar h-full bg-black/80",
-                                style: {
-                                    width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`
-                                }
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            className: "uplofile-preview__actions absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-2",
-                            children: [
-                                item.status === "uploading" && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                    type: "button",
-                                    className: "uplofile-preview__button uplofile-preview__button--cancel rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
-                                    onClick: ()=>actions.cancel(item.uid),
-                                    children: "Cancel"
-                                }),
-                                (item.status === "error" || item.status === "canceled") && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                    type: "button",
-                                    className: "uplofile-preview__button uplofile-preview__button--retry rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
-                                    onClick: ()=>actions.retry(item.uid),
-                                    children: "Retry"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                    type: "button",
-                                    className: "uplofile-preview__button uplofile-preview__button--remove rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
-                                    onClick: ()=>actions.remove(item.uid),
-                                    disabled: item.status === "removing",
-                                    children: item.status === "removing" ? "Removing..." : "Remove"
-                                })
-                            ]
-                        })
-                    ]
-                }, item.uid))
-        })
-    });
-};
-const HiddenInput = ({ name })=>{
-    const { hiddenInputValue, name: defaultName } = useUplofile();
-    return /*#__PURE__*/ jsxRuntime.jsx("input", {
-        type: "hidden",
-        name: name ?? defaultName,
-        value: hiddenInputValue
-    });
-};
-const Cancel = ({ uid, asChild, alwaysVisible = false, ...rest })=>{
-    const { actions, items } = useUplofile();
-    const isUploading = items.find((i)=>i.uid === uid)?.status === "uploading";
-    const Comp = asChild ? reactSlot.Slot : "button";
-    if (!isUploading && !alwaysVisible) return null;
-    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
-        onClick: (e)=>{
-            e.stopPropagation();
-            actions.cancel(uid);
-        },
-        ...rest
-    });
-};
-const Retry = ({ uid, asChild, ...rest })=>{
-    const { actions } = useUplofile();
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
-        onClick: (e)=>{
-            e.stopPropagation();
-            actions.retry(uid);
-        },
-        ...rest
-    });
-};
-const Remove = ({ uid, asChild, ...rest })=>{
-    const { actions } = useUplofile();
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
-        onClick: (e)=>{
-            e.stopPropagation();
-            actions.remove(uid);
-        },
-        ...rest
-    });
-};
-
-const Trigger = ({ asChild, children, render, ...rest })=>{
-    const { openFileDialog, disabled, items } = useUplofile();
-    const Comp = asChild ? reactSlot.Slot : "button";
-    const uploading = items.filter((i)=>i.status === "uploading");
-    const uploadingCount = uploading.length;
-    const doneCount = items.filter((i)=>i.status === "done").length;
-    const errorCount = items.filter((i)=>i.status === "error").length;
-    const totalProgress = uploadingCount ? Math.round(uploading.reduce((acc, it)=>acc + (typeof it.progress === "number" ? it.progress : 0), 0) / uploadingCount) : undefined;
-    const api = {
-        items,
-        isUploading: uploadingCount > 0,
-        uploadingCount,
-        doneCount,
-        errorCount,
-        totalProgress,
-        open: openFileDialog
-    };
-    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
-        type: asChild ? undefined : "button",
-        "aria-disabled": disabled,
-        "data-part": "trigger",
-        onClick: (e)=>{
-            if (disabled) return;
-            rest.onClick?.(e);
-            openFileDialog();
-        },
-        ...rest,
-        children: render ? render(api) : children
-    });
-};
-
-exports.Cancel = Cancel;
-exports.Dropzone = Dropzone;
-exports.HiddenInput = HiddenInput;
-exports.Preview = Preview;
-exports.Remove = Remove;
-exports.Retry = Retry;
-exports.Root = Root;
-exports.Trigger = Trigger;
-exports.useUplofile = useUplofile;

package/dist/index.d.mts

@@ -1,114 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { HTMLAttributes, PropsWithChildren, RefObject, ChangeEvent, DragEvent, ButtonHTMLAttributes } from 'react';
-
-declare const Dropzone: ({ asChild, ...rest }: {
-    asChild?: boolean;
-} & HTMLAttributes<HTMLElement>) => react_jsx_runtime.JSX.Element;
-
-type UploadStatus = "idle" | "uploading" | "done" | "error" | "canceled" | "removing";
-type UploadFileItem = {
-    uid: string;
-    id?: string;
-    name: string;
-    url?: string;
-    previewUrl?: string;
-    file?: File;
-    status: UploadStatus;
-    progress?: number;
-    error?: string;
-    data?: any;
-};
-type UploadResult = {
-    url: string;
-    id?: string;
-};
-type RootProps = PropsWithChildren<{
-    multiple?: boolean;
-    initial?: Array<Pick<UploadFileItem, "uid" | "id" | "name" | "url">>;
-    /**
-     * optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.
-     * strict: call onRemove first; only remove from UI if it succeeds.
-     */
-    removeMode?: "optimistic" | "strict";
-    name?: string;
-    maxCount?: number;
-    disabled?: boolean;
-    accept?: string;
-    onChange?: (items: UploadFileItem[]) => Promise<void> | void;
-    upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult>;
-    onRemove?: (item: UploadFileItem, signal: AbortSignal) => Promise<void | any>;
-}>;
-type ItemActions = {
-    cancel: (uid: string) => void;
-    remove: (uid: string) => void;
-    retry: (uid: string) => void;
-};
-type ImageUploaderContextValue = {
-    items: UploadFileItem[];
-    disabled?: boolean;
-    multiple: boolean;
-    accept: string;
-    actions: ItemActions;
-    openFileDialog: () => void;
-    fileInputProps: {
-        ref: RefObject<HTMLInputElement>;
-        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-        accept: string;
-        multiple: boolean;
-        disabled?: boolean;
-    };
-    getDropzoneProps: () => {
-        role: string;
-        tabIndex: number;
-        onDrop: (e: DragEvent) => void;
-        onDragOver: (e: DragEvent) => void;
-        onKeyDown: (e: KeyboardEvent) => void;
-        "data-disabled"?: string;
-        "data-multiple"?: string;
-    };
-    hiddenInputValue: string;
-    name: string;
-};
-type TriggerRenderProps = {
-    items: UploadFileItem[];
-    isUploading: boolean;
-    uploadingCount: number;
-    doneCount: number;
-    errorCount: number;
-    totalProgress?: number;
-    open: () => void;
-};
-type PreviewRenderProps = {
-    items: UploadFileItem[];
-    actions: ItemActions;
-};
-
-type Props = {
-    render?: (api: PreviewRenderProps) => React.ReactNode;
-};
-declare const Preview: ({ render }: Props) => string | number | boolean | Iterable<React.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
-declare const HiddenInput: ({ name }: {
-    name?: string;
-}) => react_jsx_runtime.JSX.Element;
-type ButtonProps = {
-    uid: string;
-    alwaysVisible?: boolean;
-    asChild?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
-declare const Cancel: ({ uid, asChild, alwaysVisible, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element | null;
-declare const Retry: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
-declare const Remove: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-declare const Root: ({ multiple, initial, onChange, upload, removeMode, onRemove, accept, name, maxCount, disabled, children, }: RootProps) => react_jsx_runtime.JSX.Element;
-
-declare const Trigger: ({ asChild, children, render, ...rest }: PropsWithChildren<{
-    asChild?: boolean;
-    render?: (api: TriggerRenderProps) => React.ReactNode;
-    children?: React.ReactNode | ((api: TriggerRenderProps) => React.ReactNode);
-} & React.HTMLAttributes<HTMLElement>>) => react_jsx_runtime.JSX.Element;
-
-declare const useUplofile: () => ImageUploaderContextValue;
-
-export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, useUplofile };
-export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult, UploadStatus };
-//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","sources":["../src/components/dropzone.tsx","../src/types.ts","../src/components/preview.tsx","../src/context.tsx","../src/components/trigger.tsx","../src/hook.ts"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { HTMLAttributes } from \"react\";\n\nimport { useUplofile } from \"../hook\";\n\nexport const Dropzone = ({\n  asChild,\n  ...rest\n}: { asChild?: boolean } & HTMLAttributes<HTMLElement>) => {\n  const { getDropzoneProps } = useUplofile();\n  const Comp: any = asChild ? Slot : \"div\";\n  return <Comp data-part=\"dropzone\" {...getDropzoneProps()} {...rest} />;\n};\n","import type {\n  ChangeEvent,\n  DragEvent,\n  PropsWithChildren,\n  RefObject,\n} from \"react\";\n\nexport type UploadStatus =\n  | \"idle\"\n  | \"uploading\"\n  | \"done\"\n  | \"error\"\n  | \"canceled\"\n  | \"removing\";\n\nexport type UploadFileItem = {\n  uid: string;\n  id?: string;\n  name: string;\n  url?: string;\n  previewUrl?: string;\n  file?: File;\n  status: UploadStatus;\n  progress?: number;\n  error?: string;\n  data?: any;\n};\n\nexport type UploadResult = { url: string; id?: string };\n\nexport type RootProps = PropsWithChildren<{\n  multiple?: boolean;\n  initial?: Array<Pick<UploadFileItem, \"uid\" | \"id\" | \"name\" | \"url\">>;\n  /**\n   * optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.\n   * strict: call onRemove first; only remove from UI if it succeeds.\n   */\n  removeMode?: \"optimistic\" | \"strict\";\n  name?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  accept?: string;\n  onChange?: (items: UploadFileItem[]) => Promise<void> | void;\n  upload: (\n    file: File,\n    signal: AbortSignal,\n    setProgress?: (pct: number) => void,\n  ) => Promise<UploadResult>;\n  onRemove?: (item: UploadFileItem, signal: AbortSignal) => Promise<void | any>;\n}>;\n\nexport type ItemActions = {\n  cancel: (uid: string) => void;\n  remove: (uid: string) => void;\n  retry: (uid: string) => void;\n};\n\nexport type ImageUploaderContextValue = {\n  items: UploadFileItem[];\n  disabled?: boolean;\n  multiple: boolean;\n  accept: string;\n  actions: ItemActions;\n  openFileDialog: () => void;\n  fileInputProps: {\n    ref: RefObject<HTMLInputElement>;\n    onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n    accept: string;\n    multiple: boolean;\n    disabled?: boolean;\n  };\n  getDropzoneProps: () => {\n    role: string;\n    tabIndex: number;\n    onDrop: (e: DragEvent) => void;\n    onDragOver: (e: DragEvent) => void;\n    onKeyDown: (e: KeyboardEvent) => void;\n    \"data-disabled\"?: string;\n    \"data-multiple\"?: string;\n  };\n  hiddenInputValue: string;\n  name: string;\n};\n\nexport type TriggerRenderProps = {\n  items: UploadFileItem[];\n  isUploading: boolean;\n  uploadingCount: number;\n  doneCount: number;\n  errorCount: number;\n  totalProgress?: number;\n  open: () => void;\n};\n\nexport type PreviewRenderProps = {\n  items: UploadFileItem[];\n  actions: ItemActions;\n};\n","import { Slot } from \"@radix-ui/react-slot\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nimport { useUplofile } from \"../hook\";\n\nimport type { PreviewRenderProps } from \"../types\";\n\ntype Props = {\n  render?: (api: PreviewRenderProps) => React.ReactNode;\n};\n\nexport const Preview = ({ render }: Props) => {\n  const { items, actions } = useUplofile();\n\n  if (render && typeof render === \"function\") return render({ items, actions });\n\n  return (\n    <div data-part=\"preview\" className={\"uplofile-preview\"}>\n      <div className=\"uplofile-preview__wrapper grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4\">\n        {items.map((item) => (\n          <div\n            key={item.uid}\n            onClick={(e) => e.stopPropagation()}\n            className=\"uplofile-preview__item relative overflow-hidden rounded-xl border size-32\"\n            data-state={item.status}\n          >\n            {item.url || item.previewUrl ? (\n              <img\n                src={item.url || item.previewUrl}\n                alt={item.name}\n                className=\"uplofile-preview__image size-full object-cover\"\n              />\n            ) : (\n              <div className=\"uplofile-preview__no-preview flex h-32 w-full items-center justify-center text-xs text-gray-500\">\n                No preview\n              </div>\n            )}\n            {item.status === \"uploading\" && (\n              <div className=\"uplofile-preview__progress absolute bottom-0 left-0 right-0 h-1 bg-gray-200\">\n                <div\n                  className=\"uplofile-preview__progress-bar h-full bg-black/80\"\n                  style={{\n                    width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`,\n                  }}\n                />\n              </div>\n            )}\n            <div className=\"uplofile-preview__actions absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-2\">\n              {item.status === \"uploading\" && (\n                <button\n                  type=\"button\"\n                  className=\"uplofile-preview__button uplofile-preview__button--cancel rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n                  onClick={() => actions.cancel(item.uid)}\n                >\n                  Cancel\n                </button>\n              )}\n              {(item.status === \"error\" || item.status === \"canceled\") && (\n                <button\n                  type=\"button\"\n                  className=\"uplofile-preview__button uplofile-preview__button--retry rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n                  onClick={() => actions.retry(item.uid)}\n                >\n                  Retry\n                </button>\n              )}\n              <button\n                type=\"button\"\n                className=\"uplofile-preview__button uplofile-preview__button--remove rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n                onClick={() => actions.remove(item.uid)}\n                disabled={item.status === \"removing\"}\n              >\n                {item.status === \"removing\" ? \"Removing...\" : \"Remove\"}\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport const HiddenInput = ({ name }: { name?: string }) => {\n  const { hiddenInputValue, name: defaultName } = useUplofile();\n  return (\n    <input type=\"hidden\" name={name ?? defaultName} value={hiddenInputValue} />\n  );\n};\n\ntype ButtonProps = {\n  uid: string;\n  alwaysVisible?: boolean;\n  asChild?: boolean;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Cancel = ({\n  uid,\n  asChild,\n  alwaysVisible = false,\n  ...rest\n}: ButtonProps) => {\n  const { actions, items } = useUplofile();\n  const isUploading = items.find((i) => i.uid === uid)?.status === \"uploading\";\n  const Comp: any = asChild ? Slot : \"button\";\n\n  if (!isUploading && !alwaysVisible) return null;\n\n  return (\n    <Comp\n      onClick={(e: { stopPropagation: () => void }) => {\n        e.stopPropagation();\n        actions.cancel(uid);\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport const Retry = ({ uid, asChild, ...rest }: ButtonProps) => {\n  const { actions } = useUplofile();\n  const Comp: any = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      onClick={(e: { stopPropagation: () => void }) => {\n        e.stopPropagation();\n        actions.retry(uid);\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport const Remove = ({ uid, asChild, ...rest }: ButtonProps) => {\n  const { actions } = useUplofile();\n  const Comp: any = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      onClick={(e: { stopPropagation: () => void }) => {\n        e.stopPropagation();\n        actions.remove(uid);\n      }}\n      {...rest}\n    />\n  );\n};\n","import type { DragEvent, RefObject } from \"react\";\nimport React, {\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type {\n  ImageUploaderContextValue,\n  ItemActions,\n  RootProps,\n  UploadFileItem,\n} from \"./types\";\nimport { uid } from \"./utils\";\n\nexport const UploaderCtx = createContext<ImageUploaderContextValue | null>(\n  null,\n);\n\nexport const Root = ({\n  multiple = true,\n  initial = [],\n  onChange,\n  upload,\n  removeMode = \"optimistic\",\n  onRemove,\n  accept = \"image/*\",\n  name = \"images\",\n  maxCount,\n  disabled,\n  children,\n}: RootProps) => {\n  const [items, setItems] = useState<UploadFileItem[]>([]);\n  const controllers = useRef(new Map<string, AbortController>());\n  const removeControllers = useRef(new Map<string, AbortController>());\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const hasHydratedInitialRef = useRef(false);\n\n  // Hydrate initial items from the server and keep them marked as done\n  useEffect(() => {\n    if (hasHydratedInitialRef.current) return;\n    const arr = initial ?? [];\n    if (!Array.isArray(arr) || arr.length === 0) return;\n\n    const mapped: UploadFileItem[] = arr.map((it) => {\n      return {\n        uid: it.uid || it.id,\n        id: it.id,\n        name: it.name,\n        url: it.url,\n        status: \"done\",\n      } as UploadFileItem;\n    });\n\n    // Only hydrate if the user hasn't already added/modified items locally\n    setItems((prev) => (prev.length === 0 ? mapped : prev));\n    hasHydratedInitialRef.current = true;\n  }, [initial]);\n\n  const hiddenInputValue = useMemo(() => {\n    const done = items.filter((i) => i.status === \"done\" && i.url);\n    return JSON.stringify(\n      done.map(\n        ({\n          uid: _u,\n          previewUrl: _p,\n          file: _f,\n          status: _s,\n          progress: _pr,\n          error: _e,\n          ...rest\n        }) => rest,\n      ),\n    );\n  }, [items]);\n\n  const emitChange = useCallback(\n    (\n      next: UploadFileItem[] | ((prev: UploadFileItem[]) => UploadFileItem[]),\n    ) => {\n      setItems((prev) => {\n        const nextState =\n          typeof next === \"function\" ? (next as any)(prev) : next;\n        if (onChange) Promise.resolve(onChange(nextState)).catch(() => {});\n        return nextState;\n      });\n    },\n    [onChange],\n  );\n\n  const startUpload = useCallback(\n    async (item: UploadFileItem) => {\n      if (!item.file) return;\n      const controller = new AbortController();\n      controllers.current.set(item.uid, controller);\n\n      const setProgress = (pct: number) => {\n        emitChange((items) =>\n          items.map((it) =>\n            it.uid === item.uid\n              ? { ...it, progress: Math.max(0, Math.min(100, pct)) }\n              : it,\n          ),\n        );\n      };\n\n      emitChange((items) =>\n        items.map((it) =>\n          it.uid === item.uid\n            ? { ...it, status: \"uploading\", error: undefined }\n            : it,\n        ),\n      );\n\n      try {\n        const result = await upload(item.file, controller.signal, setProgress);\n\n        emitChange((items) =>\n          items.map((it) => {\n            if (it.uid !== item.uid) return it;\n            // Revoke the local objectURL preview to avoid memory leaks\n            if (it.previewUrl && it.previewUrl.startsWith(\"blob:\")) {\n              try {\n                URL.revokeObjectURL(it.previewUrl);\n              } catch {\n                /*fail silently*/\n              }\n            }\n            const serverPreview = (result as any)?.preview || result.url;\n            return {\n              ...it,\n              status: \"done\",\n              url: result.url,\n              id: result.id,\n              previewUrl: serverPreview,\n              progress: 100,\n            };\n          }),\n        );\n      } catch (err: any) {\n        const wasAborted = controller.signal.aborted;\n        emitChange((items) =>\n          items.map((it) =>\n            it.uid === item.uid\n              ? {\n                  ...it,\n                  status: wasAborted ? \"canceled\" : \"error\",\n                  error: wasAborted\n                    ? undefined\n                    : err?.message || \"Upload failed\",\n                }\n              : it,\n          ),\n        );\n      } finally {\n        controllers.current.delete(item.uid);\n      }\n    },\n    [emitChange, upload],\n  );\n\n  const selectFiles = useCallback(\n    (files: FileList | null) => {\n      if (!files || files.length === 0) return;\n      const selected = Array.from(files);\n      const remaining = maxCount\n        ? Math.max(\n            0,\n            maxCount - items.filter((i) => i.status !== \"canceled\").length,\n          )\n        : undefined;\n      const toUse =\n        typeof remaining === \"number\" ? selected.slice(0, remaining) : selected;\n\n      const newItems: UploadFileItem[] = toUse.map((file) => ({\n        uid: uid(),\n        name: file.name,\n        file,\n        previewUrl: URL.createObjectURL(file),\n        status: \"idle\",\n        progress: 0,\n      }));\n\n      emitChange([...items, ...newItems]);\n      newItems.forEach((it) => startUpload(it));\n    },\n    [emitChange, items, maxCount, startUpload],\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      selectFiles(e.target.files);\n      e.currentTarget.value = \"\";\n    },\n    [selectFiles],\n  );\n\n  const onDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault();\n      if (disabled) return;\n      selectFiles(e.dataTransfer.files);\n    },\n    [disabled, selectFiles],\n  );\n\n  const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);\n\n  const actions: ItemActions = useMemo(\n    () => ({\n      cancel: (uidStr: string) => {\n        const ctrl = controllers.current.get(uidStr);\n        ctrl?.abort();\n      },\n      remove: async (uidStr: string) => {\n        const item = items.find((i) => i.uid === uidStr);\n        if (!item) return;\n\n        // abort any in-flight upload first\n        controllers.current.get(uidStr)?.abort();\n\n        // If no server-side removal needed or not uploaded yet, just remove\n        if (!onRemove || item.status !== \"done\") {\n          emitChange((list) => list.filter((i) => i.uid !== uidStr));\n          return;\n        }\n\n        const ctrl = new AbortController();\n        removeControllers.current.set(uidStr, ctrl);\n\n        if (removeMode === \"optimistic\") {\n          const prev = items;\n          // remove from UI immediately\n          emitChange((list) => list.filter((i) => i.uid !== uidStr));\n          try {\n            await onRemove(item, ctrl.signal);\n          } catch {\n            // rollback UI if server delete fails\n            emitChange(prev);\n          } finally {\n            removeControllers.current.delete(uidStr);\n          }\n        } else {\n          // strict: mark as removing, wait for API, then remove\n          emitChange((list) =>\n            list.map((it) =>\n              it.uid === uidStr ? { ...it, status: \"removing\" as const } : it,\n            ),\n          );\n          try {\n            await onRemove(item, ctrl.signal);\n            emitChange((list) => list.filter((i) => i.uid !== uidStr));\n          } catch {\n            // revert to done if delete fails\n            emitChange((list) =>\n              list.map((it) =>\n                it.uid === uidStr ? { ...it, status: \"done\" as const } : it,\n              ),\n            );\n          } finally {\n            removeControllers.current.delete(uidStr);\n          }\n        }\n      },\n      retry: (uidStr: string) => {\n        const item = items.find((i) => i.uid === uidStr);\n        if (!item) return;\n        if (item.file) {\n          void startUpload({\n            ...item,\n            status: \"idle\",\n            error: undefined,\n            progress: 0,\n          });\n        }\n      },\n    }),\n    [emitChange, items, onRemove, removeMode, startUpload],\n  );\n\n  useEffect(\n    () => () => {\n      items.forEach((i) => i.previewUrl && URL.revokeObjectURL(i.previewUrl));\n      controllers.current.forEach((c) => c.abort());\n    },\n    [],\n  );\n\n  const ctx: ImageUploaderContextValue = {\n    items,\n    disabled,\n    multiple,\n    accept,\n    actions,\n    openFileDialog: () => inputRef.current?.click(),\n    fileInputProps: {\n      ref: inputRef as RefObject<HTMLInputElement>,\n      onChange: onInputChange,\n      accept,\n      multiple,\n      disabled,\n    },\n    getDropzoneProps: () => ({\n      role: \"button\",\n      tabIndex: 0,\n      onDrop,\n      onDragOver,\n      onKeyDown: (e) => {\n        if (disabled) return;\n        if (e.key === \"Enter\" || e.key === \" \") inputRef.current?.click();\n      },\n      \"data-disabled\": disabled ? \"\" : undefined,\n      \"data-multiple\": multiple ? \"\" : undefined,\n    }),\n    hiddenInputValue,\n    name,\n  };\n\n  return (\n    <UploaderCtx.Provider value={ctx}>\n      <div data-part=\"root\">\n        <input type=\"file\" hidden {...ctx.fileInputProps} />\n        {children}\n      </div>\n    </UploaderCtx.Provider>\n  );\n};\n","import { Slot } from \"@radix-ui/react-slot\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { useUplofile } from \"../hook\";\nimport type { TriggerRenderProps } from \"../types\";\n\nexport const Trigger = ({\n  asChild,\n  children,\n  render,\n  ...rest\n}: PropsWithChildren<\n  {\n    asChild?: boolean;\n    render?: (api: TriggerRenderProps) => React.ReactNode;\n    children?: React.ReactNode | ((api: TriggerRenderProps) => React.ReactNode);\n  } & React.HTMLAttributes<HTMLElement>\n>) => {\n  const { openFileDialog, disabled, items } = useUplofile();\n  const Comp: any = asChild ? Slot : \"button\";\n\n  const uploading = items.filter((i) => i.status === \"uploading\");\n  const uploadingCount = uploading.length;\n  const doneCount = items.filter((i) => i.status === \"done\").length;\n  const errorCount = items.filter((i) => i.status === \"error\").length;\n  const totalProgress = uploadingCount\n    ? Math.round(\n        uploading.reduce(\n          (acc, it) =>\n            acc + (typeof it.progress === \"number\" ? it.progress : 0),\n          0,\n        ) / uploadingCount,\n      )\n    : undefined;\n\n  const api: TriggerRenderProps = {\n    items,\n    isUploading: uploadingCount > 0,\n    uploadingCount,\n    doneCount,\n    errorCount,\n    totalProgress,\n    open: openFileDialog,\n  };\n\n  return (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-disabled={disabled}\n      data-part=\"trigger\"\n      onClick={(e: any) => {\n        if (disabled) return;\n        (rest as any).onClick?.(e);\n        openFileDialog();\n      }}\n      {...rest}\n    >\n      {render ? render(api) : children}\n    </Comp>\n  );\n};\n","import { useContext } from \"react\";\n\nimport { UploaderCtx } from \"./context\";\n\nexport const useUplofile = () => {\n  const ctx = useContext(UploaderCtx);\n  if (!ctx)\n    throw new Error(\n      \"useUplofile hook must be used within <Uplofile.Root>\",\n    );\n  return ctx;\n};\n"],"names":[],"mappings":";;;AACO;AACP;AACA;;ACFO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;;AC3EA;AACA;AACA;AACO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACA;AACA;;ACbA;;ACDA;AACP;AACA;AACA;AACA;;ACNO;;;"}