@nubitio/ui 0.5.15 → 0.5.16

package/dist/index.cjs

@@ -25,6 +25,7 @@ let react = require("react");
 react = __toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
+let react_dropzone = require("react-dropzone");
 //#region packages/ui/Avatar.tsx
 /**
 * 8 semantic hues aligned with the Fluent / @nubitio design palette.
@@ -83,13 +84,13 @@ const Avatar = ({ owner = "", size, variant = "md", shape = "circle", alt, class
 };
 //#endregion
 //#region packages/ui/Button.tsx
-const cx$4 = (...values) => values.filter(Boolean).join(" ");
+const cx$5 = (...values) => values.filter(Boolean).join(" ");
 const Button = ({ variant = "secondary", size = "md", fullWidth = false, icon, loading = false, className, children, disabled, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	...props,
 	type: props.type ?? "button",
 	disabled: disabled || loading,
 	"aria-busy": loading || void 0,
-	className: cx$4("nb-button", `nb-button--${variant}`, size === "sm" && "nb-button--sm", fullWidth && "nb-button--full", className),
+	className: cx$5("nb-button", `nb-button--${variant}`, size === "sm" && "nb-button--sm", fullWidth && "nb-button--full", className),
 	children: [loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "nb-button-spinner",
 		"aria-hidden": "true"
@@ -103,7 +104,7 @@ const IconButton = ({ icon, label, variant = "default", className, ...props }) =
 	type: props.type ?? "button",
 	"aria-label": props["aria-label"] ?? label,
 	title: props.title ?? label,
-	className: cx$4("nb-icon-button", variant === "danger" && "nb-icon-button--danger", className),
+	className: cx$5("nb-icon-button", variant === "danger" && "nb-icon-button--danger", className),
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
 		className: icon,
 		"aria-hidden": "true"
@@ -352,10 +353,10 @@ const Card = ({ title, description, children }) => {
 };
 //#endregion
 //#region packages/ui/FormControls.tsx
-const cx$3 = (...values) => values.filter(Boolean).join(" ");
+const cx$4 = (...values) => values.filter(Boolean).join(" ");
 const FormField = ({ label, error, helpText, children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 	...props,
-	className: cx$3("nb-form-field", !!error && "nb-form-field--error", className),
+	className: cx$4("nb-form-field", !!error && "nb-form-field--error", className),
 	children: [
 		label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "nb-form-field__label",
@@ -376,14 +377,14 @@ const TextField = (0, react.forwardRef)(function TextField({ className, invalid,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 		...props,
 		ref,
-		className: cx$3("nb-input", invalid && "nb-input--invalid", className)
+		className: cx$4("nb-input", invalid && "nb-input--invalid", className)
 	});
 });
 const SelectField = (0, react.forwardRef)(function SelectField({ className, invalid, children, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
 		...props,
 		ref,
-		className: cx$3("nb-input", "nb-select", invalid && "nb-input--invalid", className),
+		className: cx$4("nb-input", "nb-select", invalid && "nb-input--invalid", className),
 		children
 	});
 });
@@ -391,10 +392,151 @@ const TextAreaField = (0, react.forwardRef)(function TextAreaField({ className,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		...props,
 		ref,
-		className: cx$3("nb-input", "nb-textarea", invalid && "nb-input--invalid", className)
+		className: cx$4("nb-input", "nb-textarea", invalid && "nb-input--invalid", className)
 	});
 });
 //#endregion
+//#region packages/ui/FileDropzone.tsx
+function cx$3(...values) {
+	return values.filter(Boolean).join(" ");
+}
+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]: [] };
+}
+function FileDropzone({ accept, value = null, image = false, disabled = false, readOnly = false, invalid = false, uploading = false, error = null, labels, inputId, inputLabel, className, onFileSelect, onClear }) {
+	const previewUrl = value?.previewUrl ?? null;
+	const fileName = value?.fileName ?? null;
+	const fileUrl = value?.fileUrl ?? null;
+	const hasContent = !!(previewUrl || fileName);
+	const isInteractive = !disabled && !readOnly;
+	const { getRootProps, getInputProps, isDragActive, open } = (0, react_dropzone.useDropzone)({
+		accept: buildDropzoneAccept(accept),
+		disabled: disabled || readOnly || uploading,
+		multiple: false,
+		noClick: hasContent,
+		noKeyboard: hasContent,
+		onDrop: (acceptedFiles) => {
+			const file = acceptedFiles[0];
+			if (file) onFileSelect(file);
+		}
+	});
+	const placeholderIcon = image ? "ph-image" : "ph-file-arrow-up";
+	const placeholderTitle = isDragActive ? labels?.dropPrompt ?? "Drop file here" : image ? labels?.imagePrompt ?? "Drop image here or click to browse" : labels?.prompt ?? "Drop file here or click to browse";
+	const placeholderHint = image ? labels?.imageHint ?? "PNG, JPG, WebP or GIF" : labels?.hint ?? "Select one file";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cx$3("nb-file-dropzone", image && "nb-file-dropzone--image", invalid && "nb-file-dropzone--invalid", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			...getRootProps({ className: cx$3("nb-file-dropzone__zone", isDragActive && "nb-file-dropzone__zone--active", hasContent && "nb-file-dropzone__zone--filled", uploading && "nb-file-dropzone__zone--uploading", !isInteractive && "nb-file-dropzone__zone--disabled") }),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...getInputProps({
+				id: inputId,
+				"aria-label": inputLabel
+			}) }), hasContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				previewUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					className: "nb-file-dropzone__preview",
+					src: previewUrl,
+					alt: inputLabel ?? fileName ?? ""
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-file-dropzone__file",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "nb-file-dropzone__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-file-dropzone__file-meta",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "nb-file-dropzone__file-name",
+							children: fileName
+						}), fileUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "nb-file-dropzone__file-link",
+							href: fileUrl,
+							target: "_blank",
+							rel: "noreferrer",
+							onClick: (event) => event.stopPropagation(),
+							children: labels?.open ?? "Open"
+						})]
+					})]
+				}),
+				uploading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-file-dropzone__overlay",
+					"aria-live": "polite",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "nb-file-dropzone__spinner",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels?.uploading ?? "Uploading..." })]
+				}),
+				isInteractive && !uploading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "nb-file-dropzone__actions",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "nb-file-dropzone__action",
+						onClick: (event) => {
+							event.stopPropagation();
+							open();
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+							className: "ph ph-arrows-clockwise",
+							"aria-hidden": "true"
+						}), labels?.replace ?? "Replace"]
+					}), onClear && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "nb-file-dropzone__action nb-file-dropzone__action--danger",
+						onClick: (event) => {
+							event.stopPropagation();
+							onClear();
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+							className: "ph ph-trash",
+							"aria-hidden": "true"
+						}), labels?.remove ?? "Remove"]
+					})]
+				})
+			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "nb-file-dropzone__placeholder",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "nb-file-dropzone__icon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: `ph ${placeholderIcon}` })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "nb-file-dropzone__title",
+						children: placeholderTitle
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "nb-file-dropzone__hint",
+						children: placeholderHint
+					})
+				]
+			})]
+		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "nb-file-dropzone__error",
+			role: "alert",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+				className: "ph ph-warning-circle",
+				"aria-hidden": "true"
+			}), error]
+		})]
+	});
+}
+//#endregion
 //#region packages/ui/AppDropdown.tsx
 function cx$2(...values) {
 	return values.filter(Boolean).join(" ");
@@ -2358,11 +2500,16 @@ const TimelineVariantContext = (0, react.createContext)("stepper");
 function useTimelineVariant() {
 	return (0, react.useContext)(TimelineVariantContext);
 }
-function TimelineMarker({ status, variant }) {
+function TimelineMarker({ status, variant, marker }) {
 	if (variant === "log") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "nb-timeline__marker nb-timeline__marker--dot",
 		"aria-hidden": "true"
 	});
+	if (marker != null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: `nb-timeline__marker nb-timeline__marker--${status} nb-timeline__marker--custom`,
+		"aria-hidden": "true",
+		children: marker
+	});
 	if (status === "complete") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "nb-timeline__marker nb-timeline__marker--complete",
 		"aria-hidden": "true",
@@ -2382,7 +2529,7 @@ function TimelineMarker({ status, variant }) {
 		"aria-hidden": "true"
 	});
 }
-function TimelineItem({ status, title, timestamp, dateTime, tone = "default", children, className }) {
+function TimelineItem({ status, title, marker, timestamp, dateTime, tone = "default", children, className }) {
 	const variant = useTimelineVariant();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		className: [
@@ -2395,7 +2542,8 @@ function TimelineItem({ status, title, timestamp, dateTime, tone = "default", ch
 			className: "nb-timeline__marker-col",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineMarker, {
 				status,
-				variant
+				variant,
+				marker
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "nb-timeline__content",
@@ -2463,6 +2611,7 @@ exports.Drawer = Drawer;
 exports.EN_UI_STRINGS = EN_UI_STRINGS;
 exports.ES_UI_STRINGS = ES_UI_STRINGS;
 exports.EmptyState = EmptyState;
+exports.FileDropzone = FileDropzone;
 exports.FormField = FormField;
 exports.IconButton = IconButton;
 exports.Popover = Popover;

package/dist/index.d.cts

@@ -204,6 +204,56 @@ interface TextAreaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 declare const TextAreaField: import("react").ForwardRefExoticComponent<TextAreaFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 //#endregion
+//#region packages/ui/FileDropzone.d.ts
+interface FileDropzoneValue {
+  fileName?: string | null;
+  fileUrl?: string | null;
+  previewUrl?: string | null;
+}
+interface FileDropzoneLabels {
+  prompt?: string;
+  imagePrompt?: string;
+  dropPrompt?: string;
+  hint?: string;
+  imageHint?: string;
+  uploading?: string;
+  replace?: string;
+  remove?: string;
+  open?: string;
+}
+interface FileDropzoneProps {
+  accept?: string | null;
+  value?: FileDropzoneValue | null;
+  image?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  uploading?: boolean;
+  error?: string | null;
+  labels?: FileDropzoneLabels;
+  inputId?: string;
+  inputLabel?: string;
+  className?: string;
+  onFileSelect: (file: File) => void;
+  onClear?: () => void;
+}
+declare function FileDropzone({
+  accept,
+  value,
+  image,
+  disabled,
+  readOnly,
+  invalid,
+  uploading,
+  error,
+  labels,
+  inputId,
+  inputLabel,
+  className,
+  onFileSelect,
+  onClear
+}: FileDropzoneProps): import("react").JSX.Element;
+//#endregion
 //#region packages/ui/AppDropdown.d.ts
 interface AppDropdownOption {
   value: string;
@@ -739,6 +789,8 @@ interface TimelineProps {
 interface TimelineItemProps {
   status: TimelineItemStatus;
   title: ReactNode;
+  /** Custom stepper marker content, for example a step number. Ignored by the `log` variant. */
+  marker?: ReactNode;
   timestamp?: ReactNode;
   dateTime?: string;
   /** Marker accent for the `log` variant. */
