@rkosafo/cai.components 0.0.74 → 0.0.78

package/dist/ui/toast/Toast.svelte

@@ -1,337 +1,337 @@
-<script lang="ts" module>
-	export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'custom';
-	export type ToastPosition =
-		| 'top-left'
-		| 'top-center'
-		| 'top-right'
-		| 'bottom-left'
-		| 'bottom-center'
-		| 'bottom-right';
-
-	export interface CustomToastOptions extends ToastOptions {
-		icon?: string;
-		showProgress?: boolean;
-		progressColor?: string;
-		borderColor?: string;
-		backgroundColor?: string;
-		textColor?: string;
-		iconColor?: string;
-		style?: any;
-		action?: {
-			label: string | boolean;
-			onClick: () => void;
-			buttonStyle?: string;
-		};
-	}
-
-	export interface ToastTheme {
-		success?: Partial<CustomToastOptions>;
-		error?: Partial<CustomToastOptions>;
-		warning?: Partial<CustomToastOptions>;
-		info?: Partial<CustomToastOptions>;
-		loading?: Partial<CustomToastOptions>;
-		custom?: Partial<CustomToastOptions>;
-	}
-
-	export interface ToasterProps {
-		position?: ToastPosition;
-		duration?: number;
-		theme?: ToastTheme;
-		className?: string;
-		toastOptions?: ToastOptions;
-		richColors?: boolean;
-		customIcons?: boolean;
-		closeButton?: boolean;
-		pauseOnHover?: boolean;
-		reverseOrder?: boolean;
-		visibleToasts?: number;
-		expand?: boolean;
-		gap?: number;
-		offset?: number | string;
-	}
-	// Default theme configuration
-	const defaultTheme: ToastTheme = {
-		success: {
-			icon: '✅',
-			borderColor: '#22c55e',
-			backgroundColor: '#f0fdf4',
-			textColor: '#166534',
-			iconColor: '#16a34a',
-			progressColor: '#22c55e'
-		},
-		error: {
-			icon: '❌',
-			borderColor: '#ef4444',
-			backgroundColor: '#fef2f2',
-			textColor: '#991b1b',
-			iconColor: '#dc2626',
-			progressColor: '#ef4444'
-		},
-		warning: {
-			icon: '⚠️',
-			borderColor: '#f59e0b',
-			backgroundColor: '#fffbeb',
-			textColor: '#92400e',
-			iconColor: '#d97706',
-			progressColor: '#f59e0b'
-		},
-		info: {
-			icon: 'ℹ️',
-			borderColor: '#3b82f6',
-			backgroundColor: '#eff6ff',
-			textColor: '#1e40af',
-			iconColor: '#2563eb',
-			progressColor: '#3b82f6'
-		},
-		loading: {
-			icon: '⏳',
-			borderColor: '#6b7280',
-			backgroundColor: '#f9fafb',
-			textColor: '#374151',
-			iconColor: '#6b7280',
-			progressColor: '#6b7280'
-		}
-	};
-
-	let currentDuration = 4000;
-	let currentTheme: ToastTheme = {};
-	let currentRichColors = false;
-
-	function buildToastStyle(
-		theme: Partial<CustomToastOptions>,
-		options?: CustomToastOptions,
-		type?: ToastType,
-		richColors?: boolean
-	): string {
-		if (options?.style) return options.style;
-
-		const baseStyle = `
-			border: 1px solid ${options?.borderColor || theme.borderColor || '#e5e7eb'};
-			background: ${options?.backgroundColor || theme.backgroundColor || '#ffffff'};
-			color: ${options?.textColor || theme.textColor || '#1f2937'};
-			padding: 12px 16px;
-			border-radius: 8px;
-			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-			font-size: 14px;
-			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		`;
-
-		if (richColors && type && defaultTheme[type]) {
-			const richTheme = defaultTheme[type]!;
-			return `
-				${baseStyle}
-				border-color: ${options?.borderColor || richTheme.borderColor}!important;
-				background: ${options?.backgroundColor || richTheme.backgroundColor}!important;
-				color: ${options?.textColor || richTheme.textColor}!important;
-			`;
-		}
-
-		return baseStyle;
-	}
-
-	export const toast = {
-		success: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.success || defaultTheme.success || {};
-			const style = buildToastStyle(themeOptions, options, 'success');
-
-			return originalToast.success(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		error: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.error || defaultTheme.error || {};
-			const style = buildToastStyle(themeOptions, options, 'error');
-
-			return originalToast.error(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		warning: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.warning || defaultTheme.warning || {};
-			const style = buildToastStyle(themeOptions, options, 'warning');
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		info: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.info || defaultTheme.info || {};
-			const style = buildToastStyle(themeOptions, options, 'info');
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		loading: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.loading || defaultTheme.loading || {};
-			const style = buildToastStyle(themeOptions, options, 'loading');
-
-			return originalToast.loading(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		promise: <T,>(
-			promise: Promise<T>,
-			messages: { loading: string; success: string; error: string },
-			options?: {
-				loading?: CustomToastOptions;
-				success?: CustomToastOptions;
-				error?: CustomToastOptions;
-			}
-		) => {
-			const loadingTheme = currentTheme?.loading || defaultTheme.loading || {};
-			const successTheme = currentTheme?.success || defaultTheme.success || {};
-			const errorTheme = currentTheme?.error || defaultTheme.error || {};
-
-			return originalToast.promise(promise, messages, {
-				loading: {
-					...loadingTheme,
-					...options?.loading,
-					style: buildToastStyle(loadingTheme, options?.loading, 'loading'),
-					icon: options?.loading?.icon || loadingTheme.icon
-				},
-				success: {
-					...successTheme,
-					...options?.success,
-					style: buildToastStyle(successTheme, options?.success, 'success'),
-					icon: options?.success?.icon || successTheme.icon
-				},
-				error: {
-					...errorTheme,
-					...options?.error,
-					style: buildToastStyle(errorTheme, options?.error, 'error'),
-					icon: options?.error?.icon || errorTheme.icon
-				}
-			});
-		},
-
-		// Custom toast with complete control
-		custom: (message: string, type: ToastType = 'info', options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.[type] || defaultTheme[type] || defaultTheme.info || {};
-			const style = buildToastStyle(themeOptions, options, type);
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		// Action toast with button
-		action: (
-			message: string,
-			action: { label: string; onClick: () => void },
-			options?: CustomToastOptions
-		) => {
-			const themeOptions = currentTheme?.info || defaultTheme.info || {};
-			const style = buildToastStyle(themeOptions, options, 'info');
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon,
-				action: {
-					label: action.label,
-					onClick: action.onClick,
-					buttonStyle:
-						options?.action?.buttonStyle ||
-						'background: #3b82f6; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer;'
-				}
-			});
-		},
-
-		// Dismiss specific toast or all toasts
-		dismiss: (toastId?: string) => {
-			return originalToast.dismiss(toastId);
-		},
-
-		// Remove specific toast
-		remove: (toastId?: string) => {
-			return originalToast.remove(toastId);
-		}
-	};
-
-	export function updateToastConfig(config: {
-		duration?: number;
-		theme?: ToastTheme;
-		richColors?: boolean;
-	}) {
-		if (config.duration !== undefined) currentDuration = config.duration;
-		if (config.theme !== undefined) currentTheme = config.theme;
-		if (config.richColors !== undefined) currentRichColors = config.richColors;
-	}
-
-	export { originalToast };
-	export type { ToastOptions };
-</script>
-
-<script lang="ts">
-	import { Toaster, toast as originalToast, type ToastOptions } from 'svelte-french-toast';
-
-	let {
-		position = 'top-center',
-		duration = 4000,
-		theme = {},
-		className = '',
-		toastOptions = {},
-		richColors = false,
-		customIcons = true,
-		closeButton = true,
-		pauseOnHover = true,
-		reverseOrder = false,
-		visibleToasts = 3,
-		expand = false,
-		gap = 8,
-		offset = '32px'
-	}: ToasterProps = $props();
-
-	$effect(() => {
-		updateToastConfig({ duration, theme, richColors });
-	});
-</script>
-
-<Toaster
-	{position}
-	{duration}
-	{className}
-	{toastOptions}
-	{closeButton}
-	{pauseOnHover}
-	{reverseOrder}
-	{visibleToasts}
-	{expand}
-	{gap}
-	{offset}
-/>
+<script lang="ts" module>
+	export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'custom';
+	export type ToastPosition =
+		| 'top-left'
+		| 'top-center'
+		| 'top-right'
+		| 'bottom-left'
+		| 'bottom-center'
+		| 'bottom-right';
+
+	export interface CustomToastOptions extends ToastOptions {
+		icon?: string;
+		showProgress?: boolean;
+		progressColor?: string;
+		borderColor?: string;
+		backgroundColor?: string;
+		textColor?: string;
+		iconColor?: string;
+		style?: any;
+		action?: {
+			label: string | boolean;
+			onClick: () => void;
+			buttonStyle?: string;
+		};
+	}
+
+	export interface ToastTheme {
+		success?: Partial<CustomToastOptions>;
+		error?: Partial<CustomToastOptions>;
+		warning?: Partial<CustomToastOptions>;
+		info?: Partial<CustomToastOptions>;
+		loading?: Partial<CustomToastOptions>;
+		custom?: Partial<CustomToastOptions>;
+	}
+
+	export interface ToasterProps {
+		position?: ToastPosition;
+		duration?: number;
+		theme?: ToastTheme;
+		className?: string;
+		toastOptions?: ToastOptions;
+		richColors?: boolean;
+		customIcons?: boolean;
+		closeButton?: boolean;
+		pauseOnHover?: boolean;
+		reverseOrder?: boolean;
+		visibleToasts?: number;
+		expand?: boolean;
+		gap?: number;
+		offset?: number | string;
+	}
+	// Default theme configuration
+	const defaultTheme: ToastTheme = {
+		success: {
+			icon: '✅',
+			borderColor: '#22c55e',
+			backgroundColor: '#f0fdf4',
+			textColor: '#166534',
+			iconColor: '#16a34a',
+			progressColor: '#22c55e'
+		},
+		error: {
+			icon: '❌',
+			borderColor: '#ef4444',
+			backgroundColor: '#fef2f2',
+			textColor: '#991b1b',
+			iconColor: '#dc2626',
+			progressColor: '#ef4444'
+		},
+		warning: {
+			icon: '⚠️',
+			borderColor: '#f59e0b',
+			backgroundColor: '#fffbeb',
+			textColor: '#92400e',
+			iconColor: '#d97706',
+			progressColor: '#f59e0b'
+		},
+		info: {
+			icon: 'ℹ️',
+			borderColor: '#3b82f6',
+			backgroundColor: '#eff6ff',
+			textColor: '#1e40af',
+			iconColor: '#2563eb',
+			progressColor: '#3b82f6'
+		},
+		loading: {
+			icon: '⏳',
+			borderColor: '#6b7280',
+			backgroundColor: '#f9fafb',
+			textColor: '#374151',
+			iconColor: '#6b7280',
+			progressColor: '#6b7280'
+		}
+	};
+
+	let currentDuration = 4000;
+	let currentTheme: ToastTheme = {};
+	let currentRichColors = false;
+
+	function buildToastStyle(
+		theme: Partial<CustomToastOptions>,
+		options?: CustomToastOptions,
+		type?: ToastType,
+		richColors?: boolean
+	): string {
+		if (options?.style) return options.style;
+
+		const baseStyle = `
+			border: 1px solid ${options?.borderColor || theme.borderColor || '#e5e7eb'};
+			background: ${options?.backgroundColor || theme.backgroundColor || '#ffffff'};
+			color: ${options?.textColor || theme.textColor || '#1f2937'};
+			padding: 12px 16px;
+			border-radius: 8px;
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+			font-size: 14px;
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		`;
+
+		if (richColors && type && defaultTheme[type]) {
+			const richTheme = defaultTheme[type]!;
+			return `
+				${baseStyle}
+				border-color: ${options?.borderColor || richTheme.borderColor}!important;
+				background: ${options?.backgroundColor || richTheme.backgroundColor}!important;
+				color: ${options?.textColor || richTheme.textColor}!important;
+			`;
+		}
+
+		return baseStyle;
+	}
+
+	export const toast = {
+		success: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.success || defaultTheme.success || {};
+			const style = buildToastStyle(themeOptions, options, 'success');
+
+			return originalToast.success(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		error: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.error || defaultTheme.error || {};
+			const style = buildToastStyle(themeOptions, options, 'error');
+
+			return originalToast.error(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		warning: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.warning || defaultTheme.warning || {};
+			const style = buildToastStyle(themeOptions, options, 'warning');
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		info: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.info || defaultTheme.info || {};
+			const style = buildToastStyle(themeOptions, options, 'info');
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		loading: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.loading || defaultTheme.loading || {};
+			const style = buildToastStyle(themeOptions, options, 'loading');
+
+			return originalToast.loading(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		promise: <T,>(
+			promise: Promise<T>,
+			messages: { loading: string; success: string; error: string },
+			options?: {
+				loading?: CustomToastOptions;
+				success?: CustomToastOptions;
+				error?: CustomToastOptions;
+			}
+		) => {
+			const loadingTheme = currentTheme?.loading || defaultTheme.loading || {};
+			const successTheme = currentTheme?.success || defaultTheme.success || {};
+			const errorTheme = currentTheme?.error || defaultTheme.error || {};
+
+			return originalToast.promise(promise, messages, {
+				loading: {
+					...loadingTheme,
+					...options?.loading,
+					style: buildToastStyle(loadingTheme, options?.loading, 'loading'),
+					icon: options?.loading?.icon || loadingTheme.icon
+				},
+				success: {
+					...successTheme,
+					...options?.success,
+					style: buildToastStyle(successTheme, options?.success, 'success'),
+					icon: options?.success?.icon || successTheme.icon
+				},
+				error: {
+					...errorTheme,
+					...options?.error,
+					style: buildToastStyle(errorTheme, options?.error, 'error'),
+					icon: options?.error?.icon || errorTheme.icon
+				}
+			});
+		},
+
+		// Custom toast with complete control
+		custom: (message: string, type: ToastType = 'info', options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.[type] || defaultTheme[type] || defaultTheme.info || {};
+			const style = buildToastStyle(themeOptions, options, type);
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		// Action toast with button
+		action: (
+			message: string,
+			action: { label: string; onClick: () => void },
+			options?: CustomToastOptions
+		) => {
+			const themeOptions = currentTheme?.info || defaultTheme.info || {};
+			const style = buildToastStyle(themeOptions, options, 'info');
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon,
+				action: {
+					label: action.label,
+					onClick: action.onClick,
+					buttonStyle:
+						options?.action?.buttonStyle ||
+						'background: #3b82f6; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer;'
+				}
+			});
+		},
+
+		// Dismiss specific toast or all toasts
+		dismiss: (toastId?: string) => {
+			return originalToast.dismiss(toastId);
+		},
+
+		// Remove specific toast
+		remove: (toastId?: string) => {
+			return originalToast.remove(toastId);
+		}
+	};
+
+	export function updateToastConfig(config: {
+		duration?: number;
+		theme?: ToastTheme;
+		richColors?: boolean;
+	}) {
+		if (config.duration !== undefined) currentDuration = config.duration;
+		if (config.theme !== undefined) currentTheme = config.theme;
+		if (config.richColors !== undefined) currentRichColors = config.richColors;
+	}
+
+	export { originalToast };
+	export type { ToastOptions };
+</script>
+
+<script lang="ts">
+	import { Toaster, toast as originalToast, type ToastOptions } from 'svelte-french-toast';
+
+	let {
+		position = 'top-center',
+		duration = 4000,
+		theme = {},
+		className = '',
+		toastOptions = {},
+		richColors = false,
+		customIcons = true,
+		closeButton = true,
+		pauseOnHover = true,
+		reverseOrder = false,
+		visibleToasts = 3,
+		expand = false,
+		gap = 8,
+		offset = '32px'
+	}: ToasterProps = $props();
+
+	$effect(() => {
+		updateToastConfig({ duration, theme, richColors });
+	});
+</script>
+
+<Toaster
+	{position}
+	{duration}
+	{className}
+	{toastOptions}
+	{closeButton}
+	{pauseOnHover}
+	{reverseOrder}
+	{visibleToasts}
+	{expand}
+	{gap}
+	{offset}
+/>