fancy-ui-svelte 0.2.1

package/dist/fancy-ui/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+export interface TimelineItem {
+    id: string;
+    label: string;
+}
+export interface TimelineProps {
+    /** Timeline entries */
+    items?: TimelineItem[];
+    /** Heading text */
+    title?: string;
+    /** Subheading text */
+    description?: string;
+    /** Additional CSS classes for the outer wrapper */
+    class?: string;
+    /** Content snippet, called for each item */
+    content?: Snippet<[TimelineItem]>;
+}
+declare const Timeline: import("svelte").Component<TimelineProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/fancy-ui/timeline/Timeline.test.d.ts

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

package/dist/fancy-ui/timeline/Timeline.test.js

@@ -0,0 +1,63 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import Timeline from "./Timeline.svelte";
+const mockItems = [
+    { id: "one", label: "2020" },
+    { id: "two", label: "2021" },
+    { id: "three", label: "2022" },
+];
+describe("Timeline", () => {
+    beforeEach(() => {
+        // Mock ResizeObserver (not available in jsdom) - must be a class
+        global.ResizeObserver = class {
+            observe = vi.fn();
+            unobserve = vi.fn();
+            disconnect = vi.fn();
+        };
+    });
+    afterEach(cleanup);
+    it("renders a container div", () => {
+        const { container } = render(Timeline);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+    });
+    it("has w-full class", () => {
+        const { container } = render(Timeline);
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("w-full");
+    });
+    it("renders title when provided", () => {
+        const { container } = render(Timeline, { props: { title: "My Timeline" } });
+        const h2 = container.querySelector("h2");
+        expect(h2).toBeInTheDocument();
+        expect(h2?.textContent).toBe("My Timeline");
+    });
+    it("renders description when provided", () => {
+        const { container } = render(Timeline, {
+            props: { title: "Title", description: "My description" },
+        });
+        const p = container.querySelector("p");
+        expect(p?.textContent).toBe("My description");
+    });
+    it("does not render header section when no title or description", () => {
+        const { container } = render(Timeline);
+        const h2 = container.querySelector("h2");
+        expect(h2).not.toBeInTheDocument();
+    });
+    it("renders one entry per item", () => {
+        const { container } = render(Timeline, { props: { items: mockItems } });
+        const labels = container.querySelectorAll("h3");
+        expect(labels.length).toBe(3);
+    });
+    it("displays item labels", () => {
+        const { container } = render(Timeline, { props: { items: mockItems } });
+        const labels = container.querySelectorAll("h3");
+        expect(labels[0].textContent).toBe("2020");
+        expect(labels[1].textContent).toBe("2021");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(Timeline, { props: { class: "my-timeline" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-timeline");
+    });
+});

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

@@ -0,0 +1,2 @@
+import Timeline, { type TimelineProps, type TimelineItem } from "./Timeline.svelte";
+export { Timeline, type TimelineProps, type TimelineItem };

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

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

package/dist/fancy-ui/tracing-beam/README.md

@@ -0,0 +1,24 @@
+# TracingBeam
+
+Vertical SVG beam that highlights scroll progress alongside content.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `class` | `string` | `''` | Additional CSS classes |
+
+## Usage
+
+Wrap your content inside TracingBeam:
+
+```svelte
+<TracingBeam>
+  <article>
+    <h2>Section 1</h2>
+    <p>Content here...</p>
+    <h2>Section 2</h2>
+    <p>More content...</p>
+  </article>
+</TracingBeam>
+```

package/dist/fancy-ui/tracing-beam/TracingBeam.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import { onMount } from "svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+
+	let tracingBeamRef: HTMLDivElement;
+	let contentRef: HTMLDivElement;
+	let svgHeight = $state(0);
+	let scrollYProgress = $state(0);
+	let scrollPercentage = $state(0);
+
+	// Spring state
+	let springY1 = $state(0);
+	let springY2 = $state(0);
+	let springVelY1 = 0;
+	let springVelY2 = 0;
+
+	let targetY1 = $derived(
+		mapRange(scrollYProgress, 0, 0.8, scrollYProgress, svgHeight) * (1.4 - scrollPercentage)
+	);
+
+	let targetY2 = $derived(
+		mapRange(scrollYProgress, 0, 1, scrollYProgress, svgHeight - 500) * (1.4 - scrollPercentage)
+	);
+
+	let circleHasShadow = $derived(scrollYProgress <= 0);
+	let circleBg = $derived(scrollYProgress > 0 ? "bg-white" : "bg-emerald-500");
+	let circleBorder = $derived(scrollYProgress > 0 ? "border-neutral-300" : "border-emerald-600");
+
+	let svgPath = $derived(`M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`);
+
+	let rafId: number;
+
+	function mapRange(
+		value: number,
+		inMin: number,
+		inMax: number,
+		outMin: number,
+		outMax: number
+	): number {
+		return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+	}
+
+	function updateSpring() {
+		const tension = 80;
+		const friction = 26;
+		const precision = 0.01;
+
+		const forceY1 = tension * (targetY1 - springY1);
+		springVelY1 = (springVelY1 + forceY1 * 0.001) * (1 - friction * 0.001);
+		springY1 += springVelY1;
+
+		const forceY2 = tension * (targetY2 - springY2);
+		springVelY2 = (springVelY2 + forceY2 * 0.001) * (1 - friction * 0.001);
+		springY2 += springVelY2;
+
+		const settled =
+			Math.abs(springVelY1) < precision &&
+			Math.abs(targetY1 - springY1) < precision &&
+			Math.abs(springVelY2) < precision &&
+			Math.abs(targetY2 - springY2) < precision;
+
+		if (!settled) {
+			rafId = requestAnimationFrame(updateSpring);
+		}
+	}
+
+	function updateScrollProgress() {
+		if (!tracingBeamRef) return;
+		const rect = tracingBeamRef.getBoundingClientRect();
+		const windowHeight = window.innerHeight;
+		const elementHeight = rect.height;
+
+		scrollPercentage = (windowHeight - rect.top) / (windowHeight + elementHeight);
+		scrollYProgress = (rect.y / windowHeight) * -1;
+
+		cancelAnimationFrame(rafId);
+		rafId = requestAnimationFrame(updateSpring);
+	}
+
+	function updateSVGHeight() {
+		if (!contentRef) return;
+		svgHeight = contentRef.offsetHeight;
+	}
+
+	onMount(() => {
+		window.addEventListener("scroll", updateScrollProgress, { passive: true });
+		window.addEventListener("resize", updateScrollProgress, { passive: true });
+		updateScrollProgress();
+
+		const resizeObserver = new ResizeObserver(updateSVGHeight);
+		resizeObserver.observe(contentRef);
+		updateSVGHeight();
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			window.removeEventListener("scroll", updateScrollProgress);
+			window.removeEventListener("resize", updateScrollProgress);
+			resizeObserver.disconnect();
+		};
+	});
+</script>
+
+<div bind:this={tracingBeamRef} class={cn("relative mx-auto h-full w-full max-w-4xl", className)}>
+	<div class="absolute top-3 -left-4 md:-left-12">
+		<div
+			class="ml-[27px] flex size-4 items-center justify-center rounded-full border border-neutral-200 shadow-sm"
+			style:box-shadow={circleHasShadow ? "rgba(0, 0, 0, 0.24) 0px 3px 8px" : "none"}
+		>
+			<div class={cn("size-2 rounded-full border", circleBg, circleBorder)}></div>
+		</div>
+		<svg
+			viewBox="0 0 20 {svgHeight}"
+			width="20"
+			height={svgHeight}
+			class="ml-4 block"
+			aria-hidden="true"
+		>
+			<path d={svgPath} fill="none" stroke="#9091A0" stroke-opacity="0.16"></path>
+			<path
+				d={svgPath}
+				fill="none"
+				stroke="url(#tracing-beam-gradient)"
+				stroke-width="1.25"
+				class="motion-reduce:hidden"
+			></path>
+			<defs>
+				<linearGradient
+					id="tracing-beam-gradient"
+					gradientUnits="userSpaceOnUse"
+					x1="0"
+					x2="0"
+					y1={springY1}
+					y2={springY2}
+				>
+					<stop stop-color="#18CCFC" stop-opacity="0"></stop>
+					<stop stop-color="#18CCFC"></stop>
+					<stop offset="0.325" stop-color="#6344F5"></stop>
+					<stop offset="1" stop-color="#AE48FF" stop-opacity="0"></stop>
+				</linearGradient>
+			</defs>
+		</svg>
+	</div>
+	<div bind:this={contentRef}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>

package/dist/fancy-ui/tracing-beam/TracingBeam.svelte.d.ts

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

package/dist/fancy-ui/tracing-beam/TracingBeam.test.d.ts

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

package/dist/fancy-ui/tracing-beam/TracingBeam.test.js

@@ -0,0 +1,61 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import TracingBeam from "./TracingBeam.svelte";
+describe("TracingBeam", () => {
+    beforeEach(() => {
+        vi.stubGlobal("ResizeObserver", class {
+            observe = vi.fn();
+            unobserve = vi.fn();
+            disconnect = vi.fn();
+        });
+    });
+    afterEach(() => {
+        cleanup();
+        vi.restoreAllMocks();
+    });
+    it("renders container div", () => {
+        const { container } = render(TracingBeam);
+        const div = container.firstElementChild;
+        expect(div).toBeInTheDocument();
+        expect(div.tagName).toBe("DIV");
+    });
+    it("renders SVG element", () => {
+        const { container } = render(TracingBeam);
+        const svg = container.querySelector("svg");
+        expect(svg).toBeInTheDocument();
+    });
+    it("SVG has aria-hidden attribute", () => {
+        const { container } = render(TracingBeam);
+        const svg = container.querySelector("svg");
+        expect(svg?.getAttribute("aria-hidden")).toBe("true");
+    });
+    it("renders circle indicator", () => {
+        const { container } = render(TracingBeam);
+        const outerCircle = container.querySelector(".rounded-full.border");
+        expect(outerCircle).toBeInTheDocument();
+        const innerCircle = outerCircle?.querySelector(".rounded-full");
+        expect(innerCircle).toBeInTheDocument();
+    });
+    it("applies custom class", () => {
+        const { container } = render(TracingBeam, { props: { class: "my-beam" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("my-beam");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(TracingBeam, { props: { class: "extra" } });
+        const div = container.firstElementChild;
+        expect(div?.className).toContain("relative");
+        expect(div?.className).toContain("mx-auto");
+        expect(div?.className).toContain("max-w-4xl");
+    });
+    it("renders gradient definition in SVG", () => {
+        const { container } = render(TracingBeam);
+        const gradient = container.querySelector("#tracing-beam-gradient");
+        expect(gradient).toBeInTheDocument();
+    });
+    it("renders two path elements in SVG", () => {
+        const { container } = render(TracingBeam);
+        const paths = container.querySelectorAll("svg path");
+        expect(paths.length).toBe(2);
+    });
+});

package/dist/fancy-ui/tracing-beam/index.d.ts

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

package/dist/fancy-ui/tracing-beam/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Shared component types for FancyUI
+ *
+ * These types provide a consistent foundation for all implemented components.
+ */
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * Base props shared by all FancyUI components
+ */
+export interface BaseComponentProps {
+    /** Additional CSS classes to apply */
+    class?: string;
+    /** Component content (Svelte 5 snippet) */
+    children?: Snippet;
+}
+/**
+ * Props for components with animation capabilities
+ */
+export interface AnimatedComponentProps extends BaseComponentProps {
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Animation delay in seconds */
+    delay?: number;
+    /** Whether animation is paused */
+    paused?: boolean;
+}
+/**
+ * Props for components that track mouse/pointer position
+ */
+export interface InteractiveComponentProps extends BaseComponentProps {
+    /** Whether interaction is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for polymorphic components (button/anchor)
+ */
+export interface PolymorphicButtonProps extends BaseComponentProps {
+    /** Render as anchor element when href is provided */
+    href?: string;
+    /** Button type attribute */
+    type?: "button" | "submit" | "reset";
+    /** Whether the element is disabled */
+    disabled?: boolean;
+    /** Element reference */
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+}
+/**
+ * Common event handler types
+ */
+export type MouseEventHandler = (event: MouseEvent) => void;
+export type KeyboardEventHandler = (event: KeyboardEvent) => void;
+export type FocusEventHandler = (event: FocusEvent) => void;
+/**
+ * Utility type to extract props from a component while excluding HTML attributes
+ */
+export type ComponentProps<T> = Omit<T, keyof HTMLAttributes<HTMLElement>>;
+/**
+ * Component status for registry tracking
+ */
+export type ComponentStatus = "done" | "in-progress" | "planned";
+/**
+ * Component category for organization
+ */
+export type ComponentCategory = "buttons" | "cards" | "backgrounds" | "text" | "layout" | "feedback" | "data-display" | "navigation" | "media" | "effects";
+/**
+ * Component metadata for registry
+ */
+export interface ComponentMeta {
+    /** Component display name */
+    name: string;
+    /** URL-friendly slug */
+    slug: string;
+    /** Short description */
+    description: string;
+    /** Component category */
+    category: ComponentCategory;
+    /** Porting status */
+    status: ComponentStatus;
+    /** Dependencies on other fancy-ui components */
+    dependencies?: string[];
+    /** Credits for the original design/implementation */
+    credits?: Array<{
+        source: string;
+        url?: string;
+    }>;
+}

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Shared component types for FancyUI
+ *
+ * These types provide a consistent foundation for all implemented components.
+ */
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "fancy-ui-svelte",
+  "private": false,
+  "version": "0.2.1",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RamaHerbin/fancy-ui.git"
+  },
+  "homepage": "https://fancy-ui.rama.app",
+  "bugs": {
+    "url": "https://github.com/RamaHerbin/fancy-ui/issues"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "components",
+    "animations",
+    "ui",
+    "tailwind"
+  ],
+  "files": [
+    "dist/fancy-ui",
+    "dist/utils.js",
+    "dist/utils.d.ts",
+    "dist/types.js",
+    "dist/types.d.ts"
+  ],
+  "main": "./dist/fancy-ui/index.js",
+  "svelte": "./dist/fancy-ui/index.js",
+  "types": "./dist/fancy-ui/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/fancy-ui/index.d.ts",
+      "svelte": "./dist/fancy-ui/index.js",
+      "default": "./dist/fancy-ui/index.js"
+    },
+    "./tailwind.css": "./dist/fancy-ui/tailwind.css"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "canvas-confetti": "^1.9.4",
+    "clsx": "^2.1.1",
+    "gsap": "^3.14.2",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.183.2"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.30.0",
+    "@internationalized/date": "^3.10.1",
+    "@lucide/svelte": "^0.562.0",
+    "@playwright/test": "^1.58.2",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.17",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@types/canvas-confetti": "^1.9.0",
+    "@types/node": "^25.2.3",
+    "@types/three": "^0.183.1",
+    "arctic": "^3.7.0",
+    "bits-ui": "^2.15.4",
+    "jsdom": "^28.0.0",
+    "marked": "^17.0.3",
+    "nanoid": "^5.1.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.18",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "changeset tag",
+    "package": "svelte-kit sync && svelte-package -i src/lib -o dist && node -e \"const fs=require('fs'); ['dist/builder','dist/server','dist/stores'].forEach(p=>fs.rmSync(p,{recursive:true,force:true}));\" && publint"
+  }
+}