@makolabs/ripple 0.0.1-dev.20 → 0.0.1-dev.22

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

@@ -8,11 +8,8 @@
 		maxSize,
 		class: className = '',
 		dropzoneClass = '',
-		previewClass = '',
 		id = 'file-upload',
-		onfiles = undefined,
-		ondelete = undefined,
-		files = []
+		onfiles = undefined
 	}: FileUploadProps = $props();
 
 	const disabled = $derived(maxFiles <= 0);
@@ -25,10 +22,6 @@
 		if (onfiles) onfiles(newFiles);
 	}
 
-	function handleDeleteFile(fileId: string, index: number) {
-		if (ondelete) ondelete(fileId, index);
-	}
-
 	function handleDragEnter(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -130,84 +123,4 @@
 			</div>
 		</div>
 	</label>
-
-	<!-- File List -->
-	{#if files.length > 0}
-		<ul class={cn('mt-6 space-y-3', previewClass)}>
-			{#each files as file, i (i)}
-				<li
-					class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
-						'bg-danger-50 ring-danger-100': file.status === 'error',
-						'bg-success-50 ring-success-100': file.status === 'success',
-						'ring-primary-100/30 bg-white': file.status === 'uploading'
-					})}
-				>
-					<div class="flex flex-1 items-center gap-3">
-						<!-- File Icon -->
-						<div
-							class={cn('flex size-10 items-center justify-center rounded-full', {
-								'bg-danger-100 text-danger-500': file.status === 'error',
-								'bg-success-100 text-success-500': file.status === 'success',
-								'bg-primary-100 text-primary-500': file.status === 'uploading'
-							})}
-						>
-							<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
-								<path
-									fill="currentColor"
-									d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-								/>
-							</svg>
-						</div>
-
-						<div class="flex-1">
-							<!-- Filename and Size -->
-							<div class="mb-1 flex items-center justify-between">
-								<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
-								<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
-							</div>
-
-							<!-- Status Information -->
-							{#if file.status === 'uploading'}
-								<div class="bg-default-100 h-1.5 w-full rounded-full">
-									<div
-										class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
-										style="width: {file.progress || 0}%"
-									></div>
-								</div>
-								<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
-							{:else if file.status === 'error'}
-								<div class="flex items-center justify-between">
-									<span class="text-danger-500 text-sm">Upload failed!</span>
-									<span class="text-danger-600 cursor-help text-sm font-medium"
-										>Please try again!</span
-									>
-								</div>
-							{:else if file.status === 'success'}
-								<p class="text-success-500 text-sm">Upload Successful!</p>
-							{/if}
-						</div>
-					</div>
-
-					<button
-						type="button"
-						aria-label="Delete file"
-						class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
-							'bg-danger-100 text-danger-500': file.status === 'error',
-							'bg-success-100 text-success-500': file.status === 'success',
-							'bg-default-100 text-default-500': file.status === 'uploading'
-						})}
-						onclick={() => (file.FileID ? handleDeleteFile(file.FileID, i) : ondelete?.('', i))}
-						disabled={file.status === 'uploading'}
-					>
-						<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
-							<path
-								fill="currentColor"
-								d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
-							/>
-						</svg>
-					</button>
-				</li>
-			{/each}
-		</ul>
-	{/if}
 </div>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { FilePreviewProps } from '../../index.js';
