@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/ui/drawer/Drawer.svelte

@@ -1,280 +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
--->
+<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/dropdown/Dropdown.svelte

@@ -1,36 +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>
+<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/DropdownDivider.svelte

@@ -1,11 +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>
+<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/DropdownGroup.svelte

@@ -1,14 +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>
+<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>