@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/ui/modal/theme.js

@@ -1,41 +1,41 @@
-import { tv } from "tailwind-variants";
+import { tv } from 'tailwind-variants';
 export const modal = tv({
     slots: {
-        base: "backdrop:bg-black/80 open:flex flex-col w-full max-h-[90hv] rounded-lg divide-y text-gray-500 dark:text-gray-400 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-700 bg-white dark:bg-gray-800 pointer-events-auto",
-        form: "flex flex-col rounded-lg divide-y",
-        header: "flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white",
-        footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0",
-        body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain",
-        close: "absolute top-3 end-2.5"
+        base: 'backdrop:bg-black/80 open:flex flex-col w-full max-h-[90hv] rounded-lg divide-y text-gray-500 dark:text-gray-400 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-700 bg-white dark:bg-gray-800 pointer-events-auto',
+        form: 'flex flex-col rounded-lg divide-y',
+        header: 'flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white',
+        footer: 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0',
+        body: 'p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain',
+        close: 'absolute top-3 end-2.5'
     },
     variants: {
         fullscreen: {
             true: {
-                base: "fixed inset-0 w-screen h-screen max-w-none max-h-none m-0 p-0 border-none rounded-none bg-white dark:bg-gray-900"
+                base: 'fixed inset-0 w-screen h-screen max-w-none max-h-none m-0 p-0 border-none rounded-none bg-white dark:bg-gray-900'
             }
         },
         placement: {
-            "top-left": { base: "top-0 left-0" },
-            "top-center": { base: "top-0 left-1/2 -translate-x-1/2" },
-            "top-right": { base: "top-0 left-full -translate-x-full" },
-            "center-left": { base: "top-1/2 left-0 -translate-y-1/2" },
-            center: { base: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" },
-            "center-right": { base: "top-1/2 left-full -translate-x-full -translate-y-1/2" },
-            "bottom-left": { base: "top-full -translate-y-full left-0" },
-            "bottom-center": { base: "top-full -translate-y-full left-1/2 -translate-x-1/2" },
-            "bottom-right": { base: "top-full -translate-y-full left-full -translate-x-full" }
+            'top-left': { base: 'top-0 left-0' },
+            'top-center': { base: 'top-0 left-1/2 -translate-x-1/2' },
+            'top-right': { base: 'top-0 left-full -translate-x-full' },
+            'center-left': { base: 'top-1/2 left-0 -translate-y-1/2' },
+            center: { base: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' },
+            'center-right': { base: 'top-1/2 left-full -translate-x-full -translate-y-1/2' },
+            'bottom-left': { base: 'top-full -translate-y-full left-0' },
+            'bottom-center': { base: 'top-full -translate-y-full left-1/2 -translate-x-1/2' },
+            'bottom-right': { base: 'top-full -translate-y-full left-full -translate-x-full' }
         },
         size: {
-            none: { base: "" },
-            xs: { base: "max-w-md" },
-            sm: { base: "max-w-lg" },
-            md: { base: "max-w-2xl" },
-            lg: { base: "max-w-4xl" },
-            xl: { base: "max-w-7xl" }
+            none: { base: '' },
+            xs: { base: 'max-w-md' },
+            sm: { base: 'max-w-lg' },
+            md: { base: 'max-w-2xl' },
+            lg: { base: 'max-w-4xl' },
+            xl: { base: 'max-w-7xl' }
         }
     },
     defaultVariants: {
-        placement: "center",
-        size: "md"
+        placement: 'center',
+        size: 'md'
     }
 });

package/dist/ui/notificationList/NotificationList.svelte

@@ -1,123 +1,123 @@
-
-
-<script lang="ts" generics="T extends NotificationItem">
-	import { Dropdown, DropdownItem } from '../dropdown/index.js';
-	import { Avatar } from '../avatar/index.js';
-	import { PageLoader, type NotificationItem, type NotificationListProps } from '../../index.js';
-	import { onDestroy, onMount } from 'svelte';
-
-	let {
-		open = $bindable(false),
-		onClearNotifications,
-		header,
-		busy = false,
-		data: initialData = [],
-		onclick,
-		footer,
-		read
-	}: NotificationListProps<T> = $props();
-
-	let data = $state(initialData);
-	let internalOpen = $state(false);
-
-	$effect(() => {
-		if (open !== undefined) {
-			internalOpen = open;
-		}
-	});
-
-	async function fetchData() {
-		if (!read) return;
-
-		try {
-			busy = true;
-			const result = await read();
-			data = result;
-		} finally {
-			busy = false;
-		}
-	}
-
-	$effect(() => {
-		if (internalOpen) {
-			data = [];
-			fetchData();
-		}
-	});
-
-	onMount(() => {
-		if (initialData && initialData.length > 0) {
-			data = initialData;
-		}
-	});
-
-	onDestroy(() => {
-		data = [];
-	});
-</script>
-
-<Dropdown
-	bind:isOpen={internalOpen}
-	class="w-full max-w-sm divide-gray-100 rounded shadow dark:divide-gray-700 dark:bg-gray-800"
->
-	{#if header}
-		{@render header()}
-	{:else}
-		<div class="py-2 text-center font-bold">Notifications</div>
-	{/if}
-	<div
-		class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch flex max-h-80 flex-col divide-y divide-gray-300 overflow-y-auto"
-	>
-		{#if busy}
-			<div class="flex h-52 w-96 items-center justify-center">
-				<PageLoader size={40} />
-			</div>
-		{:else if data.length}
-			{#each data as item, index}
-				<DropdownItem class="flex w-full space-x-4" onclick={() => onclick?.(item)}>
-					<Avatar cornerStyle="rounded">
-						<iconify-icon icon={item.icon} style="font-size: 20px;"></iconify-icon>
-					</Avatar>
-					<div class="w-full pl-3 text-start">
-						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
-							<span class="font-semibold text-gray-900 dark:text-white">{item.sender}</span>: "{item.content}"
-						</div>
-						<div class="flex items-center justify-between">
-							<div class="text-xs text-primary-600 dark:text-primary-500">{item.time}</div>
-							<div class="flex items-center gap-1">
-								{#if item.isRead}
-									<span class="text-xs font-light text-gray-400">Read</span>
-								{/if}
-								<iconify-icon
-									icon={item.isRead ? 'ri:check-double-line' : 'uim:check'}
-									class={item.isRead ? 'text-blue-700' : 'text-gray-500'}
-									style="font-size: 18px;"
-								></iconify-icon>
-							</div>
-						</div>
-					</div>
-				</DropdownItem>
-			{/each}
-		{:else}
-			<div class="flex h-32 w-80 items-center justify-center space-x-4">
-				<p>No Notifications</p>
-			</div>
-		{/if}
-	</div>
-	{#if footer}
-		{@render footer()}
-	{:else}
-		<div
-			class="-my-1 block bg-gray-50 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
-		>
-			{#if data.length}
-				<button class="w-full" onclick={onClearNotifications}>
-					<div class="inline-flex items-center gap-2">
-						<iconify-icon icon="ic:round-close"></iconify-icon>
-						Clear all
-					</div>
-				</button>
-			{/if}
-		</div>
-	{/if}
-</Dropdown>
+
+
+<script lang="ts" generics="T extends NotificationItem">
+	import { Dropdown, DropdownItem } from '../dropdown/index.js';
+	import { Avatar } from '../avatar/index.js';
+	import { PageLoader, type NotificationItem, type NotificationListProps } from '../../index.js';
+	import { onDestroy, onMount } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		onClearNotifications,
+		header,
+		busy = false,
+		data: initialData = [],
+		onclick,
+		footer,
+		read
+	}: NotificationListProps<T> = $props();
+
+	let data = $state(initialData);
+	let internalOpen = $state(false);
+
+	$effect(() => {
+		if (open !== undefined) {
+			internalOpen = open;
+		}
+	});
+
+	async function fetchData() {
+		if (!read) return;
+
+		try {
+			busy = true;
+			const result = await read();
+			data = result;
+		} finally {
+			busy = false;
+		}
+	}
+
+	$effect(() => {
+		if (internalOpen) {
+			data = [];
+			fetchData();
+		}
+	});
+
+	onMount(() => {
+		if (initialData && initialData.length > 0) {
+			data = initialData;
+		}
+	});
+
+	onDestroy(() => {
+		data = [];
+	});
+</script>
+
+<Dropdown
+	bind:isOpen={internalOpen}
+	class="w-full max-w-sm divide-gray-100 rounded shadow dark:divide-gray-700 dark:bg-gray-800"
+>
+	{#if header}
+		{@render header()}
+	{:else}
+		<div class="py-2 text-center font-bold">Notifications</div>
+	{/if}
+	<div
+		class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch flex max-h-80 flex-col divide-y divide-gray-300 overflow-y-auto"
+	>
+		{#if busy}
+			<div class="flex h-52 w-96 items-center justify-center">
+				<PageLoader size={40} />
+			</div>
+		{:else if data.length}
+			{#each data as item, index}
+				<DropdownItem class="flex w-full space-x-4" onclick={() => onclick?.(item)}>
+					<Avatar cornerStyle="rounded">
+						<iconify-icon icon={item.icon} style="font-size: 20px;"></iconify-icon>
+					</Avatar>
+					<div class="w-full pl-3 text-start">
+						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
+							<span class="font-semibold text-gray-900 dark:text-white">{item.sender}</span>: "{item.content}"
+						</div>
+						<div class="flex items-center justify-between">
+							<div class="text-xs text-primary-600 dark:text-primary-500">{item.time}</div>
+							<div class="flex items-center gap-1">
+								{#if item.isRead}
+									<span class="text-xs font-light text-gray-400">Read</span>
+								{/if}
+								<iconify-icon
+									icon={item.isRead ? 'ri:check-double-line' : 'uim:check'}
+									class={item.isRead ? 'text-blue-700' : 'text-gray-500'}
+									style="font-size: 18px;"
+								></iconify-icon>
+							</div>
+						</div>
+					</div>
+				</DropdownItem>
+			{/each}
+		{:else}
+			<div class="flex h-32 w-80 items-center justify-center space-x-4">
+				<p>No Notifications</p>
+			</div>
+		{/if}
+	</div>
+	{#if footer}
+		{@render footer()}
+	{:else}
+		<div
+			class="-my-1 block bg-gray-50 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
+		>
+			{#if data.length}
+				<button class="w-full" onclick={onClearNotifications}>
+					<div class="inline-flex items-center gap-2">
+						<iconify-icon icon="ic:round-close"></iconify-icon>
+						Clear all
+					</div>
+				</button>
+			{/if}
+		</div>
+	{/if}
+</Dropdown>

package/dist/ui/pageLoader/PageLoader.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-	import type { PageLoaderProps } from '../../index.js';
-	import IconifyIcon from '../icons/IconifyIcon.svelte';
-
-	let { size = 70, iconColor = 'text-blue-400' }: PageLoaderProps = $props();
-</script>
-
-<div class="grid h-full w-full items-center justify-center">
-	<IconifyIcon
-		class={iconColor}
-		icon="svg-spinners:blocks-shuffle-3"
-		style="font-size: {size}px;"
-	/>
-</div>
+<script lang="ts">
+	import type { PageLoaderProps } from '../../index.js';
+	import IconifyIcon from '../icons/IconifyIcon.svelte';
+
+	let { size = 70, iconColor = 'text-blue-400' }: PageLoaderProps = $props();
+</script>
+
+<div class="grid h-full w-full items-center justify-center">
+	<IconifyIcon
+		class={iconColor}
+		icon="svg-spinners:blocks-shuffle-3"
+		style="font-size: {size}px;"
+	/>
+</div>

package/dist/ui/paginate/Paginate.svelte

@@ -1,96 +1,96 @@
-<script lang="ts">
-	import { Dropdown, type PaginateProps } from '../../index.js';
-
-	let {
-		currentPage,
-		hasNextPage,
-		hasPreviousPage,
-		onNextPage,
-		onPreviousPage,
-		refresh = null,
-		totalPages,
-		hiddenColumns = $bindable([]),
-		tableColumns = [],
-		textSmall = false,
-		hideLabel = true,
-		recordCount = 0
-	}: PaginateProps = $props();
-
-	// let hideState = tableColumns.map(x => )
-	let hideState = $state<Record<string, boolean>>({});
-	hiddenColumns.forEach((x) => (hideState[x] = true));
-	// $: hiddenColumns = Object.keys(hideState).filter((x) => hideState[x]);
-	// let hiddenColumns
-
-	let open = $state(false);
-</script>
-
-<div class:text-sm={textSmall} class="flex w-full items-center justify-between gap-2 text-gray-600">
-	<button
-		class=" items-center justify-center gap-1 p-2 text-sm font-semibold"
-		class:hidden={!totalPages}
-		class:flex={totalPages}
-		onclick={onPreviousPage}
-		disabled={!hasPreviousPage}
-		class:active={hasPreviousPage}
-		class:hover:bg-gray-200={hasPreviousPage}
-		class:rounded-md={hasPreviousPage}
-		class:text-gray-300={!hasPreviousPage}
-	>
-		<iconify-icon icon="material-symbols:arrow-back" style="font-size: 18px"></iconify-icon>
-		{#if !hideLabel}
-			<span>PREV</span>
-		{/if}
-	</button>
-	<div class="text-sm font-semibold">
-		{#if !hideLabel}
-			<span>Page</span>
-		{/if}
-		<span class:hidden={!totalPages} class:flex={totalPages}>{currentPage}/{totalPages}</span>
-	</div>
-	<span class:hidden={!recordCount} class:flex={recordCount}>({recordCount})</span>
-
-	<button
-		class="flex items-center justify-center gap-1 p-2 text-sm font-semibold"
-		class:hidden={!totalPages}
-		class:flex={totalPages}
-		onclick={onNextPage}
-		disabled={!hasNextPage}
-		class:active={hasNextPage}
-		class:hover:bg-gray-200={hasNextPage}
-		class:rounded-md={hasNextPage}
-		class:text-gray-300={!hasNextPage}
-	>
-		{#if !hideLabel}
-			<span>NEXT</span>
-		{/if}
-		<iconify-icon icon="material-symbols:arrow-forward" style="font-size: 18px"></iconify-icon>
-	</button>
-	<button
-		type="button"
-		aria-label="arrows-clockwise"
-		class="rotate-2 font-bold hover:text-gray-600"
-		class:hidden={!refresh}
-		onclick={refresh}
-	>
-		<iconify-icon icon="ph:arrows-clockwise" class="hover:animate-spin hover:text-gray-400"
-		></iconify-icon>
-	</button>
-	<div class:hidden={!tableColumns.length} class:flex={tableColumns}>
-		<button onclick={() => (open = !open)}>
-			<iconify-icon icon="ph:columns" class="text-red-500 hover:text-red-800"></iconify-icon>
-			<!-- <Tooltip>Toggle Columns</Tooltip> -->
-		</button>
-		<Dropdown
-			bind:isOpen={open}
-			class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2  scrolling-touch h-56 min-w-40 overflow-y-auto px-3 pb-3 text-sm"
-		>
-			{#each tableColumns as column}
-				<li class="flex w-full px-2 py-1.5 whitespace-nowrap">
-					<!-- <Toggle bind:checked={hideState[column.id]} class="cursor-pointer" /> -->
-					{column.header}
-				</li>
-			{/each}
-		</Dropdown>
-	</div>
-</div>
+<script lang="ts">
+	import { Dropdown, type PaginateProps } from '../../index.js';
+
+	let {
+		currentPage,
+		hasNextPage,
+		hasPreviousPage,
+		onNextPage,
+		onPreviousPage,
+		refresh = null,
+		totalPages,
+		hiddenColumns = $bindable([]),
+		tableColumns = [],
+		textSmall = false,
+		hideLabel = true,
+		recordCount = 0
+	}: PaginateProps = $props();
+
+	// let hideState = tableColumns.map(x => )
+	let hideState = $state<Record<string, boolean>>({});
+	hiddenColumns.forEach((x) => (hideState[x] = true));
+	// $: hiddenColumns = Object.keys(hideState).filter((x) => hideState[x]);
+	// let hiddenColumns
+
+	let open = $state(false);
+</script>
+
+<div class:text-sm={textSmall} class="flex w-full items-center justify-between gap-2 text-gray-600">
+	<button
+		class=" items-center justify-center gap-1 p-2 text-sm font-semibold"
+		class:hidden={!totalPages}
+		class:flex={totalPages}
+		onclick={onPreviousPage}
+		disabled={!hasPreviousPage}
+		class:active={hasPreviousPage}
+		class:hover:bg-gray-200={hasPreviousPage}
+		class:rounded-md={hasPreviousPage}
+		class:text-gray-300={!hasPreviousPage}
+	>
+		<iconify-icon icon="material-symbols:arrow-back" style="font-size: 18px"></iconify-icon>
+		{#if !hideLabel}
+			<span>PREV</span>
+		{/if}
+	</button>
+	<div class="text-sm font-semibold">
+		{#if !hideLabel}
+			<span>Page</span>
+		{/if}
+		<span class:hidden={!totalPages} class:flex={totalPages}>{currentPage}/{totalPages}</span>
+	</div>
+	<span class:hidden={!recordCount} class:flex={recordCount}>({recordCount})</span>
+
+	<button
+		class="flex items-center justify-center gap-1 p-2 text-sm font-semibold"
+		class:hidden={!totalPages}
+		class:flex={totalPages}
+		onclick={onNextPage}
+		disabled={!hasNextPage}
+		class:active={hasNextPage}
+		class:hover:bg-gray-200={hasNextPage}
+		class:rounded-md={hasNextPage}
+		class:text-gray-300={!hasNextPage}
+	>
+		{#if !hideLabel}
+			<span>NEXT</span>
+		{/if}
+		<iconify-icon icon="material-symbols:arrow-forward" style="font-size: 18px"></iconify-icon>
+	</button>
+	<button
+		type="button"
+		aria-label="arrows-clockwise"
+		class="rotate-2 font-bold hover:text-gray-600"
+		class:hidden={!refresh}
+		onclick={refresh}
+	>
+		<iconify-icon icon="ph:arrows-clockwise" class="hover:animate-spin hover:text-gray-400"
+		></iconify-icon>
+	</button>
+	<div class:hidden={!tableColumns.length} class:flex={tableColumns}>
+		<button onclick={() => (open = !open)}>
+			<iconify-icon icon="ph:columns" class="text-red-500 hover:text-red-800"></iconify-icon>
+			<!-- <Tooltip>Toggle Columns</Tooltip> -->
+		</button>
+		<Dropdown
+			bind:isOpen={open}
+			class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2  scrolling-touch h-56 min-w-40 overflow-y-auto px-3 pb-3 text-sm"
+		>
+			{#each tableColumns as column}
+				<li class="flex w-full px-2 py-1.5 whitespace-nowrap">
+					<!-- <Toggle bind:checked={hideState[column.id]} class="cursor-pointer" /> -->
+					{column.header}
+				</li>
+			{/each}
+		</Dropdown>
+	</div>
+</div>

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;