@rkosafo/cai.components 0.0.74 → 0.0.78

package/dist/ui/accordion/AccordionItem.svelte

@@ -1,173 +1,173 @@
-<script lang="ts">
-	import {
-		accordionItem,
-		type AccordionCtxType,
-		type AccordionItemProps,
-		type ParamsType
-	} from '../../index.js';
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import { useSingleSelection } from '../../utils/singleSelection.svelte.js';
-	import clsx from 'clsx';
-	import { getContext } from 'svelte';
-	import { slide } from 'svelte/transition';
-
-	let {
-		children,
-		header,
-		arrowup,
-		arrowdown,
-		open = $bindable(false),
-		activeClass,
-		inactiveClass,
-		transitionType = slide,
-		transitionParams,
-		class: className,
-		classes,
-		headerClass,
-		contentClass
-	}: AccordionItemProps = $props();
-
-	warnThemeDeprecation(
-		'AccordionItem',
-		{
-			headerClass,
-			contentClass,
-			activeClass,
-			inactiveClass
-		},
-		{
-			headerClass: 'button',
-			contentClass: 'content',
-			activeClass: 'active',
-			inactiveClass: 'inactive'
-		}
-	);
-
-	let styling: typeof classes = $derived(
-		classes ?? {
-			button: headerClass,
-			content: contentClass,
-			active: activeClass,
-			inactive: inactiveClass
-		}
-	);
-
-	const ctx: AccordionCtxType = getContext('ctx') ?? {};
-
-	const ctxTransitionType = ctx.transitionType ?? transitionType;
-	// Check if transitionType is explicitly set to undefined in props
-	const useTransition =
-		transitionType === 'none' ? false : ctxTransitionType === 'none' ? false : true;
-
-	// Theme context
-	const theme = getTheme('accordionItem');
-
-	// single selection
-	const self = Symbol('accordion-item');
-
-	const updateSingleSelection = useSingleSelection<symbol>((value) => (open = value === self));
-
-	$effect(() => {
-		updateSingleSelection(open, self);
-	});
-
-	const handleToggle = () => {
-		open = !open;
-	};
-
-	const { base, button, content, active, inactive } = $derived(
-		accordionItem({ flush: ctx.flush, open })
-	);
-
-	let buttonClass = $derived(
-		clsx(
-			open && !ctx.flush && (styling.active || ctx.activeClass || active()),
-			!open && !ctx.flush && (styling.inactive || ctx.inactiveClass || inactive())
-		)
-	);
-</script>
-
-<h2 class={base({ class: clsx(theme?.base, className) })}>
-	<button
-		type="button"
-		onclick={handleToggle}
-		class={button({ class: clsx(buttonClass, theme?.button, styling.button) })}
-		aria-expanded={open}
-	>
-		{#if header}
-			{@render header()}
-			{#if open}
-				{#if !arrowup}
-					<svg
-						class="h-3 w-3 text-gray-800 dark:text-white"
-						aria-hidden="true"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 10 6"
-					>
-						<path
-							stroke="currentColor"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 5 5 1 1 5"
-						/>
-					</svg>
-				{:else}
-					{@render arrowup()}
-				{/if}
-			{:else if !arrowdown}
-				<svg
-					class="h-3 w-3 text-gray-800 dark:text-white"
-					aria-hidden="true"
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 10 6"
-				>
-					<path
-						stroke="currentColor"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="m1 1 4 4 4-4"
-					/>
-				</svg>
-			{:else}
-				{@render arrowdown()}
-			{/if}
-		{/if}
-	</button>
-</h2>
-
-{#if useTransition}
-	{#if open && transitionType !== 'none'}
-		<div transition:transitionType={transitionParams as ParamsType}>
-			<div class={content({ class: clsx(theme?.content, styling.content) })}>
-				{@render children()}
-			</div>
-		</div>
-	{/if}
-{:else}
-	<div class={open ? 'block' : 'hidden'}>
-		<div class={content({ class: clsx(theme?.content, styling.content) })}>
-			{@render children()}
-		</div>
-	</div>
-{/if}
-
-<!--
-## Props
-@prop children
-@prop header
-@prop arrowup
-@prop arrowdown
-@prop open = $bindable(false)
-@prop activeClass
-@prop inactiveClass
-@prop transitionType = slide
-@prop transitionParams
-@prop class: className
-@prop classes
-@prop headerClass
-@prop contentClass
--->
+<script lang="ts">
+	import {
+		accordionItem,
+		type AccordionCtxType,
+		type AccordionItemProps,
+		type ParamsType
+	} from '../../index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { useSingleSelection } from '../../utils/singleSelection.svelte.js';
+	import clsx from 'clsx';
+	import { getContext } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	let {
+		children,
+		header,
+		arrowup,
+		arrowdown,
+		open = $bindable(false),
+		activeClass,
+		inactiveClass,
+		transitionType = slide,
+		transitionParams,
+		class: className,
+		classes,
+		headerClass,
+		contentClass
+	}: AccordionItemProps = $props();
+
+	warnThemeDeprecation(
+		'AccordionItem',
+		{
+			headerClass,
+			contentClass,
+			activeClass,
+			inactiveClass
+		},
+		{
+			headerClass: 'button',
+			contentClass: 'content',
+			activeClass: 'active',
+			inactiveClass: 'inactive'
+		}
+	);
+
+	let styling: typeof classes = $derived(
+		classes ?? {
+			button: headerClass,
+			content: contentClass,
+			active: activeClass,
+			inactive: inactiveClass
+		}
+	);
+
+	const ctx: AccordionCtxType = getContext('ctx') ?? {};
+
+	const ctxTransitionType = ctx.transitionType ?? transitionType;
+	// Check if transitionType is explicitly set to undefined in props
+	const useTransition =
+		transitionType === 'none' ? false : ctxTransitionType === 'none' ? false : true;
+
+	// Theme context
+	const theme = getTheme('accordionItem');
+
+	// single selection
+	const self = Symbol('accordion-item');
+
+	const updateSingleSelection = useSingleSelection<symbol>((value) => (open = value === self));
+
+	$effect(() => {
+		updateSingleSelection(open, self);
+	});
+
+	const handleToggle = () => {
+		open = !open;
+	};
+
+	const { base, button, content, active, inactive } = $derived(
+		accordionItem({ flush: ctx.flush, open })
+	);
+
+	let buttonClass = $derived(
+		clsx(
+			open && !ctx.flush && (styling.active || ctx.activeClass || active()),
+			!open && !ctx.flush && (styling.inactive || ctx.inactiveClass || inactive())
+		)
+	);
+</script>
+
+<h2 class={base({ class: clsx(theme?.base, className) })}>
+	<button
+		type="button"
+		onclick={handleToggle}
+		class={button({ class: clsx(buttonClass, theme?.button, styling.button) })}
+		aria-expanded={open}
+	>
+		{#if header}
+			{@render header()}
+			{#if open}
+				{#if !arrowup}
+					<svg
+						class="h-3 w-3 text-gray-800 dark:text-white"
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 10 6"
+					>
+						<path
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5 5 1 1 5"
+						/>
+					</svg>
+				{:else}
+					{@render arrowup()}
+				{/if}
+			{:else if !arrowdown}
+				<svg
+					class="h-3 w-3 text-gray-800 dark:text-white"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 10 6"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m1 1 4 4 4-4"
+					/>
+				</svg>
+			{:else}
+				{@render arrowdown()}
+			{/if}
+		{/if}
+	</button>
+</h2>
+
+{#if useTransition}
+	{#if open && transitionType !== 'none'}
+		<div transition:transitionType={transitionParams as ParamsType}>
+			<div class={content({ class: clsx(theme?.content, styling.content) })}>
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+{:else}
+	<div class={open ? 'block' : 'hidden'}>
+		<div class={content({ class: clsx(theme?.content, styling.content) })}>
+			{@render children()}
+		</div>
+	</div>
+{/if}
+
+<!--
+## Props
+@prop children
+@prop header
+@prop arrowup
+@prop arrowdown
+@prop open = $bindable(false)
+@prop activeClass
+@prop inactiveClass
+@prop transitionType = slide
+@prop transitionParams
+@prop class: className
+@prop classes
+@prop headerClass
+@prop contentClass
+-->

package/dist/ui/alert/Alert.svelte

@@ -1,83 +1,83 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import clsx from 'clsx';
-	import { getTheme } from '../../index.js';
-	import type { AlertVariants } from './theme.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Component, Snippet } from 'svelte';
-	import type { AlertProps, ParamsType, TransitionFunc } from '../../types/index.js';
-	import { createDismissableContext } from '../../utils/dismissable.js';
-	import { CloseButton } from '../../utils/closeButton/index.js';
-	import { alert } from './theme.js';
-
-	let {
-		children,
-		icon,
-		alertStatus = $bindable(true),
-		closeIcon: CloseIcon,
-		color = 'primary',
-		rounded = true,
-		border,
-		class: className,
-		dismissable,
-		transition = fade,
-		params,
-		...restProps
-	}: AlertProps = $props();
-
-	// Theme context
-	const theme = getTheme('alert');
-
-	let divCls = $derived(
-		alert({
-			color,
-			rounded,
-			border,
-			icon: !!icon,
-			dismissable,
-			class: clsx(theme, className)
-		})
-	);
-
-	let ref: HTMLDivElement | undefined = $state(undefined);
-
-	function close(event: MouseEvent) {
-		if (ref?.dispatchEvent(new Event('close', { bubbles: true, cancelable: true }))) {
-			alertStatus = false;
-		}
-	}
-
-	createDismissableContext(close);
-</script>
-
-{#if alertStatus}
-	<div
-		role="alert"
-		bind:this={ref}
-		{...restProps}
-		transition:transition={params as ParamsType}
-		class={divCls}
-	>
-		{#if icon}
-			{@render icon()}
-		{/if}
-
-		{#if icon || dismissable}
-			<div>
-				{@render children()}
-			</div>
-		{:else}
-			{@render children()}
-		{/if}
-
-		{#if dismissable}
-			{#if CloseIcon}
-				<CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
-					<CloseIcon />
-				</CloseButton>
-			{:else}
-				<CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
-			{/if}
-		{/if}
-	</div>
-{/if}
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import clsx from 'clsx';
+	import { getTheme } from '../../index.js';
+	import type { AlertVariants } from './theme.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Component, Snippet } from 'svelte';
+	import type { AlertProps, ParamsType, TransitionFunc } from '../../types/index.js';
+	import { createDismissableContext } from '../../utils/dismissable.js';
+	import { CloseButton } from '../../utils/closeButton/index.js';
+	import { alert } from './theme.js';
+
+	let {
+		children,
+		icon,
+		alertStatus = $bindable(true),
+		closeIcon: CloseIcon,
+		color = 'primary',
+		rounded = true,
+		border,
+		class: className,
+		dismissable,
+		transition = fade,
+		params,
+		...restProps
+	}: AlertProps = $props();
+
+	// Theme context
+	const theme = getTheme('alert');
+
+	let divCls = $derived(
+		alert({
+			color,
+			rounded,
+			border,
+			icon: !!icon,
+			dismissable,
+			class: clsx(theme, className)
+		})
+	);
+
+	let ref: HTMLDivElement | undefined = $state(undefined);
+
+	function close(event: MouseEvent) {
+		if (ref?.dispatchEvent(new Event('close', { bubbles: true, cancelable: true }))) {
+			alertStatus = false;
+		}
+	}
+
+	createDismissableContext(close);
+</script>
+
+{#if alertStatus}
+	<div
+		role="alert"
+		bind:this={ref}
+		{...restProps}
+		transition:transition={params as ParamsType}
+		class={divCls}
+	>
+		{#if icon}
+			{@render icon()}
+		{/if}
+
+		{#if icon || dismissable}
+			<div>
+				{@render children()}
+			</div>
+		{:else}
+			{@render children()}
+		{/if}
+
+		{#if dismissable}
+			{#if CloseIcon}
+				<CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
+					<CloseIcon />
+				</CloseButton>
+			{:else}
+				<CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
+			{/if}
+		{/if}
+	</div>
+{/if}

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>