@seed-design/react-file-upload 0.0.0-alpha-20260416134952

package/lib/index.js

@@ -0,0 +1,43 @@
+import { F as FileUploadContext, a as FileUploadDropzone, b as FileUploadHiddenInput, c as FileUploadItemBackdrop, d as FileUploadItemImage, e as FileUploadItemMetadata, f as FileUploadItemName, g as FileUploadItemRemoveButton, h as FileUploadItemSize, i as FileUploadItemThumbnail, j as FileUploadRoot, k as FileUploadTrigger } from './FileUpload-12s-BsPs5ndy.js';
+export { l as FileUploadItemProvider, n as useFileUpload, u as useFileUploadContext, o as useFileUploadItem, m as useFileUploadItemContext } from './FileUpload-12s-BsPs5ndy.js';
+
+var FileUpload_namespace = {
+  __proto__: null,
+  Context: FileUploadContext,
+  Dropzone: FileUploadDropzone,
+  HiddenInput: FileUploadHiddenInput,
+  ItemBackdrop: FileUploadItemBackdrop,
+  ItemImage: FileUploadItemImage,
+  ItemMetadata: FileUploadItemMetadata,
+  ItemName: FileUploadItemName,
+  ItemRemoveButton: FileUploadItemRemoveButton,
+  ItemSize: FileUploadItemSize,
+  ItemThumbnail: FileUploadItemThumbnail,
+  Root: FileUploadRoot,
+  Trigger: FileUploadTrigger
+};
+
+/**
+ * Split a filename into basename and extension.
+ *
+ * "document.pdf" -> { basename: "document", extension: ".pdf" }
+ * ".gitignore"   -> { basename: ".gitignore", extension: "" }
+ * "README"       -> { basename: "README", extension: "" }
+ */ function splitFileName(name) {
+    if (!name) return {
+        basename: "",
+        extension: ""
+    };
+    const lastDot = name.lastIndexOf(".");
+    // No dot, or dot is first character (dotfile)
+    if (lastDot <= 0) return {
+        basename: name,
+        extension: ""
+    };
+    return {
+        basename: name.slice(0, lastDot),
+        extension: name.slice(lastDot)
+    };
+}
+
+export { FileUpload_namespace as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItemBackdrop, FileUploadItemImage, FileUploadItemMetadata, FileUploadItemName, FileUploadItemRemoveButton, FileUploadItemSize, FileUploadItemThumbnail, FileUploadRoot, FileUploadTrigger, splitFileName };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@seed-design/react-file-upload",
+  "version": "0.0.0-alpha-20260416134952",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/file-upload"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "1.1.2",
+    "@radix-ui/react-use-controllable-state": "1.2.2",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "0.0.0-alpha-20260414104312",
+    "@seed-design/react-supports": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/FileUpload.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  FileUploadRoot as Root,
+  FileUploadDropzone as Dropzone,
+  FileUploadTrigger as Trigger,
+  FileUploadHiddenInput as HiddenInput,
+  FileUploadItemName as ItemName,
+  FileUploadItemSize as ItemSize,
+  FileUploadItemRemoveButton as ItemRemoveButton,
+  FileUploadItemImage as ItemImage,
+  FileUploadItemThumbnail as ItemThumbnail,
+  FileUploadItemMetadata as ItemMetadata,
+  FileUploadItemBackdrop as ItemBackdrop,
+  FileUploadContext as Context,
+  type FileUploadRootProps as RootProps,
+  type FileUploadDropzoneProps as DropzoneProps,
+  type FileUploadTriggerProps as TriggerProps,
+  type FileUploadHiddenInputProps as HiddenInputProps,
+  type FileUploadItemNameProps as ItemNameProps,
+  type FileUploadItemSizeProps as ItemSizeProps,
+  type FileUploadItemRemoveButtonProps as ItemRemoveButtonProps,
+  type FileUploadItemImageProps as ItemImageProps,
+  type FileUploadItemThumbnailProps as ItemThumbnailProps,
+  type FileUploadItemMetadataProps as ItemMetadataProps,
+  type FileUploadItemBackdropProps as ItemBackdropProps,
+  type FileUploadContextProps as ContextProps,
+} from "./FileUpload";

