@rkosafo/cai.components 0.0.75 → 0.0.79

package/dist/ui/speedDial/theme.js

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+export const speedDial = tv({
+    slots: {
+        base: 'group bg-transparent',
+        popper: 'flex items-center gap-2 bg-transparent text-inherit'
+    },
+    variants: {
+        vertical: {
+            true: { popper: 'flex-col' }
+        }
+    },
+    defaultVariants: {
+        vertical: false
+    }
+});
+export const speedDialButton = tv({
+    slots: {
+        base: 'w-[52px] h-[52px] shadow-xs p-0',
+        span: 'mb-px text-xs font-medium'
+    },
+    variants: {
+        noTooltip: {
+            false: {},
+            true: {}
+        },
+        textOutside: {
+            true: {
+                base: 'relative',
+                span: 'absolute -start-12 top-1/2 mb-px text-sm font-medium -translate-y-1/2'
+            }
+        }
+    },
+    compoundVariants: [{ noTooltip: true, textOutside: false, class: { base: 'flex flex-col' } }],
+    defaultVariants: {}
+});

package/dist/ui/tab/Tab.svelte

@@ -1,14 +1,31 @@
 <script lang="ts">
 	import { CloseButton, type TabProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { tabs as tabsTheme } from './theme.js';
 
 	let {
 		activeTab = $bindable(0),
 		tabs = [],
+		tabColor = 'bg-primary-500',
+		tabClass,
+		tabActiveClass,
+		tabInactiveClass,
+		tabContentClass,
+		tabContentActiveClass,
+		tabContentInactiveClass,
+		tabStyle = 'none',
+		divider = true,
 		onTabChange,
 		onRemoveTab,
-		onTabAdd
+		onTabAdd,
+		hideTabs = true
 	}: TabProps = $props();
 
+	const tabStyles = tabsTheme({
+		tabStyle,
+		hasDivider: divider
+	});
+
 	function changeTab(id: number | string) {
 		activeTab = id;
 		onTabChange?.(id);
@@ -16,16 +33,18 @@
 </script>
 
 <div class="relative flex h-full w-full flex-col">
-	<div class="mb-4 flex flex-wrap space-x-3 border-b border-gray-300">
+	<div
+		class:hidden={!hideTabs}
+		class={clsx('mb-4 flex flex-wrap border-b border-gray-300', tabStyles.base(), tabClass)}
+	>
 		{#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}
+				class={clsx(
+					'rounded-t-md border-b-2 px-4 py-2',
+					activeTab === tab.id
+						? [tabStyles.active(), tabActiveClass, tabColor, 'text-white']
+						: [tabStyles.inactive(), tabInactiveClass]
+				)}
 				onclick={() => changeTab(tab.id)}
 			>
 				<div class="flex items-center gap-2">
@@ -38,9 +57,11 @@
 					{#if tab.isClosable}
 						<CloseButton
 							size="sm"
-							class=" {activeTab === tab.id
-								? 'text-white hover:bg-white/20'
-								: 'text-gray-600 hover:bg-gray-200'}"
+							class={clsx(
+								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();
@@ -50,16 +71,21 @@
 				</div>
 			</button>
 		{/each}
+		{#if divider}
+			<div class={tabStyles.divider()}></div>
+		{/if}
 	</div>
 
-	<div class=" h-full w-full">
+	<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
-				})} -->
+			<div
+				class:hidden={activeTab !== tab.id}
+				class={clsx(
+					'h-full w-full',
+					tabContentClass,
+					activeTab === tab.id ? tabContentActiveClass : tabContentInactiveClass
+				)}
+			>
 				<tab.children {...tab} {...tab.props} {onTabAdd} {onRemoveTab} />
 			</div>
 		{/each}

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

@@ -1,2 +1 @@
-export { default as Toaster, toast } from './Toast.svelte';
-export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';
+export * from 'svelte-french-toast';

package/dist/ui/toast/index.js

@@ -1 +1,3 @@
-export { default as Toaster, toast } from './Toast.svelte';
+// export { default as Toaster, toast } from './Toast.svelte';
+// export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';
+export * from 'svelte-french-toast';

package/dist/utils/index.d.ts

@@ -14,6 +14,7 @@ export declare const send: (node: any, params: import("svelte/transition").Cross
     key: any;
 }) => () => import("svelte/transition").TransitionConfig;
 export declare function getInitials(val?: string): string;
+export declare function getInitials2(x: string): string;
 export declare function findTicketCategoryParents(selectedItem: ICaseCategory, data: ICaseCategory[]): string[] | null;
 export declare function formatTicketDate(x: any): string;
 export declare function formatTicketHeader(x: any): string;

package/dist/utils/index.js

@@ -61,6 +61,16 @@ export function getInitials(val) {
         .map((x) => x[0])
         .join('');
 }
+export function getInitials2(x) {
+    if (!x)
+        return '';
+    var xs = x.trim().split(' ');
+    if (xs.length === 1)
+        return x[0].toUpperCase();
+    if (xs.length === 0)
+        return 'X';
+    return `${xs[0][0]}${xs[xs.length - 1][0]}`.toUpperCase();
+}
 export function findTicketCategoryParents(selectedItem, data) {
     function findParentsRecursive(category, categories) {
         for (const item of categories) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.75",
+  "version": "0.0.79",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -49,6 +49,7 @@
   "dependencies": {
     "@felte/validator-zod": "^1.0.18",
     "@floating-ui/dom": "^1.7.3",
+    "@floating-ui/utils": "^0.2.10",
     "@tiptap/core": "^3.0.7",
     "@tiptap/extension-list": "^3.0.7",
     "@tiptap/extension-text-style": "^3.0.7",