@nubitio/crud 0.5.15 → 0.5.16

package/dist/index.cjs

@@ -28,7 +28,6 @@ let react_dom = require("react-dom");
 let _nubitio_ui = require("@nubitio/ui");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _nubitio_core = require("@nubitio/core");
-let react_dropzone = require("react-dropzone");
 let _tanstack_react_query = require("@tanstack/react-query");
 //#region packages/crud/crud/defineResource.ts
 const stringResourceCache = /* @__PURE__ */ new Map();
@@ -1243,9 +1242,6 @@ const enumTypeModule = {
 };
 //#endregion
 //#region packages/crud/form/FileUploadField.tsx
-function cx$1(...values) {
-	return values.filter(Boolean).join(" ");
-}
 function resolveMediaPath(media) {
 	if (!media) return null;
 	const path = media["path"];
@@ -1271,27 +1267,6 @@ function resolveMediaIri(uploadUrl, media) {
 function isImageMimeType(mimeType) {
 	return !!mimeType && mimeType.startsWith("image/");
 }
-function buildDropzoneAccept(accept) {
-	if (!accept || accept === "*/*" || accept === "*") return void 0;
-	if (accept === "image/*") return {
-		"image/png": [".png"],
-		"image/jpeg": [".jpg", ".jpeg"],
-		"image/webp": [".webp"],
-		"image/gif": [".gif"]
-	};
-	if (accept.includes(",")) return accept.split(",").reduce((acc, token) => {
-		const trimmed = token.trim();
-		if (!trimmed) return acc;
-		if (trimmed.startsWith(".")) {
-			acc["application/octet-stream"] = [...acc["application/octet-stream"] ?? [], trimmed];
-			return acc;
-		}
-		acc[trimmed] = [];
-		return acc;
-	}, {});
-	if (accept.startsWith(".")) return { "application/octet-stream": [accept] };
-	return { [accept]: [] };
-}
 async function uploadMediaFile(file, uploadUrl, httpClient) {
 	const body = new FormData();
 	body.append("file", file);
@@ -1371,17 +1346,6 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		t,
 		uploadUrl
 	]);
-	const { getRootProps, getInputProps, isDragActive, open } = (0, react_dropzone.useDropzone)({
-		accept: buildDropzoneAccept(field.accept),
-		disabled: disabled || readOnly || status === "uploading",
-		multiple: false,
-		noClick: !!(previewUrl || fileName),
-		noKeyboard: !!(previewUrl || fileName),
-		onDrop: (acceptedFiles) => {
-			const file = acceptedFiles[0];
-			if (file) uploadFile(file);
-		}
-	});
 	const handleClear = () => {
 		revokeLocalPreview();
 		setPreviewUrl(null);
@@ -1391,104 +1355,35 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		setErrorMessage(null);
 		onCleared(field.name);
 	};
-	const isInteractive = !disabled && !readOnly;
-	const hasContent = !!(previewUrl || fileName);
-	const placeholderIcon = imageMode ? "ph-image" : "ph-file-arrow-up";
-	const placeholderTitle = isDragActive ? t("form.fileUploadDrop") : imageMode ? t("form.imageUploadPrompt") : t("form.fileUploadPrompt");
-	const placeholderHint = imageMode ? t("form.imageUploadHint") : t("form.fileUploadHint");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cx$1("nb-form__file-upload", imageMode && "nb-form__file-upload--image", invalid && "nb-form__file-upload--invalid"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			...getRootProps({ className: cx$1("nb-form__file-upload-zone", isDragActive && "nb-form__file-upload-zone--active", hasContent && "nb-form__file-upload-zone--filled", status === "uploading" && "nb-form__file-upload-zone--uploading", !isInteractive && "nb-form__file-upload-zone--disabled") }),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps({
-				id: `nb-form-${field.name}`,
-				"aria-label": field.label
-			}) }), hasContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				previewUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					className: "nb-form__file-upload-preview",
-					src: previewUrl,
-					alt: field.label
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "nb-form__file-upload-file",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-file-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: "ph ph-file" })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "nb-form__file-upload-file-meta",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "nb-form__file-upload-file-name",
-							children: fileName
-						}), fileUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							className: "nb-form__file-upload-file-link",
-							href: fileUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							onClick: (event) => event.stopPropagation(),
-							children: t("form.fileUploadOpen")
-						})]
-					})]
-				}),
-				status === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "nb-form__file-upload-overlay",
-					"aria-live": "polite",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-spinner",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("form.fileUploading") })]
-				}),
-				isInteractive && status !== "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "nb-form__file-upload-actions",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "nb-form__file-upload-action",
-						onClick: (event) => {
-							event.stopPropagation();
-							open();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-							className: "ph ph-arrows-clockwise",
-							"aria-hidden": "true"
-						}), t("form.fileUploadReplace")]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "nb-form__file-upload-action nb-form__file-upload-action--danger",
-						onClick: (event) => {
-							event.stopPropagation();
-							handleClear();
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-							className: "ph ph-trash",
-							"aria-hidden": "true"
-						}), t("form.fileUploadRemove")]
-					})]
-				})
-			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "nb-form__file-upload-placeholder",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: `ph ${placeholderIcon}` })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-title",
-						children: placeholderTitle
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "nb-form__file-upload-hint",
-						children: placeholderHint
-					})
-				]
-			})]
-		}), errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "nb-form__file-upload-error",
-			role: "alert",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-				className: "ph ph-warning-circle",
-				"aria-hidden": "true"
-			}), errorMessage]
-		})]
+	const value = {
+		fileName,
+		fileUrl,
+		previewUrl
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.FileDropzone, {
+		accept: field.accept,
+		disabled,
+		readOnly,
+		invalid,
+		image: imageMode,
+		value,
+		uploading: status === "uploading",
+		error: errorMessage,
+		inputId: `nb-form-${field.name}`,
+		inputLabel: field.label,
+		labels: {
+			dropPrompt: t("form.fileUploadDrop"),
+			prompt: t("form.fileUploadPrompt"),
+			imagePrompt: t("form.imageUploadPrompt"),
+			hint: t("form.fileUploadHint"),
+			imageHint: t("form.imageUploadHint"),
+			uploading: t("form.fileUploading"),
+			replace: t("form.fileUploadReplace"),
+			remove: t("form.fileUploadRemove"),
+			open: t("form.fileUploadOpen")
+		},
+		onFileSelect: (file) => void uploadFile(file),
+		onClear: handleClear
 	});
 }
 function isImageFileField(field) {

package/dist/index.mjs

@@ -1,10 +1,9 @@
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Route, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { createPortal } from "react-dom";
-import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton, Timeline, TimelineItem } from "@nubitio/ui";
+import { AppDialog, AppDropdown, Badge, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, FileDropzone, IconButton, Skeleton, Timeline, TimelineItem } from "@nubitio/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createCrudEvents, createScopedEventBus, getCoreCurrency, getCoreLocale, getCoreTimezone, useCoreHttpClient, useCoreRuntime, useCoreTranslation, useEvents, useMercureSubscription } from "@nubitio/core";
-import { useDropzone } from "react-dropzone";
 import { useQueryClient } from "@tanstack/react-query";
 //#region packages/crud/crud/defineResource.ts
 const stringResourceCache = /* @__PURE__ */ new Map();