package/src/FileUpload.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { useFileUpload, type UseFileUploadProps } from "./useFileUpload";
+import type { FileEntry } from "./types";
+import {
+  FileUploadProvider,
+  useFileUploadContext,
+  useFileUploadItemContext,
+  type UseFileUploadContext,
+} from "./useFileUploadContext";
+
+export interface FileUploadRootProps
+  extends UseFileUploadProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FileUploadRoot = forwardRef<HTMLDivElement, FileUploadRootProps>(
+  (
+    {
+      // UseFileUploadProps
+      accept,
+      acceptedFileEntries,
+      defaultAcceptedFileEntries,
+      disabled,
+      invalid,
+      maxFileSize,
+      maxFiles,
+      minFileSize,
+      name,
+      onAcceptedFileEntriesChange,
+      onFileAccept,
+      onFileReject,
+      preventDocumentDrop,
+      readOnly,
+      required,
+      validate,
+
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const api = useFileUpload({
+      accept,
+      acceptedFileEntries,
+      defaultAcceptedFileEntries,
+      disabled,
+      invalid,
+      maxFileSize,
+      maxFiles,
+      minFileSize,
+      name,
+      onAcceptedFileEntriesChange,
+      onFileAccept,
+      onFileReject,
+      preventDocumentDrop,
+      readOnly,
+      required,
+      validate,
+    });
+
+    return (
+      <FileUploadProvider value={api}>
+        <Primitive.div ref={ref} {...api.stateProps} {...otherProps} />
+      </FileUploadProvider>
+    );
+  },
+);
+FileUploadRoot.displayName = "FileUploadRoot";
+
+export interface FileUploadDropzoneProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FileUploadDropzone = forwardRef<HTMLDivElement, FileUploadDropzoneProps>(
+  (props, ref) => {
+    const { dropzoneRef, dropzoneProps } = useFileUploadContext();
+    const mergedProps = mergeProps(dropzoneProps, props);
+
+    return <Primitive.div ref={composeRefs(dropzoneRef, ref)} {...mergedProps} />;
+  },
+);
+FileUploadDropzone.displayName = "FileUploadDropzone";
+
+export interface FileUploadTriggerProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const FileUploadTrigger = forwardRef<HTMLButtonElement, FileUploadTriggerProps>(
+  (props, ref) => {
+    const { triggerProps } = useFileUploadContext();
+    const mergedProps = mergeProps(triggerProps, props);
+
+    return <Primitive.button ref={ref} {...mergedProps} />;
+  },
+);
+FileUploadTrigger.displayName = "FileUploadTrigger";
+
+export interface FileUploadHiddenInputProps
+  extends PrimitiveProps,
+    React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const FileUploadHiddenInput = forwardRef<HTMLInputElement, FileUploadHiddenInputProps>(
+  (props, ref) => {
+    const { inputRef, hiddenInputProps } = useFileUploadContext();
+    const mergedProps = mergeProps(hiddenInputProps, props);
+
+    return <Primitive.input ref={composeRefs(inputRef, ref)} {...mergedProps} />;
+  },
+);
+FileUploadHiddenInput.displayName = "FileUploadHiddenInput";
+
+export interface FileUploadItemNameProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const FileUploadItemName = forwardRef<HTMLSpanElement, FileUploadItemNameProps>(
+  ({ children, ...props }, ref) => {
+    const { stateProps } = useFileUploadContext();
+    const { file } = useFileUploadItemContext();
+
+    const mergedProps = mergeProps(stateProps, props);
+
+    return (
+      <Primitive.span ref={ref} {...mergedProps}>
+        {children ?? file.name}
+      </Primitive.span>
+    );
+  },
+);
+FileUploadItemName.displayName = "FileUploadItemName";
+
+export interface FileUploadItemSizeProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Formatter function for file size.
+   */
+  formatBytes: (bytes: number) => string;
+}
+
+export const FileUploadItemSize = forwardRef<HTMLSpanElement, FileUploadItemSizeProps>(
+  ({ children, formatBytes, ...props }, ref) => {
+    const { stateProps } = useFileUploadContext();
+    const { file } = useFileUploadItemContext();
+
+    const mergedProps = mergeProps(stateProps, props);
+
+    return (
+      <Primitive.span ref={ref} {...mergedProps}>
+        {children ?? formatBytes(file.size)}
+      </Primitive.span>
+    );
+  },
+);
+FileUploadItemSize.displayName = "FileUploadItemSize";
+
+export interface FileUploadItemRemoveButtonProps
+  extends PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const FileUploadItemRemoveButton = forwardRef<
+  HTMLButtonElement,
+  FileUploadItemRemoveButtonProps
+>((props, ref) => {
+  const { removeButtonProps } = useFileUploadItemContext();
+
+  const mergedProps = mergeProps(removeButtonProps, props);
+
+  return <Primitive.button ref={ref} {...mergedProps} />;
+});
+FileUploadItemRemoveButton.displayName = "FileUploadItemRemoveButton";
+
+export interface FileUploadItemImageProps
+  extends PrimitiveProps,
+    React.ImgHTMLAttributes<HTMLImageElement> {}
+
+export const FileUploadItemImage = forwardRef<HTMLImageElement, FileUploadItemImageProps>(
+  (props, ref) => {
+    const ctx = useFileUploadItemContext();
+
+    if (!("imageProps" in ctx)) return null;
+
+    const mergedProps = mergeProps(ctx.imageProps ?? {}, props);
+
+    return <Primitive.img ref={ref} {...mergedProps} />;
+  },
+);
+FileUploadItemImage.displayName = "FileUploadItemImage";
+
+export interface FileUploadItemThumbnailProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FileUploadItemThumbnail = forwardRef<HTMLDivElement, FileUploadItemThumbnailProps>(
+  (props, ref) => {
+    const { thumbnailProps } = useFileUploadItemContext();
+
+    const mergedProps = mergeProps(thumbnailProps, props);
+
+    return <Primitive.div ref={ref} {...mergedProps} />;
+  },
+);
+FileUploadItemThumbnail.displayName = "FileUploadItemThumbnail";
+
+export interface FileUploadItemMetadataProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const FileUploadItemMetadata = forwardRef<HTMLDivElement, FileUploadItemMetadataProps>(
+  (props, ref) => {
+    const { metadataProps } = useFileUploadItemContext();
+
+    const mergedProps = mergeProps(metadataProps, props);
+
+    return <Primitive.div ref={ref} {...mergedProps} />;
+  },
+);
+FileUploadItemMetadata.displayName = "FileUploadItemMetadata";
+
+export interface FileUploadItemBackdropProps
+  extends PrimitiveProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  status: FileEntry["status"];
+  children: React.ReactNode | ((entry: FileEntry) => React.ReactNode);
+}
+
+export const FileUploadItemBackdrop = forwardRef<HTMLDivElement, FileUploadItemBackdropProps>(
+  ({ status, children, ...props }, ref) => {
+    const entry = useFileUploadItemContext();
+
+    if (entry.status !== status) return null;
+
+    return (
+      <Primitive.div ref={composeRefs(entry.refs.overlay, ref)} {...props}>
+        {typeof children === "function" ? children(entry) : children}
+      </Primitive.div>
+    );
+  },
+);
+FileUploadItemBackdrop.displayName = "FileUploadItemBackdrop";
+
+export interface FileUploadContextProps {
+  children: (context: UseFileUploadContext) => React.ReactNode;
+}
+
+export const FileUploadContext = (props: FileUploadContextProps) => {
+  return props.children(useFileUploadContext());
+};

