yaxa-svelte 1.7.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/Carousel.svelte

@@ -0,0 +1,200 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const carouselVariants = tv({
+		slots: {
+			root: 'relative w-full overflow-hidden rounded-2xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900',
+			viewport: 'relative flex w-full overflow-hidden',
+			slide: 'min-w-full transition-transform duration-500 ease-out',
+			controls: 'absolute inset-0 flex items-center justify-between pointer-events-none p-4',
+			arrowBtn:
+				'pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/80 shadow-md backdrop-blur-xs transition hover:bg-white hover:scale-105 active:scale-95 dark:bg-neutral-900/80 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-100',
+			dots: 'absolute bottom-4 left-0 right-0 flex items-center justify-center gap-2 pointer-events-none',
+			dotBtn: 'pointer-events-auto h-2 rounded-full transition-all duration-300'
+		}
+	});
+
+	export type CarouselProps<T> = VariantProps<typeof carouselVariants> & {
+		items: T[];
+		currentIndex?: number;
+		autoplay?: boolean;
+		interval?: number;
+		loop?: boolean;
+		showDots?: boolean;
+		showArrows?: boolean;
+		pauseOnHover?: boolean;
+		item?: Snippet<[T, number]>;
+		empty?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts" generics="T">
+	import Icon from './Icon.svelte';
+
+	let {
+		items = [],
+		currentIndex = $bindable(0),
+		autoplay = false,
+		interval = 4000,
+		loop = true,
+		showDots = true,
+		showArrows = true,
+		pauseOnHover = true,
+		item,
+		empty,
+		class: className = ''
+	}: CarouselProps<T> = $props();
+
+	let isHovered = $state(false);
+	let touchStartX = $state(0);
+
+	const slots = $derived(carouselVariants());
+
+	function next() {
+		if (items.length === 0) return;
+		if (currentIndex < items.length - 1) {
+			currentIndex += 1;
+		} else if (loop) {
+			currentIndex = 0;
+		}
+	}
+
+	function prev() {
+		if (items.length === 0) return;
+		if (currentIndex > 0) {
+			currentIndex -= 1;
+		} else if (loop) {
+			currentIndex = items.length - 1;
+		}
+	}
+
+	function goTo(index: number) {
+		if (index >= 0 && index < items.length) {
+			currentIndex = index;
+		}
+	}
+
+	// Autoplay timer
+	$effect(() => {
+		if (!autoplay || items.length <= 1) return;
+		if (pauseOnHover && isHovered) return;
+
+		const timer = setInterval(() => {
+			next();
+		}, interval);
+
+		return () => clearInterval(timer);
+	});
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStartX = e.touches[0].clientX;
+	}
+
+	function handleTouchEnd(e: TouchEvent) {
+		const touchEndX = e.changedTouches[0].clientX;
+		const diff = touchStartX - touchEndX;
+		if (Math.abs(diff) > 40) {
+			if (diff > 0) {
+				next();
+			} else {
+				prev();
+			}
+		}
+	}
+</script>
+
+<div
+	class="{slots.root()} {className}"
+	role="region"
+	aria-roledescription="carousel"
+	aria-label="Image and Card Slider"
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
+	ontouchstart={handleTouchStart}
+	ontouchend={handleTouchEnd}
+>
+	{#if items.length === 0}
+		<div
+			class="flex min-h-64 items-center justify-center p-8 text-neutral-500 dark:text-neutral-400"
+		>
+			{#if empty}
+				{@render empty()}
+			{:else}
+				<p class="text-sm">No carousel slides available.</p>
+			{/if}
+		</div>
+	{:else}
+		<!-- Viewport -->
+		<div class={slots.viewport()}>
+			<div
+				class="flex w-full transition-transform duration-500 ease-out"
+				style="transform: translateX(-{currentIndex * 100}%);"
+			>
+				{#each items as slide, index}
+					<div
+						class="min-w-full flex-shrink-0"
+						role="group"
+						aria-roledescription="slide"
+						aria-label="Slide {index + 1} of {items.length}"
+					>
+						{#if item}
+							{@render item(slide, index)}
+						{:else}
+							<div class="flex min-h-64 items-center justify-center p-8">
+								{String(slide)}
+							</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Navigation Arrows -->
+		{#if showArrows && items.length > 1}
+			<div class={slots.controls()}>
+				<button
+					type="button"
+					onclick={prev}
+					class={slots.arrowBtn()}
+					aria-label="Previous slide"
+					disabled={!loop && currentIndex === 0}
+				>
+					<Icon name="chevron-left" size="sm" />
+				</button>
+
+				<button
+					type="button"
+					onclick={next}
+					class={slots.arrowBtn()}
+					aria-label="Next slide"
+					disabled={!loop && currentIndex === items.length - 1}
+				>
+					<Icon name="chevron-right" size="sm" />
+				</button>
+			</div>
+		{/if}
+
+		<!-- Indicator Dots -->
+		{#if showDots && items.length > 1}
+			<div class={slots.dots()}>
+				{#each items as slide, index (index)}
+					<button
+						type="button"
+						onclick={() => goTo(index)}
+						class="{slots.dotBtn()} {currentIndex === index
+							? 'w-6 bg-primary-600 dark:bg-primary-400'
+							: 'w-2 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600'}"
+						aria-label="Go to slide {index + 1}: {typeof slide === 'object' &&
+						slide &&
+						'title' in slide
+							? String(slide.title)
+							: index + 1}"
+						aria-current={currentIndex === index ? 'true' : 'false'}
+					></button>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,100 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const carouselVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            slide?: import("tailwind-variants").ClassValue;
+            controls?: import("tailwind-variants").ClassValue;
+            arrowBtn?: import("tailwind-variants").ClassValue;
+            dots?: import("tailwind-variants").ClassValue;
+            dotBtn?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            slide?: import("tailwind-variants").ClassValue;
+            controls?: import("tailwind-variants").ClassValue;
+            arrowBtn?: import("tailwind-variants").ClassValue;
+            dots?: import("tailwind-variants").ClassValue;
+            dotBtn?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    viewport: string;
+    slide: string;
+    controls: string;
+    arrowBtn: string;
+    dots: string;
+    dotBtn: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            slide?: import("tailwind-variants").ClassValue;
+            controls?: import("tailwind-variants").ClassValue;
+            arrowBtn?: import("tailwind-variants").ClassValue;
+            dots?: import("tailwind-variants").ClassValue;
+            dotBtn?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    viewport: string;
+    slide: string;
+    controls: string;
+    arrowBtn: string;
+    dots: string;
+    dotBtn: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    viewport: string;
+    slide: string;
+    controls: string;
+    arrowBtn: string;
+    dots: string;
+    dotBtn: string;
+}>>;
+export type CarouselProps<T> = VariantProps<typeof carouselVariants> & {
+    items: T[];
+    currentIndex?: number;
+    autoplay?: boolean;
+    interval?: number;
+    loop?: boolean;
+    showDots?: boolean;
+    showArrows?: boolean;
+    pauseOnHover?: boolean;
+    item?: Snippet<[T, number]>;
+    empty?: Snippet;
+    class?: string;
+};
+declare function $$render<T>(): {
+    props: CarouselProps<T>;
+    exports: {};
+    bindings: "currentIndex";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "currentIndex";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<T> = InstanceType<typeof Carousel<T>>;
+export default Carousel;

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

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

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

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { carouselVariants } from './Carousel.svelte';
+describe('Carousel', () => {
+    it('generates correct carousel slot classes', () => {
+        const slots = carouselVariants();
+        expect(slots.root()).toContain('relative w-full overflow-hidden');
+        expect(slots.viewport()).toContain('relative flex w-full overflow-hidden');
+        expect(slots.controls()).toContain('pointer-events-none');
+        expect(slots.arrowBtn()).toContain('rounded-full');
+    });
+});

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: {