@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/ui/indicator/theme.d.ts

@@ -0,0 +1,177 @@
+import { type VariantProps } from "tailwind-variants";
+export type IndicatorVariants = VariantProps<typeof indicator>;
+export declare const indicator: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: {};
+    };
+    hasChildren: {
+        true: string;
+        false: {};
+    };
+    placement: {
+        default: string;
+        "top-left": string;
+        "top-center": string;
+        "top-right": string;
+        "center-left": string;
+        center: string;
+        "center-right": string;
+        "bottom-left": string;
+        "bottom-center": string;
+        "bottom-right": string;
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, undefined, "shrink-0", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: {};
+    };
+    hasChildren: {
+        true: string;
+        false: {};
+    };
+    placement: {
+        default: string;
+        "top-left": string;
+        "top-center": string;
+        "top-right": string;
+        "center-left": string;
+        center: string;
+        "center-right": string;
+        "bottom-left": string;
+        "bottom-center": string;
+        "bottom-right": string;
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    cornerStyle: {
+        rounded: string;
+        circular: string;
+    };
+    border: {
+        true: string;
+        false: {};
+    };
+    hasChildren: {
+        true: string;
+        false: {};
+    };
+    placement: {
+        default: string;
+        "top-left": string;
+        "top-center": string;
+        "top-right": string;
+        "center-left": string;
+        center: string;
+        "center-right": string;
+        "bottom-left": string;
+        "bottom-center": string;
+        "bottom-right": string;
+    };
+    offset: {
+        true: {};
+        false: {};
+    };
+}, undefined, "shrink-0", unknown, unknown, undefined>>;

package/dist/ui/indicator/theme.js

@@ -0,0 +1,114 @@
+import { tv } from "tailwind-variants";
+export const indicator = tv({
+    base: "shrink-0",
+    variants: {
+        color: {
+            // 'primary' secondary 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: "bg-primary-500",
+            secondary: "bg-secondary-500",
+            gray: "bg-gray-200",
+            red: "bg-red-500",
+            orange: "bg-orange-600",
+            amber: "bg-amber-500",
+            yellow: "bg-yellow-300",
+            lime: "bg-lime-500",
+            green: "bg-green-500",
+            emerald: "bg-emerald-500",
+            teal: "bg-teal-500",
+            cyan: "bg-cyan-500",
+            sky: "bg-sky-500",
+            blue: "bg-blue-500",
+            indigo: "bg-indigo-500",
+            violet: "bg-violet-500",
+            purple: "bg-purple-500",
+            fuchsia: "bg-fuchsia-500",
+            pink: "bg-pink-500",
+            rose: "bg-rose-500"
+        },
+        size: {
+            xs: "w-2 h-2",
+            sm: "w-2.5 h-2.5",
+            md: "w-3 h-3",
+            lg: "w-3.5 h-3.5",
+            xl: "w-6 h-6"
+        },
+        cornerStyle: {
+            rounded: "rounded-sm",
+            circular: "rounded-full"
+        },
+        border: {
+            true: "border border-gray-300 dark:border-gray-300",
+            false: {}
+        },
+        hasChildren: {
+            true: "inline-flex items-center justify-center",
+            false: {}
+        },
+        placement: {
+            default: "",
+            "top-left": "absolute top-0 start-0",
+            "top-center": "absolute top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+            "top-right": "absolute top-0 end-0",
+            "center-left": "absolute top-1/2 -translate-y-1/2 start-0",
+            center: "absolute top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+            "center-right": "absolute top-1/2 -translate-y-1/2 end-0",
+            "bottom-left": "absolute bottom-0 start-0",
+            "bottom-center": "absolute bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2",
+            "bottom-right": "absolute bottom-0 end-0"
+        },
+        offset: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            placement: "top-left",
+            offset: true,
+            class: "-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3"
+        },
+        {
+            placement: "top-center",
+            offset: true,
+            class: "-translate-y-1/3"
+        },
+        {
+            placement: "top-right",
+            offset: true,
+            class: "translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3"
+        },
+        {
+            placement: "center-left",
+            offset: true,
+            class: "-translate-x-1/3 rtl:translate-x-1/3"
+        },
+        {
+            placement: "center-right",
+            offset: true,
+            class: "translate-x-1/3 rtl:-translate-x-1/3"
+        },
+        {
+            placement: "bottom-left",
+            offset: true,
+            class: "-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3"
+        },
+        {
+            placement: "bottom-center",
+            offset: true,
+            class: "translate-y-1/3"
+        },
+        {
+            placement: "bottom-right",
+            offset: true,
+            class: "translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3"
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        size: "md",
+        cornerStyle: "circular",
+        border: false,
+        offset: true,
+        hasChildren: false
+    }
+});

