fancy-ui-svelte 0.2.1

package/dist/fancy-ui/marquee/Marquee.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    class?: string;
+    reverse?: boolean;
+    pauseOnHover?: boolean;
+    vertical?: boolean;
+    repeat?: number;
+    children?: import("svelte").Snippet;
+}
+declare const Marquee: import("svelte").Component<Props, {}, "">;
+type Marquee = ReturnType<typeof Marquee>;
+export default Marquee;

package/dist/fancy-ui/marquee/Marquee.test.d.ts

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

package/dist/fancy-ui/marquee/Marquee.test.js

@@ -0,0 +1,46 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Marquee from "./Marquee.svelte";
+describe("Marquee", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(Marquee);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("has overflow-hidden class", () => {
+        const { container } = render(Marquee);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("overflow-hidden");
+    });
+    it("renders default 4 repeat groups", () => {
+        const { container } = render(Marquee);
+        const groups = container.querySelectorAll(".animate-marquee");
+        expect(groups.length).toBe(4);
+    });
+    it("renders custom repeat count", () => {
+        const { container } = render(Marquee, { props: { repeat: 2 } });
+        const groups = container.querySelectorAll(".animate-marquee");
+        expect(groups.length).toBe(2);
+    });
+    it("uses vertical animation class when vertical", () => {
+        const { container } = render(Marquee, { props: { vertical: true } });
+        const groups = container.querySelectorAll(".animate-marquee-vertical");
+        expect(groups.length).toBe(4);
+    });
+    it("uses flex-col when vertical", () => {
+        const { container } = render(Marquee, { props: { vertical: true } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("flex-col");
+    });
+    it("sets animation-direction to reverse when reverse prop is true", () => {
+        const { container } = render(Marquee, { props: { reverse: true } });
+        const group = container.querySelector(".animate-marquee");
+        expect(group?.style.animationDirection).toBe("reverse");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(Marquee, { props: { class: "my-marquee" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-marquee");
+    });
+});

package/dist/fancy-ui/marquee/ReviewCard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	interface Props {
+		img: string;
+		name: string;
+		username: string;
+		body: string;
+	}
+
+	let { img, name, username, body }: Props = $props();
+</script>
+
+<figure
+	class="relative w-64 cursor-pointer overflow-hidden rounded-xl border border-gray-950/[.1] bg-gray-950/[.01] p-4 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]"
+>
+	<div class="flex flex-row items-center gap-2">
+		<img src={img} class="rounded-full" width="32" height="32" alt="" />
+		<div class="flex flex-col">
+			<span class="text-sm font-medium dark:text-white">
+				{name}
+			</span>
+			<p class="text-xs font-medium dark:text-white/40">{username}</p>
+		</div>
+	</div>
+	<blockquote class="mt-2 text-sm">{body}</blockquote>
+</figure>

package/dist/fancy-ui/marquee/ReviewCard.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    img: string;
+    name: string;
+    username: string;
+    body: string;
+}
+declare const ReviewCard: import("svelte").Component<Props, {}, "">;
+type ReviewCard = ReturnType<typeof ReviewCard>;
+export default ReviewCard;

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

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

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

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

package/dist/fancy-ui/meteors/Meteors.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module>
+	/**
+	 * Meteors - Animated meteor shower effect
+	 *
+	 * Generates N span elements with randomized positions, delays, and durations
+	 * that animate diagonally across the container.
+	 */
+	export interface MeteorsProps {
+		/** Number of meteors to render */
+		count?: number;
+		/** Additional CSS classes applied to each meteor */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let { count = 20, class: className }: MeteorsProps = $props();
+
+	const meteors = $derived(
+		Array.from({ length: count }, () => ({
+			left: `${Math.floor(Math.random() * 800 - 400)}px`,
+			animationDelay: `${(Math.random() * 0.6 + 0.2).toFixed(2)}s`,
+			animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,
+		}))
+	);
+</script>
+
+{#each meteors as meteor, i (i)}
+	<span
+		class={cn(
+			"meteor pointer-events-none absolute top-0 h-0.5 w-0.5 rounded-full bg-slate-500 opacity-0 shadow-[0_0_0_1px_#ffffff10]",
+			"before:absolute before:top-1/2 before:h-px before:w-[50px] before:-translate-y-1/2 before:bg-gradient-to-r before:from-slate-500 before:to-transparent before:content-['']",
+			className
+		)}
+		style="left:{meteor.left};animation-delay:{meteor.animationDelay};animation-duration:{meteor.animationDuration}"
+	></span>
+{/each}
+
+<style>
+	@keyframes meteor-fall {
+		0% {
+			transform: rotate(215deg) translateX(0);
+			opacity: 1;
+		}
+		70% {
+			opacity: 1;
+		}
+		100% {
+			transform: rotate(215deg) translateX(-500px);
+			opacity: 0;
+		}
+	}
+
+	.meteor {
+		animation: meteor-fall 5s linear infinite;
+	}
+</style>

package/dist/fancy-ui/meteors/Meteors.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Meteors - Animated meteor shower effect
+ *
+ * Generates N span elements with randomized positions, delays, and durations
+ * that animate diagonally across the container.
+ */
+export interface MeteorsProps {
+    /** Number of meteors to render */
+    count?: number;
+    /** Additional CSS classes applied to each meteor */
+    class?: string;
+}
+declare const Meteors: import("svelte").Component<MeteorsProps, {}, "">;
+type Meteors = ReturnType<typeof Meteors>;
+export default Meteors;

package/dist/fancy-ui/meteors/Meteors.test.d.ts

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

package/dist/fancy-ui/meteors/Meteors.test.js

@@ -0,0 +1,48 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Meteors from "./Meteors.svelte";
+describe("Meteors", () => {
+    afterEach(cleanup);
+    it("renders the default number of meteor spans (20)", () => {
+        const { container } = render(Meteors);
+        const spans = container.querySelectorAll("span.meteor");
+        expect(spans.length).toBe(20);
+    });
+    it("renders a custom count of meteors", () => {
+        const { container } = render(Meteors, { props: { count: 5 } });
+        const spans = container.querySelectorAll("span.meteor");
+        expect(spans.length).toBe(5);
+    });
+    it("renders zero meteors when count is 0", () => {
+        const { container } = render(Meteors, { props: { count: 0 } });
+        const spans = container.querySelectorAll("span.meteor");
+        expect(spans.length).toBe(0);
+    });
+    it("applies custom class names to each meteor", () => {
+        const { container } = render(Meteors, {
+            props: { count: 3, class: "my-custom-class" },
+        });
+        const spans = container.querySelectorAll("span.meteor");
+        spans.forEach((span) => {
+            expect(span.className).toContain("my-custom-class");
+        });
+    });
+    it("each meteor has a style attribute with left, animation-delay, and animation-duration", () => {
+        const { container } = render(Meteors, { props: { count: 3 } });
+        const spans = container.querySelectorAll("span.meteor");
+        spans.forEach((span) => {
+            const style = span.getAttribute("style") ?? "";
+            expect(style).toContain("left:");
+            expect(style).toContain("animation-delay:");
+            expect(style).toContain("animation-duration:");
+        });
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(Meteors, {
+            props: { count: 1, class: "extra" },
+        });
+        const span = container.querySelector("span.meteor");
+        expect(span.className).toContain("absolute");
+        expect(span.className).toContain("rounded-full");
+    });
+});

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

@@ -0,0 +1,18 @@
+# Meteors
+
+Animated meteor shower effect. Generates N span elements with randomized positions, delays, and durations that animate diagonally across the container.
+
+## Props
+
+| Prop    | Type     | Default | Description                          |
+| ------- | -------- | ------- | ------------------------------------ |
+| `count` | `number` | `20`    | Number of meteors to render          |
+| `class` | `string` | `''`    | Additional CSS classes on each meteor |
+
+## Usage
+
+```svelte
+<div class="relative h-64 w-full overflow-hidden bg-black">
+  <Meteors count={30} />
+</div>
+```

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

@@ -0,0 +1,2 @@
+import Meteors, { type MeteorsProps } from "./Meteors.svelte";
+export { Meteors, type MeteorsProps };

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

@@ -0,0 +1,2 @@
+import Meteors, {} from "./Meteors.svelte";
+export { Meteors };

package/dist/fancy-ui/neon-border/NeonBorder.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	/**
+	 * NeonBorder - Dual-color neon glow border effect
+	 *
+	 * Two gradient layers with blur and drop-shadow create a bicolor neon effect.
+	 * Optional rotation animation with half or full coverage.
+	 */
+	export interface NeonBorderProps {
+		/** First neon color */
+		color1?: string;
+		/** Second neon color */
+		color2?: string;
+		/** Animation type: none (static), half (50% coverage), full (100% coverage) */
+		animationType?: "none" | "half" | "full";
+		/** Animation duration in seconds */
+		duration?: number;
+		/** Additional CSS classes */
+		class?: string;
+		/** Content */
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		color1 = "#0496ff",
+		color2 = "#ff0a54",
+		animationType = "half",
+		duration = 6,
+		class: className,
+		children,
+	}: NeonBorderProps = $props();
+
+	function getWidth(type: "none" | "half" | "full"): number {
+		switch (type) {
+			case "none":
+				return 12;
+			case "half":
+				return 50;
+			case "full":
+				return 100;
+		}
+	}
+
+	const styleVars = $derived(
+		`--neon-duration: ${duration}s; --neon-color1: ${color1}; --neon-color2: ${color2}; --neon-width: ${getWidth(animationType)}%`
+	);
+
+	const animated = $derived(animationType !== "none");
+</script>
+
+<div
+	class={cn(
+		"neon-border-container relative z-10 inline-block h-10 w-full max-w-sm overflow-hidden rounded-lg p-px",
+		className
+	)}
+	style={styleVars}
+>
+	<div class={cn("neon-layer-one rounded-lg", animated && "neon-animated")}></div>
+	<div class={cn("neon-layer-two rounded-lg", animated && "neon-animated")}></div>
+	{@render children?.()}
+</div>
+
+<style>
+	.neon-layer-one {
+		position: absolute;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		filter: blur(1px) drop-shadow(0 0 12px var(--neon-color1));
+		z-index: -1;
+		inset: 0;
+	}
+
+	.neon-layer-one::before {
+		content: "";
+		position: absolute;
+		overflow: hidden;
+		top: 0;
+		left: 0;
+		width: var(--neon-width);
+		height: 100%;
+		background: linear-gradient(
+			135deg,
+			var(--neon-color1),
+			var(--neon-color1),
+			transparent,
+			transparent
+		);
+	}
+
+	.neon-layer-two {
+		position: absolute;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		filter: blur(1px) drop-shadow(0 0 12px var(--neon-color2));
+		z-index: -1;
+		inset: 0;
+	}
+
+	.neon-layer-two::before {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		overflow: hidden;
+		width: var(--neon-width);
+		height: 100%;
+		background: linear-gradient(
+			135deg,
+			transparent,
+			transparent,
+			var(--neon-color2),
+			var(--neon-color2)
+		);
+	}
+
+	@keyframes neon-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.neon-animated {
+		animation: neon-rotate var(--neon-duration) linear infinite;
+	}
+</style>

package/dist/fancy-ui/neon-border/NeonBorder.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+/**
+ * NeonBorder - Dual-color neon glow border effect
+ *
+ * Two gradient layers with blur and drop-shadow create a bicolor neon effect.
+ * Optional rotation animation with half or full coverage.
+ */
+export interface NeonBorderProps {
+    /** First neon color */
+    color1?: string;
+    /** Second neon color */
+    color2?: string;
+    /** Animation type: none (static), half (50% coverage), full (100% coverage) */
+    animationType?: "none" | "half" | "full";
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Additional CSS classes */
+    class?: string;
+    /** Content */
+    children?: Snippet;
+}
+declare const NeonBorder: import("svelte").Component<NeonBorderProps, {}, "">;
+type NeonBorder = ReturnType<typeof NeonBorder>;
+export default NeonBorder;

package/dist/fancy-ui/neon-border/NeonBorder.test.d.ts

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

package/dist/fancy-ui/neon-border/NeonBorder.test.js

@@ -0,0 +1,80 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import NeonBorder from "./NeonBorder.svelte";
+describe("NeonBorder", () => {
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(NeonBorder);
+        const wrapper = container.querySelector(".neon-border-container");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("renders two neon layer divs", () => {
+        const { container } = render(NeonBorder);
+        const layerOne = container.querySelector(".neon-layer-one");
+        const layerTwo = container.querySelector(".neon-layer-two");
+        expect(layerOne).toBeInTheDocument();
+        expect(layerTwo).toBeInTheDocument();
+    });
+    it('applies animation class when animationType is not "none"', () => {
+        const { container } = render(NeonBorder, {
+            props: { animationType: "half" },
+        });
+        const layerOne = container.querySelector(".neon-layer-one");
+        expect(layerOne?.className).toContain("neon-animated");
+    });
+    it('does not apply animation class when animationType is "none"', () => {
+        const { container } = render(NeonBorder, {
+            props: { animationType: "none" },
+        });
+        const layerOne = container.querySelector(".neon-layer-one");
+        expect(layerOne?.className).not.toContain("neon-animated");
+    });
+    it("sets CSS custom properties from props", () => {
+        const { container } = render(NeonBorder, {
+            props: { color1: "#ff0000", color2: "#00ff00", duration: 10 },
+        });
+        const wrapper = container.querySelector(".neon-border-container");
+        const style = wrapper.getAttribute("style") ?? "";
+        expect(style).toContain("--neon-color1: #ff0000");
+        expect(style).toContain("--neon-color2: #00ff00");
+        expect(style).toContain("--neon-duration: 10s");
+    });
+    it("sets neon-width to 50% for half animation type", () => {
+        const { container } = render(NeonBorder, {
+            props: { animationType: "half" },
+        });
+        const wrapper = container.querySelector(".neon-border-container");
+        const style = wrapper.getAttribute("style") ?? "";
+        expect(style).toContain("--neon-width: 50%");
+    });
+    it("sets neon-width to 100% for full animation type", () => {
+        const { container } = render(NeonBorder, {
+            props: { animationType: "full" },
+        });
+        const wrapper = container.querySelector(".neon-border-container");
+        const style = wrapper.getAttribute("style") ?? "";
+        expect(style).toContain("--neon-width: 100%");
+    });
+    it("sets neon-width to 12% for none animation type", () => {
+        const { container } = render(NeonBorder, {
+            props: { animationType: "none" },
+        });
+        const wrapper = container.querySelector(".neon-border-container");
+        const style = wrapper.getAttribute("style") ?? "";
+        expect(style).toContain("--neon-width: 12%");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(NeonBorder, {
+            props: { class: "custom-neon" },
+        });
+        const wrapper = container.querySelector(".neon-border-container");
+        expect(wrapper?.className).toContain("custom-neon");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(NeonBorder, { props: { class: "extra" } });
+        const wrapper = container.querySelector(".neon-border-container");
+        expect(wrapper?.className).toContain("relative");
+        expect(wrapper?.className).toContain("overflow-hidden");
+        expect(wrapper?.className).toContain("rounded-lg");
+    });
+});

package/dist/fancy-ui/neon-border/README.md

@@ -0,0 +1,27 @@
+# NeonBorder
+
+Dual-color neon glow border effect. Two gradient layers with blur and drop-shadow create a bicolor neon effect with optional rotation animation.
+
+## Props
+
+| Prop             | Type                            | Default     | Description                        |
+| ---------------- | ------------------------------- | ----------- | ---------------------------------- |
+| `color1`         | `string`                        | `'#0496ff'` | First neon color                   |
+| `color2`         | `string`                        | `'#ff0a54'` | Second neon color                  |
+| `animationType`  | `'none' \| 'half' \| 'full'`   | `'half'`    | Animation coverage type            |
+| `duration`       | `number`                        | `6`         | Animation duration in seconds      |
+| `class`          | `string`                        | `''`        | Additional CSS classes             |
+
+## Slots
+
+- **default** — Content rendered inside the neon border
+
+## Usage
+
+```svelte
+<NeonBorder color1="#0496ff" color2="#ff0a54" animationType="half">
+  <div class="bg-background rounded-lg px-4 py-2 text-center">
+    Neon content
+  </div>
+</NeonBorder>
+```

package/dist/fancy-ui/neon-border/index.d.ts

@@ -0,0 +1,2 @@
+import NeonBorder, { type NeonBorderProps } from "./NeonBorder.svelte";
+export { NeonBorder, type NeonBorderProps };

package/dist/fancy-ui/neon-border/index.js

@@ -0,0 +1,2 @@
+import NeonBorder, {} from "./NeonBorder.svelte";
+export { NeonBorder };

package/dist/fancy-ui/number-ticker/NumberTicker.svelte

@@ -0,0 +1,126 @@
+<script lang="ts" module>
+	/**
+	 * NumberTicker - Animated number counter
+	 *
+	 * Animates a number from 0 to `value` (or vice versa) with easing.
+	 * Triggers when the element enters the viewport via IntersectionObserver.
+	 * Formatted using Intl.NumberFormat.
+	 */
+	export interface NumberTickerProps {
+		/** Target number to animate to */
+		value?: number;
+		/** Animation direction: "up" counts 0→value, "down" counts value→0 */
+		direction?: "up" | "down";
+		/** Animation duration in ms */
+		duration?: number;
+		/** Delay before animation starts (ms) */
+		delay?: number;
+		/** Number of decimal places to display */
+		decimalPlaces?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+
+	let {
+		value = 0,
+		direction = "up",
+		duration = 1000,
+		delay = 0,
+		decimalPlaces = 0,
+		class: className,
+	}: NumberTickerProps = $props();
+
+	let spanRef: HTMLSpanElement;
+	let initialValue = $derived(direction === "down" ? value : 0);
+	let displayValue = $state(0);
+	let hasAnimated = false;
+	let animationFrameId: number | null = null;
+
+	// Set initial display value
+	$effect(() => {
+		if (!hasAnimated) {
+			displayValue = initialValue;
+		}
+	});
+
+	// Easing: easeOutCubic
+	function easeOutCubic(t: number): number {
+		return 1 - Math.pow(1 - t, 3);
+	}
+
+	function animate(target: number) {
+		const start = displayValue;
+		const startTime = performance.now() + delay;
+
+		function tick(now: number) {
+			if (now < startTime) {
+				animationFrameId = requestAnimationFrame(tick);
+				return;
+			}
+			const elapsed = now - startTime;
+			const progress = Math.min(elapsed / duration, 1);
+			const easedProgress = easeOutCubic(progress);
+
+			displayValue = start + (target - start) * easedProgress;
+
+			if (progress < 1) {
+				animationFrameId = requestAnimationFrame(tick);
+			}
+		}
+
+		animationFrameId = requestAnimationFrame(tick);
+	}
+
+	let formattedValue = $derived(
+		new Intl.NumberFormat("en-US", {
+			minimumFractionDigits: decimalPlaces,
+			maximumFractionDigits: decimalPlaces,
+		}).format(Number(displayValue.toFixed(decimalPlaces)))
+	);
+
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting && !hasAnimated) {
+					hasAnimated = true;
+					const target = direction === "down" ? 0 : value;
+					animate(target);
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0 }
+		);
+
+		observer.observe(spanRef);
+
+		return () => {
+			observer.disconnect();
+			if (animationFrameId) cancelAnimationFrame(animationFrameId);
+		};
+	});
+
+	// Re-animate when value prop changes after initial animation
+	let animTarget = $derived(direction === "down" ? 0 : value);
+	$effect(() => {
+		// Access derived to track changes
+		const target = animTarget;
+		if (hasAnimated) {
+			animate(target);
+		}
+	});
+</script>
+
+<span
+	bind:this={spanRef}
+	class={cn(
+		"number-ticker inline-block tracking-wider text-black tabular-nums dark:text-white",
+		className
+	)}
+>
+	{formattedValue}
+</span>