fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/glow-border/GlowBorder.js

@@ -1,39 +1,119 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../utils.js";
 /* empty css                */
+const GLOW_BORDER_PRESETS = {
+  chromatic: {
+    dark: {
+      tints: ["#ffffff", "#f5b8d0", "#8fe3d9", "#b9a8ff", "#f3d58a"],
+      body: "#8a9099",
+      shadow: "#2a2d33"
+    },
+    light: {
+      tints: ["#5b636d", "#d9669a", "#2fa89a", "#7a62e6", "#c99a2e"],
+      body: "#9aa3ad",
+      shadow: "#e3e6ea"
+    }
+  },
+  silver: {
+    dark: {
+      tints: ["#ffffff", "#dfe4ea", "#b8c2cf", "#f2f5f8"],
+      body: "#7d848f",
+      shadow: "#2b2f35"
+    },
+    light: {
+      tints: ["#4b525c", "#7d8793", "#5f6975", "#2f353d"],
+      body: "#aab2bc",
+      shadow: "#e6e9ed"
+    }
+  },
+  gold: {
+    dark: {
+      tints: ["#fff4cf", "#f7d98b", "#ffe7a3", "#e9b95c"],
+      body: "#c8973f",
+      shadow: "#4a3616"
+    },
+    light: {
+      tints: ["#8a6424", "#b8862f", "#6e4d17", "#c99a2e"],
+      body: "#d9b56a",
+      shadow: "#f3e8cf"
+    }
+  }
+};
+function customPalette(color, theme) {
+  const list = (Array.isArray(color) ? color : [color]).filter(Boolean);
+  const tints = list.length ? list : ["#ffffff"];
+  return theme === "dark" ? { tints: ["#ffffff", ...tints], body: "#7d848f", shadow: "#2a2d33" } : { tints, body: "#9aa3ad", shadow: "#e3e6ea" };
+}
+function metalField(p, angleVar, at, offset = 0) {
+  const stops = [];
+  const n = p.tints.length;
+  const step = 100 / n;
+  for (let i = 0; i < n; i++) {
+    const base = i * step;
+    const tint = p.tints[(i + offset) % n];
+    stops.push(`${p.shadow} ${base.toFixed(1)}%`);
+    stops.push(`${p.shadow} ${(base + step * 0.22).toFixed(1)}%`);
+    stops.push(`${p.body} ${(base + step * 0.4).toFixed(1)}%`);
+    stops.push(`${tint} ${(base + step * 0.5).toFixed(1)}%`);
+    stops.push(`${p.body} ${(base + step * 0.6).toFixed(1)}%`);
+    stops.push(`${p.shadow} ${(base + step * 0.8).toFixed(1)}%`);
+  }
+  stops.push(`${p.shadow} 100%`);
+  return `conic-gradient(from var(${angleVar}) at ${at}, ${stops.join(", ")})`;
+}
+function metalBackground(p) {
+  return `${metalField(p, "--gb-a1", "30% 40%")}, ${metalField(p, "--gb-a2", "72% 65%", 2)}`;
+}
+function glintArc(p) {
+  const lead = p.tints[1] ?? p.tints[0];
+  const tail = p.tints[2] ?? p.tints[p.tints.length - 1];
+  return `conic-gradient(from var(--gb-a3), transparent 0%, transparent 72%, ${tail} 84%, #ffffff 90%, ${lead} 94%, transparent 99%)`;
+}
 function GlowBorder({
   className = "",
   borderRadius = 10,
-  color = "#FFF",
-  borderWidth = 2,
-  duration = 10
+  color,
+  borderWidth = 1.5,
+  duration = 10,
+  preset = "chromatic",
+  strength = 0.8
 }) {
-  const colorString = Array.isArray(color) ? color.join(",") : color;
+  const palettes = color !== void 0 ? { dark: customPalette(color, "dark"), light: customPalette(color, "light") } : GLOW_BORDER_PRESETS[preset] ?? GLOW_BORDER_PRESETS.chromatic;
+  const strengthC = Math.min(1, Math.max(0, Number.isFinite(strength) ? strength : 0.8));
   const styles = {
     "--glow-border-radius": `${borderRadius}px`,
     "--glow-border-width": `${borderWidth}px`,
     "--glow-duration": `${duration}s`,
-    backgroundImage: `radial-gradient(transparent, transparent, ${colorString}, transparent, transparent)`,
-    backgroundSize: "300% 300%",
-    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
-    WebkitMaskComposite: "xor",
-    maskComposite: "exclude",
-    padding: "var(--glow-border-width)",
+    "--glow-strength": `${strengthC}`,
+    "--gb-metal-dark": metalBackground(palettes.dark),
+    "--gb-metal-light": metalBackground(palettes.light),
+    "--gb-glint-dark": glintArc(palettes.dark),
+    "--gb-glint-light": glintArc(palettes.light),
     borderRadius: "var(--glow-border-radius)"
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "animate-glow pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]",
+        "glow-border animate-glow pointer-events-none absolute inset-0 size-full rounded-[inherit]",
         className
       ),
-      style: styles
+      style: styles,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "glow-border__halo", children: /* @__PURE__ */ jsx("span", {}) }),
+        /* @__PURE__ */ jsx("span", { className: "glow-border__metal" }),
+        /* @__PURE__ */ jsx("span", { className: "glow-border__glint" })
+      ]
     }
   );
 }
 export {
-  GlowBorder
+  GLOW_BORDER_PRESETS,
+  GlowBorder,
+  customPalette,
+  glintArc,
+  metalBackground,
+  metalField
 };

