@rkosafo/cai.components 0.0.81 → 0.0.83

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

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

package/dist/forms/FormSelect/index.js

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,5 @@
+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;
+}

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

@@ -0,0 +1,301 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type InputVariants = VariantProps<typeof input> & Classes<typeof input>;
+export declare const input: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+        };
+        md: {
+            input: string;
+        };
+        lg: {
+            input: string;
+        };
+    };
+    color: {
+        default: {
+            input: string;
+        };
+        tinted: {
+            input: string;
+        };
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    grouped: {
+        false: {
+            input: string;
+        };
+        true: {
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    left: string;
+    right: string;
+    close: string;
+    combo: string;
+    comboItem: string;
+    div: string;
+    svg: string;
+    wrapper: string;
+}, undefined, {
+    size: {
+        sm: {
+            input: string;
+        };
+        md: {
+            input: string;
+        };
+        lg: {
+            input: string;
+        };
+    };
+    color: {
+        default: {
+            input: string;
+        };
+        tinted: {
+            input: string;
+        };
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    grouped: {
+        false: {
+            input: string;
+        };
+        true: {
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    left: string;
+    right: string;
+    close: string;
+    combo: string;
+    comboItem: string;
+    div: string;
+    svg: string;
+    wrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            input: string;
+        };
+        md: {
+            input: string;
+        };
+        lg: {
+            input: string;
+        };
+    };
+    color: {
+        default: {
+            input: string;
+        };
+        tinted: {
+            input: string;
+        };
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    grouped: {
+        false: {
+            input: string;
+        };
+        true: {
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    left: string;
+    right: string;
+    close: string;
+    combo: string;
+    comboItem: string;
+    div: string;
+    svg: string;
+    wrapper: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/input/theme.js

@@ -0,0 +1,100 @@
+import { tv } from 'tailwind-variants';
+export const input = tv({
+    slots: {
+        base: 'relative w-full',
+        input: 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:outline-hidden',
+        left: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 p-2.5',
+        right: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5',
+        close: 'absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black',
+        combo: 'absolute top-full right-0 left-0 z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800',
+        comboItem: 'text-gray-900 dark:text-gray-50',
+        div: '',
+        svg: '',
+        wrapper: ''
+    },
+    variants: {
+        size: {
+            sm: { input: 'text-xs px-2 py-1' },
+            md: { input: 'text-sm px-2.5 py-2.5' },
+            lg: { input: 'sm:text-base px-3 py-3' }
+        },
+        color: {
+            default: {
+                input: 'border border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400'
+            },
+            tinted: {
+                input: 'border border-gray-300 dark:border-gray-500 bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400'
+            },
+            primary: {
+                input: 'border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-gray-700'
+            },
+            secondary: {
+                input: 'border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-gray-700'
+            },
+            green: {
+                input: 'border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700'
+            },
+            emerald: {
+                input: 'border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-gray-700'
+            },
+            red: {
+                input: 'border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-gray-700'
+            },
+            blue: {
+                input: 'border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-gray-700'
+            },
+            yellow: {
+                input: 'border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-gray-700'
+            },
+            orange: {
+                input: 'border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-gray-700'
+            },
+            gray: {
+                input: 'border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-gray-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-gray-500 dark:bg-gray-700'
+            },
+            teal: {
+                input: 'border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-gray-700'
+            },
+            cyan: {
+                input: 'border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-gray-700'
+            },
+            sky: {
+                input: 'border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-gray-700'
+            },
+            indigo: {
+                input: 'border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-gray-700'
+            },
+            lime: {
+                input: 'border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-gray-700'
+            },
+            amber: {
+                input: 'border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-gray-700'
+            },
+            violet: {
+                input: 'border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-gray-700'
+            },
+            purple: {
+                input: 'border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-gray-700'
+            },
+            fuchsia: {
+                input: 'border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-gray-700'
+            },
+            pink: {
+                input: 'border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-gray-700'
+            },
+            rose: {
+                input: 'border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-gray-700'
+            }
+        },
+        grouped: {
+            false: { input: 'rounded-lg' },
+            true: {
+                input: 'first:rounded-s-lg last:rounded-e-lg not-first:-ms-px'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'default'
+    }
+});

package/dist/index.d.ts

@@ -1,7 +1,5 @@
 export { getTheme } from './themes/themeUtils.js';
 export { default as ThemeProvider } from './themes/ThemeProvider.svelte';
-import YouTube from './youtube/index.svelte';
-import BaseEditor from './baseEditor/index.svelte';
 export * from './layout/TF/index.js';
 export * from './ui/dropdown/index.js';
 export * from './ui/buttons/index.js';
@@ -54,4 +52,3 @@ export * from './types/index.js';
 export * from './utils/index.js';
 export * from './utils/svelte-legos.js';
 export * from './keycloak/index.js';
-export { YouTube, BaseEditor };

package/dist/index.js

@@ -1,8 +1,8 @@
 export { getTheme } from './themes/themeUtils.js';
 export { default as ThemeProvider } from './themes/ThemeProvider.svelte';
 // Reexport your entry components here
-import YouTube from './youtube/index.svelte';
-import BaseEditor from './baseEditor/index.svelte';
+// import YouTube from './youtube/index.svelte';
+// import BaseEditor from './baseEditor/index.svelte';
 export * from './layout/TF/index.js';
 export * from './ui/dropdown/index.js';
 export * from './ui/buttons/index.js';
@@ -55,4 +55,4 @@ export * from './types/index.js';
 export * from './utils/index.js';
 export * from './utils/svelte-legos.js';
 export * from './keycloak/index.js';
-export { YouTube, BaseEditor };
+// export { YouTube, BaseEditor };

package/dist/layout/TF/Sidebar/Sidebar.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+	export interface TFSidebarProps {
+		homeUrl: string;
+		logoUrl: string;
+		appShortName: string;
+		appName: string;
+		hideSidebar?: boolean;
+		menuItems: IMenuItem[];
+	}
+
+	export interface IMenuItem {
+		title: string;
+		icon?: string;
+		path?: string;
+		items?: IMenuItem[] | null;
+		description?: string;
+		iconBg?: string;
+		iconColor?: string;
+		iconSize?: number;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils/index.js';
+	import { page } from '$app/state';
+
+	let {
+		homeUrl,
+		logoUrl,
+		appName,
+		appShortName,
+		hideSidebar = false,
+		menuItems = []
+	}: TFSidebarProps = $props();
+
+	let activeUrl = $state('');
+	$effect(() => {
+		activeUrl = page.url.pathname;
+	});
+</script>
+
+{#snippet menuItemSnippet(item: IMenuItem, active: boolean)}
+	<li class:active class="relative">
+		<a class="space-x-3 pl-3" href={item.path}>
+			<iconify-icon icon={item.icon}></iconify-icon>
+
+			<span class="text hidden md:block">{item.title}</span>
+		</a>
+	</li>
+{/snippet}
+<section id="tf-sidebar" class={cn('relative')} class:hide={hideSidebar}>
+	<a href={homeUrl} class="brand flex flex-col pt-4">
+		<img src={logoUrl} alt="Logo" class={hideSidebar ? 'w-12' : 'w-12 md:w-24'} loading="lazy" />
+		<span class="text-base font-thin {hideSidebar ? 'block' : 'md:hidden'}">{appShortName}</span>
+		<p class="text-center text-lg font-medium {hideSidebar ? 'hidden' : 'hidden md:block'}">
+			{appName}
+		</p>
+	</a>
+	{#if menuItems.length > 0}
+		<ul class="side-menu top relative pt-4">
+			{#each menuItems as item}
+				{@const active = activeUrl === item.path}
+				{@render menuItemSnippet(item, active)}
+			{/each}
+		</ul>
+	{/if}
+</section>

package/dist/layout/TF/Sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface TFSidebarProps {
+    homeUrl: string;
+    logoUrl: string;
+    appShortName: string;
+    appName: string;
+    hideSidebar?: boolean;
+    menuItems: IMenuItem[];
+}
+export interface IMenuItem {
+    title: string;
+    icon?: string;
+    path?: string;
+    items?: IMenuItem[] | null;
+    description?: string;
+    iconBg?: string;
+    iconColor?: string;
+    iconSize?: number;
+}
+declare const Sidebar: import("svelte").Component<TFSidebarProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/layout/TF/Sidebar/index.d.ts

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

package/dist/layout/TF/Sidebar/index.js

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

package/dist/layout/TF/Wrapper/index.d.ts

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

package/dist/layout/TF/Wrapper/index.js

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

package/dist/ui/accordion/theme.d.ts

@@ -0,0 +1,96 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type AccordionVariants = VariantProps<typeof accordion>;
+export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full", {
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full", unknown, unknown, undefined>>;
+export declare const accordionItem: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/ui/accordion/theme.js

@@ -0,0 +1,59 @@
+import { tv } from 'tailwind-variants';
+export const accordion = tv({
+    base: 'w-full',
+    variants: {
+        color: {
+            primary: 'text-primary-500 dark:text-primary-400',
+            secondary: 'text-secondary-500 dark:text-secondary-400'
+        },
+        flush: {
+            true: '',
+            false: 'border border-gray-200 dark:border-gray-700 rounded-t-xl'
+        }
+    }
+});
+export const accordionItem = tv({
+    slots: {
+        base: 'group',
+        button: 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b',
+        content: 'border-b border-gray-200 dark:border-gray-700',
+        active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800',
+        inactive: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+    },
+    variants: {
+        flush: {
+            true: {
+                button: 'py-5',
+                content: 'py-5'
+            },
+            false: {
+                button: 'p-5 border-s border-e group-first:border-t',
+                content: 'p-5 border-s border-e'
+            }
+        },
+        open: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            flush: true,
+            open: true,
+            class: {
+                button: 'text-gray-900 dark:text-white'
+            }
+        },
+        {
+            flush: true,
+            open: false,
+            class: {
+                button: 'text-gray-500 dark:text-gray-400'
+            }
+        }
+    ],
+    defaultVariants: {
+        flush: false,
+        open: false
+    }
+});

package/dist/ui/modal/Modal.svelte

@@ -233,7 +233,7 @@
 	<div
 		bind:this={ref}
 		use:focusTrap
-		class="fixed inset-0 z-40 flex items-center justify-center p-4"
+		class="fixed inset-0 z-40 overflow-y-auto p-4"
 		onclick={_onclick}
 		onkeydown={(ev) => {
 			if (ev.key === 'Escape' && !permanent) {
@@ -253,22 +253,22 @@
 				class: clsx(
 					theme?.base,
 					className,
-					'relative z-10',
+					fullscreen ? 'z-10' : 'absolute z-10',
 					!modal && 'shadow-xl'
 				)
 			})}
-		tabindex="-1"
-		onsubmit={_onsubmit}
-		transition:transition|global={paramsOptions as ParamsType}
-		{...restProps}
-	>
-		{#if form}
-			<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
+			tabindex="-1"
+			onsubmit={_onsubmit}
+			transition:transition|global={paramsOptions as ParamsType}
+			{...restProps}
+		>
+			{#if form}
+				<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
+					{@render content()}
+				</form>
+			{:else}
 				{@render content()}
-			</form>
-		{:else}
-			{@render content()}
-		{/if}
+			{/if}
 		</div>
 	</div>
 {/if}

package/dist/ui/speedDial/SpeedDial.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import Popper from '../../utils/Popper.svelte';
+	import { getSideAxis } from '@floating-ui/utils';
+	import { setContext, untrack } from 'svelte';
+	import { speedDial } from './theme.js';
+	import type { SpeedDialProps, SpeedCtxType } from '../../index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+
+	let {
+		children,
+		popperClass,
+		placement = 'top',
+		pill = true,
+		tooltip = 'left',
+		trigger = 'hover',
+		textOutside = false,
+		class: className,
+		classes,
+		isOpen = $bindable(false),
+		...restProps
+	}: SpeedDialProps = $props();
+
+	warnThemeDeprecation(
+		'SpeedDial',
+		untrack(() => ({ popperClass })),
+		{ popperClass: 'popper' }
+	);
+
+	const styling = $derived(
+		classes ?? {
+			popper: popperClass
+		}
+	);
+
+	const theme = $derived(getTheme('speedDial'));
+
+	$effect(() => {
+		setContext<SpeedCtxType>('speed-dial', { pill, tooltip, textOutside });
+	});
+
+	let vertical: boolean = $derived(getSideAxis(placement) === 'y');
+
+	let { base, popper } = $derived(speedDial({ vertical }));
+</script>
+
+<Popper
+	{...restProps}
+	bind:isOpen
+	{trigger}
+	arrow={false}
+	{placement}
+	class={base({ class: clsx(theme?.base, className) })}
+>
+	<div class={popper({ class: clsx(theme?.popper, styling.popper) })}>
+		{@render children()}
+	</div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+## Props
+@prop children
+@prop popperClass
+@prop placement = "top"
+@prop pill = true
+@prop tooltip = "left"
+@prop trigger = "hover"
+@prop textOutside = false
+@prop class: className
+@prop classes
+@prop isOpen = $bindable(false)
+@prop ...restProps
+-->

package/dist/ui/speedDial/SpeedDial.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SpeedDialProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+ * ## Props
+ * @prop children
+ * @prop popperClass
+ * @prop placement = "top"
+ * @prop pill = true
+ * @prop tooltip = "left"
+ * @prop trigger = "hover"
+ * @prop textOutside = false
+ * @prop class: className
+ * @prop classes
+ * @prop isOpen = $bindable(false)
+ * @prop ...restProps
+ */
+declare const SpeedDial: import("svelte").Component<SpeedDialProps, {}, "isOpen">;
+type SpeedDial = ReturnType<typeof SpeedDial>;
+export default SpeedDial;

package/dist/ui/tableLoader/TableLoader.svelte

@@ -0,0 +1,24 @@
+<script>
+	let { bodySize = 10, headerSize = 6 } = $props();
+</script>
+
+<table class="w-full animate-pulse">
+	<thead>
+		{#each Array(headerSize) as _}
+			<th class="px-6 py-2 whitespace-nowrap">
+				<div class=" h-7 rounded-md bg-gray-300"></div>
+			</th>
+		{/each}
+	</thead>
+	<tbody class="divide-y border-t border-gray-400">
+		{#each Array(bodySize) as _}
+			<tr>
+				{#each Array(headerSize) as _}
+					<td class="px-6 py-2 whitespace-nowrap">
+						<div class=" h-7 rounded-md bg-gray-300"></div>
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+</table>

package/dist/ui/tableLoader/TableLoader.svelte.d.ts

@@ -0,0 +1,13 @@
+export default TableLoader;
+type TableLoader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TableLoader: import("svelte").Component<{
+    bodySize?: number;
+    headerSize?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    bodySize?: number;
+    headerSize?: number;
+};

package/dist/ui/toast/Toast.svelte

@@ -34,6 +34,15 @@
 	export type CustomToastOptions = ToastOptions;
 	export type ToastTheme = Record<string, never>;
 
+	export type ToastSoundPreset =
+		| 'chime'
+		| 'ding'
+		| 'bell'
+		| 'soft'
+		| 'pop'
+		| 'pulse'
+		| 'airy';
+
 	export interface ToasterProps {
 		position?: ToastPosition;
 		duration?: number;
@@ -43,6 +52,8 @@
 		containerStyle?: string;
 		containerClassName?: string;
 		fireWithSound?: boolean;
+		/** Web Audio preset when `fireWithSound` is true. Default `chime`. */
+		soundPreset?: ToastSoundPreset;
 		// Kept for backward compatibility (no-op in wrapper mode)
 		className?: string;
 		theme?: ToastTheme;
@@ -58,58 +69,188 @@
 
 	let currentDuration = 4000;
 	let currentFireWithSound = false;
+	let currentSoundPreset: ToastSoundPreset = 'chime';
 
-	function playToastSound() {
-		if (!currentFireWithSound || typeof window === 'undefined') return;
+	let sharedAudioContext: AudioContext | null = null;
 
+	function getSharedAudioContext(): AudioContext | null {
+		if (typeof window === 'undefined') return null;
 		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);
+			if (sharedAudioContext && sharedAudioContext.state !== 'closed') {
+				return sharedAudioContext;
+			}
+			sharedAudioContext = null;
+			const AudioContextClass =
+				window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+			if (!AudioContextClass) return null;
+			sharedAudioContext = new AudioContextClass();
+			return sharedAudioContext;
 		} catch {
-			// Ignore audio errors.
+			return null;
+		}
+	}
+
+	function envelopeAttackRelease(
+		gain: GainNode,
+		ctx: AudioContext,
+		t: number,
+		peak: number,
+		attack: number,
+		release: number
+	) {
+		gain.gain.setValueAtTime(0.0001, t);
+		gain.gain.exponentialRampToValueAtTime(peak, t + attack);
+		gain.gain.exponentialRampToValueAtTime(0.0001, t + attack + release);
+	}
+
+	function playPresetSound(ctx: AudioContext, preset: ToastSoundPreset) {
+		const t0 = ctx.currentTime;
+
+		switch (preset) {
+			case 'chime': {
+				const freqs = [523.25, 659.25];
+				for (let i = 0; i < freqs.length; i++) {
+					const start = t0 + i * 0.065;
+					const osc = ctx.createOscillator();
+					const g = ctx.createGain();
+					osc.type = 'sine';
+					osc.frequency.setValueAtTime(freqs[i], start);
+					envelopeAttackRelease(g, ctx, start, 0.07, 0.012, 0.11);
+					osc.connect(g);
+					g.connect(ctx.destination);
+					osc.start(start);
+					osc.stop(start + 0.2);
+				}
+				break;
+			}
+			case 'ding': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(1046.5, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.08, 0.004, 0.14);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.2);
+				break;
+			}
+			case 'bell': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'triangle';
+				osc.frequency.setValueAtTime(740, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.06, 0.006, 0.22);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.28);
+				break;
+			}
+			case 'soft': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(392, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.05, 0.02, 0.2);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.26);
+				break;
+			}
+			case 'pop': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(320, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.06, 0.002, 0.045);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.08);
+				break;
+			}
+			case 'pulse': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(620, t0);
+				osc.frequency.exponentialRampToValueAtTime(920, t0 + 0.07);
+				envelopeAttackRelease(g, ctx, t0, 0.07, 0.003, 0.08);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.12);
+				break;
+			}
+			case 'airy':
+			default: {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(1760, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.025, 0.002, 0.07);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.1);
+				break;
+			}
 		}
 	}
 
+	/** Schedules sound after the current frame so the toast paints first; handles suspended AudioContext. */
+	function scheduleToastSound() {
+		if (!currentFireWithSound || typeof window === 'undefined') return;
+
+		queueMicrotask(() => {
+			void (async () => {
+				const ctx = getSharedAudioContext();
+				if (!ctx) return;
+				try {
+					if (ctx.state === 'suspended') await ctx.resume();
+					playPresetSound(ctx, currentSoundPreset);
+				} catch {
+					// Ignore audio errors.
+				}
+			})();
+		});
+	}
+
 	export function updateToastConfig(config: {
 		duration?: number;
 		fireWithSound?: boolean;
+		soundPreset?: ToastSoundPreset;
 		theme?: ToastTheme;
 		richColors?: boolean;
 	}) {
 		if (config.duration !== undefined) currentDuration = config.duration;
 		if (config.fireWithSound !== undefined) currentFireWithSound = config.fireWithSound;
+		if (config.soundPreset !== undefined) currentSoundPreset = config.soundPreset;
 	}
 
 	export const toast = Object.assign(
 		(message: Renderable, options?: ToastOptions) => {
-			playToastSound();
-			return originalToast(message, { duration: currentDuration, ...options });
+			const id = originalToast(message, { duration: currentDuration, ...options });
+			scheduleToastSound();
+			return id;
 		},
 		{
 			success: (message: Renderable, options?: ToastOptions) => {
-				playToastSound();
-				return originalToast.success(message, { duration: currentDuration, ...options });
+				const id = originalToast.success(message, { duration: currentDuration, ...options });
+				scheduleToastSound();
+				return id;
 			},
 			error: (message: Renderable, options?: ToastOptions) => {
-				playToastSound();
-				return originalToast.error(message, { duration: currentDuration, ...options });
+				const id = originalToast.error(message, { duration: currentDuration, ...options });
+				scheduleToastSound();
+				return id;
 			},
 			loading: (message: Renderable, options?: ToastOptions) => {
-				playToastSound();
-				return originalToast.loading(message, { duration: currentDuration, ...options });
+				const id = originalToast.loading(message, { duration: currentDuration, ...options });
+				scheduleToastSound();
+				return id;
 			},
 			promise: <T,>(
 				promise: Promise<T>,
@@ -120,8 +261,9 @@
 				},
 				opts?: DefaultToastOptions
 			) => {
-				playToastSound();
-				return originalToast.promise(promise, msgs, opts);
+				const out = originalToast.promise(promise, msgs, opts);
+				scheduleToastSound();
+				return out;
 			},
 			dismiss: originalToast.dismiss.bind(originalToast),
 			remove: originalToast.remove.bind(originalToast),
@@ -154,7 +296,8 @@
 		expand = false,
 		gap = 8,
 		offset = '32px',
-		fireWithSound = false
+		fireWithSound = false,
+		soundPreset = 'chime'
 	}: ToasterProps = $props();
 
 	$effect(() => {
@@ -162,7 +305,7 @@
 		void theme;
 		void richColors;
 		void customIcons;
-		updateToastConfig({ duration, fireWithSound });
+		updateToastConfig({ duration, fireWithSound, soundPreset });
 	});
 </script>
 

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

@@ -4,6 +4,7 @@ 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 type ToastSoundPreset = 'chime' | 'ding' | 'bell' | 'soft' | 'pop' | 'pulse' | 'airy';
 export interface ToasterProps {
     position?: ToastPosition;
     duration?: number;
@@ -13,6 +14,8 @@ export interface ToasterProps {
     containerStyle?: string;
     containerClassName?: string;
     fireWithSound?: boolean;
+    /** Web Audio preset when `fireWithSound` is true. Default `chime`. */
+    soundPreset?: ToastSoundPreset;
     className?: string;
     theme?: ToastTheme;
     richColors?: boolean;
@@ -27,6 +30,7 @@ export interface ToasterProps {
 export declare function updateToastConfig(config: {
     duration?: number;
     fireWithSound?: boolean;
+    soundPreset?: ToastSoundPreset;
     theme?: ToastTheme;
     richColors?: boolean;
 }): void;

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

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

package/package.json

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