@rkosafo/cai.components 0.0.75 → 0.0.79

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;
@@ -786,11 +788,13 @@ export interface TabProps {
     tabContentClass?: ClassValue;
     tabContentActiveClass?: ClassValue;
     tabContentInactiveClass?: ClassValue;
+    tabColor?: ClassValue;
     onTabChange?: (tabId: number | string) => void;
     onTabAdd?: (val: any) => void;
     onRemoveTab?: (val: RemoveTabEvent) => void;
     tabStyle?: TabsVaraints['tabStyle'];
     divider?: boolean;
+    hideTabs?: boolean;
 }
 export interface BoxProps extends svelteHTML.HTMLAttributes<HTMLDivElement> {
     children: any;
@@ -881,5 +885,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/ui/modal/theme.d.ts

@@ -1,5 +1,5 @@
-import type { Classes } from "../../themes/themeUtils.js";
-import { type VariantProps } from "tailwind-variants";
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
 export type ModalVariants = VariantProps<typeof modal> & Classes<typeof modal>;
 export declare const modal: import("tailwind-variants").TVReturnType<{
     fullscreen: {
@@ -8,31 +8,31 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         };
     };
     placement: {
-        "top-left": {
+        'top-left': {
             base: string;
         };
-        "top-center": {
+        'top-center': {
             base: string;
         };
-        "top-right": {
+        'top-right': {
             base: string;
         };
-        "center-left": {
+        'center-left': {
             base: string;
         };
         center: {
             base: string;
         };
-        "center-right": {
+        'center-right': {
             base: string;
         };
-        "bottom-left": {
+        'bottom-left': {
             base: string;
         };
-        "bottom-center": {
+        'bottom-center': {
             base: string;
         };
-        "bottom-right": {
+        'bottom-right': {
             base: string;
         };
     };
@@ -70,31 +70,31 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         };
     };
     placement: {
-        "top-left": {
+        'top-left': {
             base: string;
         };
-        "top-center": {
+        'top-center': {
             base: string;
         };
-        "top-right": {
+        'top-right': {
             base: string;
         };
-        "center-left": {
+        'center-left': {
             base: string;
         };
         center: {
             base: string;
         };
-        "center-right": {
+        'center-right': {
             base: string;
         };
-        "bottom-left": {
+        'bottom-left': {
             base: string;
         };
-        "bottom-center": {
+        'bottom-center': {
             base: string;
         };
-        "bottom-right": {
+        'bottom-right': {
             base: string;
         };
     };
@@ -132,31 +132,31 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
         };
     };
     placement: {
-        "top-left": {
+        'top-left': {
             base: string;
         };
-        "top-center": {
+        'top-center': {
             base: string;
         };
-        "top-right": {
+        'top-right': {
             base: string;
         };
-        "center-left": {
+        'center-left': {
             base: string;
         };
         center: {
             base: string;
         };
-        "center-right": {
+        'center-right': {
             base: string;
         };
-        "bottom-left": {
+        'bottom-left': {
             base: string;
         };
-        "bottom-center": {
+        'bottom-center': {
             base: string;
         };
-        "bottom-right": {
+        'bottom-right': {
             base: string;
         };
     };

package/dist/ui/modal/theme.js

@@ -1,41 +1,41 @@
-import { tv } from "tailwind-variants";
+import { tv } from 'tailwind-variants';
 export const modal = tv({
     slots: {
-        base: "backdrop:bg-black/80 open:flex flex-col w-full max-h-[90hv] rounded-lg divide-y text-gray-500 dark:text-gray-400 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-700 bg-white dark:bg-gray-800 pointer-events-auto",
-        form: "flex flex-col rounded-lg divide-y",
-        header: "flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white",
-        footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0",
-        body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain",
-        close: "absolute top-3 end-2.5"
+        base: 'backdrop:bg-black/80 open:flex flex-col w-full max-h-[90hv] rounded-lg divide-y text-gray-500 dark:text-gray-400 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-700 bg-white dark:bg-gray-800 pointer-events-auto',
+        form: 'flex flex-col rounded-lg divide-y',
+        header: 'flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white',
+        footer: 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0',
+        body: 'p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain',
+        close: 'absolute top-3 end-2.5'
     },
     variants: {
         fullscreen: {
             true: {
-                base: "fixed inset-0 w-screen h-screen max-w-none max-h-none m-0 p-0 border-none rounded-none bg-white dark:bg-gray-900"
+                base: 'fixed inset-0 w-screen h-screen max-w-none max-h-none m-0 p-0 border-none rounded-none bg-white dark:bg-gray-900'
             }
         },
         placement: {
-            "top-left": { base: "top-0 left-0" },
-            "top-center": { base: "top-0 left-1/2 -translate-x-1/2" },
-            "top-right": { base: "top-0 left-full -translate-x-full" },
-            "center-left": { base: "top-1/2 left-0 -translate-y-1/2" },
-            center: { base: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" },
-            "center-right": { base: "top-1/2 left-full -translate-x-full -translate-y-1/2" },
-            "bottom-left": { base: "top-full -translate-y-full left-0" },
-            "bottom-center": { base: "top-full -translate-y-full left-1/2 -translate-x-1/2" },
-            "bottom-right": { base: "top-full -translate-y-full left-full -translate-x-full" }
+            'top-left': { base: 'top-0 left-0' },
+            'top-center': { base: 'top-0 left-1/2 -translate-x-1/2' },
+            'top-right': { base: 'top-0 left-full -translate-x-full' },
+            'center-left': { base: 'top-1/2 left-0 -translate-y-1/2' },
+            center: { base: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' },
+            'center-right': { base: 'top-1/2 left-full -translate-x-full -translate-y-1/2' },
+            'bottom-left': { base: 'top-full -translate-y-full left-0' },
+            'bottom-center': { base: 'top-full -translate-y-full left-1/2 -translate-x-1/2' },
+            'bottom-right': { base: 'top-full -translate-y-full left-full -translate-x-full' }
         },
         size: {
-            none: { base: "" },
-            xs: { base: "max-w-md" },
-            sm: { base: "max-w-lg" },
-            md: { base: "max-w-2xl" },
-            lg: { base: "max-w-4xl" },
-            xl: { base: "max-w-7xl" }
+            none: { base: '' },
+            xs: { base: 'max-w-md' },
+            sm: { base: 'max-w-lg' },
+            md: { base: 'max-w-2xl' },
+            lg: { base: 'max-w-4xl' },
+            xl: { base: 'max-w-7xl' }
         }
     },
     defaultVariants: {
-        placement: "center",
-        size: "md"
+        placement: 'center',
+        size: 'md'
     }
 });

package/dist/ui/speedDial/SpeedDial.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import Popper from '../../utils/Popper.svelte';
+	import { getSideAxis } from '@floating-ui/utils';
+	import { setContext, untrack } from 'svelte';
+	import { speedDial } from './theme.js';
+	import type { SpeedDialProps, SpeedCtxType } from '../../index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+
+	let {
+		children,
+		popperClass,
+		placement = 'top',
+		pill = true,
+		tooltip = 'left',
+		trigger = 'hover',
+		textOutside = false,
+		class: className,
+		classes,
+		isOpen = $bindable(false),
+		...restProps
+	}: SpeedDialProps = $props();
+
+	warnThemeDeprecation(
+		'SpeedDial',
+		untrack(() => ({ popperClass })),
+		{ popperClass: 'popper' }
+	);
+
+	const styling = $derived(
+		classes ?? {
+			popper: popperClass
+		}
+	);
+
+	const theme = $derived(getTheme('speedDial'));
+
+	$effect(() => {
+		setContext<SpeedCtxType>('speed-dial', { pill, tooltip, textOutside });
+	});
+
+	let vertical: boolean = $derived(getSideAxis(placement) === 'y');
+
+	let { base, popper } = $derived(speedDial({ vertical }));
+</script>
+
+<Popper
+	{...restProps}
+	bind:isOpen
+	{trigger}
+	arrow={false}
+	{placement}
+	class={base({ class: clsx(theme?.base, className) })}
+>
+	<div class={popper({ class: clsx(theme?.popper, styling.popper) })}>
+		{@render children()}
+	</div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+## Props
+@prop children
+@prop popperClass
+@prop placement = "top"
+@prop pill = true
+@prop tooltip = "left"
+@prop trigger = "hover"
+@prop textOutside = false
+@prop class: className
+@prop classes
+@prop isOpen = $bindable(false)
+@prop ...restProps
+-->

package/dist/ui/speedDial/SpeedDial.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SpeedDialProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+ * ## Props
+ * @prop children
+ * @prop popperClass
+ * @prop placement = "top"
+ * @prop pill = true
+ * @prop tooltip = "left"
+ * @prop trigger = "hover"
+ * @prop textOutside = false
+ * @prop class: className
+ * @prop classes
+ * @prop isOpen = $bindable(false)
+ * @prop ...restProps
+ */
+declare const SpeedDial: import("svelte").Component<SpeedDialProps, {}, "isOpen">;
+type SpeedDial = ReturnType<typeof SpeedDial>;
+export default SpeedDial;

package/dist/ui/speedDial/SpeedDialButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Placement } from '@floating-ui/dom';
+	import { getContext, untrack } from 'svelte';
+	import { speedDialButton } from './theme.js';
+	import type { SpeedCtxType, SpeedDialButtonProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import Button from '../buttons/Button.svelte';
+	import Tooltip from '../tooltip/Tooltip.svelte';
+
+	const context = getContext<SpeedCtxType>('speed-dial');
+
+	let {
+		children,
+		name = '',
+		color = 'light',
+		tooltip: _tooltip,
+		pill = context.pill,
+		textOutside = context.textOutside,
+		textClass,
+		class: className,
+		classes,
+		...restProps
+	}: SpeedDialButtonProps = $props();
+
+	warnThemeDeprecation(
+		'SpeedDialButton',
+		untrack(() => ({ textClass })),
+		{ textClass: 'span' }
+	);
+
+	const styling = $derived(
+		classes ?? {
+			span: textClass
+		}
+	);
+
+	let tooltip = $derived<Placement | 'none'>(_tooltip ?? context.tooltip);
+
+	const theme = $derived(getTheme('speedDialButton'));
+
+	let { base, span } = $derived(speedDialButton({ textOutside, noTooltip: tooltip === 'none' }));
+	let spanCls = $derived(
+		tooltip === 'none' || textOutside ? span({ class: clsx(theme?.span, styling.span) }) : 'sr-only'
+	);
+
+	let buttonCls = $derived(base({ class: clsx(theme?.base, className) }));
+</script>
+
+<Button {pill} {color} {...restProps} class={buttonCls}>
+	{@render children?.()}
+	<span class={spanCls}>{name}</span>
+</Button>
+
+{#if tooltip !== 'none'}
+	<Tooltip placement={tooltip} type="dark">{name}</Tooltip>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1613)
+## Props
+@prop children
+@prop name = ""
+@prop color = "light"
+@prop tooltip: _tooltip
+@prop pill = context.pill
+@prop textOutside = context.textOutside
+@prop textClass
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/ui/speedDial/SpeedDialButton.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SpeedDialButtonProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1613)
+ * ## Props
+ * @prop children
+ * @prop name = ""
+ * @prop color = "light"
+ * @prop tooltip: _tooltip
+ * @prop pill = context.pill
+ * @prop textOutside = context.textOutside
+ * @prop textClass
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const SpeedDialButton: import("svelte").Component<SpeedDialButtonProps, {}, "">;
+type SpeedDialButton = ReturnType<typeof SpeedDialButton>;
+export default SpeedDialButton;

package/dist/ui/speedDial/SpeedDialTrigger.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import clsx from 'clsx';
+
+	import type { SpeedDialTriggerProps, ButtonProps, GradientButtonProps } from '../../index.js';
+	import GradientButton from '../buttons/GradientButton.svelte';
+	import Button from '../buttons/Button.svelte';
+
+	let {
+		children,
+		name = 'Open actions menu',
+		gradient = false,
+		icon,
+		pill = true,
+		color,
+		class: className,
+		...restProps
+	}: SpeedDialTriggerProps = $props();
+
+	const buttonProps = $derived({
+		pill,
+		color,
+		...restProps,
+		class: ['group p-3!', clsx(className)]
+	});
+</script>
+
+{#snippet moving_cross()}
+	<svg
+		aria-hidden="true"
+		class="h-8 w-8 transition-transform group-hover:rotate-45"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+		/>
+	</svg>
+{/snippet}
+
+{#if gradient}
+	<GradientButton {...buttonProps as GradientButtonProps}>
+		{#if icon}
+			{@render icon()}
+		{:else}
+			{@render moving_cross()}
+		{/if}
+		<span class="sr-only">{name}</span>
+	</GradientButton>
+{:else}
+	<Button {...buttonProps as ButtonProps}>
+		{#if icon}
+			{@render icon()}
+		{:else}
+			{@render moving_cross()}
+		{/if}
+		<span class="sr-only">{name}</span>
+	</Button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1596)
+## Props
+@prop children
+@prop name = "Open actions menu"
+@prop gradient = false
+@prop icon
+@prop pill = true
+@prop color
+@prop class: className
+@prop ...restProps
+-->

package/dist/ui/speedDial/SpeedDialTrigger.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SpeedDialTriggerProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1596)
+ * ## Props
+ * @prop children
+ * @prop name = "Open actions menu"
+ * @prop gradient = false
+ * @prop icon
+ * @prop pill = true
+ * @prop color
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const SpeedDialTrigger: import("svelte").Component<SpeedDialTriggerProps, {}, "">;
+type SpeedDialTrigger = ReturnType<typeof SpeedDialTrigger>;
+export default SpeedDialTrigger;

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

@@ -0,0 +1,4 @@
+export { default as SpeedDial } from './SpeedDial.svelte';
+export { default as SpeedDialButton } from './SpeedDialButton.svelte';
+export { default as SpeedDialTrigger } from './SpeedDialTrigger.svelte';
+export { speedDial, speedDialButton } from './theme.js';

package/dist/ui/speedDial/index.js

@@ -0,0 +1,4 @@
+export { default as SpeedDial } from './SpeedDial.svelte';
+export { default as SpeedDialButton } from './SpeedDialButton.svelte';
+export { default as SpeedDialTrigger } from './SpeedDialTrigger.svelte';
+export { speedDial, speedDialButton } from './theme.js';

package/dist/ui/speedDial/theme.d.ts

@@ -0,0 +1,75 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type SpeedDialVariants = VariantProps<typeof speedDial> & Classes<typeof speedDial>;
+export type SpeedDialButtonVariants = VariantProps<typeof speedDialButton> & Classes<typeof speedDialButton>;
+export declare const speedDial: import("tailwind-variants").TVReturnType<{
+    vertical: {
+        true: {
+            popper: string;
+        };
+    };
+}, {
+    base: string;
+    popper: string;
+}, undefined, {
+    vertical: {
+        true: {
+            popper: string;
+        };
+    };
+}, {
+    base: string;
+    popper: string;
+}, import("tailwind-variants").TVReturnType<{
+    vertical: {
+        true: {
+            popper: string;
+        };
+    };
+}, {
+    base: string;
+    popper: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
+    noTooltip: {
+        false: {};
+        true: {};
+    };
+    textOutside: {
+        true: {
+            base: string;
+            span: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, undefined, {
+    noTooltip: {
+        false: {};
+        true: {};
+    };
+    textOutside: {
+        true: {
+            base: string;
+            span: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<{
+    noTooltip: {
+        false: {};
+        true: {};
+    };
+    textOutside: {
+        true: {
+            base: string;
+            span: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, undefined, unknown, unknown, undefined>>;