@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/ui/tableLoader/TableLoader.svelte

@@ -1,24 +1,24 @@
-<script>
-	let { bodySize = 10, headerSize = 6 } = $props();
-</script>
-
-<table class="w-full animate-pulse">
-	<thead>
-		{#each Array(headerSize) as _}
-			<th class="whitespace-nowrap px-6 py-2">
-				<div class=" h-7 rounded-md bg-gray-300"></div>
-			</th>
-		{/each}
-	</thead>
-	<tbody class="divide-y border-t border-gray-400">
-		{#each Array(bodySize) as _}
-			<tr>
-				{#each Array(headerSize) as _}
-					<td class="whitespace-nowrap px-6 py-2">
-						<div class=" h-7 rounded-md bg-gray-300"></div>
-					</td>
-				{/each}
-			</tr>
-		{/each}
-	</tbody>
-</table>
+<script>
+	let { bodySize = 10, headerSize = 6 } = $props();
+</script>
+
+<table class="w-full animate-pulse">
+	<thead>
+		{#each Array(headerSize) as _}
+			<th class="whitespace-nowrap px-6 py-2">
+				<div class=" h-7 rounded-md bg-gray-300"></div>
+			</th>
+		{/each}
+	</thead>
+	<tbody class="divide-y border-t border-gray-400">
+		{#each Array(bodySize) as _}
+			<tr>
+				{#each Array(headerSize) as _}
+					<td class="whitespace-nowrap px-6 py-2">
+						<div class=" h-7 rounded-md bg-gray-300"></div>
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+</table>

package/dist/ui/toolbar/Toolbar.svelte

@@ -1,59 +1,59 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import { setContext } from 'svelte';
-	import { toolbar } from './index.js';
-	import { getTheme, type ToolbarProps } from '../../index.js';
-
-	let {
-		children,
-		end,
-		color,
-		embedded,
-		class: className,
-		classes,
-		...restProps
-	}: ToolbarProps = $props();
-
-	const theme = getTheme('toolbar');
-
-	const context = $state({ separators: false });
-	setContext('toolbar', context);
-
-	let frameColor = $derived(embedded ? 'default' : color);
-
-	let { base, content } = $derived(
-		toolbar({
-			color: frameColor,
-			embedded,
-			separators: context.separators
-		})
-	);
-
-	// let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
-
-	// let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
-</script>
-
-<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
-	<div class={content({ class: clsx(theme?.content, classes?.content) })}>
-		{@render children?.()}
-	</div>
-	{#if end}
-		{@render end()}
-	{/if}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1116)
-## Props
-@prop children
-@prop end
-@prop color
-@prop embedded
-@prop class: className
-@prop classes
-@prop ...restProps
--->
+<script lang="ts">
+	import clsx from 'clsx';
+	import { setContext } from 'svelte';
+	import { toolbar } from './index.js';
+	import { getTheme, type ToolbarProps } from '../../index.js';
+
+	let {
+		children,
+		end,
+		color,
+		embedded,
+		class: className,
+		classes,
+		...restProps
+	}: ToolbarProps = $props();
+
+	const theme = getTheme('toolbar');
+
+	const context = $state({ separators: false });
+	setContext('toolbar', context);
+
+	let frameColor = $derived(embedded ? 'default' : color);
+
+	let { base, content } = $derived(
+		toolbar({
+			color: frameColor,
+			embedded,
+			separators: context.separators
+		})
+	);
+
+	// let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
+
+	// let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
+</script>
+
+<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+	<div class={content({ class: clsx(theme?.content, classes?.content) })}>
+		{@render children?.()}
+	</div>
+	{#if end}
+		{@render end()}
+	{/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1116)
+## Props
+@prop children
+@prop end
+@prop color
+@prop embedded
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/ui/toolbar/ToolbarButton.svelte

@@ -1,56 +1,56 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import { toolbarButton } from './index.js';
-
-	import clsx from 'clsx';
-	import { getTheme, type ToolbarButtonProps } from '../../index.js';
-
-	const background = getContext('background');
-	let {
-		children,
-		color,
-		name,
-		'aria-label': ariaLabel,
-		size,
-		class: className,
-		...restProps
-	}: ToolbarButtonProps = $props();
-
-	const theme = getTheme('toolbarButton');
-
-	const buttonCls = $derived(
-		toolbarButton({
-			color,
-			size,
-			background: !!background,
-			class: clsx(theme, className)
-		})
-	);
-</script>
-
-{#if restProps.href === undefined}
-	<button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
-		{#if name}<span class="sr-only">{name}</span>{/if}
-		{@render children?.()}
-	</button>
-{:else}
-	<a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
-		{#if name}<span class="sr-only">{name}</span>{/if}
-		{@render children?.()}
-	</a>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1122)
-## Props
-@prop children
-@prop color
-@prop name
-@prop "aria-label": ariaLabel
-@prop size
-@prop class: className
-@prop ...restProps
--->
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { toolbarButton } from './index.js';
+
+	import clsx from 'clsx';
+	import { getTheme, type ToolbarButtonProps } from '../../index.js';
+
+	const background = getContext('background');
+	let {
+		children,
+		color,
+		name,
+		'aria-label': ariaLabel,
+		size,
+		class: className,
+		...restProps
+	}: ToolbarButtonProps = $props();
+
+	const theme = getTheme('toolbarButton');
+
+	const buttonCls = $derived(
+		toolbarButton({
+			color,
+			size,
+			background: !!background,
+			class: clsx(theme, className)
+		})
+	);
+</script>
+
+{#if restProps.href === undefined}
+	<button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{@render children?.()}
+	</button>
+{:else}
+	<a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{@render children?.()}
+	</a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1122)
+## Props
+@prop children
+@prop color
+@prop name
+@prop "aria-label": ariaLabel
+@prop size
+@prop class: className
+@prop ...restProps
+-->

package/dist/ui/toolbar/ToolbarGroup.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import { getContext } from 'svelte';
-	import { toolbarGroup } from './index.js';
-	import { getTheme, type ToolbarGroupProps } from '../../index.js';
-
-	let {
-		children,
-		spacing,
-		padding,
-		position = 'middle',
-		class: className,
-		...restProps
-	}: ToolbarGroupProps = $props();
-
-	const theme = getTheme('toolbarGroup');
-
-	const groupCls = $derived(
-		toolbarGroup({ spacing, padding, position, class: clsx(theme, className) })
-	);
-
-	const context = getContext<Record<string, boolean>>('toolbar');
-
-	if (context) context.separators = true;
-</script>
-
-<div {...restProps} class={groupCls}>
-	{@render children?.()}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
-## Props
-@prop children
-@prop spacing
-@prop padding
-@prop position = "middle"
-@prop class: className
-@prop ...restProps
--->
+<script lang="ts">
+	import clsx from 'clsx';
+	import { getContext } from 'svelte';
+	import { toolbarGroup } from './index.js';
+	import { getTheme, type ToolbarGroupProps } from '../../index.js';
+
+	let {
+		children,
+		spacing,
+		padding,
+		position = 'middle',
+		class: className,
+		...restProps
+	}: ToolbarGroupProps = $props();
+
+	const theme = getTheme('toolbarGroup');
+
+	const groupCls = $derived(
+		toolbarGroup({ spacing, padding, position, class: clsx(theme, className) })
+	);
+
+	const context = getContext<Record<string, boolean>>('toolbar');
+
+	if (context) context.separators = true;
+</script>
+
+<div {...restProps} class={groupCls}>
+	{@render children?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
+## Props
+@prop children
+@prop spacing
+@prop padding
+@prop position = "middle"
+@prop class: className
+@prop ...restProps
+-->