fancy-ui-react 0.2.0

package/dist/components/bg-falling-stars/FallingStarsBg.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+function hexToRgb(hex) {
+  let h = (hex || "#000").replace(/^#/, "");
+  if (h.length === 3) {
+    h = h.split("").map((c) => c + c).join("");
+  }
+  const bigint = parseInt(h, 16) || 0;
+  return {
+    r: bigint >> 16 & 255,
+    g: bigint >> 8 & 255,
+    b: bigint & 255
+  };
+}
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function FallingStarsBg({
+  color = "#FFF",
+  count = 200,
+  className = "",
+  seed = 1
+}) {
+  const canvasRef = useRef(null);
+  const rgbRef = useRef(hexToRgb(color));
+  useEffect(() => {
+    rgbRef.current = hexToRgb(color);
+  }, [color]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const random = mulberry32(seed);
+    let perspective = 0;
+    let stars = [];
+    let ctx = null;
+    let dpr = 1;
+    let rafId = 0;
+    function resizeCanvas() {
+      if (!canvas) return;
+      dpr = window.devicePixelRatio || 1;
+      const width = Math.max(1, Math.floor(canvas.clientWidth));
+      const height = Math.max(1, Math.floor(canvas.clientHeight));
+      canvas.width = Math.floor(width * dpr);
+      canvas.height = Math.floor(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
+      perspective = width / 2;
+    }
+    function drawStar(star, width, height) {
+      if (!ctx) return;
+      const scale = perspective / (perspective + star.z);
+      const x2d = width / 2 + star.x * scale;
+      const y2d = height / 2 + star.y * scale;
+      const size = Math.max(scale * 3, 0.5);
+      const prevScale = perspective / (perspective + star.z + star.speed * 15);
+      const xPrev = width / 2 + star.x * prevScale;
+      const yPrev = height / 2 + star.y * prevScale;
+      const rgb = rgbRef.current;
+      const layerAlphas = [0.08, 0.14, 0.22];
+      for (let i = 0; i < layerAlphas.length; i++) {
+        ctx.beginPath();
+        ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${layerAlphas[i]})`;
+        ctx.lineWidth = size * (1.4 + i * 1.2);
+        ctx.moveTo(x2d, y2d);
+        ctx.lineTo(xPrev, yPrev);
+        ctx.stroke();
+      }
+      ctx.beginPath();
+      ctx.strokeStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.6)`;
+      ctx.lineWidth = Math.max(1, size);
+      ctx.moveTo(x2d, y2d);
+      ctx.lineTo(xPrev, yPrev);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`;
+      ctx.arc(x2d, y2d, Math.max(0.5, size / 4), 0, Math.PI * 2);
+      ctx.fill();
+    }
+    function loop() {
+      if (!canvas) return;
+      if (!ctx) ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      ctx.clearRect(0, 0, width, height);
+      for (const star of stars) {
+        drawStar(star, width, height);
+        star.z -= star.speed;
+        if (star.z <= 0) {
+          star.z = width || 1;
+          star.x = (random() - 0.5) * 2 * width;
+          star.y = (random() - 0.5) * 2 * height;
+        }
+      }
+      rafId = requestAnimationFrame(loop);
+    }
+    resizeCanvas();
+    const cssWidth = canvas.clientWidth;
+    const cssHeight = canvas.clientHeight;
+    stars = [];
+    for (let i = 0; i < count; i++) {
+      stars.push({
+        x: (random() - 0.5) * 2 * cssWidth,
+        y: (random() - 0.5) * 2 * cssHeight,
+        z: random() * (cssWidth || 1),
+        speed: random() * 5 + 2
+      });
+    }
+    rafId = requestAnimationFrame(loop);
+    const resizeObserver = new ResizeObserver(() => resizeCanvas());
+    resizeObserver.observe(canvas);
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
+  }, [count, seed]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: cn("absolute inset-0 h-full w-full", className) });
+}
+export {
+  FallingStarsBg
+};

package/dist/components/bg-falling-stars/index.d.ts

@@ -0,0 +1,2 @@
+export { FallingStarsBg } from "./FallingStarsBg.js";
+export type { FallingStarsBgProps } from "./FallingStarsBg.js";

package/dist/components/bg-stars/StarsBackground.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+export interface StarsBackgroundProps {
+    /**
+     * Parallax factor for mouse movement (default: 0.05)
+     */
+    factor?: number;
+    /**
+     * Base animation speed in seconds (default: 50)
+     */
+    speed?: number;
+    /**
+     * Spring stiffness for parallax (default: 50)
+     */
+    stiffness?: number;
+    /**
+     * Spring damping for parallax (default: 20)
+     */
+    damping?: number;
+    /**
+     * Color of the stars (default: #fff)
+     */
+    starColor?: string;
+    /**
+     * Seed for the star layout. The same seed always produces the same sky.
+     * The Svelte side scatters stars with `Math.random()` in a client-only
+     * effect; a render-path `Math.random()` would differ between a server
+     * render and its hydration, so the port derives the layout from a
+     * deterministic PRNG instead (default: 1).
+     */
+    seed?: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Child content to render over the stars
+     */
+    children?: ReactNode;
+}
+export declare function StarsBackground({ factor, speed, stiffness, damping, starColor, seed, className, children, }: StarsBackgroundProps): import("react").JSX.Element;

package/dist/components/bg-stars/StarsBackground.js

@@ -0,0 +1,188 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+/* empty css             */
+function mulberry32(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateStars(count, color, random) {
+  const shadows = [];
+  for (let i = 0; i < count; i++) {
+    const x = Math.floor(random() * 4e3) - 2e3;
+    const y = Math.floor(random() * 4e3) - 2e3;
+    shadows.push(`${x}px ${y}px ${color}`);
+  }
+  return shadows.join(", ");
+}
+function StarsBackground({
+  factor = 0.05,
+  speed = 50,
+  stiffness = 50,
+  damping = 20,
+  starColor = "#fff",
+  seed = 1,
+  className,
+  children
+}) {
+  const [boxShadow1, boxShadow2, boxShadow3] = useMemo(() => {
+    const random = mulberry32(seed);
+    return [
+      generateStars(1e3, starColor, random),
+      generateStars(400, starColor, random),
+      generateStars(200, starColor, random)
+    ];
+  }, [starColor, seed]);
+  const parallaxEl = useRef(null);
+  const target = useRef({ x: 0, y: 0 });
+  const velocity = useRef({ x: 0, y: 0 });
+  const spring = useRef({ x: 0, y: 0 });
+  const wakeSpring = useRef(() => {
+  });
+  function handleMouseMove(e) {
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+    target.current.x = -(e.clientX - centerX) * factor;
+    target.current.y = -(e.clientY - centerY) * factor;
+    wakeSpring.current();
+  }
+  useEffect(() => {
+    const REST_EPSILON = 0.01;
+    let animationFrame = 0;
+    function updateSpring() {
+      animationFrame = 0;
+      const forceX = (target.current.x - spring.current.x) * (stiffness / 1e3);
+      const forceY = (target.current.y - spring.current.y) * (stiffness / 1e3);
+      velocity.current.x = velocity.current.x * (1 - damping / 100) + forceX;
+      velocity.current.y = velocity.current.y * (1 - damping / 100) + forceY;
+      spring.current.x += velocity.current.x;
+      spring.current.y += velocity.current.y;
+      const atRest = Math.abs(velocity.current.x) < REST_EPSILON && Math.abs(velocity.current.y) < REST_EPSILON && Math.abs(target.current.x - spring.current.x) < REST_EPSILON && Math.abs(target.current.y - spring.current.y) < REST_EPSILON;
+      if (atRest) {
+        velocity.current.x = 0;
+        velocity.current.y = 0;
+        spring.current.x = target.current.x;
+        spring.current.y = target.current.y;
+      }
+      if (parallaxEl.current) {
+        parallaxEl.current.style.transform = `translate(${spring.current.x}px, ${spring.current.y}px)`;
+      }
+      if (!atRest) {
+        animationFrame = requestAnimationFrame(updateSpring);
+      }
+    }
+    function start() {
+      if (animationFrame !== 0 || document.hidden) return;
+      animationFrame = requestAnimationFrame(updateSpring);
+    }
+    function stop() {
+      if (animationFrame !== 0) {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = 0;
+      }
+    }
+    function handleVisibilityChange() {
+      if (document.hidden) {
+        stop();
+      } else {
+        start();
+      }
+    }
+    wakeSpring.current = start;
+    start();
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      wakeSpring.current = () => {
+      };
+      stop();
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [stiffness, damping]);
+  const layer1Duration = `${speed}s`;
+  const layer2Duration = `${speed * 2}s`;
+  const layer3Duration = `${speed * 3}s`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // `fancy-bg-stars` is a port-added anchor for the colocated CSS
+        // (PORTING.md, styling rule 2). Not the bare slug: tailwind-merge
+        // classifies a `bg-*` token as a background class and would drop
+        // it against a consumer-supplied `bg-*` override.
+        "fancy-bg-stars relative size-full overflow-hidden bg-[radial-gradient(ellipse_at_bottom,_#262626_0%,_#000_100%)]",
+        className
+      ),
+      onMouseMove: handleMouseMove,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: parallaxEl,
+            className: "stars-parallax",
+            style: { transform: "translate(0px, 0px)" },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "star-layer", style: { "--duration": layer1Duration }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "star-field",
+                    style: { width: "1px", height: "1px", boxShadow: boxShadow1 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "star-field top-[2000px]",
+                    style: { width: "1px", height: "1px", boxShadow: boxShadow1 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "star-layer", style: { "--duration": layer2Duration }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "star-field",
+                    style: { width: "2px", height: "2px", boxShadow: boxShadow2 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "star-field top-[2000px]",
+                    style: { width: "2px", height: "2px", boxShadow: boxShadow2 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "star-layer", style: { "--duration": layer3Duration }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "star-field",
+                    style: { width: "3px", height: "3px", boxShadow: boxShadow3 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "star-field top-[2000px]",
+                    style: { width: "3px", height: "3px", boxShadow: boxShadow3 }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+export {
+  StarsBackground
+};

package/dist/components/bg-stars/index.d.ts

@@ -0,0 +1,2 @@
+export { StarsBackground } from "./StarsBackground.js";
+export type { StarsBackgroundProps } from "./StarsBackground.js";

package/dist/components/blur-reveal/BlurReveal.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+/** Props for BlurReveal */
+export interface BlurRevealProps {
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Stagger delay between children in seconds */
+    delay?: number;
+    /** Initial blur amount (CSS value) */
+    blur?: string;
+    /** Initial vertical offset in pixels */
+    yOffset?: number;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Reveal style: "blur" softens in with blur/translate, "hard" snaps opacity with no easing */
+    mode?: "blur" | "hard";
+    /** Content to reveal */
+    children?: ReactNode;
+}
+export declare function BlurReveal({ duration, delay, blur, yOffset, className, mode, children, }: BlurRevealProps): import("react").JSX.Element;

package/dist/components/blur-reveal/BlurReveal.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+/* empty css                */
+function BlurReveal({
+  duration = 1,
+  delay = 0.2,
+  blur = "20px",
+  yOffset = 20,
+  className,
+  mode = "blur",
+  children
+}) {
+  const containerRef = useRef(null);
+  const [isInView, setIsInView] = useState(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setIsInView(true);
+            observer.disconnect();
+          }
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  const style = {
+    "--blur-reveal-duration": `${duration}s`,
+    "--blur-reveal-delay": `${delay}s`,
+    "--blur-reveal-blur": blur,
+    "--blur-reveal-y": `${yOffset}px`
+  };
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn(className), style, children: children ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("blur-reveal-wrapper", isInView && "is-visible", mode === "hard" && "mode-hard"),
+      children
+    }
+  ) : null });
+}
+export {
+  BlurReveal
+};

package/dist/components/blur-reveal/index.d.ts

@@ -0,0 +1,2 @@
+export { BlurReveal } from "./BlurReveal.js";
+export type { BlurRevealProps } from "./BlurReveal.js";

package/dist/components/book/Book.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type BookRadius, type BookSize, type BookColor, type BookShadowSize } from "./index.js";
+export interface BookProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "color"> {
+    className?: string;
+    duration?: number;
+    color?: BookColor;
+    isStatic?: boolean;
+    size?: BookSize;
+    radius?: BookRadius;
+    shadowSize?: BookShadowSize;
+    children?: ReactNode;
+}
+export declare function Book({ className, duration, color, isStatic, size, radius, shadowSize, children, ...rest }: BookProps): import("react").JSX.Element;

package/dist/components/book/Book.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+import { BOOK_COLOR_MAP, BOOK_SIZE_MAP, BOOK_RADIUS_MAP, BOOK_SHADOW_SIZE_MAP } from "./index.js";
+function Book({
+  className = "",
+  duration = 1e3,
+  color = "zinc",
+  isStatic = false,
+  size = "md",
+  radius = "md",
+  shadowSize = "lg",
+  children,
+  ...rest
+}) {
+  const computedGradient = BOOK_COLOR_MAP[color] || BOOK_COLOR_MAP.zinc;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group z-10 w-min [--shadowColor:#bbb] [perspective:800px] dark:[--shadowColor:#111]",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { width: BOOK_SIZE_MAP[size].width, transition: `transform ${duration}ms ease` },
+          className: cn(
+            "relative aspect-[3/4] [transform-style:preserve-3d]",
+            isStatic ? "[transform:rotateY(-30deg)]" : "[transform:rotateY(0deg)] group-hover:[transform:rotateY(-30deg)]",
+            BOOK_RADIUS_MAP[radius]
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 left-0 flex size-full flex-col justify-end overflow-hidden bg-gradient-to-tr p-6 text-white",
+                  computedGradient.from,
+                  computedGradient.to,
+                  BOOK_RADIUS_MAP[radius]
+                ),
+                style: { transform: "translateZ(25px)", boxShadow: "5px 5px 20px var(--shadowColor)" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute top-0 left-0 h-full",
+                      style: {
+                        minWidth: "8.2%",
+                        background: "linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 12%, hsla(0, 0%, 100%, .25) 29.25%, hsla(0, 0%, 100%, 0) 50.5%, hsla(0, 0%, 100%, 0) 75.25%, hsla(0, 0%, 100%, .25) 91%, hsla(0, 0%, 100%, 0)), linear-gradient(90deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .1) 12%, transparent 30%, rgba(0, 0, 0, .02) 50%, rgba(0, 0, 0, .2) 73.5%, rgba(0, 0, 0, .5) 75.25%, rgba(0, 0, 0, .15) 85.25%, transparent)",
+                        opacity: 0.2
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "pl-1", children })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute left-0 bg-white",
+                style: {
+                  top: "3px",
+                  bottom: "3px",
+                  width: "48px",
+                  transform: `translateX(${BOOK_SIZE_MAP[size].spineTranslation}) rotateY(90deg)`,
+                  background: "linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(249,249,249,1) 50%)"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-y-0 left-0 flex size-full flex-col justify-end overflow-hidden bg-gradient-to-tr p-6 text-white",
+                  computedGradient.from,
+                  computedGradient.to,
+                  BOOK_RADIUS_MAP[radius]
+                ),
+                style: { transform: "translateZ(-25px)", boxShadow: BOOK_SHADOW_SIZE_MAP[shadowSize] }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Book
+};

package/dist/components/book/BookDescription.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BookDescriptionProps extends Omit<HTMLAttributes<HTMLParagraphElement>, "className"> {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function BookDescription({ className, children, ...rest }: BookDescriptionProps): import("react").JSX.Element;

package/dist/components/book/BookDescription.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function BookDescription({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs/relaxed select-none", className), ...rest, children });
+}
+export {
+  BookDescription
+};

package/dist/components/book/BookHeader.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BookHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function BookHeader({ className, children, ...rest }: BookHeaderProps): import("react").JSX.Element;

package/dist/components/book/BookHeader.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function BookHeader({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), ...rest, children });
+}
+export {
+  BookHeader
+};

package/dist/components/book/BookTitle.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface BookTitleProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "className"> {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function BookTitle({ className, children, ...rest }: BookTitleProps): import("react").JSX.Element;

package/dist/components/book/BookTitle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function BookTitle({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsx("h1", { className: cn("mt-3 mb-1 font-bold text-balance select-none", className), ...rest, children });
+}
+export {
+  BookTitle
+};