@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/ui/alertDialog/AlertDialog.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { Modal, Button, type AlertDialogProps } from '../../index.js';
-
-	let {
-		open = $bindable(false),
-		message = '',
-		icon = 'line-md:alert-circle',
-		disableYes = false,
-		busy = false,
-		iconColor = '',
-		confirmText = "Yes, I'm sure",
-		buttonType = 'button',
-		dismissable = true,
-		onCancel,
-		onYes
-	}: AlertDialogProps = $props();
-</script>
-
-<div class="fixed z-[2000]">
-	<Modal bind:open size="xs" {dismissable}>
-		<div class="text-center">
-			<iconify-icon {icon} style="font-size: 100px;" class={iconColor}></iconify-icon>
-			<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{message}</h3>
-			<Button
-				type={buttonType}
-				disabled={disableYes || busy}
-				color="red"
-				class="mr-2"
-				onclick={onYes}
-				><div class="flex items-center gap-1">
-					{confirmText}
-					{#if busy}
-						<iconify-icon icon="svg-spinners:180-ring-with-bg" class="text-pink-600"></iconify-icon>
-					{/if}
-				</div></Button
-			>
-			<Button color="alternative" onclick={onCancel} disabled={busy}>No, cancel</Button>
-		</div>
-	</Modal>
-</div>
+<script lang="ts">
+	import { Modal, Button, type AlertDialogProps } from '../../index.js';
+
+	let {
+		open = $bindable(false),
+		message = '',
+		icon = 'line-md:alert-circle',
+		disableYes = false,
+		busy = false,
+		iconColor = '',
+		confirmText = "Yes, I'm sure",
+		buttonType = 'button',
+		dismissable = true,
+		onCancel,
+		onYes
+	}: AlertDialogProps = $props();
+</script>
+
+<div class="fixed z-[2000]">
+	<Modal bind:open size="xs" {dismissable}>
+		<div class="text-center">
+			<iconify-icon {icon} style="font-size: 100px;" class={iconColor}></iconify-icon>
+			<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{message}</h3>
+			<Button
+				type={buttonType}
+				disabled={disableYes || busy}
+				color="red"
+				class="mr-2"
+				onclick={onYes}
+				><div class="flex items-center gap-1">
+					{confirmText}
+					{#if busy}
+						<iconify-icon icon="svg-spinners:180-ring-with-bg" class="text-pink-600"></iconify-icon>
+					{/if}
+				</div></Button
+			>
+			<Button color="alternative" onclick={onCancel} disabled={busy}>No, cancel</Button>
+		</div>
+	</Modal>
+</div>

package/dist/ui/avatar/Avatar.svelte

@@ -1,77 +1,77 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import { avatar } from './theme.js';
-	import { Indicator } from '../indicator/index.js';
-	import { getTheme } from '../../themes/themeUtils.js';
-	import type { AvatarProps } from '../../index.js';
-
-	let {
-		children,
-		indicator,
-		src,
-		href,
-		target,
-		cornerStyle = 'circular',
-		border = false,
-		stacked = false,
-		dot,
-		class: className,
-		alt,
-		size = 'md',
-		onclick,
-		...restProps
-	}: AvatarProps = $props();
-
-	dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
-
-	const theme = getTheme('avatar');
-
-	let avatarClass = $derived(
-		avatar({
-			cornerStyle,
-			border,
-			stacked,
-			size,
-			class: clsx(theme, className)
-		})
-	);
-</script>
-
-{#if !src || !!href || children || dot || indicator}
-	<svelte:element
-		this={href ? 'a' : 'div'}
-		role={href ? undefined : 'button'}
-		{onclick}
-		{href}
-		{target}
-		{...restProps}
-		class={avatarClass}
-	>
-		{#if src}
-			<img {alt} {src} class={cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'} />
-		{:else if children}
-			{@render children()}
-		{:else}
-			<svg
-				class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'}"
-				fill="currentColor"
-				viewBox="0 0 16 16"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-					clip-rule="evenodd"
-				></path>
-			</svg>
-		{/if}
-		{#if dot}
-			<Indicator border offset={cornerStyle === 'circular' ? true : false} {...dot} />
-		{/if}
-		{#if indicator}
-			{@render indicator()}
-		{/if}
-	</svelte:element>
-{:else}
-	<img {alt} {src} {...restProps} {onclick} class={avatarClass} />
-{/if}
+<script lang="ts">
+	import clsx from 'clsx';
+	import { avatar } from './theme.js';
+	import { Indicator } from '../indicator/index.js';
+	import { getTheme } from '../../themes/themeUtils.js';
+	import type { AvatarProps } from '../../index.js';
+
+	let {
+		children,
+		indicator,
+		src,
+		href,
+		target,
+		cornerStyle = 'circular',
+		border = false,
+		stacked = false,
+		dot,
+		class: className,
+		alt,
+		size = 'md',
+		onclick,
+		...restProps
+	}: AvatarProps = $props();
+
+	dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
+
+	const theme = getTheme('avatar');
+
+	let avatarClass = $derived(
+		avatar({
+			cornerStyle,
+			border,
+			stacked,
+			size,
+			class: clsx(theme, className)
+		})
+	);
+</script>
+
+{#if !src || !!href || children || dot || indicator}
+	<svelte:element
+		this={href ? 'a' : 'div'}
+		role={href ? undefined : 'button'}
+		{onclick}
+		{href}
+		{target}
+		{...restProps}
+		class={avatarClass}
+	>
+		{#if src}
+			<img {alt} {src} class={cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'} />
+		{:else if children}
+			{@render children()}
+		{:else}
+			<svg
+				class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded-sm'}"
+				fill="currentColor"
+				viewBox="0 0 16 16"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+					clip-rule="evenodd"
+				></path>
+			</svg>
+		{/if}
+		{#if dot}
+			<Indicator border offset={cornerStyle === 'circular' ? true : false} {...dot} />
+		{/if}
+		{#if indicator}
+			{@render indicator()}
+		{/if}
+	</svelte:element>
+{:else}
+	<img {alt} {src} {...restProps} {onclick} class={avatarClass} />
+{/if}

package/dist/ui/buttons/Button.svelte

@@ -1,102 +1,102 @@
-
-
-<script lang="ts">
-	import { getContext, type Snippet } from 'svelte';
-	import clsx from 'clsx';
-	import { button, getTheme, type ButtonProps, type SizeType } from '../../index.js';
-
-	const group: SizeType = getContext('group');
-	const ctxDisabled: boolean | undefined = getContext('disabled');
-
-	let {
-		children,
-		pill,
-		outline = false,
-		size = 'md',
-		color,
-		shadow = false,
-		tag = 'button',
-		disabled,
-		loading = false,
-		class: className,
-		leadingIcon,
-		trailingIcon,
-		ripple = true,
-		...restProps
-	}: ButtonProps = $props();
-
-	const theme = getTheme('button');
-
-	let actualSize = $derived(group ? 'sm' : size);
-	let actualColor = $derived(color ?? (group ? (outline ? 'dark' : 'alternative') : 'primary'));
-	let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled) || loading);
-
-	const {
-		base,
-		outline: outline_,
-		shadow: shadow_
-	} = $derived(
-		button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group })
-	);
-	let btnCls = $derived(
-		base({ class: clsx(outline && outline_(), shadow && shadow_(), theme?.base, className) })
-	);
-
-	function createRipple(event: MouseEvent) {
-		if (!ripple || isDisabled) {
-			// onclick?.(event as any);
-			return;
-		}
-
-		const button = event.currentTarget as HTMLElement;
-		const diameter = Math.max(button.clientWidth, button.clientHeight);
-		const radius = diameter / 2;
-
-		const rippleSpan = document.createElement('span');
-		rippleSpan.style.width = rippleSpan.style.height = `${diameter}px`;
-		rippleSpan.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
-		rippleSpan.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
-		rippleSpan.classList.add('ripple', 'opacity-70');
-
-		rippleSpan.addEventListener('animationend', () => {
-			{
-				// onclick?.(event as any);
-				rippleSpan.remove();
-			}
-		});
-		button.appendChild(rippleSpan);
-	}
-</script>
-
-{#if restProps.href === undefined}
-	<button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
-		{@render leadingIcon?.()}
-		{@render children?.()}
-		{@render trailingIcon?.()}
-
-		{#if loading}
-			<svg
-				class="ml-2 h-4 w-4 animate-spin text-white"
-				fill="none"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				aria-hidden="true"
-			>
-				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-			</svg>
-		{/if}
-	</button>
-{:else if restProps.href}
-	<a {...restProps} class={btnCls} role="button">
-		{@render leadingIcon?.()}
-		{@render children?.()}
-		{@render trailingIcon?.()}
-	</a>
-{:else}
-	<svelte:element this={tag} {...restProps} class={btnCls}>
-		{@render leadingIcon?.()}
-		{@render children?.()}
-		{@render trailingIcon?.()}
-	</svelte:element>
-{/if}
+
+
+<script lang="ts">
+	import { getContext, type Snippet } from 'svelte';
+	import clsx from 'clsx';
+	import { button, getTheme, type ButtonProps, type SizeType } from '../../index.js';
+
+	const group: SizeType = getContext('group');
+	const ctxDisabled: boolean | undefined = getContext('disabled');
+
+	let {
+		children,
+		pill,
+		outline = false,
+		size = 'md',
+		color,
+		shadow = false,
+		tag = 'button',
+		disabled,
+		loading = false,
+		class: className,
+		leadingIcon,
+		trailingIcon,
+		ripple = true,
+		...restProps
+	}: ButtonProps = $props();
+
+	const theme = getTheme('button');
+
+	let actualSize = $derived(group ? 'sm' : size);
+	let actualColor = $derived(color ?? (group ? (outline ? 'dark' : 'alternative') : 'primary'));
+	let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled) || loading);
+
+	const {
+		base,
+		outline: outline_,
+		shadow: shadow_
+	} = $derived(
+		button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group })
+	);
+	let btnCls = $derived(
+		base({ class: clsx(outline && outline_(), shadow && shadow_(), theme?.base, className) })
+	);
+
+	function createRipple(event: MouseEvent) {
+		if (!ripple || isDisabled) {
+			// onclick?.(event as any);
+			return;
+		}
+
+		const button = event.currentTarget as HTMLElement;
+		const diameter = Math.max(button.clientWidth, button.clientHeight);
+		const radius = diameter / 2;
+
+		const rippleSpan = document.createElement('span');
+		rippleSpan.style.width = rippleSpan.style.height = `${diameter}px`;
+		rippleSpan.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
+		rippleSpan.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
+		rippleSpan.classList.add('ripple', 'opacity-70');
+
+		rippleSpan.addEventListener('animationend', () => {
+			{
+				// onclick?.(event as any);
+				rippleSpan.remove();
+			}
+		});
+		button.appendChild(rippleSpan);
+	}
+</script>
+
+{#if restProps.href === undefined}
+	<button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
+		{@render leadingIcon?.()}
+		{@render children?.()}
+		{@render trailingIcon?.()}
+
+		{#if loading}
+			<svg
+				class="ml-2 h-4 w-4 animate-spin text-white"
+				fill="none"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				aria-hidden="true"
+			>
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+			</svg>
+		{/if}
+	</button>
+{:else if restProps.href}
+	<a {...restProps} class={btnCls} role="button">
+		{@render leadingIcon?.()}
+		{@render children?.()}
+		{@render trailingIcon?.()}
+	</a>
+{:else}
+	<svelte:element this={tag} {...restProps} class={btnCls}>
+		{@render leadingIcon?.()}
+		{@render children?.()}
+		{@render trailingIcon?.()}
+	</svelte:element>
+{/if}

package/dist/ui/buttons/GradientButton.svelte

@@ -1,59 +1,59 @@
-
-
-<script lang="ts">
-	import { getContext, type Snippet } from 'svelte';
-	import clsx from 'clsx';
-	import {
-		Button,
-		getTheme,
-		gradientButton,
-		type GradientButtonProps,
-		type SizeType
-	} from '../../index.js';
-
-	const group: SizeType = getContext('group');
-
-	let {
-		children,
-		outline,
-		pill,
-		color = 'blue',
-		shadow,
-		class: className,
-		href,
-		disabled,
-		size,
-		btnClass,
-		...restProps
-	}: GradientButtonProps = $props();
-
-	const theme = getTheme('gradientButton');
-
-	const { base, outlineWrapper } = $derived(
-		gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group })
-	);
-</script>
-
-{#if outline}
-	<div class={base({ class: clsx(theme?.base, className) })}>
-		<Button
-			{...restProps}
-			class={outlineWrapper({ class: clsx(theme?.outlineWrapper, btnClass) })}
-			{disabled}
-			{href}
-			{size}
-		>
-			{@render children?.()}
-		</Button>
-	</div>
-{:else}
-	<Button
-		{...restProps}
-		class={base({ class: clsx(theme?.base, className) })}
-		{disabled}
-		{href}
-		{size}
-	>
-		{@render children?.()}
-	</Button>
-{/if}
+
+
+<script lang="ts">
+	import { getContext, type Snippet } from 'svelte';
+	import clsx from 'clsx';
+	import {
+		Button,
+		getTheme,
+		gradientButton,
+		type GradientButtonProps,
+		type SizeType
+	} from '../../index.js';
+
+	const group: SizeType = getContext('group');
+
+	let {
+		children,
+		outline,
+		pill,
+		color = 'blue',
+		shadow,
+		class: className,
+		href,
+		disabled,
+		size,
+		btnClass,
+		...restProps
+	}: GradientButtonProps = $props();
+
+	const theme = getTheme('gradientButton');
+
+	const { base, outlineWrapper } = $derived(
+		gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group })
+	);
+</script>
+
+{#if outline}
+	<div class={base({ class: clsx(theme?.base, className) })}>
+		<Button
+			{...restProps}
+			class={outlineWrapper({ class: clsx(theme?.outlineWrapper, btnClass) })}
+			{disabled}
+			{href}
+			{size}
+		>
+			{@render children?.()}
+		</Button>
+	</div>
+{:else}
+	<Button
+		{...restProps}
+		class={base({ class: clsx(theme?.base, className) })}
+		{disabled}
+		{href}
+		{size}
+	>
+		{@render children?.()}
+	</Button>
+{/if}