@rkosafo/cai.components 0.0.74 → 0.0.78

package/dist/styles/tf-layout.css

@@ -1,186 +1,186 @@
-
-
-:root {
-	--poppins: 'Poppins', sans-serif;
-	--lato: 'Lato', sans-serif;
-
-	--light: #F9F9F9;
-	--blue: #3C91E6;
-	--light-blue: #CFE8FF;
-	--grey: #f4f3ef;
-	--dark-grey: #AAAAAA;
-	--dark: #342E37;
-	--red: #DB504A;
-	--yellow: #FFCE26;
-	--light-yellow: #FFF2C6;
-	--orange: #FD7238;
-	--light-orange: #FFE0D3;
-}
-
-/* tf-sidebar */
-#tf-sidebar {
-	position: fixed;
-	/* top: 0;
-	left: 0; */
-	width: 240px;
-	height: 100%;
-	background: var(--light);
-	z-index: 2000;
-	font-family: var(--lato);
-	transition: .3s ease;
-	overflow-x: hidden;
-	scrollbar-width: none;
-}
-#tf-sidebar::--webkit-scrollbar {
-	display: none;
-}
-#tf-sidebar.hide {
-	width: 60px;
-
-}
-#tf-sidebar .brand {
-	font-size: 24px;
-	font-weight: 700;
-	/* height: 68px; */
-	display: flex;
-	align-items: center;
-	color: var(--blue);
-	position: sticky;
-	top: 0;
-	left: 0;
-	background: var(--light);
-	z-index: 500;
-	padding-bottom: 20px;
-	box-sizing: content-box;
-}
-/* #tf-sidebar .brand .bx {
-	min-width: 60px;
-	display: flex;
-	justify-content: center;
-} */
-#tf-sidebar .side-menu {
-	width: 100%;
-}
-#tf-sidebar .side-menu li {
-	height: 48px;
-	background: transparent;
-	margin-left: 6px;
-	border-radius: 48px 0 0 48px;
-	padding: 4px;
-}
-#tf-sidebar .side-menu li.active {
-	background: var(--grey);
-	position: relative;
-}
-#tf-sidebar .side-menu li.active::before {
-	content: '';
-	position: absolute;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	top: -40px;
-	right: 0;
-	box-shadow: 20px 20px 0 var(--grey);
-	z-index: -1;
-}
-#tf-sidebar .side-menu li.active::after {
-	content: '';
-	position: absolute;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	bottom: -40px;
-	right: 0;
-	box-shadow: 20px -20px 0 var(--grey);
-	z-index: -1;
-}
-#tf-sidebar .side-menu li a {
-	width: 100%;
-	height: 100%;
-	background: var(--light);
-	display: flex;
-	align-items: center;
-	border-radius: 48px;
-	font-size: 16px;
-	color: var(--dark);
-	white-space: nowrap;
-	overflow-x: hidden;
-}
-#tf-sidebar .side-menu.top li.active a {
-	color: var(--blue);
-}
-#tf-sidebar.hide .side-menu li a {
-	width: calc(48px - (4px * 2));
-	transition: width .3s ease;
-}
-#tf-sidebar .side-menu li a.logout {
-	color: var(--red);
-}
-#tf-sidebar .side-menu.top li a:hover {
-	color: var(--blue);
-}
-#tf-sidebar .side-menu li a .bx {
-	min-width: calc(60px  - ((4px + 6px) * 2));
-	display: flex;
-	justify-content: center;
-}
-
-
-#tf-content {
-	position: relative;
-	width: calc(100% - 230px);
-	left: 240px;
-	transition: .3s ease;
-}
-#tf-sidebar.hide ~ #tf-content {
-	width: calc(100% - 60px);
-	left: 60px;
-}
-
-
-/* NAVBAR */
-#tf-content nav {
-	height: 56px;
-	background: var(--light);
-	padding: 0 24px;
-	display: flex;
-	align-items: center;
-	grid-gap: 24px;
-	font-family: var(--lato);
-	position: sticky;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-}
-/* curve */
-#tf-content nav::before {
-	content: '';
-	position: absolute;
-	width: 40px;
-	height: 40px;
-	bottom: -40px;
-	left: 0;
-	border-radius: 50%;
-	box-shadow: -20px -20px 0 var(--light);
-}
-
-
-@media screen and (max-width: 768px) {
-	#tf-sidebar {
-		width: 60px;
-	}
-
-	#tf-content {
-		width: calc(100% - 60px);
-		left: 60px;
-	}
-
-	#tf-content nav .nav-link {
-		display: none;
-	}
-}
-
-
-.loginbox {
-	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
+
+:root {
+	--poppins: 'Poppins', sans-serif;
+	--lato: 'Lato', sans-serif;
+
+	--light: #F9F9F9;
+	--blue: #3C91E6;
+	--light-blue: #CFE8FF;
+	--grey: #f4f3ef;
+	--dark-grey: #AAAAAA;
+	--dark: #342E37;
+	--red: #DB504A;
+	--yellow: #FFCE26;
+	--light-yellow: #FFF2C6;
+	--orange: #FD7238;
+	--light-orange: #FFE0D3;
+}
+
+/* tf-sidebar */
+#tf-sidebar {
+	position: fixed;
+	/* top: 0;
+	left: 0; */
+	width: 240px;
+	height: 100%;
+	background: var(--light);
+	z-index: 2000;
+	font-family: var(--lato);
+	transition: .3s ease;
+	overflow-x: hidden;
+	scrollbar-width: none;
+}
+#tf-sidebar::--webkit-scrollbar {
+	display: none;
+}
+#tf-sidebar.hide {
+	width: 60px;
+
+}
+#tf-sidebar .brand {
+	font-size: 24px;
+	font-weight: 700;
+	/* height: 68px; */
+	display: flex;
+	align-items: center;
+	color: var(--blue);
+	position: sticky;
+	top: 0;
+	left: 0;
+	background: var(--light);
+	z-index: 500;
+	padding-bottom: 20px;
+	box-sizing: content-box;
+}
+/* #tf-sidebar .brand .bx {
+	min-width: 60px;
+	display: flex;
+	justify-content: center;
+} */
+#tf-sidebar .side-menu {
+	width: 100%;
+}
+#tf-sidebar .side-menu li {
+	height: 48px;
+	background: transparent;
+	margin-left: 6px;
+	border-radius: 48px 0 0 48px;
+	padding: 4px;
+}
+#tf-sidebar .side-menu li.active {
+	background: var(--grey);
+	position: relative;
+}
+#tf-sidebar .side-menu li.active::before {
+	content: '';
+	position: absolute;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	top: -40px;
+	right: 0;
+	box-shadow: 20px 20px 0 var(--grey);
+	z-index: -1;
+}
+#tf-sidebar .side-menu li.active::after {
+	content: '';
+	position: absolute;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	bottom: -40px;
+	right: 0;
+	box-shadow: 20px -20px 0 var(--grey);
+	z-index: -1;
+}
+#tf-sidebar .side-menu li a {
+	width: 100%;
+	height: 100%;
+	background: var(--light);
+	display: flex;
+	align-items: center;
+	border-radius: 48px;
+	font-size: 16px;
+	color: var(--dark);
+	white-space: nowrap;
+	overflow-x: hidden;
+}
+#tf-sidebar .side-menu.top li.active a {
+	color: var(--blue);
+}
+#tf-sidebar.hide .side-menu li a {
+	width: calc(48px - (4px * 2));
+	transition: width .3s ease;
+}
+#tf-sidebar .side-menu li a.logout {
+	color: var(--red);
+}
+#tf-sidebar .side-menu.top li a:hover {
+	color: var(--blue);
+}
+#tf-sidebar .side-menu li a .bx {
+	min-width: calc(60px  - ((4px + 6px) * 2));
+	display: flex;
+	justify-content: center;
+}
+
+
+#tf-content {
+	position: relative;
+	width: calc(100% - 230px);
+	left: 240px;
+	transition: .3s ease;
+}
+#tf-sidebar.hide ~ #tf-content {
+	width: calc(100% - 60px);
+	left: 60px;
+}
+
+
+/* NAVBAR */
+#tf-content nav {
+	height: 56px;
+	background: var(--light);
+	padding: 0 24px;
+	display: flex;
+	align-items: center;
+	grid-gap: 24px;
+	font-family: var(--lato);
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+}
+/* curve */
+#tf-content nav::before {
+	content: '';
+	position: absolute;
+	width: 40px;
+	height: 40px;
+	bottom: -40px;
+	left: 0;
+	border-radius: 50%;
+	box-shadow: -20px -20px 0 var(--light);
+}
+
+
+@media screen and (max-width: 768px) {
+	#tf-sidebar {
+		width: 60px;
+	}
+
+	#tf-content {
+		width: calc(100% - 60px);
+		left: 60px;
+	}
+
+	#tf-content nav .nav-link {
+		display: none;
+	}
+}
+
+
+.loginbox {
+	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }

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/themes/themes.d.ts

