fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/fireworks-hdr/webgl2-renderer.js

@@ -2,7 +2,6 @@
 import { SDR_CORE_SCALE, SDR_KNEE_START, SDR_SAT_BOOST } from "./fireworks-shared.js";
 import { STRETCH } from "./fireworks-shared.js";
 import { TRAIL_FADE_RATE } from "./webgpu-renderer.js";
-import { isDev } from "./dev.js";
 const MAX_DPR = 2;
 const INSTANCE_FLOATS = 8;
 const INSTANCE_STRIDE = INSTANCE_FLOATS * 4;
@@ -167,9 +166,6 @@ function compileShader(gl, type, source) {
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    if (isDev()) {
-      console.warn("[FireworksHdr] WebGL2 shader compile failed:", gl.getShaderInfoLog(shader));
-    }
     gl.deleteShader(shader);
     return null;
   }
@@ -195,9 +191,6 @@ function linkProgram(gl, vsSrc, fsSrc) {
   gl.deleteShader(vs);
   gl.deleteShader(fs);
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    if (isDev()) {
-      console.warn("[FireworksHdr] WebGL2 program link failed:", gl.getProgramInfoLog(program));
-    }
     gl.deleteProgram(program);
     return null;
   }
@@ -232,18 +225,8 @@ function startWebGl2Fireworks(canvas, opts) {
     } catch {
     }
   }
-  if (isDev()) {
-    console.info(
-      renderLevel === "webgl-p3" ? "[FireworksHdr] WebGL2 fallback: webgl-p3 (wide-gamut drawing buffer)" : "[FireworksHdr] WebGL2 fallback: webgl-sdr"
-    );
-  }
   const floatAccum = !!glc.getExtension("EXT_color_buffer_float");
   if (wantFloatAccum && !floatAccum) {
-    if (isDev()) {
-      console.warn(
-        "[FireworksHdr] WebGL2 float-accum probe/context mismatch; bailing to static fallback"
-      );
-    }
     return null;
   }
   let renderScale = opts.renderScale ?? 1;
@@ -253,7 +236,6 @@ function startWebGl2Fireworks(canvas, opts) {
   function onContextLost(e) {
     e.preventDefault();
     lost = true;
-    if (isDev()) console.warn("[FireworksHdr] WebGL2 context lost");
   }
   canvas.addEventListener("webglcontextlost", onContextLost, false);
   let accum = null;
@@ -285,7 +267,6 @@ function startWebGl2Fireworks(canvas, opts) {
   fadeProgram = floatAccum ? null : linkProgram(glc, FULLSCREEN_VS, FADE_FS);
   const programsOk = floatAccum ? particleProgram && decayProgram && displayProgram : particleProgram && fadeProgram;
   if (!programsOk) {
-    if (isDev()) console.warn("[FireworksHdr] WebGL2 program setup failed");
     cleanupPartial();
     return null;
   }

package/dist/components/fireworks-hdr/webgpu-renderer.js

@@ -1,7 +1,6 @@
 "use client";
 import { EXPOSURE_AMBIENT } from "./fireworks-shared.js";
 import { STRETCH } from "./fireworks-shared.js";
-import { isDev } from "./dev.js";
 const TRAIL_FADE_RATE = 7;
 const MAX_DPR = 2;
 const ACCUM_FORMAT = "rgba16float";
@@ -268,7 +267,6 @@ async function startWebGpuFireworks(canvas, opts) {
     const adapter = await gpu.requestAdapter();
     if (!adapter) return null;
     const device = await adapter.requestDevice();
-    const { GPUShaderStage, GPUBufferUsage, GPUTextureUsage } = globalThis;
     const configuration = {
       device,
       format: ACCUM_FORMAT,
@@ -284,11 +282,8 @@ async function startWebGpuFireworks(canvas, opts) {
       }
       probe.configure(configuration);
       probe.unconfigure();
-    } catch (error) {
+    } catch {
       device.destroy();
-      if (isDev()) {
-        console.warn("[FireworksHdr] WebGPU canvas configuration rejected:", error);
-      }
       return null;
     }
     const maybeContext = canvas.getContext("webgpu");
@@ -308,20 +303,9 @@ async function startWebGpuFireworks(canvas, opts) {
     const hdrOutput = extendedToneMapping && hdrDisplay;
     let destroyed = false;
     let lost = false;
-    device.lost.then((info) => {
+    device.lost.then(() => {
       lost = true;
-      if (!destroyed && isDev()) {
-        console.warn(`[FireworksHdr] WebGPU device lost (${info.reason}): ${info.message}`);
-      }
     });
-    if (isDev()) {
-      device.addEventListener("uncapturederror", (event) => {
-        console.error(
-          "[FireworksHdr] WebGPU uncaptured error:",
-          event.error.message
-        );
-      });
-    }
     const module = device.createShaderModule({ code: WGSL });
     let renderScale = opts.renderScale ?? 1;
     const instanceCapacity = Math.max(1, opts.maxInstances);
@@ -443,10 +427,7 @@ async function startWebGpuFireworks(canvas, opts) {
         device.destroy();
       }
     };
-  } catch (error) {
-    if (isDev()) {
-      console.warn("[FireworksHdr] WebGPU init failed:", error);
-    }
+  } catch {
     return null;
   }
 }

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

@@ -1,8 +1,49 @@
 import type { ReactNode } from "react";
+export type FlipCardTrigger = "hover" | "click";
 export interface FlipCardProps {
+    /** Axis of rotation */
     rotate?: "x" | "y";
+    /**
+     * What flips the card. `hover` (default) flips on pointer hover and on
+     * keyboard focus; `click` makes the card a toggle button (click, tap,
+     * Enter or Space).
+     */
+    trigger?: FlipCardTrigger;
+    /**
+     * Whether the back is showing. Seeds the card on mount; changing it later
+     * turns the card the rest of the way. Pair with `onFlip` to keep it in sync
+     * (the React counterpart of the Svelte source's `bind:flipped`).
+     */
+    flipped?: boolean;
+    /** Called with the new state after every flip, however it happened. */
+    onFlip?: (flipped: boolean) => void;
+    /** Length of one flip in milliseconds */
+    duration?: number;
+    /** Light the faces as they turn: a sheen sweeping across and shading edge-on */
+    glare?: boolean;
+    /** Accessible name for the card (announced in click mode) */
+    label?: string;
+    /** Additional CSS classes on the card */
     className?: string;
+    /** Front face content */
     children?: ReactNode;
+    /** Back face content */
     back?: ReactNode;
 }
-export declare function FlipCard({ rotate, className, children, back }: FlipCardProps): import("react").JSX.Element;
+/** Whether an accumulated angle (a whole number of half turns) shows the back. */
+export declare function showsBack(angle: number): boolean;
+/**
+ * Which way to turn, from where the pointer crosses the card's edge: the
+ * card turns the way the pointer travels, so it seems pushed by it.
+ * `entering` is true on enter, false on leave.
+ */
+export declare function flipDirection(rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, point: {
+    x: number;
+    y: number;
+}, axis: "x" | "y", entering: boolean): 1 | -1;
+export declare function FlipCard({ rotate, trigger, flipped, onFlip, duration, glare, label, className, children, back, }: FlipCardProps): import("react").JSX.Element;

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