yaxa-svelte 1.6.0 → 1.8.0

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/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>