@@ -17,3 +17,6 @@ export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
 export { accordion, accordionItem } from '../ui/accordion/index.js';
 export { tabs, tabItem } from '../ui/tab/theme.js';
 export { tooltip } from '../ui/tooltip/index.js';
+export { toggle } from '../forms/toggle/index.js';
+export { buttonToggleGroup, buttonToggle } from '../forms/button-toggle/index.js';
+export { speedDial, speedDialButton } from '../ui/speedDial/index.js';

package/dist/themes/themes.js

@@ -17,3 +17,6 @@ export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
 export { accordion, accordionItem } from '../ui/accordion/index.js';
 export { tabs, tabItem } from '../ui/tab/theme.js';
 export { tooltip } from '../ui/tooltip/index.js';
+export { toggle } from '../forms/toggle/index.js';
+export { buttonToggleGroup, buttonToggle } from '../forms/button-toggle/index.js';
+export { speedDial, speedDialButton } from '../ui/speedDial/index.js';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLDialogAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLDialogAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes, SVGAttributes } from 'svelte/elements';
 import type { Middleware, Placement, Strategy } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
 import type { BlurParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from 'svelte/transition';
@@ -24,6 +24,8 @@ import type { AccordionItemVariants, AccordionVariants } from '../ui/accordion/t
 import type { TabsVaraints } from '../ui/tab/theme.js';
 import type { ACTION_BUTTON_KINDS } from '../ui/buttons/ActionButton.svelte';
 import type { TooltipVariants } from '../ui/tooltip/theme.js';
+import type { ButtonToggleVariants } from '../forms/button-toggle/theme.js';
+import type { SpeedDialButtonVariants, SpeedDialVariants } from '../ui/speedDial/theme.js';
 export interface TFSidebarProps {
     homeUrl: string;
     logoUrl: string;
@@ -568,7 +570,7 @@ export interface TableSortInfo {
     id: string;
     order: 'asc' | 'desc';
 }
-export type TableColor = 'green' | 'orange' | 'white' | 'purple' | 'sky' | 'blue';
+export type TableColor = 'green' | 'orange' | 'white' | 'purple' | 'sky' | 'blue' | 'red' | 'pink';
 export type HeaderTextColor = 'black' | 'white' | 'gray';
 export interface TableProps {
     data?: any[];
@@ -810,6 +812,7 @@ export interface BreadcrumbProps {
     options: IBreadcrumb[];
     activeBreadCrumb: string;
     onclik?: (val: IBreadcrumbClick) => void;
+    activeClass?: 'pink' | 'blue' | 'red' | 'indigo' | 'purple' | 'black' | 'amber' | 'orange';
 }
 export interface IBreadcrumbClick {
     title: string;
@@ -880,5 +883,59 @@ export interface FormFileUploadProps {
     contextKey?: any;
     onChange?: (val: any) => void;
 }
+export type CheckIconProps = SVGAttributes<SVGSVGElement>;
+export type ButtonToggleProps = ButtonToggleVariants & HTMLButtonAttributes & {
+    value: string;
+    selected?: boolean;
+    children: Snippet;
+    iconSlot?: Snippet;
+    color?: ButtonToggleVariants['color'];
+    iconClass?: ClassValue;
+    contentClass?: ClassValue;
+    txtClass?: ClassValue;
+};
 export interface TooltipProps extends TooltipVariants, PopperProps {
 }
+export interface SpeedCtxType {
+    pill: boolean;
+    tooltip: Placement | 'none';
+    textOutside: boolean;
+}
+type BaseSpeedDialTriggerProps = {
+    children?: any;
+    name?: string;
+    pill?: boolean;
+    icon?: Snippet;
+    class?: string;
+    [key: string]: any;
+};
+export type RegularSpeedDialTriggerProps = BaseSpeedDialTriggerProps & {
+    gradient?: false;
+    color?: ButtonVariants['color'];
+};
+export type GradientSpeedDialTriggerProps = BaseSpeedDialTriggerProps & {
+    gradient: true;
+    color?: GradientButtonColor;
+};
+export type SpeedDialTriggerProps = RegularSpeedDialTriggerProps | GradientSpeedDialTriggerProps;
+export type SpeedDialProps = PopperProps & SpeedDialVariants & {
+    children: Snippet;
+    button?: Snippet;
+    popperClass?: ClassValue;
+    placement?: Placement;
+    tooltip?: Placement | 'none';
+    trigger?: PopperProps['trigger'];
+    textOutside?: boolean;
+    pill?: boolean;
+    ontoggle?: PopperProps['ontoggle'];
+    onbeforetoggle?: PopperProps['onbeforetoggle'];
+    isOpen?: boolean;
+};
+export type SpeedDialButtonProps = ButtonProps & SpeedDialButtonVariants & {
+    name?: string;
+    tooltip?: Placement | 'none';
+    pill?: boolean;
+    textOutside?: boolean;
+    textClass?: ClassValue;
+};
+export {};

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>

package/dist/ui/accordion/Accordion.svelte

@@ -1,49 +1,49 @@
-<script lang="ts">
-	import { accordion, getTheme, type AccordionCtxType, type AccordionProps } from '../../index.js';
-	import { createSingleSelectionContext } from '../../utils/singleSelection.svelte.js';
-	import clsx from 'clsx';
-	import { setContext } from 'svelte';
-
-	let {
-		children,
-		flush,
-		activeClass,
-		inactiveClass,
-		multiple = false,
-		class: className,
-		transitionType,
-		...restProps
-	}: AccordionProps = $props();
-
-	const theme = getTheme('accordion');
-
-	const ctx: AccordionCtxType = $state({
-		flush,
-		activeClass,
-		inactiveClass,
-		transitionType
-	});
-
-	setContext<AccordionCtxType>('ctx', ctx);
-
-	createSingleSelectionContext(multiple);
-
-	const base = $derived(accordion({ flush, class: clsx(theme, className) }));
-</script>
-
-<div {...restProps} class={base}>
-	{@render children()}
-</div>
-
-<!--
-
-## Props
-@prop children
-@prop flush
-@prop activeClass
-@prop inactiveClass
-@prop multiple = false
-@prop class: className
-@prop transitionType
-@prop ...restProps
--->
+<script lang="ts">
+	import { accordion, getTheme, type AccordionCtxType, type AccordionProps } from '../../index.js';
+	import { createSingleSelectionContext } from '../../utils/singleSelection.svelte.js';
+	import clsx from 'clsx';
+	import { setContext } from 'svelte';
+
+	let {
+		children,
+		flush,
+		activeClass,
+		inactiveClass,
+		multiple = false,
+		class: className,
+		transitionType,
+		...restProps
+	}: AccordionProps = $props();
+
+	const theme = getTheme('accordion');
+
+	const ctx: AccordionCtxType = $state({
+		flush,
+		activeClass,
+		inactiveClass,
+		transitionType
+	});
+
+	setContext<AccordionCtxType>('ctx', ctx);
+
+	createSingleSelectionContext(multiple);
+
+	const base = $derived(accordion({ flush, class: clsx(theme, className) }));
+</script>
+
+<div {...restProps} class={base}>
+	{@render children()}
+</div>
+
+<!--
+
+## Props
+@prop children
+@prop flush
+@prop activeClass
+@prop inactiveClass
+@prop multiple = false
+@prop class: className
+@prop transitionType
+@prop ...restProps
+-->