+
+	let { files = [], ondelete, class: className = '' }: FilePreviewProps = $props();
+
+	function formatFileSize(bytes: number): string {
+		if (bytes === 0) return '0 B';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))}${sizes[i]}`;
+	}
+</script>
+
+{#if files.length > 0}
+	<ul class={cn('mt-6 space-y-3', className)}>
+		{#each files as file, i (i)}
+			<li
+				class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
+					'bg-danger-50 ring-danger-100': file.status === 'error',
+					'bg-success-50 ring-success-100': file.status === 'success',
+					'ring-primary-100/30 bg-white': file.status === 'uploading'
+				})}
+			>
+				<div class="flex flex-1 items-center gap-3">
+					<!-- File Icon -->
+					<div
+						class={cn('flex size-10 items-center justify-center rounded-full', {
+							'bg-danger-100 text-danger-500': file.status === 'error',
+							'bg-success-100 text-success-500': file.status === 'success',
+							'bg-primary-100 text-primary-500': file.status === 'uploading'
+						})}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
+							<path
+								fill="currentColor"
+								d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
+							/>
+						</svg>
+					</div>
+
+					<div class="flex-1">
+						<!-- Filename and Size -->
+						<div class="mb-1 flex items-center justify-between">
+							<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
+							<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
+						</div>
+
+						<!-- Status Information -->
+						{#if file.status === 'uploading'}
+							<div class="bg-default-100 h-1.5 w-full rounded-full">
+								<div
+									class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
+									style="width: {file.progress || 0}%"
+								></div>
+							</div>
+							<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
+						{:else if file.status === 'error'}
+							<div class="flex items-center justify-between">
+								<span class="text-danger-500 text-sm">Upload failed!</span>
+								<span class="text-danger-600 cursor-help text-sm font-medium"
+									>Please try again!</span
+								>
+							</div>
+						{:else if file.status === 'success'}
+							<p class="text-success-500 text-sm">Upload Successful!</p>
+						{/if}
+					</div>
+				</div>
+
+				<button
+					type="button"
+					aria-label="Delete file"
+					class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
+						'bg-danger-100 text-danger-500': file.status === 'error',
+						'bg-success-100 text-success-500': file.status === 'success',
+						'bg-default-100 text-default-500': file.status === 'uploading'
+					})}
+					onclick={() => (file.FileID ? ondelete?.(file.FileID, i) : ondelete?.('', i))}
+					disabled={file.status === 'uploading'}
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
+						/>
+					</svg>
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}

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

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

package/dist/index.d.ts

@@ -163,52 +163,49 @@ export type StatsCardProps = {
     class?: ClassValue;
     formatLargeNumbers?: boolean;
 };
-export type KeyType = string | number;
 export type DataRow = Record<string, any>;
-export type StatusType = 'idle' | 'loading' | 'error' | 'success' | 'empty';
-export type SortDirection = 'asc' | 'desc';
-export type SortState = {
-    column: string;
-    direction: SortDirection;
-};
-export type TableColumn = {
-    key: string;
+export type KeyType = keyof DataRow;
+export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
+export type TableColumn<T extends DataRow = any> = {
+    key: KeyType;
     header: string;
+    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
     sortable?: boolean;
+    sortKey?: string;
     align?: 'left' | 'center' | 'right';
     width?: string;
-    cell?: (value: any, row: DataRow) => string | ReturnType<import("svelte").Snippet>;
+    class?: ClassValue;
 };
-export type TableProps = {
-    data: DataRow[];
-    columns: TableColumn[];
-    keyField?: string;
-    status?: StatusType;
-    searchable?: boolean;
-    pagination?: boolean;
-    rowsPerPage?: number;
-    sortable?: boolean;
-    defaultSort?: SortState;
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState = {
+    column: string | null;
+    direction: SortDirection;
+};
+export type TableProps<T extends DataRow = any> = {
+    data: T[];
+    columns: TableColumn<T>[];
+    color?: VariantColors;
+    size?: VariantSizes;
+    bordered?: boolean;
+    striped?: boolean;
+    emptyStateText?: string;
+    pageSize?: number;
     selectable?: boolean;
-    onRowClick?: (row: DataRow) => void;
-    onSelectionChange?: (selectedRows: DataRow[]) => void;
-    onSortChange?: (sortState: SortState) => void;
-    onPageChange?: (page: number) => void;
-    emptyMessage?: string;
-    errorMessage?: string;
-    searchPlaceholder?: string;
+    selected?: T[];
     class?: ClassValue;
-    headerClass?: ClassValue;
-    rowClass?: ClassValue | ((row: DataRow) => ClassValue);
-    cellClass?: ClassValue | ((value: any, row: DataRow, columnKey: string) => ClassValue);
-    searchClass?: ClassValue;
-    paginationClass?: ClassValue;
-    loadingTemplate?: Snippet;
-    emptyTemplate?: Snippet;
-    errorTemplate?: Snippet;
-    searchDebounceMs?: number;
-    showCount?: boolean;
-    rowsPerPageOptions?: number[];
+    wrapperclass?: ClassValue;
+    tableclass?: ClassValue;
+    theadclass?: ClassValue;
+    tbodyclass?: ClassValue;
+    trclass?: ClassValue;
+    thclass?: ClassValue;
+    tdclass?: ClassValue;
+    footerclass?: ClassValue;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (sortState: SortState) => void;
+    onselect?: (selected: T[]) => void;
+    rowclass?: (row: T, index: number) => ClassValue;
+    loading?: boolean;
 };
 export type BreadcrumbItem = {
     label: string;
@@ -520,6 +517,11 @@ export interface FileUploadProps {
      */
     metadata?: Record<string, string>;
 }
+export interface FilePreviewProps {
+    files: UploadedFile[];
+    ondelete?: (fileId: string, index: number) => void;
+    class?: string;
+}
 export interface UploadedFile {
     FileID: string;
     OriginalFilename: string;
@@ -543,6 +545,7 @@ export interface UploadedFile {
     error?: string;
 }
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
+export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 export { default as Toaster } from './sonner/sonner.svelte';
 export interface FormProps<T extends Record<string, unknown>> {
     form: SuperForm<any>;

package/dist/index.js

@@ -48,6 +48,7 @@ export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
 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';
 // Toaster: Should be registered in +layout.svelte
 export { default as Toaster } from './sonner/sonner.svelte';
 // Form Component Exports

package/dist/layout/table/Table.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { table, type TableProps, type SortDirection, type SortState } from './table.js';
-
+	import { table } from './table.js';
+	import type { TableProps, SortDirection, SortState } from '../../index.js';
 	let {
 		data = [],
 		columns = [],

package/dist/layout/table/Table.svelte.d.ts

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

package/dist/layout/table/table.d.ts

@@ -1,24 +1,5 @@
 import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
 import type { VariantColors, VariantSizes } from '../../index.js';
-export type DataRow = Record<string, any>;
-export type KeyType = keyof DataRow;
-export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
-export type TableColumn<T extends DataRow = any> = {
-    key: KeyType;
-    header: string;
-    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
-    sortable?: boolean;
-    sortKey?: string;
-    align?: 'left' | 'center' | 'right';
-    width?: string;
-    class?: ClassValue;
-};
-export type SortDirection = 'asc' | 'desc' | null;
-export type SortState = {
-    column: string | null;
-    direction: SortDirection;
-};
 export declare const table: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {

package/dist/layout/table/table.js

@@ -1,12 +1,4 @@
 import { tv } from 'tailwind-variants';
-// Prebuild Cell rendering options
-// Snippet 1 - Date
-// Snippet 2 - Currency
-// Snippet 3 - Percentage
-// Snippet 4 - Phone Number
-// Snippet 5 - Email
-// Snippet 6 - Status
-// Snippet 7 - Time
 export const table = tv({
     slots: {
         base: 'w-full',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.20",
+	"version": "0.0.1-dev.22",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",