@makolabs/ripple 1.14.0 → 2.1.0

package/dist/elements/file-upload/FileUpload.svelte

@@ -1,36 +1,111 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { fileUpload } from './file-upload.js';
-	import type { FileUploadProps } from '../../index.js';
+	import Button from '../../button/Button.svelte';
+	import Spinner from '../spinner/Spinner.svelte';
+	import { Size, Color } from '../../variants.js';
+	import type { FileUploadProps, StagedFile } from '../../index.js';
 
 	let {
 		allowedMimeTypes = [],
-		maxFiles = 10,
+		maxFiles = 1,
 		maxSize,
 		size = 'xl',
 		class: className = '',
 		dropzoneClass = '',
 		id = 'file-upload',
 		onfiles,
-		uploadContent
+		uploadContent,
+		files = $bindable<StagedFile[]>([]),
+		clearAfterUpload = true,
+		uploadButtonLabel = 'Upload All',
+		clearButtonLabel = 'Clear All',
+		filesListLabel = 'Selected files',
+		listMaxHeight = 'max-h-64',
+		header
 	}: FileUploadProps = $props();
 
 	const slots = $derived(fileUpload({ size }));
 
+	/** True when the component operates as a multi-file staging uploader. */
+	const isMulti = $derived(maxFiles > 1);
+
+	/** Hard-disabled dropzone (maxFiles <= 0). */
 	const disabled = $derived(maxFiles <= 0);
 
+	/** Soft-disabled dropzone when the staging list is at capacity. */
+	const dropzoneFull = $derived(isMulti && files.length >= maxFiles);
+
+	/** Effective "can drop files" flag. */
+	const dropzoneEnabled = $derived(!disabled && !dropzoneFull);
+
 	let isDragging = $state(false);
 	let inputRef: HTMLInputElement;
 
