@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/ui/speedDial/SpeedDial.svelte

@@ -1,77 +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
--->
+<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/SpeedDialButton.svelte

@@ -1,75 +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
--->
+<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/SpeedDialTrigger.svelte

@@ -1,79 +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
--->
+<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/tab/Tab.svelte

@@ -1,67 +1,93 @@
-<script lang="ts">
-	import { CloseButton, type TabProps } from '../../index.js';
-
-	let {
-		activeTab = $bindable(0),
-		tabs = [],
-		onTabChange,
-		onRemoveTab,
-		onTabAdd
-	}: TabProps = $props();
-
-	function changeTab(id: number | string) {
-		activeTab = id;
-		onTabChange?.(id);
-	}
-</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">
-		{#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}
-				onclick={() => changeTab(tab.id)}
-			>
-				<div class="flex items-center gap-2">
-					<span class="text-sm">
-						{tab.title}
-					</span>
-					{#if tab.icon}
-						<iconify-icon icon={tab.icon} style="font-size: 15px;"></iconify-icon>
-					{/if}
-					{#if tab.isClosable}
-						<CloseButton
-							size="sm"
-							class=" {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();
-							}}
-						/>
-					{/if}
-				</div>
-			</button>
-		{/each}
-	</div>
-
-	<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
-				})} -->
-				<tab.children {...tab} {...tab.props} {onTabAdd} {onRemoveTab} />
-			</div>
-		{/each}
-	</div>
-</div>
+<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,
+		hideTabs = true
+	}: TabProps = $props();
+
+	const tabStyles = tabsTheme({
+		tabStyle,
+		hasDivider: divider
+	});
+
+	function changeTab(id: number | string) {
+		activeTab = id;
+		onTabChange?.(id);
+	}
+</script>
+
+<div class="relative flex h-full w-full flex-col">
+	<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={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">
+					<span class="text-sm">
+						{tab.title}
+					</span>
+					{#if tab.icon}
+						<iconify-icon icon={tab.icon} style="font-size: 15px;"></iconify-icon>
+					{/if}
+					{#if tab.isClosable}
+						<CloseButton
+							size="sm"
+							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();
+							}}
+						/>
+					{/if}
+				</div>
+			</button>
+		{/each}
+		{#if divider}
+			<div class={tabStyles.divider()}></div>
+		{/if}
+	</div>
+
+	<div class="h-full w-full">
+		{#each tabs as tab (tab.id)}
+			<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}
+	</div>
+</div>