fancy-ui-svelte 0.2.1

package/dist/fancy-ui/ripple/Ripple.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+
+	interface Props {
+		baseCircleSize?: number;
+		baseCircleOpacity?: number;
+		spaceBetweenCircle?: number;
+		circleOpacityDowngradeRatio?: number;
+		circleClass?: string;
+		waveSpeed?: number;
+		numberOfCircles?: number;
+		class?: string;
+	}
+
+	let {
+		baseCircleSize = 210,
+		baseCircleOpacity = 0.24,
+		spaceBetweenCircle = 70,
+		circleOpacityDowngradeRatio = 0.03,
+		circleClass = "",
+		waveSpeed = 80,
+		numberOfCircles = 7,
+		class: className = "",
+	}: Props = $props();
+
+	let circles = $derived(
+		Array.from({ length: numberOfCircles }, (_, i) => ({
+			size: baseCircleSize + i * spaceBetweenCircle,
+			opacity: baseCircleOpacity - i * circleOpacityDowngradeRatio,
+			delay: i * waveSpeed,
+			borderStyle: i === numberOfCircles - 1 ? "dashed" : "solid",
+		}))
+	);
+</script>
+
+<div class={cn("absolute inset-0", className)} aria-hidden="true">
+	{#each circles as circle, i (i)}
+		<div
+			class={cn(
+				"animate-ripple-circle absolute rounded-full shadow-xl motion-reduce:animate-none",
+				circleClass
+			)}
+			style="width: {circle.size}px; height: {circle.size}px; opacity: {circle.opacity}; animation-delay: {circle.delay}ms; border-style: {circle.borderStyle}; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); border-width: 1px;"
+		></div>
+	{/each}
+</div>
+
+<style>
+	:global {
+		@keyframes ripple-effect {
+			0%,
+			100% {
+				transform: translate(-50%, -50%) scale(1);
+			}
+			50% {
+				transform: translate(-50%, -50%) scale(0.9);
+			}
+		}
+	}
+
+	.animate-ripple-circle {
+		animation: ripple-effect 2s ease-in-out infinite;
+	}
+</style>

package/dist/fancy-ui/ripple/Ripple.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    baseCircleSize?: number;
+    baseCircleOpacity?: number;
+    spaceBetweenCircle?: number;
+    circleOpacityDowngradeRatio?: number;
+    circleClass?: string;
+    waveSpeed?: number;
+    numberOfCircles?: number;
+    class?: string;
+}
+declare const Ripple: import("svelte").Component<Props, {}, "">;
+type Ripple = ReturnType<typeof Ripple>;
+export default Ripple;

package/dist/fancy-ui/ripple/Ripple.test.d.ts

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

package/dist/fancy-ui/ripple/Ripple.test.js

@@ -0,0 +1,81 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Ripple from "./Ripple.svelte";
+describe("Ripple", () => {
+    afterEach(cleanup);
+    it("renders correct number of circles (default 7)", () => {
+        const { container } = render(Ripple);
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        expect(circles.length).toBe(7);
+    });
+    it("renders with custom numberOfCircles", () => {
+        const { container } = render(Ripple, { props: { numberOfCircles: 3 } });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        expect(circles.length).toBe(3);
+    });
+    it("renders with numberOfCircles set to 10", () => {
+        const { container } = render(Ripple, { props: { numberOfCircles: 10 } });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        expect(circles.length).toBe(10);
+    });
+    it("applies circleClass to each circle", () => {
+        const { container } = render(Ripple, {
+            props: { numberOfCircles: 3, circleClass: "my-circle" },
+        });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        circles.forEach((circle) => {
+            expect(circle.className).toContain("my-circle");
+        });
+    });
+    it("applies custom class to container", () => {
+        const { container } = render(Ripple, { props: { class: "my-ripple" } });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain("my-ripple");
+    });
+    it("preserves base classes on container", () => {
+        const { container } = render(Ripple, { props: { class: "extra" } });
+        const wrapper = container.firstElementChild;
+        expect(wrapper?.className).toContain("absolute");
+        expect(wrapper?.className).toContain("inset-0");
+    });
+    it("last circle has dashed border style", () => {
+        const { container } = render(Ripple, { props: { numberOfCircles: 5 } });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        const lastCircle = circles[circles.length - 1];
+        const style = lastCircle.getAttribute("style") ?? "";
+        expect(style).toContain("border-style: dashed");
+    });
+    it("other circles have solid border style", () => {
+        const { container } = render(Ripple, { props: { numberOfCircles: 5 } });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        for (let i = 0; i < circles.length - 1; i++) {
+            const style = circles[i].getAttribute("style") ?? "";
+            expect(style).toContain("border-style: solid");
+        }
+    });
+    it("circle sizes match baseCircleSize + index * spaceBetweenCircle", () => {
+        const baseCircleSize = 100;
+        const spaceBetweenCircle = 50;
+        const numberOfCircles = 4;
+        const { container } = render(Ripple, {
+            props: { baseCircleSize, spaceBetweenCircle, numberOfCircles },
+        });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        circles.forEach((circle, i) => {
+            const expectedSize = baseCircleSize + i * spaceBetweenCircle;
+            const style = circle.getAttribute("style") ?? "";
+            expect(style).toContain(`width: ${expectedSize}px`);
+            expect(style).toContain(`height: ${expectedSize}px`);
+        });
+    });
+    it("circle sizes use defaults (210 base, 70 spacing)", () => {
+        const { container } = render(Ripple, { props: { numberOfCircles: 3 } });
+        const circles = container.querySelectorAll(".animate-ripple-circle");
+        const expectedSizes = [210, 280, 350];
+        circles.forEach((circle, i) => {
+            const style = circle.getAttribute("style") ?? "";
+            expect(style).toContain(`width: ${expectedSizes[i]}px`);
+            expect(style).toContain(`height: ${expectedSizes[i]}px`);
+        });
+    });
+});

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

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

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

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

