yaxa-svelte 1.5.2 → 1.6.0

package/README.md

@@ -5,6 +5,8 @@
 **The Intuitive Svelte UI & Solo SaaS Library**  
 _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in SEO & SaaS Parity._
 
+[![npm version](https://img.shields.io/npm/v/yaxa-svelte.svg?color=CB3837&logo=npm)](https://www.npmjs.com/package/yaxa-svelte)
+[![npm downloads](https://img.shields.io/npm/dm/yaxa-svelte.svg?color=blue)](https://www.npmjs.com/package/yaxa-svelte)
 [![Svelte 5](https://img.shields.io/badge/Svelte-5.0+-FF3E00?style=flat&logo=svelte&logoColor=white)](https://svelte.dev)
 [![SvelteKit](https://img.shields.io/badge/SvelteKit-2.7+-FF3E00?style=flat&logo=svelte&logoColor=white)](https://kit.svelte.dev)
 [![Tailwind CSS v4](https://img.shields.io/badge/Tailwind_CSS-v4.0-38B2AC?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com)
@@ -51,16 +53,17 @@ _(Optional full-stack SaaS features: `pnpm add better-auth drizzle-orm @polar-sh
 
 ### 2. Configure `vite.config.ts`
 
-Add Tailwind CSS to your Vite plugins:
+Add Tailwind CSS and the `yaxa()` plugin to your Vite plugins:
 
 ```ts
 // vite.config.ts
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
+import { yaxa } from 'yaxa-svelte/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+	plugins: [tailwindcss(), sveltekit(), yaxa()]
 });
 ```
 

package/dist/components/elements/EmptyState.svelte

@@ -0,0 +1,99 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+	import type { IconSource } from './Icon.svelte';
+
+	export const emptyStateVariants = tv({
+		base: 'flex flex-col items-center justify-center text-center p-8 rounded-2xl bg-white dark:bg-neutral-900/50',
+		variants: {
+			size: {
+				sm: 'py-6 px-4 gap-2',
+				md: 'py-10 px-6 gap-3',
+				lg: 'py-16 px-8 gap-4'
+			},
+			bordered: {
+				true: 'border border-dashed border-neutral-300 dark:border-neutral-800',
+				false: 'border-0'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			bordered: true
+		}
+	});
+
+	export type EmptyStateProps = VariantProps<typeof emptyStateVariants> & {
+		title?: string;
+		description?: string;
+		icon?: IconSource;
+		actions?: Snippet;
+		children?: Snippet;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from './Icon.svelte';
+
+	let {
+		title,
+		description,
+		icon = 'sparkles',
+		size = 'md',
+		bordered = true,
+		actions,
+		children,
+		class: className = ''
+	}: EmptyStateProps = $props();
+</script>
+
+<div class={emptyStateVariants({ size, bordered, class: className })}>
+	{#if icon}
+		<div
+			class="flex items-center justify-center rounded-2xl bg-neutral-100 p-4 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400 {size ===
+			'sm'
+				? 'h-10 w-10 p-2'
+				: size === 'lg'
+					? 'h-16 w-16 p-5'
+					: 'h-12 w-12 p-3'}"
+		>
+			<Icon name={icon} size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'} />
+		</div>
+	{/if}
+
+	{#if title}
+		<h3
+			class="font-bold text-neutral-900 dark:text-white {size === 'sm'
+				? 'text-sm'
+				: size === 'lg'
+					? 'text-xl'
+					: 'text-base'}"
+		>
+			{title}
+		</h3>
+	{/if}
+
+	{#if description}
+		<p
+			class="max-w-md text-neutral-500 dark:text-neutral-400 {size === 'sm'
+				? 'text-xs'
+				: size === 'lg'
+					? 'text-base'
+					: 'text-sm'}"
+		>
+			{description}
+		</p>
+	{/if}
+
+	{#if children}
+		<div class="mt-1">
+			{@render children()}
+		</div>
+	{/if}
+
+	{#if actions}
+		<div class="mt-4 flex flex-wrap items-center justify-center gap-3">
+			{@render actions()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,45 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+import type { IconSource } from './Icon.svelte';
+export declare const emptyStateVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "py-6 px-4 gap-2";
+        md: "py-10 px-6 gap-3";
+        lg: "py-16 px-8 gap-4";
+    };
+    bordered: {
+        true: "border border-dashed border-neutral-300 dark:border-neutral-800";
+        false: "border-0";
+    };
+}, undefined, "flex flex-col items-center justify-center text-center p-8 rounded-2xl bg-white dark:bg-neutral-900/50", {
+    size: {
+        sm: "py-6 px-4 gap-2";
+        md: "py-10 px-6 gap-3";
+        lg: "py-16 px-8 gap-4";
+    };
+    bordered: {
+        true: "border border-dashed border-neutral-300 dark:border-neutral-800";
+        false: "border-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "py-6 px-4 gap-2";
+        md: "py-10 px-6 gap-3";
+        lg: "py-16 px-8 gap-4";
+    };
+    bordered: {
+        true: "border border-dashed border-neutral-300 dark:border-neutral-800";
+        false: "border-0";
+    };
+}, undefined>>;
+export type EmptyStateProps = VariantProps<typeof emptyStateVariants> & {
+    title?: string;
+    description?: string;
+    icon?: IconSource;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+};
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

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

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

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { emptyStateVariants } from './EmptyState.svelte';
+describe('EmptyState Component', () => {
+    it('generates default variant classes', () => {
+        const classes = emptyStateVariants();
+        expect(classes).toContain('border-dashed');
+        expect(classes).toContain('py-10');
+    });
+    it('supports size and bordered variants', () => {
+        const smClasses = emptyStateVariants({ size: 'sm', bordered: false });
+        expect(smClasses).toContain('py-6');
+        expect(smClasses).toContain('border-0');
+        const lgClasses = emptyStateVariants({ size: 'lg' });
+        expect(lgClasses).toContain('py-16');
+    });
+});

package/dist/components/elements/Icon.svelte

@@ -98,6 +98,7 @@
 			'<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
 		twitter:
 			'<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		npm: '<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" fill="currentColor"/>',
 		lock: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
 		trash:
 			'<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',

package/dist/components/forms/Combobox.svelte

@@ -0,0 +1,243 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+	import type { IconSource } from '../elements/Icon.svelte';
+
+	export interface ComboboxOption {
+		value: string;
+		label: string;
+		icon?: IconSource;
+		description?: string;
+		disabled?: boolean;
+	}
+
+	export const comboboxVariants = tv({
+		base: 'flex w-full items-center justify-between rounded-lg border bg-white text-neutral-900 transition-all duration-150 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900 dark:text-neutral-100',
+		variants: {
+			size: {
+				sm: 'h-9 px-3 text-xs gap-2',
+				md: 'h-10 px-3.5 text-sm gap-2.5',
+				lg: 'h-12 px-4 text-base gap-3'
+			},
+			status: {
+				default:
+					'border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20 dark:border-neutral-700',
+				error:
+					'border-rose-500 text-rose-900 focus:border-rose-500 focus:ring-rose-500/20 dark:text-rose-100'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			status: 'default'
+		}
+	});
+
+	export type ComboboxProps = VariantProps<typeof comboboxVariants> & {
+		value?: string;
+		options?: ComboboxOption[];
+		placeholder?: string;
+		searchPlaceholder?: string;
+		icon?: IconSource;
+		disabled?: boolean;
+		clearable?: boolean;
+		name?: string;
+		class?: string;
+		itemSnippet?: Snippet<[ComboboxOption, boolean]>;
+	};
+</script>
+
+<script lang="ts">
+	import { Popover } from 'bits-ui';
+	import Icon from '../elements/Icon.svelte';
+
+	let {
+		value = $bindable(''),
+		options = [],
+		placeholder = 'Select an option...',
+		searchPlaceholder = 'Search options...',
+		icon,
+		disabled = false,
+		clearable = true,
+		name,
+		size = 'md',
+		status = 'default',
+		class: className = '',
+		itemSnippet
+	}: ComboboxProps = $props();
+
+	let open = $state(false);
+	let query = $state('');
+	let highlightedIndex = $state(0);
+
+	let selectedOption = $derived(options.find((opt) => opt.value === value));
+
+	let filteredOptions = $derived.by(() => {
+		if (!query.trim()) return options;
+		const q = query.toLowerCase();
+		return options.filter(
+			(opt) =>
+				opt.label.toLowerCase().includes(q) ||
+				opt.value.toLowerCase().includes(q) ||
+				opt.description?.toLowerCase().includes(q)
+		);
+	});
+
+	function handleSelect(option: ComboboxOption) {
+		if (option.disabled) return;
+		value = option.value;
+		open = false;
+		query = '';
+	}
+
+	function handleClear(e: MouseEvent) {
+		e.stopPropagation();
+		value = '';
+		query = '';
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!open) {
+			if (e.key === 'ArrowDown' || e.key === 'Enter') {
+				e.preventDefault();
+				open = true;
+			}
+			return;
+		}
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightedIndex = (highlightedIndex + 1) % Math.max(1, filteredOptions.length);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedIndex =
+				(highlightedIndex - 1 + filteredOptions.length) % Math.max(1, filteredOptions.length);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			const opt = filteredOptions[highlightedIndex];
+			if (opt) handleSelect(opt);
+		} else if (e.key === 'Escape') {
+			open = false;
+		}
+	}
+</script>
+
+{#if name}
+	<input type="hidden" {name} {value} />
+{/if}
+
+<Popover.Root bind:open>
+	<Popover.Trigger
+		{disabled}
+		class={comboboxVariants({ size, status, class: className })}
+		aria-haspopup="listbox"
+		aria-expanded={open}
+	>
+		<div class="flex flex-1 items-center gap-2 overflow-hidden text-left">
+			{#if icon}
+				<Icon name={icon} size={size === 'sm' ? 'xs' : 'sm'} class="shrink-0 text-neutral-400" />
+			{:else if selectedOption?.icon}
+				<Icon
+					name={selectedOption.icon}
+					size={size === 'sm' ? 'xs' : 'sm'}
+					class="shrink-0 text-neutral-400"
+				/>
+			{/if}
+
+			{#if selectedOption}
+				<span class="truncate font-medium">{selectedOption.label}</span>
+			{:else}
+				<span class="truncate text-neutral-400 dark:text-neutral-500">{placeholder}</span>
+			{/if}
+		</div>
+
+		<div class="flex shrink-0 items-center gap-1">
+			{#if clearable && value && !disabled}
+				<button
+					type="button"
+					onclick={handleClear}
+					class="rounded p-0.5 text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
+					aria-label="Clear selection"
+				>
+					<Icon name="cross" size="xs" />
+				</button>
+			{/if}
+			<Icon
+				name="chevron-down"
+				size="xs"
+				class="text-neutral-400 transition-transform duration-200 {open ? 'rotate-180' : ''}"
+			/>
+		</div>
+	</Popover.Trigger>
+
+	<Popover.Portal>
+		<Popover.Content
+			sideOffset={6}
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-(--bits-popover-anchor-width) min-w-[200px] overflow-hidden rounded-xl border border-neutral-200 bg-white p-1.5 shadow-xl dark:border-neutral-800 dark:bg-neutral-900"
+		>
+			<!-- Search Input -->
+			<div
+				class="flex items-center border-b border-neutral-100 px-2.5 pb-1.5 dark:border-neutral-800"
+			>
+				<Icon name="search" size="xs" class="mr-2 shrink-0 text-neutral-400" />
+				<input
+					type="text"
+					bind:value={query}
+					placeholder={searchPlaceholder}
+					onkeydown={handleKeydown}
+					class="h-8 w-full bg-transparent text-xs text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white"
+				/>
+			</div>
+
+			<!-- Options List -->
+			<div class="mt-1 max-h-56 overflow-y-auto" role="listbox">
+				{#if filteredOptions.length === 0}
+					<div class="py-6 text-center text-xs text-neutral-400 dark:text-neutral-500">
+						No options match "{query}".
+					</div>
+				{:else}
+					{#each filteredOptions as option, index}
+						{@const isSelected = option.value === value}
+						{@const isHighlighted = index === highlightedIndex}
+
+						<button
+							type="button"
+							role="option"
+							aria-selected={isSelected}
+							disabled={option.disabled}
+							onclick={() => handleSelect(option)}
+							class="flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors {isSelected
+								? 'bg-primary-50 font-semibold text-primary-900 dark:bg-primary-950/60 dark:text-primary-100'
+								: isHighlighted
+									? 'bg-neutral-100 text-neutral-900 dark:bg-neutral-800/60 dark:text-white'
+									: 'text-neutral-700 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-800/40'} {option.disabled
+								? 'cursor-not-allowed opacity-40'
+								: ''}"
+						>
+							{#if itemSnippet}
+								{@render itemSnippet(option, isSelected)}
+							{:else}
+								<div class="flex items-center gap-2 overflow-hidden">
+									{#if option.icon}
+										<Icon name={option.icon} size="xs" class="shrink-0 text-neutral-400" />
+									{/if}
+									<div>
+										<div>{option.label}</div>
+										{#if option.description}
+											<div class="text-[10px] text-neutral-400 dark:text-neutral-500">
+												{option.description}
+											</div>
+										{/if}
+									</div>
+								</div>
+
+								{#if isSelected}
+									<Icon name="check" size="xs" class="text-primary-600 dark:text-primary-400" />
+								{/if}
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</div>
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>

package/dist/components/forms/Combobox.svelte.d.ts

@@ -0,0 +1,56 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+import type { IconSource } from '../elements/Icon.svelte';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    icon?: IconSource;
+    description?: string;
+    disabled?: boolean;
+}
+export declare const comboboxVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-9 px-3 text-xs gap-2";
+        md: "h-10 px-3.5 text-sm gap-2.5";
+        lg: "h-12 px-4 text-base gap-3";
+    };
+    status: {
+        default: "border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20 dark:border-neutral-700";
+        error: "border-rose-500 text-rose-900 focus:border-rose-500 focus:ring-rose-500/20 dark:text-rose-100";
+    };
+}, undefined, "flex w-full items-center justify-between rounded-lg border bg-white text-neutral-900 transition-all duration-150 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900 dark:text-neutral-100", {
+    size: {
+        sm: "h-9 px-3 text-xs gap-2";
+        md: "h-10 px-3.5 text-sm gap-2.5";
+        lg: "h-12 px-4 text-base gap-3";
+    };
+    status: {
+        default: "border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20 dark:border-neutral-700";
+        error: "border-rose-500 text-rose-900 focus:border-rose-500 focus:ring-rose-500/20 dark:text-rose-100";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-9 px-3 text-xs gap-2";
+        md: "h-10 px-3.5 text-sm gap-2.5";
+        lg: "h-12 px-4 text-base gap-3";
+    };
+    status: {
+        default: "border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20 dark:border-neutral-700";
+        error: "border-rose-500 text-rose-900 focus:border-rose-500 focus:ring-rose-500/20 dark:text-rose-100";
+    };
+}, undefined>>;
+export type ComboboxProps = VariantProps<typeof comboboxVariants> & {
+    value?: string;
+    options?: ComboboxOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    icon?: IconSource;
+    disabled?: boolean;
+    clearable?: boolean;
+    name?: string;
+    class?: string;
+    itemSnippet?: Snippet<[ComboboxOption, boolean]>;
+};
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

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

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

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { comboboxVariants } from './Combobox.svelte';
+describe('Combobox Component', () => {
+    it('generates default variant classes', () => {
+        const classes = comboboxVariants();
+        expect(classes).toContain('h-10');
+        expect(classes).toContain('border-neutral-300');
+    });
+    it('supports different sizes and error status', () => {
+        const smClasses = comboboxVariants({ size: 'sm', status: 'error' });
+        expect(smClasses).toContain('h-9');
+        expect(smClasses).toContain('border-rose-500');
+        const lgClasses = comboboxVariants({ size: 'lg' });
+        expect(lgClasses).toContain('h-12');
+    });
+});