yaxa-svelte 1.8.0 → 1.9.0

package/dist/components/elements/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Badge.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { badgeVariants } from './Badge.svelte';
+describe('Badge Component', () => {
+    it('generates solid primary badge classes by default', () => {
+        const classes = badgeVariants({ variant: 'solid', color: 'primary' });
+        expect(classes).toContain('bg-primary-600');
+        expect(classes).toContain('inline-flex');
+        expect(classes).toContain('font-medium');
+    });
+    it('supports multiple variants: outline, soft, subtle', () => {
+        const outline = badgeVariants({ variant: 'outline', color: 'success' });
+        expect(outline).toContain('border');
+        expect(outline).toContain('bg-transparent');
+        const soft = badgeVariants({ variant: 'soft', color: 'warning' });
+        expect(soft).toContain('inline-flex');
+        const subtle = badgeVariants({ variant: 'subtle', color: 'error' });
+        expect(subtle).toContain('border');
+    });
+    it('supports size scales (xs, sm, md, lg)', () => {
+        const xs = badgeVariants({ size: 'xs' });
+        expect(xs).toContain('text-[10px]');
+        expect(xs).toContain('px-1.5');
+        const lg = badgeVariants({ size: 'lg' });
+        expect(lg).toContain('text-sm');
+        expect(lg).toContain('px-3');
+    });
+});

package/dist/components/elements/Button.svelte

@@ -193,48 +193,48 @@
 	});
 
 	export type ButtonProps = VariantProps<typeof buttonVariants> & {
+		type?: 'button' | 'submit' | 'reset';
 		href?: string;
-		loading?: boolean;
+		as?: 'button' | 'a' | 'span' | 'div';
 		disabled?: boolean;
+		loading?: boolean;
 		icon?: IconSource;
 		trailingIcon?: IconSource;
-		type?: 'button' | 'submit' | 'reset';
-		class?: string;
 		leading?: Snippet;
 		trailing?: Snippet;
 		children?: Snippet;
-		onclick?: (e: MouseEvent) => void;
-		'aria-label'?: string;
-		'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+		onclick?: (event: MouseEvent) => void;
+		class?: string;
 		[key: string]: unknown;
 	};
 </script>
 
 <script lang="ts">
-	import Icon from './Icon.svelte';
 	import Spinner from './Spinner.svelte';
+	import Icon from './Icon.svelte';
 
 	let {
+		type = 'button',
 		href,
+		as = 'button',
 		variant = 'solid',
 		color = 'primary',
 		size = 'md',
 		block = false,
 		square = false,
-		loading = false,
 		disabled = false,
+		loading = false,
 		icon,
 		trailingIcon,
-		type = 'button',
-		class: className = '',
 		leading,
 		trailing,
 		children,
 		onclick,
+		class: className = '',
 		...restProps
 	}: ButtonProps = $props();
 
