fancy-ui-svelte 0.2.1

package/dist/fancy-ui/compare/Compare.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { cn } from "../../utils";
+	import StarField from "./StarField.svelte";
+
+	interface Props {
+		firstImage?: string;
+		secondImage?: string;
+		firstImageAlt?: string;
+		secondImageAlt?: string;
+		class?: string;
+		firstContentClass?: string;
+		secondContentClass?: string;
+		initialSliderPercentage?: number;
+		slideMode?: "hover" | "drag";
+		showHandlebar?: boolean;
+		autoplay?: boolean;
+		autoplayDuration?: number;
+		onpercentagechange?: (percentage: number) => void;
+		ondragstart?: () => void;
+		ondragend?: () => void;
+		onhoverenter?: () => void;
+		onhoverleave?: () => void;
+		firstContent?: import("svelte").Snippet;
+		secondContent?: import("svelte").Snippet;
+		handle?: import("svelte").Snippet;
+	}
+
+	let {
+		firstImage = "",
+		secondImage = "",
+		firstImageAlt = "First image",
+		secondImageAlt = "Second image",
+		class: className = "",
+		firstContentClass = "",
+		secondContentClass = "",
+		initialSliderPercentage = 50,
+		slideMode = "hover",
+		showHandlebar = true,
+		autoplay = false,
+		autoplayDuration = 5000,
+		onpercentagechange,
+		ondragstart,
+		ondragend,
+		onhoverenter,
+		onhoverleave,
+		firstContent,
+		secondContent,
+		handle,
+	}: Props = $props();
+
+	let sliderRef: HTMLDivElement;
+	let sliderXPercent = $state(initialSliderPercentage);
+	let isDragging = $state(false);
+	let isMouseOver = $state(false);
+	let isInteracting = $state(false);
+	let autoplayRAF: number | null = null;
+
+	function startAutoplay(): void {
+		if (!autoplay || isMouseOver || isDragging) return;
+
+		const startTime = Date.now();
+		function animate(): void {
+			if (isMouseOver || isDragging) {
+				if (autoplayRAF) cancelAnimationFrame(autoplayRAF);
+				return;
+			}
+
+			const elapsedTime = Date.now() - startTime;
+			const progress = (elapsedTime % (autoplayDuration * 2)) / autoplayDuration;
+			const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
+
+			sliderXPercent = percentage;
+			onpercentagechange?.(percentage);
+			autoplayRAF = requestAnimationFrame(animate);
+		}
+
+		animate();
+	}
+
+	function stopAutoplay(): void {
+		if (autoplayRAF) {
+			cancelAnimationFrame(autoplayRAF);
+			autoplayRAF = null;
+		}
+	}
+
+	function mouseEnterHandler(): void {
+		isMouseOver = true;
+		onhoverenter?.();
+		if (autoplay) {
+			stopAutoplay();
+		}
+	}
+
+	function mouseLeaveHandler(): void {
+		isMouseOver = false;
+		isInteracting = false;
+		onhoverleave?.();
+
+		if (slideMode === "hover") {
+			sliderXPercent = initialSliderPercentage;
+			onpercentagechange?.(initialSliderPercentage);
+		}
+		if (slideMode === "drag") {
+			isDragging = false;
+		}
+
+		if (autoplay) {
+			startAutoplay();
+		}
+	}
+
+	function handleStart(): void {
+		if (slideMode === "drag") {
+			isDragging = true;
+			isInteracting = true;
+			ondragstart?.();
+			stopAutoplay();
+		}
+	}
+
+	function handleEnd(): void {
+		if (slideMode === "drag") {
+			isDragging = false;
+			isInteracting = false;
+			ondragend?.();
+			if (autoplay && !isMouseOver) {
+				startAutoplay();
+			}
+		}
+	}
+
+	function handleMove(clientX: number): void {
+		if (!sliderRef) return;
+
+		if (slideMode === "hover" || (slideMode === "drag" && isDragging)) {
+			isInteracting = true;
+			stopAutoplay();
+
+			const rect = sliderRef.getBoundingClientRect();
+			const x = clientX - rect.left;
+			const percent = (x / rect.width) * 100;
+
+			requestAnimationFrame(() => {
+				const newPercent = Math.max(0, Math.min(100, percent));
+				sliderXPercent = newPercent;
+				onpercentagechange?.(newPercent);
+			});
+		}
+	}
+
+	function handleMouseDown(): void {
+		handleStart();
+	}
+
+	function handleMouseMove(e: MouseEvent): void {
+		handleMove(e.clientX);
+	}
+
+	function handleTouchStart(): void {
+		if (!autoplay) handleStart();
+	}
+
+	function handleTouchEnd(): void {
+		if (!autoplay) handleEnd();
+	}
+
+	function handleTouchMove(e: TouchEvent): void {
+		if (!autoplay) handleMove(e.touches[0].clientX);
+	}
+
+	// Watch for initialSliderPercentage changes
+	$effect(() => {
+		sliderXPercent = initialSliderPercentage;
+	});
+
+	// Watch for autoplay changes
+	$effect(() => {
+		if (autoplay && !isMouseOver && !isDragging) {
+			startAutoplay();
+		} else {
+			stopAutoplay();
+		}
+	});
+
+	onMount(() => {
+		startAutoplay();
+		return () => {
+			stopAutoplay();
+		};
+	});
+</script>
+
+<div
+	bind:this={sliderRef}
+	class={cn("h-[400px] w-[400px] overflow-hidden", className)}
+	style:position="relative"
+	style:cursor={slideMode === "drag" ? "grab" : "col-resize"}
+	onmousemove={handleMouseMove}
+	onmouseleave={mouseLeaveHandler}
+	onmouseenter={mouseEnterHandler}
+	onmousedown={handleMouseDown}
+	onmouseup={handleEnd}
+	ontouchstart={handleTouchStart}
+	ontouchend={handleTouchEnd}
+	ontouchmove={handleTouchMove}
+	role="slider"
+	aria-valuenow={sliderXPercent}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	tabindex="0"
+>
+	<!-- Slider Line -->
+	<div
+		class="pointer-events-none absolute top-0 z-40 m-auto h-full w-px bg-gradient-to-b from-transparent from-5% via-indigo-500 to-transparent to-95%"
+		style:left="{sliderXPercent}%"
+	>
+		<!-- Decorative Effects -->
+		<div
+			class="absolute top-1/2 left-0 z-20 h-full w-36 -translate-y-1/2 bg-gradient-to-r from-indigo-400 via-transparent to-transparent [mask-image:radial-gradient(100px_at_left,white,transparent)] opacity-50"
+		></div>
+		<div
+			class="absolute top-1/2 left-0 z-10 h-1/2 w-10 -translate-y-1/2 bg-gradient-to-r from-cyan-400 via-transparent to-transparent [mask-image:radial-gradient(50px_at_left,white,transparent)] opacity-100"
+		></div>
+		<div
+			class="absolute top-1/2 -right-10 h-3/4 w-10 -translate-y-1/2 [mask-image:radial-gradient(100px_at_left,white,transparent)]"
+		>
+			<StarField starsCount={120} class="size-full" />
+		</div>
+
+		<!-- Custom Handle Slot -->
+		{#if handle}
+			{@render handle()}
+		{:else if showHandlebar}
+			<div
+				class="pointer-events-auto absolute top-1/2 -right-2.5 z-30 flex size-5 -translate-y-1/2 cursor-grab items-center justify-center rounded-md bg-white shadow-[0px_-1px_0px_0px_#FFFFFF40]"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="size-4 text-black"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
+					/>
+				</svg>
+			</div>
+		{/if}
+	</div>
+
+	<!-- First Content -->
+	<div
+		class="relative z-20 size-full overflow-hidden"
+		style:pointer-events={isInteracting ? "none" : "auto"}
+	>
+		<div
+			class={cn(
+				"absolute inset-0 z-20 h-full w-full flex-shrink-0 overflow-hidden rounded-2xl select-none",
+				firstContentClass
+			)}
+			style:clip-path="inset(0 {100 - sliderXPercent}% 0 0)"
+		>
+			{#if firstContent}
+				{@render firstContent()}
+			{:else if firstImage}
+				<img
+					alt={firstImageAlt}
+					src={firstImage}
+					class={cn(
+						"absolute inset-0 z-20 h-full w-full flex-shrink-0 rounded-2xl object-cover select-none",
+						firstContentClass
+					)}
+					draggable="false"
+				/>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Second Content -->
+	<div
+		class={cn(
+			"absolute top-0 left-0 z-[19] h-full w-full rounded-2xl select-none",
+			secondContentClass
+		)}
+		style:pointer-events={isInteracting ? "none" : "auto"}
+	>
+		{#if secondContent}
+			{@render secondContent()}
+		{:else if secondImage}
+			<img
+				alt={secondImageAlt}
+				src={secondImage}
+				class={cn("h-full w-full object-cover", secondContentClass)}
+				draggable="false"
+			/>
+		{/if}
+	</div>
+</div>

package/dist/fancy-ui/compare/Compare.svelte.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    firstImage?: string;
+    secondImage?: string;
+    firstImageAlt?: string;
+    secondImageAlt?: string;
+    class?: string;
+    firstContentClass?: string;
+    secondContentClass?: string;
+    initialSliderPercentage?: number;
+    slideMode?: "hover" | "drag";
+    showHandlebar?: boolean;
+    autoplay?: boolean;
+    autoplayDuration?: number;
+    onpercentagechange?: (percentage: number) => void;
+    ondragstart?: () => void;
+    ondragend?: () => void;
+    onhoverenter?: () => void;
+    onhoverleave?: () => void;
+    firstContent?: import("svelte").Snippet;
+    secondContent?: import("svelte").Snippet;
+    handle?: import("svelte").Snippet;
+}
+declare const Compare: import("svelte").Component<Props, {}, "">;
+type Compare = ReturnType<typeof Compare>;
+export default Compare;

package/dist/fancy-ui/compare/Compare.test.d.ts

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

package/dist/fancy-ui/compare/Compare.test.js

@@ -0,0 +1,57 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Compare from "./Compare.svelte";
+describe("Compare", () => {
+    afterEach(cleanup);
+    it('renders a container with role="slider"', () => {
+        const { container } = render(Compare);
+        const slider = container.querySelector('[role="slider"]');
+        expect(slider).toBeInTheDocument();
+    });
+    it("has overflow-hidden class", () => {
+        const { container } = render(Compare);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("overflow-hidden");
+    });
+    it("renders image elements when image props are provided", () => {
+        const { container } = render(Compare, {
+            props: { firstImage: "/a.jpg", secondImage: "/b.jpg" },
+        });
+        const imgs = container.querySelectorAll("img");
+        expect(imgs.length).toBeGreaterThanOrEqual(2);
+    });
+    it("sets correct src and alt on first image", () => {
+        const { container } = render(Compare, {
+            props: { firstImage: "/a.jpg", firstImageAlt: "Before" },
+        });
+        const imgs = container.querySelectorAll("img");
+        const firstImg = Array.from(imgs).find((img) => img.getAttribute("alt") === "Before");
+        expect(firstImg).toHaveAttribute("src", "/a.jpg");
+    });
+    it("sets correct src and alt on second image", () => {
+        const { container } = render(Compare, {
+            props: { secondImage: "/b.jpg", secondImageAlt: "After" },
+        });
+        const imgs = container.querySelectorAll("img");
+        const secondImg = Array.from(imgs).find((img) => img.getAttribute("alt") === "After");
+        expect(secondImg).toHaveAttribute("src", "/b.jpg");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(Compare, { props: { class: "my-compare" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-compare");
+    });
+    it("has aria-valuenow set to initial slider percentage", () => {
+        const { container } = render(Compare, {
+            props: { initialSliderPercentage: 75 },
+        });
+        const slider = container.querySelector('[role="slider"]');
+        expect(slider).toHaveAttribute("aria-valuenow", "75");
+    });
+    it("has aria-valuemin and aria-valuemax attributes", () => {
+        const { container } = render(Compare);
+        const slider = container.querySelector('[role="slider"]');
+        expect(slider).toHaveAttribute("aria-valuemin", "0");
+        expect(slider).toHaveAttribute("aria-valuemax", "100");
+    });
+});

package/dist/fancy-ui/compare/README.md

@@ -0,0 +1,97 @@
+# Compare
+
+A before/after image comparison slider with smooth interactions.
+
+## Features
+
+- **Two slide modes**: `hover` (follows cursor) or `drag` (click and drag)
+- **Autoplay**: Automatic back-and-forth animation
+- **Custom content**: Supports images or custom snippets for both sides
+- **Decorative effects**: Includes gradient line, glow effects, and star field
+- **Touch support**: Works on mobile devices
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `firstImage` | `string` | `''` | URL of the first (left) image |
+| `secondImage` | `string` | `''` | URL of the second (right) image |
+| `firstImageAlt` | `string` | `'First image'` | Alt text for first image |
+| `secondImageAlt` | `string` | `'Second image'` | Alt text for second image |
+| `class` | `string` | `''` | Additional CSS classes |
+| `firstContentClass` | `string` | `''` | CSS classes for first content |
+| `secondContentClass` | `string` | `''` | CSS classes for second content |
+| `initialSliderPercentage` | `number` | `50` | Initial slider position (0-100) |
+| `slideMode` | `'hover' \| 'drag'` | `'hover'` | Interaction mode |
+| `showHandlebar` | `boolean` | `true` | Show the drag handle |
+| `autoplay` | `boolean` | `false` | Enable auto-animation |
+| `autoplayDuration` | `number` | `5000` | Duration of one autoplay cycle (ms) |
+
+## Events (Callbacks)
+
+| Callback | Type | Description |
+|----------|------|-------------|
+| `onpercentagechange` | `(percentage: number) => void` | Called when slider position changes |
+| `ondragstart` | `() => void` | Called when drag starts |
+| `ondragend` | `() => void` | Called when drag ends |
+| `onhoverenter` | `() => void` | Called when mouse enters |
+| `onhoverleave` | `() => void` | Called when mouse leaves |
+
+## Snippets
+
+| Snippet | Description |
+|---------|-------------|
+| `firstContent` | Custom content for the left side |
+| `secondContent` | Custom content for the right side |
+| `handle` | Custom handle element |
+
+## Usage
+
+```svelte
+<script>
+  import { Compare } from '$lib/fancy-ui/compare';
+</script>
+
+<!-- Basic usage with images -->
+<Compare
+  firstImage="/before.jpg"
+  secondImage="/after.jpg"
+  class="rounded-lg"
+/>
+
+<!-- Drag mode -->
+<Compare
+  firstImage="/before.jpg"
+  secondImage="/after.jpg"
+  slideMode="drag"
+/>
+
+<!-- With autoplay -->
+<Compare
+  firstImage="/before.jpg"
+  secondImage="/after.jpg"
+  autoplay
+  autoplayDuration={3000}
+/>
+
+<!-- Custom content -->
+<Compare>
+  {#snippet firstContent()}
+    <div class="bg-blue-500 size-full flex items-center justify-center">
+      Before
+    </div>
+  {/snippet}
+  {#snippet secondContent()}
+    <div class="bg-red-500 size-full flex items-center justify-center">
+      After
+    </div>
+  {/snippet}
+</Compare>
+```
+
+## Implementation Notes
+
+- Replaced Vue `emit` with callback props (`onpercentagechange`, etc.)
+- Replaced Vue slots with Svelte snippets
+- Replaced Nuxt Icon with inline SVG
+- Used Svelte 5 runes (`$state`, `$effect`, `$props`)

package/dist/fancy-ui/compare/StarField.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		starsCount?: number;
+		class?: string;
+	}
+
+	let { starsCount = 130, class: className = "" }: Props = $props();
+
+	interface Star {
+		id: number;
+		top: string;
+		left: string;
+		size: number;
+		twinkleDuration: number;
+		driftDuration: number;
+		driftDirection: number;
+		opacityStart: number;
+		opacityEnd: number;
+	}
+
+	function random(min: number, max: number): number {
+		return Math.random() * (max - min) + min;
+	}
+
+	function randomSize(): number {
+		return Math.random() < 0.5 ? 1 : 2;
+	}
+
+	// Generate stars once on component creation
+	const stars: Star[] = Array.from(
+		{ length: starsCount },
+		(_, i): Star => ({
+			id: i,
+			top: `${random(0, 100)}%`,
+			left: `${random(0, 100)}%`,
+			size: randomSize(),
+			twinkleDuration: random(2, 4),
+			driftDuration: random(5, 10),
+			driftDirection: random(-50, 50),
+			opacityStart: random(0.1, 0.3),
+			opacityEnd: random(0.7, 1),
+		})
+	);
+</script>
+
+<div class={cn("absolute inset-0 overflow-hidden", className)}>
+	{#each stars as star (star.id)}
+		<div
+			class="star absolute rounded-full bg-white"
+			style:top={star.top}
+			style:left={star.left}
+			style:width="{star.size}px"
+			style:height="{star.size}px"
+			style:--fancy-ui-twinkle-duration="{star.twinkleDuration}s"
+			style:--fancy-ui-drift-duration="{star.driftDuration}s"
+			style:--fancy-ui-drift-direction="{star.driftDirection}px"
+			style:--fancy-ui-opacity-start={star.opacityStart}
+			style:--fancy-ui-opacity-end={star.opacityEnd}
+		></div>
+	{/each}
+</div>
+
+<style>
+	.star {
+		opacity: var(--fancy-ui-opacity-start);
+		animation:
+			twinkle var(--fancy-ui-twinkle-duration) ease-in-out infinite alternate,
+			drift var(--fancy-ui-drift-duration) linear infinite;
+	}
+
+	@keyframes twinkle {
+		0% {
+			opacity: var(--fancy-ui-opacity-start);
+		}
+		100% {
+			opacity: var(--fancy-ui-opacity-end);
+		}
+	}
+
+	@keyframes drift {
+		0% {
+			transform: translate(0, 0);
+		}
+		25% {
+			transform: translate(
+				var(--fancy-ui-drift-direction),
+				calc(var(--fancy-ui-drift-direction) / 2)
+			);
+		}
+		50% {
+			transform: translate(
+				calc(var(--fancy-ui-drift-direction) / 2),
+				var(--fancy-ui-drift-direction)
+			);
+		}
+		75% {
+			transform: translate(
+				calc(var(--fancy-ui-drift-direction) * -1),
+				calc(var(--fancy-ui-drift-direction) / 2)
+			);
+		}
+		100% {
+			transform: translate(0, 0);
+		}
+	}
+</style>

package/dist/fancy-ui/compare/StarField.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    starsCount?: number;
+    class?: string;
+}
+declare const StarField: import("svelte").Component<Props, {}, "">;
+type StarField = ReturnType<typeof StarField>;
+export default StarField;

package/dist/fancy-ui/compare/index.d.ts

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

package/dist/fancy-ui/compare/index.js

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

package/dist/fancy-ui/confetti/Confetti.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { onMount, setContext } from "svelte";
+	import type { Snippet } from "svelte";
+	import confettiModule from "canvas-confetti";
+	import type {
+		GlobalOptions as ConfettiGlobalOptions,
+		Options as ConfettiOptions,
+		CreateTypes as ConfettiInstance,
+	} from "canvas-confetti";
+
+	interface Props {
+		options?: ConfettiOptions;
+		globalOptions?: ConfettiGlobalOptions;
+		manualstart?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		options = {},
+		globalOptions = {},
+		manualstart = false,
+		class: className = "",
+		children,
+	}: Props = $props();
+
+	let canvasRef: HTMLCanvasElement;
+	let instance: ConfettiInstance | null = null;
+
+	export function fire(opts: ConfettiOptions = {}) {
+		instance?.({ ...options, ...opts });
+	}
+
+	setContext("ConfettiContext", { fire });
+
+	onMount(() => {
+		instance = confettiModule.create(canvasRef, {
+			...globalOptions,
+			resize: true,
+		});
+
+		if (!manualstart) {
+			fire();
+		}
+
+		return () => {
+			if (instance) {
+				instance.reset();
+				instance = null;
+			}
+		};
+	});
+</script>
+
+<div>
+	<canvas bind:this={canvasRef} class={className} aria-hidden="true"></canvas>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/fancy-ui/confetti/Confetti.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { GlobalOptions as ConfettiGlobalOptions, Options as ConfettiOptions } from "canvas-confetti";
+interface Props {
+    options?: ConfettiOptions;
+    globalOptions?: ConfettiGlobalOptions;
+    manualstart?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Confetti: import("svelte").Component<Props, {
+    fire: (opts?: ConfettiOptions) => void;
+}, "">;
+type Confetti = ReturnType<typeof Confetti>;
+export default Confetti;

package/dist/fancy-ui/confetti/Confetti.test.d.ts

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