package/dist/ui/modal/Modal.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import clsx, { type ClassValue } from 'clsx';
+	import { sineIn } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+	import { modal as modalStyle } from './index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { createDismissableContext } from '../../utils/dismissable.js';
+	import { CloseButton } from '../../utils/closeButton/index.js';
+	import type { ModalProps, ParamsType, TransitionFunc } from '../../types/index.js';
+	import { trapFocus } from '../../utils/action.js';
+
+	let {
+		children,
+		onaction = () => true,
+		oncancel,
+		onsubmit,
+		ontoggle,
+		form = false,
+		modal = true,
+		autoclose = false,
+		focustrap = false,
+		header,
+		footer,
+		title,
+		open = $bindable(false),
+		permanent = false,
+		dismissable = true,
+		closeBtnClass,
+		headerClass,
+		bodyClass,
+		footerClass,
+		outsideclose = true,
+		size = 'md',
+		placement,
+		class: className,
+		classes,
+		params,
+		transition = fade,
+		fullscreen = false,
+		...restProps
+	}: ModalProps = $props();
+
+	// form, header, footer, body, close
+	warnThemeDeprecation(
+		'Modal',
+		{ headerClass, bodyClass, footerClass, closeBtnClass },
+		{ bodyClass: 'body', headerClass: 'header', footerClass: 'footer', closeBtnClass: 'close' }
+	);
+	const styling = $derived(
+		classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass }
+	);
+
+	const theme = getTheme('modal');
+
+	const paramsDefault = { duration: 100, easing: sineIn };
+	const paramsOptions = $derived(params ?? paramsDefault);
+
+	const {
+		base,
+		form: formCls,
+		header: headerCls,
+		footer: footerCls,
+		body,
+		close: closeCls
+	} = $derived(modalStyle({ placement, size }));
+
+	const close = (dlg: HTMLDialogElement) => (open = false);
+	// @ts-expect-error: dlg.requestClose may not be supported
+	const cancel = (dlg: HTMLDialogElement) =>
+		typeof dlg.requestClose === 'function' ? dlg.requestClose() : close();
+
+	function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
+		if (ev.target !== ev.currentTarget) {
+			return; // ignore if not on dialog
+		}
+
+		// this event gets called when user canceled the dialog:
+		// pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+		oncancel?.(ev);
+		if (ev.defaultPrevented) return;
+
+		ev.preventDefault(); // prevent anyway, we need clean close
+		if (!permanent) close(ev.currentTarget);
+	}
+
+	function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
+		const dlg: HTMLDialogElement = ev.currentTarget;
+		if (outsideclose && ev.target === dlg) {
+			return cancel(dlg);
+		}
+
+		if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
+			return close(dlg);
+		}
+	}
+
+	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+		// When dialog contains the <form method="dialog"> and when child with type="submit" was pressed
+
+		onsubmit?.(ev);
+		if (ev.defaultPrevented) return;
+
+		ev.preventDefault(); // stop dialog.close()
+
+		const dlg: HTMLDialogElement = ev.currentTarget;
+
+		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
+			dlg.returnValue = ev.submitter.value;
+		}
+
+		if (!dlg.returnValue) {
+			return cancel(dlg); // if no action - treat that as cancel
+		}
+
+		// MAIN APPROACH: Use only the first nested form's data
+		let formData: FormData;
+		const nestedForms = dlg.querySelectorAll('form');
+
+		if (nestedForms.length > 0) {
+			// Use the first nested form (assuming it contains the input fields)
+			formData = new FormData(nestedForms[0]);
+		} else {
+			// Fallback: use the target form if no nested forms found
+			formData = new FormData(ev.target as HTMLFormElement);
+		}
+
+		// ALTERNATIVE APPROACH: Combine data from all nested forms (uncomment to use)
+
+		const combinedFormData = new FormData();
+		const allForms = dlg.querySelectorAll('form');
+
+		allForms.forEach((form) => {
+			new FormData(form).forEach((value, key) => {
+				combinedFormData.append(key, value);
+			});
+		});
+
+		// Use the alternative approach
+		formData = combinedFormData;
+
+		// explicit false from onaction blocks the form closing
+		if (
+			typeof onaction === 'function' &&
+			onaction({ action: dlg.returnValue, data: formData }) === false
+		)
+			return;
+
+		close(dlg);
+	}
+
+	function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
+		ontoggle?.(ev);
+		open = ev.newState === 'open'; // for cases when toggle by other means
+	}
+
+	function init(dlg: HTMLDialogElement) {
+		modal ? dlg.showModal() : dlg.show();
+		return () => dlg.close();
+	}
+
+	const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
+
+	let ref: HTMLDialogElement | undefined = $state(undefined);
+
+	function close_handler(ev: MouseEvent) {
+		if (form) {
+			// dialog/form mechanism will close the dialog
+			return;
+		}
+
+		ref?.dispatchEvent(new Event('cancel', { bubbles: true, cancelable: true }));
+	}
+
+	createDismissableContext(close_handler);
+</script>
+
+{#snippet content()}
+	{#if title || header}
+		<div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
+			{#if title}
+				<h3>{title}</h3>
+				{#if dismissable && !permanent}
+					<CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+				{/if}
+			{:else if header}
+				{@render header()}
+			{/if}
+		</div>
+	{/if}
+	<div class={body({ class: clsx(theme?.body, styling.body) })}>
+		{@render children?.()}
+	</div>
+	{#if footer}
+		<div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
+			{@render footer()}
+		</div>
+	{/if}
+	{#if dismissable && !permanent && !title}
+		<CloseButton
+			type="submit"
+			formnovalidate
+			class={closeCls({ class: clsx(theme?.close, styling.close) })}
+		/>
+	{/if}
+{/snippet}
+
+{#if open}
+	<dialog
+		{@attach init}
+		bind:this={ref}
+		use:focusTrap
+		class={base({ fullscreen, class: clsx(theme?.base, className) })}
+		tabindex="-1"
+		onsubmit={_onsubmit}
+		oncancel={_oncancel}
+		onclick={_onclick}
+		ontoggle={_ontoggle}
+		transition:transition|global={paramsOptions as ParamsType}
+		{...restProps}
+	>
+		{#if form}
+			<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
+				{@render content()}
+			</form>
+		{:else}
+			{@render content()}
+		{/if}
+	</dialog>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
+## Props
+@prop children
+@prop onaction = ()
+@prop oncancel
+@prop onsubmit
+@prop ontoggle
+@prop form = false
+@prop modal = true
+@prop autoclose = false
+@prop focustrap = false
+@prop header
+@prop footer
+@prop title
+@prop open = $bindable(false)
+@prop permanent = false
+@prop dismissable = true
+@prop closeBtnClass
+@prop headerClass
+@prop bodyClass
+@prop footerClass
+@prop outsideclose = true
+@prop size = "md"
+@prop placement
+@prop class: className
+@prop classes
+@prop params
+@prop transition = fade
+@prop fullscreen = false
+@prop ...restProps
+-->

package/dist/ui/modal/Modal.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { ModalProps } from '../../types/index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
+ * ## Props
+ * @prop children
+ * @prop onaction = ()
+ * @prop oncancel
+ * @prop onsubmit
+ * @prop ontoggle
+ * @prop form = false
+ * @prop modal = true
+ * @prop autoclose = false
+ * @prop focustrap = false
+ * @prop header
+ * @prop footer
+ * @prop title
+ * @prop open = $bindable(false)
+ * @prop permanent = false
+ * @prop dismissable = true
+ * @prop closeBtnClass
+ * @prop headerClass
+ * @prop bodyClass
+ * @prop footerClass
+ * @prop outsideclose = true
+ * @prop size = "md"
+ * @prop placement
+ * @prop class: className
+ * @prop classes
+ * @prop params
+ * @prop transition = fade
+ * @prop fullscreen = false
+ * @prop ...restProps
+ */
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/ui/modal/index.d.ts

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

package/dist/ui/modal/index.js

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