-	let classes = $derived(
+	const classes = $derived(
 		buttonVariants({
 			variant,
 			color,
@@ -246,7 +246,47 @@
 	);
 </script>
 
-{#if href}
+{#if as === 'span'}
+	<span class={classes} aria-disabled={disabled || loading} {onclick} {...restProps}>
+		{#if loading}
+			<Spinner size={size === 'xs' || size === 'sm' ? 'sm' : 'md'} />
+		{:else if leading}
+			{@render leading()}
+		{:else if icon}
+			<Icon name={icon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if trailing}
+			{@render trailing()}
+		{:else if trailingIcon}
+			<Icon name={trailingIcon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+	</span>
+{:else if as === 'div'}
+	<div class={classes} aria-disabled={disabled || loading} {onclick} {...restProps}>
+		{#if loading}
+			<Spinner size={size === 'xs' || size === 'sm' ? 'sm' : 'md'} />
+		{:else if leading}
+			{@render leading()}
+		{:else if icon}
+			<Icon name={icon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if trailing}
+			{@render trailing()}
+		{:else if trailingIcon}
+			<Icon name={trailingIcon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+	</div>
+{:else if href || as === 'a'}
 	<a
 		{href}
 		class={classes}

package/dist/components/elements/Button.svelte.d.ts

@@ -90,19 +90,18 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export type ButtonProps = VariantProps<typeof buttonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
     href?: string;
-    loading?: boolean;
+    as?: 'button' | 'a' | 'span' | 'div';
     disabled?: boolean;
+    loading?: boolean;
     icon?: IconSource;
     trailingIcon?: IconSource;
-    type?: 'button' | 'submit' | 'reset';
-    class?: string;
     leading?: Snippet;
     trailing?: Snippet;
     children?: Snippet;
-    onclick?: (e: MouseEvent) => void;
-    'aria-label'?: string;
-    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
     [key: string]: unknown;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;

package/dist/components/elements/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Button.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { buttonVariants } from './Button.svelte';
+describe('Button Component', () => {
+    it('generates solid primary button classes by default', () => {
+        const classes = buttonVariants({ variant: 'solid', color: 'primary' });
+        expect(classes).toContain('bg-primary-600');
+        expect(classes).toContain('inline-flex');
+        expect(classes).toContain('select-none');
+    });
+    it('supports multiple variants: outline, ghost, soft, subtle, link', () => {
+        const outline = buttonVariants({ variant: 'outline', color: 'neutral' });
+        expect(outline).toContain('border');
+        expect(outline).toContain('bg-transparent');
+        const ghost = buttonVariants({ variant: 'ghost', color: 'error' });
+        expect(ghost).toContain('bg-transparent');
+        const link = buttonVariants({ variant: 'link' });
+        expect(link).toContain('underline-offset-4');
+    });
+    it('supports size scales and square/block modifiers', () => {
+        const xs = buttonVariants({ size: 'xs' });
+        expect(xs).toContain('text-xs');
+        expect(xs).toContain('px-2');
+        const xl = buttonVariants({ size: 'xl' });
+        expect(xl).toContain('text-base');
+        expect(xl).toContain('px-5');
+        const block = buttonVariants({ block: true });
+        expect(block).toContain('w-full');
+        const square = buttonVariants({ square: true });
+        expect(square).toContain('aspect-square');
+    });
+    it('applies compound color classes for success, warning, and error', () => {
+        const success = buttonVariants({ variant: 'solid', color: 'success' });
+        expect(success).toContain('bg-emerald-600');
+        const warning = buttonVariants({ variant: 'solid', color: 'warning' });
+        expect(warning).toContain('bg-amber-600');
+        const error = buttonVariants({ variant: 'solid', color: 'error' });
+        expect(error).toContain('bg-rose-600');
+    });
+});

package/dist/components/elements/DataTable.dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/DataTable.dom.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'svelte';
+import { renderComponent } from '../../testing';
+import DataTable, {} from './DataTable.svelte';
+const testData = [
+    { id: '1', name: 'Alice Smith', role: 'Engineer', score: 95 },
+    { id: '2', name: 'Bob Jones', role: 'Designer', score: 82 },
+    { id: '3', name: 'Charlie Brown', role: 'Manager', score: 88 }
+];
+const testColumns = [
+    { key: 'name', label: 'Full Name', sortable: true },
+    { key: 'role', label: 'Job Role', sortable: true },
+    { key: 'score', label: 'Performance Score', sortable: true }
+];
+describe('DataTable Component (DOM & Interactions)', () => {
+    it('renders table headers and rows accurately', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns
+        });
+        const thElements = target.querySelectorAll('thead th');
+        expect(thElements.length).toBe(3);
+        expect(thElements[0].textContent).toContain('Full Name');
+        expect(thElements[1].textContent).toContain('Job Role');
+        const trElements = target.querySelectorAll('tbody tr');
+        expect(trElements.length).toBe(3);
+        expect(trElements[0].textContent).toContain('Alice Smith');
+        expect(trElements[1].textContent).toContain('Bob Jones');
+        cleanup();
+    });
+    it('filters rows according to searchQuery', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns,
+            searchQuery: 'Designer'
+        });
+        const trElements = target.querySelectorAll('tbody tr');
+        expect(trElements.length).toBe(1);
+        expect(trElements[0].textContent).toContain('Bob Jones');
+        expect(trElements[0].textContent).toContain('Designer');
+        cleanup();
+    });
+    it('displays custom emptyText when no matching rows are found', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns,
+            searchQuery: 'NonExistentQueryXYZ',
+            emptyText: 'No members found'
+        });
+        const trElements = target.querySelectorAll('tbody tr');
+        expect(trElements.length).toBe(1);
+        expect(trElements[0].textContent).toContain('No members found');
+        cleanup();
+    });
+    it('sorts rows when clicking on sortable column headers', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns
+        });
+        const sortButton = target.querySelector('thead th button');
+        expect(sortButton).toBeDefined();
+        // Click to sort by name (ascending)
+        sortButton.click();
+        flushSync();
+        let firstRowName = target.querySelector('tbody tr td')?.textContent;
+        expect(firstRowName).toContain('Alice Smith');
+        // Click again to sort by name (descending)
+        sortButton.click();
+        flushSync();
+        firstRowName = target.querySelector('tbody tr td')?.textContent;
+        expect(firstRowName).toContain('Charlie Brown');
+        cleanup();
+    });
+});

