yaxa-svelte 1.7.0 → 1.8.0

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/VirtualList.svelte

@@ -0,0 +1,110 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const virtualListVariants = tv({
+		base: 'relative w-full overflow-y-auto rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900',
+		variants: {
+			bordered: {
+				true: 'border border-neutral-200 dark:border-neutral-800',
+				false: 'border-0'
+			}
+		},
+		defaultVariants: {
+			bordered: true
+		}
+	});
+
+	export type VirtualListProps<T> = VariantProps<typeof virtualListVariants> & {
+		items: T[];
+		itemHeight?: number;
+		height?: number | string;
+		overscan?: number;
+		emptyText?: string;
+		item?: Snippet<[T, number]>;
+		empty?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts" generics="T">
+	let {
+		items = [],
+		itemHeight = 48,
+		height = 400,
+		overscan = 4,
+		emptyText = 'No items found',
+		item,
+		empty,
+		bordered = true,
+		class: className = ''
+	}: VirtualListProps<T> = $props();
+
+	let scrollTop = $state(0);
+	let measuredHeight = $state<number | null>(null);
+
+	const viewportHeight = $derived(measuredHeight ?? (typeof height === 'number' ? height : 400));
+
+	const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
+
+	const totalHeight = $derived(items.length * itemHeight);
+
+	const startIndex = $derived(Math.max(0, Math.floor(scrollTop / itemHeight) - overscan));
+
+	const visibleCount = $derived(Math.ceil(viewportHeight / itemHeight) + 2 * overscan);
+
+	const endIndex = $derived(Math.min(items.length, startIndex + visibleCount));
+
+	const visibleItems = $derived(
+		items.slice(startIndex, endIndex).map((data, i) => ({
+			data,
+			index: startIndex + i,
+			top: (startIndex + i) * itemHeight
+		}))
+	);
+
+	function onScroll(e: Event) {
+		const target = e.currentTarget as HTMLElement;
+		scrollTop = target.scrollTop;
+		if (target.clientHeight > 0) {
+			measuredHeight = target.clientHeight;
+		}
+	}
+</script>
+
+<div
+	class={virtualListVariants({ bordered, class: className })}
+	style="height: {heightStyle};"
+	onscroll={onScroll}
+	role="feed"
+	aria-busy={false}
+>
+	{#if items.length === 0}
+		<div
+			class="flex h-full min-h-32 items-center justify-center p-6 text-sm text-neutral-500 dark:text-neutral-400"
+		>
+			{#if empty}
+				{@render empty()}
+			{:else}
+				<p>{emptyText}</p>
+			{/if}
+		</div>
+	{:else}
+		<!-- Total virtual space height holder -->
+		<div class="relative w-full" style="height: {totalHeight}px;">
+			{#each visibleItems as { data, index, top } (index)}
+				<div class="absolute right-0 left-0 w-full" style="top: {top}px; height: {itemHeight}px;">
+					{#if item}
+						{@render item(data, index)}
+					{:else}
+						<div
+							class="flex h-full items-center border-b border-neutral-100 px-4 text-sm text-neutral-700 dark:border-neutral-800 dark:text-neutral-300"
+						>
+							{String(data)}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,52 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const virtualListVariants: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: "border border-neutral-200 dark:border-neutral-800";
+        false: "border-0";
+    };
+}, undefined, "relative w-full overflow-y-auto rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900", {
+    bordered: {
+        true: "border border-neutral-200 dark:border-neutral-800";
+        false: "border-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    bordered: {
+        true: "border border-neutral-200 dark:border-neutral-800";
+        false: "border-0";
+    };
+}, undefined>>;
+export type VirtualListProps<T> = VariantProps<typeof virtualListVariants> & {
+    items: T[];
+    itemHeight?: number;
+    height?: number | string;
+    overscan?: number;
+    emptyText?: string;
+    item?: Snippet<[T, number]>;
+    empty?: Snippet;
+    class?: string;
+};
+declare function $$render<T>(): {
+    props: VirtualListProps<T>;
+    exports: {};
+    bindings: "";
+    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(): "";
+    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 VirtualList: $$IsomorphicComponent;
+type VirtualList<T> = InstanceType<typeof VirtualList<T>>;
+export default VirtualList;

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

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

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

@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { virtualListVariants } from './VirtualList.svelte';
+describe('VirtualList', () => {
+    it('generates correct variant classes with default bordered state', () => {
+        const classes = virtualListVariants({ bordered: true });
+        expect(classes).toContain('relative w-full overflow-y-auto');
+        expect(classes).toContain('border');
+    });
+    it('supports unbordered variant', () => {
+        const classes = virtualListVariants({ bordered: false });
+        expect(classes).toContain('border-0');
+    });
+});

package/dist/components/layout/DashboardShell.svelte

@@ -0,0 +1,178 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const dashboardShellVariants = tv({
+		slots: {
+			root: 'flex min-h-screen w-full bg-neutral-50 text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100',
+			sidebar:
+				'relative hidden flex-col border-r border-neutral-200 bg-white transition-all duration-300 ease-in-out md:flex dark:border-neutral-800 dark:bg-neutral-900',
+			topbar:
+				'flex h-16 w-full items-center justify-between border-b border-neutral-200 bg-white/80 px-4 backdrop-blur-md dark:border-neutral-800 dark:bg-neutral-900/80 md:px-6',
+			main: 'flex flex-1 flex-col overflow-hidden',
+			content: 'flex-1 overflow-y-auto p-4 md:p-6 lg:p-8'
+		},
+		variants: {
+			collapsed: {
+				true: {
+					sidebar: 'w-18'
+				},
+				false: {
+					sidebar: 'w-64'
+				}
+			}
+		},
+		defaultVariants: {
+			collapsed: false
+		}
+	});
+
+	export type DashboardShellProps = VariantProps<typeof dashboardShellVariants> & {
+		collapsed?: boolean;
+		mobileOpen?: boolean;
+		stickyHeader?: boolean;
+		brand?: Snippet;
+		navigation?: Snippet<[{ collapsed: boolean }]>;
+		sidebarFooter?: Snippet<[{ collapsed: boolean }]>;
+		topbar?: Snippet;
+		actions?: Snippet;
+		children?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+	import Drawer from '../overlays/Drawer.svelte';
+
+	let {
+		collapsed = $bindable(false),
+		mobileOpen = $bindable(false),
+		stickyHeader = true,
+		brand,
+		navigation,
+		sidebarFooter,
+		topbar,
+		actions,
+		children,
+		class: className = ''
+	}: DashboardShellProps = $props();
+
+	const slots = $derived(dashboardShellVariants({ collapsed }));
+
+	function toggleCollapse() {
+		collapsed = !collapsed;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'b') {
+			e.preventDefault();
+			toggleCollapse();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="{slots.root()} {className}">
+	<!-- Desktop Sidebar -->
+	<aside class={slots.sidebar()} aria-label="Sidebar Navigation">
+		<!-- Sidebar Brand Header -->
+		<div
+			class="flex h-16 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800"
+		>
+			<div class="flex items-center gap-3 overflow-hidden">
+				{#if brand}
+					{@render brand()}
+				{/if}
+			</div>
+
+			<!-- Collapse Toggle Button -->
+			<button
+				type="button"
+				onclick={toggleCollapse}
+				class="hidden rounded-lg p-1.5 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900 md:inline-flex dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+				aria-label={collapsed ? 'Expand sidebar (Ctrl+B)' : 'Collapse sidebar (Ctrl+B)'}
+				title={collapsed ? 'Expand sidebar (Ctrl+B)' : 'Collapse sidebar (Ctrl+B)'}
+			>
+				<Icon name={collapsed ? 'panel-left-open' : 'panel-left-close'} size="sm" />
+			</button>
+		</div>
+
+		<!-- Sidebar Navigation Area -->
+		<div class="flex-1 overflow-y-auto px-3 py-4">
+			{#if navigation}
+				{@render navigation({ collapsed })}
+			{/if}
+		</div>
+
+		<!-- Sidebar Footer Area -->
+		{#if sidebarFooter}
+			<div class="border-t border-neutral-200 p-3 dark:border-neutral-800">
+				{@render sidebarFooter({ collapsed })}
+			</div>
+		{/if}
+	</aside>
+
+	<!-- Mobile Drawer -->
+	<Drawer bind:open={mobileOpen} responsive={false} showHandle={true} class="p-0">
+		<div class="flex h-full flex-col bg-white dark:bg-neutral-900">
+			<div
+				class="flex h-16 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800"
+			>
+				<div class="flex items-center gap-3">
+					{#if brand}
+						{@render brand()}
+					{/if}
+				</div>
+			</div>
+
+			<div class="flex-1 overflow-y-auto px-4 py-4">
+				{#if navigation}
+					{@render navigation({ collapsed: false })}
+				{/if}
+			</div>
+
+			{#if sidebarFooter}
+				<div class="border-t border-neutral-200 p-4 dark:border-neutral-800">
+					{@render sidebarFooter({ collapsed: false })}
+				</div>
+			{/if}
+		</div>
+	</Drawer>
+
+	<!-- Main App Shell -->
+	<div class={slots.main()}>
+		<!-- Topbar Header -->
+		<header class="{slots.topbar()} {stickyHeader ? 'sticky top-0 z-30' : ''}">
+			<div class="flex items-center gap-3">
+				<!-- Mobile Menu Trigger -->
+				<button
+					type="button"
+					onclick={() => (mobileOpen = true)}
+					class="inline-flex rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 md:hidden dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
+					aria-label="Open mobile menu"
+				>
+					<Icon name="menu" size="md" />
+				</button>
+
+				{#if topbar}
+					{@render topbar()}
+				{/if}
+			</div>
+
+			{#if actions}
+				<div class="flex items-center gap-2">
+					{@render actions()}
+				</div>
+			{/if}
+		</header>
+
+		<!-- Main Content Viewport -->
+		<main class={slots.content()}>
+			{#if children}
+				{@render children()}
+			{/if}
+		</main>
+	</div>
+</div>