@ims360/svelte-ivory 0.0.22 → 0.0.25

package/src/lib/components/layout/tabs/TabPanel.svelte

@@ -1,14 +1,16 @@
-<script lang="ts">
+<script lang="ts" module>
     import { pseudoRandomId } from '$lib/utils/functions/index';
     import { type Snippet } from 'svelte';
     import { getTabContext } from './Tabs.svelte';
 
-    type Props = {
+    export interface TabPanelProps {
         keepMounted?: boolean;
         children: Snippet<[{ visible: boolean }]>;
-    };
+    }
+</script>
 
-    let { keepMounted = false, children }: Props = $props();
+<script lang="ts">
+    let { keepMounted = false, children }: TabPanelProps = $props();
 
     const panel = pseudoRandomId('tab-panel-');
     const tabs = getTabContext();

package/src/lib/components/layout/tabs/Tabs.svelte

@@ -1,33 +1,30 @@
 <script lang="ts" module>
-    import { getContext, onDestroy, setContext, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { IvoryComponent } from '$lib/types';
+    import { getContext, onDestroy, setContext } from 'svelte';
 
-    interface TabContext {
+    export interface TabsProps extends IvoryComponent<HTMLDivElement> {
+        b_index?: number;
+    }
+
+    export interface TabContext {
         registerTab: (tab: string) => void;
         registerPanel: (panel: string) => void;
         selectedTab: string | undefined;
         tabs: string[];
         selectedPanel: string | undefined;
     }
-    const TABS = {};
 
+    const CONTEXT = {};
     function setTabContext(context: TabContext) {
-        setContext<TabContext>(TABS, context);
+        setContext<TabContext>(CONTEXT, context);
     }
-
     export function getTabContext() {
-        return getContext<TabContext>(TABS);
+        return getContext<TabContext>(CONTEXT);
     }
 </script>
 
 <script lang="ts">
-    type Props = {
-        class?: ClassValue;
-        children: Snippet;
-        b_index?: number;
-    };
-
-    let { class: clazz = '', children, b_index = $bindable(0) }: Props = $props();
+    let { children, b_index = $bindable(0), ...rest }: TabsProps = $props();
 
     let allTabs: string[] = $state([]);
     let panels: string[] = $state([]);
@@ -81,6 +78,6 @@
     });
 </script>
 
-<div class={[clazz]}>
-    {@render children()}
+<div {...rest}>
+    {@render children?.()}
 </div>

package/src/lib/components/layout/tabs/index.ts

@@ -8,3 +8,6 @@ const Tabs = Object.assign(TabsComponent, {
 });
 
 export default Tabs;
+export { type TabProps } from './Tab.svelte';
+export { type TabPanelProps } from './TabPanel.svelte';
+export { getTabContext, type TabContext, type TabsProps } from './Tabs.svelte';

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/table/plugins/search.svelte.ts

@@ -1,5 +1,5 @@
 import { SvelteSet } from 'svelte/reactivity';
-import type { TablePlugin, TableRow } from '../table.svelte';
+import type { TablePlugin, TableRow } from '../';
 
 interface SearchConfig<T extends TableRow<T>> {
     search: string;
@@ -56,8 +56,6 @@ export const search = <T extends TableRow<T>>(
             node.children?.some((c) => recursor(c, matches || childOfMatch)) ?? false;
 
         if (intermediateNode) {
-            console.log('intermediateNode', node);
-
             expanded.add(node.id);
         } else if (!childOfMatch) {
             hidden.add(node.id);

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',