@@ -1219,9 +1218,6 @@ const enumTypeModule = {
 };
 //#endregion
 //#region packages/crud/form/FileUploadField.tsx
-function cx$1(...values) {
-	return values.filter(Boolean).join(" ");
-}
 function resolveMediaPath(media) {
 	if (!media) return null;
 	const path = media["path"];
@@ -1247,27 +1243,6 @@ function resolveMediaIri(uploadUrl, media) {
 function isImageMimeType(mimeType) {
 	return !!mimeType && mimeType.startsWith("image/");
 }
-function buildDropzoneAccept(accept) {
-	if (!accept || accept === "*/*" || accept === "*") return void 0;
-	if (accept === "image/*") return {
-		"image/png": [".png"],
-		"image/jpeg": [".jpg", ".jpeg"],
-		"image/webp": [".webp"],
-		"image/gif": [".gif"]
-	};
-	if (accept.includes(",")) return accept.split(",").reduce((acc, token) => {
-		const trimmed = token.trim();
-		if (!trimmed) return acc;
-		if (trimmed.startsWith(".")) {
-			acc["application/octet-stream"] = [...acc["application/octet-stream"] ?? [], trimmed];
-			return acc;
-		}
-		acc[trimmed] = [];
-		return acc;
-	}, {});
-	if (accept.startsWith(".")) return { "application/octet-stream": [accept] };
-	return { [accept]: [] };
-}
 async function uploadMediaFile(file, uploadUrl, httpClient) {
 	const body = new FormData();
 	body.append("file", file);
@@ -1347,17 +1322,6 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		t,
 		uploadUrl
 	]);
-	const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-		accept: buildDropzoneAccept(field.accept),
-		disabled: disabled || readOnly || status === "uploading",
-		multiple: false,
-		noClick: !!(previewUrl || fileName),
-		noKeyboard: !!(previewUrl || fileName),
-		onDrop: (acceptedFiles) => {
-			const file = acceptedFiles[0];
-			if (file) uploadFile(file);
-		}
-	});
 	const handleClear = () => {
 		revokeLocalPreview();
 		setPreviewUrl(null);
@@ -1367,104 +1331,35 @@ function FileUploadField({ field, disabled = false, readOnly = false, invalid =
 		setErrorMessage(null);
 		onCleared(field.name);
 	};
-	const isInteractive = !disabled && !readOnly;
-	const hasContent = !!(previewUrl || fileName);
-	const placeholderIcon = imageMode ? "ph-image" : "ph-file-arrow-up";
-	const placeholderTitle = isDragActive ? t("form.fileUploadDrop") : imageMode ? t("form.imageUploadPrompt") : t("form.fileUploadPrompt");
-	const placeholderHint = imageMode ? t("form.imageUploadHint") : t("form.fileUploadHint");
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx$1("nb-form__file-upload", imageMode && "nb-form__file-upload--image", invalid && "nb-form__file-upload--invalid"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			...getRootProps({ className: cx$1("nb-form__file-upload-zone", isDragActive && "nb-form__file-upload-zone--active", hasContent && "nb-form__file-upload-zone--filled", status === "uploading" && "nb-form__file-upload-zone--uploading", !isInteractive && "nb-form__file-upload-zone--disabled") }),
-			children: [/* @__PURE__ */ jsx("input", { ...getInputProps({
-				id: `nb-form-${field.name}`,
-				"aria-label": field.label
-			}) }), hasContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
-				previewUrl ? /* @__PURE__ */ jsx("img", {
-					className: "nb-form__file-upload-preview",
-					src: previewUrl,
-					alt: field.label
-				}) : /* @__PURE__ */ jsxs("div", {
-					className: "nb-form__file-upload-file",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-file-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ jsx("i", { className: "ph ph-file" })
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "nb-form__file-upload-file-meta",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "nb-form__file-upload-file-name",
-							children: fileName
-						}), fileUrl && /* @__PURE__ */ jsx("a", {
-							className: "nb-form__file-upload-file-link",
-							href: fileUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							onClick: (event) => event.stopPropagation(),
-							children: t("form.fileUploadOpen")
-						})]
-					})]
-				}),
-				status === "uploading" && /* @__PURE__ */ jsxs("div", {
-					className: "nb-form__file-upload-overlay",
-					"aria-live": "polite",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-spinner",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ jsx("span", { children: t("form.fileUploading") })]
-				}),
-				isInteractive && status !== "uploading" && /* @__PURE__ */ jsxs("div", {
-					className: "nb-form__file-upload-actions",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: "nb-form__file-upload-action",
-						onClick: (event) => {
-							event.stopPropagation();
-							open();
-						},
-						children: [/* @__PURE__ */ jsx("i", {
-							className: "ph ph-arrows-clockwise",
-							"aria-hidden": "true"
-						}), t("form.fileUploadReplace")]
-					}), /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: "nb-form__file-upload-action nb-form__file-upload-action--danger",
-						onClick: (event) => {
-							event.stopPropagation();
-							handleClear();
-						},
-						children: [/* @__PURE__ */ jsx("i", {
-							className: "ph ph-trash",
-							"aria-hidden": "true"
-						}), t("form.fileUploadRemove")]
-					})]
-				})
-			] }) : /* @__PURE__ */ jsxs("div", {
-				className: "nb-form__file-upload-placeholder",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-icon",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ jsx("i", { className: `ph ${placeholderIcon}` })
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-title",
-						children: placeholderTitle
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "nb-form__file-upload-hint",
-						children: placeholderHint
-					})
-				]
-			})]
-		}), errorMessage && /* @__PURE__ */ jsxs("span", {
-			className: "nb-form__file-upload-error",
-			role: "alert",
-			children: [/* @__PURE__ */ jsx("i", {
-				className: "ph ph-warning-circle",
-				"aria-hidden": "true"
-			}), errorMessage]
-		})]
+	const value = {
+		fileName,
+		fileUrl,
+		previewUrl
+	};
+	return /* @__PURE__ */ jsx(FileDropzone, {
+		accept: field.accept,
+		disabled,
+		readOnly,
+		invalid,
+		image: imageMode,
+		value,
+		uploading: status === "uploading",
+		error: errorMessage,
+		inputId: `nb-form-${field.name}`,
+		inputLabel: field.label,
+		labels: {
+			dropPrompt: t("form.fileUploadDrop"),
+			prompt: t("form.fileUploadPrompt"),
+			imagePrompt: t("form.imageUploadPrompt"),
+			hint: t("form.fileUploadHint"),
+			imageHint: t("form.imageUploadHint"),
+			uploading: t("form.fileUploading"),
+			replace: t("form.fileUploadReplace"),
+			remove: t("form.fileUploadRemove"),
+			open: t("form.fileUploadOpen")
+		},
+		onFileSelect: (file) => void uploadFile(file),
+		onClear: handleClear
 	});
 }
 function isImageFileField(field) {

package/dist/style.css

@@ -1705,471 +1705,6 @@ html[data-density=compact] .nb-datagrid .nb-badge {
     box-shadow: none;
   }
 }
