@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/ui/buttons/ActionButton.svelte

@@ -1,234 +1,234 @@
-<script lang="ts" module>
-	export const ACTION_BUTTON_KINDS = {
-		generic: {
-			icon: 'solar:verified-check-bold',
-			iconBgColor: 'bg-green-300',
-			iconSize: 25,
-			iconColor: 'text-gray-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		enquiries: {
-			icon: 'entypo:chat',
-			iconBgColor: 'bg-orange-300',
-			iconSize: 25,
-			iconColor: 'text-orange-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		accept: {
-			icon: 'ph:check-circle',
-			iconBgColor: 'bg-green-300',
-			iconSize: 25,
-			iconColor: 'text-gray-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		approve: {
-			icon: 'ph:check-circle',
-			iconBgColor: 'bg-green-300',
-			iconSize: 25,
-			iconColor: 'text-gray-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		reject: {
-			icon: 'ph:x-circle',
-			iconBgColor: 'bg-red-400',
-			iconSize: 25,
-			iconColor: 'text-white',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		transfer: {
-			icon: 'mdi:file-sync',
-			iconBgColor: 'bg-sky-300',
-			iconSize: 25,
-			iconColor: 'text-gray-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		recommendation: {
-			icon: 'material-symbols:recommend-outline',
-			iconBgColor: 'bg-yellow-300',
-			iconSize: 25,
-			iconColor: 'text-gray-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		file: {
-			icon: 'ph:file-text',
-			iconBgColor: 'bg-gray-200',
-			iconSize: 25,
-			iconColor: 'text-gray-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		},
-		form: {
-			icon: 'game-icons:archive-register',
-			iconBgColor: 'bg-teal-100',
-			iconSize: 25,
-			iconColor: 'text-blue-800',
-			label: '',
-			subLabel: '',
-			showBg: true,
-			showArrow: false,
-			showIconHover: true,
-			moreHeight: false
-		}
-	} as const;
-</script>
-
-<script lang="ts">
-	import { cn, IconifyIcon, type ActionButtonProps } from '../../index.js';
-	import Button from './Button.svelte';
-
-	let {
-		icon = '',
-		iconBgColor = '',
-		iconSize = 0,
-		iconColor = '',
-		label = '',
-		subLabel = '',
-		showBg = null,
-		showArrow = false,
-		showIconHover = false,
-		moreHeight = false,
-		href = null,
-		kind = 'generic',
-		moreShadow = false,
-		onclick,
-		...rest
-	}: ActionButtonProps = $props();
-
-	// Derived configuration based on kind
-	const config = $derived(ACTION_BUTTON_KINDS[kind] ?? ACTION_BUTTON_KINDS.generic);
-
-	// Computed values with kind defaults
-	const computedIcon = $derived(icon || config.icon);
-	const computedIconBgColor = $derived(iconBgColor || config.iconBgColor);
-	const computedIconSize = $derived(iconSize || config.iconSize);
-	const computedIconColor = $derived(iconColor || config.iconColor);
-	const computedLabel = $derived(label || config.label);
-	const computedSubLabel = $derived(subLabel || config.subLabel);
-	const computedShowBg = $derived(showBg === null || showBg === undefined ? config.showBg : showBg);
-	const computedShowArrow = $derived(showArrow || config.showArrow);
-	const computedShowIconHover = $derived(showIconHover || config.showIconHover);
-	const computedMoreHeight = $derived(moreHeight || config.moreHeight);
-</script>
-
-<Button
-	onclick={() => onclick?.()}
-	color="alternative"
-	href={href || ''}
-	class={cn(
-		'flex items-center rounded-[6px]  py-2.5 pl-4',
-		computedShowBg && 'bg-white',
-		moreShadow && 'loginbox'
-	)}
->
-	<div class="flex w-full items-center justify-between pr-2">
-		<div class="flex w-full flex-grow items-center justify-start gap-3 truncate text-ellipsis">
-			<div class={`${computedIconBgColor} grid place-content-center rounded-[5px] p-2.5`}>
-				<IconifyIcon
-					icon={computedIcon}
-					style="font-size: {computedIconSize}x;"
-					class={computedIconColor}
-				/>
-			</div>
-			<div class="flex flex-grow flex-col overflow-hidden text-left">
-				<span
-					class=" block w-full truncate overflow-hidden tracking-tight text-ellipsis whitespace-nowrap"
-				>
-					{computedLabel}
-				</span>
-				<span
-					title={computedSubLabel}
-					class="block w-full truncate overflow-hidden text-sm text-ellipsis whitespace-nowrap text-gray-500"
-				>
-					{computedSubLabel}
-				</span>
-			</div>
-		</div>
-		{#if computedShowArrow}
-			<p class="grid h-9 w-9 shrink-0 place-content-center rounded-full">
-				<IconifyIcon icon="iconamoon:arrow-right-2-light" style="font-size: 25px;" />
-			</p>
-		{/if}
-	</div>
-</Button>
-
-<!-- <a
-	{...rest}
-	{href}
-	class="w-full cursor-pointer rounded-[6px] border-gray-400/40 px-2 py-2.5 {!computedShowBg &&
-		'hover:bg-blue-200/40'} "
-	class:bg-white={computedShowBg}
-	class:shadow={computedShowBg}
-	class:hover:scale-95={computedShowBg}
-	class:h-20={computedMoreHeight}
-	class:loginbox={moreShadow}
->
-	<div class="flex w-full items-center justify-between">
-		<div class="flex w-full flex-grow items-center justify-start gap-3">
-			<div class="{computedIconBgColor} grid place-content-center rounded-[5px] p-2.5">
-				<IconifyIcon
-					icon={computedIcon}
-					style="font-size: {computedIconSize}px;"
-					class={computedIconColor}
-				/>
-			</div>
-			<div class="flex w-10 flex-grow flex-col overflow-hidden text-left">
-				<div
-					class="block w-full truncate overflow-hidden font-medium text-ellipsis whitespace-nowrap"
-				>
-					{computedLabel}
-				</div>
-				<div
-					class="block w-full truncate overflow-hidden text-sm text-ellipsis whitespace-nowrap text-gray-500"
-				>
-					{computedSubLabel}
-				</div>
-			</div>
-		</div>
-		<div
-			class:hidden={!computedShowArrow}
-			class="grid h-9 w-9 place-content-center rounded-full"
-			class:hover:bg-gray-200={computedShowIconHover}
-		>
-			<IconifyIcon icon="iconamoon:arrow-right-2-light" style="font-size: 25px;" />
-		</div>
-	</div>
-</a> -->
+<script lang="ts" module>
+	export const ACTION_BUTTON_KINDS = {
+		generic: {
+			icon: 'solar:verified-check-bold',
+			iconBgColor: 'bg-green-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		enquiries: {
+			icon: 'entypo:chat',
+			iconBgColor: 'bg-orange-300',
+			iconSize: 25,
+			iconColor: 'text-orange-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		accept: {
+			icon: 'ph:check-circle',
+			iconBgColor: 'bg-green-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		approve: {
+			icon: 'ph:check-circle',
+			iconBgColor: 'bg-green-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		reject: {
+			icon: 'ph:x-circle',
+			iconBgColor: 'bg-red-400',
+			iconSize: 25,
+			iconColor: 'text-white',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		transfer: {
+			icon: 'mdi:file-sync',
+			iconBgColor: 'bg-sky-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		recommendation: {
+			icon: 'material-symbols:recommend-outline',
+			iconBgColor: 'bg-yellow-300',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		file: {
+			icon: 'ph:file-text',
+			iconBgColor: 'bg-gray-200',
+			iconSize: 25,
+			iconColor: 'text-gray-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		},
+		form: {
+			icon: 'game-icons:archive-register',
+			iconBgColor: 'bg-teal-100',
+			iconSize: 25,
+			iconColor: 'text-blue-800',
+			label: '',
+			subLabel: '',
+			showBg: true,
+			showArrow: false,
+			showIconHover: true,
+			moreHeight: false
+		}
+	} as const;
+</script>
+
+<script lang="ts">
+	import { cn, IconifyIcon, type ActionButtonProps } from '../../index.js';
+	import Button from './Button.svelte';
+
+	let {
+		icon = '',
+		iconBgColor = '',
+		iconSize = 0,
+		iconColor = '',
+		label = '',
+		subLabel = '',
+		showBg = null,
+		showArrow = false,
+		showIconHover = false,
+		moreHeight = false,
+		href = null,
+		kind = 'generic',
+		moreShadow = false,
+		onclick,
+		...rest
+	}: ActionButtonProps = $props();
+
+	// Derived configuration based on kind
+	const config = $derived(ACTION_BUTTON_KINDS[kind] ?? ACTION_BUTTON_KINDS.generic);
+
+	// Computed values with kind defaults
+	const computedIcon = $derived(icon || config.icon);
+	const computedIconBgColor = $derived(iconBgColor || config.iconBgColor);
+	const computedIconSize = $derived(iconSize || config.iconSize);
+	const computedIconColor = $derived(iconColor || config.iconColor);
+	const computedLabel = $derived(label || config.label);
+	const computedSubLabel = $derived(subLabel || config.subLabel);
+	const computedShowBg = $derived(showBg === null || showBg === undefined ? config.showBg : showBg);
+	const computedShowArrow = $derived(showArrow || config.showArrow);
+	const computedShowIconHover = $derived(showIconHover || config.showIconHover);
+	const computedMoreHeight = $derived(moreHeight || config.moreHeight);
+</script>
+
+<Button
+	onclick={() => onclick?.()}
+	color="alternative"
+	href={href || ''}
+	class={cn(
+		'flex items-center rounded-[6px]  py-2.5 pl-4',
+		computedShowBg && 'bg-white',
+		moreShadow && 'loginbox'
+	)}
+>
+	<div class="flex w-full items-center justify-between pr-2">
+		<div class="flex w-full flex-grow items-center justify-start gap-3 truncate text-ellipsis">
+			<div class={`${computedIconBgColor} grid place-content-center rounded-[5px] p-2.5`}>
+				<IconifyIcon
+					icon={computedIcon}
+					style="font-size: {computedIconSize}x;"
+					class={computedIconColor}
+				/>
+			</div>
+			<div class="flex flex-grow flex-col overflow-hidden text-left">
+				<span
+					class=" block w-full truncate overflow-hidden tracking-tight text-ellipsis whitespace-nowrap"
+				>
+					{computedLabel}
+				</span>
+				<span
+					title={computedSubLabel}
+					class="block w-full truncate overflow-hidden text-sm text-ellipsis whitespace-nowrap text-gray-500"
+				>
+					{computedSubLabel}
+				</span>
+			</div>
+		</div>
+		{#if computedShowArrow}
+			<p class="grid h-9 w-9 shrink-0 place-content-center rounded-full">
+				<IconifyIcon icon="iconamoon:arrow-right-2-light" style="font-size: 25px;" />
+			</p>
+		{/if}
+	</div>
+</Button>
+
+<!-- <a
+	{...rest}
+	{href}
+	class="w-full cursor-pointer rounded-[6px] border-gray-400/40 px-2 py-2.5 {!computedShowBg &&
+		'hover:bg-blue-200/40'} "
+	class:bg-white={computedShowBg}
+	class:shadow={computedShowBg}
+	class:hover:scale-95={computedShowBg}
+	class:h-20={computedMoreHeight}
+	class:loginbox={moreShadow}
+>
+	<div class="flex w-full items-center justify-between">
+		<div class="flex w-full flex-grow items-center justify-start gap-3">
+			<div class="{computedIconBgColor} grid place-content-center rounded-[5px] p-2.5">
+				<IconifyIcon
+					icon={computedIcon}
+					style="font-size: {computedIconSize}px;"
+					class={computedIconColor}
+				/>
+			</div>
+			<div class="flex w-10 flex-grow flex-col overflow-hidden text-left">
+				<div
+					class="block w-full truncate overflow-hidden font-medium text-ellipsis whitespace-nowrap"
+				>
+					{computedLabel}
+				</div>
+				<div
+					class="block w-full truncate overflow-hidden text-sm text-ellipsis whitespace-nowrap text-gray-500"
+				>
+					{computedSubLabel}
+				</div>
+			</div>
+		</div>
+		<div
+			class:hidden={!computedShowArrow}
+			class="grid h-9 w-9 place-content-center rounded-full"
+			class:hover:bg-gray-200={computedShowIconHover}
+		>
+			<IconifyIcon icon="iconamoon:arrow-right-2-light" style="font-size: 25px;" />
+		</div>
+	</div>
+</a> -->

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}