fancy-ui-react 0.2.1 → 0.4.0

package/dist/components/flip-card/FlipCard.js

@@ -1,35 +1,188 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 import { cn } from "../../utils.js";
-const rotationClass = {
-  x: ["group-hover:[transform:rotateX(180deg)]", "[transform:rotateX(180deg)]"],
-  y: ["group-hover:[transform:rotateY(180deg)]", "[transform:rotateY(180deg)]"]
-};
-function FlipCard({ rotate = "y", className = "", children, back }) {
-  const rotation = rotationClass[rotate];
-  return /* @__PURE__ */ jsx("div", { className: cn("group h-72 w-56 [perspective:1000px]", className), children: /* @__PURE__ */ jsxs(
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { useInertAttribute } from "../../internals/dom/use-inert-attribute.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+/* empty css              */
+function showsBack(angle) {
+  return Math.abs(Math.round(angle / 180)) % 2 === 1;
+}
+function flipDirection(rect, point, axis, entering) {
+  const along = axis === "y" ? point.x - rect.left - rect.width / 2 : point.y - rect.top - rect.height / 2;
+  const towardEnd = entering ? along < 0 : along >= 0;
+  const sign = towardEnd ? 1 : -1;
+  return axis === "y" ? sign : -sign;
+}
+const INTERACTIVE = "a, button, input, select, textarea, label, [role='button'], [contenteditable='true']";
+function FlipCard({
+  rotate = "y",
+  trigger = "hover",
+  flipped = false,
+  onFlip,
+  duration = 700,
+  glare = true,
+  label,
+  className = "",
+  children,
+  back
+}) {
+  const reduced = useReducedMotion();
+  const [angle, setAngle] = useState(() => flipped ? 180 : 0);
+  const angleRef = useRef(angle);
+  const showingBack = showsBack(angle);
+  const rootRef = useRef(null);
+  const liftRef = useRef(null);
+  const shadowRef = useRef(null);
+  const frontInertRef = useInertAttribute(showingBack);
+  const backInertRef = useInertAttribute(!showingBack);
+  const live = useLiveRef({ onFlip, duration, reduced });
+  function setAngleTo(next) {
+    angleRef.current = next;
+    setAngle(next);
+  }
+  function lift() {
+    const { reduced: reduced2, duration: duration2 } = live.current;
+    if (reduced2) return;
+    const opts = { duration: duration2, easing: "cubic-bezier(0.33, 1, 0.68, 1)" };
+    liftRef.current?.animate?.(
+      [
+        { transform: "translateZ(0) scale(1)" },
+        { transform: "translateZ(40px) scale(1.05)", offset: 0.45 },
+        { transform: "translateZ(0) scale(1)" }
+      ],
+      opts
+    );
+    shadowRef.current?.animate?.(
+      [
+        { opacity: 0.35, transform: "translateY(10px) scale(0.92)", filter: "blur(14px)" },
+        {
+          opacity: 0.18,
+          transform: "translateY(26px) scale(0.85)",
+          filter: "blur(26px)",
+          offset: 0.45
+        },
+        { opacity: 0.35, transform: "translateY(10px) scale(0.92)", filter: "blur(14px)" }
+      ],
+      opts
+    );
+  }
+  function turn(direction) {
+    setAngleTo(angleRef.current + 180 * direction);
+    const next = showsBack(angleRef.current);
+    live.current.onFlip?.(next);
+    lift();
+  }
+  const liveLift = useLiveRef(lift);
+  useEffect(() => {
+    if (flipped !== showsBack(angleRef.current)) {
+      setAngleTo(angleRef.current + 180);
+      live.current.onFlip?.(flipped);
+      liveLift.current();
+    }
+  }, [flipped, live, liveLift]);
+  function pointerCross(event, entering) {
+    const root = rootRef.current;
+    if (trigger !== "hover" || event.pointerType === "touch" || !root) return;
+    const wantBack = entering;
+    if (showsBack(angleRef.current) === wantBack) return;
+    const dir = flipDirection(
+      root.getBoundingClientRect(),
+      { x: event.clientX, y: event.clientY },
+      rotate,
+      entering
+    );
+    turn(dir);
+  }
+  function handleFocus(event) {
+    if (trigger !== "hover" || showsBack(angleRef.current)) return;
+    if (event.target === rootRef.current) turn(1);
+  }
+  function handleBlur(event) {
+    if (event.target !== rootRef.current) return;
+    if (trigger !== "hover" || !showsBack(angleRef.current)) return;
+    const root = rootRef.current;
+    if (root && event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) return;
+    turn(1);
+  }
+  function isInnerControl(target) {
+    const root = rootRef.current;
+    if (!(target instanceof Element) || !root) return false;
+    const control = target.closest(INTERACTIVE);
+    return control !== null && control !== root && root.contains(control);
+  }
+  function handleClick(event) {
+    const touchOnHover = trigger === "hover" && event.nativeEvent.pointerType === "touch";
+    if (trigger !== "click" && !touchOnHover) return;
+    if (isInnerControl(event.target)) return;
+    turn(1);
+  }
+  function handleKeyDown(event) {
+    if (trigger !== "click" || event.target !== rootRef.current) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      turn(1);
+    }
+  }
+  const style = {
+    "--fc-duration": `${duration}ms`,
+    "--fc-target": `${angle}deg`
+  };
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
-        "relative h-full rounded-2xl transition-all duration-500 [transform-style:preserve-3d]",
-        rotation[0]
-      ),
+      ref: rootRef,
+      className: cn("group ft-flip-card relative h-72 w-56 [perspective:1000px]", className),
+      "data-axis": rotate,
+      "data-flipped": showingBack ? "" : void 0,
+      "data-trigger": trigger,
+      style,
+      role: trigger === "click" ? "button" : "group",
+      tabIndex: 0,
+      "aria-pressed": trigger === "click" ? showingBack : void 0,
+      "aria-label": label,
+      "aria-roledescription": "flip card",
+      onPointerEnter: (e) => pointerCross(e, true),
+      onPointerLeave: (e) => pointerCross(e, false),
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute size-full overflow-hidden rounded-2xl border [backface-visibility:hidden]", children }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "absolute h-full w-full overflow-hidden rounded-2xl border bg-black/80 p-4 text-slate-200 [backface-visibility:hidden]",
-              rotation[1]
-            ),
-            children: back
-          }
-        )
+        /* @__PURE__ */ jsx("div", { ref: shadowRef, className: "ft-flip-card__shadow", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { ref: liftRef, className: "ft-flip-card__lift size-full [transform-style:preserve-3d]", children: /* @__PURE__ */ jsxs("div", { className: "ft-flip-card__inner relative size-full rounded-2xl [transform-style:preserve-3d]", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: frontInertRef,
+              className: "ft-flip-card__face ft-flip-card__front bg-card text-card-foreground absolute size-full overflow-hidden rounded-2xl border [backface-visibility:hidden]",
+              "aria-hidden": showingBack ? "true" : void 0,
+              children: [
+                children,
+                glare ? /* @__PURE__ */ jsx("span", { className: "ft-flip-card__light", "aria-hidden": "true" }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: backInertRef,
+              className: "ft-flip-card__face ft-flip-card__back bg-card text-card-foreground absolute size-full overflow-hidden rounded-2xl border p-4 [backface-visibility:hidden]",
+              "aria-hidden": showingBack ? void 0 : "true",
+              children: [
+                back,
+                glare ? /* @__PURE__ */ jsx("span", { className: "ft-flip-card__light", "aria-hidden": "true" }) : null
+              ]
+            }
+          )
+        ] }) })
       ]
     }