package/dist/components/elements/DataTable.svelte

@@ -48,15 +48,14 @@
 
 	let sortKey = $state<string | null>(null);
 	let sortOrder = $state<'asc' | 'desc'>('asc');
-	let columnWidths = $state<Record<string, number>>({});
+	let customWidths = $state<Record<string, number>>({});
 
-	// Initialize defined column widths
-	$effect(() => {
-		const initial: Record<string, number> = {};
+	let effectiveWidths = $derived.by(() => {
+		const widths: Record<string, number> = {};
 		columns.forEach((c) => {
-			if (c.width) initial[String(c.key)] = c.width;
+			if (c.width) widths[String(c.key)] = c.width;
 		});
-		columnWidths = { ...initial, ...columnWidths };
+		return { ...widths, ...customWidths };
 	});
 
 	function handleSort(key: string) {
@@ -73,7 +72,7 @@
 
 		const startX = 'touches' in e ? e.touches[0].clientX : e.clientX;
 		const currentCol = columns.find((c) => String(c.key) === columnKey);
-		const currentWidth = columnWidths[columnKey] || 150;
+		const currentWidth = effectiveWidths[columnKey] || 150;
 		const minWidth = currentCol?.minWidth || 60;
 		const maxWidth = currentCol?.maxWidth || 600;
 
@@ -81,7 +80,7 @@
 			const clientX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
 			const delta = clientX - startX;
 			const newWidth = Math.max(minWidth, Math.min(maxWidth, currentWidth + delta));
-			columnWidths[columnKey] = newWidth;
+			customWidths[columnKey] = newWidth;
 		}
 
 		function onEnd() {
@@ -180,8 +179,8 @@
 					{/if}
 					{#each columns as column}
 						{@const colKey = String(column.key)}
-						{@const widthStyle = columnWidths[colKey]
-							? `width: ${columnWidths[colKey]}px; min-width: ${columnWidths[colKey]}px;`
+						{@const widthStyle = effectiveWidths[colKey]
+							? `width: ${effectiveWidths[colKey]}px; min-width: ${effectiveWidths[colKey]}px;`
 							: ''}
 						<th
 							class="relative px-4 py-3 {getPinClass(column.pinned)} {column.class || ''}"
@@ -291,8 +290,8 @@
 							{/if}
 							{#each columns as column}
 								{@const colKey = String(column.key)}
-								{@const widthStyle = columnWidths[colKey]
-									? `width: ${columnWidths[colKey]}px; min-width: ${columnWidths[colKey]}px;`
+								{@const widthStyle = effectiveWidths[colKey]
+									? `width: ${effectiveWidths[colKey]}px; min-width: ${effectiveWidths[colKey]}px;`
 									: ''}
 								<td
 									class="px-4 py-3.5 {getPinClass(column.pinned)} {column.class || ''}"

package/dist/components/elements/Skeleton.svelte

@@ -7,7 +7,7 @@
 			variant: {
 				pulse: 'animate-pulse',
 				shimmer:
-					'before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10',
+					'before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20',
 				none: ''
 			},
 			shape: {

package/dist/components/elements/Skeleton.svelte.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from '../../utils/cn';
 export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         pulse: "animate-pulse";
-        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10";
+        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20";
         none: "";
     };
     shape: {
@@ -14,7 +14,7 @@ export declare const skeletonVariants: import("tailwind-variants").TVReturnType<
 }, undefined, "relative overflow-hidden bg-neutral-200 dark:bg-neutral-800 select-none", {
     variant: {
         pulse: "animate-pulse";
-        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10";
+        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20";
         none: "";
     };
     shape: {
@@ -26,7 +26,7 @@ export declare const skeletonVariants: import("tailwind-variants").TVReturnType<
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         pulse: "animate-pulse";
-        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10";
+        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20";
         none: "";
     };
     shape: {

package/dist/components/elements/Skeleton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Skeleton.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { renderComponent } from '../../testing';
+import Skeleton, { skeletonVariants } from './Skeleton.svelte';
+describe('Skeleton Component (DOM & Variants)', () => {
+    it('generates pulse animation classes by default', () => {
+        const classes = skeletonVariants({ variant: 'pulse', shape: 'rectangle' });
+        expect(classes).toContain('animate-pulse');
+        expect(classes).toContain('rounded-lg');
+    });
+    it('generates shimmer sliding gradient classes for variant shimmer', () => {
+        const classes = skeletonVariants({ variant: 'shimmer' });
+        expect(classes).toContain('yaxa-shimmer-slide');
+        expect(classes).toContain('before:bg-gradient-to-r');
+    });
+    it('supports shape variants: circle, pill, text', () => {
+        const circle = skeletonVariants({ shape: 'circle' });
+        expect(circle).toContain('rounded-full');
+        expect(circle).toContain('aspect-square');
+        const pill = skeletonVariants({ shape: 'pill' });
+        expect(pill).toContain('rounded-full');
+        const text = skeletonVariants({ shape: 'text' });
+        expect(text).toContain('h-4');
+    });
+    it('mounts single skeleton DOM element with custom width and height', () => {
+        const { target, cleanup } = renderComponent(Skeleton, {
+            variant: 'shimmer',
+            shape: 'circle',
+            width: '48px',
+            height: '48px'
+        });
+        const el = target.querySelector('div');
+        expect(el).toBeDefined();
+        expect(el?.getAttribute('aria-hidden')).toBe('true');
+        expect(el?.style.width).toBe('48px');
+        expect(el?.style.height).toBe('48px');
+        expect(el?.className).toContain('rounded-full');
+        cleanup();
+    });
+    it('renders multiple lines for lines prop > 1', () => {
+        const { target, cleanup } = renderComponent(Skeleton, {
+            lines: 4,
+            variant: 'shimmer'
+        });
+        const container = target.querySelector('.space-y-2');
+        expect(container).toBeDefined();
+        expect(container?.children.length).toBe(4);
+        cleanup();
+    });
+});

package/dist/components/forms/Combobox.dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/Combobox.dom.test.js

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { renderComponent } from '../../testing';
+import Combobox, { comboboxVariants } from './Combobox.svelte';
+const testOptions = [
+    { value: 'svelte', label: 'Svelte 5' },
+    { value: 'react', label: 'React 19' },
+    { value: 'vue', label: 'Vue 3' }
+];
+describe('Combobox Component (DOM & Interactions)', () => {
+    it('computes size and status variant classes', () => {
+        expect(comboboxVariants({ size: 'sm' })).toContain('h-9');
+        expect(comboboxVariants({ size: 'md' })).toContain('h-10');
+        expect(comboboxVariants({ size: 'lg' })).toContain('h-12');
+        expect(comboboxVariants({ status: 'error' })).toContain('border-rose-500');
+    });
+    it('renders placeholder when value is empty', () => {
+        const { target, cleanup } = renderComponent(Combobox, {
+            options: testOptions,
+            placeholder: 'Choose framework...'
+        });
+        expect(target.textContent).toContain('Choose framework...');
+        cleanup();
+    });
+    it('renders selected option label when bound value matches', () => {
+        const { target, cleanup } = renderComponent(Combobox, {
+            options: testOptions,
+            value: 'svelte'
+        });
+        expect(target.textContent).toContain('Svelte 5');
+        cleanup();
+    });
+});

package/dist/components/forms/InputOTP.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/InputOTP.test.js

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { renderComponent } from '../../testing';
+import InputOTP from './InputOTP.svelte';
+describe('InputOTP Component (DOM & Interactions)', () => {
+    it('renders specified number of input slots with aria-labels', () => {
+        const { target, cleanup } = renderComponent(InputOTP, { length: 6 });
+        const inputs = target.querySelectorAll('input');
+        expect(inputs.length).toBe(6);
+        expect(inputs[0].getAttribute('aria-label')).toBe('Digit 1 of 6');
+        expect(inputs[5].getAttribute('aria-label')).toBe('Digit 6 of 6');
+        cleanup();
+    });
+    it('renders separator hyphen at specified index', () => {
+        const { target, cleanup } = renderComponent(InputOTP, {
+            length: 6,
+            separator: true,
+            separatorIndex: 3
+        });
+        const separator = target.querySelector('span');
+        expect(separator).toBeDefined();
+        expect(separator?.textContent).toContain('−');
+        cleanup();
+    });
+    it('populates slots when bound value is provided', () => {
+        const { target, cleanup } = renderComponent(InputOTP, {
+            length: 4,
+            value: '4281'
+        });
+        const inputs = target.querySelectorAll('input');
+        expect(inputs[0].value).toBe('4');
+        expect(inputs[1].value).toBe('2');
+        expect(inputs[2].value).toBe('8');
+        expect(inputs[3].value).toBe('1');
+        cleanup();
+    });
+    it('handles keyboard typing and updates input slot', () => {
+        let updatedCode = '';
+        const { target, cleanup } = renderComponent(InputOTP, {
+            length: 4,
+            onchange: (code) => {
+                updatedCode = code;
+            }
+        });
+        const inputs = target.querySelectorAll('input');
+        inputs[0].value = '9';
+        inputs[0].dispatchEvent(new Event('input', { bubbles: true }));
+        expect(updatedCode).toBe('9');
+        cleanup();
+    });
+    it('disables all input slots when disabled prop is true', () => {
+        const { target, cleanup } = renderComponent(InputOTP, {
+            length: 4,
+            disabled: true
+        });
+        const inputs = target.querySelectorAll('input');
+        inputs.forEach((input) => {
+            expect(input.disabled).toBe(true);
+        });
+        cleanup();
+    });
+});

package/dist/components/forms/Switch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/forms/Switch.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { switchVariants, thumbVariants } from './Switch.svelte';
+describe('Switch Component', () => {
+    it('generates default switch track classes', () => {
+        const classes = switchVariants();
+        expect(classes).toContain('rounded-full');
+        expect(classes).toContain('h-6');
+        expect(classes).toContain('w-11');
+        expect(classes).toContain('data-[state=checked]:bg-primary-600');
+    });
+    it('supports size variations for track and thumb', () => {
+        const smTrack = switchVariants({ size: 'sm' });
+        expect(smTrack).toContain('h-5');
+        expect(smTrack).toContain('w-9');
+        const smThumb = thumbVariants({ size: 'sm' });
+        expect(smThumb).toContain('h-4');
+        expect(smThumb).toContain('w-4');
+        expect(smThumb).toContain('data-[state=checked]:translate-x-4');
+        const lgTrack = switchVariants({ size: 'lg' });
+        expect(lgTrack).toContain('h-7');
+        expect(lgTrack).toContain('w-14');
+        const lgThumb = thumbVariants({ size: 'lg' });
+        expect(lgThumb).toContain('h-6');
+        expect(lgThumb).toContain('w-6');
+        expect(lgThumb).toContain('data-[state=checked]:translate-x-7');
+    });
+});

package/dist/components/layout/ResizablePanels.svelte

@@ -90,37 +90,56 @@
 		}
 	}
 
+	let rafId: number | null = null;
+
 	function startDrag(e: MouseEvent | TouchEvent) {
 		e.preventDefault();
 		isDragging = true;
 
 		function onMove(moveEvent: MouseEvent | TouchEvent) {
 			if (!containerRef) return;
-			const rect = containerRef.getBoundingClientRect();
-			let newPercent: number;
-
-			if (direction === 'horizontal') {
-				const clientX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
-				newPercent = ((clientX - rect.left) / rect.width) * 100;
-			} else {
-				const clientY = 'touches' in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY;
-				newPercent = ((clientY - rect.top) / rect.height) * 100;
-			}
+			const isTouch = 'touches' in moveEvent;
+			const clientX =
+				isTouch && moveEvent.touches.length > 0
+					? moveEvent.touches[0].clientX
+					: (moveEvent as MouseEvent).clientX;
+			const clientY =
+				isTouch && moveEvent.touches.length > 0
+					? moveEvent.touches[0].clientY
+					: (moveEvent as MouseEvent).clientY;
+
+			if (rafId !== null) return;
+			rafId = requestAnimationFrame(() => {
+				rafId = null;
+				if (!containerRef) return;
+				const rect = containerRef.getBoundingClientRect();
+				let newPercent: number;
+
+				if (direction === 'horizontal') {
+					newPercent = ((clientX - rect.left) / rect.width) * 100;
+				} else {
+					newPercent = ((clientY - rect.top) / rect.height) * 100;
+				}
 
-			saveSize(newPercent);
+				saveSize(newPercent);
+			});
 		}
 
 		function onEnd() {
 			isDragging = false;
+			if (rafId !== null) {
+				cancelAnimationFrame(rafId);
+				rafId = null;
+			}
 			window.removeEventListener('mousemove', onMove);
 			window.removeEventListener('mouseup', onEnd);
 			window.removeEventListener('touchmove', onMove);
 			window.removeEventListener('touchend', onEnd);
 		}
 
-		window.addEventListener('mousemove', onMove);
+		window.addEventListener('mousemove', onMove, { passive: true });
 		window.addEventListener('mouseup', onEnd);
-		window.addEventListener('touchmove', onMove);
+		window.addEventListener('touchmove', onMove, { passive: true });
 		window.addEventListener('touchend', onEnd);
 	}
 

package/dist/components/overlays/Modal.dom.test.d.ts

@@ -0,0 +1 @@
+export {};