fancy-ui-svelte 0.2.1

package/dist/fancy-ui/_template/types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * TEMPLATE: types.ts
+ *
+ * Component-specific type definitions.
+ *
+ * Instructions:
+ * 1. Rename types to match your component (e.g., ComponentNameItem, ComponentNameConfig)
+ * 2. Export types that consumers might need
+ * 3. Keep internal types unexported
+ * 4. Delete this comment block and unused examples when done
+ */
+/**
+ * Example: Configuration object for component behavior
+ * Rename to [ComponentName]Config
+ */
+export interface ComponentConfig {
+    /** Enable feature X */
+    enabled?: boolean;
+    /** Configuration value */
+    value?: number;
+}
+/**
+ * Example: Item type for list/collection components
+ * Rename to [ComponentName]Item
+ */
+export interface ComponentItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon name */
+    icon?: string;
+}
+/**
+ * Example: State type for components with complex internal state
+ * Rename to [ComponentName]State
+ */
+export interface ComponentState {
+    /** Current index */
+    currentIndex: number;
+    /** Whether component is active */
+    isActive: boolean;
+}
+/**
+ * Example: Event detail for custom component events
+ * Rename to [ComponentName]ChangeEvent or similar
+ */
+export interface ComponentChangeEvent {
+    /** Previous value */
+    previousValue: unknown;
+    /** New value */
+    newValue: unknown;
+}

package/dist/fancy-ui/_template/types.js

@@ -0,0 +1,12 @@
+/**
+ * TEMPLATE: types.ts
+ *
+ * Component-specific type definitions.
+ *
+ * Instructions:
+ * 1. Rename types to match your component (e.g., ComponentNameItem, ComponentNameConfig)
+ * 2. Export types that consumers might need
+ * 3. Keep internal types unexported
+ * 4. Delete this comment block and unused examples when done
+ */
+export {};

