@rkosafo/cai.components 0.0.79 → 0.0.81

package/dist/ui/toast/Toast.svelte

@@ -1,337 +1,176 @@
 <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>;
-	}
+	import {
+		toast as originalToast,
+		type DefaultToastOptions,
+		type Renderable,
+		resolveValue,
+		type ToastOptions,
+		type ToastPosition,
+		type ToastType,
+		type ValueOrFunction
+	} from 'svelte-french-toast';
+	export {
+		CheckmarkIcon,
+		ErrorIcon,
+		LoaderIcon,
+		ToastBar,
+		ToastIcon,
+		useToaster,
+		useToasterStore
+	} from 'svelte-french-toast';
+	export { resolveValue };
+
+	export type {
+		DefaultToastOptions,
+		IconTheme,
+		Toast,
+		ToastOptions,
+		ToastPosition,
+		ToastType,
+		Renderable,
+		ValueFunction,
+		ValueOrFunction
+	} from 'svelte-french-toast';
+	export type CustomToastOptions = ToastOptions;
+	export type ToastTheme = Record<string, never>;
 
 	export interface ToasterProps {
 		position?: ToastPosition;
 		duration?: number;
-		theme?: ToastTheme;
+		toastOptions?: DefaultToastOptions;
+		reverseOrder?: boolean;
+		gutter?: number;
+		containerStyle?: string;
+		containerClassName?: string;
+		fireWithSound?: boolean;
+		// Kept for backward compatibility (no-op in wrapper mode)
 		className?: string;
-		toastOptions?: ToastOptions;
+		theme?: ToastTheme;
 		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;
-			`;
+	let currentFireWithSound = false;
+
+	function playToastSound() {
+		if (!currentFireWithSound || typeof window === 'undefined') return;
+
+		try {
+			const AudioContextClass = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+			if (!AudioContextClass) return;
+
+			const context = new AudioContextClass();
+			const oscillator = context.createOscillator();
+			const gain = context.createGain();
+			oscillator.type = 'sine';
+			oscillator.frequency.setValueAtTime(880, context.currentTime);
+			gain.gain.setValueAtTime(0.0001, context.currentTime);
+			gain.gain.exponentialRampToValueAtTime(0.06, context.currentTime + 0.01);
+			gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.18);
+			oscillator.connect(gain);
+			gain.connect(context.destination);
+			oscillator.start();
+			oscillator.stop(context.currentTime + 0.2);
+		} catch {
+			// Ignore audio errors.
 		}
-
-		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;
+		fireWithSound?: boolean;
 		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;
+		if (config.fireWithSound !== undefined) currentFireWithSound = config.fireWithSound;
 	}
 
+	export const toast = Object.assign(
+		(message: Renderable, options?: ToastOptions) => {
+			playToastSound();
+			return originalToast(message, { duration: currentDuration, ...options });
+		},
+		{
+			success: (message: Renderable, options?: ToastOptions) => {
+				playToastSound();
+				return originalToast.success(message, { duration: currentDuration, ...options });
+			},
+			error: (message: Renderable, options?: ToastOptions) => {
+				playToastSound();
+				return originalToast.error(message, { duration: currentDuration, ...options });
+			},
+			loading: (message: Renderable, options?: ToastOptions) => {
+				playToastSound();
+				return originalToast.loading(message, { duration: currentDuration, ...options });
+			},
+			promise: <T,>(
+				promise: Promise<T>,
+				msgs: {
+					loading: Renderable;
+					success: ValueOrFunction<Renderable, T>;
+					error: ValueOrFunction<Renderable, any>;
+				},
+				opts?: DefaultToastOptions
+			) => {
+				playToastSound();
+				return originalToast.promise(promise, msgs, opts);
+			},
+			dismiss: originalToast.dismiss.bind(originalToast),
+			remove: originalToast.remove.bind(originalToast),
+			custom: originalToast.custom.bind(originalToast)
+		}
+	);
+
 	export { originalToast };
 	export type { ToastOptions };
 </script>
 
 <script lang="ts">
-	import { Toaster, toast as originalToast, type ToastOptions } from 'svelte-french-toast';
+	import { Toaster } from 'svelte-french-toast';
 
 	let {
 		position = 'top-center',
 		duration = 4000,
-		theme = {},
-		className = '',
 		toastOptions = {},
+		reverseOrder = false,
+		gutter = 8,
+		containerStyle,
+		containerClassName,
+		className = '',
+		theme = {},
 		richColors = false,
 		customIcons = true,
 		closeButton = true,
 		pauseOnHover = true,
-		reverseOrder = false,
 		visibleToasts = 3,
 		expand = false,
 		gap = 8,
-		offset = '32px'
+		offset = '32px',
+		fireWithSound = false
 	}: ToasterProps = $props();
 
 	$effect(() => {
-		updateToastConfig({ duration, theme, richColors });
+		// theme/richColors/customIcons are intentionally ignored in wrapper mode.
+		void theme;
+		void richColors;
+		void customIcons;
+		updateToastConfig({ duration, fireWithSound });
 	});
 </script>
 
 <Toaster
 	{position}
-	{duration}
-	{className}
 	{toastOptions}
-	{closeButton}
-	{pauseOnHover}
 	{reverseOrder}
-	{visibleToasts}
-	{expand}
-	{gap}
-	{offset}
+	{gutter}
+	{containerStyle}
+	containerClassName={containerClassName || className}
 />

package/dist/ui/toast/Toast.svelte.d.ts

@@ -1,75 +1,50 @@
-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>;
-}
+import { toast as originalToast, type DefaultToastOptions, type Renderable, resolveValue, type ToastOptions, type ToastPosition, type ValueOrFunction } from 'svelte-french-toast';
+export { CheckmarkIcon, ErrorIcon, LoaderIcon, ToastBar, ToastIcon, useToaster, useToasterStore } from 'svelte-french-toast';
+export { resolveValue };
+export type { DefaultToastOptions, IconTheme, Toast, ToastOptions, ToastPosition, ToastType, Renderable, ValueFunction, ValueOrFunction } from 'svelte-french-toast';
+export type CustomToastOptions = ToastOptions;
+export type ToastTheme = Record<string, never>;
 export interface ToasterProps {
     position?: ToastPosition;
     duration?: number;
-    theme?: ToastTheme;
+    toastOptions?: DefaultToastOptions;
+    reverseOrder?: boolean;
+    gutter?: number;
+    containerStyle?: string;
+    containerClassName?: string;
+    fireWithSound?: boolean;
     className?: string;
-    toastOptions?: ToastOptions;
+    theme?: ToastTheme;
     richColors?: boolean;
     customIcons?: boolean;
     closeButton?: boolean;
     pauseOnHover?: boolean;
-    reverseOrder?: boolean;
     visibleToasts?: number;
     expand?: boolean;
     gap?: number;
     offset?: number | string;
 }
-export declare const toast: {
-    success: (message: string, options?: CustomToastOptions) => string;
-    error: (message: string, options?: CustomToastOptions) => string;
-    warning: (message: string, options?: CustomToastOptions) => string;
-    info: (message: string, options?: CustomToastOptions) => string;
-    loading: (message: string, options?: CustomToastOptions) => string;
-    promise: <T>(promise: Promise<T>, messages: {
-        loading: string;
-        success: string;
-        error: string;
-    }, options?: {
-        loading?: CustomToastOptions;
-        success?: CustomToastOptions;
-        error?: CustomToastOptions;
-    }) => Promise<T>;
-    custom: (message: string, type?: ToastType, options?: CustomToastOptions) => string;
-    action: (message: string, action: {
-        label: string;
-        onClick: () => void;
-    }, options?: CustomToastOptions) => string;
-    dismiss: (toastId?: string) => void;
-    remove: (toastId?: string) => void;
-};
 export declare function updateToastConfig(config: {
     duration?: number;
+    fireWithSound?: boolean;
     theme?: ToastTheme;
     richColors?: boolean;
 }): void;
+export declare const toast: ((message: Renderable, options?: ToastOptions) => string) & {
+    success: (message: Renderable, options?: ToastOptions) => string;
+    error: (message: Renderable, options?: ToastOptions) => string;
+    loading: (message: Renderable, options?: ToastOptions) => string;
+    promise: <T>(promise: Promise<T>, msgs: {
+        loading: Renderable;
+        success: ValueOrFunction<Renderable, T>;
+        error: ValueOrFunction<Renderable, any>;
+    }, opts?: DefaultToastOptions) => Promise<T>;
+    dismiss: (toastId?: string) => void;
+    remove: (toastId?: string) => void;
+    custom: (message: Renderable, options?: ToastOptions) => string;
+};
 export { originalToast };
 export type { ToastOptions };
-import { toast as originalToast, type ToastOptions } from 'svelte-french-toast';
 declare const Toast: import("svelte").Component<ToasterProps, {}, "">;
 type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/dist/ui/toast/index.d.ts

@@ -1 +1,2 @@
-export * from 'svelte-french-toast';
+export { default as Toaster, toast, originalToast, updateToastConfig } from './Toast.svelte';
+export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme, ToastOptions } from './Toast.svelte';

package/dist/ui/toast/index.js

@@ -1,3 +1 @@
-// export { default as Toaster, toast } from './Toast.svelte';
-// export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';
-export * from 'svelte-french-toast';
+export { default as Toaster, toast, originalToast, updateToastConfig } from './Toast.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "files": [
     "dist",
     "!dist/**/*.test.*",

package/dist/forms/FormSelect/index.d.ts

@@ -1 +0,0 @@
-export { default as FormSelect } from './FormSelect.svelte';

package/dist/forms/FormSelect/index.js

@@ -1 +0,0 @@
-export { default as FormSelect } from './FormSelect.svelte';

package/dist/forms/input/index.d.ts

@@ -1,4 +0,0 @@
-import type { SizeType } from '../../index.js';
-export { default as Input } from './Input.svelte';
-export { input } from './theme.js';
-export declare function clampSize(s: SizeType): "md" | "sm" | "lg";

package/dist/forms/input/index.js

@@ -1,5 +0,0 @@
-export { default as Input } from './Input.svelte';
-export { input } from './theme.js';
-export function clampSize(s) {
-    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
-}