package/src/accept-utils.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "bun:test";
+import { isImageAccept, getFileAcceptType } from "./accept-utils";
+
+describe("isImageAccept", () => {
+  it("should return true for image/* MIME patterns", () => {
+    expect(isImageAccept("image/*")).toBe(true);
+    expect(isImageAccept("image/png")).toBe(true);
+    expect(isImageAccept("image/jpeg")).toBe(true);
+    expect(isImageAccept("image/webp")).toBe(true);
+    expect(isImageAccept("image/heic")).toBe(true);
+  });
+
+  it("should return true for image file extensions", () => {
+    expect(isImageAccept(".jpg")).toBe(true);
+    expect(isImageAccept(".jpeg")).toBe(true);
+    expect(isImageAccept(".png")).toBe(true);
+    expect(isImageAccept(".gif")).toBe(true);
+    expect(isImageAccept(".webp")).toBe(true);
+    expect(isImageAccept(".avif")).toBe(true);
+    expect(isImageAccept(".heic")).toBe(true);
+    expect(isImageAccept(".svg")).toBe(true);
+    expect(isImageAccept(".bmp")).toBe(true);
+    expect(isImageAccept(".tiff")).toBe(true);
+  });
+
+  it("should be case-insensitive for extensions", () => {
+    expect(isImageAccept(".JPG")).toBe(true);
+    expect(isImageAccept(".Png")).toBe(true);
+    expect(isImageAccept(".HEIC")).toBe(true);
+  });
+
+  it("should return false for non-image MIME patterns", () => {
+    expect(isImageAccept("application/pdf")).toBe(false);
+    expect(isImageAccept("text/plain")).toBe(false);
+    expect(isImageAccept("video/mp4")).toBe(false);
+  });
+
+  it("should return false for non-image file extensions", () => {
+    expect(isImageAccept(".pdf")).toBe(false);
+    expect(isImageAccept(".txt")).toBe(false);
+    expect(isImageAccept(".zip")).toBe(false);
+    expect(isImageAccept(".mp4")).toBe(false);
+  });
+
+  it("should return false for unknown patterns", () => {
+    expect(isImageAccept("foo")).toBe(false);
+    expect(isImageAccept("")).toBe(false);
+  });
+});
+
+describe("getFileAcceptType", () => {
+  it("should return undefined when accept is undefined", () => {
+    expect(getFileAcceptType(undefined)).toBeUndefined();
+  });
+
+  it("should return 'image' for image-only MIME string", () => {
+    expect(getFileAcceptType("image/*")).toBe("image");
+    expect(getFileAcceptType("image/png")).toBe("image");
+  });
+
+  it("should return 'image' for image-only extension string", () => {
+    expect(getFileAcceptType(".jpg,.png,.gif")).toBe("image");
+  });
+
+  it("should return 'image' for mixed image MIME and extensions", () => {
+    expect(getFileAcceptType("image/*,.heic")).toBe("image");
+    expect(getFileAcceptType(".jpg,image/png")).toBe("image");
+  });
+
+  it("should return 'image' for image-only array", () => {
+    expect(getFileAcceptType(["image/*"])).toBe("image");
+    expect(getFileAcceptType([".jpg", ".png", ".gif"])).toBe("image");
+    expect(getFileAcceptType(["image/*", ".heic"])).toBe("image");
+  });
+
+  it("should return undefined when mixed with non-image", () => {
+    expect(getFileAcceptType(".pdf,image/png")).toBeUndefined();
+    expect(getFileAcceptType(["image/*", ".pdf"])).toBeUndefined();
+    expect(getFileAcceptType([".jpg", ".txt"])).toBeUndefined();
+  });
+
+  it("should return undefined for non-image only", () => {
+    expect(getFileAcceptType(".pdf")).toBeUndefined();
+    expect(getFileAcceptType("application/pdf")).toBeUndefined();
+    expect(getFileAcceptType([".pdf", ".doc"])).toBeUndefined();
+  });
+});

