@ims360/svelte-ivory 0.0.22 → 0.0.24

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -67,7 +67,6 @@
     @component
     Shows additional information when hovering over an element.
 -->
-
 <!-- Ignoring this error is fine since it's a false positive -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element

package/src/lib/components/toast/Toast.svelte

@@ -1,3 +1,11 @@
+<script lang="ts" module>
+    export interface Props {
+        class?: ClassValue;
+        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
+        duration?: number;
+    }
+</script>
+
 <!-- 
 	@component
 	Renders the toasts that have been triggered by the `Toasts` store.  
@@ -12,12 +20,7 @@
     import { fly, scale } from 'svelte/transition';
     import { Toasts, type ToastSettings } from './toasts.svelte';
 
-    type Props = {
-        class?: ClassValue;
-        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
-    };
-
-    let { class: clazz = 'px-2 pb-2', children }: Props = $props();
+    let { class: clazz = 'px-2 pb-2', children, duration = 200 }: Props = $props();
 
     function getIcon(
         variant: 'info' | 'success' | 'warning' | 'error',
@@ -51,9 +54,9 @@
 
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
-                in:fly={{ y: '-100%', duration: 300 }}
-                out:scale={{ duration: 300 }}
-                animate:flip={{ duration: 300 }}
+                in:fly={{ y: '-100%', duration }}
+                out:scale={{ duration }}
+                animate:flip={{ duration }}
                 onpointerenter={() => {
                     Toasts.freeze(toast.id);
                 }}
@@ -71,10 +74,14 @@
                     <div
                         class={[
                             'bg-opacity-85 flex flex-row items-center gap-4 rounded px-4 py-2 shadow-lg group-last:rounded-t-none',
-                            toast.variant === 'info' && 'preset-filled-primary-500',
-                            toast.variant === 'success' && 'preset-filled-success-500',
-                            toast.variant === 'warning' && 'preset-filled-warning-500',
-                            toast.variant === 'error' && 'preset-filled-error-500'
+                            toast.variant === 'info' &&
+                                'bg-primary-200-800 text-primary-contrast-50-950',
+                            toast.variant === 'success' &&
+                                'bg-success-200-800 text-success-contrast-50-950',
+                            toast.variant === 'warning' &&
+                                'bg-warning-200-800 text-warning-contrast-50-950',
+                            toast.variant === 'error' &&
+                                'bg-error-200-800 text-error-contrast-50-950'
                         ]}
                     >
                         <VariantIcon />
@@ -87,9 +94,9 @@
                                 onclick={() => {
                                     Toasts.close(toast.id);
                                 }}
-                                class="transition-transform hover:rotate-90"
+                                class="group"
                             >
-                                <X />
+                                <X size={20} class="stroke-1 transition-all group-hover:stroke-2" />
                             </button>
                         {/if}
                     </div>

package/src/lib/components/toast/index.ts

@@ -1,2 +1,2 @@
-export { default as ToastUI } from './Toast.svelte';
-export { Toasts } from './toasts.svelte';
+export { default as ToastUI, type Props as ToastUIProps } from './Toast.svelte';
+export { Toasts, type ToastSettings } from './toasts.svelte';

package/src/lib/components/toast/toasts.svelte.ts

@@ -1,18 +1,18 @@
 import type { Icon } from '@lucide/svelte';
 
-export type ToastSettings = {
+export interface ToastSettings {
     message: string;
     autohide?: boolean;
     timeout?: number;
     hideDismiss?: boolean;
     icon?: typeof Icon;
     variant: 'info' | 'success' | 'warning' | 'error';
-};
+}
 
-type Toast = ToastSettings & {
+interface Toast extends ToastSettings {
     id: string;
     timeoutId?: ReturnType<typeof setTimeout>;
-};
+}
 
 const TOAST_DEFAULTS: ToastSettings = {
     message: 'Missing Toast Message',