fancy-ui-svelte 0.2.1

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

@@ -0,0 +1,24 @@
+/**
+ * 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;
+}
+declare const NumberTicker: import("svelte").Component<NumberTickerProps, {}, "">;
+type NumberTicker = ReturnType<typeof NumberTicker>;
+export default NumberTicker;

package/dist/fancy-ui/number-ticker/NumberTicker.test.d.ts

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

package/dist/fancy-ui/number-ticker/NumberTicker.test.js

@@ -0,0 +1,64 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import NumberTicker from "./NumberTicker.svelte";
+// Mock IntersectionObserver as a class
+class MockIntersectionObserver {
+    callback;
+    static instances = [];
+    constructor(callback) {
+        this.callback = callback;
+        MockIntersectionObserver.instances.push(this);
+    }
+    observe = vi.fn();
+    disconnect = vi.fn();
+    unobserve = vi.fn();
+    // Helper to trigger intersection
+    trigger(isIntersecting) {
+        this.callback([{ isIntersecting }], this);
+    }
+}
+vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
+describe("NumberTicker", () => {
+    afterEach(() => {
+        cleanup();
+        MockIntersectionObserver.instances = [];
+    });
+    it("renders the number-ticker element", () => {
+        const { container } = render(NumberTicker, { props: { value: 100 } });
+        const ticker = container.querySelector(".number-ticker");
+        expect(ticker).toBeTruthy();
+    });
+    it("displays initial value for direction up as 0", () => {
+        const { container } = render(NumberTicker, {
+            props: { value: 100, direction: "up" },
+        });
+        const ticker = container.querySelector(".number-ticker");
+        expect(ticker?.textContent).toBe("0");
+    });
+    it("displays initial value for direction down as the value", () => {
+        const { container } = render(NumberTicker, {
+            props: { value: 50, direction: "down" },
+        });
+        const ticker = container.querySelector(".number-ticker");
+        expect(ticker?.textContent).toBe("50");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(NumberTicker, {
+            props: { value: 42, class: "my-ticker" },
+        });
+        const ticker = container.querySelector(".number-ticker");
+        expect(ticker?.className).toContain("my-ticker");
+    });
+    it("formats with decimal places", () => {
+        const { container } = render(NumberTicker, {
+            props: { value: 100, decimalPlaces: 2, direction: "down" },
+        });
+        const ticker = container.querySelector(".number-ticker");
+        expect(ticker?.textContent).toBe("100.00");
+    });
+    it("observes element for intersection", () => {
+        render(NumberTicker, { props: { value: 100 } });
+        const lastInstance = MockIntersectionObserver.instances.at(-1);
+        expect(lastInstance?.observe).toHaveBeenCalled();
+    });
+});

package/dist/fancy-ui/number-ticker/README.md

@@ -0,0 +1,22 @@
+# NumberTicker
+
+Animated number counter with easing. Counts from 0 to `value` (or vice versa) when the element enters the viewport. Formatted using `Intl.NumberFormat`.
+
+## Props
+
+| Prop            | Type            | Default | Description                                    |
+| --------------- | --------------- | ------- | ---------------------------------------------- |
+| `value`         | `number`        | `0`     | Target number to animate to                    |
+| `direction`     | `'up' \| 'down'`| `'up'`  | Count 0→value or value→0                       |
+| `duration`      | `number`        | `1000`  | Animation duration (ms)                        |
+| `delay`         | `number`        | `0`     | Delay before animation starts (ms)             |
+| `decimalPlaces` | `number`        | `0`     | Number of decimal places to display            |
+| `class`         | `string`        | `''`    | Additional CSS classes                         |
+
+## Usage
+
+```svelte
+<NumberTicker value={1234} />
+<NumberTicker value={99.99} decimalPlaces={2} duration={2000} />
+<NumberTicker value={100} direction="down" />
+```

package/dist/fancy-ui/number-ticker/index.d.ts

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

package/dist/fancy-ui/number-ticker/index.js

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

package/dist/fancy-ui/rainbow-button/RainbowButton.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+
+	type BaseProps = {
+		/** Animation speed in seconds */
+		speed?: number;
+		/** Custom CSS class */
+		class?: string;
+		/** Render as anchor element */
+		href?: string;
+		/** Button content */
+		children?: Snippet;
+		/** Element reference */
+		ref?: HTMLButtonElement | HTMLAnchorElement | null;
+	};
+
+	export type RainbowButtonProps = BaseProps &
+		Omit<HTMLButtonAttributes, keyof BaseProps> &
+		Omit<HTMLAnchorAttributes, keyof BaseProps>;
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		speed = 2,
+		href = undefined,
+		type = "button",
+		disabled,
+		ref = $bindable(null),
+		children,
+	}: RainbowButtonProps = $props();
+
+	const speedStyle = $derived(`--rainbow-speed: ${speed}s`);
+
+	const baseClasses = $derived(
+		cn(
+			"rainbow-button",
+			"group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+			// Glow effect
+			"before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--rainbow-1),var(--rainbow-5),var(--rainbow-3),var(--rainbow-4),var(--rainbow-2))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]",
+			// Light mode: dark button with light text
+			"text-white bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--rainbow-1),var(--rainbow-5),var(--rainbow-3),var(--rainbow-4),var(--rainbow-2))]",
+			// Dark mode: light button with dark text
+			"dark:text-black dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--rainbow-1),var(--rainbow-5),var(--rainbow-3),var(--rainbow-4),var(--rainbow-2))]",
+			className
+		)
+	);
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		class={baseClasses}
+		style={speedStyle}
+		{href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button bind:this={ref} class={baseClasses} style={speedStyle} {type} {disabled}>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.rainbow-button {
+		--rainbow-1: hsl(0 100% 63%);
+		--rainbow-2: hsl(270 100% 63%);
+		--rainbow-3: hsl(210 100% 63%);
+		--rainbow-4: hsl(195 100% 63%);
+		--rainbow-5: hsl(90 100% 63%);
+	}
+
+	@keyframes rainbow {
+		0% {
+			background-position: 0%;
+		}
+		100% {
+			background-position: 200%;
+		}
+	}
+
+	:global(.animate-rainbow) {
+		animation: rainbow var(--rainbow-speed, 2s) infinite linear;
+	}
+
+	.rainbow-button::before {
+		animation: rainbow var(--rainbow-speed, 2s) infinite linear;
+	}
+</style>

package/dist/fancy-ui/rainbow-button/RainbowButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+type BaseProps = {
+    /** Animation speed in seconds */
+    speed?: number;
+    /** Custom CSS class */
+    class?: string;
+    /** Render as anchor element */
+    href?: string;
+    /** Button content */
+    children?: Snippet;
+    /** Element reference */
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+};
+export type RainbowButtonProps = BaseProps & Omit<HTMLButtonAttributes, keyof BaseProps> & Omit<HTMLAnchorAttributes, keyof BaseProps>;
+declare const RainbowButton: import("svelte").Component<RainbowButtonProps, {}, "ref">;
+type RainbowButton = ReturnType<typeof RainbowButton>;
+export default RainbowButton;

package/dist/fancy-ui/rainbow-button/RainbowButton.test.d.ts

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

package/dist/fancy-ui/rainbow-button/RainbowButton.test.js

@@ -0,0 +1,51 @@
+import { render, screen, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import RainbowButton from "./RainbowButton.svelte";
+describe("RainbowButton", () => {
+    afterEach(cleanup);
+    it("renders a button element by default", () => {
+        render(RainbowButton);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("renders an anchor element when href is provided", () => {
+        render(RainbowButton, { props: { href: "/test" } });
+        expect(screen.getByRole("link")).toBeInTheDocument();
+    });
+    it("applies the href to the anchor element", () => {
+        render(RainbowButton, { props: { href: "/test" } });
+        expect(screen.getByRole("link")).toHaveAttribute("href", "/test");
+    });
+    it("sets the --rainbow-speed CSS custom property", () => {
+        render(RainbowButton, { props: { speed: 5 } });
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--rainbow-speed: 5s");
+    });
+    it("uses default speed of 2s", () => {
+        render(RainbowButton);
+        const button = screen.getByRole("button");
+        expect(button.getAttribute("style")).toContain("--rainbow-speed: 2s");
+    });
+    it("applies custom class names", () => {
+        render(RainbowButton, { props: { class: "my-custom" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("my-custom");
+    });
+    it("preserves base classes when custom class is added", () => {
+        render(RainbowButton, { props: { class: "extra" } });
+        const button = screen.getByRole("button");
+        expect(button.className).toContain("rainbow-button");
+        expect(button.className).toContain("rounded-xl");
+    });
+    it("supports disabled state on button", () => {
+        render(RainbowButton, { props: { disabled: true } });
+        expect(screen.getByRole("button")).toBeDisabled();
+    });
+    it('sets type="button" by default', () => {
+        render(RainbowButton);
+        expect(screen.getByRole("button")).toHaveAttribute("type", "button");
+    });
+    it("allows custom type attribute", () => {
+        render(RainbowButton, { props: { type: "submit" } });
+        expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+    });
+});

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

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

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

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

package/dist/fancy-ui/registry.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Component Registry
+ *
+ * Central registry of all FancyUI components and their implementation status.
+ * Used for generating demo pages, tracking progress, and documentation.
+ */
+import type { ComponentCategory, ComponentMeta, ComponentStatus } from "../types.js";
+/**
+ * Human-readable labels for component categories
+ */
+export declare const categoryLabels: Record<ComponentCategory, string>;
+/**
+ * Category descriptions for documentation
+ */
+export declare const categoryDescriptions: Record<ComponentCategory, string>;
+/**
+ * All available categories in display order
+ */
+export declare const categories: ComponentCategory[];
+/**
+ * Registry of all components with their metadata
+ *
+ * Add new components here as they are implemented.
+ * Keep alphabetically sorted within each status group.
+ */
+export declare const registry: Record<string, ComponentMeta>;
+/**
+ * Get all components as an array
+ */
+export declare function getAllComponents(): ComponentMeta[];
+/**
+ * Get a component by slug
+ */
+export declare function getComponent(slug: string): ComponentMeta | undefined;
+/**
+ * Get components filtered by status
+ */
+export declare function getComponentsByStatus(status: ComponentStatus): ComponentMeta[];
+/**
+ * Get components filtered by category
+ */
+export declare function getComponentsByCategory(category: ComponentCategory): ComponentMeta[];
+/**
+ * Get components grouped by category
+ */
+export declare function getComponentsGroupedByCategory(): Record<ComponentCategory, ComponentMeta[]>;
+/**
+ * Get components grouped by status
+ */
+export declare function getComponentsGroupedByStatus(): Record<ComponentStatus, ComponentMeta[]>;
+/**
+ * Search components by name or description
+ */
+export declare function searchComponents(query: string): ComponentMeta[];
+/**
+ * Get implementation statistics
+ */
+export declare function getStats(): {
+    total: number;
+    done: number;
+    inProgress: number;
+    planned: number;
+    percentComplete: number;
+};
+/**
+ * Check if a component exists in the registry
+ */
+export declare function hasComponent(slug: string): boolean;
+/**
+ * Get category for a component
+ */
+export declare function getComponentCategory(slug: string): ComponentCategory | undefined;