@rkosafo/cai.components 0.0.78 → 0.0.80

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/pageLoader/PageLoader2.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface PageLoader2Props extends HTMLAttributes<HTMLDivElement> {
+		/** Optional message below the spinner */
+		message?: string;
+		/** Use full-screen overlay (fixed, centered, dimmed background) */
+		fullScreen?: boolean;
+		/** Loader size in pixels */
+		size?: number;
+		/** Overlay background classes when fullScreen is true */
+		overlayColor?: string;
+		/** Static outer ring border color class */
+		ringBaseColor?: string;
+		/** Rotating outer ring accent classes */
+		ringOuterColor?: string;
+		/** Rotating inner ring accent classes */
+		ringInnerColor?: string;
+		/** Center dot and bounce dots color class */
+		dotColor?: string;
+		/** Message text color class */
+		textColor?: string;
+	}
+
+	let {
+		message,
+		fullScreen = true,
+		size = 56,
+		overlayColor = 'bg-background/80',
+		ringBaseColor = 'border-muted',
+		ringOuterColor = 'border-t-accent border-r-accent/60',
+		ringInnerColor = 'border-b-primary border-l-primary/40',
+		dotColor = 'bg-accent',
+		textColor = 'text-muted-foreground',
+		class: className,
+		...restProps
+	}: PageLoader2Props = $props();
+</script>
+
+<div
+	{...restProps}
+	class={clsx(
+		'flex flex-col items-center justify-center gap-6',
+		fullScreen && ['fixed inset-0 z-50 backdrop-blur-sm', overlayColor],
+		className
+	)}
+	role="status"
+	aria-live="polite"
+	aria-label={message ?? 'Loading'}
+>
+	<div class="relative" style={`width: ${size}px; height: ${size}px;`} aria-hidden="true">
+		<div class={clsx('absolute inset-0 rounded-full border-2', ringBaseColor)}></div>
+		<div
+			class={clsx(
+				'absolute inset-0 rounded-full border-2 border-transparent animate-[spin_0.8s_linear_infinite]',
+				ringOuterColor
+			)}
+		></div>
+		<div
+			class={clsx(
+				'absolute inset-1 rounded-full border-2 border-transparent animate-[spin_1.2s_linear_infinite_reverse]',
+				ringInnerColor
+			)}
+		></div>
+		<div class="absolute inset-0 flex items-center justify-center">
+			<div class={clsx('h-2 w-2 rounded-full animate-pulse', dotColor)}></div>
+		</div>
+	</div>
+
+	{#if message}
+		<div class="flex flex-col items-center gap-2">
+			<p class={clsx('text-sm font-medium', textColor)}>{message}</p>
+			<div class="flex gap-1.5" aria-hidden="true">
+				<span
+					class={clsx(
+						'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
+						dotColor
+					)}
+					style="animation-delay: 0ms;"
+				></span>
+				<span
+					class={clsx(
+						'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
+						dotColor
+					)}
+					style="animation-delay: 160ms;"
+				></span>
+				<span
+					class={clsx(
+						'h-1.5 w-1.5 rounded-full animate-[page-loader-bounce_1.4s_ease-in-out_infinite_both]',
+						dotColor
+					)}
+					style="animation-delay: 320ms;"
+				></span>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/ui/pageLoader/PageLoader2.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface PageLoader2Props extends HTMLAttributes<HTMLDivElement> {
+    /** Optional message below the spinner */
+    message?: string;
+    /** Use full-screen overlay (fixed, centered, dimmed background) */
+    fullScreen?: boolean;
+    /** Loader size in pixels */
+    size?: number;
+    /** Overlay background classes when fullScreen is true */
+    overlayColor?: string;
+    /** Static outer ring border color class */
+    ringBaseColor?: string;
+    /** Rotating outer ring accent classes */
+    ringOuterColor?: string;
+    /** Rotating inner ring accent classes */
+    ringInnerColor?: string;
+    /** Center dot and bounce dots color class */
+    dotColor?: string;
+    /** Message text color class */
+    textColor?: string;
+}
+declare const PageLoader2: import("svelte").Component<PageLoader2Props, {}, "">;
+type PageLoader2 = ReturnType<typeof PageLoader2>;
+export default PageLoader2;

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

@@ -1 +1,2 @@
-export { default as PageLoader } from "./PageLoader.svelte";
+export { default as PageLoader } from './PageLoader.svelte';
+export { default as PageLoader2 } from './PageLoader2.svelte';

package/dist/ui/pageLoader/index.js

@@ -1 +1,2 @@
-export { default as PageLoader } from "./PageLoader.svelte";
+export { default as PageLoader } from './PageLoader.svelte';
+export { default as PageLoader2 } from './PageLoader2.svelte';

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>