package/src/accept-utils.ts

@@ -0,0 +1,83 @@
+import type { FileAcceptType } from "./types";
+
+/**
+ * Image extension set sourced from mime-db (MIT license).
+ * @see https://www.npmjs.com/package/mime
+ */
+const IMAGE_EXTENSIONS = new Set([
+  "exr",
+  "apng",
+  "avci",
+  "avcs",
+  "avif",
+  "bmp",
+  "dib",
+  "cgm",
+  "drle",
+  "dpx",
+  "emf",
+  "fits",
+  "g3",
+  "gif",
+  "heic",
+  "heics",
+  "heif",
+  "heifs",
+  "hej2",
+  "ief",
+  "jaii",
+  "jais",
+  "jls",
+  "jp2",
+  "jpg2",
+  "jpg",
+  "jpeg",
+  "jpe",
+  "jph",
+  "jhc",
+  "jpm",
+  "jpgm",
+  "jpx",
+  "jpf",
+  "jxl",
+  "jxr",
+  "jxra",
+  "jxrs",
+  "jxs",
+  "jxsc",
+  "jxsi",
+  "jxss",
+  "ktx",
+  "ktx2",
+  "jfif",
+  "png",
+  "sgi",
+  "svg",
+  "svgz",
+  "t38",
+  "tif",
+  "tiff",
+  "tfx",
+  "webp",
+  "wmf",
+]);
+
+export function isImageAccept(pattern: string): boolean {
+  if (pattern.startsWith("image/")) return true;
+
+  if (pattern.startsWith(".")) return IMAGE_EXTENSIONS.has(pattern.slice(1).toLowerCase());
+
+  return false;
+}
+
+/**
+ * Determines the file accept type category based on accept patterns.
+ * Returns "image" if all patterns are image-related, undefined otherwise.
+ */
+export function getFileAcceptType(accept: string | string[] | undefined): FileAcceptType {
+  if (!accept) return undefined;
+
+  const list = Array.isArray(accept) ? accept : accept.split(",").map((s) => s.trim());
+
+  return list.every(isImageAccept) ? "image" : undefined;
+}

