@rkosafo/cai.components 0.0.1 → 0.0.3

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

@@ -0,0 +1,100 @@
+import type { Classes } from "../../themes/themeUtils.js";
+import { type VariantProps } from "tailwind-variants";
+export type TextareaVariants = VariantProps<typeof textarea> & Classes<typeof textarea>;
+export declare const textarea: import("tailwind-variants").TVReturnType<{
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            header: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footer: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+}, {
+    div: string;
+    base: string;
+    wrapper: string;
+    inner: string;
+    header: string;
+    footer: string;
+    addon: string;
+    close: string;
+    svg: string;
+}, undefined, {
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            header: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footer: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+}, {
+    div: string;
+    base: string;
+    wrapper: string;
+    inner: string;
+    header: string;
+    footer: string;
+    addon: string;
+    close: string;
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    wrapped: {
+        false: {
+            wrapper: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            header: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+    hasFooter: {
+        true: {
+            footer: string;
+        };
+        false: {
+            inner: string;
+        };
+    };
+}, {
+    div: string;
+    base: string;
+    wrapper: string;
+    inner: string;
+    header: string;
+    footer: string;
+    addon: string;
+    close: string;
+    svg: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/textarea/theme.js

@@ -0,0 +1,35 @@
+import { tv } from "tailwind-variants";
+export const textarea = tv({
+    slots: {
+        div: "relative",
+        base: "block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+        wrapper: "text-sm rounded-lg dark:bg-gray-600 text-gray-900 dark:placeholder-gray-400 dark:text-white border border-gray-200 dark:border-gray-500",
+        inner: "py-2 px-4 bg-white dark:bg-gray-800",
+        header: "py-2 px-3 border-gray-200 dark:border-gray-500",
+        footer: "py-2 px-3 border-gray-200 dark:border-gray-500",
+        addon: "absolute top-2 right-2 z-10",
+        close: "absolute right-2 top-5 -translate-y-1/2 text-gray-400 hover:text-black",
+        svg: ""
+    },
+    variants: {
+        wrapped: {
+            false: { wrapper: "p-2.5 text-sm focus:outline-hidden focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50" }
+        },
+        hasHeader: {
+            true: {
+                header: "border-b"
+            },
+            false: {
+                inner: "rounded-t-lg"
+            }
+        },
+        hasFooter: {
+            true: {
+                footer: "border-t"
+            },
+            false: {
+                inner: "rounded-b-lg"
+            }
+        }
+    }
+});

package/dist/index.d.ts

@@ -1,2 +1,42 @@
-import YouTube from "./youtube/index.svelte";
-export { YouTube };
+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';
+export * from './ui/avatar/index.js';
+export * from './ui/indicator/index.js';
+export * from './ui/footer/index.js';
+export * from './typography/heading/index.js';
+export * from './ui/notificationList/index.js';
+export * from './ui/pageLoader/index.js';
+export * from './ui/alert/index.js';
+export * from './ui/modal/index.js';
+export * from './ui/toolbar/index.js';
+export * from './ui/drawer/index.js';
+export * from './ui/table/index.js';
+export * from './ui/datatable/index.js';
+export * from './ui/paginate/index.js';
+export * from './ui/tableLoader/index.js';
+export * from './ui/alertDialog/index.js';
+export * from './ui/accordion/index.js';
+export * from './ui/tab/index.js';
+export * from './forms/input/index.js';
+export * from './forms/label/index.js';
+export * from './forms/datepicker/index.js';
+export * from './forms/textarea/index.js';
+export * from './forms/select/index.js';
+export * from './forms/radio/index.js';
+export * from './forms/checkbox/index.js';
+export * from './forms/form/index.js';
+export * from './forms/FormInput/index.js';
+export * from './forms/FormDatepicker/index.js';
+export * from './forms/FormSelect/index.js';
+export * from './forms/FormTextarea/index.js';
+export * from './forms/FormCheckbox/index.js';
+export * from './forms/FormRadio/index.js';
+export * from './builders/filters/index.js';
+export * from './types/index.js';
+export * from './utils/index.js';
+export { YouTube, BaseEditor };

package/dist/index.js

@@ -1,3 +1,43 @@
+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";
-export { YouTube };
+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';
+export * from './ui/avatar/index.js';
+export * from './ui/indicator/index.js';
+export * from './ui/footer/index.js';
+export * from './typography/heading/index.js';
+export * from './ui/notificationList/index.js';
+export * from './ui/pageLoader/index.js';
+export * from './ui/alert/index.js';
+export * from './ui/modal/index.js';
+export * from './ui/toolbar/index.js';
+export * from './ui/drawer/index.js';
+export * from './ui/table/index.js';
+export * from './ui/datatable/index.js';
+export * from './ui/paginate/index.js';
+export * from './ui/tableLoader/index.js';
+export * from './ui/alertDialog/index.js';
+export * from './ui/accordion/index.js';
+export * from './ui/tab/index.js';
+export * from './forms/input/index.js';
+export * from './forms/label/index.js';
+export * from './forms/datepicker/index.js';
+export * from './forms/textarea/index.js';
+export * from './forms/select/index.js';
+export * from './forms/radio/index.js';
+export * from './forms/checkbox/index.js';
+export * from './forms/form/index.js';
+export * from './forms/FormInput/index.js';
+export * from './forms/FormDatepicker/index.js';
+export * from './forms/FormSelect/index.js';
+export * from './forms/FormTextarea/index.js';
+export * from './forms/FormCheckbox/index.js';
+export * from './forms/FormRadio/index.js';
+export * from './builders/filters/index.js';
+export * from './types/index.js';
+export * from './utils/index.js';
+export { YouTube, BaseEditor };

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

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

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface TFContentWrapperProps {
+    topBar?: Snippet;
+    children: any;
+}
+declare const Content: import("svelte").Component<TFContentWrapperProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+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;
+    notificationList?: Snippet;
+}
+import type { Snippet } from 'svelte';
+declare const Header: import("svelte").Component<TFHeaderProps, {}, "hideSidebar">;
+type Header = ReturnType<typeof Header>;
+export default Header;

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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;
+}
+import type { Snippet } from 'svelte';
+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/Wrapper.svelte

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

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface TFLayoutWrapperProps {
+    sidebar: Snippet;
+    content: Snippet;
+}
+declare const Wrapper: import("svelte").Component<TFLayoutWrapperProps, {}, "">;
+type Wrapper = ReturnType<typeof Wrapper>;
+export default Wrapper;

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/layout/TF/index.d.ts

@@ -0,0 +1,5 @@
+import { TFSidebar } from './Sidebar/index.js';
+import { TFLayoutWrapper } from './Wrapper/index.js';
+import { TFHeader } from './Header/index.js';
+import { TFContentWrapper } from './Content/index.js';
+export { TFLayoutWrapper, TFSidebar, TFHeader, TFContentWrapper };

package/dist/layout/TF/index.js

@@ -0,0 +1,5 @@
+import { TFSidebar } from './Sidebar/index.js';
+import { TFLayoutWrapper } from './Wrapper/index.js';
+import { TFHeader } from './Header/index.js';
+import { TFContentWrapper } from './Content/index.js';
+export { TFLayoutWrapper, TFSidebar, TFHeader, TFContentWrapper };

package/dist/themes/ThemeProvider.svelte

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

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ThemeConfig } from './index.js';
+interface ThemeProviderProps {
+    children: Snippet;
+    theme?: ThemeConfig;
+}
+declare const ThemeProvider: import("svelte").Component<ThemeProviderProps, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;

package/dist/themes/index.d.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import * as themes from "./themes.js";
+export type ThemeConfig = {
+    [K in keyof typeof themes]?: (typeof themes)[K]["slots"] extends undefined ? ClassValue : Partial<{
+        [L in keyof (typeof themes)[K]["slots"]]: ClassValue;
+    }>;
+};

package/dist/themes/index.js

@@ -0,0 +1 @@
+import * as themes from "./themes.js";