package/dist/fancy-ui/ripple-button/RippleButton.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	export interface RippleButtonProps extends Omit<HTMLButtonAttributes, "class"> {
+		/** Additional CSS classes */
+		class?: string;
+		/** Color of the ripple effect */
+		rippleColor?: string;
+		/** Animation duration in milliseconds */
+		duration?: number;
+		/** Button content */
+		children?: Snippet;
+	}
+
+	interface Ripple {
+		x: number;
+		y: number;
+		size: number;
+		key: number;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		rippleColor = "#ADD8E6",
+		duration = 600,
+		children,
+		onclick,
+		...restProps
+	}: RippleButtonProps = $props();
+
+	let buttonRef: HTMLButtonElement;
+	let ripples = $state<Ripple[]>([]);
+
+	function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		createRipple(event);
+		// Call the original onclick handler if provided
+		if (onclick && typeof onclick === "function") {
+			onclick(event);
+		}
+	}
+
+	function createRipple(event: MouseEvent) {
+		if (!buttonRef) return;
+
+		const rect = buttonRef.getBoundingClientRect();
+		const size = Math.max(rect.width, rect.height);
+		const x = event.clientX - rect.left - size / 2;
+		const y = event.clientY - rect.top - size / 2;
+
+		const newRipple: Ripple = { x, y, size, key: Date.now() };
+		ripples = [...ripples, newRipple];
+
+		// Remove ripple after animation completes
+		setTimeout(() => {
+			ripples = ripples.filter((r) => r.key !== newRipple.key);
+		}, duration);
+	}
+</script>
+
+<button
+	bind:this={buttonRef}
+	class={cn(
+		"relative flex cursor-pointer items-center justify-center overflow-hidden",
+		"bg-background text-primary rounded-lg border-2 px-4 py-2 text-center",
+		className
+	)}
+	style="--ripple-duration: {duration}ms"
+	onclick={handleClick}
+	{...restProps}
+>
+	<div class="relative z-10">
+		{@render children?.()}
+	</div>
+
+	<span class="pointer-events-none absolute inset-0">
+		{#each ripples as ripple (ripple.key)}
+			<span
+				class="ripple-animation absolute rounded-full opacity-30"
+				style="
+					width: {ripple.size}px;
+					height: {ripple.size}px;
+					top: {ripple.y}px;
+					left: {ripple.x}px;
+					background-color: {rippleColor};
+				"
+			></span>
+		{/each}
+	</span>
+</button>
+
+<style>
+	@keyframes rippling {
+		0% {
+			transform: scale(0);
+			opacity: 0.3;
+		}
+		100% {
+			transform: scale(2);
+			opacity: 0;
+		}
+	}
+
+	.ripple-animation {
+		animation: rippling var(--ripple-duration, 600ms) ease-out forwards;
+	}
+</style>

package/dist/fancy-ui/ripple-button/RippleButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+export interface RippleButtonProps extends Omit<HTMLButtonAttributes, "class"> {
+    /** Additional CSS classes */
+    class?: string;
+    /** Color of the ripple effect */
+    rippleColor?: string;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Button content */
+    children?: Snippet;
+}
+declare const RippleButton: import("svelte").Component<RippleButtonProps, {}, "">;
+type RippleButton = ReturnType<typeof RippleButton>;
+export default RippleButton;

package/dist/fancy-ui/ripple-button/RippleButton.test.d.ts

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

package/dist/fancy-ui/ripple-button/RippleButton.test.js

@@ -0,0 +1,44 @@
+import { render, screen, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import RippleButton from "./RippleButton.svelte";
+describe("RippleButton", () => {
+    afterEach(cleanup);
+    it("renders a button element", () => {
+        render(RippleButton);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("has overflow-hidden class", () => {
+        render(RippleButton);
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("overflow-hidden");
+    });
+    it("has rounded-lg class", () => {
+        render(RippleButton);
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("rounded-lg");
+    });
+    it("sets --ripple-duration CSS custom property", () => {
+        render(RippleButton, { props: { duration: 800 } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--ripple-duration: 800ms");
+    });
+    it("applies custom class names", () => {
+        render(RippleButton, { props: { class: "my-ripple" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("my-ripple");
+    });
+    it("preserves base classes when custom class is added", () => {
+        render(RippleButton, { props: { class: "extra" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("overflow-hidden");
+        expect(button.className).toContain("rounded-lg");
+    });
+    it("forwards native button attributes", () => {
+        render(RippleButton, {
+            props: { disabled: true, "aria-label": "Click me" },
+        });
+        const button = screen.getByRole("button");
+        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute("aria-label", "Click me");
+    });
+});

package/dist/fancy-ui/ripple-button/index.d.ts

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

package/dist/fancy-ui/ripple-button/index.js

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

package/dist/fancy-ui/shimmer-button/README.md

@@ -0,0 +1,10 @@
+# ShimmerButton
+
+## Implementation Details
+
+- Pure CSS animation, no JS state needed
+- Props use `$props()` with Svelte 5 syntax
+- Scoped keyframes (`shimmer-slide`, `spin-around`) via `<style>` block
+- CSS variables set via inline `style` attribute
+- Uses `{@render children?.()}` for slot content
+- Spreads `...restProps` for native button attributes

package/dist/fancy-ui/shimmer-button/ShimmerButton.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type BaseProps = {
+		/** Shimmer highlight color */
+		shimmerColor?: string;
+		/** Thickness of the shimmer border */
+		shimmerSize?: string;
+		/** Button border radius */
+		borderRadius?: string;
+		/** Duration of the shimmer animation cycle */
+		shimmerDuration?: string;
+		/** Button background color */
+		background?: string;
+		/** Custom CSS class */
+		class?: string;
+		/** Button content */
+		children?: Snippet;
+	};
+
+	export type ShimmerButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps>;
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		shimmerColor = "#ffffff",
+		shimmerSize = "0.05em",
+		borderRadius = "100px",
+		shimmerDuration = "3s",
+		background = "rgba(0, 0, 0, 1)",
+		children,
+		...restProps
+	}: ShimmerButtonProps = $props();
+
+	const styleVars = $derived(
+		`--spread: 90deg; --shimmer-color: ${shimmerColor}; --radius: ${borderRadius}; --speed: ${shimmerDuration}; --cut: ${shimmerSize}; --bg: ${background}`
+	);
+</script>
+
+<button
+	class={cn(
+		"shimmer-button group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)] dark:text-black",
+		"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+		className
+	)}
+	style={styleVars}
+	{...restProps}
+>
+	<!-- Shimmer layer -->
+	<div class="[container-type:size] absolute inset-0 -z-30 overflow-visible blur-[2px]">
+		<div
+			class="shimmer-slide absolute inset-0 [aspect-ratio:1] h-[100cqh] [border-radius:0] [mask:none]"
+		>
+			<div
+				class="spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"
+			></div>
+		</div>
+	</div>
+
+	<!-- Content -->
+	{@render children?.()}
+
+	<!-- Inner shadow overlay -->
+	<div
+		class={cn(
+			"insert-0 absolute size-full",
+			"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+			"transform-gpu transition-all duration-300 ease-in-out",
+			"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+			"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
+		)}
+	></div>
+
+	<!-- Background fill -->
+	<div
+		class="absolute [inset:var(--cut)] -z-20 [border-radius:var(--radius)] [background:var(--bg)]"
+	></div>
+</button>
+
+<style>
+	@keyframes shimmer-slide {
+		to {
+			transform: translate(calc(100cqw - 100%), 0);
+		}
+	}
+
+	@keyframes spin-around {
+		0% {
+			transform: translateZ(0) rotate(0);
+		}
+		15%,
+		35% {
+			transform: translateZ(0) rotate(90deg);
+		}
+		65%,
+		85% {
+			transform: translateZ(0) rotate(270deg);
+		}
+		100% {
+			transform: translateZ(0) rotate(360deg);
+		}
+	}
+
+	.shimmer-slide {
+		animation: shimmer-slide var(--speed) ease-in-out infinite alternate;
+	}
+
+	.spin-around {
+		animation: spin-around calc(var(--speed) * 2) infinite linear;
+	}
+</style>

package/dist/fancy-ui/shimmer-button/ShimmerButton.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type BaseProps = {
+    /** Shimmer highlight color */
+    shimmerColor?: string;
+    /** Thickness of the shimmer border */
+    shimmerSize?: string;
+    /** Button border radius */
+    borderRadius?: string;
+    /** Duration of the shimmer animation cycle */
+    shimmerDuration?: string;
+    /** Button background color */
+    background?: string;
+    /** Custom CSS class */
+    class?: string;
+    /** Button content */
+    children?: Snippet;
+};
+export type ShimmerButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps>;
+declare const ShimmerButton: import("svelte").Component<ShimmerButtonProps, {}, "">;
+type ShimmerButton = ReturnType<typeof ShimmerButton>;
+export default ShimmerButton;

package/dist/fancy-ui/shimmer-button/ShimmerButton.test.d.ts

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

package/dist/fancy-ui/shimmer-button/ShimmerButton.test.js

@@ -0,0 +1,69 @@
+import { render, screen, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import ShimmerButton from "./ShimmerButton.svelte";
+describe("ShimmerButton", () => {
+    afterEach(cleanup);
+    it("renders a button element", () => {
+        render(ShimmerButton);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("applies default CSS custom properties", () => {
+        render(ShimmerButton);
+        const button = screen.getByRole("button");
+        const style = button.getAttribute("style") ?? "";
+        expect(style).toContain("--shimmer-color: #ffffff");
+        expect(style).toContain("--speed: 3s");
+        expect(style).toContain("--bg: rgba(0, 0, 0, 1)");
+    });
+    it("applies custom shimmerColor", () => {
+        render(ShimmerButton, { props: { shimmerColor: "#ff0000" } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--shimmer-color: #ff0000");
+    });
+    it("applies custom background", () => {
+        render(ShimmerButton, { props: { background: "rgba(0, 0, 255, 0.5)" } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--bg: rgba(0, 0, 255, 0.5)");
+    });
+    it("applies custom shimmerDuration", () => {
+        render(ShimmerButton, { props: { shimmerDuration: "5s" } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--speed: 5s");
+    });
+    it("applies custom borderRadius", () => {
+        render(ShimmerButton, { props: { borderRadius: "8px" } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--radius: 8px");
+    });
+    it("applies custom class names", () => {
+        render(ShimmerButton, { props: { class: "my-shimmer" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("my-shimmer");
+    });
+    it("preserves base classes when custom class is added", () => {
+        render(ShimmerButton, { props: { class: "extra" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("shimmer-button");
+        expect(button.className).toContain("overflow-hidden");
+    });
+    it("contains shimmer layer div", () => {
+        render(ShimmerButton);
+        const button = screen.getByRole("button");
+        const shimmerLayer = button.querySelector(".shimmer-slide");
+        expect(shimmerLayer).toBeInTheDocument();
+    });
+    it("contains spin-around element", () => {
+        render(ShimmerButton);
+        const button = screen.getByRole("button");
+        const spinAround = button.querySelector(".spin-around");
+        expect(spinAround).toBeInTheDocument();
+    });
+    it("forwards native button attributes", () => {
+        render(ShimmerButton, {
+            props: { disabled: true, "aria-label": "Submit" },
+        });
+        const button = screen.getByRole("button");
+        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute("aria-label", "Submit");
+    });
+});

package/dist/fancy-ui/shimmer-button/index.d.ts

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

package/dist/fancy-ui/shimmer-button/index.js

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

package/dist/fancy-ui/smooth-cursor/README.md

@@ -0,0 +1,23 @@
+# SmoothCursor
+
+A customizable, physics-based smooth cursor animation component. The cursor follows mouse movement with spring physics, creating a natural, fluid feel. Includes rotation based on movement direction.
+
+## Features
+
+- Spring physics for smooth, natural cursor movement
+- Configurable spring parameters (damping, stiffness, mass)
+- Rotation based on movement direction
+- Custom cursor support via Svelte snippets
+- Auto-hides when mouse leaves the viewport
+- Respects `prefers-reduced-motion`: disables spring physics and snaps directly to pointer
+- Hides the native browser cursor automatically
+- Performance optimized with `requestAnimationFrame` and `will-change`
+
+## Implementation Notes
+
+### Svelte 5 Implementation
+
+1. **Spring physics**: Implemented manually using `requestAnimationFrame` instead of Framer Motion's `useSpring`
+2. **Custom cursor**: Uses Svelte 5 snippets instead of JSX elements
+3. **Lifecycle**: Uses `onMount` with cleanup return for event listener management
+4. **Props**: Uses Svelte 5 `$props()` with `$derived()` for merged config