@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/ui/drawer/Drawer.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import clsx, { type ClassValue } from 'clsx';
+	import { fly } from 'svelte/transition';
+	import { sineIn } from 'svelte/easing';
+	import { drawer } from './index.js';
+	import { CloseButton } from '../../utils/closeButton/index.js';
+	import { createDismissableContext } from '../../utils/dismissable.js';
+	import { trapFocus } from '../../utils/index.js';
+	import { type ParamsType, type DrawerProps } from '../../index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+
+	let {
+		children,
+		onaction = () => true,
+		oncancel,
+		onsubmit,
+		ontoggle,
+		onclose,
+		form = false,
+		hidden = $bindable(),
+		activateClickOutside = true,
+		position,
+		width,
+		size, // NEW: Added size prop
+		backdrop = true,
+		backdropClass,
+		placement = 'left',
+		class: className,
+		classes,
+		transitionParams,
+		transitionType = fly,
+		bodyScrolling = false,
+		dismissable = true,
+		closeBtnClass,
+		headerClass,
+		bodyClass,
+		footerClass,
+		header,
+		footer,
+		title,
+		permanent = false,
+		autoclose = false,
+		...restProps
+	}: DrawerProps = $props();
+
+	warnThemeDeprecation(
+		'Drawer',
+		{ backdropClass, headerClass, bodyClass, footerClass, closeBtnClass },
+		{
+			backdropClass: 'backdrop',
+			bodyClass: 'body',
+			headerClass: 'header',
+			footerClass: 'footer',
+			closeBtnClass: 'close'
+		}
+	);
+	const styling = $derived(
+		classes ?? {
+			backdrop: backdropClass,
+			header: headerClass,
+			body: bodyClass,
+			footer: footerClass,
+			close: closeBtnClass
+		}
+	);
+
+	const theme = getTheme('drawer');
+
+	const {
+		base,
+		backdrop: backdropCls,
+		header: headerCls,
+		body,
+		footer: footerCls,
+		close: closeCls,
+		form: formCls
+	} = $derived(
+		drawer({
+			position,
+			placement,
+			width,
+			size, // NEW: Pass size to drawer function
+			backdrop
+		})
+	);
+
+	let innerWidth: number = $state(-1);
+	let innerHeight: number = $state(-1);
+
+	// Updated x and y calculations to consider different sizes
+	let x = $derived(() => {
+		if (placement === 'left') return -320;
+		if (placement === 'right') return innerWidth + 320;
+		return undefined;
+	});
+
+	let y = $derived(() => {
+		if (placement === 'top') return -100;
+		if (placement === 'bottom') return innerHeight + 100;
+		return undefined;
+	});
+
+	let transition_params = $derived(Object.assign({}, { x, y, duration: 200, easing: sineIn }));
+
+	let ref: HTMLDivElement | undefined = $state(undefined);
+
+	function close(ev: MouseEvent) {
+		if (ref?.dispatchEvent(new Event('close', { bubbles: true, cancelable: true }))) {
+			hidden = true;
+		}
+	}
+
+	function _oncancel(ev: Event & { currentTarget: HTMLDivElement }) {
+		if (ev.target !== ev.currentTarget) {
+			return; // ignore if not on drawer
+		}
+
+		oncancel?.(ev);
+		if (ev.defaultPrevented) return;
+
+		ev.preventDefault();
+		if (!permanent) hidden = true;
+	}
+
+	function _onclick(ev: Event & { currentTarget: HTMLDivElement }) {
+		const drawer: HTMLDivElement = ev.currentTarget;
+		if (activateClickOutside && ev.target === drawer) {
+			return close(ev as unknown as MouseEvent);
+		}
+
+		if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
+			return (hidden = true);
+		}
+	}
+
+	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLFormElement }) {
+		onsubmit?.(ev as any);
+		if (ev.defaultPrevented) return;
+
+		ev.preventDefault();
+
+		const mainForm = ev.currentTarget;
+		let returnValue = '';
+
+		// Find all nested forms within the main form
+		const nestedForms = mainForm.querySelectorAll('form');
+		const combinedFormData = new FormData();
+
+		// Add data from main form (excluding nested forms)
+		new FormData(mainForm).forEach((value, key) => {
+			combinedFormData.append(key, value);
+		});
+
+		// Add data from all nested forms
+		nestedForms.forEach((nestedForm) => {
+			new FormData(nestedForm).forEach((value, key) => {
+				combinedFormData.append(key, value);
+			});
+		});
+
+		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
+			returnValue = ev.submitter.value;
+		}
+
+		if (!returnValue) {
+			return (hidden = true);
+		}
+
+		if (
+			typeof onaction === 'function' &&
+			onaction({ action: returnValue, data: combinedFormData }) === false
+		) {
+			return;
+		}
+
+		// hidden = true;
+	}
+
+	createDismissableContext(close);
+</script>
+
+<svelte:window bind:innerWidth bind:innerHeight />
+
+{#snippet content()}
+	<div class="flex h-screen flex-col">
+		{#if title || header}
+			<div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
+				{#if title}
+					<h3 class="text-base">{title}</h3>
+					{#if dismissable && !permanent}
+						<CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+					{/if}
+				{:else if header}
+					{@render header()}
+				{/if}
+			</div>
+		{/if}
+		<div class="h-full flex-grow overflow-y-auto overscroll-contain">
+			<div class={body({ class: clsx(theme?.body, styling.body) })}>
+				{@render children?.()}
+			</div>
+		</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}
+	</div>
+{/snippet}
+
+{#if !hidden}
+	<div
+		role="presentation"
+		bind:this={ref}
+		class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })}
+		onclick={activateClickOutside ? close : undefined}
+		style={bodyScrolling ? 'pointer-events: none;' : ''}
+	></div>
+	<div
+		use:trapFocus={{ onEscape: close as () => void }}
+		{...restProps}
+		class={base({ class: clsx(theme?.base, className) })}
+		transition:transitionType={transitionParams
+			? transitionParams
+			: (transition_params as ParamsType)}
+		tabindex="-1"
+		onclick={_onclick}
+	>
+		{#if form}
+			<form method="dialog" onsubmit={_onsubmit} class={formCls({ class: clsx(theme?.form) })}>
+				{@render content()}
+			</form>
+		{:else}
+			{@render content()}
+		{/if}
+	</div>
+{/if}
+
+<!--
+@component
+## Props
+@prop children
+@prop onaction = () => true
+@prop oncancel
+@prop onsubmit
+@prop ontoggle
+@prop form = false
+@prop hidden = $bindable()
+@prop activateClickOutside = true
+@prop position
+@prop width
+@prop size // NEW: Added size prop documentation
+@prop backdrop = true
+@prop backdropClass
+@prop placement = "left"
+@prop class: className
+@prop classes
+@prop transitionParams
+@prop transitionType = fly
+@prop bodyScrolling = false
+@prop dismissable = true
+@prop closeBtnClass
+@prop headerClass
+@prop bodyClass
+@prop footerClass
+@prop header
+@prop footer
+@prop title
+@prop permanent = false
+@prop autoclose = false
+@prop ...restProps
+-->

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type DrawerProps } from '../../index.js';
+/**
+ * ## Props
+ * @prop children
+ * @prop onaction = () => true
+ * @prop oncancel
+ * @prop onsubmit
+ * @prop ontoggle
+ * @prop form = false
+ * @prop hidden = $bindable()
+ * @prop activateClickOutside = true
+ * @prop position
+ * @prop width
+ * @prop size // NEW: Added size prop documentation
+ * @prop backdrop = true
+ * @prop backdropClass
+ * @prop placement = "left"
+ * @prop class: className
+ * @prop classes
+ * @prop transitionParams
+ * @prop transitionType = fly
+ * @prop bodyScrolling = false
+ * @prop dismissable = true
+ * @prop closeBtnClass
+ * @prop headerClass
+ * @prop bodyClass
+ * @prop footerClass
+ * @prop header
+ * @prop footer
+ * @prop title
+ * @prop permanent = false
+ * @prop autoclose = false
+ * @prop ...restProps
+ */
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "hidden">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

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

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

package/dist/ui/drawer/index.js

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

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

@@ -0,0 +1,211 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type DrawerVariants = VariantProps<typeof drawer> & Classes<typeof drawer>;
+export declare const drawer: import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+            backdrop: string;
+        };
+        absolute: {
+            base: string;
+            backdrop: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    header: string;
+    close: string;
+    body: string;
+    footer: string;
+    form: string;
+}, undefined, {
+    position: {
+        fixed: {
+            base: string;
+            backdrop: string;
+        };
+        absolute: {
+            base: string;
+            backdrop: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    header: string;
+    close: string;
+    body: string;
+    footer: string;
+    form: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        fixed: {
+            base: string;
+            backdrop: string;
+        };
+        absolute: {
+            base: string;
+            backdrop: string;
+        };
+    };
+    placement: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+        top: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+    };
+    width: {
+        default: {
+            base: string;
+        };
+        full: {
+            base: string;
+        };
+        half: {
+            base: string;
+        };
+    };
+    size: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        '2xl': {
+            base: string;
+        };
+        '3xl': {
+            base: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+}, {
+    base: string;
+    backdrop: string;
+    header: string;
+    close: string;
+    body: string;
+    footer: string;
+    form: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/ui/drawer/theme.js

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+export const drawer = tv({
+    slots: {
+        base: 'z-50 bg-white dark:bg-gray-800',
+        backdrop: 'fixed top-0 start-0 z-50 w-full h-full',
+        header: 'flex items-center justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white px-4 py-2 border-b',
+        close: 'absolute top-3 end-2.5',
+        body: 'p-4 md:p-5 space-y-4',
+        footer: 'flex items-center p-3 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0 bg-gray-100',
+        form: 'flex flex-col divide-y'
+    },
+    variants: {
+        position: {
+            fixed: { base: 'fixed', backdrop: 'fixed' },
+            absolute: { base: 'absolute', backdrop: 'absolute' }
+        },
+        placement: {
+            left: { base: 'inset-y-0 start-0' },
+            right: { base: 'inset-y-0 end-0' },
+            top: { base: 'inset-x-0 top-0' },
+            bottom: { base: 'inset-x-0 bottom-0' }
+        },
+        width: {
+            default: { base: 'w-80' },
+            full: { base: 'w-full' },
+            half: { base: 'w-1/2' }
+        },
+        size: {
+            sm: { base: 'w-64' },
+            md: { base: 'w-80' },
+            lg: { base: 'w-96' },
+            xl: { base: 'w-[32rem]' },
+            '2xl': { base: 'w-[40rem]' },
+            '3xl': { base: 'w-[48rem]' }
+        },
+        backdrop: {
+            true: { backdrop: 'bg-gray-900 opacity-75' }
+        }
+    },
+    defaultVariants: {
+        position: 'fixed',
+        placement: 'left',
+        width: 'default',
+        size: 'md'
+    }
+});

package/dist/ui/dropdown/Dropdown.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import { setContext } from 'svelte';
+	import { dropdown, DropdownGroup } from './index.js';
+	import Popper from '../../utils/Popper.svelte';
+	import { type DropdownProps } from '../../index.js';
+
+	let {
+		children,
+		simple = false,
+		placement = 'bottom',
+		offset = 2,
+		class: className,
+		activeUrl = '',
+		isOpen = $bindable(false),
+		...restProps
+	}: DropdownProps = $props();
+
+	const base = $derived(dropdown({ class: clsx(dropdown, className) }));
+	const activeUrlStore = $state({ value: '' });
+	setContext('activeUrl', activeUrlStore);
+
+	$effect(() => {
+		activeUrlStore.value = activeUrl ?? '';
+	});
+</script>
+
+<Popper {...restProps} {placement} {offset} bind:isOpen class={base}>
+	{#if simple}
+		<DropdownGroup>
+			{@render children()}
+		</DropdownGroup>
+	{:else}
+		{@render children()}
+	{/if}
+</Popper>

package/dist/ui/dropdown/Dropdown.svelte.d.ts

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

package/dist/ui/dropdown/DropdownDivider.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import { dropdownDivider } from './index.js';
+	import { getTheme } from '../../themes/themeUtils.js';
+	import type { DropdownDividerProps } from '../../index.js';
+
+	let { class: className, ...restProps }: DropdownDividerProps = $props();
+	const theme = getTheme('dropdownDivider');
+</script>
+
+<div {...restProps} class={dropdownDivider({ class: clsx(theme, className) })}></div>

package/dist/ui/dropdown/DropdownDivider.svelte.d.ts

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

package/dist/ui/dropdown/DropdownGroup.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { dropdownGroup } from './index.js';
+	import clsx from 'clsx';
+	import { getTheme } from '../../themes/themeUtils.js';
+	import type { DropdownGroupProps } from '../../index.js';
+
+	let { children, class: className, ...restProps }: DropdownGroupProps = $props();
+
+	const theme = getTheme('dropdownGroup');
+</script>
+
+<ul {...restProps} class={dropdownGroup({ class: clsx(theme, className) })}>
+	{@render children()}
+</ul>

package/dist/ui/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/ui/dropdown/DropdownHeader.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { dropdownHeader } from './index.js';
+	import clsx from 'clsx';
+	import { getTheme } from '../../themes/themeUtils.js';
+	import type { DropdownHeaderProps } from '../../index.js';
+
+	let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
+
+	const theme = getTheme('dropdownHeader');
+</script>
+
+<div {...restProps} class={dropdownHeader({ class: clsx(theme, className) })}>
+	{@render children()}
+</div>

package/dist/ui/dropdown/DropdownHeader.svelte.d.ts

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