-	function handleFiles(newFiles: FileList | File[]) {
-		if (disabled) return;
-		if (onfiles) onfiles(newFiles);
+	function makeId(): string {
+		if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+			return crypto.randomUUID();
+		}
+		return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+	}
+
+	function handleIncoming(newFiles: FileList | File[]) {
+		if (!dropzoneEnabled) return;
+		const arr = Array.from(newFiles);
+		if (!isMulti) {
+			// Single-file mode: fire-and-forget, same as pre-v2 FileUpload.
+			onfiles?.(arr);
+			return;
+		}
+		// Multi-file mode: cap and stage
+		const room = Math.max(0, maxFiles - files.length);
+		const accepted = arr.slice(0, room);
+		const toAdd: StagedFile[] = accepted.map((file) => ({
+			id: makeId(),
+			file,
+			status: 'ready' as const
+		}));
+		files = [...files, ...toAdd];
+	}
+
+	function handleRemove(fileId: string) {
+		files = files.filter((f) => f.id !== fileId);
+	}
+
+	function handleClearAll() {
+		files = [];
+	}
+
+	const readyCount = $derived(files.filter((f) => !f.status || f.status === 'ready').length);
+	const hasAnyFile = $derived(files.length > 0);
+	const anyUploading = $derived(files.some((f) => f.status === 'uploading'));
+	const canUpload = $derived(readyCount > 0 && !anyUploading && !!onfiles);
+
+	function handleUploadAll() {
+		if (!onfiles) return;
+		const rawFiles = files.filter((f) => !f.status || f.status === 'ready').map((f) => f.file);
+		if (rawFiles.length === 0) return;
+		onfiles(rawFiles);
+		if (clearAfterUpload) {
+			files = [];
+		}
+	}
+
+	function handleRetry(fileId: string) {
+		const target = files.find((f) => f.id === fileId);
+		if (!target || !onfiles) return;
+		files = files.map((f) =>
+			f.id === fileId
+				? { ...f, status: 'ready' as const, error: undefined, progress: undefined }
+				: f
+		);
+		onfiles([target.file]);
 	}
 
 	function handleDragEnter(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-		if (!disabled) isDragging = true;
+		if (dropzoneEnabled) isDragging = true;
 	}
 
 	function handleDragLeave(e: DragEvent) {
@@ -43,15 +118,15 @@
 		e.preventDefault();
 		e.stopPropagation();
 		isDragging = false;
-		if (!disabled && e.dataTransfer?.files) {
-			handleFiles(e.dataTransfer.files);
+		if (dropzoneEnabled && e.dataTransfer?.files) {
+			handleIncoming(e.dataTransfer.files);
 		}
 	}
 
 	function handleInputChange(e: Event) {
 		const input = e.target as HTMLInputElement;
 		if (input.files) {
-			handleFiles(input.files);
+			handleIncoming(input.files);
 			input.value = '';
 		}
 	}
@@ -59,7 +134,7 @@
 	function handleDragOver(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-		if (!disabled) isDragging = true;
+		if (dropzoneEnabled) isDragging = true;
 	}
 
 	function formatFileSize(bytes: number): string {
@@ -71,15 +146,19 @@
 	}
 </script>
 
-<div class={cn('w-full', className)}>
+<div class={cn('flex w-full flex-col gap-4', className)}>
+	{#if header}
+		{@render header()}
+	{/if}
+
 	<label
 		class={cn(
 			slots.dropzone(),
 			{
 				'border-primary-400 bg-primary-50': isDragging,
 				'border-default-200 bg-white': !isDragging,
-				'cursor-not-allowed opacity-50': disabled,
-				'hover:bg-default-50 cursor-pointer': !disabled
+				'cursor-not-allowed opacity-50': !dropzoneEnabled,
+				'hover:bg-default-50 cursor-pointer': dropzoneEnabled
 			},
 			dropzoneClass
 		)}
@@ -93,15 +172,14 @@
 			type="file"
 			bind:this={inputRef}
 			accept={allowedMimeTypes.join(',')}
-			multiple={maxFiles !== 1}
-			{disabled}
+			multiple={maxFiles > 1}
+			disabled={!dropzoneEnabled}
 			class="hidden"
 			onchange={handleInputChange}
 			{id}
 		/>
 
 		<div class={slots.content()}>
-			<!-- Upload Icon -->
 			<div class={slots.iconWrapper()} data-fileupload-icon-wrapper="">
 				<svg xmlns="http://www.w3.org/2000/svg" class={slots.icon()} viewBox="0 0 24 24">
 					<path
@@ -111,7 +189,6 @@
 				</svg>
 			</div>
 
-			<!-- Text stack (wrapped so row layout in sm can place icon on the left and this block on the right) -->
 			<div class={slots.textBlock()}>
 				{#if !uploadContent}
 					<div class={slots.mainText()}>
@@ -135,4 +212,161 @@
 			</div>
 		</div>
 	</label>
+
+	{#if isMulti && hasAnyFile}
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center justify-between">
+				<span class="text-default-700 text-sm font-medium">
+					{filesListLabel} ({files.length})
+				</span>
+				<div class="flex gap-2">
+					<Button
+						size={Size.XS}
+						variant="outline"
+						color={Color.DEFAULT}
+						onclick={handleClearAll}
+						disabled={anyUploading}
+					>
+						{clearButtonLabel}
+					</Button>
+					<Button
+						size={Size.XS}
+						color={Color.PRIMARY}
+						onclick={handleUploadAll}
+						disabled={!canUpload}
+					>
+						{uploadButtonLabel}{readyCount > 0 ? ` (${readyCount})` : ''}
+					</Button>
+				</div>
+			</div>
+
+			<ul
+				class={cn(
+					'border-default-200 divide-default-100 divide-y overflow-y-auto rounded-lg border',
+					listMaxHeight
+				)}
+			>
+				{#each files as stagedFile (stagedFile.id)}
+					{@const status = stagedFile.status ?? 'ready'}
+					<li
+						class={cn('flex items-center gap-3 px-3 py-2', status === 'success' && 'opacity-60')}
+						data-fileupload-row=""
+						data-status={status}
+					>
+						{#if status === 'ready'}
+							<span
+								class="bg-default-100 text-default-500 flex size-7 shrink-0 items-center justify-center rounded-full"
+								aria-hidden="true"
+							>
+								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+									/>
+								</svg>
+							</span>
+						{:else if status === 'uploading'}
+							<div class="flex size-7 shrink-0 items-center justify-center">
+								<Spinner size={Size.SM} color={Color.PRIMARY} />
+							</div>
+						{:else if status === 'success'}
+							<span
+								class="bg-success-100 text-success-600 flex size-7 shrink-0 items-center justify-center rounded-full"
+								aria-hidden="true"
+							>
+								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="3"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+							</span>
+						{:else if status === 'error'}
+							<span
+								class="bg-danger-100 text-danger-600 flex size-7 shrink-0 items-center justify-center rounded-full"
+								aria-hidden="true"
+							>
+								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="3"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</span>
+						{/if}
+
+						<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+							<span class="text-default-900 truncate text-sm font-medium">
+								{stagedFile.file.name}
+							</span>
+							<span class="text-default-500 text-xs">
+								{formatFileSize(stagedFile.file.size)}
+								{#if stagedFile.error}
+									<span class="text-danger-600"> · {stagedFile.error}</span>
+								{/if}
+							</span>
+							{#if status === 'uploading' && stagedFile.progress !== undefined}
+								<div class="bg-default-100 mt-1 h-1 w-full overflow-hidden rounded-full">
+									<div
+										data-fileupload-progress=""
+										class="bg-primary-500 h-full transition-all duration-200"
+										style="width: {Math.max(0, Math.min(100, stagedFile.progress))}%"
+									></div>
+								</div>
+							{/if}
+						</div>
+
+						{#if status === 'error'}
+							<button
+								type="button"
+								onclick={() => handleRetry(stagedFile.id)}
+								class="text-default-500 hover:bg-primary-50 hover:text-primary-600 shrink-0 cursor-pointer rounded p-1 transition-colors"
+								aria-label="Retry upload for {stagedFile.file.name}"
+								title="Retry"
+							>
+								<svg
+									class="size-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								>
+									<polyline points="23 4 23 10 17 10" />
+									<polyline points="1 20 1 14 7 14" />
+									<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+								</svg>
+							</button>
+						{/if}
+
+						{#if status !== 'uploading' && status !== 'success'}
+							<button
+								type="button"
+								onclick={() => handleRemove(stagedFile.id)}
+								class="text-default-400 hover:bg-default-100 hover:text-danger-500 shrink-0 cursor-pointer rounded p-1 transition-colors"
+								aria-label="Remove {stagedFile.file.name}"
+								title="Remove"
+							>
+								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
 </div>

package/dist/elements/file-upload/FileUpload.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { FileUploadProps } from '../../index.js';
-declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "">;
+declare const FileUpload: import("svelte").Component<FileUploadProps, {}, "files">;
 type FileUpload = ReturnType<typeof FileUpload>;
 export default FileUpload;

package/dist/elements/file-upload/file-upload-types.d.ts

@@ -1,93 +1,13 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 export type FileUploadSize = 'xl' | 'md' | 'sm';
-export interface FileUploadProps {
-    /**
-     * Array of allowed file MIME types or extensions
-     * @example ['image/jpeg', 'image/png']
-     */
-    allowedMimeTypes?: string[];
-    /**
-     * Maximum file size in bytes
-     */
-    maxSize?: number;
-    /**
-     * Maximum number of files that can be uploaded; maxFiles<=0 is disabled, maxFiles=1 is singular, maxFiles>1 is multiple
-     * @default 10
-     */
-    maxFiles?: number;
-    /**
-     * Visual size variant.
-     *
-     * - `xl` (default) — hero square card, column layout, 48px padding +
-     *   96px circular icon. Use for empty-state pages or standalone upload
-     *   dialogs where the dropzone is the main focus of the screen.
-     * - `md` — wide medium rectangle, row layout, icon-left + text-right,
-     *   ~80-90px tall, full-width. Use as a prominent form section when
-     *   the upload is a primary action alongside other fields.
-     * - `sm` — compact inline rectangle, row layout, ~56-60px tall. Behaves
-     *   like a single form field; sits next to other inputs without
-     *   dominating.
-     *
-     * @default 'xl'
-     */
-    size?: FileUploadSize;
-    /**
-     * CSS class for the component container
-     */
-    class?: ClassValue;
-    /**
-     * CSS class for the dropzone
-     */
-    dropzoneClass?: ClassValue;
-    /**
-     * ID for the file input element
-     * @default 'file-upload'
-     */
-    id?: string;
-    /**
-     * Callback when files are selected or dropped
-     */
-    onfiles?: (files: FileList | File[]) => void;
-    /**
-     * Content to display when no files are uploaded
-     */
-    uploadContent?: Snippet;
-    testId?: string;
-}
-export interface FilePreviewProps {
-    files: UploadedFile[];
-    ondelete?: (fileId: string, index: number) => void;
-    class?: ClassValue;
-    testId?: string;
-}
-export interface UploadedFile {
-    FileID: string;
-    OriginalFilename: string;
-    Size: number;
-    ContentType: string;
-    MD5Hash: string;
-    UploadTimestamp: string;
-    Expiry?: string;
-    CustomMetadata?: Record<string, string>;
-    /**
-     * Current status of the file
-     */
-    status: 'uploading' | 'success' | 'error';
-    /**
-     * Upload progress (0-100)
-     */
-    progress?: number;
-    /**
-     * Error message if upload failed
-     */
-    error?: string;
-}
 /**
- * A file held in a `MultiFileUpload` component's staging list. Either purely
+ * A file held in a multi-file `FileUpload`'s staging list. Either purely
  * internal (the component owns the state) or bindable (the caller owns the
  * state and can mutate `status` / `progress` / `error` during upload for
  * per-file visual feedback).
+ *
+ * Only used when `maxFiles > 1`.
  */
 export interface StagedFile {
     /** Stable client-generated id for list keys and caller-side updates. */
@@ -104,41 +24,67 @@ export interface StagedFile {
     /** Optional error message rendered under the file name while status='error'. */
     error?: string;
 }
-export interface MultiFileUploadProps {
+export interface FileUploadProps {
     /**
      * Array of allowed file MIME types or extensions.
-     * Forwarded to the internal `FileUpload` dropzone.
-     * @example ['text/csv', '.csv.gz']
+     * @example ['image/jpeg', 'image/png', '.csv', '.csv.gz']
      */
     allowedMimeTypes?: string[];
     /**
-     * Maximum file size in bytes (informational; shown in the dropzone hint).
-     * Forwarded to the internal `FileUpload` dropzone.
+     * Maximum file size in bytes (shown in the dropzone hint).
      */
     maxSize?: number;
     /**
-     * Maximum number of files that can be in the staging list at once.
-     * Additional drops beyond this are discarded.
-     * @default 10
+     * Maximum number of files that can be uploaded.
+     *
+     * - `<= 0` — dropzone is disabled
+     * - `=== 1` (default) — single-file mode. `onfiles` fires immediately
+     *   when the user drops or picks a file. No staging list, no "Upload All"
+     *   button.
+     * - `> 1` — multi-file staging mode. Users drop/pick files which appear in
+     *   a staging list with per-row remove buttons. `onfiles` fires when the
+     *   user clicks "Upload All" with all ready-status files. The staging list
+     *   auto-clears on fire unless `clearAfterUpload={false}` is passed.
+     *
+     * @default 1
      */
     maxFiles?: number;
     /**
-     * Dropzone size variant. Forwarded to the internal `FileUpload`.
-     * @default 'md'
+     * Visual size variant of the dropzone.
+     *
+     * - `xl` (default) — hero square card, column layout, 48px padding +
+     *   96px circular icon. For empty-state pages or standalone dialogs.
+     * - `md` — wide rectangle, row layout, icon-left + text-right, ~80-90px
+     *   tall. Form-prominent.
+     * - `sm` — compact inline rectangle, row layout, ~56-60px tall. Behaves
+     *   like a single form field.
+     *
+     * @default 'xl'
      */
     size?: FileUploadSize;
-    /** CSS class for the component wrapper. */
+    /** CSS class for the component container. */
     class?: ClassValue;
-    /** CSS class for the internal dropzone. */
+    /** CSS class for the dropzone area. */
     dropzoneClass?: ClassValue;
-    /** ID for the internal file input element. */
+    /** ID for the file input element. */
     id?: string;
     /**
-     * Bindable staging list. Two usage modes:
+     * Callback fired with the selected files as a normalized `File[]`.
+     *
+     * - In **single-file mode** (`maxFiles === 1`) — fires immediately on drop/pick.
+     * - In **multi-file mode** (`maxFiles > 1`) — fires when the user clicks
+     *   "Upload All" with the current ready-status files from the staging list.
+     */
+    onfiles?: (files: File[]) => void;
+    /** Snippet to override the default "Click here / Drag & drop" dropzone copy. */
+    uploadContent?: Snippet;
+    testId?: string;
+    /**
+     * Bindable staging list. Only relevant when `maxFiles > 1`.
      *
      * - **Simple mode** (omit the prop): the component owns the staging list,
      *   auto-clears it after `onfiles` fires, and never renders status icons.
-     *   Rows show `name + size + ×` only. Exactly like a batched `FileUpload`.
+     *   Rows show `name + size + ×` only.
      *
      * - **Rich mode** (`bind:files`): the caller owns the list. The component
      *   writes adds/removes through the binding, and reads each file's
@@ -149,17 +95,11 @@ export interface MultiFileUploadProps {
      * the component from emptying the list after firing `onfiles`.
      */
     files?: StagedFile[];
-    /**
-     * Fires when the user clicks "Upload All", with the raw `File[]` for every
-     * file currently in the staging list with status `'ready'`. Identical shape
-     * to `FileUpload.onfiles` — callers that already handle `FileUpload` can
-     * drop this in as a batched equivalent.
-     */
-    onfiles?: (files: File[]) => void;
     /**
      * Whether to automatically empty the staging list after `onfiles` fires.
-     * Set to `false` in rich mode so the caller can keep the list visible
-     * while updating per-file status during upload.
+     * Only relevant when `maxFiles > 1`. Set to `false` in rich mode so the
+     * caller can keep the list visible while updating per-file status during
+     * upload.
      * @default true
      */
     clearAfterUpload?: boolean;
@@ -178,5 +118,32 @@ export interface MultiFileUploadProps {
     listMaxHeight?: string;
     /** Optional snippet rendered above the dropzone (for titles, selects, banners). */
     header?: Snippet;
+}
+export interface FilePreviewProps {
+    files: UploadedFile[];
+    ondelete?: (fileId: string, index: number) => void;
+    class?: ClassValue;
     testId?: string;
 }
+export interface UploadedFile {
+    FileID: string;
+    OriginalFilename: string;
+    Size: number;
+    ContentType: string;
+    MD5Hash: string;
+    UploadTimestamp: string;
+    Expiry?: string;
+    CustomMetadata?: Record<string, string>;
+    /**
+     * Current status of the file
+     */
+    status: 'uploading' | 'success' | 'error';
+    /**
+     * Upload progress (0-100)
+     */
+    progress?: number;
+    /**
+     * Error message if upload failed
+     */
+    error?: string;
+}

package/dist/index.d.ts

@@ -45,8 +45,8 @@ export type { ComboboxItem, ComboboxProps } from './elements/combobox/combobox-t
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
 export type { TimelineItem } from './elements/timeline/timeline-types.js';
 export type { FilterTab, FilterGroup, CompactFiltersProps } from './filters/filter-types.js';
-export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps } from './layout/activity-list/activity-list-types.js';
-export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile, MultiFileUploadProps } from './elements/file-upload/file-upload-types.js';
+export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
+export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
 export type { ChatMessageType, StreamingCallback, ChatAction, ChatMessage, ChatResponse, QuickAction, FileBrowserProps } from './ai/ai-types.js';
 export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserViewModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
 export { tv, cn } from './helper/cls.js';
@@ -92,7 +92,6 @@ export { default as Timeline } from './elements/timeline/Timeline.svelte';
 export { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
-export { default as MultiFileUpload } from './elements/file-upload/MultiFileUpload.svelte';
 export { default as Toaster } from './sonner/sonner.svelte';
 export { default as AIChatInterface } from './ai/AIChatInterface.svelte';
 export { default as MermaidRenderer } from './ai/MermaidRenderer.svelte';

package/dist/index.js

@@ -82,7 +82,6 @@ export { default as Chart } from './charts/Chart.svelte';
 // File Upload
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
-export { default as MultiFileUpload } from './elements/file-upload/MultiFileUpload.svelte';
 // Toaster: Should be registered in +layout.svelte
 export { default as Toaster } from './sonner/sonner.svelte';
 // AI Components