@rkosafo/cai.components 0.0.1 → 0.0.5

package/dist/forms/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,41 @@
+import { type DatepickerProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
+ * ## Props
+ * @prop value = $bindable()
+ * @prop defaultDate = null
+ * @prop range = false
+ * @prop rangeFrom = $bindable()
+ * @prop rangeTo = $bindable()
+ * @prop availableFrom = null
+ * @prop availableTo = null
+ * @prop locale = "default"
+ * @prop translationLocale = locale
+ * @prop firstDayOfWeek = 0
+ * @prop dateFormat
+ * @prop placeholder = "Select date"
+ * @prop disabled = false
+ * @prop required = false
+ * @prop inputClass = ""
+ * @prop color = "primary"
+ * @prop inline = false
+ * @prop autohide = true
+ * @prop showActionButtons = false
+ * @prop title = ""
+ * @prop onselect
+ * @prop onclear
+ * @prop onapply
+ * @prop btnClass
+ * @prop inputmode = "none"
+ * @prop classes
+ * @prop monthColor = "alternative"
+ * @prop monthBtnSelected = "bg-primary-500 text-white"
+ * @prop monthBtn = "text-gray-700 dark:text-gray-300"
+ * @prop class: className
+ * @prop elementRef = $bindable()
+ */
+declare const Datepicker: import("svelte").Component<DatepickerProps, {}, "value" | "elementRef" | "rangeFrom" | "rangeTo">;
+type Datepicker = ReturnType<typeof Datepicker>;
+export default Datepicker;

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

@@ -0,0 +1,2 @@
+export { default as Datepicker } from "./Datepicker.svelte";
+export { datepicker } from "./theme.js";

package/dist/forms/datepicker/index.js

@@ -0,0 +1,2 @@
+export { default as Datepicker } from "./Datepicker.svelte";
+export { datepicker } from "./theme.js";

package/dist/forms/datepicker/theme.d.ts

@@ -0,0 +1,385 @@
+import type { Classes } from "../../themes/themeUtils.js";
+import { type VariantProps } from "tailwind-variants";
+export type DatepickerVariants = VariantProps<typeof datepicker> & Classes<typeof datepicker>;
+export declare const datepicker: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+    unavailable: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    polite: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+    monthButton: string;
+}, undefined, {
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+    unavailable: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    polite: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+    monthButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+            dayButton: string;
+        };
+        blue: {
+            input: string;
+            dayButton: string;
+        };
+        red: {
+            input: string;
+            dayButton: string;
+        };
+        green: {
+            input: string;
+            dayButton: string;
+        };
+        yellow: {
+            input: string;
+            dayButton: string;
+        };
+        purple: {
+            input: string;
+            dayButton: string;
+        };
+        dark: {
+            input: string;
+            dayButton: string;
+        };
+        light: {
+            input: string;
+            dayButton: string;
+        };
+        alternative: {
+            input: string;
+            dayButton: string;
+        };
+        secondary: {
+            input: string;
+            dayButton: string;
+        };
+        gray: {
+            input: string;
+            dayButton: string;
+        };
+        orange: {
+            input: string;
+            dayButton: string;
+        };
+        amber: {
+            input: string;
+            dayButton: string;
+        };
+        lime: {
+            input: string;
+            dayButton: string;
+        };
+        emerald: {
+            input: string;
+            dayButton: string;
+        };
+        teal: {
+            input: string;
+            dayButton: string;
+        };
+        cyan: {
+            input: string;
+            dayButton: string;
+        };
+        sky: {
+            input: string;
+            dayButton: string;
+        };
+        indigo: {
+            input: string;
+            dayButton: string;
+        };
+        violet: {
+            input: string;
+            dayButton: string;
+        };
+        fuchsia: {
+            input: string;
+            dayButton: string;
+        };
+        pink: {
+            input: string;
+            dayButton: string;
+        };
+        rose: {
+            input: string;
+            dayButton: string;
+        };
+    };
+    inline: {
+        false: {
+            base: string;
+        };
+    };
+    current: {
+        true: {
+            dayButton: string;
+        };
+    };
+    today: {
+        true: {
+            dayButton: string;
+        };
+    };
+    unavailable: {
+        true: {
+            dayButton: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    titleVariant: string;
+    polite: string;
+    button: string;
+    actionButtons: string;
+    columnHeader: string;
+    grid: string;
+    nav: string;
+    dayButton: string;
+    monthButton: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/datepicker/theme.js

@@ -0,0 +1,56 @@
+import { tv } from "tailwind-variants";
+export const datepicker = tv({
+    slots: {
+        base: "inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4",
+        input: "w-full border-gray-300 rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50",
+        titleVariant: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
+        polite: "text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
+        button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
+        actionButtons: "mt-4 flex justify-between",
+        columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+        grid: "grid grid-cols-7 gap-1 w-64",
+        nav: "mb-4 flex items-center justify-between",
+        dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0",
+        monthButton: "rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700"
+    },
+    variants: {
+        color: {
+            primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-100 dark:bg-primary-900" },
+            blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-100 dark:bg-blue-900" },
+            red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-100 dark:bg-red-900" },
+            green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-100 dark:bg-green-900" },
+            yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-100 dark:bg-yellow-900" },
+            purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-100 dark:bg-purple-900" },
+            dark: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
+            light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
+            alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-100 dark:bg-alternative-900" },
+            secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-100 dark:bg-secondary-900" },
+            gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
+            orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-100 dark:bg-orange-900" },
+            amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-100 dark:bg-amber-900" },
+            lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-100 dark:bg-lime-900" },
+            emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-100 dark:bg-emerald-900" },
+            teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-100 dark:bg-teal-900" },
+            cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-100 dark:bg-cyan-900" },
+            sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-100 dark:bg-sky-900" },
+            indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-100 dark:bg-indigo-900" },
+            violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-100 dark:bg-violet-900" },
+            fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-100 dark:bg-fuchsia-900" },
+            pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-100 dark:bg-pink-900" },
+            rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-100 dark:bg-rose-900" }
+        },
+        inline: {
+            false: { base: "absolute z-10 mt-1" }
+        },
+        current: {
+            true: { dayButton: "text-gray-400 dark:text-gray-500" }
+        },
+        today: {
+            true: { dayButton: "font-bold" }
+        },
+        unavailable: {
+            true: { dayButton: "opacity-50 cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-700" }
+        }
+    },
+    compoundVariants: []
+});

package/dist/forms/form/Form.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { createForm } from 'felte';
+	import { setContext } from 'svelte';
+	import { key } from './index.js';
+	import type { FormProps } from '../../index.js';
+	import { validator } from '@felte/validator-zod';
+	import * as z from 'zod';
+
+	let {
+		transform = (values: any) => values,
+		initialValues = {},
+		validators = [],
+		contextKey = null,
+		onSubmit,
+		onChange,
+		children,
+		schema = z.object({}),
+		...restProps
+	}: FormProps = $props();
+
+	// Initialize form and data using the provided props
+	const formInfo = createForm({
+		onSubmit: (values: any, context: any) => {
+			if (onSubmit) onSubmit({ values, context });
+		},
+		extend: [validator({ schema })],
+		transform,
+		initialValues,
+		// onChange
+	});
+
+	// Set the formInfo context
+	setContext(key, formInfo);
+	if (contextKey) {
+		setContext(contextKey, formInfo);
+	}
+
+	// Extract form elements from formInfo
+	const { form, data, setFields, isValid } = formInfo;
+
+	// Reactive subscription to data changes
+	$effect(() => {
+		const currentValues = $data;
+		if (onChange) {
+			onChange({
+				values: currentValues,
+				isValid: $isValid,
+				form: formInfo
+			});
+		}
+	});
+
+	// // Dispatch 'ready' event when component mounts
+	// $effect.pre(() => {
+	// 	dispatch('ready', formInfo);
+	// });
+
+	// Define the updateWith function
+	export const updateWith = (newData: any) => {
+		Object.keys(newData).forEach((k) => {
+			setFields(k, newData[k]);
+		});
+	};
+
+</script>
+
+<form use:form {...restProps}>
+	{@render children({ initialValues, isValid: $isValid, values: $data })}
+</form>

package/dist/forms/form/Form.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { FormProps } from '../../index.js';
+declare const Form: import("svelte").Component<FormProps, {
+    updateWith: (newData: any) => void;
+}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

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

@@ -0,0 +1,2 @@
+export declare const key: {};
+export { default as Form } from './Form.svelte';

package/dist/forms/form/index.js

@@ -0,0 +1,2 @@
+export const key = {};
+export { default as Form } from './Form.svelte';