package/src/index.ts

@@ -0,0 +1,54 @@
+export {
+  FileUploadRoot,
+  FileUploadDropzone,
+  FileUploadTrigger,
+  FileUploadHiddenInput,
+  FileUploadItemName,
+  FileUploadItemSize,
+  FileUploadItemRemoveButton,
+  FileUploadItemImage,
+  FileUploadItemThumbnail,
+  FileUploadItemMetadata,
+  FileUploadItemBackdrop,
+  FileUploadContext,
+  type FileUploadRootProps,
+  type FileUploadDropzoneProps,
+  type FileUploadTriggerProps,
+  type FileUploadHiddenInputProps,
+  type FileUploadItemNameProps,
+  type FileUploadItemSizeProps,
+  type FileUploadItemRemoveButtonProps,
+  type FileUploadItemImageProps,
+  type FileUploadItemThumbnailProps,
+  type FileUploadItemMetadataProps,
+  type FileUploadItemBackdropProps,
+  type FileUploadContextProps,
+} from "./FileUpload";
+
+export {
+  FileUploadItemProvider,
+  useFileUploadContext,
+  useFileUploadItemContext,
+  type UseFileUploadContext,
+  type FileUploadItemContext,
+} from "./useFileUploadContext";
+
+export {
+  useFileUpload,
+  useFileUploadItem,
+  type UseFileUploadProps,
+  type UseFileUploadReturn,
+  type UseFileUploadItemReturn,
+} from "./useFileUpload";
+
+export type {
+  FileError,
+  FileRejection,
+  FileStatusDetails,
+  FileEntry,
+  FileAcceptType,
+} from "./types";
+
+export * as FileUpload from "./FileUpload.namespace";
+
+export { splitFileName, type SplitFileNameResult } from "./utils";

package/src/types.ts

@@ -0,0 +1,24 @@
+export type FileError =
+  | "FILE_TOO_LARGE"
+  | "FILE_TOO_SMALL"
+  | "TOO_MANY_FILES"
+  | "INVALID_TYPE"
+  | (string & {});
+
+export interface FileRejection {
+  file: File;
+  errors: FileError[];
+}
+
+export type FileStatusDetails =
+  | { status: "pending" }
+  | { status: "uploading"; progress?: number }
+  | { status: "success" }
+  | { status: "error" };
+
+export type FileEntry = {
+  id: string;
+  file: File;
+} & FileStatusDetails;
+
+export type FileAcceptType = "image" | undefined;