@rkosafo/cai.components 0.0.16 → 0.0.18

package/dist/index.d.ts

@@ -23,7 +23,8 @@ export * from './ui/alertDialog/index.js';
 export * from './ui/accordion/index.js';
 export * from './ui/tab/index.js';
 export * from './ui/icons/index.js';
-export * from "./ui/box/index.js";
+export * from './ui/box/index.js';
+export * from './ui/breadcrumb/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/index.js

@@ -24,7 +24,8 @@ export * from './ui/alertDialog/index.js';
 export * from './ui/accordion/index.js';
 export * from './ui/tab/index.js';
 export * from './ui/icons/index.js';
-export * from "./ui/box/index.js";
+export * from './ui/box/index.js';
+export * from './ui/breadcrumb/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/styles/tf-layout.css

@@ -178,4 +178,9 @@
 	#tf-content nav .nav-link {
 		display: none;
 	}
+}
+
+
+.loginbox {
+	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }

package/dist/types/index.d.ts

@@ -22,6 +22,7 @@ import type { RadioVariants } from '../forms/radio/theme.js';
 import type { CheckboxVariants } from '../forms/checkbox/theme.js';
 import type { AccordionItemVariants, AccordionVariants } from '../ui/accordion/theme.js';
 import type { TabsVaraints } from '../ui/tab/theme.js';
+import type { ACTION_BUTTON_KINDS } from '../ui/buttons/ActionButton.svelte';
 export interface TFSidebarProps {
     homeUrl: string;
     logoUrl: string;
@@ -780,3 +781,39 @@ export interface BoxProps extends svelteHTML.HTMLAttributes<HTMLDivElement> {
     padding?: boolean;
     shadow?: boolean;
 }
+export interface IBreadCrumb {
+    title: string;
+    component?: any;
+    props?: any;
+    path?: string;
+}
+export interface BreadCrumbProps {
+    options: IBreadCrumb[];
+    activeBreadCrumb: string;
+    onclik?: (val: IBreadCrumbClick) => void;
+}
+export interface IBreadCrumbClick {
+    title: string;
+    path?: string;
+    index: number;
+}
+export interface IButtonConfig {
+    kind: string;
+    label: string;
+    subLabel: string;
+}
+export interface ActionButtonProps {
+    icon?: string;
+    iconBgColor?: string;
+    iconSize?: number;
+    iconColor?: string;
+    label?: string;
+    subLabel?: string;
+    showBg?: boolean | null;
+    showArrow?: boolean;
+    showIconHover?: boolean;
+    moreHeight?: boolean;
+    href?: string | null;
+    kind?: keyof typeof ACTION_BUTTON_KINDS;
+    moreShadow?: boolean;
+}

package/dist/ui/box/Box.svelte

@@ -19,7 +19,7 @@
 		otherClasses
 	)}
 	class:rounded-[5px]={rounded}
-	class:bgWhite
+	class:bg-white={bgWhite}
 	class:p-6={padding}
 	class:shadow-sm={shadow}
 	class:shadow-gray-400={shadow}