package/dist/fancy-ui/animated-beam/AnimatedBeam.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { cn } from "../../utils";
+	import type { AnimatedBeamProps } from "./types";
+
+	let {
+		class: className = "",
+		containerRef,
+		fromRef,
+		toRef,
+		curvature = 0,
+		reverse = false,
+		pathColor = "gray",
+		pathWidth = 2,
+		pathOpacity = 0.2,
+		gradientStartColor = "#FFAA40",
+		gradientStopColor = "#9C40FF",
+		delay = 0,
+		duration = Math.random() * 3 + 4,
+		startXOffset = 0,
+		startYOffset = 0,
+		endXOffset = 0,
+		endYOffset = 0,
+	}: AnimatedBeamProps = $props();
+
+	// Generate unique ID for gradient
+	const id = "beam-" + Math.random().toString(36).substring(2, 10);
+
+	// Reactive state
+	let isVertical = $state(false);
+	let isRightToLeft = $state(false);
+	let isBottomToTop = $state(false);
+	let pathD = $state("");
+	let svgDimensions = $state<{ width: number; height: number }>({
+		width: 0,
+		height: 0,
+	});
+
+	// Derived values for animation
+	let x1 = $derived((reverse ? !isRightToLeft : isRightToLeft) ? "90%; -10%;" : "10%; 110%;");
+
+	let x2 = $derived((reverse ? !isRightToLeft : isRightToLeft) ? "100%; 0%;" : "0%; 100%;");
+
+	let y1 = $derived((reverse ? !isBottomToTop : isBottomToTop) ? "90%; -10%;" : "10%; 110%;");
+
+	let y2 = $derived((reverse ? !isBottomToTop : isBottomToTop) ? "100%; 0%;" : "0%; 100%;");
+
+	let resizeObserver: ResizeObserver | undefined = undefined;
+
+	// Function to update the path based on the positions of the elements
+	function updatePath() {
+		if (containerRef && fromRef && toRef) {
+			const containerRect = containerRef.getBoundingClientRect();
+			const rectA = fromRef.getBoundingClientRect();
+			const rectB = toRef.getBoundingClientRect();
+
+			const svgWidth = containerRect.width;
+			const svgHeight = containerRect.height;
+			svgDimensions = { width: svgWidth, height: svgHeight };
+
+			const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+			const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+			const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+			const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+
+			// Check if the light beam is in a vertical direction
+			isVertical = Math.abs(endY - startY) > Math.abs(endX - startX);
+
+			// Determine the animation direction
+			isRightToLeft = endX < startX;
+			isBottomToTop = endY < startY;
+
+			const controlY = startY - curvature;
+			const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
+			pathD = d;
+		}
+	}
+
+	// Setup ResizeObserver on mount
+	onMount(() => {
+		if (containerRef) {
+			resizeObserver = new ResizeObserver(() => {
+				updatePath();
+			});
+			resizeObserver.observe(containerRef);
+
+			// Initial path calculation
+			updatePath();
+		}
+
+		return () => {
+			resizeObserver?.disconnect();
+		};
+	});
+</script>
+
+<svg
+	fill="none"
+	width={svgDimensions.width}
+	height={svgDimensions.height}
+	xmlns="http://www.w3.org/2000/svg"
+	class={cn("pointer-events-none absolute top-0 left-0 transform-gpu stroke-2", className)}
+	viewBox="0 0 {svgDimensions.width} {svgDimensions.height}"
+>
+	<path
+		d={pathD}
+		stroke={pathColor}
+		stroke-width={pathWidth}
+		stroke-opacity={pathOpacity}
+		stroke-linecap="round"
+	/>
+	<path
+		d={pathD}
+		stroke-width={pathWidth}
+		stroke="url(#{id})"
+		stroke-opacity="1"
+		stroke-linecap="round"
+	/>
+	<defs>
+		<linearGradient {id} gradientUnits="userSpaceOnUse" x1="0%" x2="0%" y1="0%" y2="0%">
+			<stop stop-color={gradientStartColor} stop-opacity="0" />
+			<stop stop-color={gradientStartColor} />
+			<stop offset="32.5%" stop-color={gradientStopColor} />
+			<stop offset="100%" stop-color={gradientStopColor} stop-opacity="0" />
+			{#if !isVertical}
+				<animate
+					attributeName="x1"
+					values={x1}
+					dur="{duration}s"
+					keyTimes="0; 1"
+					keySplines="0.16 1 0.3 1"
+					calcMode="spline"
+					repeatCount="indefinite"
+				/>
+				<animate
+					attributeName="x2"
+					values={x2}
+					dur="{duration}s"
+					keyTimes="0; 1"
+					keySplines="0.16 1 0.3 1"
+					calcMode="spline"
+					repeatCount="indefinite"
+				/>
+			{:else}
+				<animate
+					attributeName="y1"
+					values={y1}
+					dur="{duration}s"
+					keyTimes="0; 1"
+					keySplines="0.16 1 0.3 1"
+					calcMode="spline"
+					repeatCount="indefinite"
+				/>
+				<animate
+					attributeName="y2"
+					values={y2}
+					dur="{duration}s"
+					keyTimes="0; 1"
+					keySplines="0.16 1 0.3 1"
+					calcMode="spline"
+					repeatCount="indefinite"
+				/>
+			{/if}
+		</linearGradient>
+	</defs>
+</svg>

package/dist/fancy-ui/animated-beam/AnimatedBeam.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnimatedBeamProps } from "./types";
+declare const AnimatedBeam: import("svelte").Component<AnimatedBeamProps, {}, "">;
+type AnimatedBeam = ReturnType<typeof AnimatedBeam>;
+export default AnimatedBeam;

package/dist/fancy-ui/animated-beam/AnimatedBeam.test.d.ts

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

package/dist/fancy-ui/animated-beam/AnimatedBeam.test.js

@@ -0,0 +1,49 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import AnimatedBeam from "./AnimatedBeam.svelte";
+const makeProps = (extra = {}) => ({
+    containerRef: document.createElement("div"),
+    fromRef: document.createElement("div"),
+    toRef: document.createElement("div"),
+    ...extra,
+});
+describe("AnimatedBeam", () => {
+    afterEach(cleanup);
+    it("renders an svg element", () => {
+        const { container } = render(AnimatedBeam, { props: makeProps() });
+        const svg = container.querySelector("svg");
+        expect(svg).toBeInTheDocument();
+    });
+    it("svg has pointer-events-none class", () => {
+        const { container } = render(AnimatedBeam, { props: makeProps() });
+        const svg = container.querySelector("svg");
+        expect(svg?.className.baseVal).toContain("pointer-events-none");
+    });
+    it("renders two path elements", () => {
+        const { container } = render(AnimatedBeam, { props: makeProps() });
+        const paths = container.querySelectorAll("path");
+        expect(paths.length).toBe(2);
+    });
+    it("renders a linearGradient in defs", () => {
+        const { container } = render(AnimatedBeam, { props: makeProps() });
+        const gradient = container.querySelector("linearGradient");
+        expect(gradient).toBeInTheDocument();
+    });
+    it("applies custom class names", () => {
+        const { container } = render(AnimatedBeam, { props: makeProps({ class: "my-beam" }) });
+        const svg = container.querySelector("svg");
+        expect(svg?.className.baseVal).toContain("my-beam");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(AnimatedBeam, { props: makeProps({ class: "extra" }) });
+        const svg = container.querySelector("svg");
+        expect(svg?.className.baseVal).toContain("pointer-events-none");
+        expect(svg?.className.baseVal).toContain("absolute");
+        expect(svg?.className.baseVal).toContain("transform-gpu");
+    });
+    it('svg has fill="none" attribute', () => {
+        const { container } = render(AnimatedBeam, { props: makeProps() });
+        const svg = container.querySelector("svg");
+        expect(svg).toHaveAttribute("fill", "none");
+    });
+});

