fancy-ui-react 0.2.1 → 0.4.0

package/dist/components/dock/Dock.js

@@ -1,77 +1,122 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { cn } from "../../utils.js";
 import { useReducedMotion, useMediaQuery } from "../../internals/motion/media-query.js";
 import { DOCK_CONTEXT_KEY } from "./types.js";
+/* empty css         */
 function Dock({
   className = "",
   magnification = 60,
   distance = 140,
   direction = "middle",
   orientation = "horizontal",
+  spotlight = true,
+  reflection = true,
   ariaLabel,
   children
 }) {
-  const [pointer, setPointer] = useState({
+  const [tracked, setTracked] = useState({
     x: Infinity,
-    y: Infinity
+    y: Infinity,
+    spotX: 0,
+    spotY: 0,
+    hovering: false
   });
+  const shelf = useRef(null);
   const reduced = useReducedMotion();
   const coarse = useMediaQuery("(any-hover: none)");
   const magnify = !reduced && !coarse;
-  const frames = useRef(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    const pending = frames.current;
-    return () => {
-      for (const id of pending) cancelAnimationFrame(id);
-      pending.clear();
-    };
-  }, []);
-  const schedule = useCallback((x, y) => {
-    const id = requestAnimationFrame(() => {
-      frames.current.delete(id);
-      setPointer({ x, y });
-    });
-    frames.current.add(id);
-  }, []);
+  const track = !coarse;
+  const frame = useRef(0);
+  const pending = useRef({ x: Infinity, y: Infinity });
+  useEffect(
+    () => () => {
+      if (frame.current && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(frame.current);
+      }
+      frame.current = 0;
+    },
+    []
+  );
+  function flush() {
+    frame.current = 0;
+    const { x, y } = pending.current;
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      const rect = shelf.current?.getBoundingClientRect();
+      setTracked((prev) => ({
+        x,
+        y,
+        spotX: rect ? x - rect.left : prev.spotX,
+        spotY: rect ? y - rect.top : prev.spotY,
+        hovering: true
+      }));
+    } else {
+      setTracked((prev) => ({ ...prev, x, y, hovering: false }));
+    }
+  }
+  function queue(x, y) {
+    pending.current = { x, y };
+    if (!frame.current) frame.current = requestAnimationFrame(flush);
+  }
   const context = useMemo(
     () => ({
-      mouseX: { current: pointer.x },
-      mouseY: { current: pointer.y },
+      mouseX: { current: tracked.x },
+      mouseY: { current: tracked.y },
       magnification,
       distance,
       orientation,
-      magnify
+      magnify,
+      reflection
     }),
-    [pointer, magnification, distance, orientation, magnify]
+    [tracked.x, tracked.y, magnification, distance, orientation, magnify, reflection]
   );
   function onPointerMove(e) {
-    if (!magnify) return;
+    if (!track) return;
     if (e.pointerType === "touch" || !e.isPrimary) return;
-    const { clientX, clientY } = e;
-    schedule(clientX, clientY);
+    queue(e.clientX, e.clientY);
   }
   function onPointerLeave() {
-    schedule(Infinity, Infinity);
+    queue(Infinity, Infinity);
   }
   const directionClass = direction === "top" ? "items-start" : direction === "bottom" ? "items-end" : "items-center";
-  return /* @__PURE__ */ jsx(DOCK_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+  const style = {
+    "--dock-x": `${tracked.spotX}px`,
+    "--dock-y": `${tracked.spotY}px`
+  };
+  return /* @__PURE__ */ jsx(DOCK_CONTEXT_KEY.Provider, { value: context, children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: shelf,
       className: cn(
-        "mx-auto flex h-[58px] w-max gap-4 rounded-2xl border p-2 backdrop-blur-md transition-all supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10",
+        "dock-shelf relative isolate mx-auto flex h-[58px] w-max gap-3 rounded-2xl border p-2 backdrop-blur-md backdrop-saturate-150",
+        "border-black/[0.08] bg-white/75 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_1px_2px_rgba(0,0,0,0.05),0_14px_32px_-14px_rgba(0,0,0,0.22)]",
+        "dark:border-white/[0.08] dark:bg-[rgba(20,20,22,0.7)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_1px_0_rgba(0,0,0,0.5),0_18px_40px_-14px_rgba(0,0,0,0.8)]",
         orientation === "vertical" && "h-max w-[58px] flex-col",
         directionClass,
         className
       ),
+      style,
+      "data-orientation": orientation,
+      "data-spotlight": spotlight || void 0,
+      "data-reflection": reflection || void 0,
+      "data-hover": tracked.hovering || void 0,
       onPointerMove,
       onPointerLeave,
       role: "toolbar",
-      "aria-orientation": orientation,
       "aria-label": ariaLabel,
+      "aria-orientation": orientation,
       tabIndex: 0,
-      children
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "dock-deco", "aria-hidden": "true", children: [
+          spotlight && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "dock-spot" }),
+            /* @__PURE__ */ jsx("span", { className: "dock-rim", children: /* @__PURE__ */ jsx("span", { className: "dock-rim-light" }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "dock-frame" })
+        ] }),
+        children
+      ]
     }
   ) });
 }

