yaxa-svelte 1.5.2 → 1.7.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/blocks/FAQ.svelte

@@ -0,0 +1,139 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+
+	export interface FAQItem {
+		id: string | number;
+		question: string;
+		answer: string;
+		category?: string;
+	}
+
+	export const faqVariants = tv({
+		base: 'w-full py-12 max-w-3xl mx-auto'
+	});
+
+	export type FAQProps = VariantProps<typeof faqVariants> & {
+		title?: string;
+		description?: string;
+		badge?: string;
+		items?: FAQItem[];
+		categories?: string[];
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+	import Badge from '../elements/Badge.svelte';
+
+	let {
+		title = 'Frequently Asked Questions',
+		description = 'Everything you need to know about licensing, deployment, and tech stack.',
+		badge = 'FAQ',
+		items = [],
+		categories = [],
+		class: className = ''
+	}: FAQProps = $props();
+
+	let selectedCategory = $state('all');
+	let openIds = $state<Array<string | number>>([]);
+
+	let availableCategories = $derived(
+		categories.length > 0
+			? ['all', ...categories]
+			: ['all', ...new Set(items.map((i) => i.category).filter((c): c is string => Boolean(c)))]
+	);
+
+	let filteredItems = $derived(
+		selectedCategory === 'all' ? items : items.filter((item) => item.category === selectedCategory)
+	);
+
+	function toggleItem(id: string | number) {
+		if (openIds.includes(id)) {
+			openIds = openIds.filter((i) => i !== id);
+		} else {
+			openIds = [...openIds, id];
+		}
+	}
+</script>
+
+<section class={faqVariants({ class: className })}>
+	{#if title || description || badge}
+		<div class="mb-10 space-y-3 text-center">
+			{#if badge}
+				<div class="inline-flex">
+					<Badge variant="subtle" color="primary" size="sm">
+						{badge}
+					</Badge>
+				</div>
+			{/if}
+
+			{#if title}
+				<h2
+					class="text-2xl font-extrabold tracking-tight text-neutral-900 sm:text-3xl dark:text-white"
+				>
+					{title}
+				</h2>
+			{/if}
+
+			{#if description}
+				<p class="mx-auto max-w-xl text-sm text-neutral-600 dark:text-neutral-400">
+					{description}
+				</p>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Category Filter Tabs -->
+	{#if availableCategories.length > 2}
+		<div class="mb-8 flex flex-wrap items-center justify-center gap-2">
+			{#each availableCategories as cat}
+				<button
+					type="button"
+					onclick={() => (selectedCategory = cat)}
+					class="rounded-full px-3 py-1 text-xs font-medium capitalize transition-colors {selectedCategory ===
+					cat
+						? 'bg-primary-600 text-white shadow-xs'
+						: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'}"
+				>
+					{cat}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- FAQ Accordion List -->
+	<div
+		class="divide-y divide-neutral-200 rounded-2xl border border-neutral-200 bg-white dark:divide-neutral-800 dark:border-neutral-800 dark:bg-neutral-900/40"
+	>
+		{#each filteredItems as item (item.id)}
+			{@const isOpen = openIds.includes(item.id)}
+
+			<div class="overflow-hidden">
+				<button
+					type="button"
+					onclick={() => toggleItem(item.id)}
+					aria-expanded={isOpen}
+					class="flex w-full items-center justify-between p-5 text-left text-sm font-semibold text-neutral-900 transition-colors hover:bg-neutral-50 dark:text-white dark:hover:bg-neutral-800/40"
+				>
+					<span>{item.question}</span>
+					<Icon
+						name="chevron-down"
+						size="sm"
+						class="ml-4 shrink-0 text-neutral-400 transition-transform duration-200 {isOpen
+							? 'rotate-180'
+							: ''}"
+					/>
+				</button>
+
+				{#if isOpen}
+					<div
+						class="border-t border-neutral-100/60 px-5 pt-3 pb-5 text-xs leading-relaxed text-neutral-600 dark:border-neutral-800/60 dark:text-neutral-400"
+					>
+						{item.answer}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</section>

package/dist/components/blocks/FAQ.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type VariantProps } from '../../utils/cn';
+export interface FAQItem {
+    id: string | number;
+    question: string;
+    answer: string;
+    category?: string;
+}
+export declare const faqVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full py-12 max-w-3xl mx-auto", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export type FAQProps = VariantProps<typeof faqVariants> & {
+    title?: string;
+    description?: string;
+    badge?: string;
+    items?: FAQItem[];
+    categories?: string[];
+    class?: string;
+};
+declare const FAQ: import("svelte").Component<FAQProps, {}, "">;
+type FAQ = ReturnType<typeof FAQ>;
+export default FAQ;

package/dist/components/blocks/FAQ.test.d.ts

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

package/dist/components/blocks/FAQ.test.js

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { faqVariants } from './FAQ.svelte';
+describe('FAQ Block', () => {
+    it('generates default variant classes', () => {
+        const classes = faqVariants();
+        expect(classes).toContain('w-full');
+        expect(classes).toContain('max-w-3xl');
+    });
+});

package/dist/components/blocks/FeatureGrid.svelte

@@ -0,0 +1,126 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { IconSource } from '../elements/Icon.svelte';
+
+	export interface FeatureItem {
+		id: string | number;
+		title: string;
+		description: string;
+		icon?: IconSource;
+		tag?: string;
+		href?: string;
+	}
+
+	export const featureGridVariants = tv({
+		base: 'w-full py-12'
+	});
+
+	export type FeatureGridProps = VariantProps<typeof featureGridVariants> & {
+		title?: string;
+		description?: string;
+		badge?: string;
+		features?: FeatureItem[];
+		columns?: 2 | 3 | 4;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import Card from '../layout/Card.svelte';
+
+	let {
+		title = 'Everything you need to ship faster',
+		description = 'Production-ready primitives and architecture designed for modern full-stack apps.',
+		badge = 'Features',
+		features = [],
+		columns = 3,
+		class: className = ''
+	}: FeatureGridProps = $props();
+
+	let gridCols = $derived(
+		columns === 2
+			? 'grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto'
+			: columns === 4
+				? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
+				: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+	);
+</script>
+
+<section class={featureGridVariants({ class: className })}>
+	{#if title || description || badge}
+		<div class="mb-12 space-y-3 text-center">
+			{#if badge}
+				<div class="inline-flex">
+					<Badge variant="subtle" color="primary" size="sm">
+						{badge}
+					</Badge>
+				</div>
+			{/if}
+
+			{#if title}
+				<h2
+					class="text-2xl font-extrabold tracking-tight text-neutral-900 sm:text-3xl dark:text-white"
+				>
+					{title}
+				</h2>
+			{/if}
+
+			{#if description}
+				<p class="mx-auto max-w-2xl text-sm text-neutral-600 dark:text-neutral-400">
+					{description}
+				</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="grid gap-6 {gridCols}">
+		{#each features as feature (feature.id)}
+			<Card
+				class="group relative flex flex-col justify-between p-6 transition-all duration-200 hover:-translate-y-1 hover:shadow-xl dark:hover:border-neutral-700"
+			>
+				<div>
+					<!-- Icon & Tag Row -->
+					<div class="mb-4 flex items-center justify-between">
+						{#if feature.icon}
+							<div
+								class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 text-primary-600 transition-colors group-hover:bg-primary-600 group-hover:text-white dark:bg-primary-950/60 dark:text-primary-400"
+							>
+								<Icon name={feature.icon} size="sm" />
+							</div>
+						{/if}
+
+						{#if feature.tag}
+							<Badge size="xs" variant="subtle" color="primary">
+								{feature.tag}
+							</Badge>
+						{/if}
+					</div>
+
+					<!-- Title -->
+					<h3 class="text-base font-bold text-neutral-900 dark:text-white">
+						{feature.title}
+					</h3>
+
+					<!-- Description -->
+					<p class="mt-2 text-xs leading-relaxed text-neutral-600 dark:text-neutral-400">
+						{feature.description}
+					</p>
+				</div>
+
+				{#if feature.href}
+					<div class="mt-4 border-t border-neutral-100 pt-3 dark:border-neutral-800/80">
+						<a
+							href={feature.href}
+							class="inline-flex items-center gap-1 text-xs font-semibold text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+						>
+							Learn more
+							<Icon name="arrow-right" size="xs" />
+						</a>
+					</div>
+				{/if}
+			</Card>
+		{/each}
+	</div>
+</section>

package/dist/components/blocks/FeatureGrid.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type VariantProps } from '../../utils/cn';
+import type { IconSource } from '../elements/Icon.svelte';
+export interface FeatureItem {
+    id: string | number;
+    title: string;
+    description: string;
+    icon?: IconSource;
+    tag?: string;
+    href?: string;
+}
+export declare const featureGridVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full py-12", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export type FeatureGridProps = VariantProps<typeof featureGridVariants> & {
+    title?: string;
+    description?: string;
+    badge?: string;
+    features?: FeatureItem[];
+    columns?: 2 | 3 | 4;
+    class?: string;
+};
+declare const FeatureGrid: import("svelte").Component<FeatureGridProps, {}, "">;
+type FeatureGrid = ReturnType<typeof FeatureGrid>;
+export default FeatureGrid;

package/dist/components/blocks/FeatureGrid.test.d.ts

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

package/dist/components/blocks/FeatureGrid.test.js

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { featureGridVariants } from './FeatureGrid.svelte';
+describe('FeatureGrid Block', () => {
+    it('generates default variant classes', () => {
+        const classes = featureGridVariants();
+        expect(classes).toContain('w-full');
+        expect(classes).toContain('py-12');
+    });
+});

package/dist/components/blocks/Testimonials.svelte

@@ -0,0 +1,118 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+
+	export interface TestimonialItem {
+		id: string | number;
+		quote: string;
+		author: string;
+		role?: string;
+		company?: string;
+		avatar?: string;
+		rating?: number;
+	}
+
+	export const testimonialsVariants = tv({
+		base: 'w-full py-12'
+	});
+
+	export type TestimonialsProps = VariantProps<typeof testimonialsVariants> & {
+		title?: string;
+		description?: string;
+		badge?: string;
+		items?: TestimonialItem[];
+		columns?: 1 | 2 | 3;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+	import Card from '../layout/Card.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import Avatar from '../elements/Avatar.svelte';
+
+	let {
+		title = 'Loved by solo founders & engineering teams',
+		description = 'See what developers and makers are building with Yaxa.',
+		badge = 'Social Proof',
+		items = [],
+		columns = 3,
+		class: className = ''
+	}: TestimonialsProps = $props();
+
+	let gridCols = $derived(
+		columns === 1
+			? 'grid-cols-1 max-w-2xl mx-auto'
+			: columns === 2
+				? 'grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto'
+				: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+	);
+</script>
+
+<section class={testimonialsVariants({ class: className })}>
+	{#if title || description || badge}
+		<div class="mb-10 space-y-3 text-center">
+			{#if badge}
+				<div class="inline-flex">
+					<Badge variant="subtle" color="primary" size="sm">
+						{badge}
+					</Badge>
+				</div>
+			{/if}
+
+			{#if title}
+				<h2
+					class="text-2xl font-extrabold tracking-tight text-neutral-900 sm:text-3xl dark:text-white"
+				>
+					{title}
+				</h2>
+			{/if}
+
+			{#if description}
+				<p class="mx-auto max-w-2xl text-sm text-neutral-600 dark:text-neutral-400">
+					{description}
+				</p>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="grid gap-6 {gridCols}">
+		{#each items as item (item.id)}
+			<Card class="flex flex-col justify-between p-6 transition-all duration-200 hover:shadow-lg">
+				<div>
+					<!-- Star Rating -->
+					{#if item.rating}
+						<div class="mb-4 flex items-center gap-1 text-amber-400">
+							{#each Array.from({ length: item.rating }, (_, i) => i) as starIndex (starIndex)}
+								<Icon name="star" size="xs" />
+							{/each}
+						</div>
+					{/if}
+
+					<!-- Quote Text -->
+					<blockquote class="text-sm leading-relaxed text-neutral-700 italic dark:text-neutral-300">
+						"{item.quote}"
+					</blockquote>
+				</div>
+
+				<!-- Author Info -->
+				<div
+					class="mt-6 flex items-center gap-3 border-t border-neutral-100 pt-4 dark:border-neutral-800"
+				>
+					<Avatar src={item.avatar} alt={item.author} size="sm" />
+
+					<div class="min-w-0 flex-1">
+						<div class="truncate text-xs font-semibold text-neutral-900 dark:text-white">
+							{item.author}
+						</div>
+						{#if item.role || item.company}
+							<div class="truncate text-[11px] text-neutral-500 dark:text-neutral-400">
+								{item.role}{item.role && item.company ? ' • ' : ''}{item.company}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</Card>
+		{/each}
+	</div>
+</section>

package/dist/components/blocks/Testimonials.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type VariantProps } from '../../utils/cn';
+export interface TestimonialItem {
+    id: string | number;
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatar?: string;
+    rating?: number;
+}
+export declare const testimonialsVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full py-12", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export type TestimonialsProps = VariantProps<typeof testimonialsVariants> & {
+    title?: string;
+    description?: string;
+    badge?: string;
+    items?: TestimonialItem[];
+    columns?: 1 | 2 | 3;
+    class?: string;
+};
+declare const Testimonials: import("svelte").Component<TestimonialsProps, {}, "">;
+type Testimonials = ReturnType<typeof Testimonials>;
+export default Testimonials;

package/dist/components/blocks/Testimonials.test.d.ts

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

package/dist/components/blocks/Testimonials.test.js

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { testimonialsVariants } from './Testimonials.svelte';
+describe('Testimonials Block', () => {
+    it('generates default variant classes', () => {
+        const classes = testimonialsVariants();
+        expect(classes).toContain('w-full');
+        expect(classes).toContain('py-12');
+    });
+});

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');
+    });
+});