-.nb-form__file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  width: 100%;
-}
-
-.nb-form__file-upload-zone {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px dashed var(--border-color);
-  border-radius: var(--radius-lg);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  min-height: 112px;
-  overflow: hidden;
-  position: relative;
-  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
-  width: 100%;
-}
-.nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
-  background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--active {
-  background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--filled {
-  border-style: solid;
-  cursor: default;
-  min-height: 88px;
-}
-.nb-form__file-upload-zone--uploading {
-  pointer-events: none;
-}
-.nb-form__file-upload-zone--disabled {
-  cursor: not-allowed;
-  opacity: 0.72;
-}
-.nb-form__file-upload-zone:focus-visible {
-  box-shadow: 0 0 0 3px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone {
-  min-height: 168px;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone--filled {
-  min-height: 180px;
-}
-
-.nb-form__file-upload--invalid .nb-form__file-upload-zone {
-  border-color: var(--error-color);
-}
-
-.nb-form__file-upload-placeholder {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  max-width: 320px;
-  padding: var(--space-4);
-  text-align: center;
-}
-
-.nb-form__file-upload-icon {
-  align-items: center;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border-radius: 999px;
-  color: var(--accent-color);
-  display: inline-flex;
-  font-size: 24px;
-  height: 48px;
-  justify-content: center;
-  width: 48px;
-}
-
-.nb-form__file-upload-title {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-}
-
-.nb-form__file-upload-hint {
-  color: var(--text-tertiary);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-}
-
-.nb-form__file-upload-preview {
-  display: block;
-  height: 100%;
-  max-height: 220px;
-  object-fit: contain;
-  width: 100%;
-}
-
-.nb-form__file-upload-file {
-  align-items: center;
-  display: flex;
-  gap: var(--space-3);
-  max-width: 100%;
-  padding: var(--space-3) var(--space-4);
-  width: 100%;
-}
-
-.nb-form__file-upload-file-icon {
-  align-items: center;
-  background: var(--surface-0);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--accent-color);
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 22px;
-  height: 44px;
-  justify-content: center;
-  width: 44px;
-}
-
-.nb-form__file-upload-file-meta {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.nb-form__file-upload-file-name {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nb-form__file-upload-file-link {
-  color: var(--accent-color);
-  font-size: var(--font-size-xs);
-  text-decoration: none;
-}
-.nb-form__file-upload-file-link:hover {
-  text-decoration: underline;
-}
-
-.nb-form__file-upload-overlay {
-  align-items: center;
-  background: rgba(0, 0, 0, 0.42);
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-  gap: var(--space-2);
-  inset: 0;
-  justify-content: center;
-  position: absolute;
-}
-
-.nb-form__file-upload-spinner {
-  animation: nb-form-file-spin 700ms linear infinite;
-  border: 2px solid rgba(255, 255, 255, 0.35);
-  border-radius: 999px;
-  border-top-color: #fff;
-  height: 24px;
-  width: 24px;
-}
-
-@keyframes nb-form-file-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.nb-form__file-upload-actions {
-  align-items: center;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
-  bottom: 0;
-  display: flex;
-  gap: var(--space-2);
-  inset-inline: 0;
-  justify-content: center;
-  opacity: 0;
-  padding: var(--space-3);
-  position: absolute;
-  transition: opacity var(--transition-base);
-}
-
-.nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
-.nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
-  opacity: 1;
-}
-
-.nb-form__file-upload-action {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  cursor: pointer;
-  display: inline-flex;
-  font: inherit;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  gap: var(--space-1);
-  min-height: 28px;
-  padding: 0 var(--space-2);
-  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
-}
-.nb-form__file-upload-action:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-.nb-form__file-upload-action--danger:hover {
-  border-color: var(--error-color);
-  color: var(--error-color);
-}
-.nb-form__file-upload-action:focus-visible {
-  box-shadow: 0 0 0 2px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload-error {
-  align-items: center;
-  color: var(--error-color);
-  display: inline-flex;
-  font-size: var(--font-size-xs);
-  gap: var(--space-1);
-}
-.nb-form__file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  width: 100%;
-}
-
-.nb-form__file-upload-zone {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px dashed var(--border-color);
-  border-radius: var(--radius-lg);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  min-height: 112px;
-  overflow: hidden;
-  position: relative;
-  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
-  width: 100%;
-}
-.nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
-  background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--active {
-  background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
-  border-color: var(--accent-color);
-}
-.nb-form__file-upload-zone--filled {
-  border-style: solid;
-  cursor: default;
-  min-height: 88px;
-}
-.nb-form__file-upload-zone--uploading {
-  pointer-events: none;
-}
-.nb-form__file-upload-zone--disabled {
-  cursor: not-allowed;
-  opacity: 0.72;
-}
-.nb-form__file-upload-zone:focus-visible {
-  box-shadow: 0 0 0 3px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone {
-  min-height: 168px;
-}
-
-.nb-form__file-upload--image .nb-form__file-upload-zone--filled {
-  min-height: 180px;
-}
-
-.nb-form__file-upload--invalid .nb-form__file-upload-zone {
-  border-color: var(--error-color);
-}
-
-.nb-form__file-upload-placeholder {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  max-width: 320px;
-  padding: var(--space-4);
-  text-align: center;
-}
-
-.nb-form__file-upload-icon {
-  align-items: center;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border-radius: 999px;
-  color: var(--accent-color);
-  display: inline-flex;
-  font-size: 24px;
-  height: 48px;
-  justify-content: center;
-  width: 48px;
-}
-
-.nb-form__file-upload-title {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-}
-
-.nb-form__file-upload-hint {
-  color: var(--text-tertiary);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-}
-
-.nb-form__file-upload-preview {
-  display: block;
-  height: 100%;
-  max-height: 220px;
-  object-fit: contain;
-  width: 100%;
-}
-
-.nb-form__file-upload-file {
-  align-items: center;
-  display: flex;
-  gap: var(--space-3);
-  max-width: 100%;
-  padding: var(--space-3) var(--space-4);
-  width: 100%;
-}
-
-.nb-form__file-upload-file-icon {
-  align-items: center;
-  background: var(--surface-0);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--accent-color);
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 22px;
-  height: 44px;
-  justify-content: center;
-  width: 44px;
-}
-
-.nb-form__file-upload-file-meta {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.nb-form__file-upload-file-name {
-  color: var(--text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nb-form__file-upload-file-link {
-  color: var(--accent-color);
-  font-size: var(--font-size-xs);
-  text-decoration: none;
-}
-.nb-form__file-upload-file-link:hover {
-  text-decoration: underline;
-}
-
-.nb-form__file-upload-overlay {
-  align-items: center;
-  background: rgba(0, 0, 0, 0.42);
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  font-size: var(--font-size-sm);
-  gap: var(--space-2);
-  inset: 0;
-  justify-content: center;
-  position: absolute;
-}
-
-.nb-form__file-upload-spinner {
-  animation: nb-form-file-spin 700ms linear infinite;
-  border: 2px solid rgba(255, 255, 255, 0.35);
-  border-radius: 999px;
-  border-top-color: #fff;
-  height: 24px;
-  width: 24px;
-}
-
-@keyframes nb-form-file-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.nb-form__file-upload-actions {
-  align-items: center;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
-  bottom: 0;
-  display: flex;
-  gap: var(--space-2);
-  inset-inline: 0;
-  justify-content: center;
-  opacity: 0;
-  padding: var(--space-3);
-  position: absolute;
-  transition: opacity var(--transition-base);
-}
-
-.nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
-.nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
-  opacity: 1;
-}
-
-.nb-form__file-upload-action {
-  align-items: center;
-  background: var(--surface-1);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  cursor: pointer;
-  display: inline-flex;
-  font: inherit;
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  gap: var(--space-1);
-  min-height: 28px;
-  padding: 0 var(--space-2);
-  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
-}
-.nb-form__file-upload-action:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-.nb-form__file-upload-action--danger:hover {
-  border-color: var(--error-color);
-  color: var(--error-color);
-}
-.nb-form__file-upload-action:focus-visible {
-  box-shadow: 0 0 0 2px var(--focus-ring-color);
-  outline: none;
-}
-
-.nb-form__file-upload-error {
-  align-items: center;
-  color: var(--error-color);
-  display: inline-flex;
-  font-size: var(--font-size-xs);
-  gap: var(--space-1);
-}
-
 .nb-form {
   color: var(--text-primary);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/crud",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "type": "module",
   "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
   "license": "MIT",
@@ -56,10 +56,7 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/core": "^0.5.15",
-    "@nubitio/ui": "^0.5.15"
-  },
-  "dependencies": {
-    "react-dropzone": "^15.0.0"
+    "@nubitio/core": "^0.5.16",
+    "@nubitio/ui": "^0.5.16"
   }
 }