package/dist/components/dock/DockIcon.d.ts

@@ -1,4 +1,14 @@
 import type { ReactNode } from "react";
+/** Resting edge length of every icon, in pixels. */
+export declare const DOCK_BASE_SIZE = 40;
+/**
+ * The magnification curve: a cosine bell rather than a straight line.
+ * Full `magnification` under the pointer, easing smoothly to nothing at
+ * `distance`, with a flat top and flat shoulders — so neighbours swell and
+ * settle instead of forming a tent. Pure, so every framework shares the exact
+ * numbers.
+ */
+export declare function dockIconSize(offset: number, magnification: number, distance: number): number;
 export interface DockIconProps {
     /** Additional CSS classes */
     className?: string;
@@ -6,11 +16,12 @@ export interface DockIconProps {
     children?: ReactNode;
 }
 /**
- * One item in a `Dock`, sized from its distance to the pointer.
+ * One item in a `Dock`, sized from its distance to the pointer, with a floor
+ * reflection and an indicator dot when it is the icon under the pointer.
  *
  * The node arrives through `useElementRef` rather than a plain `useRef`: the
- * width is computed while rendering, so the component has to re-render once the
- * element actually exists. Before it does, the distance is `Infinity` and the
+ * size is computed while rendering, so the component has to re-render once the
+ * element actually exists. Before it does, the offset is `Infinity` and the
  * icon renders at its resting 40px — which is also the size it has at mount,
  * with the pointer still at `Infinity`, so nothing moves on that extra render.
  */

package/dist/components/dock/DockIcon.js

@@ -2,37 +2,41 @@
 import { jsx } from "react/jsx-runtime";
 import { useElementRef } from "../../internals/dom/use-element-ref.js";
 import { useDockContext } from "./types.js";
+/* empty css              */
+const DOCK_BASE_SIZE = 40;
+function dockIconSize(offset, magnification, distance) {
+  if (!distance || !magnification || !Number.isFinite(offset)) return DOCK_BASE_SIZE;
+  const t = Math.min(Math.max(Math.abs(offset) / distance, 0), 1);
+  return DOCK_BASE_SIZE + magnification * 0.5 * (1 + Math.cos(Math.PI * t));
+}
 function DockIcon({ className = "", children }) {
   const context = useDockContext();
   const [node, iconRef] = useElementRef();
-  function calculateDistance() {
-    if (!node) return Infinity;
+  function measure() {
+    const vertical = context.orientation === "vertical";
+    const pointer = vertical ? context.mouseY.current : context.mouseX.current;
+    if (!node || !Number.isFinite(pointer)) return { offset: Infinity, half: 0 };
     const bounds = node.getBoundingClientRect();
-    if (context.orientation === "vertical") {
-      return context.mouseY.current - bounds.y - bounds.height / 2;
-    }
-    return context.mouseX.current - bounds.x - bounds.width / 2;
-  }
-  function computeIconWidth() {
-    if (!context.magnify) return 40;
-    const distanceCalc = calculateDistance();
-    if (!context.distance || !context.magnification) return 40;
-    if (Math.abs(distanceCalc) < context.distance) {
-      return (1 - Math.abs(distanceCalc) / context.distance) * context.magnification + 40;
-    }
-    return 40;
+    return vertical ? { offset: pointer - bounds.y - bounds.height / 2, half: bounds.height / 2 } : { offset: pointer - bounds.x - bounds.width / 2, half: bounds.width / 2 };
   }
-  const iconWidth = computeIconWidth();
+  const probe = measure();
+  const iconSize = context.magnify ? dockIconSize(probe.offset, context.magnification, context.distance) : DOCK_BASE_SIZE;
+  const active = Math.abs(probe.offset) <= probe.half && probe.half > 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: iconRef,
-      className: `flex aspect-square cursor-pointer items-center justify-center rounded-full transition-all duration-200 ease-out ${className}`,
-      style: { width: `${iconWidth}px`, height: `${iconWidth}px` },
+      className: `dock-icon relative z-[1] flex aspect-square cursor-pointer items-center justify-center rounded-full ${className}`,
+      style: { width: `${iconSize}px`, height: `${iconSize}px` },
+      "data-orientation": context.orientation,
+      "data-reflection": context.reflection || void 0,
+      "data-dock-active": active || void 0,
       children
     }
   );
 }
 export {
-  DockIcon
+  DOCK_BASE_SIZE,
+  DockIcon,
+  dockIconSize
 };

