fancy-ui-svelte 0.2.1

package/dist/fancy-ui/glow-border/GlowBorder.test.d.ts

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

package/dist/fancy-ui/glow-border/GlowBorder.test.js

@@ -0,0 +1,57 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import GlowBorder from "./GlowBorder.svelte";
+describe("GlowBorder", () => {
+    afterEach(cleanup);
+    it("renders a div element", () => {
+        const { container } = render(GlowBorder);
+        const div = container.querySelector(".animate-glow");
+        expect(div).toBeInTheDocument();
+    });
+    it("has pointer-events-none class", () => {
+        const { container } = render(GlowBorder);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("pointer-events-none");
+    });
+    it("has absolute and inset-0 classes", () => {
+        const { container } = render(GlowBorder);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("absolute");
+        expect(div?.className).toContain("inset-0");
+    });
+    it("includes border-radius in inline style", () => {
+        const { container } = render(GlowBorder, { props: { borderRadius: 20 } });
+        const div = container.firstElementChild;
+        const style = div.getAttribute("style") ?? "";
+        expect(style).toContain("border-radius");
+    });
+    it("includes duration CSS var in style", () => {
+        const { container } = render(GlowBorder, { props: { duration: 5 } });
+        const div = container.firstElementChild;
+        const style = div.getAttribute("style") ?? "";
+        expect(style).toContain("--glow-duration: 5s");
+    });
+    it("includes border-width CSS var in style", () => {
+        const { container } = render(GlowBorder, { props: { borderWidth: 4 } });
+        const div = container.firstElementChild;
+        const style = div.getAttribute("style") ?? "";
+        expect(style).toContain("--glow-border-width: 4px");
+    });
+    it("includes border-radius CSS var in style", () => {
+        const { container } = render(GlowBorder, { props: { borderRadius: 16 } });
+        const div = container.firstElementChild;
+        const style = div.getAttribute("style") ?? "";
+        expect(style).toContain("--glow-border-radius: 16px");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(GlowBorder, { props: { class: "my-glow" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-glow");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(GlowBorder, { props: { class: "extra" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("pointer-events-none");
+        expect(div?.className).toContain("absolute");
+    });
+});

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

@@ -0,0 +1,54 @@
+# GlowBorder
+
+An animated glowing border effect using CSS masks and gradients.
+
+## Usage
+
+```svelte
+<script>
+  import { GlowBorder } from '$lib/fancy-ui/glow-border';
+</script>
+
+<div class="relative rounded-xl bg-card p-6">
+  <p>Content goes here</p>
+  <GlowBorder color="#00ffff" />
+</div>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | `''` | Additional CSS classes |
+| `color` | `string \| string[]` | `'#FFF'` | Glow color(s) - single or array for gradient |
+| `borderRadius` | `number` | `10` | Border radius in pixels |
+| `borderWidth` | `number` | `2` | Border thickness in pixels |
+| `duration` | `number` | `10` | Animation duration in seconds |
+
+## Examples
+
+### Single Color
+```svelte
+<GlowBorder color="#00ffff" />
+```
+
+### Multi-Color Gradient
+```svelte
+<GlowBorder color={['#3b82f6', '#8b5cf6', '#ec4899']} />
+```
+
+### Custom Thickness
+```svelte
+<GlowBorder borderWidth={4} color="#ff00ff" />
+```
+
+## Requirements
+
+- Parent element must have `position: relative`
+- Works best on dark backgrounds
+
+## Implementation Notes
+
+- Animation defined in component's scoped styles
+- Respects `prefers-reduced-motion` for accessibility
+- Uses CSS mask-composite for the border effect

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

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

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

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

package/dist/fancy-ui/glowing-effect/GlowingEffect.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+
+	interface Props {
+		blur?: number;
+		inactiveZone?: number;
+		proximity?: number;
+		spread?: number;
+		variant?: "default" | "white";
+		glow?: boolean;
+		class?: string;
+		disabled?: boolean;
+		movementDuration?: number;
+		borderWidth?: number;
+	}
+
+	let {
+		blur = 0,
+		inactiveZone = 0.7,
+		proximity = 0,
+		spread = 20,
+		variant = "default",
+		glow = false,
+		class: className = "",
+		disabled = true,
+		movementDuration = 2,
+		borderWidth = 1,
+	}: Props = $props();
+
+	let containerRef: HTMLDivElement;
+	let lastPosition = { x: 0, y: 0 };
+	let animationFrameId = 0;
+	let angleAnimationFrameId = 0;
+	let currentAngle = 0;
+	let targetAngle = 0;
+	let animating = false;
+
+	let containerStyle = $derived(
+		[
+			`--blur: ${blur}px`,
+			`--spread: ${spread}`,
+			`--start: 0`,
+			`--active: 0`,
+			`--glowingeffect-border-width: ${borderWidth}px`,
+			`--repeating-conic-gradient-times: 5`,
+			`--gradient: ${
+				variant === "white"
+					? `repeating-conic-gradient(from 236.84deg at 50% 50%, var(--black), var(--black) calc(25% / var(--repeating-conic-gradient-times)))`
+					: `radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%), radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%), radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%), repeating-conic-gradient(from 236.84deg at 50% 50%, #dd7bbb 0%, #d79f1e calc(25% / var(--repeating-conic-gradient-times)), #5a922c calc(50% / var(--repeating-conic-gradient-times)), #4c7894 calc(75% / var(--repeating-conic-gradient-times)), #dd7bbb calc(100% / var(--repeating-conic-gradient-times)))`
+			}`,
+		].join(";")
+	);
+
+	function handleMove(e?: { x: number; y: number }) {
+		if (!containerRef) return;
+
+		if (animationFrameId) {
+			cancelAnimationFrame(animationFrameId);
+		}
+
+		animationFrameId = requestAnimationFrame(() => {
+			if (!containerRef) return;
+
+			const { left, top, width, height } = containerRef.getBoundingClientRect();
+			const mouseX = e?.x ?? lastPosition.x;
+			const mouseY = e?.y ?? lastPosition.y;
+
+			if (e) {
+				lastPosition = { x: mouseX, y: mouseY };
+			}
+
+			const center = [left + width * 0.5, top + height * 0.5];
+			const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]);
+			const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
+
+			if (distanceFromCenter < inactiveRadius) {
+				containerRef.style.setProperty("--active", "0");
+				return;
+			}
+
+			const isActive =
+				mouseX > left - proximity &&
+				mouseX < left + width + proximity &&
+				mouseY > top - proximity &&
+				mouseY < top + height + proximity;
+
+			containerRef.style.setProperty("--active", isActive ? "1" : "0");
+
+			if (!isActive) return;
+
+			const rawTarget = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90;
+
+			// Shortest-path angle difference
+			const angleDiff = ((rawTarget - currentAngle + 180) % 360) - 180;
+			targetAngle = currentAngle + angleDiff;
+
+			if (!animating) {
+				animating = true;
+				animateAngle();
+			}
+		});
+	}
+
+	function animateAngle() {
+		// Lerp speed inversely proportional to movementDuration
+		const speed = 0.08 / Math.max(movementDuration, 0.1);
+		currentAngle = currentAngle + (targetAngle - currentAngle) * speed;
+
+		if (containerRef) {
+			containerRef.style.setProperty("--start", String(currentAngle));
+		}
+
+		if (Math.abs(targetAngle - currentAngle) > 0.1) {
+			angleAnimationFrameId = requestAnimationFrame(animateAngle);
+		} else {
+			currentAngle = targetAngle;
+			if (containerRef) {
+				containerRef.style.setProperty("--start", String(currentAngle));
+			}
+			animating = false;
+		}
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		handleMove(e);
+	}
+
+	function handleScroll() {
+		handleMove();
+	}
+
+	onMount(() => {
+		if (disabled) return;
+
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		document.body.addEventListener("pointermove", handlePointerMove, { passive: true });
+
+		return () => {
+			if (animationFrameId) cancelAnimationFrame(animationFrameId);
+			if (angleAnimationFrameId) cancelAnimationFrame(angleAnimationFrameId);
+			window.removeEventListener("scroll", handleScroll);
+			document.body.removeEventListener("pointermove", handlePointerMove);
+		};
+	});
+</script>
+
+<div
+	class={cn(
+		"pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity",
+		glow && "opacity-100",
+		variant === "white" && "border-white",
+		disabled && "!block"
+	)}
+	aria-hidden="true"
+></div>
+<div
+	bind:this={containerRef}
+	style={containerStyle}
+	class={cn(
+		"pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity",
+		glow && "opacity-100",
+		blur > 0 && "blur-[var(--blur)]",
+		className,
+		disabled && "!hidden"
+	)}
+	aria-hidden="true"
+>
+	<div
+		class={cn(
+			"glow",
+			"rounded-[inherit]",
+			"after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))] after:rounded-[inherit] after:content-['']",
+			"after:[border:var(--glowingeffect-border-width)_solid_transparent]",
+			"after:[background-attachment:fixed] after:[background:var(--gradient)]",
+			"after:opacity-[var(--active)] after:transition-opacity after:duration-300",
+			"after:[mask-clip:padding-box,border-box]",
+			"after:[mask-composite:intersect]",
+			"after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
+		)}
+	></div>
+</div>

package/dist/fancy-ui/glowing-effect/GlowingEffect.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    blur?: number;
+    inactiveZone?: number;
+    proximity?: number;
+    spread?: number;
+    variant?: "default" | "white";
+    glow?: boolean;
+    class?: string;
+    disabled?: boolean;
+    movementDuration?: number;
+    borderWidth?: number;
+}
+declare const GlowingEffect: import("svelte").Component<Props, {}, "">;
+type GlowingEffect = ReturnType<typeof GlowingEffect>;
+export default GlowingEffect;

package/dist/fancy-ui/glowing-effect/GlowingEffect.test.d.ts

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

package/dist/fancy-ui/glowing-effect/GlowingEffect.test.js

@@ -0,0 +1,68 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import GlowingEffect from "./GlowingEffect.svelte";
+describe("GlowingEffect", () => {
+    afterEach(cleanup);
+    it("renders without errors", () => {
+        const { container } = render(GlowingEffect);
+        expect(container.firstElementChild).toBeInTheDocument();
+    });
+    it("applies custom class", () => {
+        const { container } = render(GlowingEffect, {
+            props: { class: "my-glow" },
+        });
+        const divs = container.querySelectorAll("div");
+        const hasClass = Array.from(divs).some((div) => div.className.includes("my-glow"));
+        expect(hasClass).toBe(true);
+    });
+    it("sets default CSS custom properties", () => {
+        const { container } = render(GlowingEffect);
+        const styledDiv = container.querySelector("[style]");
+        const style = styledDiv?.getAttribute("style") ?? "";
+        expect(style).toContain("--blur: 0px");
+        expect(style).toContain("--spread: 20");
+        expect(style).toContain("--glowingeffect-border-width: 1px");
+    });
+    it("hides container when disabled (default)", () => {
+        const { container } = render(GlowingEffect);
+        const styledDiv = container.querySelector("[style]");
+        expect(styledDiv?.className).toContain("!hidden");
+    });
+    it("shows border div when disabled", () => {
+        const { container } = render(GlowingEffect);
+        const firstDiv = container.firstElementChild;
+        expect(firstDiv?.className).toContain("!block");
+    });
+    it("white variant gets border-white", () => {
+        const { container } = render(GlowingEffect, {
+            props: { variant: "white" },
+        });
+        const firstDiv = container.firstElementChild;
+        expect(firstDiv?.className).toContain("border-white");
+    });
+    it("default variant does not get border-white", () => {
+        const { container } = render(GlowingEffect, {
+            props: { variant: "default" },
+        });
+        const firstDiv = container.firstElementChild;
+        expect(firstDiv?.className).not.toContain("border-white");
+    });
+    it("applies custom blur value", () => {
+        const { container } = render(GlowingEffect, { props: { blur: 10 } });
+        const styledDiv = container.querySelector("[style]");
+        const style = styledDiv?.getAttribute("style") ?? "";
+        expect(style).toContain("--blur: 10px");
+    });
+    it("applies custom spread value", () => {
+        const { container } = render(GlowingEffect, { props: { spread: 50 } });
+        const styledDiv = container.querySelector("[style]");
+        const style = styledDiv?.getAttribute("style") ?? "";
+        expect(style).toContain("--spread: 50");
+    });
+    it("applies custom borderWidth value", () => {
+        const { container } = render(GlowingEffect, { props: { borderWidth: 3 } });
+        const styledDiv = container.querySelector("[style]");
+        const style = styledDiv?.getAttribute("style") ?? "";
+        expect(style).toContain("--glowingeffect-border-width: 3px");
+    });
+});

package/dist/fancy-ui/glowing-effect/README.md

@@ -0,0 +1,29 @@
+# GlowingEffect
+
+Mouse-proximity based glowing border effect with animated conic gradient.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blur` | `number` | `0` | Blur amount for the glow |
+| `inactiveZone` | `number` | `0.7` | Inner zone radius ratio where glow deactivates |
+| `proximity` | `number` | `0` | Extra proximity distance to activate glow |
+| `spread` | `number` | `20` | Spread angle of the conic gradient |
+| `variant` | `'default' \| 'white'` | `'default'` | Color variant |
+| `glow` | `boolean` | `false` | Force glow visible |
+| `disabled` | `boolean` | `true` | Disable mouse tracking |
+| `movementDuration` | `number` | `2` | Animation speed |
+| `borderWidth` | `number` | `1` | Border width in pixels |
+| `class` | `string` | `''` | Additional CSS classes |
+
+## Usage
+
+Place inside a relatively positioned container with `rounded-*` classes:
+
+```svelte
+<div class="relative rounded-xl p-4 bg-card">
+  <GlowingEffect spread={40} glow disabled={false} />
+  <p>Content here</p>
+</div>
+```

package/dist/fancy-ui/glowing-effect/index.d.ts

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

package/dist/fancy-ui/glowing-effect/index.js

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

package/dist/fancy-ui/gradient-button/GradientButton.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type BaseProps = {
+		/** Gradient colors for the conic-gradient border */
+		colors?: string[];
+		/** Animation duration in milliseconds */
+		duration?: number;
+		/** Border width in pixels */
+		borderWidth?: number;
+		/** Border radius in pixels */
+		borderRadius?: number;
+		/** Blur amount for the gradient in pixels */
+		blur?: number;
+		/** Background color of the button content area */
+		bgColor?: string;
+		/** Custom CSS class */
+		class?: string;
+		/** Button content */
+		children?: Snippet;
+	};
+
+	export type GradientButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps>;
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		colors = [
+			"#FF0000",
+			"#FFA500",
+			"#FFFF00",
+			"#008000",
+			"#0000FF",
+			"#4B0082",
+			"#EE82EE",
+			"#FF0000",
+		],
+		duration = 2500,
+		borderWidth = 2,
+		borderRadius = 8,
+		blur = 4,
+		bgColor = "#000",
+		children,
+		...restProps
+	}: GradientButtonProps = $props();
+
+	const styleVars = $derived(
+		`--gb-colors: ${colors.join(", ")}; --gb-duration: ${duration}ms; --gb-border-width: ${borderWidth}px; --gb-border-radius: ${borderRadius}px; --gb-blur: ${blur}px; --gb-bg-color: ${bgColor}`
+	);
+</script>
+
+<button
+	class={cn(
+		"gradient-button relative flex min-h-10 min-w-28 cursor-pointer items-center justify-center overflow-hidden",
+		className
+	)}
+	style={styleVars}
+	{...restProps}
+>
+	<!-- Rotating conic-gradient pseudo-element -->
+	<span class="gradient-border" aria-hidden="true"></span>
+
+	<!-- Content area -->
+	<span class="gradient-content inline-flex size-full items-center justify-center px-4 py-2">
+		{@render children?.()}
+	</span>
+</button>
+
+<style>
+	.gradient-button {
+		padding: var(--gb-border-width);
+		border-radius: var(--gb-border-radius);
+		isolation: isolate;
+	}
+
+	.gradient-border {
+		content: "";
+		position: absolute;
+		inset: -200%;
+		z-index: -1;
+		background: conic-gradient(var(--gb-colors));
+		animation: rotate-gradient var(--gb-duration) linear infinite;
+		filter: blur(var(--gb-blur));
+	}
+
+	.gradient-content {
+		border-radius: var(--gb-border-radius);
+		background-color: var(--gb-bg-color);
+	}
+
+	@keyframes rotate-gradient {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/fancy-ui/gradient-button/GradientButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type BaseProps = {
+    /** Gradient colors for the conic-gradient border */
+    colors?: string[];
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Border radius in pixels */
+    borderRadius?: number;
+    /** Blur amount for the gradient in pixels */
+    blur?: number;
+    /** Background color of the button content area */
+    bgColor?: string;
+    /** Custom CSS class */
+    class?: string;
+    /** Button content */
+    children?: Snippet;
+};
+export type GradientButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps>;
+declare const GradientButton: import("svelte").Component<GradientButtonProps, {}, "">;
+type GradientButton = ReturnType<typeof GradientButton>;
+export default GradientButton;

package/dist/fancy-ui/gradient-button/GradientButton.test.d.ts

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

package/dist/fancy-ui/gradient-button/GradientButton.test.js

@@ -0,0 +1,65 @@
+import { render, screen, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import GradientButton from "./GradientButton.svelte";
+describe("GradientButton", () => {
+    afterEach(cleanup);
+    it("renders a button element", () => {
+        render(GradientButton);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("applies default CSS custom properties", () => {
+        render(GradientButton);
+        const button = screen.getByRole("button");
+        const style = button.getAttribute("style") ?? "";
+        expect(style).toContain("--gb-duration: 2500ms");
+        expect(style).toContain("--gb-border-width: 2px");
+        expect(style).toContain("--gb-border-radius: 8px");
+        expect(style).toContain("--gb-blur: 4px");
+        expect(style).toContain("--gb-bg-color: #000");
+    });
+    it("applies custom colors", () => {
+        render(GradientButton, { props: { colors: ["#ff0000", "#00ff00"] } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--gb-colors: #ff0000, #00ff00");
+    });
+    it("applies custom duration", () => {
+        render(GradientButton, { props: { duration: 5000 } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--gb-duration: 5000ms");
+    });
+    it("applies custom borderWidth", () => {
+        render(GradientButton, { props: { borderWidth: 4 } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--gb-border-width: 4px");
+    });
+    it("applies custom class names", () => {
+        render(GradientButton, { props: { class: "my-gradient" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("my-gradient");
+    });
+    it("preserves base classes when custom class is added", () => {
+        render(GradientButton, { props: { class: "extra" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("gradient-button");
+        expect(button.className).toContain("overflow-hidden");
+    });
+    it("contains gradient-border span", () => {
+        render(GradientButton);
+        const button = screen.getByRole("button");
+        const border = button.querySelector(".gradient-border");
+        expect(border).toBeInTheDocument();
+        expect(border).toHaveAttribute("aria-hidden", "true");
+    });
+    it("contains gradient-content span", () => {
+        render(GradientButton);
+        const button = screen.getByRole("button");
+        const content = button.querySelector(".gradient-content");
+        expect(content).toBeInTheDocument();
+    });
+    it("forwards native button attributes", () => {
+        render(GradientButton, { props: { disabled: true, type: "submit" } });
+        const button = screen.getByRole("button");
+        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute("type", "submit");
+    });
+});

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

@@ -0,0 +1,10 @@
+# GradientButton
+
+## Implementation Details
+
+- Uses a real `<span>` element instead of `::before` pseudo-element for the rotating gradient (avoids scoped style issues with pseudo-elements in Svelte)
+- CSS variables set via inline `style` attribute instead of Vue's `v-bind()` in `<style>`
+- Props use `$props()` with Svelte 5 syntax
+- Uses `{@render children?.()}` for slot content
+- Spreads `...restProps` for native button attributes
+- `aria-hidden="true"` on the decorative gradient span

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

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

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

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