@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/layout/TF/Content/Content.svelte

@@ -1,28 +1,28 @@
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface TFContentWrapperProps {
-		topBar?: Snippet;
-		children: any;
-	}
-</script>
-
-<script lang="ts">
-	let { topBar, children }: TFContentWrapperProps = $props();
-</script>
-
-<section id="tf-content" class="h-full w-full">
-	{@render topBar?.()}
-	<section class="flex h-full w-full flex-col rounded-tl-lg bg-[#f4f3ef]">
-		<!-- {#if $activePage.showBreadCrumb}
-      <div class="head-title pt-3 pl-6">
-        <div class="left">
-          <BreadCrumb options={$breadCrumb} {activeBreadCrumb} on:click={optionClicked} />
-        </div>
-      </div>
-    {/if} -->
-		<div class=" h-full w-full flex-grow overflow-hidden">
-			{@render children()}
-		</div>
-	</section>
-</section>
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface TFContentWrapperProps {
+		topBar?: Snippet;
+		children: any;
+	}
+</script>
+
+<script lang="ts">
+	let { topBar, children }: TFContentWrapperProps = $props();
+</script>
+
+<section id="tf-content" class="h-full w-full">
+	{@render topBar?.()}
+	<section class="flex h-full w-full flex-col rounded-tl-lg bg-[#f4f3ef]">
+		<!-- {#if $activePage.showBreadCrumb}
+      <div class="head-title pt-3 pl-6">
+        <div class="left">
+          <BreadCrumb options={$breadCrumb} {activeBreadCrumb} on:click={optionClicked} />
+        </div>
+      </div>
+    {/if} -->
+		<div class=" h-full w-full flex-grow overflow-hidden">
+			{@render children()}
+		</div>
+	</section>
+</section>

package/dist/layout/TF/Header/Header.svelte

@@ -1,159 +1,159 @@
-<script lang="ts" module>
-	interface UserData {
-		firstName?: string;
-		lastName?: string;
-		fullName?: string;
-		role?: string;
-		username?: string;
-		initials?: string;
-	}
-
-	export interface TFHeaderProps {
-		user?: UserData;
-		hideSidebar?: boolean;
-		title?: string;
-		onsignout?: () => void;
-		notificationCount?: number;
-		showNotifications?: boolean;
-		// readNotifications?: () => Promise<any[]> | any[];
-		notificationList?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { Avatar } from '../../../ui/avatar/index.js';
-	import Button from '../../../ui/buttons/Button.svelte';
-	import { slide } from 'svelte/transition';
-
-	import { clickOutsideAction } from '../../../utils/svelte-legos.js';
-	import { DropdownDivider } from '../../../ui/dropdown/index.js';
-	import { Indicator } from '../../../ui/indicator/index.js';
-	// import NotificationList from '../../../ui/notificationList/NotificationList.svelte';
-	import type { Snippet } from 'svelte';
-	let {
-		user,
-		hideSidebar = $bindable(false),
-		title,
-		onsignout,
-		notificationCount = 0,
-		showNotifications = true,
-		notificationList
-	}: TFHeaderProps = $props();
-	let showUser = $state(false);
-	let openNotification = $state(false);
-</script>
-
-<nav class="flex items-center">
-	<button
-		class="grid place-content-center rounded-full p-2 hover:bg-gray-200"
-		onclick={() => (hideSidebar = !hideSidebar)}
-		aria-label="toggle"
-	>
-		<iconify-icon
-			icon={hideSidebar ? 'mdi:menu-close' : 'ic:round-menu-open'}
-			style="font-size: 20px;"
-		></iconify-icon>
-	</button>
-	<div class="hidden flex-grow items-center gap-4 sm:flex">
-		<div class="font-semibold text-teal-800">
-			{title}
-		</div>
-	</div>
-	<div class="flex flex-grow sm:hidden"></div>
-	{#if showNotifications}
-		<div
-			class="flex items-center gap-4"
-			use:clickOutsideAction
-			onclickoutside={() => (openNotification = false)}
-		>
-			<button
-				class="notifications relative grid cursor-pointer place-content-center hover:text-teal-400"
-				use:clickOutsideAction
-				onclick={() => (openNotification = !openNotification)}
-			>
-				<iconify-icon icon="charm:bell" class="blue-red-600 text-2xl"></iconify-icon>
-				<Indicator
-					color="red"
-					border
-					size="xl"
-					placement="top-right"
-					class="font- text-xs text-white {!notificationCount && 'hidden'}"
-					>{notificationCount && notificationCount > 10 ? '10+' : notificationCount}</Indicator
-				>
-			</button>
-
-			{@render notificationList?.()}
-		</div>
-	{/if}
-
-	<div class="flex items-center gap-4">
-		<div
-			class="user grid place-content-center"
-			use:clickOutsideAction
-			onclickoutside={() => (showUser = false)}
-		>
-			<Button
-				color="light"
-				pill
-				class="h-10 max-w-[150px] border-gray-300 !p-0 sm:!p-1"
-				ripple={false}
-				onclick={() => (showUser = !showUser)}
-			>
-				<Avatar class="h-9 w-9 bg-sky-300 text-sm sm:mr-2">
-					{user?.initials}
-				</Avatar>
-				<div class="hidden text-left text-xs sm:block sm:pr-2">
-					<div class="w-20 truncate">
-						<span class="font-semibold text-black">{user?.firstName}</span>
-					</div>
-					{#if user?.role}
-						<div class="w-20 truncate text-gray-500">
-							<span>{user.role}</span>
-						</div>
-					{:else}
-						<p class="flex w-20 truncate text-gray-500">{user?.username}</p>
-					{/if}
-				</div>
-			</Button>
-			{#if showUser}
-				<div class="relative">
-					<div
-						class="absolute right-0 z-10 mt-2 rounded-md bg-white
-					py-2 shadow-md shadow-gray-300
-					"
-						transition:slide
-						use:clickOutsideAction
-					>
-						<div class="space-y-2 px-4 py-2">
-							<span class="block truncate text-sm font-bold">{user?.fullName}</span>
-							<div class="block truncate text-sm">
-								<span class="font-light text-gray-500">Role:</span>
-								<span class="font-bold">{user?.role}</span>
-							</div>
-							<div class="block truncate text-sm">
-								<span class="font-light text-gray-500">Username:</span>
-								<span class="font-bold">{user?.username}</span>
-							</div>
-						</div>
-						<DropdownDivider />
-						<div class="grid">
-							<Button
-								ripple={false}
-								class="mx-0.5 flex gap-1  justify-start border bg-red-50 text-red-600 hover:bg-red-100"
-								onclick={() => {
-									showUser = false;
-									onsignout?.();
-								}}
-							>
-								{#snippet leadingIcon()}
-									<iconify-icon icon="stash:signout" style="font-size: 20px;"></iconify-icon>
-								{/snippet}
-								Sign Out
-							</Button>
-						</div>
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-</nav>
+<script lang="ts" module>
+	interface UserData {
+		firstName?: string;
+		lastName?: string;
+		fullName?: string;
+		role?: string;
+		username?: string;
+		initials?: string;
+	}
+
+	export interface TFHeaderProps {
+		user?: UserData;
+		hideSidebar?: boolean;
+		title?: string;
+		onsignout?: () => void;
+		notificationCount?: number;
+		showNotifications?: boolean;
+		// readNotifications?: () => Promise<any[]> | any[];
+		notificationList?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { Avatar } from '../../../ui/avatar/index.js';
+	import Button from '../../../ui/buttons/Button.svelte';
+	import { slide } from 'svelte/transition';
+
+	import { clickOutsideAction } from '../../../utils/svelte-legos.js';
+	import { DropdownDivider } from '../../../ui/dropdown/index.js';
+	import { Indicator } from '../../../ui/indicator/index.js';
+	// import NotificationList from '../../../ui/notificationList/NotificationList.svelte';
+	import type { Snippet } from 'svelte';
+	let {
+		user,
+		hideSidebar = $bindable(false),
+		title,
+		onsignout,
+		notificationCount = 0,
+		showNotifications = true,
+		notificationList
+	}: TFHeaderProps = $props();
+	let showUser = $state(false);
+	let openNotification = $state(false);
+</script>
+
+<nav class="flex items-center">
+	<button
+		class="grid place-content-center rounded-full p-2 hover:bg-gray-200"
+		onclick={() => (hideSidebar = !hideSidebar)}
+		aria-label="toggle"
+	>
+		<iconify-icon
+			icon={hideSidebar ? 'mdi:menu-close' : 'ic:round-menu-open'}
+			style="font-size: 20px;"
+		></iconify-icon>
+	</button>
+	<div class="hidden flex-grow items-center gap-4 sm:flex">
+		<div class="font-semibold text-teal-800">
+			{title}
+		</div>
+	</div>
+	<div class="flex flex-grow sm:hidden"></div>
+	{#if showNotifications}
+		<div
+			class="flex items-center gap-4"
+			use:clickOutsideAction
+			onclickoutside={() => (openNotification = false)}
+		>
+			<button
+				class="notifications relative grid cursor-pointer place-content-center hover:text-teal-400"
+				use:clickOutsideAction
+				onclick={() => (openNotification = !openNotification)}
+			>
+				<iconify-icon icon="charm:bell" class="blue-red-600 text-2xl"></iconify-icon>
+				<Indicator
+					color="red"
+					border
+					size="xl"
+					placement="top-right"
+					class="font- text-xs text-white {!notificationCount && 'hidden'}"
+					>{notificationCount && notificationCount > 10 ? '10+' : notificationCount}</Indicator
+				>
+			</button>
+
+			{@render notificationList?.()}
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-4">
+		<div
+			class="user grid place-content-center"
+			use:clickOutsideAction
+			onclickoutside={() => (showUser = false)}
+		>
+			<Button
+				color="light"
+				pill
+				class="h-10 max-w-[150px] border-gray-300 !p-0 sm:!p-1"
+				ripple={false}
+				onclick={() => (showUser = !showUser)}
+			>
+				<Avatar class="h-9 w-9 bg-sky-300 text-sm sm:mr-2">
+					{user?.initials}
+				</Avatar>
+				<div class="hidden text-left text-xs sm:block sm:pr-2">
+					<div class="w-20 truncate">
+						<span class="font-semibold text-black">{user?.firstName}</span>
+					</div>
+					{#if user?.role}
+						<div class="w-20 truncate text-gray-500">
+							<span>{user.role}</span>
+						</div>
+					{:else}
+						<p class="flex w-20 truncate text-gray-500">{user?.username}</p>
+					{/if}
+				</div>
+			</Button>
+			{#if showUser}
+				<div class="relative">
+					<div
+						class="absolute right-0 z-10 mt-2 rounded-md bg-white
+					py-2 shadow-md shadow-gray-300
+					"
+						transition:slide
+						use:clickOutsideAction
+					>
+						<div class="space-y-2 px-4 py-2">
+							<span class="block truncate text-sm font-bold">{user?.fullName}</span>
+							<div class="block truncate text-sm">
+								<span class="font-light text-gray-500">Role:</span>
+								<span class="font-bold">{user?.role}</span>
+							</div>
+							<div class="block truncate text-sm">
+								<span class="font-light text-gray-500">Username:</span>
+								<span class="font-bold">{user?.username}</span>
+							</div>
+						</div>
+						<DropdownDivider />
+						<div class="grid">
+							<Button
+								ripple={false}
+								class="mx-0.5 flex gap-1  justify-start border bg-red-50 text-red-600 hover:bg-red-100"
+								onclick={() => {
+									showUser = false;
+									onsignout?.();
+								}}
+							>
+								{#snippet leadingIcon()}
+									<iconify-icon icon="stash:signout" style="font-size: 20px;"></iconify-icon>
+								{/snippet}
+								Sign Out
+							</Button>
+						</div>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</nav>

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

@@ -1,74 +1,74 @@
-<script lang="ts" module>
-	export interface TFSidebarProps {
-		homeUrl: string;
-		logoUrl: string;
-		appShortName: string;
-		appName: string;
-		hideSidebar?: boolean;
-		menuItems: IMenuItem[];
-		logo?: Snippet;
-	}
-
-	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';
-	import type { Snippet } from 'svelte';
-
-	let {
-		homeUrl,
-		logoUrl,
-		appName,
-		appShortName,
-		hideSidebar = false,
-		menuItems = [],
-		logo
-	}: 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">
-		{#if logo}
-			{@render logo()}
-		{:else}
-			<img src={logoUrl} alt="Logo" class={hideSidebar ? 'w-12' : 'w-12 md:w-24'} loading="lazy" />
-		{/if}
-		<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>
+<script lang="ts" module>
+	export interface TFSidebarProps {
+		homeUrl: string;
+		logoUrl: string;
+		appShortName: string;
+		appName: string;
+		hideSidebar?: boolean;
+		menuItems: IMenuItem[];
+		logo?: Snippet;
+	}
+
+	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';
+	import type { Snippet } from 'svelte';
+
+	let {
+		homeUrl,
+		logoUrl,
+		appName,
+		appShortName,
+		hideSidebar = false,
+		menuItems = [],
+		logo
+	}: 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">
+		{#if logo}
+			{@render logo()}
+		{:else}
+			<img src={logoUrl} alt="Logo" class={hideSidebar ? 'w-12' : 'w-12 md:w-24'} loading="lazy" />
+		{/if}
+		<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/Wrapper/Wrapper.svelte

@@ -1,17 +1,17 @@
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface TFLayoutWrapperProps {
-		sidebar: Snippet;
-		content: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	let { sidebar, content }: TFLayoutWrapperProps = $props();
-</script>
-
-<div class="h-full w-full overflow-hidden">
-	{@render sidebar()}
-	{@render content()}
-</div>
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface TFLayoutWrapperProps {
+		sidebar: Snippet;
+		content: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let { sidebar, content }: TFLayoutWrapperProps = $props();
+</script>
+
+<div class="h-full w-full overflow-hidden">
+	{@render sidebar()}
+	{@render content()}
+</div>

package/dist/themes/ThemeProvider.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { setContext } from 'svelte';
-	import type { ThemeConfig } from './index.js';
-
-	interface ThemeProviderProps {
-		children: Snippet;
-		theme?: ThemeConfig;
-	}
-
-	let { children, theme }: ThemeProviderProps = $props();
-
-	if (theme) {
-		setContext('theme', theme);
-	} else {
-		console.log('ThemeProvider: No theme provided');
-	}
-</script>
-
-{@render children()}
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import type { ThemeConfig } from './index.js';
+
+	interface ThemeProviderProps {
+		children: Snippet;
+		theme?: ThemeConfig;
+	}
+
+	let { children, theme }: ThemeProviderProps = $props();
+
+	if (theme) {
+		setContext('theme', theme);
+	} else {
+		console.log('ThemeProvider: No theme provided');
+	}
+</script>
+
+{@render children()}

package/dist/typography/heading/Heading.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" module>
-	// heading
-	export interface HeadingProps extends HTMLAttributes<HTMLElement> {
-		children: Snippet;
-		tag?: HeadingVariants['tag'];
-	}
-
-	// // hr
-	// export interface HrProps extends HrVariants, HTMLAttributes<HTMLElement> {
-	//   children?: Snippet;
-	//   divClass?: string;
-	//   iconDivClass?: string;
-	//   textSpanClass?: string;
-	//   innerDivClass?: string;
-	// }
-</script>
-
-<script lang="ts">
-	import { getTheme } from '../../index.js';
-	import clsx from 'clsx';
-	import { heading } from './index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-	import type { HeadingVariants } from './theme.js';
-
-	let { children, tag = 'h1', class: className, ...restProps }: HeadingProps = $props();
-
-	const theme = getTheme('heading');
-
-	let headingCls = $derived(heading({ tag, class: clsx(theme, className) }));
-</script>
-
-<svelte:element this={tag} {...restProps} class={headingCls}>
-	{@render children()}
-</svelte:element>
+<script lang="ts" module>
+	// heading
+	export interface HeadingProps extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+		tag?: HeadingVariants['tag'];
+	}
+
+	// // hr
+	// export interface HrProps extends HrVariants, HTMLAttributes<HTMLElement> {
+	//   children?: Snippet;
+	//   divClass?: string;
+	//   iconDivClass?: string;
+	//   textSpanClass?: string;
+	//   innerDivClass?: string;
+	// }
+</script>
+
+<script lang="ts">
+	import { getTheme } from '../../index.js';
+	import clsx from 'clsx';
+	import { heading } from './index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import type { HeadingVariants } from './theme.js';
+
+	let { children, tag = 'h1', class: className, ...restProps }: HeadingProps = $props();
+
+	const theme = getTheme('heading');
+
+	let headingCls = $derived(heading({ tag, class: clsx(theme, className) }));
+</script>
+
+<svelte:element this={tag} {...restProps} class={headingCls}>
+	{@render children()}
+</svelte:element>