@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/forms/FormSelect/FormSelect.svelte

@@ -1,88 +1,88 @@
-<script lang="ts">
-	import { key, Label } from '../../index.js';
-	import type { FormSelectProps } from '../../types/index.js';
-	import { getContext } from 'svelte';
-	import Select from '../select/Select.svelte';
-
-	let {
-		label = '',
-		required,
-		name = '',
-		disabled,
-		contextKey = null,
-		placeholder,
-		multiple = false,
-		onChange,
-		...otherProps
-		// onchange,
-	}: FormSelectProps = $props();
-	const { touched, errors, data, setData }: any = getContext(contextKey || key);
-
-	const hasError = $derived($touched[name] && $errors[name]?.length);
-	const error = $derived($errors[name]?.join(', '));
-	const value = $derived($data[name]);
-	const isSuccess = $derived(!disabled && !hasError && $touched[name]);
-
-	let renderId = $state(0);
-
-	function handleChange(e: any) {
-		if (!e) return;
-		if (!multiple) {
-			setData({ ...$data, [name]: e.value || e.id });
-		} else {
-			const d = e.map((a: any) => a.value || a.id);
-			// console.log({ d });
-			setData({ ...$data, [name]: d });
-		}
-		if (onChange) onChange(e);
-	}
-
-	// $effect(() => {
-	// 	if (hasError) renderId++;
-	// 	if (isSuccess) {
-	// 		alert(isSuccess);
-	// 		renderId++;
-	// 		alert('herr');
-	// 	}
-	// });
-</script>
-
-<div class="relative space-y-1">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-
-	<!-- {#key renderId} -->
-	<Select
-		{name}
-		{multiple}
-		{value}
-		{disabled}
-		onChange={handleChange}
-		{hasError}
-		minHeight={40}
-		hasSuccess={isSuccess}
-		{placeholder}
-		{...otherProps}
-	/>
-	<!-- {/key} -->
-
-	{#if hasError}
-		<Label
-			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
-				'text-red-600'}"
-		>
-			<span class="v-error-message hidden backdrop-blur-sm">
-				{error}
-			</span>
-			<iconify-icon
-				icon="solar:danger-circle-bold-duotone"
-				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
-				style="font-size: 18px;"
-			></iconify-icon>
-		</Label>
-	{/if}
-</div>
+<script lang="ts">
+	import { key, Label } from '../../index.js';
+	import type { FormSelectProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+	import Select from '../select/Select.svelte';
+
+	let {
+		label = '',
+		required,
+		name = '',
+		disabled,
+		contextKey = null,
+		placeholder,
+		multiple = false,
+		onChange,
+		...otherProps
+		// onchange,
+	}: FormSelectProps = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const value = $derived($data[name]);
+	const isSuccess = $derived(!disabled && !hasError && $touched[name]);
+
+	let renderId = $state(0);
+
+	function handleChange(e: any) {
+		if (!e) return;
+		if (!multiple) {
+			setData({ ...$data, [name]: e.value || e.id });
+		} else {
+			const d = e.map((a: any) => a.value || a.id);
+			// console.log({ d });
+			setData({ ...$data, [name]: d });
+		}
+		if (onChange) onChange(e);
+	}
+
+	// $effect(() => {
+	// 	if (hasError) renderId++;
+	// 	if (isSuccess) {
+	// 		alert(isSuccess);
+	// 		renderId++;
+	// 		alert('herr');
+	// 	}
+	// });
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<!-- {#key renderId} -->
+	<Select
+		{name}
+		{multiple}
+		{value}
+		{disabled}
+		onChange={handleChange}
+		{hasError}
+		minHeight={40}
+		hasSuccess={isSuccess}
+		{placeholder}
+		{...otherProps}
+	/>
+	<!-- {/key} -->
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<iconify-icon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			></iconify-icon>
+		</Label>
+	{/if}
+</div>

package/dist/forms/FormTextarea/FormTextarea.svelte

@@ -1,78 +1,78 @@
-<script lang="ts">
-	import { key, type FormTextareaProps } from '../../index.js';
-	import { getContext } from 'svelte';
-	import Label from '../label/Label.svelte';
-	import Textarea from '../textarea/Textarea.svelte';
-
-	let {
-		label = '',
-		required,
-		name,
-		readonly,
-		contextKey = null,
-		placeholder,
-		onchange,
-		...otherProps
-		// onchange,
-	}: FormTextareaProps = $props();
-	const { touched, errors, data, setData }: any = getContext(contextKey || key);
-
-	const hasError = $derived($touched[name] && $errors[name]?.length);
-	const error = $derived($errors[name]?.join(', '));
-	const isSuccess = $derived(!readonly && !hasError && $touched[name]);
-	const isTouched = $derived(!readonly && $touched[name]);
-
-	function handeleChange(e: Event) {
-		const value = (e.target as HTMLTextAreaElement).value;
-		// console.log({ value });
-		setData({ ...$data, [name]: value });
-		if (onchange) onchange(e as any);
-	}
-
-	function getNestedValue<T extends Record<string, any>>(obj: T, path: string): any {
-		return path
-			.split('.')
-			.reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj);
-	}
-</script>
-
-<div class="relative space-y-1">
-	<Label
-		>{label}
-		{#if required}
-			<span class="pl-1 text-red-500">*</span>
-		{/if}
-	</Label>
-
-	<Textarea
-		color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
-		{readonly}
-		value={getNestedValue($data, name) || ''}
-		onchange={handeleChange}
-		{placeholder}
-		class="flex w-full"
-		{...otherProps}
-	/>
-
-	{#if hasError}
-		<Label
-			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
-				'text-red-600'}"
-		>
-			<span class="v-error-message hidden backdrop-blur-sm">
-				{error}
-			</span>
-			<iconify-icon
-				icon="solar:danger-circle-bold-duotone"
-				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
-				style="font-size: 18px;"
-			></iconify-icon>
-		</Label>
-	{/if}
-</div>
-
-<!-- <style>
-	.v-error-container:hover .v-error-message {
-		display: block !important;
-	}
-</style> -->
+<script lang="ts">
+	import { key, type FormTextareaProps } from '../../index.js';
+	import { getContext } from 'svelte';
+	import Label from '../label/Label.svelte';
+	import Textarea from '../textarea/Textarea.svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		readonly,
+		contextKey = null,
+		placeholder,
+		onchange,
+		...otherProps
+		// onchange,
+	}: FormTextareaProps = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const isSuccess = $derived(!readonly && !hasError && $touched[name]);
+	const isTouched = $derived(!readonly && $touched[name]);
+
+	function handeleChange(e: Event) {
+		const value = (e.target as HTMLTextAreaElement).value;
+		// console.log({ value });
+		setData({ ...$data, [name]: value });
+		if (onchange) onchange(e as any);
+	}
+
+	function getNestedValue<T extends Record<string, any>>(obj: T, path: string): any {
+		return path
+			.split('.')
+			.reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<Textarea
+		color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
+		{readonly}
+		value={getNestedValue($data, name) || ''}
+		onchange={handeleChange}
+		{placeholder}
+		class="flex w-full"
+		{...otherProps}
+	/>
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-8 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<iconify-icon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			></iconify-icon>
+		</Label>
+	{/if}
+</div>
+
+<!-- <style>
+	.v-error-container:hover .v-error-message {
+		display: block !important;
+	}
+</style> -->

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -1,119 +1,119 @@
-<!-- <script lang="ts">
-	import CheckIcon from './CheckIcon.svelte';
-	import { buttonToggle } from './theme.js';
-	import type { VariantProps } from 'tailwind-variants';
-	import clsx from 'clsx';
-	import type { ButtonToggleProps } from '../../index.js';
-	import { getButtonToggleContext } from '../../context';
-	import { untrack } from 'svelte';
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-
-	let {
-		value,
-		selected = false,
-		children,
-		iconSlot,
-		color,
-		class: className,
-		iconClass,
-		txtClass,
-		contentClass,
-		classes,
-		...restProps
-	}: ButtonToggleProps = $props();
-
-	warnThemeDeprecation(
-		'ButtonToggle',
-		untrack(() => ({ iconClass, txtClass, contentClass })),
-		{ iconClass: 'icon', txtClass: 'text', contentClass: 'content' }
-	);
-
-	// button(className), content, text, icon
-	const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
-
-	const theme = $derived(getTheme('buttonToggle'));
-
-	// Get context - it will be undefined if used outside ButtonToggleGroup
-	const ctx = getButtonToggleContext();
-
-	// Extract context values with fallbacks
-	const { toggleSelected, isSelected, multiSelect, size, roundedSize, ctxIconClass, ctxBtnClass } =
-		{
-			toggleSelected: ctx?.toggleSelected ?? (() => {}),
-			isSelected: ctx?.isSelected ?? (() => false),
-			multiSelect: ctx?.multiSelect ?? false,
-			size: ctx?.size,
-			roundedSize: ctx?.roundedSize,
-			ctxIconClass: ctx?.ctxIconClass,
-			ctxBtnClass: ctx?.ctxBtnClass
-		};
-
-	// Use context color if available, otherwise use prop color, otherwise default to "primary"
-	const actualColor = $derived(
-		(ctx?.color ?? color ?? 'primary') as VariantProps<typeof buttonToggle>['color']
-	);
-	const actualIconClass = ctxIconClass;
-
-	// Filter size to only valid buttonToggle sizes (no 'xs')
-	const actualSize = (size === 'xs' ? 'sm' : size) as VariantProps<typeof buttonToggle>['size'];
-	// roundedSize is already validated by type system
-	const actualRoundedSize = roundedSize as VariantProps<typeof buttonToggle>['roundedSize'];
-
-	function handleClick() {
-		toggleSelected(value);
-	}
-
-	const { button, content, text, icon } = $derived(
-		buttonToggle({ selected, color: actualColor, size: actualSize })
-	);
-
-	$effect(() => {
-		selected = isSelected(value);
-	});
-</script>
-
-<button
-	type="button"
-	class={button({
-		selected,
-		color: actualColor,
-		size: actualSize,
-		roundedSize: actualRoundedSize,
-		class: clsx(theme?.button, ctxBtnClass, className)
-	})}
-	data-selected={selected}
-	onclick={handleClick}
-	role={multiSelect ? 'checkbox' : 'radio'}
-	aria-checked={selected}
-	{...restProps}
->
-	<div class={content({ class: clsx(theme?.content, styling.content) })}>
-		{#if selected}
-			{#if iconSlot}
-				{@render iconSlot()}
-			{:else}
-				<CheckIcon class={icon({ class: clsx(theme?.icon ?? actualIconClass, styling.icon) })} />
-			{/if}
-		{/if}
-		<span class={text({ selected, class: clsx(theme?.text, styling.text) })}>
-			{@render children()}
-		</span>
-	</div>
-</button>
-
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
-## Props
-@prop value
-@prop selected = false
-@prop children
-@prop iconSlot
-@prop color
-@prop class: className
-@prop iconClass
-@prop txtClass
-@prop contentClass
-@prop classes
-@prop ...restProps -->
+<!-- <script lang="ts">
+	import CheckIcon from './CheckIcon.svelte';
+	import { buttonToggle } from './theme.js';
+	import type { VariantProps } from 'tailwind-variants';
+	import clsx from 'clsx';
+	import type { ButtonToggleProps } from '../../index.js';
+	import { getButtonToggleContext } from '../../context';
+	import { untrack } from 'svelte';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+
+	let {
+		value,
+		selected = false,
+		children,
+		iconSlot,
+		color,
+		class: className,
+		iconClass,
+		txtClass,
+		contentClass,
+		classes,
+		...restProps
+	}: ButtonToggleProps = $props();
+
+	warnThemeDeprecation(
+		'ButtonToggle',
+		untrack(() => ({ iconClass, txtClass, contentClass })),
+		{ iconClass: 'icon', txtClass: 'text', contentClass: 'content' }
+	);
+
+	// button(className), content, text, icon
+	const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
+
+	const theme = $derived(getTheme('buttonToggle'));
+
+	// Get context - it will be undefined if used outside ButtonToggleGroup
+	const ctx = getButtonToggleContext();
+
+	// Extract context values with fallbacks
+	const { toggleSelected, isSelected, multiSelect, size, roundedSize, ctxIconClass, ctxBtnClass } =
+		{
+			toggleSelected: ctx?.toggleSelected ?? (() => {}),
+			isSelected: ctx?.isSelected ?? (() => false),
+			multiSelect: ctx?.multiSelect ?? false,
+			size: ctx?.size,
+			roundedSize: ctx?.roundedSize,
+			ctxIconClass: ctx?.ctxIconClass,
+			ctxBtnClass: ctx?.ctxBtnClass
+		};
+
+	// Use context color if available, otherwise use prop color, otherwise default to "primary"
+	const actualColor = $derived(
+		(ctx?.color ?? color ?? 'primary') as VariantProps<typeof buttonToggle>['color']
+	);
+	const actualIconClass = ctxIconClass;
+
+	// Filter size to only valid buttonToggle sizes (no 'xs')
+	const actualSize = (size === 'xs' ? 'sm' : size) as VariantProps<typeof buttonToggle>['size'];
+	// roundedSize is already validated by type system
+	const actualRoundedSize = roundedSize as VariantProps<typeof buttonToggle>['roundedSize'];
+
+	function handleClick() {
+		toggleSelected(value);
+	}
+
+	const { button, content, text, icon } = $derived(
+		buttonToggle({ selected, color: actualColor, size: actualSize })
+	);
+
+	$effect(() => {
+		selected = isSelected(value);
+	});
+</script>
+
+<button
+	type="button"
+	class={button({
+		selected,
+		color: actualColor,
+		size: actualSize,
+		roundedSize: actualRoundedSize,
+		class: clsx(theme?.button, ctxBtnClass, className)
+	})}
+	data-selected={selected}
+	onclick={handleClick}
+	role={multiSelect ? 'checkbox' : 'radio'}
+	aria-checked={selected}
+	{...restProps}
+>
+	<div class={content({ class: clsx(theme?.content, styling.content) })}>
+		{#if selected}
+			{#if iconSlot}
+				{@render iconSlot()}
+			{:else}
+				<CheckIcon class={icon({ class: clsx(theme?.icon ?? actualIconClass, styling.icon) })} />
+			{/if}
+		{/if}
+		<span class={text({ selected, class: clsx(theme?.text, styling.text) })}>
+			{@render children()}
+		</span>
+	</div>
+</button>
+
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
+## Props
+@prop value
+@prop selected = false
+@prop children
+@prop iconSlot
+@prop color
+@prop class: className
+@prop iconClass
+@prop txtClass
+@prop contentClass
+@prop classes
+@prop ...restProps -->

package/dist/forms/button-toggle/CheckIcon.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import type { CheckIconProps } from '../../types/index.js';
-	import clsx from 'clsx';
-	let { class: className, ...restProps }: CheckIconProps = $props();
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	width="16"
-	height="16"
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke="currentColor"
-	stroke-width="2"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	class={clsx(className)}
-	{...restProps}
->
-	<polyline points="20 6 9 17 4 12"></polyline>
-</svg>
-
-<!--
-
-## Props
-@prop class: className
-@prop ...restProps
--->
+<script lang="ts">
+	import type { CheckIconProps } from '../../types/index.js';
+	import clsx from 'clsx';
+	let { class: className, ...restProps }: CheckIconProps = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="16"
+	height="16"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={clsx(className)}
+	{...restProps}
+>
+	<polyline points="20 6 9 17 4 12"></polyline>
+</svg>
+
+<!--
+
+## Props
+@prop class: className
+@prop ...restProps
+-->