package/dist/ui/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { IconifyIcon, type BreadCrumbProps } from '../../index.js';
+
+	let { options = [], activeBreadCrumb = '', onclik }: BreadCrumbProps = $props();
+</script>
+
+<ul class="breadcrumb">
+	{#each options as { title, path }, index}
+		<li>
+			<button
+				onclick={() => onclik?.({ title, path, index })}
+				class="capitalize"
+				class:text-blue-500={activeBreadCrumb === title}
+				class:text-gray-500={activeBreadCrumb !== title}
+				class:hover:text-gray-400={activeBreadCrumb !== title}
+				class:cursor-default={activeBreadCrumb === title}>{title}</button
+			>
+		</li>
+		<!-- <li><i class="bx bx-chevron-right" /></li> -->
+		{#if index !== options.length - 1}
+			<IconifyIcon
+				icon="ri:arrow-right-double-line"
+				class="dark:text-gray-500"
+				style="font-size:18px"
+			/>
+		{/if}
+	{/each}
+</ul>

package/dist/ui/breadcrumb/Breadcrumb.svelte.d.ts

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

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

@@ -0,0 +1 @@
+export {};

package/dist/ui/breadcrumb/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/ui/buttons/ActionButton.svelte

@@ -0,0 +1,232 @@
+<script lang="ts" module>
+	export const ACTION_BUTTON_KINDS = {
+		generic: {
+			icon: 'solar:verified-check-bold',
+			iconBgColor: 'bg-green-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		enquiries: {
+			icon: 'entypo:chat',
+			iconBgColor: 'bg-orange-300',
+			iconSize: 25,
+			iconColor: 'text-orange-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		accept: {
+			icon: 'ph:check-circle',
+			iconBgColor: 'bg-green-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		approve: {
+			icon: 'ph:check-circle',
+			iconBgColor: 'bg-green-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		reject: {
+			icon: 'ph:x-circle',
+			iconBgColor: 'bg-red-400',
+			iconSize: 25,
+			iconColor: 'text-white',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		transfer: {
+			icon: 'mdi:file-sync',
+			iconBgColor: 'bg-sky-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		recommendation: {
+			icon: 'material-symbols:recommend-outline',
+			iconBgColor: 'bg-yellow-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		file: {
+			icon: 'ph:file-text',
+			iconBgColor: 'bg-gray-200',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		form: {
+			icon: 'game-icons:archive-register',
+			iconBgColor: 'bg-teal-100',
+			iconSize: 25,
+			iconColor: 'text-blue-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		}
+	} as const;
+</script>
+
+<script lang="ts">
+	import { cn, IconifyIcon, type ActionButtonProps } from '../../index.js';
+	import Button from './Button.svelte';
+
+	let {
+		icon = '',
+		iconBgColor = '',
+		iconSize = 0,
+		iconColor = '',
+		label = '',
+		subLabel = '',
+		showBg = null,
+		showArrow = false,
+		showIconHover = false,
+		moreHeight = false,
+		href = null,
+		kind = 'generic',
+		moreShadow = false,
+		...rest
+	}: ActionButtonProps = $props();
+
+	// Derived configuration based on kind
+	const config = $derived(ACTION_BUTTON_KINDS[kind] ?? ACTION_BUTTON_KINDS.generic);
+
+	// Computed values with kind defaults
+	const computedIcon = $derived(icon || config.icon);
+	const computedIconBgColor = $derived(iconBgColor || config.iconBgColor);
+	const computedIconSize = $derived(iconSize || config.iconSize);
+	const computedIconColor = $derived(iconColor || config.iconColor);
+	const computedLabel = $derived(label || config.label);
+	const computedSubLabel = $derived(subLabel || config.subLabel);
+	const computedShowBg = $derived(showBg === null || showBg === undefined ? config.showBg : showBg);
+	const computedShowArrow = $derived(showArrow || config.showArrow);
+	const computedShowIconHover = $derived(showIconHover || config.showIconHover);
+	const computedMoreHeight = $derived(moreHeight || config.moreHeight);
+</script>
+
+<Button
+	color="alternative"
+	href={href || ''}
+	class={cn(
+		'flex items-center rounded-[6px]  py-2.5 pl-4',
+		computedShowBg && 'bg-white',
+		moreShadow && 'loginbox'
+	)}
+>
+	<div class="flex w-full items-center justify-between pr-2">
+		<div class="flex w-full flex-grow items-center justify-start gap-3 truncate text-ellipsis">
+			<div class={`${computedIconBgColor} grid place-content-center rounded-[5px] p-2.5`}>
+				<IconifyIcon
+					icon={computedIcon}
+					style="font-size: {computedIconSize}x;"
+					class={computedIconColor}
+				/>
+			</div>
+			<div class="flex flex-grow flex-col overflow-hidden text-left">
+				<span
+					class=" block w-full truncate overflow-hidden tracking-tight text-ellipsis whitespace-nowrap"
+				>
+					{computedLabel}
+				</span>
+				<span
+					title={computedSubLabel}
+					class="block w-full truncate overflow-hidden text-sm text-ellipsis whitespace-nowrap text-gray-500"
+				>
+					{computedSubLabel}
+				</span>
+			</div>
+		</div>
+		{#if computedShowArrow}
+			<p class="grid h-9 w-9 shrink-0 place-content-center rounded-full">
+				<IconifyIcon icon="iconamoon:arrow-right-2-light" style="font-size: 25px;" />
+			</p>
+		{/if}
+	</div>
+</Button>
+
+<!-- <a
+	{...rest}
+	{href}
+	class="w-full cursor-pointer rounded-[6px] border-gray-400/40 px-2 py-2.5 {!computedShowBg &&
+		'hover:bg-blue-200/40'} "
+	class:bg-white={computedShowBg}
+	class:shadow={computedShowBg}
+	class:hover:scale-95={computedShowBg}
+	class:h-20={computedMoreHeight}
+	class:loginbox={moreShadow}
+>
+	<div class="flex w-full items-center justify-between">
+		<div class="flex w-full flex-grow items-center justify-start gap-3">
+			<div class="{computedIconBgColor} grid place-content-center rounded-[5px] p-2.5">
+				<IconifyIcon
+					icon={computedIcon}
+					style="font-size: {computedIconSize}px;"
+					class={computedIconColor}
+				/>
+			</div>
+			<div class="flex w-10 flex-grow flex-col overflow-hidden text-left">
+				<div
+					class="block w-full truncate overflow-hidden font-medium text-ellipsis whitespace-nowrap"
+				>
+					{computedLabel}
+				</div>
+				<div
+					class="block w-full truncate overflow-hidden text-sm text-ellipsis whitespace-nowrap text-gray-500"
+				>
+					{computedSubLabel}
+				</div>
+			</div>
+		</div>
+		<div
+			class:hidden={!computedShowArrow}
+			class="grid h-9 w-9 place-content-center rounded-full"
+			class:hover:bg-gray-200={computedShowIconHover}
+		>
+			<IconifyIcon icon="iconamoon:arrow-right-2-light" style="font-size: 25px;" />
+		</div>
+	</div>
+</a> -->

package/dist/ui/buttons/ActionButton.svelte.d.ts

@@ -0,0 +1,114 @@
+export declare const ACTION_BUTTON_KINDS: {
+    readonly generic: {
+        readonly icon: "solar:verified-check-bold";
+        readonly iconBgColor: "bg-green-300";
+        readonly iconSize: 25;
+        readonly iconColor: "text-gray-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly enquiries: {
+        readonly icon: "entypo:chat";
+        readonly iconBgColor: "bg-orange-300";
+        readonly iconSize: 25;
+        readonly iconColor: "text-orange-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly accept: {
+        readonly icon: "ph:check-circle";
+        readonly iconBgColor: "bg-green-300";
+        readonly iconSize: 25;
+        readonly iconColor: "text-gray-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly approve: {
+        readonly icon: "ph:check-circle";
+        readonly iconBgColor: "bg-green-300";
+        readonly iconSize: 25;
+        readonly iconColor: "text-gray-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly reject: {
+        readonly icon: "ph:x-circle";
+        readonly iconBgColor: "bg-red-400";
+        readonly iconSize: 25;
+        readonly iconColor: "text-white";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly transfer: {
+        readonly icon: "mdi:file-sync";
+        readonly iconBgColor: "bg-sky-300";
+        readonly iconSize: 25;
+        readonly iconColor: "text-gray-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly recommendation: {
+        readonly icon: "material-symbols:recommend-outline";
+        readonly iconBgColor: "bg-yellow-300";
+        readonly iconSize: 25;
+        readonly iconColor: "text-gray-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly file: {
+        readonly icon: "ph:file-text";
+        readonly iconBgColor: "bg-gray-200";
+        readonly iconSize: 25;
+        readonly iconColor: "text-gray-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+    readonly form: {
+        readonly icon: "game-icons:archive-register";
+        readonly iconBgColor: "bg-teal-100";
+        readonly iconSize: 25;
+        readonly iconColor: "text-blue-800";
+        readonly label: "";
+        readonly subLabel: "";
+        readonly showBg: true;
+        readonly showArrow: false;
+        readonly showIconHover: true;
+        readonly moreHeight: false;
+    };
+};
+import { type ActionButtonProps } from '../../index.js';
+declare const ActionButton: import("svelte").Component<ActionButtonProps, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;

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

@@ -1,3 +1,4 @@
 export { default as Button } from './Button.svelte';
+export { default as ActionButton } from './ActionButton.svelte';
 export { default as GradientButton } from './GradientButton.svelte';
 export { button, gradientButton } from './theme.js';

package/dist/ui/buttons/index.js

@@ -1,3 +1,4 @@
 export { default as Button } from './Button.svelte';
+export { default as ActionButton } from './ActionButton.svelte';
 export { default as GradientButton } from './GradientButton.svelte';
 export { button, gradientButton } from './theme.js';

package/dist/ui/notificationList/NotificationList.svelte

@@ -66,7 +66,7 @@
 		<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"
+		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">

package/dist/ui/table/Table.svelte

@@ -196,7 +196,7 @@
 				</thead>
 				<tbody
 					{...$tableBodyAttrs}
-					class="divide-y"
+					class="divide-y divide-gray-300"
 					class:bg-white={bgWhite}
 					use:clickOutsideAction
 					onclickoutside={closeDropDown}

package/dist/ui/tableLoader/TableLoader.svelte

@@ -10,7 +10,7 @@
 			</th>
 		{/each}
 	</thead>
-	<tbody class="divide-y border-t border-gray-400">
+	<tbody class="divide-y border-t border-gray-300">
 		{#each Array(bodySize) as _}
 			<tr>
 				{#each Array(headerSize) as _}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "files": [
     "dist",
     "!dist/**/*.test.*",