package/dist/components/glow-border/index.d.ts

@@ -1,2 +1,2 @@
-export { GlowBorder } from "./GlowBorder.js";
-export type { GlowBorderProps } from "./GlowBorder.js";
+export { GlowBorder, GLOW_BORDER_PRESETS } from "./GlowBorder.js";
+export type { GlowBorderPreset, GlowBorderProps } from "./GlowBorder.js";

package/dist/components/gradient-button/GradientButton.d.ts

@@ -1,16 +1,16 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 type BaseProps = {
-    /** Gradient colors for the conic-gradient border */
+    /** Colours of the beam, spread along its arc */
     colors?: string[];
-    /** Animation duration in milliseconds */
+    /** Time for the beam to travel once around the button, in milliseconds */
     duration?: number;
-    /** Border width in pixels */
+    /** Width of the lit border in pixels */
     borderWidth?: number;
     /** Border radius in pixels */
     borderRadius?: number;
-    /** Blur amount for the gradient in pixels */
+    /** Softness of the glow the beam casts inside the button, in pixels */
     blur?: number;
-    /** Background color of the button content area */
+    /** Background color of the button face */
     bgColor?: string;
     /** Custom CSS class */
     className?: string;
@@ -24,5 +24,10 @@ type BaseProps = {
 };
 export interface GradientButtonProps extends BaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {
 }
+/**
+ * The beam as a conic gradient: a main arc carrying every colour over ~40%
+ * of the turn, and a fainter echo opposite it. Turned by `--gb-angle`.
+ */
+export declare function beamGradient(colors: string[]): string;
 export declare const GradientButton: import("react").ForwardRefExoticComponent<GradientButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/gradient-button/GradientButton.js

@@ -4,25 +4,29 @@ import { forwardRef } from "react";
 import { cn } from "../../utils.js";
 import { useSoundCue } from "../../sound/use-sound.js";
 /* empty css                    */
-const DEFAULT_COLORS = [
-  "#FF0000",
-  "#FFA500",
-  "#FFFF00",
-  "#008000",
-  "#0000FF",
-  "#4B0082",
-  "#EE82EE",
-  "#FF0000"
-];
+function beamGradient(colors) {
+  const list = colors.length ? colors : ["#ffffff"];
+  const arc = (from, to, strength) => {
+    const span = to - from;
+    const stops = list.map((c, i) => {
+      const at = from + span * ((i + 1) / (list.length + 1));
+      const color = strength < 100 ? `color-mix(in srgb, ${c} ${strength}%, transparent)` : c;
+      return `${color} ${at.toFixed(1)}%`;
+    });
+    return [`transparent ${from}%`, ...stops, `transparent ${to}%`].join(", ");
+  };
+  return `conic-gradient(from var(--gb-angle), ${arc(0, 42, 100)}, ${arc(50, 78, 45)}, transparent 100%)`;
+}
+const DEFAULT_COLORS = ["#34d399", "#22d3ee", "#6366f1", "#d946ef", "#f43f5e", "#f59e0b"];
 const GradientButton = forwardRef(
   ({
     className,
     colors = DEFAULT_COLORS,
-    duration = 2500,
-    borderWidth = 2,
-    borderRadius = 8,
+    duration = 3e3,
+    borderWidth = 1.5,
+    borderRadius = 12,
     blur = 4,
-    bgColor = "#000",
+    bgColor = "#161616",
     children,
     onClick,
     sound = false,
@@ -35,6 +39,7 @@ const GradientButton = forwardRef(
     }
     const styleVars = {
       "--gb-colors": colors.join(", "),
+      "--gb-beam": beamGradient(colors),
       "--gb-duration": `${duration}ms`,
       "--gb-border-width": `${borderWidth}px`,
       "--gb-border-radius": `${borderRadius}px`,
@@ -46,15 +51,16 @@ const GradientButton = forwardRef(
       {
         ref,
         className: cn(
-          "gradient-button relative flex min-h-10 min-w-28 cursor-pointer items-center justify-center overflow-hidden",
+          "gradient-button relative flex min-h-10 min-w-28 cursor-pointer items-center justify-center overflow-hidden text-white",
           className
         ),
         style: styleVars,
         onClick: handleClick,
         ...restProps,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "gradient-border", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "gradient-content inline-flex size-full items-center justify-center px-4 py-2", children })
+          /* @__PURE__ */ jsx("span", { className: "gradient-content inline-flex size-full items-center justify-center px-5 py-2.5", children }),
+          /* @__PURE__ */ jsx("span", { className: "gradient-glow", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", {}) }),
+          /* @__PURE__ */ jsx("span", { className: "gradient-border", "aria-hidden": "true" })
         ]
       }
     );
@@ -62,5 +68,6 @@ const GradientButton = forwardRef(
 );
 GradientButton.displayName = "GradientButton";
 export {
-  GradientButton
+  GradientButton,
+  beamGradient
 };

package/dist/components/image-trail-cursor/ImageTrailCursor.js

@@ -7,6 +7,7 @@ function resetImageStyles(container) {
   const imgEls = container.querySelectorAll(".content__img");
   for (const el of imgEls) {
     el.style.cssText = "";
+    for (const frag of el.querySelectorAll(".content__img-frag")) frag.remove();
     const inner = el.querySelector(".content__img-inner");
     if (inner) {
       const bgImage = inner.style.backgroundImage;

package/dist/components/image-trail-cursor/trail-variants.d.ts

@@ -1,4 +1,4 @@
-export type VariantType = "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8" | "pixelated";
+export type VariantType = "type1" | "type2" | "type3" | "type4" | "type5" | "type6" | "type7" | "type8" | "pixelated" | "scale" | "fall" | "gravity" | "flame" | "venetian" | "curtain" | "hexagon" | "liquid" | "zoom-split";
 export interface ImageTrailVariant {
     destroy(): void;
 }
@@ -60,6 +60,8 @@ declare abstract class BaseVariant implements ImageTrailVariant {
     protected render(): void;
     protected updateCache(): void;
     protected abstract showNextImage(): void;
+    /** Advance to the next image in the ring. */
+    protected nextImage(): ImageItem | undefined;
     protected onImageActivated(): void;
     protected onImageDeactivated(): void;
     destroy(): void;
@@ -108,5 +110,39 @@ export declare class ImageTrailVariantPixelated extends BaseVariant {
     constructor(container: HTMLDivElement);
     protected showNextImage(): void;
 }
+export declare class ImageTrailVariantScale extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantFall extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantGravity extends BaseVariant {
+    protected showNextImage(): void;
+}
+export declare class ImageTrailVariantFlame extends BaseVariant {
+    protected showNextImage(): void;
+}
+export type RevealPattern = "venetian" | "curtain" | "hexagon" | "liquid" | "zoom-split";
+export interface RevealFragment {
+    /** clip-path while hidden */
+    closed: string;
+    /** clip-path once revealed */
+    open: string;
+    /** 0 (first) … 1 (last): when the fragment opens within the stagger */
+    order: number;
+}
+/**
+ * The fragments of each reveal, as clip-paths in the image's own box.
+ * `closed` and `open` always have the same shape and point count, so the
+ * tween between them is a straight interpolation.
+ */
+export declare function revealFragments(pattern: RevealPattern): RevealFragment[];
+export declare class ImageTrailVariantReveal extends BaseVariant {
+    private static readonly STAGGER;
+    private readonly fragments;
+    constructor(container: HTMLDivElement, pattern: RevealPattern);
+    protected showNextImage(): void;
+    destroy(): void;
+}
 export declare const variantMap: Record<VariantType, new (container: HTMLDivElement) => ImageTrailVariant>;
 export {};