package/dist/components/dock/DockSeparator.d.ts

@@ -2,5 +2,8 @@ export interface DockSeparatorProps {
     /** Additional CSS classes */
     className?: string;
 }
-/** A rule between two groups of dock icons, laid across the dock's own axis. */
+/**
+ * A hairline that fades out at both ends, so it reads as a seam in the glass
+ * rather than a bar laid on top of it. Laid across the dock's own axis.
+ */
 export declare function DockSeparator({ className }: DockSeparatorProps): import("react").JSX.Element;

package/dist/components/dock/DockSeparator.js

@@ -7,9 +7,12 @@ function DockSeparator({ className = "" }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      role: "separator",
+      "aria-orientation": context.orientation === "vertical" ? "horizontal" : "vertical",
       className: cn(
-        "bg-secondary relative block",
-        context.orientation === "vertical" ? "h-0.5 w-4/5" : "h-4/5 w-0.5",
+        "relative z-[1] block shrink-0 self-center",
+        context.orientation === "vertical" ? "h-px w-4/5 bg-gradient-to-r" : "h-4/5 w-px bg-gradient-to-b",
+        "from-transparent via-black/15 to-transparent dark:via-white/15",
         className
       )
     }

package/dist/components/dock/types.d.ts

@@ -2,8 +2,11 @@ export type DataOrientation = "vertical" | "horizontal";
 export type Direction = "top" | "middle" | "bottom";
 export interface DockContext {
     /**
-     * The pointer's page X, in a box rather than as a bare number — the shape
-     * the source publishes, kept verbatim so the exported type is unchanged.
+     * The pointer's VIEWPORT X (`clientX`), `Infinity` when the pointer is
+     * outside the dock. Viewport, not page, because `DockIcon` measures itself
+     * with `getBoundingClientRect()`, which is viewport-relative. In a box
+     * rather than as a bare number — the shape the source publishes, kept
+     * verbatim so the exported type is unchanged.
      *
      * There the box exists so children can read a reactive update through a
      * stable object; here the box is REBUILT by `Dock` on every pointer frame,
@@ -13,7 +16,7 @@ export interface DockContext {
     mouseX: {
         current: number;
     };
-    /** The pointer's page Y. Same box treatment as `mouseX`. */
+    /** The pointer's viewport Y (`clientY`). Same box treatment as `mouseX`. */
     mouseY: {
         current: number;
     };
@@ -23,11 +26,15 @@ export interface DockContext {
     /**
      * False when the visitor asked for reduced motion, or when the device has no
      * real pointer to track. `Dock` owns the two media queries behind it and
-     * `DockIcon` reads it before doing any measuring, so a device that will
-     * never magnify also never pays for a `getBoundingClientRect()` per icon per
-     * frame. Read-only: only `Dock` may write it.
+     * `DockIcon` reads it before sizing itself. Read-only: only `Dock` may
+     * write it.
      */
     readonly magnify: boolean;
+    /**
+     * Whether each icon casts its soft floor reflection (the contact shadow /
+     * glow ellipse under it). Mirrors the `reflection` prop on `Dock`.
+     */
+    readonly reflection: boolean;
 }
 /**
  * The context `DockIcon` and `DockSeparator` read to find their dock. The

package/dist/components/dropdown-menu/menu-shared.d.ts

@@ -5,18 +5,21 @@ export interface MenuContentKeydownOptions {
 }
 /**
  * Wires ArrowUp/Down, Home/End and single-character typeahead to a level's
- * menu-focus core, and Tab to `options.onTab`. Identical semantics whether
- * the panel is a `DropdownMenuContent` or its nested `*SubContent` — the keys
- * navigate whatever level currently holds real DOM focus, regardless of how
- * that level's panel was opened or positioned.
+ * `MenuFocus` core, and Tab to `options.onTab`. Identical semantics whether
+ * the panel is a `DropdownMenuContent`, a `ContextMenuContent`, or either
+ * one's nested `*SubContent` — the keys navigate whatever level currently
+ * holds real DOM focus, regardless of how that level's panel was opened or
+ * positioned.
  *
  * ArrowRight/ArrowLeft are deliberately not handled here: their key strings
  * are more than one character, so the typeahead fallback below already
  * ignores them, and `*SubTrigger`/`*SubContent` each own their half of that
  * pair directly on the element the key is actually about.
  *
- * Takes the native `KeyboardEvent` shape React's synthetic event satisfies
- * structurally, so a caller passes `event` straight through with no unwrap.
+ * The parameter is typed structurally (the handful of members this function
+ * actually reads) rather than as the concrete DOM `KeyboardEvent`, so a
+ * caller can pass any event shape that satisfies it — including a
+ * framework's own synthetic event — with no unwrap or cast.
  */
 export declare function handleMenuContentKeydown(event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey" | "altKey"> & {
     preventDefault(): void;
@@ -30,8 +33,8 @@ export declare function handleMenuContentKeydown(event: Pick<KeyboardEvent, "key
  * shared across levels, which is what keeps a deeply nested submenu from
  * closing an unrelated one two levels up.
  *
- * Allocation-only, so a component builds one through `useConstant`: it
- * installs no listener and starts no timer.
+ * Allocation-only: it installs no listener and starts no timer, so building
+ * one is safe to do exactly once per component instance.
  */
 export declare function createOpenSubRegistry(): {
     registerOpenSub(triggerEl: HTMLElement, close: () => void): () => void;

package/dist/components/editorial-engine/engine.js

@@ -140,13 +140,11 @@ function createEditorialEngine(stage, options) {
   function makeLineEl(className) {
     const element = document.createElement("span");
     element.className = className;
-    element.setAttribute("aria-hidden", "true");
     return element;
   }
   const orbEls = ORB_DEFS.map((def) => {
     const element = document.createElement("div");
     element.className = "ee-orb";
-    element.setAttribute("aria-hidden", "true");
     const [r, g, b] = def.color;
     element.style.background = `radial-gradient(circle at 35% 35%, rgba(${r},${g},${b},0.35), rgba(${r},${g},${b},0.12) 55%, transparent 72%)`;
     element.style.boxShadow = `0 0 60px 15px rgba(${r},${g},${b},0.18), 0 0 120px 40px rgba(${r},${g},${b},0.07)`;
@@ -155,7 +153,6 @@ function createEditorialEngine(stage, options) {
   });
   const dropCapEl = document.createElement("div");
   dropCapEl.className = "ee-drop-cap";
-  dropCapEl.setAttribute("aria-hidden", "true");
   stage.appendChild(dropCapEl);
   const preparedBody = prepareWithSegments(body, bodyFont, { whiteSpace: "pre-wrap" });
   const preparedPullquotes = pullquotes.map((text) => prepareWithSegments(text, pullquoteFont));
@@ -439,7 +436,6 @@ function createEditorialEngine(stage, options) {
     syncPool(pullquoteBoxPool, pullquoteRects.length, () => {
       const element = document.createElement("div");
       element.className = "ee-pullquote-box";
-      element.setAttribute("aria-hidden", "true");
       return element;
     });
     for (let i = 0; i < pullquoteRects.length; i++) {
@@ -541,16 +537,7 @@ function createEditorialEngine(stage, options) {
     window.removeEventListener("pointerup", onPointerUp);
     window.removeEventListener("pointercancel", onPointerUp);
     document.removeEventListener("selectionchange", onSelectionChange);
-    for (const element of [
-      ...bodyLinePool,
-      ...headlinePool,
-      ...pullquoteLinePool,
-      ...pullquoteBoxPool,
-      ...orbEls,
-      dropCapEl
-    ]) {
-      element.remove();
-    }
+    stage.replaceChildren();
   };
 }
 export {

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;