fancy-ui-svelte 0.2.1

package/dist/fancy-ui/book/Book.test.js

@@ -0,0 +1,47 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import Book from "./Book.svelte";
+describe("Book", () => {
+    afterEach(cleanup);
+    it("renders the component", () => {
+        const { container } = render(Book);
+        const wrapper = container.querySelector(".group");
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("has perspective class", () => {
+        const { container } = render(Book);
+        const wrapper = container.querySelector(".group");
+        expect(wrapper?.className).toContain("[perspective:800px]");
+    });
+    it("applies default size (md = 220px)", () => {
+        const { container } = render(Book);
+        const inner = container.querySelector(".group > div");
+        expect(inner?.style.width).toBe("220px");
+    });
+    it("applies custom size", () => {
+        const { container } = render(Book, { props: { size: "lg" } });
+        const inner = container.querySelector(".group > div");
+        expect(inner?.style.width).toBe("260px");
+    });
+    it("applies static transform when isStatic", () => {
+        const { container } = render(Book, { props: { isStatic: true } });
+        const inner = container.querySelector(".group > div");
+        expect(inner?.className).toContain("[transform:rotateY(-30deg)]");
+        expect(inner?.className).not.toContain("group-hover");
+    });
+    it("applies hover transform by default", () => {
+        const { container } = render(Book);
+        const inner = container.querySelector(".group > div");
+        expect(inner?.className).toContain("group-hover:[transform:rotateY(-30deg)]");
+    });
+    it("applies custom class", () => {
+        const { container } = render(Book, { props: { class: "my-book" } });
+        const wrapper = container.querySelector(".group");
+        expect(wrapper?.className).toContain("my-book");
+    });
+    it("renders spine element", () => {
+        const { container } = render(Book);
+        const spine = container.querySelector('[style*="rotateY(90deg)"]');
+        expect(spine).toBeInTheDocument();
+    });
+});

package/dist/fancy-ui/book/BookDescription.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+</script>
+
+<p class={cn("text-xs/relaxed select-none", className)}>
+	{#if children}
+		{@render children()}
+	{/if}
+</p>

package/dist/fancy-ui/book/BookDescription.svelte.d.ts

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

package/dist/fancy-ui/book/BookHeader.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+</script>
+
+<div class={cn("flex flex-wrap gap-2", className)}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/fancy-ui/book/BookHeader.svelte.d.ts

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

package/dist/fancy-ui/book/BookTitle.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../utils";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = "", children }: Props = $props();
+</script>
+
+<h1 class={cn("mt-3 mb-1 font-bold text-balance select-none", className)}>
+	{#if children}
+		{@render children()}
+	{/if}
+</h1>

package/dist/fancy-ui/book/BookTitle.svelte.d.ts

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

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

@@ -0,0 +1,34 @@
+# Book
+
+A 3D book component with cover, spine, and back face. Opens on hover with a smooth rotation animation.
+
+## Components
+
+- `Book` — Main container with 3D perspective
+- `BookHeader` — Flex container for tags/badges
+- `BookTitle` — Bold heading for the book title
+- `BookDescription` — Small text for description
+
+## Props (Book)
+
+| Prop         | Type           | Default  | Description                    |
+| ------------ | -------------- | -------- | ------------------------------ |
+| `color`      | `BookColor`    | `"zinc"` | Gradient color (22 options)    |
+| `size`       | `BookSize`     | `"md"`   | Width (sm/md/lg/xl)            |
+| `radius`     | `BookRadius`   | `"md"`   | Border radius                  |
+| `shadowSize` | `BookShadowSize` | `"lg"` | Back shadow size               |
+| `duration`   | `number`       | `1000`   | Transition duration in ms      |
+| `isStatic`   | `boolean`      | `false`  | Always show opened state       |
+| `class`      | `string`       | `""`     | Additional CSS classes         |
+
+## Usage
+
+```svelte
+<Book color="blue" size="md">
+  <BookHeader>
+    <span class="rounded bg-white/20 px-2 py-0.5 text-xs">New</span>
+  </BookHeader>
+  <BookTitle>My Book Title</BookTitle>
+  <BookDescription>A short description of the book.</BookDescription>
+</Book>
+```

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

@@ -0,0 +1,128 @@
+export declare const BOOK_RADIUS_MAP: {
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+};
+export declare const BOOK_SIZE_MAP: {
+    readonly sm: {
+        readonly width: "180px";
+        readonly spineTranslation: "152px";
+    };
+    readonly md: {
+        readonly width: "220px";
+        readonly spineTranslation: "192px";
+    };
+    readonly lg: {
+        readonly width: "260px";
+        readonly spineTranslation: "232px";
+    };
+    readonly xl: {
+        readonly width: "300px";
+        readonly spineTranslation: "272px";
+    };
+};
+export declare const BOOK_SHADOW_SIZE_MAP: {
+    readonly sm: "-5px 0 15px 5px var(--shadowColor)";
+    readonly md: "-7px 0 25px 7px var(--shadowColor)";
+    readonly lg: "-10px 0 35px 10px var(--shadowColor)";
+    readonly xl: "-12px 0 45px 12px var(--shadowColor)";
+};
+export declare const BOOK_COLOR_MAP: {
+    readonly slate: {
+        readonly from: "from-slate-900";
+        readonly to: "to-slate-700";
+    };
+    readonly gray: {
+        readonly from: "from-gray-900";
+        readonly to: "to-gray-700";
+    };
+    readonly zinc: {
+        readonly from: "from-zinc-900";
+        readonly to: "to-zinc-700";
+    };
+    readonly neutral: {
+        readonly from: "from-neutral-900";
+        readonly to: "to-neutral-700";
+    };
+    readonly stone: {
+        readonly from: "from-stone-900";
+        readonly to: "to-stone-700";
+    };
+    readonly red: {
+        readonly from: "from-red-900";
+        readonly to: "to-red-700";
+    };
+    readonly orange: {
+        readonly from: "from-orange-900";
+        readonly to: "to-orange-700";
+    };
+    readonly amber: {
+        readonly from: "from-amber-900";
+        readonly to: "to-amber-700";
+    };
+    readonly yellow: {
+        readonly from: "from-yellow-900";
+        readonly to: "to-yellow-700";
+    };
+    readonly lime: {
+        readonly from: "from-lime-900";
+        readonly to: "to-lime-700";
+    };
+    readonly green: {
+        readonly from: "from-green-900";
+        readonly to: "to-green-700";
+    };
+    readonly emerald: {
+        readonly from: "from-emerald-900";
+        readonly to: "to-emerald-700";
+    };
+    readonly teal: {
+        readonly from: "from-teal-900";
+        readonly to: "to-teal-700";
+    };
+    readonly cyan: {
+        readonly from: "from-cyan-900";
+        readonly to: "to-cyan-700";
+    };
+    readonly sky: {
+        readonly from: "from-sky-900";
+        readonly to: "to-sky-700";
+    };
+    readonly blue: {
+        readonly from: "from-blue-900";
+        readonly to: "to-blue-700";
+    };
+    readonly indigo: {
+        readonly from: "from-indigo-900";
+        readonly to: "to-indigo-700";
+    };
+    readonly violet: {
+        readonly from: "from-violet-900";
+        readonly to: "to-violet-700";
+    };
+    readonly purple: {
+        readonly from: "from-purple-900";
+        readonly to: "to-purple-700";
+    };
+    readonly fuchsia: {
+        readonly from: "from-fuchsia-900";
+        readonly to: "to-fuchsia-700";
+    };
+    readonly pink: {
+        readonly from: "from-pink-900";
+        readonly to: "to-pink-700";
+    };
+    readonly rose: {
+        readonly from: "from-rose-900";
+        readonly to: "to-rose-700";
+    };
+};
+export type BookColor = keyof typeof BOOK_COLOR_MAP;
+export type BookSize = keyof typeof BOOK_SIZE_MAP;
+export type BookRadius = keyof typeof BOOK_RADIUS_MAP;
+export type BookShadowSize = keyof typeof BOOK_SHADOW_SIZE_MAP;
+export { default as Book } from "./Book.svelte";
+export { default as BookHeader } from "./BookHeader.svelte";
+export { default as BookTitle } from "./BookTitle.svelte";
+export { default as BookDescription } from "./BookDescription.svelte";

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

@@ -0,0 +1,46 @@
+export const BOOK_RADIUS_MAP = {
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+};
+export const BOOK_SIZE_MAP = {
+    sm: { width: "180px", spineTranslation: "152px" },
+    md: { width: "220px", spineTranslation: "192px" },
+    lg: { width: "260px", spineTranslation: "232px" },
+    xl: { width: "300px", spineTranslation: "272px" },
+};
+export const BOOK_SHADOW_SIZE_MAP = {
+    sm: "-5px 0 15px 5px var(--shadowColor)",
+    md: "-7px 0 25px 7px var(--shadowColor)",
+    lg: "-10px 0 35px 10px var(--shadowColor)",
+    xl: "-12px 0 45px 12px var(--shadowColor)",
+};
+export const BOOK_COLOR_MAP = {
+    slate: { from: "from-slate-900", to: "to-slate-700" },
+    gray: { from: "from-gray-900", to: "to-gray-700" },
+    zinc: { from: "from-zinc-900", to: "to-zinc-700" },
+    neutral: { from: "from-neutral-900", to: "to-neutral-700" },
+    stone: { from: "from-stone-900", to: "to-stone-700" },
+    red: { from: "from-red-900", to: "to-red-700" },
+    orange: { from: "from-orange-900", to: "to-orange-700" },
+    amber: { from: "from-amber-900", to: "to-amber-700" },
+    yellow: { from: "from-yellow-900", to: "to-yellow-700" },
+    lime: { from: "from-lime-900", to: "to-lime-700" },
+    green: { from: "from-green-900", to: "to-green-700" },
+    emerald: { from: "from-emerald-900", to: "to-emerald-700" },
+    teal: { from: "from-teal-900", to: "to-teal-700" },
+    cyan: { from: "from-cyan-900", to: "to-cyan-700" },
+    sky: { from: "from-sky-900", to: "to-sky-700" },
+    blue: { from: "from-blue-900", to: "to-blue-700" },
+    indigo: { from: "from-indigo-900", to: "to-indigo-700" },
+    violet: { from: "from-violet-900", to: "to-violet-700" },
+    purple: { from: "from-purple-900", to: "to-purple-700" },
+    fuchsia: { from: "from-fuchsia-900", to: "to-fuchsia-700" },
+    pink: { from: "from-pink-900", to: "to-pink-700" },
+    rose: { from: "from-rose-900", to: "to-rose-700" },
+};
+export { default as Book } from "./Book.svelte";
+export { default as BookHeader } from "./BookHeader.svelte";
+export { default as BookTitle } from "./BookTitle.svelte";
+export { default as BookDescription } from "./BookDescription.svelte";

package/dist/fancy-ui/border-beam/BorderBeam.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+	/**
+	 * BorderBeam - Animated beam effect that travels around the border
+	 *
+	 * Place inside a container with `position: relative` and `overflow: hidden`.
+	 * The beam will animate around the container's border.
+	 */
+	export interface BorderBeamProps {
+		/** Additional CSS classes */
+		class?: string;
+		/** Size of the beam in pixels */
+		size?: number;
+		/** Animation duration in seconds */
+		duration?: number;
+		/** Border width in pixels */
+		borderWidth?: number;
+		/** Anchor position (0-100) */
+		anchor?: number;
+		/** Gradient start color */
+		colorFrom?: string;
+		/** Gradient end color */
+		colorTo?: string;
+		/** Animation delay in seconds */
+		delay?: number;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		size = 200,
+		duration = 15,
+		borderWidth = 1.5,
+		anchor = 90,
+		colorFrom = "#ffaa40",
+		colorTo = "#9c40ff",
+		delay = 0,
+	}: BorderBeamProps = $props();
+
+	const style = $derived(
+		[
+			`--border-beam-size: ${size}`,
+			`--border-beam-duration: ${duration}s`,
+			`--border-beam-anchor: ${anchor}`,
+			`--border-beam-border-width: ${borderWidth}`,
+			`--border-beam-color-from: ${colorFrom}`,
+			`--border-beam-color-to: ${colorTo}`,
+			`--border-beam-delay: ${delay}s`,
+		].join(";")
+	);
+</script>
+
+<div
+	class={cn(
+		"border-beam",
+		"pointer-events-none absolute inset-0 rounded-[inherit]",
+		"[border:calc(var(--border-beam-border-width)*1px)_solid_transparent]",
+		"![mask-composite:intersect] ![mask-clip:padding-box,border-box] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
+		"after:absolute after:aspect-square after:w-[calc(var(--border-beam-size)*1px)]",
+		"after:[animation-delay:var(--border-beam-delay)]",
+		"after:[background:linear-gradient(to_left,var(--border-beam-color-from),var(--border-beam-color-to),transparent)]",
+		"after:[offset-anchor:calc(var(--border-beam-anchor)*1%)_50%]",
+		"after:[offset-path:rect(0_auto_auto_0_round_calc(var(--border-beam-size)*1px))]",
+		className
+	)}
+	{style}
+></div>
+
+<style>
+	.border-beam::after {
+		content: "";
+		animation: border-beam-animation var(--border-beam-duration) infinite linear;
+	}
+
+	@keyframes border-beam-animation {
+		0% {
+			offset-distance: 0%;
+		}
+		100% {
+			offset-distance: 100%;
+		}
+	}
+</style>

package/dist/fancy-ui/border-beam/BorderBeam.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * BorderBeam - Animated beam effect that travels around the border
+ *
+ * Place inside a container with `position: relative` and `overflow: hidden`.
+ * The beam will animate around the container's border.
+ */
+export interface BorderBeamProps {
+    /** Additional CSS classes */
+    class?: string;
+    /** Size of the beam in pixels */
+    size?: number;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Anchor position (0-100) */
+    anchor?: number;
+    /** Gradient start color */
+    colorFrom?: string;
+    /** Gradient end color */
+    colorTo?: string;
+    /** Animation delay in seconds */
+    delay?: number;
+}
+declare const BorderBeam: import("svelte").Component<BorderBeamProps, {}, "">;
+type BorderBeam = ReturnType<typeof BorderBeam>;
+export default BorderBeam;

package/dist/fancy-ui/border-beam/BorderBeam.test.d.ts

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

package/dist/fancy-ui/border-beam/BorderBeam.test.js

@@ -0,0 +1,64 @@
+import { render, cleanup } from "@testing-library/svelte";
+import { afterEach, describe, it, expect } from "vitest";
+import BorderBeam from "./BorderBeam.svelte";
+describe("BorderBeam", () => {
+    afterEach(cleanup);
+    it("renders a div element", () => {
+        const { container } = render(BorderBeam);
+        const div = container.querySelector(".border-beam");
+        expect(div).toBeInTheDocument();
+    });
+    it("applies default CSS custom properties", () => {
+        const { container } = render(BorderBeam);
+        const div = container.querySelector(".border-beam");
+        const style = div.getAttribute("style") ?? "";
+        expect(style).toContain("--border-beam-size: 200");
+        expect(style).toContain("--border-beam-duration: 15s");
+        expect(style).toContain("--border-beam-anchor: 90");
+        expect(style).toContain("--border-beam-border-width: 1.5");
+        expect(style).toContain("--border-beam-color-from: #ffaa40");
+        expect(style).toContain("--border-beam-color-to: #9c40ff");
+        expect(style).toContain("--border-beam-delay: 0s");
+    });
+    it("applies custom size", () => {
+        const { container } = render(BorderBeam, { props: { size: 300 } });
+        const div = container.querySelector(".border-beam");
+        expect(div.getAttribute("style")).toContain("--border-beam-size: 300");
+    });
+    it("applies custom duration", () => {
+        const { container } = render(BorderBeam, { props: { duration: 5 } });
+        const div = container.querySelector(".border-beam");
+        expect(div.getAttribute("style")).toContain("--border-beam-duration: 5s");
+    });
+    it("applies custom colors", () => {
+        const { container } = render(BorderBeam, {
+            props: { colorFrom: "#ff0000", colorTo: "#00ff00" },
+        });
+        const div = container.querySelector(".border-beam");
+        const style = div.getAttribute("style") ?? "";
+        expect(style).toContain("--border-beam-color-from: #ff0000");
+        expect(style).toContain("--border-beam-color-to: #00ff00");
+    });
+    it("applies custom delay", () => {
+        const { container } = render(BorderBeam, { props: { delay: 3 } });
+        const div = container.querySelector(".border-beam");
+        expect(div.getAttribute("style")).toContain("--border-beam-delay: 3s");
+    });
+    it("applies custom borderWidth", () => {
+        const { container } = render(BorderBeam, { props: { borderWidth: 3 } });
+        const div = container.querySelector(".border-beam");
+        expect(div.getAttribute("style")).toContain("--border-beam-border-width: 3");
+    });
+    it("applies custom class names", () => {
+        const { container } = render(BorderBeam, { props: { class: "my-beam" } });
+        const div = container.querySelector(".border-beam");
+        expect(div?.className).toContain("my-beam");
+    });
+    it("preserves base classes when custom class is added", () => {
+        const { container } = render(BorderBeam, { props: { class: "extra" } });
+        const div = container.querySelector(".border-beam");
+        expect(div?.className).toContain("pointer-events-none");
+        expect(div?.className).toContain("absolute");
+        expect(div?.className).toContain("inset-0");
+    });
+});

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

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

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

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

package/dist/fancy-ui/box-reveal/BoxReveal.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	/**
+	 * BoxReveal - Sliding box reveal animation
+	 *
+	 * Content fades up while a colored box slides from left to right,
+	 * revealing the content underneath. Triggers when entering viewport
+	 * via IntersectionObserver.
+	 */
+	export interface BoxRevealProps {
+		/** Color of the reveal box */
+		color?: string;
+		/** Animation duration in seconds */
+		duration?: number;
+		/** Delay before animation starts (seconds) */
+		delay?: number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { onMount } from "svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		color = "#5046e6",
+		duration = 0.5,
+		delay = 0.25,
+		class: className,
+		children,
+	}: BoxRevealProps & { children: Snippet } = $props();
+
+	let containerRef: HTMLDivElement;
+	let isInView = $state(false);
+
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) {
+					isInView = true;
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0.1 }
+		);
+
+		observer.observe(containerRef);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div bind:this={containerRef} class={cn("box-reveal relative overflow-hidden", className)}>
+	<!-- Content (fades up) -->
+	<div
+		class="box-reveal-content"
+		style="opacity:{isInView ? 1 : 0};transform:translateY({isInView
+			? 0
+			: 25}px);transition:opacity {duration}s ease {delay * 2}s,transform {duration}s ease {delay *
+			2}s"
+	>
+		{@render children()}
+	</div>
+
+	<!-- Sliding box overlay -->
+	<div
+		class="box-reveal-overlay absolute inset-0 z-20"
+		style="background:{color};left:{isInView
+			? '100%'
+			: '0%'};transition:left {duration}s ease-in {delay}s"
+	></div>
+</div>

package/dist/fancy-ui/box-reveal/BoxReveal.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * BoxReveal - Sliding box reveal animation
+ *
+ * Content fades up while a colored box slides from left to right,
+ * revealing the content underneath. Triggers when entering viewport
+ * via IntersectionObserver.
+ */
+export interface BoxRevealProps {
+    /** Color of the reveal box */
+    color?: string;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Delay before animation starts (seconds) */
+    delay?: number;
+    /** Additional CSS classes */
+    class?: string;
+}
+import type { Snippet } from "svelte";
+type $$ComponentProps = BoxRevealProps & {
+    children: Snippet;
+};
+declare const BoxReveal: import("svelte").Component<$$ComponentProps, {}, "">;
+type BoxReveal = ReturnType<typeof BoxReveal>;
+export default BoxReveal;

package/dist/fancy-ui/box-reveal/BoxReveal.test.d.ts

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