@@ -749,6 +801,7 @@ interface TimelineItemProps {
 declare function TimelineItem({
   status,
   title,
+  marker,
   timestamp,
   dateTime,
   tone,
@@ -826,4 +879,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.d.mts

@@ -204,6 +204,56 @@ interface TextAreaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 declare const TextAreaField: import("react").ForwardRefExoticComponent<TextAreaFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 //#endregion
+//#region packages/ui/FileDropzone.d.ts
+interface FileDropzoneValue {
+  fileName?: string | null;
+  fileUrl?: string | null;
+  previewUrl?: string | null;
+}
+interface FileDropzoneLabels {
+  prompt?: string;
+  imagePrompt?: string;
+  dropPrompt?: string;
+  hint?: string;
+  imageHint?: string;
+  uploading?: string;
+  replace?: string;
+  remove?: string;
+  open?: string;
+}
+interface FileDropzoneProps {
+  accept?: string | null;
+  value?: FileDropzoneValue | null;
+  image?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  uploading?: boolean;
+  error?: string | null;
+  labels?: FileDropzoneLabels;
+  inputId?: string;
+  inputLabel?: string;
+  className?: string;
+  onFileSelect: (file: File) => void;
+  onClear?: () => void;
+}
+declare function FileDropzone({
+  accept,
+  value,
+  image,
+  disabled,
+  readOnly,
+  invalid,
+  uploading,
+  error,
+  labels,
+  inputId,
+  inputLabel,
+  className,
+  onFileSelect,
+  onClear
+}: FileDropzoneProps): import("react").JSX.Element;
+//#endregion
 //#region packages/ui/AppDropdown.d.ts
 interface AppDropdownOption {
   value: string;
@@ -739,6 +789,8 @@ interface TimelineProps {
 interface TimelineItemProps {
   status: TimelineItemStatus;
   title: ReactNode;
+  /** Custom stepper marker content, for example a step number. Ignored by the `log` variant. */
+  marker?: ReactNode;
   timestamp?: ReactNode;
   dateTime?: string;
   /** Marker accent for the `log` variant. */
@@ -749,6 +801,7 @@ interface TimelineItemProps {
 declare function TimelineItem({
   status,
   title,
+  marker,
   timestamp,
   dateTime,
   tone,
@@ -826,4 +879,4 @@ interface UiStringsProviderProps {
 declare const UiStringsProvider: React$1.FC<UiStringsProviderProps>;
 declare const useUiStrings: () => UiStrings;
 //#endregion
-export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, type AccentPreset, AppDialog, type AppDialogProps, AppDropdown, type AppDropdownOption, type AppDropdownProps, type AppDropdownVariant, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Chip, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type Density, DensityContext, type DensityContextValue, DensityProvider, Drawer, type DrawerProps, type DrawerSide, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneLabels, type FileDropzoneProps, type FileDropzoneValue, FormField, type FormFieldProps, IconButton, type IconButtonProps, Popover, type PopoverAlign, type PopoverProps, SelectField, type SelectFieldProps, SettingsPanel, type SettingsPanelProps, Skeleton, type SkeletonProps, StatCard, type StatCardProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type Theme, ThemeContext, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineItemStatus, type TimelineItemTone, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toggle, type ToggleProps, type UiStrings, UiStringsProvider, type UiStringsProviderProps, type UseFloatingPanelOptions, type UseFloatingPanelResult, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { useDropzone } from "react-dropzone";
 //#region packages/ui/Avatar.tsx
 /**
 * 8 semantic hues aligned with the Fluent / @nubitio design palette.
@@ -59,13 +60,13 @@ const Avatar = ({ owner = "", size, variant = "md", shape = "circle", alt, class
 };
 //#endregion
 //#region packages/ui/Button.tsx
-const cx$4 = (...values) => values.filter(Boolean).join(" ");
+const cx$5 = (...values) => values.filter(Boolean).join(" ");
 const Button = ({ variant = "secondary", size = "md", fullWidth = false, icon, loading = false, className, children, disabled, ...props }) => /* @__PURE__ */ jsxs("button", {
 	...props,
 	type: props.type ?? "button",
 	disabled: disabled || loading,
 	"aria-busy": loading || void 0,
-	className: cx$4("nb-button", `nb-button--${variant}`, size === "sm" && "nb-button--sm", fullWidth && "nb-button--full", className),
+	className: cx$5("nb-button", `nb-button--${variant}`, size === "sm" && "nb-button--sm", fullWidth && "nb-button--full", className),
 	children: [loading ? /* @__PURE__ */ jsx("span", {
 		className: "nb-button-spinner",
 		"aria-hidden": "true"
@@ -79,7 +80,7 @@ const IconButton = ({ icon, label, variant = "default", className, ...props }) =
 	type: props.type ?? "button",
 	"aria-label": props["aria-label"] ?? label,
 	title: props.title ?? label,
-	className: cx$4("nb-icon-button", variant === "danger" && "nb-icon-button--danger", className),
+	className: cx$5("nb-icon-button", variant === "danger" && "nb-icon-button--danger", className),
 	children: /* @__PURE__ */ jsx("i", {
 		className: icon,
 		"aria-hidden": "true"
@@ -328,10 +329,10 @@ const Card = ({ title, description, children }) => {
 };
 //#endregion
 //#region packages/ui/FormControls.tsx
-const cx$3 = (...values) => values.filter(Boolean).join(" ");
+const cx$4 = (...values) => values.filter(Boolean).join(" ");
 const FormField = ({ label, error, helpText, children, className, ...props }) => /* @__PURE__ */ jsxs("label", {
 	...props,
-	className: cx$3("nb-form-field", !!error && "nb-form-field--error", className),
+	className: cx$4("nb-form-field", !!error && "nb-form-field--error", className),
 	children: [
 		label && /* @__PURE__ */ jsx("span", {
 			className: "nb-form-field__label",
@@ -352,14 +353,14 @@ const TextField = forwardRef(function TextField({ className, invalid, ...props }
 	return /* @__PURE__ */ jsx("input", {
 		...props,
 		ref,
-		className: cx$3("nb-input", invalid && "nb-input--invalid", className)
+		className: cx$4("nb-input", invalid && "nb-input--invalid", className)
 	});
 });
 const SelectField = forwardRef(function SelectField({ className, invalid, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx("select", {
 		...props,
 		ref,
-		className: cx$3("nb-input", "nb-select", invalid && "nb-input--invalid", className),
+		className: cx$4("nb-input", "nb-select", invalid && "nb-input--invalid", className),
 		children
 	});
 });
@@ -367,10 +368,151 @@ const TextAreaField = forwardRef(function TextAreaField({ className, invalid, ..
 	return /* @__PURE__ */ jsx("textarea", {
 		...props,
 		ref,
-		className: cx$3("nb-input", "nb-textarea", invalid && "nb-input--invalid", className)
+		className: cx$4("nb-input", "nb-textarea", invalid && "nb-input--invalid", className)
 	});
 });
 //#endregion
+//#region packages/ui/FileDropzone.tsx
+function cx$3(...values) {
+	return values.filter(Boolean).join(" ");
+}
+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]: [] };
+}
+function FileDropzone({ accept, value = null, image = false, disabled = false, readOnly = false, invalid = false, uploading = false, error = null, labels, inputId, inputLabel, className, onFileSelect, onClear }) {
+	const previewUrl = value?.previewUrl ?? null;
+	const fileName = value?.fileName ?? null;
+	const fileUrl = value?.fileUrl ?? null;
+	const hasContent = !!(previewUrl || fileName);
+	const isInteractive = !disabled && !readOnly;
+	const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+		accept: buildDropzoneAccept(accept),
+		disabled: disabled || readOnly || uploading,
+		multiple: false,
+		noClick: hasContent,
+		noKeyboard: hasContent,
+		onDrop: (acceptedFiles) => {
+			const file = acceptedFiles[0];
+			if (file) onFileSelect(file);
+		}
+	});
+	const placeholderIcon = image ? "ph-image" : "ph-file-arrow-up";
+	const placeholderTitle = isDragActive ? labels?.dropPrompt ?? "Drop file here" : image ? labels?.imagePrompt ?? "Drop image here or click to browse" : labels?.prompt ?? "Drop file here or click to browse";
+	const placeholderHint = image ? labels?.imageHint ?? "PNG, JPG, WebP or GIF" : labels?.hint ?? "Select one file";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx$3("nb-file-dropzone", image && "nb-file-dropzone--image", invalid && "nb-file-dropzone--invalid", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...getRootProps({ className: cx$3("nb-file-dropzone__zone", isDragActive && "nb-file-dropzone__zone--active", hasContent && "nb-file-dropzone__zone--filled", uploading && "nb-file-dropzone__zone--uploading", !isInteractive && "nb-file-dropzone__zone--disabled") }),
+			children: [/* @__PURE__ */ jsx("input", { ...getInputProps({
+				id: inputId,
+				"aria-label": inputLabel
+			}) }), hasContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				previewUrl ? /* @__PURE__ */ jsx("img", {
+					className: "nb-file-dropzone__preview",
+					src: previewUrl,
+					alt: inputLabel ?? fileName ?? ""
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "nb-file-dropzone__file",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "nb-file-dropzone__file-icon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("i", { className: "ph ph-file" })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "nb-file-dropzone__file-meta",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "nb-file-dropzone__file-name",
+							children: fileName
+						}), fileUrl && /* @__PURE__ */ jsx("a", {
+							className: "nb-file-dropzone__file-link",
+							href: fileUrl,
+							target: "_blank",
+							rel: "noreferrer",
+							onClick: (event) => event.stopPropagation(),
+							children: labels?.open ?? "Open"
+						})]
+					})]
+				}),
+				uploading && /* @__PURE__ */ jsxs("div", {
+					className: "nb-file-dropzone__overlay",
+					"aria-live": "polite",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "nb-file-dropzone__spinner",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", { children: labels?.uploading ?? "Uploading..." })]
+				}),
+				isInteractive && !uploading && /* @__PURE__ */ jsxs("div", {
+					className: "nb-file-dropzone__actions",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "nb-file-dropzone__action",
+						onClick: (event) => {
+							event.stopPropagation();
+							open();
+						},
+						children: [/* @__PURE__ */ jsx("i", {
+							className: "ph ph-arrows-clockwise",
+							"aria-hidden": "true"
+						}), labels?.replace ?? "Replace"]
+					}), onClear && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "nb-file-dropzone__action nb-file-dropzone__action--danger",
+						onClick: (event) => {
+							event.stopPropagation();
+							onClear();
+						},
+						children: [/* @__PURE__ */ jsx("i", {
+							className: "ph ph-trash",
+							"aria-hidden": "true"
+						}), labels?.remove ?? "Remove"]
+					})]
+				})
+			] }) : /* @__PURE__ */ jsxs("div", {
+				className: "nb-file-dropzone__placeholder",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "nb-file-dropzone__icon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("i", { className: `ph ${placeholderIcon}` })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "nb-file-dropzone__title",
+						children: placeholderTitle
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "nb-file-dropzone__hint",
+						children: placeholderHint
+					})
+				]
+			})]
+		}), error && /* @__PURE__ */ jsxs("span", {
+			className: "nb-file-dropzone__error",
+			role: "alert",
+			children: [/* @__PURE__ */ jsx("i", {
+				className: "ph ph-warning-circle",
+				"aria-hidden": "true"
+			}), error]
+		})]
+	});
+}
+//#endregion
 //#region packages/ui/AppDropdown.tsx
 function cx$2(...values) {
 	return values.filter(Boolean).join(" ");
@@ -2334,11 +2476,16 @@ const TimelineVariantContext = createContext("stepper");
 function useTimelineVariant() {
 	return useContext(TimelineVariantContext);
 }
-function TimelineMarker({ status, variant }) {
+function TimelineMarker({ status, variant, marker }) {
 	if (variant === "log") return /* @__PURE__ */ jsx("span", {
 		className: "nb-timeline__marker nb-timeline__marker--dot",
 		"aria-hidden": "true"
 	});
+	if (marker != null) return /* @__PURE__ */ jsx("span", {
+		className: `nb-timeline__marker nb-timeline__marker--${status} nb-timeline__marker--custom`,
+		"aria-hidden": "true",
+		children: marker
+	});
 	if (status === "complete") return /* @__PURE__ */ jsx("span", {
 		className: "nb-timeline__marker nb-timeline__marker--complete",
 		"aria-hidden": "true",
@@ -2358,7 +2505,7 @@ function TimelineMarker({ status, variant }) {
 		"aria-hidden": "true"
 	});
 }
-function TimelineItem({ status, title, timestamp, dateTime, tone = "default", children, className }) {
+function TimelineItem({ status, title, marker, timestamp, dateTime, tone = "default", children, className }) {
 	const variant = useTimelineVariant();
 	return /* @__PURE__ */ jsxs("li", {
 		className: [
@@ -2371,7 +2518,8 @@ function TimelineItem({ status, title, timestamp, dateTime, tone = "default", ch
 			className: "nb-timeline__marker-col",
 			children: /* @__PURE__ */ jsx(TimelineMarker, {
 				status,
-				variant
+				variant,
+				marker
 			})
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "nb-timeline__content",
@@ -2419,4 +2567,4 @@ function Timeline({ variant = "stepper", orientation = "vertical", title, descri
 	});
 }
 //#endregion
-export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };
+export { ACCENT_PRESETS, AppDialog, AppDropdown, AppToolbar, Avatar, Badge, Button, Card, Chip, CollapsibleSection, ConfirmDialog, ContextMenu, DatePicker, DateRangePicker, DensityContext, DensityProvider, Drawer, EN_UI_STRINGS, ES_UI_STRINGS, EmptyState, FileDropzone, FormField, IconButton, Popover, SelectField, SettingsPanel, Skeleton, StatCard, TextAreaField, TextField, ThemeContext, ThemeProvider, ThemeSwitcher, Timeline, TimelineItem, Toggle, UiStringsProvider, getAvatarHue, getAvatarInitials, useAccentColor, useDensity, useFloatingPanel, useTheme, useUiStrings };

package/dist/style.css

@@ -753,6 +753,238 @@ html[data-density=compact] .nb-dialog__footer {
   padding: var(--space-2) var(--space-3);
   resize: vertical;
 }
+.nb-file-dropzone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: 100%;
+}
+
+.nb-file-dropzone__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-file-dropzone__zone:hover:not(.nb-file-dropzone__zone--disabled):not(.nb-file-dropzone__zone--filled) {
+  background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
+  border-color: var(--accent-color);
+}
+.nb-file-dropzone__zone--active {
+  background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
+  border-color: var(--accent-color);
+}
+.nb-file-dropzone__zone--filled {
+  border-style: solid;
+  cursor: default;
+  min-height: 88px;
+}
+.nb-file-dropzone__zone--uploading {
+  pointer-events: none;
+}
+.nb-file-dropzone__zone--disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+.nb-file-dropzone__zone:focus-visible {
+  box-shadow: 0 0 0 3px var(--focus-ring-color);
+  outline: none;
+}
+
+.nb-file-dropzone--image .nb-file-dropzone__zone {
+  min-height: 168px;
+}
+
+.nb-file-dropzone--image .nb-file-dropzone__zone--filled {
+  min-height: 180px;
+}
+
+.nb-file-dropzone--invalid .nb-file-dropzone__zone {
+  border-color: var(--error-color);
+}
+
+.nb-file-dropzone__placeholder {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-width: 320px;
+  padding: var(--space-4);
+  text-align: center;
+}
+
+.nb-file-dropzone__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-file-dropzone__title {
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.nb-file-dropzone__hint {
+  color: var(--text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
+}
+
+.nb-file-dropzone__preview {
+  display: block;
+  height: 100%;
+  max-height: 220px;
+  object-fit: contain;
+  width: 100%;
+}
+
+.nb-file-dropzone__file {
+  align-items: center;
+  display: flex;
+  gap: var(--space-3);
+  max-width: 100%;
+  padding: var(--space-3) var(--space-4);
+  width: 100%;
+}
+
+.nb-file-dropzone__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-file-dropzone__file-meta {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.nb-file-dropzone__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-file-dropzone__file-link {
+  color: var(--accent-color);
+  font-size: var(--font-size-xs);
+  text-decoration: none;
+}
+.nb-file-dropzone__file-link:hover {
+  text-decoration: underline;
+}
+
+.nb-file-dropzone__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-file-dropzone__spinner {
+  animation: nb-file-dropzone-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-file-dropzone-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.nb-file-dropzone__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-file-dropzone__zone--filled:hover .nb-file-dropzone__actions,
+.nb-file-dropzone__zone--filled:focus-within .nb-file-dropzone__actions {
+  opacity: 1;
+}
+
+.nb-file-dropzone__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-file-dropzone__action:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+.nb-file-dropzone__action--danger:hover {
+  border-color: var(--error-color);
+  color: var(--error-color);
+}
+.nb-file-dropzone__action:focus-visible {
+  box-shadow: 0 0 0 2px var(--focus-ring-color);
+  outline: none;
+}
+
+.nb-file-dropzone__error {
+  align-items: center;
+  color: var(--error-color);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  gap: var(--space-1);
+}
 .nb-dropdown {
   min-width: 0;
   position: relative;
@@ -2827,6 +3059,15 @@ html[data-density=compact] .nb-drawer__footer {
   width: 20px;
 }
 
+.nb-timeline__marker--custom {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+.nb-timeline__marker--custom.nb-timeline__marker--current::after {
+  display: none;
+}
+
 .nb-timeline__marker--dot {
   background: var(--surface-2);
   border: 2px solid var(--accent-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/ui",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "type": "module",
   "description": "Visual primitives and theme system for the Nubit admin stack (dialogs, cards, toolbar, light/dark theme).",
   "license": "MIT",
@@ -52,5 +52,8 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "react-dropzone": "^15.0.0"
   }
 }