@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/ui/alert/theme.d.ts

@@ -0,0 +1,108 @@
+import { type VariantProps } from "tailwind-variants";
+export type AlertVariants = VariantProps<typeof alert>;
+export declare const alert: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, "p-4 gap-3 text-sm", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    rounded: {
+        true: string;
+    };
+    border: {
+        true: string;
+    };
+    icon: {
+        true: string;
+    };
+    dismissable: {
+        true: string;
+    };
+}, undefined, "p-4 gap-3 text-sm", unknown, unknown, undefined>>;

package/dist/ui/alert/theme.js

@@ -0,0 +1,149 @@
+import { tv } from "tailwind-variants";
+export const alert = tv({
+    base: "p-4 gap-3 text-sm",
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: "bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400",
+            secondary: "bg-secondary-50 dark:bg-secondary-800 text-secondary-800 dark:text-secondary-400",
+            gray: "bg-gray-100 text-gray-500 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300",
+            red: "bg-red-100 text-red-500 focus:ring-red-400 dark:bg-red-200 dark:text-red-600",
+            orange: "bg-orange-100 text-orange-500 focus:ring-orange-400 dark:bg-orange-200 dark:text-orange-600",
+            amber: "bg-amber-100 text-amber-500 focus:ring-amber-400 dark:bg-amber-200 dark:text-amber-600",
+            yellow: "bg-yellow-100 text-yellow-500 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600",
+            lime: "bg-lime-100 text-lime-500 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600",
+            green: "bg-green-100 text-green-500 focus:ring-green-400 dark:bg-green-200 dark:text-green-600",
+            emerald: "bg-emerald-100 text-emerald-500 focus:ring-emerald-400 dark:bg-emerald-200 dark:text-emerald-600",
+            teal: "bg-teal-100 text-teal-500 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600",
+            cyan: "bg-cyan-100 text-cyan-500 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600",
+            sky: "bg-sky-100 text-sky-500 focus:ring-sky-400 dark:bg-sky-200 dark:text-sky-600",
+            blue: "bg-blue-100 text-blue-500 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600",
+            indigo: "bg-indigo-100 text-indigo-500 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600",
+            violet: "bg-violet-100 text-violet-500 focus:ring-violet-400 dark:bg-violet-200 dark:text-violet-600",
+            purple: "bg-purple-100 text-purple-500 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600",
+            fuchsia: "bg-fuchsia-100 text-fuchsia-500 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600",
+            pink: "bg-pink-100 text-pink-500 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600",
+            rose: "bg-rose-100 text-rose-500 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600"
+        },
+        rounded: {
+            true: "rounded-lg"
+        },
+        border: {
+            true: "border"
+        },
+        icon: {
+            true: "flex items-center"
+        },
+        dismissable: {
+            true: "flex items-center"
+        }
+    },
+    compoundVariants: [
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        {
+            border: true,
+            color: "primary",
+            class: "border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200"
+        },
+        {
+            border: true,
+            color: "secondary",
+            class: "border-secondary-500 dark:border-secondary-200 divide-secondary-500 dark:divide-secondary-200"
+        },
+        {
+            border: true,
+            color: "gray",
+            class: "border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800"
+        },
+        {
+            border: true,
+            color: "red",
+            class: "border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800"
+        },
+        {
+            border: true,
+            color: "orange",
+            class: "border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800"
+        },
+        {
+            border: true,
+            color: "amber",
+            class: "border-amber-300 dark:border-amber-800 divide-amber-300 dark:divide-amber-800"
+        },
+        {
+            border: true,
+            color: "yellow",
+            class: "border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800"
+        },
+        {
+            border: true,
+            color: "lime",
+            class: "border-lime-300 dark:border-lime-800 divide-lime-300 dark:divide-lime-800"
+        },
+        {
+            border: true,
+            color: "green",
+            class: "border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800"
+        },
+        {
+            border: true,
+            color: "emerald",
+            class: "border-emerald-300 dark:border-emerald-800 divide-emerald-300 dark:divide-emerald-800"
+        },
+        {
+            border: true,
+            color: "teal",
+            class: "border-teal-300 dark:border-teal-800 divide-teal-300 dark:divide-teal-800"
+        },
+        {
+            border: true,
+            color: "cyan",
+            class: "border-cyan-300 dark:border-cyan-800 divide-cyan-300 dark:divide-cyan-800"
+        },
+        {
+            border: true,
+            color: "sky",
+            class: "border-sky-300 dark:border-sky-800 divide-sky-300 dark:divide-sky-800"
+        },
+        {
+            border: true,
+            color: "blue",
+            class: "border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800"
+        },
+        {
+            border: true,
+            color: "indigo",
+            class: "border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800"
+        },
+        //  violet, purple, fuchsia, pink, rose
+        {
+            border: true,
+            color: "violet",
+            class: "border-violet-300 dark:border-violet-800 divide-violet-300 dark:divide-violet-800"
+        },
+        {
+            border: true,
+            color: "purple",
+            class: "border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800"
+        },
+        {
+            border: true,
+            color: "fuchsia",
+            class: "border-fuchsia-300 dark:border-fuchsia-800 divide-fuchsia-300 dark:divide-fuchsia-800"
+        },
+        {
+            border: true,
+            color: "pink",
+            class: "border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800"
+        },
+        {
+            border: true,
+            color: "rose",
+            class: "border-rose-300 dark:border-rose-800 divide-rose-300 dark:divide-rose-800"
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        rounded: true
+    }
+});

