@rkosafo/cai.components 0.0.1 → 0.0.3

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

@@ -0,0 +1,190 @@
+import type { Classes } from "../../themes/themeUtils.js";
+import { type VariantProps } from "tailwind-variants";
+export type ModalVariants = VariantProps<typeof modal> & Classes<typeof modal>;
+export declare const modal: import("tailwind-variants").TVReturnType<{
+    fullscreen: {
+        true: {
+            base: string;
+        };
+    };
+    placement: {
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    size: {
+        none: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    form: string;
+    header: string;
+    footer: string;
+    body: string;
+    close: string;
+}, undefined, {
+    fullscreen: {
+        true: {
+            base: string;
+        };
+    };
+    placement: {
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    size: {
+        none: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    form: string;
+    header: string;
+    footer: string;
+    body: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullscreen: {
+        true: {
+            base: string;
+        };
+    };
+    placement: {
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+    };
+    size: {
+        none: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    form: string;
+    header: string;
+    footer: string;
+    body: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/ui/modal/theme.js

@@ -0,0 +1,41 @@
+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"
+    },
+    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"
+            }
+        },
+        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" }
+        },
+        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" }
+        }
+    },
+    defaultVariants: {
+        placement: "center",
+        size: "md"
+    }
+});

package/dist/ui/notificationList/NotificationList.svelte

@@ -0,0 +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 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/notificationList/NotificationList.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type NotificationItem, type NotificationListProps } from '../../index.js';
+declare function $$render<T extends NotificationItem>(): {
+    props: NotificationListProps<T>;
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends NotificationItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends NotificationItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends NotificationItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NotificationList: $$IsomorphicComponent;
+type NotificationList<T extends NotificationItem> = InstanceType<typeof NotificationList<T>>;
+export default NotificationList;

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

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

package/dist/ui/notificationList/index.js

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

package/dist/ui/pageLoader/PageLoader.svelte

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

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

@@ -0,0 +1,4 @@
+import type { PageLoaderProps } from '../../index.js';
+declare const PageLoader: import("svelte").Component<PageLoaderProps, {}, "">;
+type PageLoader = ReturnType<typeof PageLoader>;
+export default PageLoader;

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

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

package/dist/ui/pageLoader/index.js

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

package/dist/ui/paginate/Paginate.svelte

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

package/dist/ui/paginate/Paginate.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type PaginateProps } from '../../index.js';
+declare const Paginate: import("svelte").Component<PaginateProps, {}, "hiddenColumns">;
+type Paginate = ReturnType<typeof Paginate>;
+export default Paginate;

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

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

package/dist/ui/paginate/index.js

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

package/dist/ui/tab/Tab.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { CloseButton, type TabProps } from '../../index.js';
+
+	let {
+		activeTab = $bindable(0),
+		tabs = [],
+		onTabChange,
+		onRemoveTab,
+		onTabAdd
+	}: TabProps = $props();
+
+	function changeTab(id: number | string) {
+		activeTab = id;
+		onTabChange?.(id);
+	}
+</script>
+
+<div class="relative flex h-full w-full flex-col">
+	<div class="mb-4 flex flex-wrap space-x-3 border-b-2">
+		{#each tabs as tab}
+			<button
+				class="rounded-t-md border-b-2 px-4 py-2"
+				class:bg-primary-500={activeTab === tab.id}
+				class:text-white={activeTab === tab.id}
+				class:text-gray-600={activeTab !== tab.id}
+				class:hover:bg-gray-100={activeTab !== tab.id}
+				class:border-transparent={activeTab !== tab.id}
+				class:border-white={activeTab === tab.id}
+				onclick={() => changeTab(tab.id)}
+			>
+				<div class="flex items-center gap-2">
+					<span class="text-sm">
+						{tab.title}
+					</span>
+					<iconify-icon icon={tab.icon} style="font-size: 15px;"></iconify-icon>
+					{#if tab.isClosable}
+						<CloseButton
+							size="sm"
+							class=" {activeTab === tab.id
+								? 'text-white hover:bg-white/20'
+								: 'text-gray-600 hover:bg-gray-200'}"
+							onclick={(e: any) => {
+								onRemoveTab?.({ tabId: tab.id });
+								e.stopPropagation();
+							}}
+						/>
+					{/if}
+				</div>
+			</button>
+		{/each}
+	</div>
+
+	<div class=" h-full w-full">
+		{#each tabs as tab (tab.id)}
+			<div class:hidden={activeTab !== tab.id} class="h-full w-full">
+				<!-- {@render tab.children({
+					...tab,
+					onTabAdd,
+					onRemoveTab
+				})} -->
+				<tab.children {...tab} {onTabAdd} {onRemoveTab} />
+			</div>
+		{/each}
+	</div>
+</div>

package/dist/ui/tab/Tab.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type TabProps } from '../../index.js';
+declare const Tab: import("svelte").Component<TabProps, {}, "activeTab">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

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

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tab.svelte';
+export { tabs, tabItem } from './theme.js';

package/dist/ui/tab/index.js

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tab.svelte';
+export { tabs, tabItem } from './theme.js';