@rkosafo/cai.components 0.0.74 → 0.0.78

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/box/Box.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import { cn, type BoxProps } from '../../index.js';
-
-	let {
-		children,
-		otherClasses = '',
-		bgWhite = false,
-		rounded = false,
-		padding = false,
-		shadow = false,
-		...restProps
-	}: BoxProps = $props();
-</script>
-
-<div
-	{...restProps}
-	class={cn(
-		'scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full w-full overflow-y-auto ',
-		otherClasses
-	)}
-	class:rounded-[5px]={rounded}
-	class:bg-white={bgWhite}
-	class:p-6={padding}
-	class:shadow-sm={shadow}
-	class:shadow-gray-400={shadow}
->
-	{@render children()}
-</div>
+<script lang="ts">
+	import { cn, type BoxProps } from '../../index.js';
+
+	let {
+		children,
+		otherClasses = '',
+		bgWhite = false,
+		rounded = false,
+		padding = false,
+		shadow = false,
+		...restProps
+	}: BoxProps = $props();
+</script>
+
+<div
+	{...restProps}
+	class={cn(
+		'scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full w-full overflow-y-auto ',
+		otherClasses
+	)}
+	class:rounded-[5px]={rounded}
+	class:bg-white={bgWhite}
+	class:p-6={padding}
+	class:shadow-sm={shadow}
+	class:shadow-gray-400={shadow}
+>
+	{@render children()}
+</div>

package/dist/ui/breadcrumb/Breadcrumb.svelte

@@ -1,28 +1,39 @@
-<script lang="ts">
-	import { IconifyIcon, type BreadcrumbProps } from '../../index.js';
-
-	let { options = [], activeBreadCrumb = '', onclik }: BreadcrumbProps = $props();
-</script>
-
-<ul class="flex items-center gap-1">
-	{#each options as { title, path }, index}
-		<li>
-			<button
-				onclick={() => onclik?.({ title, path, index })}
-				class="capitalize"
-				class:text-blue-500={activeBreadCrumb === title}
-				class:text-gray-500={activeBreadCrumb !== title}
-				class:hover:text-gray-400={activeBreadCrumb !== title}
-				class:cursor-default={activeBreadCrumb === title}>{title}</button
-			>
-		</li>
-		<!-- <li><i class="bx bx-chevron-right" /></li> -->
-		{#if index !== options.length - 1}
-			<IconifyIcon
-				icon="ri:arrow-right-double-line"
-				class="dark:text-gray-500"
-				style="font-size:18px"
-			/>
-		{/if}
-	{/each}
-</ul>
+<script lang="ts">
+	import { IconifyIcon, type BreadcrumbProps } from '../../index.js';
+
+	let {
+		options = [],
+		activeBreadCrumb = '',
+		onclik,
+		activeClass = 'blue'
+	}: BreadcrumbProps = $props();
+</script>
+
+<ul class="flex items-center gap-1">
+	{#each options as { title, path }, index}
+		<li>
+			<button
+				onclick={() => onclik?.({ title, path, index })}
+				class="capitalize"
+				class:text-blue-500={activeBreadCrumb === title && activeClass === 'blue'}
+				class:text-red-500={activeBreadCrumb === title && activeClass === 'red'}
+				class:text-pink-500={activeBreadCrumb === title && activeClass === 'pink'}
+				class:text-indigo-500={activeBreadCrumb === title && activeClass === 'indigo'}
+				class:text-purple-500={activeBreadCrumb === title && activeClass === 'purple'}
+				class:text-black={activeBreadCrumb === title && activeClass === 'black'}
+				class:text-amber-500={activeBreadCrumb === title && activeClass === 'amber'}
+				class:text-orange-500={activeBreadCrumb === title && activeClass === 'orange'}
+				class:hover:text-gray-400={activeBreadCrumb !== title}
+				class:cursor-default={activeBreadCrumb === title}>{title}</button
+			>
+		</li>
+		<!-- <li><i class="bx bx-chevron-right" /></li> -->
+		{#if index !== options.length - 1}
+			<IconifyIcon
+				icon="ri:arrow-right-double-line"
+				class="dark:text-gray-500"
+				style="font-size:18px"
+			/>
+		{/if}
+	{/each}
+</ul>