package/dist/fancy-ui/animated-beam/README.md

@@ -0,0 +1,38 @@
+# AnimatedBeam
+
+## Overview
+Creates animated SVG beams that connect two elements with smooth gradients and customizable curves. Perfect for showing data flow, connections, or relationships between UI elements.
+
+## Key Features
+- Dynamic path calculation between elements
+- Responsive to container resizing
+- Customizable curvature for curved beams
+- Animated gradient effect
+- Configurable colors, opacity, and timing
+- Reversible animation direction
+- Position offsets for fine-tuning
+
+## Implementation Notes
+
+### Vue → Svelte Conversions
+- `ref()` → `$state()`
+- `computed()` → `$derived()`
+- `watchEffect()` → `$effect()` (via `onMount`)
+- Template refs → `bind:this`
+- Props handling with destructuring defaults
+
+### Key Differences
+1. **Element References**: Svelte uses `bind:this` instead of Vue's `ref` template attribute
+2. **Lifecycle**: Setup logic moved to `onMount` with cleanup return
+3. **Derived Values**: Functions returning derived values (x1, x2, y1, y2) instead of computed refs
+4. **Conditional Rendering**: Used `{#if}` blocks to ensure refs are defined before rendering beams
+
+### Implementation Details
+- ResizeObserver for responsive path updates
+- SVG path calculation using quadratic Bezier curves (Q command)
+- Direction detection for vertical/horizontal beams
+- Unique gradient IDs to prevent conflicts with multiple instances
+
+## Demo
+See `/demo/animated-beam` for usage examples.
+

package/dist/fancy-ui/animated-beam/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AnimatedBeam } from "./AnimatedBeam.svelte";
+export type { AnimatedBeamProps } from "./types";

package/dist/fancy-ui/animated-beam/index.js

@@ -0,0 +1 @@
+export { default as AnimatedBeam } from "./AnimatedBeam.svelte";

package/dist/fancy-ui/animated-beam/types.d.ts

@@ -0,0 +1,19 @@
+export interface AnimatedBeamProps {
+    class?: string;
+    containerRef: HTMLElement;
+    fromRef: HTMLElement;
+    toRef: HTMLElement;
+    curvature?: number;
+    reverse?: boolean;
+    pathColor?: string;
+    pathWidth?: number;
+    pathOpacity?: number;
+    gradientStartColor?: string;
+    gradientStopColor?: string;
+    delay?: number;
+    duration?: number;
+    startXOffset?: number;
+    startYOffset?: number;
+    endXOffset?: number;
+    endYOffset?: number;
+}

package/dist/fancy-ui/animated-beam/types.js

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

package/dist/fancy-ui/animated-testimonials/AnimatedTestimonials.svelte

