@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/forms/FormCheckbox/FormCheckbox.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Checkbox, key, Label } from '../../index.js';
+	import type { FormCheckboxProps, FormSelectProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		disabled,
+		contextKey = null,
+		placeholder,
+		multiple = false,
+		onChange,
+		...otherProps
+	}: FormCheckboxProps = $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]);
+
+	function handleChange(e: Event) {
+		const value = (e.target as HTMLInputElement).checked;
+		setData({ ...$data, [name]: value });
+		if (onChange) onChange(e);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Checkbox {disabled} onchange={handleChange} {...otherProps} checked={value}
+		>{label}
+		{#if required}
+			<span class="pt-1 pl-1 text-red-500">*</span>
+		{/if}
+	</Checkbox>
+
+	{#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/FormCheckbox/FormCheckbox.svelte.d.ts

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

package/dist/forms/FormCheckbox/index.d.ts

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

package/dist/forms/FormCheckbox/index.js

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

package/dist/forms/FormDatepicker/FormDatepicker.svelte

@@ -0,0 +1,159 @@
+<script lang="ts" module>
+	/**
+	 * Converts a string to a Date object, handling multiple common formats
+	 * @param dateString - The string to convert to a date
+	 * @returns Date object or null if parsing fails
+	 */
+	export function stringToDate(dateString: string): Date | undefined {
+		if (!dateString) return undefined;
+
+		// Try ISO format first (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss)
+		let date = new Date(dateString);
+		if (!isNaN(date.getTime())) return date;
+
+		// Try common formats with different separators
+		const formats = [
+			// DD/MM/YYYY or MM/DD/YYYY
+			/(\d{1,2})[\/\-\.](\d{1,2})[\/\-\.](\d{4})/,
+			// YYYY/MM/DD
+			/(\d{4})[\/\-\.](\d{1,2})[\/\-\.](\d{1,2})/,
+			// Month name formats (MMM DD, YYYY)
+			/([A-Za-z]+)\s(\d{1,2}),?\s(\d{4})/,
+			// Unix timestamp (as string)
+			/^\d{10,13}$/
+		];
+
+		for (const regex of formats) {
+			const match = dateString.match(regex);
+			if (!match) continue;
+
+			if (regex === formats[3]) {
+				// Unix timestamp
+				const timestamp = parseInt(dateString);
+				return new Date(timestamp * (dateString.length === 10 ? 1000 : 1));
+			}
+
+			let day, month, year;
+			if (regex === formats[0]) {
+				// DD/MM/YYYY or MM/DD/YYYY
+				const first = parseInt(match[1]);
+				const second = parseInt(match[2]);
+
+				// Determine if format is DD/MM or MM/DD
+				if (first > 12) {
+					day = first;
+					month = second - 1;
+				} else if (second > 12) {
+					day = second;
+					month = first - 1;
+				} else {
+					// Ambiguous case, default to DD/MM
+					day = second;
+					month = first - 1;
+				}
+				year = parseInt(match[3]);
+			} else if (regex === formats[1]) {
+				// YYYY/MM/DD
+				year = parseInt(match[1]);
+				month = parseInt(match[2]) - 1;
+				day = parseInt(match[3]);
+			} else if (regex === formats[2]) {
+				// Month name
+				month = new Date(`${match[1]} 1, 2000`).getMonth();
+				day = parseInt(match[2]);
+				year = parseInt(match[3]);
+			}
+
+			date = new Date(year, month, day);
+			if (!isNaN(date.getTime())) return date;
+		}
+
+		// Try the Date constructor one more time in case of locale-specific formats
+		date = new Date(dateString);
+		return isNaN(date.getTime()) ? undefined : date;
+	}
+</script>
+
+<script lang="ts">
+	import { key, type DateOrRange, type FormDatepickerProps } from '../../index.js';
+	import { getContext } from 'svelte';
+	import Label from '../label/Label.svelte';
+	import Datepicker from '../datepicker/Datepicker.svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		disabled,
+		contextKey = null,
+		placeholder,
+		range,
+		locale,
+		dateFormat,
+		onchange,
+		...otherProps
+		// onchange,
+	}: FormDatepickerProps & { onchange?: (value: DateOrRange) => void } = $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 formatDate = (date?: Date): string => date?.toLocaleDateString(locale, dateFormat) ?? '';
+	const value = $derived($data[name] ? stringToDate($data[name]) : undefined);
+	const rangeDate = $derived(getRange());
+
+	function getRange() {
+		if (!range) return { from: undefined, to: undefined };
+		const splits = $data[name].split(' - ');
+		return {
+			from: stringToDate(splits[0]),
+			to: stringToDate(splits[1])
+		};
+	}
+
+	function handleChange(e: DateOrRange) {
+		if (!range) {
+			setData({ ...$data, [name]: formatDate(e as Date) });
+		} else if (typeof e === 'object' && 'from' in e && 'to' in e) {
+			const d = `${formatDate(e.from)} - ${formatDate(e.to)}`;
+			setData({ ...$data, [name]: d });
+		}
+		if (onchange) onchange(e);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<Datepicker
+		{disabled}
+		{range}
+		{value}
+		onselect={handleChange}
+		rangeFrom={rangeDate.from}
+		rangeTo={rangeDate.to}
+		{name}
+		{...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>

package/dist/forms/FormDatepicker/FormDatepicker.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts a string to a Date object, handling multiple common formats
+ * @param dateString - The string to convert to a date
+ * @returns Date object or null if parsing fails
+ */
+export declare function stringToDate(dateString: string): Date | undefined;
+import { type DateOrRange, type FormDatepickerProps } from '../../index.js';
+type $$ComponentProps = FormDatepickerProps & {
+    onchange?: (value: DateOrRange) => void;
+};
+declare const FormDatepicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormDatepicker = ReturnType<typeof FormDatepicker>;
+export default FormDatepicker;

package/dist/forms/FormDatepicker/index.d.ts

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

package/dist/forms/FormDatepicker/index.js

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

package/dist/forms/FormInput/FormInput.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" module>
+	function formatInput(value: string, type: string | null, pattern: string | null) {
+		if (!value) return '';
+		if (!type) return value;
+		switch (type) {
+			case 'number':
+				const v = +value;
+				if (isNaN(v)) return '';
+				return v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+			default:
+				return value;
+		}
+	}
+
+	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>
+
+<script lang="ts">
+	import { key, type FormInputProps } from '../../index.js';
+	import { getContext } from 'svelte';
+	import Input from '../input/Input.svelte';
+	import { nanoid } from 'nanoid';
+	import Label from '../label/Label.svelte';
+
+	let {
+		name = '',
+		label = '',
+		required,
+		readonly,
+		contextKey = null,
+		type = 'text',
+		pattern = null,
+		placeholder,
+		...otherProps
+	}: FormInputProps = $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]);
+	let id = nanoid();
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+	{#if readonly}
+		<div class="min-h-[42px] rounded-md border border-gray-300 bg-gray-100 p-2">
+			<span>{formatInput(getNestedValue($data, name) || '', type, pattern)}</span>
+		</div>
+	{:else}
+		<Input
+			{name}
+			{type}
+			{id}
+			{placeholder}
+			{readonly}
+			color={readonly ? 'gray' : hasError ? 'red' : isSuccess ? 'green' : 'default'}
+			value={getNestedValue($data, name) || ''}
+			{...otherProps}
+		/>
+	{/if}
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-9 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/FormInput/FormInput.svelte.d.ts

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

package/dist/forms/FormInput/index.d.ts

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

package/dist/forms/FormInput/index.js

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

package/dist/forms/FormRadio/FormRadio.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Checkbox, key, Label } from '../../index.js';
+	import type { FormCheckboxProps, FormRadioProps, FormSelectProps } from '../../types/index.js';
+	import { getContext } from 'svelte';
+	import Radio from '../radio/Radio.svelte';
+
+	let {
+		label = '',
+		required,
+		name,
+		disabled,
+		contextKey = null,
+		placeholder,
+		multiple = false,
+		onchange,
+		...otherProps
+	}: FormRadioProps<any> = $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]);
+
+	function handleChange(e: Event) {
+		const value = (e.target as HTMLInputElement).value;
+		setData({ ...$data, [name]: value });
+		if (onchange) onchange(e as any);
+	}
+</script>
+
+<div class="relative space-y-1">
+	<Radio {disabled} onchange={handleChange} {...otherProps} group={value}
+		>{label}
+		{#if required}
+			<span class="pt-1 pl-1 text-red-500">*</span>
+		{/if}
+		{#if hasError}
+			<Label
+				class="v-error-container absolute top-0 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}
+	</Radio>
+</div>

package/dist/forms/FormRadio/FormRadio.svelte.d.ts

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

package/dist/forms/FormRadio/index.d.ts

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

package/dist/forms/FormRadio/index.js

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

package/dist/forms/FormSelect/FormSelect.svelte

@@ -0,0 +1,86 @@
+<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 });
+		} else {
+			const d = e.map((a: any) => a.value);
+			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}
+		{...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/FormSelect/FormSelect.svelte.d.ts

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

package/dist/forms/FormSelect/index.d.ts

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

package/dist/forms/FormSelect/index.js

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

package/dist/forms/FormTextarea/FormTextarea.svelte

@@ -0,0 +1,77 @@
+<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}
+		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/FormTextarea/FormTextarea.svelte.d.ts

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