package/dist/ui/alertDialog/AlertDialog.svelte

@@ -0,0 +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>

package/dist/ui/alertDialog/AlertDialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type AlertDialogProps } from '../../index.js';
+declare const AlertDialog: import("svelte").Component<AlertDialogProps, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/ui/alertDialog/index.d.ts

@@ -0,0 +1 @@
+export { default as AlertDialog } from "./AlertDialog.svelte";

package/dist/ui/alertDialog/index.js

@@ -0,0 +1 @@
+export { default as AlertDialog } from "./AlertDialog.svelte";

package/dist/ui/avatar/Avatar.svelte

@@ -0,0 +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}

package/dist/ui/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarProps } from '../../index.js';
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/ui/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.svelte';
+export { avatar } from './theme.js';

package/dist/ui/avatar/index.js

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.svelte';
+export { avatar } from './theme.js';

package/dist/ui/avatar/theme.d.ts

@@ -0,0 +1,63 @@
+import { type VariantProps } from "tailwind-variants";
+export type AvatarVariants = VariantProps<typeof avatar>;
+export declare const avatar: import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", {
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: string;
+    };
+    stacked: {
+        true: string;
+        false: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", unknown, unknown, undefined>>;

package/dist/ui/avatar/theme.js

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+export const avatar = tv({
+    base: "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300",
+    variants: {
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "p-1 ring-2 ring-gray-300 dark:ring-gray-500",
+            false: ""
+        },
+        stacked: {
+            true: "border-2 -ms-4 border-white dark:border-gray-800",
+            false: ""
+        },
+        size: {
+            xs: "w-6 h-6",
+            sm: "w-8 h-8",
+            md: "w-10 h-10",
+            lg: "w-20 h-20",
+            xl: "w-36 h-36"
+        }
+    },
+    defaultVariants: {
+        cornerStyle: "circular",
+        border: false,
+        stacked: false,
+        size: "md"
+    }
+});

package/dist/ui/buttons/Button.svelte

@@ -0,0 +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}

package/dist/ui/buttons/Button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from '../../index.js';
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/ui/buttons/GradientButton.svelte

@@ -0,0 +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}

package/dist/ui/buttons/GradientButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type GradientButtonProps } from '../../index.js';
+declare const GradientButton: import("svelte").Component<GradientButtonProps, {}, "">;
+type GradientButton = ReturnType<typeof GradientButton>;
+export default GradientButton;

package/dist/ui/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.svelte';
+export { default as GradientButton } from './GradientButton.svelte';
+export { button, gradientButton } from './theme.js';

package/dist/ui/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.svelte';
+export { default as GradientButton } from './GradientButton.svelte';
+export { button, gradientButton } from './theme.js';