@@ -0,0 +1,196 @@
+<script lang="ts" module>
+	/**
+	 * AnimatedTestimonials - Animated testimonial carousel
+	 *
+	 * Cycles through testimonials with smooth slide animations.
+	 * Supports manual navigation and optional autoplay.
+	 */
+	export interface Testimonial {
+		/** The testimonial quote */
+		quote: string;
+		/** Author's full name */
+		name: string;
+		/** Author's title or role */
+		designation: string;
+		/** URL to author's avatar image */
+		src: string;
+	}
+
+	export interface AnimatedTestimonialsProps {
+		/** Array of testimonials to display */
+		testimonials: Testimonial[];
+		/** Auto-advance testimonials */
+		autoplay?: boolean;
+		/** Interval between auto-advances (ms) */
+		interval?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	/** Duration must match the CSS transition duration below */
+	const TRANSITION_DURATION = 300;
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		testimonials,
+		autoplay = false,
+		interval = 5000,
+		class: className,
+	}: AnimatedTestimonialsProps = $props();
+
+	let activeIndex = $state(0);
+	let direction = $state<"next" | "prev">("next");
+	let isAnimating = $state(false);
+	let isHovered = $state(false);
+
+	let navigateTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function navigate(dir: "next" | "prev") {
+		if (isAnimating || testimonials.length === 0) return;
+		direction = dir;
+		isAnimating = true;
+		navigateTimer = setTimeout(() => {
+			activeIndex =
+				dir === "next"
+					? (activeIndex + 1) % testimonials.length
+					: (activeIndex - 1 + testimonials.length) % testimonials.length;
+			isAnimating = false;
+			navigateTimer = null;
+		}, TRANSITION_DURATION);
+	}
+
+	// Reactive autoplay: restarts whenever autoplay, interval, or hover state changes
+	$effect(() => {
+		if (!autoplay || isHovered || testimonials.length === 0) return;
+
+		const timer = setInterval(() => navigate("next"), interval);
+		return () => clearInterval(timer);
+	});
+
+	// Cleanup navigate timeout on destroy
+	$effect(() => {
+		return () => {
+			if (navigateTimer) clearTimeout(navigateTimer);
+		};
+	});
+
+	let activeTestimonial = $derived(testimonials.length > 0 ? testimonials[activeIndex] : null);
+</script>
+
+<div
+	class={cn(
+		"relative mx-auto max-w-sm px-4 py-20 font-sans antialiased md:max-w-4xl md:px-8 lg:px-12",
+		className
+	)}
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
+	role="region"
+	aria-label="Testimonials"
+>
+	{#if testimonials.length === 0}
+		<p class="text-muted-foreground text-center">No testimonials available.</p>
+	{:else}
+		<div class="relative grid grid-cols-1 gap-20 md:grid-cols-2">
+			<!-- Image column -->
+			<div class="relative h-80 w-full">
+				{#each testimonials as testimonial, index}
+					<div
+						class={cn(
+							"absolute inset-0 h-full w-full origin-bottom rounded-3xl transition-all ease-in-out",
+							index === activeIndex
+								? "z-20 translate-y-0 scale-100 rotate-0 opacity-100"
+								: "z-10 translate-y-4 scale-95 opacity-0",
+							index !== activeIndex && direction === "next"
+								? "-translate-y-4"
+								: index !== activeIndex
+									? "translate-y-4"
+									: ""
+						)}
+						style="transition-duration: {TRANSITION_DURATION}ms"
+					>
+						<img
+							src={testimonial.src}
+							alt={testimonial.name}
+							class="h-full w-full rounded-3xl object-cover object-center"
+							draggable="false"
+						/>
+					</div>
+				{/each}
+			</div>
+
+			<!-- Content column -->
+			<div class="flex flex-col justify-between py-4">
+				<div
+					class={cn(
+						"ease-in-out",
+						isAnimating
+							? direction === "next"
+								? "translate-y-4 opacity-0"
+								: "-translate-y-4 opacity-0"
+							: "translate-y-0 opacity-100"
+					)}
+					style="transition: opacity {TRANSITION_DURATION}ms, transform {TRANSITION_DURATION}ms"
+				>
+					<p class="text-lg text-gray-500 dark:text-neutral-300" aria-live="polite">
+						{activeTestimonial?.quote}
+					</p>
+					<div class="mt-8">
+						<p class="text-base font-bold text-gray-900 dark:text-white">
+							{activeTestimonial?.name}
+						</p>
+						<p class="text-sm text-gray-500 dark:text-neutral-400">
+							{activeTestimonial?.designation}
+						</p>
+					</div>
+				</div>
+
+				<!-- Navigation -->
+				<div class="mt-8 flex gap-4">
+					<button
+						onclick={() => navigate("prev")}
+						class="group/button flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 transition-colors hover:bg-gray-200 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+						aria-label="Previous testimonial"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="text-gray-800 transition-transform group-hover/button:-translate-x-0.5 dark:text-neutral-200"
+						>
+							<path d="m15 18-6-6 6-6" />
+						</svg>
+					</button>
+					<button
+						onclick={() => navigate("next")}
+						class="group/button flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 transition-colors hover:bg-gray-200 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+						aria-label="Next testimonial"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="text-gray-800 transition-transform group-hover/button:translate-x-0.5 dark:text-neutral-200"
+						>
+							<path d="m9 18 6-6-6-6" />
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/fancy-ui/animated-testimonials/AnimatedTestimonials.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+ * AnimatedTestimonials - Animated testimonial carousel
+ *
+ * Cycles through testimonials with smooth slide animations.
+ * Supports manual navigation and optional autoplay.
+ */
+export interface Testimonial {
+    /** The testimonial quote */
+    quote: string;
+    /** Author's full name */
+    name: string;
+    /** Author's title or role */
+    designation: string;
+    /** URL to author's avatar image */
+    src: string;
+}
+export interface AnimatedTestimonialsProps {
+    /** Array of testimonials to display */
+    testimonials: Testimonial[];
+    /** Auto-advance testimonials */
+    autoplay?: boolean;
+    /** Interval between auto-advances (ms) */
+    interval?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const AnimatedTestimonials: import("svelte").Component<AnimatedTestimonialsProps, {}, "">;
+type AnimatedTestimonials = ReturnType<typeof AnimatedTestimonials>;
+export default AnimatedTestimonials;

package/dist/fancy-ui/animated-testimonials/AnimatedTestimonials.test.d.ts

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

package/dist/fancy-ui/animated-testimonials/AnimatedTestimonials.test.js

@@ -0,0 +1,92 @@
+import { render, cleanup, fireEvent } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import { flushSync } from "svelte";
+import AnimatedTestimonials from "./AnimatedTestimonials.svelte";
+const testimonials = [
+    { quote: "First quote", name: "Alice", designation: "CEO", src: "alice.jpg" },
+    { quote: "Second quote", name: "Bob", designation: "CTO", src: "bob.jpg" },
+    { quote: "Third quote", name: "Carol", designation: "CFO", src: "carol.jpg" },
+];
+describe("AnimatedTestimonials", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        cleanup();
+    });
+    it("renders the first testimonial initially", () => {
+        const { getByText } = render(AnimatedTestimonials, { props: { testimonials } });
+        expect(getByText("First quote")).toBeTruthy();
+        expect(getByText("Alice")).toBeTruthy();
+        expect(getByText("CEO")).toBeTruthy();
+    });
+    it("shows empty state when testimonials array is empty", () => {
+        const { getByText } = render(AnimatedTestimonials, { props: { testimonials: [] } });
+        expect(getByText("No testimonials available.")).toBeTruthy();
+    });
+    it("advances to next testimonial on next button click", () => {
+        const { getByLabelText, getByText } = render(AnimatedTestimonials, {
+            props: { testimonials },
+        });
+        fireEvent.click(getByLabelText("Next testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        expect(getByText("Second quote")).toBeTruthy();
+        expect(getByText("Bob")).toBeTruthy();
+    });
+    it("goes to previous testimonial on prev button click", () => {
+        const { getByLabelText, getByText } = render(AnimatedTestimonials, {
+            props: { testimonials },
+        });
+        // Go to second first
+        fireEvent.click(getByLabelText("Next testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        // Then go back
+        fireEvent.click(getByLabelText("Previous testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        expect(getByText("First quote")).toBeTruthy();
+    });
+    it("wraps around to last testimonial when going prev from first", () => {
+        const { getByLabelText, getByText } = render(AnimatedTestimonials, {
+            props: { testimonials },
+        });
+        fireEvent.click(getByLabelText("Previous testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        expect(getByText("Third quote")).toBeTruthy();
+    });
+    it("wraps around to first testimonial when going next from last", () => {
+        const { getByLabelText, getByText } = render(AnimatedTestimonials, {
+            props: { testimonials },
+        });
+        fireEvent.click(getByLabelText("Next testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        fireEvent.click(getByLabelText("Next testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        fireEvent.click(getByLabelText("Next testimonial"));
+        flushSync(() => vi.advanceTimersByTime(300));
+        expect(getByText("First quote")).toBeTruthy();
+    });
+    it("auto-advances testimonials when autoplay is enabled", () => {
+        const { getByText } = render(AnimatedTestimonials, {
+            props: { testimonials, autoplay: true, interval: 3000 },
+        });
+        expect(getByText("First quote")).toBeTruthy();
+        flushSync(() => {
+            vi.advanceTimersByTime(3000);
+            vi.advanceTimersByTime(300);
+        });
+        expect(getByText("Second quote")).toBeTruthy();
+    });
+    it("does not auto-advance when autoplay is false", () => {
+        const { getByText } = render(AnimatedTestimonials, {
+            props: { testimonials, autoplay: false, interval: 1000 },
+        });
+        vi.advanceTimersByTime(5000);
+        expect(getByText("First quote")).toBeTruthy();
+    });
+    it("renders navigation buttons", () => {
+        const { getByLabelText } = render(AnimatedTestimonials, { props: { testimonials } });
+        expect(getByLabelText("Previous testimonial")).toBeTruthy();
+        expect(getByLabelText("Next testimonial")).toBeTruthy();
+    });
+});

package/dist/fancy-ui/animated-testimonials/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AnimatedTestimonials } from "./AnimatedTestimonials.svelte";
+export type { AnimatedTestimonialsProps, Testimonial } from "./AnimatedTestimonials.svelte";