package/dist/forms/FormTextarea/index.d.ts

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

package/dist/forms/FormTextarea/index.js

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

package/dist/forms/checkbox/Checkbox.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import clsx from 'clsx';
+	import { checkbox } from './index.js';
+	import { Label, type CheckboxItem, type CheckboxProps } from '../../index.js';
+
+	let {
+		children,
+		color = 'primary',
+		custom,
+		inline,
+		tinted,
+		rounded,
+		group = $bindable([]),
+		choices = [],
+		checked = $bindable(false),
+		indeterminate,
+		classes,
+		class: className,
+		divClass,
+		disabled = false,
+		value,
+		labelProps = {},
+		...restProps
+	}: CheckboxProps = $props();
+
+	warnThemeDeprecation('Checkbox', { divClass }, { divClass: 'div' });
+	const styling = $derived(classes ?? { div: divClass });
+
+	const theme = getTheme('checkbox');
+
+	const disabledValue = $derived(disabled === null ? undefined : disabled);
+	const { base, div: divStyle } = $derived(
+		checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue })
+	);
+
+	// Separate label rendering logic
+	function renderLabel(choice?: CheckboxItem) {
+		if (!choice) return '';
+
+		if (children) {
+			return children(choice);
+		}
+		return choice.label || '';
+	}
+</script>
+
+{#if choices.length > 0}
+	{#each choices as choice, i}
+		<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+			<Label show={true} {...labelProps}>
+				<input
+					type="checkbox"
+					value={choice.value}
+					checked={choice.checked ?? false}
+					{disabled}
+					bind:group
+					{...restProps}
+					class={base({ class: clsx(theme?.base, className) })}
+				/>
+				{renderLabel(choice)}
+			</Label>
+		</div>
+	{/each}
+{:else}
+	<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+		<Label show={true} {...labelProps}>
+			<input
+				type="checkbox"
+				{value}
+				bind:checked
+				{indeterminate}
+				{disabled}
+				{...restProps}
+				class={base({ class: clsx(theme?.base, className) })}
+			/>
+			{#if children}
+				{@render children({ value, checked, disabled })}
+			{/if}
+		</Label>
+	</div>
+{/if}