@rkosafo/cai.components 0.0.74 → 0.0.78

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>>;

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,67 +1,67 @@
-<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';
+
+	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>