@rkosafo/cai.components 0.0.74 → 0.0.78

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

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

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

@@ -0,0 +1,139 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * <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>
+ *
+ *
+ * [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
+ */
+declare const ButtonToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonToggle = InstanceType<typeof ButtonToggle>;
+export default ButtonToggle;

package/dist/forms/button-toggle/ButtonToggleGroup.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ButtonToggleGroup;
+type ButtonToggleGroup = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ButtonToggleGroup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

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

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

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

package/dist/forms/button-toggle/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ButtonToggleGroup } from './ButtonToggleGroup.svelte';
+export { default as ButtonToggle } from './ButtonToggle.svelte';
+export { default as CheckIcon } from './CheckIcon.svelte';
+export { buttonToggleGroup, buttonToggle } from './theme.js';

package/dist/forms/button-toggle/index.js

@@ -0,0 +1,4 @@
+export { default as ButtonToggleGroup } from './ButtonToggleGroup.svelte';
+export { default as ButtonToggle } from './ButtonToggle.svelte';
+export { default as CheckIcon } from './CheckIcon.svelte';
+export { buttonToggleGroup, buttonToggle } from './theme.js';