@cfast/joy 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, ReactElement } from 'react';
-import { ButtonProps } from '@mui/joy/Button';
+import { ButtonProps } from "@mui/joy";
 import { ActionHookResult } from '@cfast/actions/client';
-import { WhenForbidden, ConfirmOptions, ConfirmDialogSlotProps, FormStatusProps, EmptyStateProps, BreadcrumbItem, TabItem, AppShellProps, NavigationItem, UserMenuProps, DataTableProps, FilterBarProps, BulkAction, DropZoneProps, ImagePreviewProps, FileListProps, ListViewProps, DetailViewProps, AvatarWithInitialsProps, RoleBadgeProps, ImpersonationBannerProps } from '@cfast/ui';
+import { WhenForbidden, ConfirmOptions, ConfirmDialogSlotProps, FormStatusProps, EmptyStateProps, BreadcrumbItem, TabItem, AppShellProps, NavigationItem, UserMenuProps, DataTableProps, FilterBarProps, BulkAction, DropZoneProps, ImagePreviewProps, FileListProps, UploadFieldProps, ListViewProps, DetailViewProps, AvatarWithInitialsProps, RoleBadgeProps, ImpersonationBannerProps } from '@cfast/ui';
 export { PermissionGate } from '@cfast/ui';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -124,6 +124,35 @@ declare function ImagePreview({ fileKey, src, getUrl, width, height, fallback, a
  */
 declare function FileList({ files, onDownload, }: FileListProps): ReactElement;
 
+/**
+ * Joy UI styled drop zone + multi-file upload field.
+ *
+ * Same controlled API as the headless `@cfast/ui` `UploadField`: it accepts
+ * a `value` array of R2 keys and emits the new array via `onChange` whenever
+ * an upload completes or a file is removed. The visual layer uses Joy's
+ * `<Box>` (soft variant + dashed border), `<LinearProgress>` per file, and
+ * `<IconButton>` for removals.
+ *
+ * Re-exports the same {@link UploadFieldProps} type from `@cfast/ui` so
+ * consumers can swap implementations without changing prop usage.
+ *
+ * @example
+ * ```tsx
+ * import { UploadField } from "@cfast/joy";
+ *
+ * <UploadField
+ *   filetype="productImages"
+ *   basePath="/uploads"
+ *   multiple
+ *   maxFiles={10}
+ *   accept="image/*"
+ *   value={imageKeys}
+ *   onChange={setImageKeys}
+ * />
+ * ```
+ */
+declare function UploadField({ label, className, filetype, basePath, multiple, maxFiles, accept, maxSize, value, onChange, onError, disabled, uploader, }: UploadFieldProps): ReactElement;
+
 /**
  * Joy UI styled ListView — full page list with filters, table, and pagination.
  */
@@ -196,4 +225,4 @@ declare const joyLoginComponents: {
     ErrorMessage: typeof ErrorMessage;
 };
 
-export { ActionButton, AppShell, AppShellHeader, AppShellSidebar, AvatarWithInitials, BulkActionBar, ConfirmDialog, DataTable, DetailView, DropZone, EmptyState, FileList, FilterBar, FormStatus, ImagePreview, ImpersonationBanner, ListView, NavigationProgress, PageContainer, RoleBadge, ToastProvider, UserMenu, joyLoginComponents };
+export { ActionButton, AppShell, AppShellHeader, AppShellSidebar, AvatarWithInitials, BulkActionBar, ConfirmDialog, DataTable, DetailView, DropZone, EmptyState, FileList, FilterBar, FormStatus, ImagePreview, ImpersonationBanner, ListView, NavigationProgress, PageContainer, RoleBadge, ToastProvider, UploadField, UserMenu, joyLoginComponents };

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/action-button.tsx
 import "react";
-import JoyButton from "@mui/joy/Button";
-import JoyTooltip from "@mui/joy/Tooltip";
+import { Button as JoyButton } from "@mui/joy";
+import { Tooltip as JoyTooltip } from "@mui/joy";
 import { jsx } from "react/jsx-runtime";
 function ActionButton({
   action,
@@ -42,11 +42,11 @@ function ActionButton({
 
 // src/confirm-dialog.tsx
 import "react";
-import Modal from "@mui/joy/Modal";
-import ModalDialog from "@mui/joy/ModalDialog";
-import Typography from "@mui/joy/Typography";
-import Button from "@mui/joy/Button";
-import Stack from "@mui/joy/Stack";
+import { Modal } from "@mui/joy";
+import { ModalDialog } from "@mui/joy";
+import { Typography } from "@mui/joy";
+import { Button } from "@mui/joy";
+import { Stack } from "@mui/joy";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
@@ -108,8 +108,8 @@ function ToastProvider({ children }) {
 
 // src/form-status.tsx
 import "react";
-import Alert from "@mui/joy/Alert";
-import Stack2 from "@mui/joy/Stack";
+import { Alert } from "@mui/joy";
+import { Stack as Stack2 } from "@mui/joy";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function FormStatus({ data }) {
   if (!data) return null;
@@ -140,9 +140,9 @@ function FormStatus({ data }) {
 
 // src/empty-state.tsx
 import "react";
-import Typography2 from "@mui/joy/Typography";
-import Button2 from "@mui/joy/Button";
-import Stack3 from "@mui/joy/Stack";
+import { Typography as Typography2 } from "@mui/joy";
+import { Button as Button2 } from "@mui/joy";
+import { Stack as Stack3 } from "@mui/joy";
 import { useActionStatus } from "@cfast/ui";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function EmptyState({
@@ -191,7 +191,7 @@ function EmptyStateWithAction({
 
 // src/navigation-progress.tsx
 import "react";
-import LinearProgress from "@mui/joy/LinearProgress";
+import { LinearProgress } from "@mui/joy";
 import { useNavigation } from "react-router";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function NavigationProgress() {
@@ -218,10 +218,10 @@ function NavigationProgress() {
 
 // src/page-container.tsx
 import "react";
-import Typography3 from "@mui/joy/Typography";
-import Breadcrumbs from "@mui/joy/Breadcrumbs";
+import { Typography as Typography3 } from "@mui/joy";
+import { Breadcrumbs } from "@mui/joy";
 import { Link } from "react-router";
-import Stack4 from "@mui/joy/Stack";
+import { Stack as Stack4 } from "@mui/joy";
 import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function PageContainer({
   title,
@@ -244,10 +244,10 @@ function PageContainer({
 
 // src/app-shell.tsx
 import "react";
-import Sheet from "@mui/joy/Sheet";
-import List from "@mui/joy/List";
-import ListItem from "@mui/joy/ListItem";
-import ListItemButton from "@mui/joy/ListItemButton";
+import { Sheet } from "@mui/joy";
+import { List } from "@mui/joy";
+import { ListItem } from "@mui/joy";
+import { ListItemButton } from "@mui/joy";
 import { Link as Link2 } from "react-router";
 import { useActionStatus as useActionStatus2 } from "@cfast/ui";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -322,19 +322,19 @@ AppShell.Header = AppShellHeader;
 
 // src/user-menu.tsx
 import "react";
-import Avatar from "@mui/joy/Avatar";
-import Dropdown from "@mui/joy/Dropdown";
-import Menu from "@mui/joy/Menu";
-import MenuItem from "@mui/joy/MenuItem";
-import MenuButton from "@mui/joy/MenuButton";
-import IconButton from "@mui/joy/IconButton";
+import { Avatar } from "@mui/joy";
+import { Dropdown } from "@mui/joy";
+import { Menu } from "@mui/joy";
+import { MenuItem } from "@mui/joy";
+import { MenuButton } from "@mui/joy";
+import { IconButton } from "@mui/joy";
 import { Link as Link3 } from "react-router";
 import { useCurrentUser } from "@cfast/auth/client";
 import { getInitials, useActionStatus as useActionStatus3 } from "@cfast/ui";
 
 // src/role-badge.tsx
 import "react";
-import Chip from "@mui/joy/Chip";
+import { Chip } from "@mui/joy";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var VALID_COLORS = /* @__PURE__ */ new Set(["primary", "neutral", "danger", "success", "warning"]);
 var defaultColors = {
@@ -389,9 +389,9 @@ function PermissionFilteredLink({ link }) {
 
 // src/data-table.tsx
 import { useState, useCallback as useCallback2 } from "react";
-import JoyTable from "@mui/joy/Table";
-import JoySheet from "@mui/joy/Sheet";
-import JoyCheckbox from "@mui/joy/Checkbox";
+import { Table as JoyTable } from "@mui/joy";
+import { Sheet as JoySheet } from "@mui/joy";
+import { Checkbox as JoyCheckbox } from "@mui/joy";
 import { getField, getRecordId } from "@cfast/ui";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function normalizeColumns(columns) {
@@ -508,10 +508,10 @@ function defaultGetId(row) {
 // src/filter-bar.tsx
 import { useCallback as useCallback3 } from "react";
 import { useSearchParams, useNavigate, useLocation } from "react-router";
-import JoyInput from "@mui/joy/Input";
-import JoySelect from "@mui/joy/Select";
-import JoyOption from "@mui/joy/Option";
-import JoyStack from "@mui/joy/Stack";
+import { Input as JoyInput } from "@mui/joy";
+import { Select as JoySelect } from "@mui/joy";
+import { Option as JoyOption } from "@mui/joy";
+import { Stack as JoyStack } from "@mui/joy";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function FilterBar({
   filters,
@@ -595,10 +595,10 @@ function JoyFilterInput({
 
 // src/bulk-action-bar.tsx
 import "react";
-import JoySheet2 from "@mui/joy/Sheet";
-import JoyStack2 from "@mui/joy/Stack";
-import JoyButton2 from "@mui/joy/Button";
-import JoyTypography from "@mui/joy/Typography";
+import { Sheet as JoySheet2 } from "@mui/joy";
+import { Stack as JoyStack2 } from "@mui/joy";
+import { Button as JoyButton2 } from "@mui/joy";
+import { Typography as JoyTypography } from "@mui/joy";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function BulkActionBar({
   selectedCount,
@@ -656,9 +656,9 @@ function BulkActionBar({
 
 // src/drop-zone.tsx
 import { useState as useState2, useCallback as useCallback4, useRef } from "react";
-import JoySheet3 from "@mui/joy/Sheet";
-import JoyTypography2 from "@mui/joy/Typography";
-import JoyLinearProgress from "@mui/joy/LinearProgress";
+import { Sheet as JoySheet3 } from "@mui/joy";
+import { Typography as JoyTypography2 } from "@mui/joy";
+import { LinearProgress as JoyLinearProgress } from "@mui/joy";
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function DropZone({
   upload,
@@ -748,8 +748,8 @@ function DropZone({
 
 // src/image-preview.tsx
 import "react";
-import JoyAspectRatio from "@mui/joy/AspectRatio";
-import JoyTypography3 from "@mui/joy/Typography";
+import { AspectRatio as JoyAspectRatio } from "@mui/joy";
+import { Typography as JoyTypography3 } from "@mui/joy";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function ImagePreview({
   fileKey,
@@ -790,11 +790,11 @@ function ImagePreview({
 
 // src/file-list.tsx
 import "react";
-import JoyList from "@mui/joy/List";
-import JoyListItem from "@mui/joy/ListItem";
-import JoyListItemContent from "@mui/joy/ListItemContent";
-import JoyTypography4 from "@mui/joy/Typography";
-import JoyButton3 from "@mui/joy/Button";
+import { List as JoyList } from "@mui/joy";
+import { ListItem as JoyListItem } from "@mui/joy";
+import { ListItemContent as JoyListItemContent } from "@mui/joy";
+import { Typography as JoyTypography4 } from "@mui/joy";
+import { Button as JoyButton3 } from "@mui/joy";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -825,13 +825,480 @@ function FileList({
   ] }, file.key)) });
 }
 
+// src/upload-field.tsx
+import { useCallback as useCallback5, useId, useRef as useRef2, useState as useState3 } from "react";
+import { Box as JoyBox } from "@mui/joy";
+import { Typography as JoyTypography5 } from "@mui/joy";
+import { LinearProgress as JoyLinearProgress2 } from "@mui/joy";
+import { IconButton as JoyIconButton } from "@mui/joy";
+import { Stack as JoyStack3 } from "@mui/joy";
+import { FormLabel as JoyFormLabel } from "@mui/joy";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function defaultUploader(file, options) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", options.url);
+    xhr.upload.addEventListener("progress", (event) => {
+      if (event.lengthComputable) {
+        options.onProgress(Math.round(event.loaded / event.total * 100));
+      }
+    });
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const parsed = JSON.parse(xhr.responseText);
+          if (typeof parsed.key === "string" && typeof parsed.size === "number" && typeof parsed.type === "string") {
+            resolve({
+              key: parsed.key,
+              size: parsed.size,
+              type: parsed.type,
+              url: typeof parsed.url === "string" ? parsed.url : void 0
+            });
+            return;
+          }
+          reject(new Error("Invalid response from server"));
+        } catch {
+          reject(new Error("Invalid response from server"));
+        }
+      } else {
+        try {
+          const parsed = JSON.parse(xhr.responseText);
+          const detail = typeof parsed.detail === "string" ? parsed.detail : typeof parsed.message === "string" ? parsed.message : `Upload failed (${xhr.status})`;
+          reject(new Error(detail));
+        } catch {
+          reject(new Error(`Upload failed (${xhr.status})`));
+        }
+      }
+    });
+    xhr.addEventListener("error", () => {
+      reject(new Error("Network error during upload"));
+    });
+    if (options.signal) {
+      options.signal.addEventListener("abort", () => {
+        xhr.abort();
+        reject(new Error("Upload cancelled"));
+      });
+    }
+    const formData = new FormData();
+    formData.append("file", file);
+    xhr.send(formData);
+  });
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const fileType = (file.type || "").toLowerCase();
+  const fileName = file.name.toLowerCase();
+  for (const token of tokens) {
+    if (token.startsWith(".")) {
+      if (fileName.endsWith(token)) return true;
+    } else if (token.endsWith("/*")) {
+      const prefix = token.slice(0, -1);
+      if (fileType.startsWith(prefix)) return true;
+    } else if (token === fileType) {
+      return true;
+    }
+  }
+  return false;
+}
+function formatBytes2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function looksLikeImageKey(key) {
+  return /\.(png|jpe?g|webp|gif|avif|svg)(\?|$)/i.test(key);
+}
+function UploadField({
+  label,
+  className,
+  filetype,
+  basePath = "/uploads",
+  multiple = false,
+  maxFiles,
+  accept,
+  maxSize,
+  value,
+  onChange,
+  onError,
+  disabled = false,
+  uploader = defaultUploader
+}) {
+  const [files, setFiles] = useState3([]);
+  const [isDragOver, setIsDragOver] = useState3(false);
+  const [globalError, setGlobalError] = useState3(null);
+  const inputRef = useRef2(null);
+  const reactId = useId();
+  const normalizedBase = `/${basePath.replace(/^\/+|\/+$/g, "")}`;
+  const uploadUrl = `${normalizedBase}/${filetype}`;
+  const effectiveMax = maxFiles ?? (multiple ? Number.POSITIVE_INFINITY : 1);
+  const currentValue = value ?? [];
+  const appendKey = useCallback5(
+    (key) => {
+      const next = [...currentValue, key];
+      onChange?.(next);
+    },
+    [currentValue, onChange]
+  );
+  const removeKey = useCallback5(
+    (key) => {
+      const next = currentValue.filter((k) => k !== key);
+      onChange?.(next);
+    },
+    [currentValue, onChange]
+  );
+  const removeTrackerEntry = useCallback5((id) => {
+    setFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+  const handleFiles = useCallback5(
+    async (incoming) => {
+      if (disabled) return;
+      setGlobalError(null);
+      const list = Array.from(incoming);
+      if (list.length === 0) return;
+      const inFlight = files.filter((f) => f.status !== "error").length;
+      const remainingSlots = effectiveMax - currentValue.length - inFlight;
+      if (remainingSlots <= 0) {
+        setGlobalError(
+          `Maximum of ${effectiveMax} file${effectiveMax === 1 ? "" : "s"} reached`
+        );
+        return;
+      }
+      if (list.length > remainingSlots) {
+        setGlobalError(
+          `Only ${remainingSlots} more file${remainingSlots === 1 ? "" : "s"} allowed`
+        );
+        list.length = remainingSlots;
+      }
+      const accepted = [];
+      for (const file of list) {
+        const id = `${reactId}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        if (!matchesAccept(file, accept)) {
+          const errEntry = {
+            id,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            status: "error",
+            error: `${file.type || "file"} is not an accepted type`
+          };
+          accepted.push({ entry: errEntry, file });
+          onError?.(errEntry);
+          continue;
+        }
+        if (maxSize != null && file.size > maxSize) {
+          const errEntry = {
+            id,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            status: "error",
+            error: `File is ${formatBytes2(file.size)} but max is ${formatBytes2(maxSize)}`
+          };
+          accepted.push({ entry: errEntry, file });
+          onError?.(errEntry);
+          continue;
+        }
+        accepted.push({
+          entry: {
+            id,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            progress: 0,
+            status: "pending"
+          },
+          file
+        });
+      }
+      setFiles((prev) => [...prev, ...accepted.map((a) => a.entry)]);
+      for (const { entry, file } of accepted) {
+        if (entry.status === "error") continue;
+        setFiles(
+          (prev) => prev.map(
+            (f) => f.id === entry.id ? { ...f, status: "uploading" } : f
+          )
+        );
+        try {
+          const result = await uploader(file, {
+            url: uploadUrl,
+            onProgress: (percent) => {
+              setFiles(
+                (prev) => prev.map(
+                  (f) => f.id === entry.id ? { ...f, progress: percent } : f
+                )
+              );
+            }
+          });
+          setFiles(
+            (prev) => prev.map(
+              (f) => f.id === entry.id ? { ...f, status: "success", progress: 100, key: result.key } : f
+            )
+          );
+          appendKey(result.key);
+          setFiles((prev) => prev.filter((f) => f.id !== entry.id));
+        } catch (e) {
+          const message = e instanceof Error ? e.message : String(e);
+          const errEntry = {
+            ...entry,
+            status: "error",
+            error: message
+          };
+          setFiles(
+            (prev) => prev.map((f) => f.id === entry.id ? errEntry : f)
+          );
+          onError?.(errEntry);
+        }
+      }
+    },
+    [
+      accept,
+      appendKey,
+      currentValue.length,
+      disabled,
+      effectiveMax,
+      files,
+      maxSize,
+      onError,
+      reactId,
+      uploadUrl,
+      uploader
+    ]
+  );
+  const handleDrop = useCallback5(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      void handleFiles(e.dataTransfer.files);
+    },
+    [handleFiles]
+  );
+  const handleDragOver = useCallback5(
+    (e) => {
+      e.preventDefault();
+      if (!disabled) setIsDragOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback5(() => {
+    setIsDragOver(false);
+  }, []);
+  const handleClick = useCallback5(() => {
+    if (disabled) return;
+    inputRef.current?.click();
+  }, [disabled]);
+  return /* @__PURE__ */ jsxs12(JoyBox, { className, "data-cfast-upload-field": filetype, children: [
+    label != null ? /* @__PURE__ */ jsx17(JoyFormLabel, { htmlFor: `${reactId}-input`, sx: { mb: 0.5 }, children: label }) : null,
+    /* @__PURE__ */ jsx17(
+      JoyBox,
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        "data-drag-over": isDragOver,
+        "data-testid": "upload-field-drop-zone",
+        onClick: handleClick,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        sx: {
+          borderStyle: "dashed",
+          borderWidth: 2,
+          borderColor: isDragOver ? "primary.400" : "neutral.outlinedBorder",
+          borderRadius: "md",
+          p: 4,
+          textAlign: "center",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          backgroundColor: "background.level1",
+          transition: "border-color 0.2s",
+          "&:hover": disabled ? void 0 : { borderColor: "primary.300" }
+        },
+        children: /* @__PURE__ */ jsx17(JoyTypography5, { level: "body-sm", color: "neutral", children: multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse" })
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      "input",
+      {
+        ref: inputRef,
+        id: `${reactId}-input`,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        style: { display: "none" },
+        onChange: (e) => {
+          void handleFiles(e.target.files ?? []);
+          e.target.value = "";
+        },
+        "data-testid": "upload-field-input"
+      }
+    ),
+    globalError != null ? /* @__PURE__ */ jsx17(
+      JoyTypography5,
+      {
+        role: "alert",
+        "data-testid": "upload-field-global-error",
+        color: "danger",
+        level: "body-sm",
+        sx: { mt: 1 },
+        children: globalError
+      }
+    ) : null,
+    currentValue.length > 0 ? /* @__PURE__ */ jsx17(
+      JoyStack3,
+      {
+        spacing: 1,
+        sx: { mt: 1 },
+        "data-testid": "upload-field-value-list",
+        children: currentValue.map((key) => /* @__PURE__ */ jsxs12(
+          JoyBox,
+          {
+            "data-testid": "upload-field-value-item",
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              p: 1,
+              borderRadius: "sm",
+              backgroundColor: "background.level1"
+            },
+            children: [
+              looksLikeImageKey(key) ? /* @__PURE__ */ jsx17(
+                JoyBox,
+                {
+                  component: "img",
+                  src: `${normalizedBase}/${key.replace(/^\/+/, "")}`,
+                  alt: key,
+                  sx: {
+                    width: 40,
+                    height: 40,
+                    objectFit: "cover",
+                    borderRadius: "sm"
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx17(
+                JoyTypography5,
+                {
+                  level: "body-sm",
+                  sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" },
+                  children: key
+                }
+              ),
+              /* @__PURE__ */ jsx17(
+                JoyIconButton,
+                {
+                  size: "sm",
+                  variant: "plain",
+                  color: "danger",
+                  "aria-label": `Remove ${key}`,
+                  disabled,
+                  onClick: () => removeKey(key),
+                  children: "\xD7"
+                }
+              )
+            ]
+          },
+          key
+        ))
+      }
+    ) : null,
+    files.length > 0 ? /* @__PURE__ */ jsx17(
+      JoyStack3,
+      {
+        spacing: 1,
+        sx: { mt: 1 },
+        "data-testid": "upload-field-tracker",
+        children: files.map((file) => /* @__PURE__ */ jsxs12(
+          JoyBox,
+          {
+            "data-testid": "upload-field-tracker-item",
+            "data-status": file.status,
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.5,
+              p: 1,
+              borderRadius: "sm",
+              backgroundColor: "background.level1"
+            },
+            children: [
+              /* @__PURE__ */ jsxs12(
+                JoyBox,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx17(JoyTypography5, { level: "body-sm", sx: { flex: 1 }, children: file.name }),
+                    /* @__PURE__ */ jsx17(
+                      JoyTypography5,
+                      {
+                        level: "body-xs",
+                        color: "neutral",
+                        children: formatBytes2(file.size)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx17(
+                      JoyIconButton,
+                      {
+                        size: "sm",
+                        variant: "plain",
+                        color: "neutral",
+                        "aria-label": `Dismiss ${file.name}`,
+                        onClick: () => removeTrackerEntry(file.id),
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              ),
+              file.status === "uploading" ? /* @__PURE__ */ jsx17(
+                JoyLinearProgress2,
+                {
+                  "data-testid": "upload-field-progress",
+                  determinate: true,
+                  value: file.progress
+                }
+              ) : null,
+              file.status === "error" && file.error != null ? /* @__PURE__ */ jsx17(
+                JoyTypography5,
+                {
+                  role: "alert",
+                  "data-testid": "upload-field-file-error",
+                  color: "danger",
+                  level: "body-xs",
+                  children: file.error
+                }
+              ) : null
+            ]
+          },
+          file.id
+        ))
+      }
+    ) : null
+  ] });
+}
+
 // src/list-view.tsx
-import { useState as useState3, useCallback as useCallback5 } from "react";
-import JoyButton4 from "@mui/joy/Button";
-import JoyStack3 from "@mui/joy/Stack";
-import JoyTypography5 from "@mui/joy/Typography";
+import { useState as useState4, useCallback as useCallback6 } from "react";
+import { Button as JoyButton4 } from "@mui/joy";
+import { Stack as JoyStack4 } from "@mui/joy";
+import { Typography as JoyTypography6 } from "@mui/joy";
 import { useActionStatus as useActionStatus4 } from "@cfast/ui";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function ListView({
   title,
   data,
@@ -846,8 +1313,8 @@ function ListView({
   bulkActions,
   breadcrumb
 }) {
-  const [selectedRows, setSelectedRows] = useState3([]);
-  const handleBulkAction = useCallback5(
+  const [selectedRows, setSelectedRows] = useState4([]);
+  const handleBulkAction = useCallback6(
     (action) => {
       if (action.handler) {
         action.handler(selectedRows);
@@ -855,13 +1322,13 @@ function ListView({
     },
     [selectedRows]
   );
-  const clearSelection = useCallback5(() => {
+  const clearSelection = useCallback6(() => {
     setSelectedRows([]);
   }, []);
-  const createButton = createAction ? /* @__PURE__ */ jsx17(CreateButton, { action: createAction, label: createLabel }) : null;
-  return /* @__PURE__ */ jsx17(PageContainer, { title, breadcrumb, actions: createButton, children: /* @__PURE__ */ jsxs12(JoyStack3, { spacing: 2, children: [
-    filters && filters.length > 0 ? /* @__PURE__ */ jsx17(FilterBar, { filters, searchable }) : null,
-    selectable && bulkActions && bulkActions.length > 0 ? /* @__PURE__ */ jsx17(
+  const createButton = createAction ? /* @__PURE__ */ jsx18(CreateButton, { action: createAction, label: createLabel }) : null;
+  return /* @__PURE__ */ jsx18(PageContainer, { title, breadcrumb, actions: createButton, children: /* @__PURE__ */ jsxs13(JoyStack4, { spacing: 2, children: [
+    filters && filters.length > 0 ? /* @__PURE__ */ jsx18(FilterBar, { filters, searchable }) : null,
+    selectable && bulkActions && bulkActions.length > 0 ? /* @__PURE__ */ jsx18(
       BulkActionBar,
       {
         selectedCount: selectedRows.length,
@@ -870,7 +1337,7 @@ function ListView({
         onClearSelection: clearSelection
       }
     ) : null,
-    data.items.length === 0 && !data.isLoading ? /* @__PURE__ */ jsx17(
+    data.items.length === 0 && !data.isLoading ? /* @__PURE__ */ jsx18(
       EmptyState,
       {
         title: `No ${title.toLowerCase()} found`,
@@ -878,7 +1345,7 @@ function ListView({
         createAction,
         createLabel
       }
-    ) : /* @__PURE__ */ jsx17(
+    ) : /* @__PURE__ */ jsx18(
       DataTable,
       {
         data,
@@ -888,8 +1355,8 @@ function ListView({
         onSelectionChange: selectable ? (rows) => setSelectedRows(rows) : void 0
       }
     ),
-    data.totalPages && data.totalPages > 1 && data.goToPage ? /* @__PURE__ */ jsxs12(JoyStack3, { direction: "row", justifyContent: "center", alignItems: "center", spacing: 2, children: [
-      /* @__PURE__ */ jsx17(
+    data.totalPages && data.totalPages > 1 && data.goToPage ? /* @__PURE__ */ jsxs13(JoyStack4, { direction: "row", justifyContent: "center", alignItems: "center", spacing: 2, children: [
+      /* @__PURE__ */ jsx18(
         JoyButton4,
         {
           size: "sm",
@@ -899,8 +1366,8 @@ function ListView({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsx17(JoyTypography5, { level: "body-sm", children: `Page ${data.currentPage ?? 1} of ${data.totalPages}` }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(JoyTypography6, { level: "body-sm", children: `Page ${data.currentPage ?? 1} of ${data.totalPages}` }),
+      /* @__PURE__ */ jsx18(
         JoyButton4,
         {
           size: "sm",
@@ -911,19 +1378,19 @@ function ListView({
         }
       )
     ] }) : null,
-    data.hasMore && data.loadMore ? /* @__PURE__ */ jsx17(JoyStack3, { alignItems: "center", children: /* @__PURE__ */ jsx17(JoyButton4, { variant: "soft", onClick: data.loadMore, children: "Load more" }) }) : null
+    data.hasMore && data.loadMore ? /* @__PURE__ */ jsx18(JoyStack4, { alignItems: "center", children: /* @__PURE__ */ jsx18(JoyButton4, { variant: "soft", onClick: data.loadMore, children: "Load more" }) }) : null
   ] }) });
 }
 function CreateButton({ action, label }) {
   const status = useActionStatus4(action);
-  return /* @__PURE__ */ jsx17(ActionButton, { action: status, variant: "solid", color: "primary", children: label });
+  return /* @__PURE__ */ jsx18(ActionButton, { action: status, variant: "solid", color: "primary", children: label });
 }
 
 // src/detail-view.tsx
-import JoyGrid from "@mui/joy/Grid";
-import JoyTypography6 from "@mui/joy/Typography";
+import { Grid as JoyGrid } from "@mui/joy";
+import { Typography as JoyTypography7 } from "@mui/joy";
 import { fieldForColumn, getField as getField2 } from "@cfast/ui";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function normalizeFields(fields) {
   if (!fields) return [];
   return fields.map((col) => {
@@ -946,12 +1413,12 @@ function DetailView({
 }) {
   const fields = normalizeFields(fieldsProp);
   const displayFields = fields.length > 0 ? fields : inferFieldsFromRecord(record, exclude);
-  return /* @__PURE__ */ jsx18(PageContainer, { title, breadcrumb, children: /* @__PURE__ */ jsx18(JoyGrid, { container: true, spacing: 2, children: displayFields.map((field) => {
+  return /* @__PURE__ */ jsx19(PageContainer, { title, breadcrumb, children: /* @__PURE__ */ jsx19(JoyGrid, { container: true, spacing: 2, children: displayFields.map((field) => {
     const value = getField2(record, field.key);
     const FieldComponent = field.render ? null : resolveFieldComponent(field.key, table);
-    return /* @__PURE__ */ jsxs13(JoyGrid, { xs: 12, md: 6, children: [
-      /* @__PURE__ */ jsx18(
-        JoyTypography6,
+    return /* @__PURE__ */ jsxs14(JoyGrid, { xs: 12, md: 6, children: [
+      /* @__PURE__ */ jsx19(
+        JoyTypography7,
         {
           level: "body-xs",
           textTransform: "uppercase",
@@ -960,7 +1427,7 @@ function DetailView({
           children: field.label ?? field.key
         }
       ),
-      /* @__PURE__ */ jsx18("div", { children: field.render ? field.render(value, record) : FieldComponent ? /* @__PURE__ */ jsx18(FieldComponent, { value }) : String(value ?? "\u2014") })
+      /* @__PURE__ */ jsx19("div", { children: field.render ? field.render(value, record) : FieldComponent ? /* @__PURE__ */ jsx19(FieldComponent, { value }) : String(value ?? "\u2014") })
     ] }, field.key);
   }) }) });
 }
@@ -982,25 +1449,25 @@ function resolveFieldComponent(_key, table) {
 
 // src/avatar-with-initials.tsx
 import "react";
-import Avatar2 from "@mui/joy/Avatar";
+import { Avatar as Avatar2 } from "@mui/joy";
 import { getInitials as getInitials2 } from "@cfast/ui";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function AvatarWithInitials({
   src,
   name,
   size = "md"
 }) {
-  return /* @__PURE__ */ jsx19(Avatar2, { src: src ?? void 0, alt: name, size, children: getInitials2(name) });
+  return /* @__PURE__ */ jsx20(Avatar2, { src: src ?? void 0, alt: name, size, children: getInitials2(name) });
 }
 
 // src/impersonation-banner.tsx
 import "react";
-import Sheet2 from "@mui/joy/Sheet";
-import Typography4 from "@mui/joy/Typography";
-import Button3 from "@mui/joy/Button";
-import Stack5 from "@mui/joy/Stack";
+import { Sheet as Sheet2 } from "@mui/joy";
+import { Typography as Typography4 } from "@mui/joy";
+import { Button as Button3 } from "@mui/joy";
+import { Stack as Stack5 } from "@mui/joy";
 import { useCurrentUser as useCurrentUser2 } from "@cfast/auth/client";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function ImpersonationBanner({
   stopAction = "/admin/stop-impersonation"
 }) {
@@ -1008,7 +1475,7 @@ function ImpersonationBanner({
   if (!user?.isImpersonating) {
     return null;
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Sheet2,
     {
       color: "warning",
@@ -1020,9 +1487,9 @@ function ImpersonationBanner({
         py: 1,
         px: 3
       },
-      children: /* @__PURE__ */ jsxs14(Stack5, { direction: "row", spacing: 2, alignItems: "center", justifyContent: "center", children: [
-        /* @__PURE__ */ jsx20(Typography4, { level: "body-sm", sx: { fontWeight: "bold" }, children: `Viewing as ${user.name} (${user.email})` }),
-        /* @__PURE__ */ jsx20("form", { method: "post", action: stopAction, children: /* @__PURE__ */ jsx20(Button3, { size: "sm", variant: "outlined", color: "warning", type: "submit", children: "Stop Impersonating" }) })
+      children: /* @__PURE__ */ jsxs15(Stack5, { direction: "row", spacing: 2, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx21(Typography4, { level: "body-sm", sx: { fontWeight: "bold" }, children: `Viewing as ${user.name} (${user.email})` }),
+        /* @__PURE__ */ jsx21("form", { method: "post", action: stopAction, children: /* @__PURE__ */ jsx21(Button3, { size: "sm", variant: "outlined", color: "warning", type: "submit", children: "Stop Impersonating" }) })
       ] })
     }
   );
@@ -1032,15 +1499,15 @@ function ImpersonationBanner({
 import { PermissionGate } from "@cfast/ui";
 
 // src/login-components.tsx
-import Box from "@mui/joy/Box";
-import Card from "@mui/joy/Card";
-import Input from "@mui/joy/Input";
-import Button4 from "@mui/joy/Button";
-import Alert2 from "@mui/joy/Alert";
-import Divider from "@mui/joy/Divider";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Box } from "@mui/joy";
+import { Card } from "@mui/joy";
+import { Input } from "@mui/joy";
+import { Button as Button4 } from "@mui/joy";
+import { Alert as Alert2 } from "@mui/joy";
+import { Divider } from "@mui/joy";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function Layout({ children }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Box,
     {
       sx: {
@@ -1050,7 +1517,7 @@ function Layout({ children }) {
         minHeight: "100vh",
         bgcolor: "background.surface"
       },
-      children: /* @__PURE__ */ jsx21(Card, { variant: "outlined", sx: { maxWidth: 400, width: "100%", p: 4 }, children })
+      children: /* @__PURE__ */ jsx22(Card, { variant: "outlined", sx: { maxWidth: 400, width: "100%", p: 4 }, children })
     }
   );
 }
@@ -1058,7 +1525,7 @@ function EmailInput({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Input,
     {
       type: "email",
@@ -1074,7 +1541,7 @@ function MagicLinkButton({
   onClick,
   loading
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Button4,
     {
       onClick,
@@ -1089,9 +1556,9 @@ function PasskeyButton({
   onClick,
   loading
 }) {
-  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
-    /* @__PURE__ */ jsx21(Divider, { children: "or" }),
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+    /* @__PURE__ */ jsx22(Divider, { children: "or" }),
+    /* @__PURE__ */ jsx22(
       Button4,
       {
         variant: "outlined",
@@ -1106,14 +1573,14 @@ function PasskeyButton({
   ] });
 }
 function SuccessMessage({ email }) {
-  return /* @__PURE__ */ jsxs15(Alert2, { color: "success", children: [
+  return /* @__PURE__ */ jsxs16(Alert2, { color: "success", children: [
     "Check your email (",
     email,
     ") for a magic link. Click the link to sign in."
   ] });
 }
 function ErrorMessage({ error }) {
-  return /* @__PURE__ */ jsx21(Alert2, { color: "danger", sx: { mb: 2 }, children: error });
+  return /* @__PURE__ */ jsx22(Alert2, { color: "danger", sx: { mb: 2 }, children: error });
 }
 var joyLoginComponents = {
   Layout,
@@ -1146,6 +1613,7 @@ export {
   PermissionGate,
   RoleBadge,
   ToastProvider,
+  UploadField,
   UserMenu,
   joyLoginComponents
 };

package/llms.txt

@@ -32,6 +32,7 @@ Use `@cfast/joy` when you want MUI Joy UI styled implementations of `@cfast/ui`
 - `DropZone` -- drag-and-drop upload. Integrates with `@cfast/storage`'s `useUpload()`.
 - `ImagePreview` -- displays image from storage with signed URL handling.
 - `FileList` -- list of uploaded files with download/delete.
+- `UploadField` -- controlled multi-file upload field. Joy-styled variant of `@cfast/ui`'s `UploadField` with dashed drop zone, per-file `<LinearProgress>`, and inline image previews. Reports the set of uploaded R2 keys through `value` / `onChange` so it drops straight into `react-hook-form` — or is picked up automatically by `@cfast/forms/joy` when a Drizzle column uses the `upload()` helper.
 
 ### Composite views
 - `ListView` -- full page: title + filters + data table + pagination + empty state + bulk actions.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfast/joy",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Joy UI plugin for @cfast/ui — styled components powered by MUI Joy",
   "license": "MIT",
   "repository": {
@@ -26,21 +26,44 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@cfast/actions": ">=0.1.0 <0.3.0",
+    "@cfast/auth": ">=0.3.0 <0.5.0",
+    "@cfast/ui": ">=0.2.0 <0.4.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/joy": ">=5.0.0-beta.0",
     "react": ">=19",
     "react-dom": ">=19",
     "react-router": ">=7"
   },
+  "peerDependenciesMeta": {
+    "@cfast/actions": {
+      "optional": false
+    },
+    "@cfast/auth": {
+      "optional": false
+    },
+    "@cfast/ui": {
+      "optional": false
+    },
+    "@emotion/react": {
+      "optional": false
+    },
+    "@emotion/styled": {
+      "optional": false
+    },
+    "@mui/joy": {
+      "optional": false
+    }
+  },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/joy": "^5.0.0-beta.52",
     "@mui/material": "^6.5.0",
-    "sonner": "^2.0.3",
-    "@cfast/ui": "0.2.1",
-    "@cfast/actions": "0.1.1",
-    "@cfast/auth": "0.2.2"
+    "sonner": "^2.0.3"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/joy": "^5.0.0-beta.52",
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@testing-library/react": "^16.3.0",
@@ -54,11 +77,14 @@
     "storybook": "^8.6.14",
     "tsup": "^8",
     "typescript": "^5.7",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.0",
+    "@cfast/actions": "0.1.2",
+    "@cfast/auth": "0.4.0",
+    "@cfast/ui": "0.3.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts",
-    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "build": "tsup src/index.ts --format esm --dts && node ../../scripts/fix-mui-joy-imports.mjs dist",
+    "dev": "tsup src/index.ts --format esm --dts --watch --onSuccess \"node ../../scripts/fix-mui-joy-imports.mjs dist\"",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
     "test": "vitest run",