-  ) });
+  );
 }
 export {
-  FlipCard
+  FlipCard,
+  flipDirection,
+  showsBack
 };

package/dist/components/flip-card/index.d.ts

@@ -1,2 +1,2 @@
 export { FlipCard } from "./FlipCard.js";
-export type { FlipCardProps } from "./FlipCard.js";
+export type { FlipCardProps, FlipCardTrigger } from "./FlipCard.js";

package/dist/components/fluid-cursor/FluidCursor.js

@@ -3,7 +3,8 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useLiveRef } from "../../internals/dom/use-live-ref.js";
 import { cn } from "../../utils.js";
-import { hexToRgb, clickBoost, DEV, wrap, pointerPrototype, scaleRadiusForContainer, HSVtoRGB } from "./fluid-shared.js";
+import { hexToRgb, clickBoost, wrap, pointerPrototype, scaleRadiusForContainer, HSVtoRGB } from "./fluid-shared.js";
+import { isDev } from "./dev.js";
 import { startWebGpuFluid } from "./webgpu-engine.js";
 function FluidCursor({
   simResolution = 128,
@@ -110,7 +111,7 @@ function FluidCursor({
   function registerInstance(cleanup) {
     if (!allowMultiple) {
       if (activeInstanceRef.current) {
-        if (DEV) {
+        if (isDev()) {
           console.warn(
             "[FluidCursor] Destroying previous instance. Only one instance is allowed by default. Use `allowMultiple={true}` to opt out of singleton behavior."
           );
@@ -210,7 +211,7 @@ function FluidCursor({
         activeCleanup = registerInstance(handle.cleanup);
         notifyReady(handle);
       }).catch((error) => {
-        if (DEV) {
+        if (isDev()) {
           console.warn("[FluidCursor] WebGPU setup failed, falling back to WebGL:", error);
         }
         if (!disposed) activeCleanup = startWebGl() ?? null;
@@ -262,7 +263,7 @@ function FluidCursor({
             }
           } catch {
           }
-          if (DEV) {
+          if (isDev()) {
             console.info(
               renderLevel === "webgl-p3" ? "[FluidCursor] HDR level: webgl-p3 (wide gamut fallback)" : "[FluidCursor] HDR level: webgl-sdr (display-p3 drawing buffer rejected)"
             );

package/dist/components/fluid-cursor/dev.d.ts

@@ -0,0 +1 @@
+export declare function isDev(): boolean;

package/dist/components/fluid-cursor/dev.js

@@ -0,0 +1,8 @@
+"use client";
+function isDev() {
+  const env = globalThis.process?.env;
+  return env?.NODE_ENV !== void 0 && env.NODE_ENV !== "production";
+}
+export {
+  isDev
+};

package/dist/components/fluid-cursor/fluid-shared.d.ts

@@ -88,5 +88,3 @@ export interface FluidCursorHandle {
     burst(x: number, y: number, dx: number, dy: number, color: ColorRGB): void;
     readonly renderLevel: FluidRenderLevel;
 }
-/** True outside a production build: gates the engines' console diagnostics. */
-export declare const DEV: boolean;

package/dist/components/fluid-cursor/fluid-shared.js

@@ -110,10 +110,8 @@ function correctDeltaY(delta, width, height) {
   if (aspectRatio > 1) return delta / aspectRatio;
   return delta;
 }
-const DEV = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
 export {
   CLICK_PEAK,
-  DEV,
   HSVtoRGB,
   clickBoost,
   correctDeltaX,

package/dist/components/fluid-cursor/webgpu-engine.js

@@ -1,5 +1,5 @@
 "use client";
-import { getSimResolution, correctRadius, scaleRadiusForContainer, DEV, pointerPrototype, correctDeltaX, correctDeltaY } from "./fluid-shared.js";
+import { getSimResolution, correctRadius, scaleRadiusForContainer, pointerPrototype, correctDeltaX, correctDeltaY } from "./fluid-shared.js";
 const WGSL = (
   /* wgsl */
   `
@@ -527,11 +527,8 @@ async function createWebGpuFluid(canvas, opts) {
       }
       probe.configure(configuration);
       probe.unconfigure();
-    } catch (error) {
+    } catch {
       device.destroy();
-      if (DEV) {
-        console.warn("[FluidCursor] WebGPU canvas configuration rejected:", error);
-      }
       return null;
     }
     const maybeContext = canvas.getContext("webgpu");
@@ -547,24 +544,11 @@ async function createWebGpuFluid(canvas, opts) {
       extendedToneMapping = applied?.toneMapping?.mode === "extended";
     } catch {
     }
-    if (DEV) {
-      console.info(
-        extendedToneMapping ? "[FluidCursor] extended tone mapping active (webgpu-hdr if the display reports high dynamic range)" : "[FluidCursor] HDR level: webgpu-sdr (float16 + P3, tone mapping clamped by browser)"
-      );
-    }
     let destroyed = false;
     let lost = false;
-    device.lost.then((info) => {
+    device.lost.then(() => {
       lost = true;
-      if (!destroyed && DEV) {
-        console.warn(`[FluidCursor] WebGPU device lost (${info.reason}): ${info.message}`);
-      }
     });
-    if (DEV) {
-      device.addEventListener("uncapturederror", (event) => {
-        console.error("[FluidCursor] WebGPU uncaptured error:", event.error.message);
-      });
-    }
     const module = device.createShaderModule({ code: WGSL });
     const bindGroupLayout = device.createBindGroupLayout({
       entries: [
@@ -643,10 +627,7 @@ async function createWebGpuFluid(canvas, opts) {
         device.destroy();
       }
     };
-  } catch (error) {
-    if (DEV) {
-      console.warn("[FluidCursor] WebGPU init failed, falling back to WebGL:", error);
-    }
+  } catch {
     return null;
   }
 }
@@ -805,6 +786,7 @@ async function startWebGpuFluid(canvas, opts) {
     const pointer = pointers[0];
     for (let i = 0; i < touches.length; i++) {
       const touch = touches[i];
+      if (!touch) continue;
       const { x: posX, y: posY } = getCanvasPos(touch.clientX, touch.clientY);
       updatePointerDownData(pointer, touch.identifier, posX, posY);
     }
@@ -815,6 +797,7 @@ async function startWebGpuFluid(canvas, opts) {
     const pointer = pointers[0];
     for (let i = 0; i < touches.length; i++) {
       const touch = touches[i];
+      if (!touch) continue;
       const { x: posX, y: posY } = getCanvasPos(touch.clientX, touch.clientY);
       updatePointerDownData(pointer, touch.identifier, posX, posY);
     }
@@ -824,6 +807,7 @@ async function startWebGpuFluid(canvas, opts) {
     const pointer = pointers[0];
     for (let i = 0; i < touches.length; i++) {
       const touch = touches[i];
+      if (!touch) continue;
       const { x: posX, y: posY } = getCanvasPos(touch.clientX, touch.clientY);
       updatePointerMoveData(pointer, posX, posY, pointer.color);
     }
@@ -847,7 +831,9 @@ async function startWebGpuFluid(canvas, opts) {
   let observer = null;
   if (opts.pauseWhenHidden) {
     observer = new IntersectionObserver(
-      ([entry]) => {
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
         const wasVisible = isVisible;
         isVisible = entry.isIntersecting;
         if (isVisible && !wasVisible && !stopped) {

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

@@ -1,8 +1,48 @@
+export type GlowBorderPreset = "chromatic" | "silver" | "gold";
 export interface GlowBorderProps {
+    /** Additional classes on the overlay */
     className?: string;
+    /** Border radius in pixels (the overlay also inherits its parent's radius) */
     borderRadius?: number;
+    /**
+     * Custom metal tints: one colour or several. Overrides `preset`; neutral
+     * silver and shadow tones are woven in so it still reads as metal.
+     */
     color?: string | string[];
+    /** Width of the metal ring in pixels */
     borderWidth?: number;
+    /** Length of one flow cycle of the metal, in seconds. The glint laps in 0.4× that. */
     duration?: number;
+    /** Metal palette: iridescent chrome, cool steel or warm gold */
+    preset?: GlowBorderPreset;
+    /** Intensity of the glint and its glow, 0–1 */
+    strength?: number;
 }
-export declare function GlowBorder({ className, borderRadius, color, borderWidth, duration, }: GlowBorderProps): import("react").JSX.Element;
+interface Palette {
+    /** Bright tints, the colours the reflections flash. */
+    tints: string[];
+    /** The metal's body between reflections. */
+    body: string;
+    /** The shadow a reflection falls off into. */
+    shadow: string;
+}
+/** Palettes per preset, one per theme: light pages need deeper tones to read. */
+export declare const GLOW_BORDER_PRESETS: Record<GlowBorderPreset, {
+    dark: Palette;
+    light: Palette;
+}>;
+/** A custom `color` turned into a metal palette: the tints, over neutral body and shadow. */
+export declare function customPalette(color: string | string[], theme: "dark" | "light"): Palette;
+/**
+ * One metal field as a conic gradient: reflections (tints) alternating
+ * with body and shadow, spread around the turn so no two flashes touch.
+ * Two of these, centred apart and turning against each other, are what
+ * make the surface look liquid rather than spun.
+ */
+export declare function metalField(p: Palette, angleVar: string, at: string, offset?: number): string;
+/** Both metal fields, stacked for `background` (blended in CSS). */
+export declare function metalBackground(p: Palette): string;
+/** The glint's colour trail: a short arc that brightens to white. */
+export declare function glintArc(p: Palette): string;
+export declare function GlowBorder({ className, borderRadius, color, borderWidth, duration, preset, strength, }: GlowBorderProps): import("react").JSX.Element;
+export {};

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 {};