fancy-ui-svelte 0.2.1

package/dist/fancy-ui/confetti/Confetti.test.js

@@ -0,0 +1,39 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import Confetti from "./Confetti.svelte";
+// canvas-confetti requires actual canvas context which jsdom doesn't support,
+// so we mock the module and just test DOM structure
+vi.mock("canvas-confetti", () => ({
+    default: {
+        create: () => {
+            const fn = vi.fn();
+            fn.reset = vi.fn();
+            return fn;
+        },
+    },
+}));
+describe("Confetti", () => {
+    afterEach(cleanup);
+    it("renders canvas element", () => {
+        const { container } = render(Confetti);
+        const canvas = container.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+    it("renders wrapper div", () => {
+        const { container } = render(Confetti);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+        expect(div.tagName).toBe("DIV");
+    });
+    it("applies custom class to canvas", () => {
+        const { container } = render(Confetti, { props: { class: "my-confetti" } });
+        const canvas = container.querySelector("canvas");
+        expect(canvas?.className).toContain("my-confetti");
+    });
+    it("canvas is inside wrapper div", () => {
+        const { container } = render(Confetti);
+        const div = container.firstElementChild;
+        const canvas = div?.querySelector("canvas");
+        expect(canvas).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	import type { Snippet } from "svelte";
+	import confetti from "canvas-confetti";
+	import type { Options as ConfettiOptions } from "canvas-confetti";
+
+	interface Props {
+		options?: ConfettiOptions;
+		children?: Snippet;
+	}
+
+	let { options = {}, children }: Props = $props();
+
+	const confettiContext = getContext<{ fire: (opts?: ConfettiOptions) => void } | undefined>(
+		"ConfettiContext"
+	);
+
+	function handleClick(event: MouseEvent) {
+		const target = event.currentTarget as HTMLElement;
+		const rect = target.getBoundingClientRect();
+		const x = rect.left + rect.width / 2;
+		const y = rect.top + rect.height / 2;
+
+		const origin = {
+			x: x / window.innerWidth,
+			y: y / window.innerHeight,
+		};
+
+		if (confettiContext) {
+			confettiContext.fire({ ...options, origin });
+		} else {
+			confetti({ ...options, origin });
+		}
+	}
+</script>
+
+<button onclick={handleClick}>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { Options as ConfettiOptions } from "canvas-confetti";
+interface Props {
+    options?: ConfettiOptions;
+    children?: Snippet;
+}
+declare const ConfettiButton: import("svelte").Component<Props, {}, "">;
+type ConfettiButton = ReturnType<typeof ConfettiButton>;
+export default ConfettiButton;

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

@@ -0,0 +1,22 @@
+# Confetti
+
+Confetti celebration effect powered by canvas-confetti.
+
+## Components
+
+### Confetti
+Canvas wrapper that creates a confetti instance.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `ConfettiOptions` | `{}` | Default confetti options |
+| `globalOptions` | `ConfettiGlobalOptions` | `{}` | Canvas creation options |
+| `manualstart` | `boolean` | `false` | Skip auto-fire on mount |
+| `class` | `string` | `''` | Canvas CSS classes |
+
+### ConfettiButton
+Button that fires confetti from its position.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `ConfettiOptions` | `{}` | Confetti options for this button |

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

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

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

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

package/dist/fancy-ui/container-scroll/ContainerScroll.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		titleContent?: Snippet;
+		cardContent?: Snippet;
+	}
+
+	let { class: className = "", titleContent, cardContent }: Props = $props();
+
+	let containerRef: HTMLDivElement;
+	let isMobile = $state(false);
+	let scrollYProgress = $state(0);
+
+	let scaleDimensions = $derived(isMobile ? [0.7, 0.9] : [1.05, 1]);
+	let rotate = $derived(20 * (1 - scrollYProgress));
+	let scale = $derived(
+		scaleDimensions[0] + (scaleDimensions[1] - scaleDimensions[0]) * scrollYProgress
+	);
+	let translateY = $derived(-100 * scrollYProgress);
+
+	function updateIsMobile() {
+		isMobile = window.innerWidth <= 768;
+	}
+
+	function updateScroll() {
+		if (!containerRef) return;
+		const rect = containerRef.getBoundingClientRect();
+		const windowHeight = window.innerHeight;
+		const progress = 1 - Math.max(0, rect.bottom - window.scrollY) / windowHeight;
+		scrollYProgress = Math.max(0, Math.min(1, progress));
+	}
+
+	onMount(() => {
+		updateIsMobile();
+		updateScroll();
+
+		window.addEventListener("resize", updateIsMobile);
+		window.addEventListener("scroll", updateScroll, { passive: true });
+		window.addEventListener("resize", updateScroll, { passive: true });
+
+		return () => {
+			window.removeEventListener("resize", updateIsMobile);
+			window.removeEventListener("scroll", updateScroll);
+			window.removeEventListener("resize", updateScroll);
+		};
+	});
+</script>
+
+<div
+	bind:this={containerRef}
+	class={cn(
+		"relative flex h-[60rem] items-center justify-center p-2 md:h-[80rem] md:p-20",
+		className
+	)}
+>
+	<div class="relative w-full py-10 md:py-40" style="perspective: 1000px">
+		<!-- Title -->
+		<div style="transform: translateY({translateY}px)" class="mx-auto max-w-5xl text-center">
+			{#if titleContent}
+				{@render titleContent()}
+			{/if}
+		</div>
+
+		<!-- Card -->
+		<div
+			style="transform: rotateX({rotate}deg) scale({scale}); box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;"
+			class="mx-auto -mt-12 h-[30rem] w-full max-w-5xl rounded-[30px] border-4 border-[#6C6C6C] bg-[#222222] p-2 shadow-2xl md:h-[40rem] md:p-6"
+		>
+			<div
+				class="size-full overflow-hidden rounded-2xl bg-gray-100 md:rounded-2xl md:p-4 dark:bg-zinc-900"
+			>
+				{#if cardContent}
+					{@render cardContent()}
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

package/dist/fancy-ui/container-scroll/ContainerScroll.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    titleContent?: Snippet;
+    cardContent?: Snippet;
+}
+declare const ContainerScroll: import("svelte").Component<Props, {}, "">;
+type ContainerScroll = ReturnType<typeof ContainerScroll>;
+export default ContainerScroll;

package/dist/fancy-ui/container-scroll/ContainerScroll.test.d.ts

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

package/dist/fancy-ui/container-scroll/ContainerScroll.test.js

@@ -0,0 +1,34 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import ContainerScroll from "./ContainerScroll.svelte";
+describe("ContainerScroll", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(ContainerScroll);
+        const wrapper = container.firstElementChild;
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("has perspective container", () => {
+        const { container } = render(ContainerScroll);
+        const perspectiveDiv = container.querySelector('[style*="perspective: 1000px"]');
+        expect(perspectiveDiv).toBeInTheDocument();
+    });
+    it("renders card container", () => {
+        const { container } = render(ContainerScroll);
+        const card = container.querySelector(".rounded-\\[30px\\]");
+        expect(card).toBeInTheDocument();
+    });
+    it("applies custom class", () => {
+        const { container } = render(ContainerScroll, {
+            props: { class: "my-scroll" },
+        });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain("my-scroll");
+    });
+    it("has initial rotation transform", () => {
+        const { container } = render(ContainerScroll);
+        const card = container.querySelector(".rounded-\\[30px\\]");
+        const style = card?.getAttribute("style") ?? "";
+        expect(style).toContain("rotateX(");
+    });
+});

package/dist/fancy-ui/container-scroll/README.md

@@ -0,0 +1,28 @@
+# ContainerScroll
+
+A scroll-driven animation container that rotates and scales a card from a tilted perspective to flat as the user scrolls.
+
+## Props
+
+| Prop    | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `""`    | Additional CSS classes |
+
+## Snippets
+
+- `titleContent` — Title section (translates up on scroll)
+- `cardContent` — Card content (rotates and scales on scroll)
+
+## Usage
+
+```svelte
+<ContainerScroll>
+  {#snippet titleContent()}
+    <h2 class="text-4xl font-bold">Scroll Animation</h2>
+    <p class="text-muted-foreground">Scroll down to see the effect</p>
+  {/snippet}
+  {#snippet cardContent()}
+    <img src="/screenshot.png" alt="Demo" class="size-full object-cover" />
+  {/snippet}
+</ContainerScroll>
+```

package/dist/fancy-ui/container-scroll/index.d.ts

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

package/dist/fancy-ui/container-scroll/index.js

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

package/dist/fancy-ui/container-text-flip/ContainerTextFlip.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+
+	interface Props {
+		words?: string[];
+		interval?: number;
+		animationDuration?: number;
+		class?: string;
+		textClass?: string;
+	}
+
+	let {
+		words = ["better", "modern", "beautiful", "awesome"],
+		interval = 3000,
+		animationDuration = 700,
+		class: className = "",
+		textClass = "",
+	}: Props = $props();
+
+	let currentWordIndex = $state(0);
+	let currentWord = $derived(words[currentWordIndex] ?? "");
+	let letters = $derived(currentWord.split(""));
+
+	onMount(() => {
+		const id = setInterval(() => {
+			currentWordIndex = (currentWordIndex + 1) % words.length;
+		}, interval);
+
+		return () => clearInterval(id);
+	});
+</script>
+
+<p
+	class={cn(
+		"relative inline-block rounded-lg px-4 pt-2 pb-3 text-center text-4xl font-bold text-black md:text-7xl dark:text-white",
+		"[background:linear-gradient(to_bottom,#f3f4f6,#e5e7eb)]",
+		"shadow-[inset_0_-1px_#d1d5db,inset_0_0_0_1px_#d1d5db,_0_4px_8px_#d1d5db]",
+		"dark:[background:linear-gradient(to_bottom,#374151,#1f2937)]",
+		"dark:shadow-[inset_0_-1px_#10171e,inset_0_0_0_1px_hsla(205,89%,46%,.24),_0_4px_8px_#00000052]",
+		className
+	)}
+>
+	<span class={cn("inline-block", textClass)}>
+		<span class="inline-block">
+			{#key currentWord}
+				{#each letters as letter, index}
+					<span
+						class="text-flip-letter inline-block"
+						style="animation-delay: {index * 0.02}s; animation-duration: {animationDuration}ms;"
+						>{letter === " " ? "\u00A0" : letter}</span
+					>
+				{/each}
+			{/key}
+		</span>
+	</span>
+</p>
+
+<style>
+	:global {
+		@keyframes text-flip-in {
+			0% {
+				opacity: 0;
+				filter: blur(10px);
+			}
+			100% {
+				opacity: 1;
+				filter: blur(0px);
+			}
+		}
+	}
+
+	.text-flip-letter {
+		animation: text-flip-in ease-in-out forwards;
+		opacity: 0;
+		filter: blur(10px);
+	}
+</style>

package/dist/fancy-ui/container-text-flip/ContainerTextFlip.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    words?: string[];
+    interval?: number;
+    animationDuration?: number;
+    class?: string;
+    textClass?: string;
+}
+declare const ContainerTextFlip: import("svelte").Component<Props, {}, "">;
+type ContainerTextFlip = ReturnType<typeof ContainerTextFlip>;
+export default ContainerTextFlip;

package/dist/fancy-ui/container-text-flip/ContainerTextFlip.test.d.ts

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

package/dist/fancy-ui/container-text-flip/ContainerTextFlip.test.js

@@ -0,0 +1,46 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import ContainerTextFlip from "./ContainerTextFlip.svelte";
+describe("ContainerTextFlip", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(ContainerTextFlip);
+        const el = container.querySelector("p");
+        expect(el).toBeInTheDocument();
+    });
+    it("renders first word by default", () => {
+        const { container } = render(ContainerTextFlip, {
+            props: { words: ["hello", "world"] },
+        });
+        const letters = container.querySelectorAll(".text-flip-letter");
+        const text = Array.from(letters)
+            .map((l) => l.textContent)
+            .join("");
+        expect(text).toBe("hello");
+    });
+    it("applies custom class", () => {
+        const { container } = render(ContainerTextFlip, {
+            props: { class: "my-flip" },
+        });
+        const el = container.querySelector("p");
+        expect(el?.className).toContain("my-flip");
+    });
+    it("renders letters with staggered animation delay", () => {
+        const { container } = render(ContainerTextFlip, {
+            props: { words: ["abc"] },
+        });
+        const letters = container.querySelectorAll(".text-flip-letter");
+        expect(letters.length).toBe(3);
+        const firstDelay = letters[0].style.animationDelay;
+        const secondDelay = letters[1].style.animationDelay;
+        expect(firstDelay).toBe("0s");
+        expect(secondDelay).toBe("0.02s");
+    });
+    it("applies custom animation duration", () => {
+        const { container } = render(ContainerTextFlip, {
+            props: { words: ["hi"], animationDuration: 500 },
+        });
+        const letter = container.querySelector(".text-flip-letter");
+        expect(letter.style.animationDuration).toBe("500ms");
+    });
+});

package/dist/fancy-ui/container-text-flip/README.md

@@ -0,0 +1,22 @@
+# ContainerTextFlip
+
+A text container that cycles through words with per-character blur-to-clear animation.
+
+## Props
+
+| Prop                | Type       | Default                                    | Description               |
+| ------------------- | ---------- | ------------------------------------------ | ------------------------- |
+| `words`             | `string[]` | `["better","modern","beautiful","awesome"]` | Words to cycle through    |
+| `interval`          | `number`   | `3000`                                     | Time between words (ms)   |
+| `animationDuration` | `number`   | `700`                                      | Letter animation (ms)     |
+| `class`             | `string`   | `""`                                       | Additional CSS classes    |
+| `textClass`         | `string`   | `""`                                       | CSS classes for text span |
+
+## Usage
+
+```svelte
+<ContainerTextFlip
+  words={["stunning", "brilliant", "amazing"]}
+  interval={2500}
+/>
+```

package/dist/fancy-ui/container-text-flip/index.d.ts

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

package/dist/fancy-ui/container-text-flip/index.js

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