@howells/stow-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Stow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+# @howells/stow-react
+
+React components for [Stow](https://stow.sh) file storage.
+
+## Installation
+
+```bash
+npm install @howells/stow-react
+# or
+pnpm add @howells/stow-react
+# or
+yarn add @howells/stow-react
+```
+
+## Quick Start
+
+```tsx
+import { UploadDropzone } from "@howells/stow-react";
+
+function MyComponent() {
+  return (
+    <UploadDropzone
+      endpoint="/api/upload"
+      onUploadComplete={(files) => {
+        console.log("Uploaded:", files);
+      }}
+      onUploadError={(error) => {
+        console.error("Error:", error.message);
+      }}
+    />
+  );
+}
+```
+
+## Components
+
+### `<UploadDropzone>`
+
+A drag-and-drop file upload zone with built-in progress tracking.
+
+```tsx
+<UploadDropzone
+  // Required
+  endpoint="/api/upload"
+
+  // Callbacks
+  onUploadComplete={(files) => console.log(files)}
+  onUploadError={(error) => console.error(error)}
+  onUploadProgress={(progress) => console.log(progress.percent)}
+  onUploadBegin={(files) => console.log("Starting upload...")}
+
+  // File restrictions
+  accept="image/*"           // Accepted file types
+  maxSize={10 * 1024 * 1024} // Max 10MB
+  maxFiles={5}               // Max 5 files
+  multiple={true}            // Allow multiple files
+
+  // Appearance
+  className="my-dropzone"
+  disabled={false}
+
+  // Optional route for organizing files
+  route="avatars"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `endpoint` | `string` | required | Your server upload endpoint |
+| `route` | `string` | - | Optional route for organizing files |
+| `onUploadComplete` | `(files: UploadedFile[]) => void` | - | Called when all files uploaded |
+| `onUploadError` | `(error: Error) => void` | - | Called on upload error |
+| `onUploadProgress` | `(progress: UploadProgress) => void` | - | Called with progress updates |
+| `onUploadBegin` | `(files: File[]) => void` | - | Called when upload starts |
+| `accept` | `string` | - | Accepted file types (e.g., "image/*") |
+| `maxSize` | `number` | - | Maximum file size in bytes |
+| `maxFiles` | `number` | `10` | Maximum number of files |
+| `multiple` | `boolean` | `true` | Allow multiple file selection |
+| `className` | `string` | - | Custom CSS class |
+| `disabled` | `boolean` | `false` | Disable the dropzone |
+
+## Types
+
+```typescript
+type UploadedFile = {
+  key: string;
+  url: string | null;
+  name: string;
+  size: number;
+  type: string;
+};
+
+type UploadProgress = {
+  file: File;
+  loaded: number;
+  total: number;
+  percent: number;
+};
+```
+
+## Styling
+
+The component uses inline styles by default. Override with your own CSS:
+
+```tsx
+<UploadDropzone
+  endpoint="/api/upload"
+  className="custom-dropzone"
+/>
+```
+
+```css
+.custom-dropzone {
+  border: 2px dashed #3b82f6;
+  border-radius: 12px;
+  padding: 3rem;
+  background: #f8fafc;
+}
+```
+
+## Server Setup
+
+This component requires a server endpoint. Use `@howells/stow-next` for easy setup:
+
+```typescript
+// app/api/upload/route.ts
+import { createUploadHandler } from "@howells/stow-next";
+import { StowServer } from "@howells/stow-server";
+
+const stow = new StowServer(process.env.STOW_API_KEY!);
+
+export const POST = createUploadHandler({
+  stow,
+  maxSize: 10 * 1024 * 1024,
+  allowedTypes: ["image/*"],
+});
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface UploadedFile {
+    key: string;
+    name: string;
+    size: number;
+    type: string;
+    url: string | null;
+}
+interface UploadProgress {
+    file: File;
+    loaded: number;
+    percent: number;
+    total: number;
+}
+interface UploadDropzoneProps {
+    /**
+     * Accepted file types (e.g., "image/*" or ".pdf,.doc")
+     */
+    accept?: string;
+    /**
+     * Custom class name for the dropzone container
+     */
+    className?: string;
+    /**
+     * Whether the dropzone is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Your server endpoint that handles uploads.
+     * This endpoint should use @howells/stow-server internally.
+     */
+    endpoint: string;
+    /**
+     * Maximum number of files
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Whether to allow multiple file selection
+     */
+    multiple?: boolean;
+    /**
+     * Callback when upload starts
+     */
+    onUploadBegin?: (files: File[]) => void;
+    /**
+     * Callback when all files have been uploaded successfully
+     */
+    onUploadComplete?: (files: UploadedFile[]) => void;
+    /**
+     * Callback when an upload error occurs
+     */
+    onUploadError?: (error: Error) => void;
+    /**
+     * Callback for upload progress updates
+     */
+    onUploadProgress?: (progress: UploadProgress) => void;
+    /**
+     * Optional route identifier for organizing files
+     */
+    route?: string;
+}
+
+declare function UploadDropzone({ endpoint, route, onUploadComplete, onUploadError, onUploadProgress, onUploadBegin, accept, maxSize, maxFiles, multiple, className, disabled, }: UploadDropzoneProps): react_jsx_runtime.JSX.Element;
+
+export { UploadDropzone, type UploadDropzoneProps, type UploadProgress, type UploadedFile };

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface UploadedFile {
+    key: string;
+    name: string;
+    size: number;
+    type: string;
+    url: string | null;
+}
+interface UploadProgress {
+    file: File;
+    loaded: number;
+    percent: number;
+    total: number;
+}
+interface UploadDropzoneProps {
+    /**
+     * Accepted file types (e.g., "image/*" or ".pdf,.doc")
+     */
+    accept?: string;
+    /**
+     * Custom class name for the dropzone container
+     */
+    className?: string;
+    /**
+     * Whether the dropzone is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Your server endpoint that handles uploads.
+     * This endpoint should use @howells/stow-server internally.
+     */
+    endpoint: string;
+    /**
+     * Maximum number of files
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Whether to allow multiple file selection
+     */
+    multiple?: boolean;
+    /**
+     * Callback when upload starts
+     */
+    onUploadBegin?: (files: File[]) => void;
+    /**
+     * Callback when all files have been uploaded successfully
+     */
+    onUploadComplete?: (files: UploadedFile[]) => void;
+    /**
+     * Callback when an upload error occurs
+     */
+    onUploadError?: (error: Error) => void;
+    /**
+     * Callback for upload progress updates
+     */
+    onUploadProgress?: (progress: UploadProgress) => void;
+    /**
+     * Optional route identifier for organizing files
+     */
+    route?: string;
+}
+
+declare function UploadDropzone({ endpoint, route, onUploadComplete, onUploadError, onUploadProgress, onUploadBegin, accept, maxSize, maxFiles, multiple, className, disabled, }: UploadDropzoneProps): react_jsx_runtime.JSX.Element;
+
+export { UploadDropzone, type UploadDropzoneProps, type UploadProgress, type UploadedFile };

package/dist/index.js

@@ -0,0 +1,444 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  UploadDropzone: () => UploadDropzone
+});
+module.exports = __toCommonJS(index_exports);
+var import_stow_client = require("@howells/stow-client");
+var import_react = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function UploadIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#6b7280",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+      ]
+    }
+  );
+}
+function UploadingIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#3b82f6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      style: { animation: "spin 1s linear infinite" },
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: "@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }" })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#16a34a",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#dc2626",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
+      ]
+    }
+  );
+}
+function ProgressBar({ progress }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        maxWidth: "200px",
+        height: "8px",
+        backgroundColor: "#e5e7eb",
+        borderRadius: "4px",
+        marginTop: "1rem",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            width: `${progress}%`,
+            height: "100%",
+            backgroundColor: "#3b82f6",
+            borderRadius: "4px",
+            transition: "width 0.2s ease"
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getBorderColor(state) {
+  if (state === "dragging") {
+    return "#3b82f6";
+  }
+  if (state === "error") {
+    return "#ef4444";
+  }
+  if (state === "complete") {
+    return "#22c55e";
+  }
+  return "#d1d5db";
+}
+function getBackgroundColor(state) {
+  if (state === "dragging") {
+    return "#eff6ff";
+  }
+  if (state === "error") {
+    return "#fef2f2";
+  }
+  if (state === "complete") {
+    return "#f0fdf4";
+  }
+  return "#f9fafb";
+}
+function UploadDropzone({
+  endpoint,
+  route,
+  onUploadComplete,
+  onUploadError,
+  onUploadProgress,
+  onUploadBegin,
+  accept,
+  maxSize,
+  maxFiles = 10,
+  multiple = true,
+  className = "",
+  disabled = false
+}) {
+  const [state, setState] = (0, import_react.useState)("idle");
+  const [progress, setProgress] = (0, import_react.useState)(0);
+  const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const uploadFiles = (0, import_react.useCallback)(
+    async (files) => {
+      if (disabled) {
+        return;
+      }
+      if (files.length > maxFiles) {
+        const error = new Error(`Maximum ${maxFiles} files allowed`);
+        setErrorMessage(error.message);
+        setState("error");
+        onUploadError?.(error);
+        return;
+      }
+      if (maxSize) {
+        const oversizedFile = files.find((f) => f.size > maxSize);
+        if (oversizedFile) {
+          const error = new Error(
+            `File "${oversizedFile.name}" exceeds maximum size of ${formatBytes(maxSize)}`
+          );
+          setErrorMessage(error.message);
+          setState("error");
+          onUploadError?.(error);
+          return;
+        }
+      }
+      setState("uploading");
+      setProgress(0);
+      setErrorMessage(null);
+      onUploadBegin?.(files);
+      const results = [];
+      let totalLoaded = 0;
+      const totalSize = files.reduce((sum, f) => sum + f.size, 0);
+      try {
+        for (const file of files) {
+          const result = await uploadSingleFile(
+            file,
+            endpoint,
+            route,
+            (loaded) => {
+              const fileProgress = totalLoaded + loaded;
+              const percent = Math.round(fileProgress / totalSize * 100);
+              setProgress(percent);
+              onUploadProgress?.({
+                file,
+                loaded,
+                total: file.size,
+                percent: Math.round(loaded / file.size * 100)
+              });
+            }
+          );
+          totalLoaded += file.size;
+          results.push({
+            key: result.key,
+            url: result.url,
+            name: file.name,
+            size: file.size,
+            type: file.type
+          });
+        }
+        setState("complete");
+        onUploadComplete?.(results);
+        setTimeout(() => {
+          setState("idle");
+          setProgress(0);
+        }, 2e3);
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error("Upload failed");
+        setErrorMessage(err.message);
+        setState("error");
+        onUploadError?.(err);
+      }
+    },
+    [
+      endpoint,
+      route,
+      maxFiles,
+      maxSize,
+      disabled,
+      onUploadBegin,
+      onUploadComplete,
+      onUploadError,
+      onUploadProgress
+    ]
+  );
+  const handleDragOver = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        setState("dragging");
+      }
+    },
+    [disabled]
+  );
+  const handleDragLeave = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setState("idle");
+  }, []);
+  const handleDrop = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      const droppedFiles = Array.from(e.dataTransfer.files);
+      if (droppedFiles.length > 0) {
+        uploadFiles(multiple ? droppedFiles : [droppedFiles[0]]);
+      } else {
+        setState("idle");
+      }
+    },
+    [disabled, multiple, uploadFiles]
+  );
+  const handleFileChange = (0, import_react.useCallback)(
+    (e) => {
+      const selectedFiles = e.target.files;
+      if (selectedFiles && selectedFiles.length > 0) {
+        uploadFiles(Array.from(selectedFiles));
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [uploadFiles]
+  );
+  const handleClick = (0, import_react.useCallback)(() => {
+    if (!disabled && state !== "uploading") {
+      inputRef.current?.click();
+    }
+  }, [disabled, state]);
+  const baseStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    border: "2px dashed",
+    borderRadius: "0.5rem",
+    cursor: disabled || state === "uploading" ? "not-allowed" : "pointer",
+    transition: "all 0.2s ease",
+    minHeight: "200px",
+    opacity: disabled ? 0.5 : 1,
+    borderColor: getBorderColor(state),
+    backgroundColor: getBackgroundColor(state)
+  };
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div is used for dropzone drag-and-drop behavior
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className,
+        onClick: handleClick,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleClick();
+          }
+        },
+        role: "button",
+        style: baseStyles,
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              accept,
+              disabled,
+              multiple,
+              onChange: handleFileChange,
+              ref: inputRef,
+              style: { display: "none" },
+              type: "file"
+            }
+          ),
+          state === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UploadingIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { marginTop: "0.5rem", color: "#6b7280" }, children: [
+              "Uploading... ",
+              progress,
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProgressBar, { progress })
+          ] }),
+          state === "complete" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "0.5rem", color: "#16a34a" }, children: "Upload complete!" })
+          ] }),
+          state === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "0.5rem", color: "#dc2626" }, children: errorMessage }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "p",
+              {
+                style: {
+                  marginTop: "0.25rem",
+                  fontSize: "0.875rem",
+                  color: "#6b7280"
+                },
+                children: "Click to try again"
+              }
+            )
+          ] }),
+          (state === "idle" || state === "dragging") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UploadIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "0.5rem", color: "#374151" }, children: state === "dragging" ? "Drop files here" : "Drag & drop files here" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "p",
+              {
+                style: {
+                  marginTop: "0.25rem",
+                  fontSize: "0.875rem",
+                  color: "#6b7280"
+                },
+                children: "or click to browse"
+              }
+            ),
+            maxSize && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "p",
+              {
+                style: {
+                  marginTop: "0.5rem",
+                  fontSize: "0.75rem",
+                  color: "#9ca3af"
+                },
+                children: [
+                  "Max file size: ",
+                  formatBytes(maxSize)
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  );
+}
+async function uploadSingleFile(file, endpoint, route, onProgress) {
+  const client = new import_stow_client.StowClient({ endpoint });
+  const result = await client.uploadFile(file, {
+    route,
+    onProgress: onProgress ? (p) => onProgress(p.loaded) : void 0
+  });
+  return { key: result.key, url: result.url };
+}
+function formatBytes(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 `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UploadDropzone
+});

package/dist/index.mjs

@@ -0,0 +1,424 @@
+"use client";
+
+// src/index.tsx
+import { StowClient } from "@howells/stow-client";
+import {
+  useCallback,
+  useRef,
+  useState
+} from "react";
+
+// src/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function UploadIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#6b7280",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+      ]
+    }
+  );
+}
+function UploadingIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#3b82f6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      style: { animation: "spin 1s linear infinite" },
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }),
+        /* @__PURE__ */ jsx("style", { children: "@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }" })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#16a34a",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "40",
+      stroke: "#dc2626",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      width: "40",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
+        /* @__PURE__ */ jsx("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
+      ]
+    }
+  );
+}
+function ProgressBar({ progress }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        maxWidth: "200px",
+        height: "8px",
+        backgroundColor: "#e5e7eb",
+        borderRadius: "4px",
+        marginTop: "1rem",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: `${progress}%`,
+            height: "100%",
+            backgroundColor: "#3b82f6",
+            borderRadius: "4px",
+            transition: "width 0.2s ease"
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/index.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getBorderColor(state) {
+  if (state === "dragging") {
+    return "#3b82f6";
+  }
+  if (state === "error") {
+    return "#ef4444";
+  }
+  if (state === "complete") {
+    return "#22c55e";
+  }
+  return "#d1d5db";
+}
+function getBackgroundColor(state) {
+  if (state === "dragging") {
+    return "#eff6ff";
+  }
+  if (state === "error") {
+    return "#fef2f2";
+  }
+  if (state === "complete") {
+    return "#f0fdf4";
+  }
+  return "#f9fafb";
+}
+function UploadDropzone({
+  endpoint,
+  route,
+  onUploadComplete,
+  onUploadError,
+  onUploadProgress,
+  onUploadBegin,
+  accept,
+  maxSize,
+  maxFiles = 10,
+  multiple = true,
+  className = "",
+  disabled = false
+}) {
+  const [state, setState] = useState("idle");
+  const [progress, setProgress] = useState(0);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const inputRef = useRef(null);
+  const uploadFiles = useCallback(
+    async (files) => {
+      if (disabled) {
+        return;
+      }
+      if (files.length > maxFiles) {
+        const error = new Error(`Maximum ${maxFiles} files allowed`);
+        setErrorMessage(error.message);
+        setState("error");
+        onUploadError?.(error);
+        return;
+      }
+      if (maxSize) {
+        const oversizedFile = files.find((f) => f.size > maxSize);
+        if (oversizedFile) {
+          const error = new Error(
+            `File "${oversizedFile.name}" exceeds maximum size of ${formatBytes(maxSize)}`
+          );
+          setErrorMessage(error.message);
+          setState("error");
+          onUploadError?.(error);
+          return;
+        }
+      }
+      setState("uploading");
+      setProgress(0);
+      setErrorMessage(null);
+      onUploadBegin?.(files);
+      const results = [];
+      let totalLoaded = 0;
+      const totalSize = files.reduce((sum, f) => sum + f.size, 0);
+      try {
+        for (const file of files) {
+          const result = await uploadSingleFile(
+            file,
+            endpoint,
+            route,
+            (loaded) => {
+              const fileProgress = totalLoaded + loaded;
+              const percent = Math.round(fileProgress / totalSize * 100);
+              setProgress(percent);
+              onUploadProgress?.({
+                file,
+                loaded,
+                total: file.size,
+                percent: Math.round(loaded / file.size * 100)
+              });
+            }
+          );
+          totalLoaded += file.size;
+          results.push({
+            key: result.key,
+            url: result.url,
+            name: file.name,
+            size: file.size,
+            type: file.type
+          });
+        }
+        setState("complete");
+        onUploadComplete?.(results);
+        setTimeout(() => {
+          setState("idle");
+          setProgress(0);
+        }, 2e3);
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error("Upload failed");
+        setErrorMessage(err.message);
+        setState("error");
+        onUploadError?.(err);
+      }
+    },
+    [
+      endpoint,
+      route,
+      maxFiles,
+      maxSize,
+      disabled,
+      onUploadBegin,
+      onUploadComplete,
+      onUploadError,
+      onUploadProgress
+    ]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        setState("dragging");
+      }
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setState("idle");
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      const droppedFiles = Array.from(e.dataTransfer.files);
+      if (droppedFiles.length > 0) {
+        uploadFiles(multiple ? droppedFiles : [droppedFiles[0]]);
+      } else {
+        setState("idle");
+      }
+    },
+    [disabled, multiple, uploadFiles]
+  );
+  const handleFileChange = useCallback(
+    (e) => {
+      const selectedFiles = e.target.files;
+      if (selectedFiles && selectedFiles.length > 0) {
+        uploadFiles(Array.from(selectedFiles));
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [uploadFiles]
+  );
+  const handleClick = useCallback(() => {
+    if (!disabled && state !== "uploading") {
+      inputRef.current?.click();
+    }
+  }, [disabled, state]);
+  const baseStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "2rem",
+    border: "2px dashed",
+    borderRadius: "0.5rem",
+    cursor: disabled || state === "uploading" ? "not-allowed" : "pointer",
+    transition: "all 0.2s ease",
+    minHeight: "200px",
+    opacity: disabled ? 0.5 : 1,
+    borderColor: getBorderColor(state),
+    backgroundColor: getBackgroundColor(state)
+  };
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div is used for dropzone drag-and-drop behavior
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className,
+        onClick: handleClick,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleClick();
+          }
+        },
+        role: "button",
+        style: baseStyles,
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              accept,
+              disabled,
+              multiple,
+              onChange: handleFileChange,
+              ref: inputRef,
+              style: { display: "none" },
+              type: "file"
+            }
+          ),
+          state === "uploading" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(UploadingIcon, {}),
+            /* @__PURE__ */ jsxs2("p", { style: { marginTop: "0.5rem", color: "#6b7280" }, children: [
+              "Uploading... ",
+              progress,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx2(ProgressBar, { progress })
+          ] }),
+          state === "complete" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(CheckIcon, {}),
+            /* @__PURE__ */ jsx2("p", { style: { marginTop: "0.5rem", color: "#16a34a" }, children: "Upload complete!" })
+          ] }),
+          state === "error" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(ErrorIcon, {}),
+            /* @__PURE__ */ jsx2("p", { style: { marginTop: "0.5rem", color: "#dc2626" }, children: errorMessage }),
+            /* @__PURE__ */ jsx2(
+              "p",
+              {
+                style: {
+                  marginTop: "0.25rem",
+                  fontSize: "0.875rem",
+                  color: "#6b7280"
+                },
+                children: "Click to try again"
+              }
+            )
+          ] }),
+          (state === "idle" || state === "dragging") && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(UploadIcon, {}),
+            /* @__PURE__ */ jsx2("p", { style: { marginTop: "0.5rem", color: "#374151" }, children: state === "dragging" ? "Drop files here" : "Drag & drop files here" }),
+            /* @__PURE__ */ jsx2(
+              "p",
+              {
+                style: {
+                  marginTop: "0.25rem",
+                  fontSize: "0.875rem",
+                  color: "#6b7280"
+                },
+                children: "or click to browse"
+              }
+            ),
+            maxSize && /* @__PURE__ */ jsxs2(
+              "p",
+              {
+                style: {
+                  marginTop: "0.5rem",
+                  fontSize: "0.75rem",
+                  color: "#9ca3af"
+                },
+                children: [
+                  "Max file size: ",
+                  formatBytes(maxSize)
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  );
+}
+async function uploadSingleFile(file, endpoint, route, onProgress) {
+  const client = new StowClient({ endpoint });
+  const result = await client.uploadFile(file, {
+    route,
+    onProgress: onProgress ? (p) => onProgress(p.loaded) : void 0
+  });
+  return { key: result.key, url: result.url };
+}
+function formatBytes(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 `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}
+export {
+  UploadDropzone
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@howells/stow-react",
+  "version": "0.1.0",
+  "description": "React components for Stow file storage",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/howells/stow.git",
+    "directory": "packages/stow-react"
+  },
+  "homepage": "https://stow.sh",
+  "keywords": [
+    "stow",
+    "file-storage",
+    "react",
+    "upload",
+    "components"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@howells/stow-client": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
+    "@stow/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --external react --external @howells/stow-client",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --external react --external @howells/stow-client --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}