fancy-ui-react 0.2.0

package/dist/components/rainbow-button/RainbowButton.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                   */
+const RainbowButton = forwardRef(
+  ({ className, speed = 2, href, type = "button", disabled, children, sound = false }, ref) => {
+    const speedStyle = { "--rainbow-speed": `${speed}s` };
+    const playCue = useSoundCue(sound);
+    function handleClick() {
+      if (disabled) return;
+      playCue("press");
+    }
+    const baseClasses = cn(
+      "rainbow-button",
+      "group relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+      // Glow effect
+      "before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--rainbow-1),var(--rainbow-5),var(--rainbow-3),var(--rainbow-4),var(--rainbow-2))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]",
+      // Light mode: dark button with light text
+      "text-white bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--rainbow-1),var(--rainbow-5),var(--rainbow-3),var(--rainbow-4),var(--rainbow-2))]",
+      // Dark mode: light button with dark text
+      "dark:text-black dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--rainbow-1),var(--rainbow-5),var(--rainbow-3),var(--rainbow-4),var(--rainbow-2))]",
+      className
+    );
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          className: baseClasses,
+          style: speedStyle,
+          href,
+          "aria-disabled": disabled,
+          role: disabled ? "link" : void 0,
+          tabIndex: disabled ? -1 : void 0,
+          onClick: handleClick,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: baseClasses,
+        style: speedStyle,
+        type,
+        disabled,
+        onClick: handleClick,
+        children
+      }
+    );
+  }
+);
+RainbowButton.displayName = "RainbowButton";
+export {
+  RainbowButton
+};

package/dist/components/rainbow-button/index.d.ts

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

package/dist/components/reasoning-panel/ReasoningPanel.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Props for ReasoningPanel
+ */
+export interface ReasoningPanelProps {
+    /** The reasoning trace so far. Hand over a longer string to stream more in. */
+    text: string;
+    /** Whether the trace is still growing. Drives the timer, the shimmer, and autoscroll. */
+    streaming?: boolean;
+    /**
+     * Whether the trace is expanded. Left alone until either the component or
+     * the reader changes it — see the open-behaviour contract in the README. A
+     * changed prop value is adopted as the new state and announced through
+     * `onToggle`, the counterpart of a consumer writing to the bound variable
+     * on the Svelte side.
+     */
+    open?: boolean;
+    /** Header text. */
+    label?: string;
+    /** Epoch ms the current burst started at. Pins the live timer's origin. */
+    since?: number;
+    /** Final duration for the summary line. Falls back to what the timer measured. */
+    durationMs?: number;
+    /** Scroll height of the trace once expanded. */
+    maxHeight?: string;
+    /** Called whenever the panel opens or closes, by click or on its own. */
+    onToggle?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * ReasoningPanel
+ */
+export declare const ReasoningPanel: import("react").ForwardRefExoticComponent<ReasoningPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/reasoning-panel/ReasoningPanel.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useInsertionEffect, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { StreamText } from "../../internals/StreamText.js";
+import { useAutoscroll } from "../../internals/use-autoscroll.js";
+import { useElapsed, formatElapsed } from "../../internals/use-elapsed.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useInertAttribute } from "../../internals/dom/use-inert-attribute.js";
+import { useEventCallback } from "../../internals/dom/use-event-callback.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                    */
+const AUTO_COLLAPSE_MS = 600;
+const ReasoningPanel = forwardRef(
+  function ReasoningPanel2({
+    text,
+    streaming = false,
+    open: openProp,
+    label = "Reasoning",
+    since,
+    durationMs,
+    maxHeight = "12rem",
+    onToggle,
+    className,
+    sound = false
+  }, ref) {
+    const uid = useFancyId();
+    const headerId = `${uid}-header`;
+    const bodyId = `${uid}-body`;
+    const [openState, setOpenState] = useState(openProp);
+    const [autoOpen, setAutoOpen] = useState(false);
+    const [measuredMs, setMeasuredMs] = useState(0);
+    const lastOpenProp = useRef(openProp);
+    if (openProp !== lastOpenProp.current) {
+      lastOpenProp.current = openProp;
+      if (openProp !== openState) setOpenState(openProp);
+    }
+    const isOpen = openState ?? autoOpen;
+    const isOpenRef = useLiveRef(isOpen);
+    const decidedOpen = useRef(void 0);
+    useInsertionEffect(() => {
+      decidedOpen.current = void 0;
+    });
+    function currentOpen() {
+      return decidedOpen.current ?? isOpenRef.current;
+    }
+    const userToggled = useRef(false);
+    const wasStreaming = useRef(false);
+    const collapseTimer = useRef(void 0);
+    const lastNotifiedOpen = useRef(isOpen);
+    const elapsed = useElapsed();
+    const elapsedMsRef = useLiveRef(elapsed.ms);
+    const { start: startElapsed, stop: stopElapsed } = elapsed;
+    const playCue = useSoundCue(sound);
+    const duration = durationMs ?? measuredMs;
+    const summary = streaming ? formatElapsed(elapsed.ms) : duration > 0 ? `Thought for ${formatElapsed(duration)}` : "";
+    function clearCollapseTimer() {
+      if (collapseTimer.current !== void 0) {
+        clearTimeout(collapseTimer.current);
+        collapseTimer.current = void 0;
+      }
+    }
+    const commit = useEventCallback((next) => {
+      if (currentOpen() === next) return;
+      decidedOpen.current = next;
+      setOpenState(next);
+      setAutoOpen(next);
+      lastNotifiedOpen.current = next;
+      onToggle?.(next);
+    });
+    function toggle() {
+      userToggled.current = true;
+      clearCollapseTimer();
+      const next = !currentOpen();
+      playCue(next ? "open" : "close");
+      commit(next);
+    }
+    useEffect(() => {
+      clearCollapseTimer();
+      if (streaming) {
+        wasStreaming.current = true;
+        if (!userToggled.current) commit(true);
+        return clearCollapseTimer;
+      }
+      if (!wasStreaming.current) return clearCollapseTimer;
+      wasStreaming.current = false;
+      if (userToggled.current) return clearCollapseTimer;
+      collapseTimer.current = setTimeout(() => {
+        collapseTimer.current = void 0;
+        commit(false);
+      }, AUTO_COLLAPSE_MS);
+      return clearCollapseTimer;
+    }, [streaming, commit]);
+    const notifyToggle = useEventCallback(onToggle);
+    useEffect(() => {
+      if (isOpen === lastNotifiedOpen.current) return;
+      lastNotifiedOpen.current = isOpen;
+      notifyToggle(isOpen);
+    }, [isOpen, notifyToggle]);
+    useEffect(() => {
+      if (!streaming) return;
+      startElapsed(since ?? Date.now());
+      return () => {
+        setMeasuredMs(elapsedMsRef.current);
+        stopElapsed();
+      };
+    }, [streaming, since, startElapsed, stopElapsed]);
+    const [bodyEl, bodyRef] = useElementRef();
+    const inertRef = useInertAttribute(!isOpen);
+    const composedBodyRef = useComposedRefs(bodyRef, inertRef);
+    useAutoscroll(bodyEl, { enabled: streaming && isOpen, pinOnConnect: true });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fancy-reasoning-panel border-border bg-card/50 w-full rounded-lg border text-sm",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: headerId,
+              className: "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition-colors",
+              "aria-expanded": isOpen,
+              "aria-controls": bodyId,
+              onClick: toggle,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: cn("ft-chevron size-3.5 shrink-0", isOpen && "ft-open"),
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: cn("text-foreground font-medium", streaming && "ft-shimmer"), children: label }),
+                summary ? /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs tabular-nums", children: summary }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn("ft-body", isOpen && "ft-open"), children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: composedBodyRef,
+              id: bodyId,
+              role: "group",
+              "aria-labelledby": headerId,
+              className: "text-muted-foreground overflow-y-auto px-3 pb-3 leading-relaxed",
+              style: { maxHeight },
+              children: /* @__PURE__ */ jsx(StreamText, { text })
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+export {
+  ReasoningPanel
+};

package/dist/components/reasoning-panel/index.d.ts

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

package/dist/components/recommendation-card/RecommendationCard.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+/** Where a proposal stands: still on the table, taken up, or waved off. */
+export type RecommendationState = "open" | "accepted" | "dismissed";
+/**
+ * Props for RecommendationCard
+ */
+export interface RecommendationCardProps {
+    /** What the agent is proposing, e.g. "Add an index on orders.customer_id". */
+    title: string;
+    /** Secondary muted line under the title — the reasoning, the expected effect. */
+    description?: string;
+    /**
+     * How sure the agent is, from 0 to 1. Omitted, the whole confidence block
+     * disappears rather than reading as zero. Out-of-range numbers are clamped.
+     */
+    confidence?: number;
+    /** Label for the confirm button. */
+    acceptLabel?: string;
+    /** Label for the decline button. */
+    dismissLabel?: string;
+    /** Called when the recommendation is accepted, after `state` has been written. */
+    onAccept?: () => void;
+    /** Called when the recommendation is dismissed, after `state` has been written. */
+    onDismiss?: () => void;
+    /**
+     * Where the recommendation stands. Controlled when supplied: pair it with
+     * `onStateChange`, the React counterpart of the Svelte source's `bind:state`.
+     * Left out, the card keeps the state itself and starts at `"open"`.
+     */
+    state?: RecommendationState;
+    /** Called with the new state whenever it changes, however the change happened. */
+    onStateChange?: (state: RecommendationState) => void;
+    /** Small kicker above the title, e.g. "Suggestion". */
+    badge?: string;
+    /** The detail region between the header and the footer — a preview of the change. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * A proposal an agent puts on the table: a title, an optional confidence ring
+ * that sweeps to its figure, and a footer that collapses to a one-line verdict
+ * once someone answers.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ */
+export declare const RecommendationCard: import("react").ForwardRefExoticComponent<RecommendationCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/recommendation-card/RecommendationCard.js

@@ -0,0 +1,234 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { cn } from "../../utils.js";
+/* empty css                        */
+import { NumberTicker } from "../number-ticker/NumberTicker.js";
+const RESOLVED_LABELS = {
+  accepted: "Applied",
+  dismissed: "Dismissed"
+};
+const TICKER_MS = 900;
+const RING_R = 13;
+const RING_C = 2 * Math.PI * RING_R;
+const RecommendationCard = forwardRef(
+  function RecommendationCard2({
+    title,
+    description,
+    confidence,
+    acceptLabel = "Apply",
+    dismissLabel = "Dismiss",
+    onAccept,
+    onDismiss,
+    state,
+    onStateChange,
+    badge,
+    children,
+    className,
+    sound = false
+  }, ref) {
+    const [uncontrolledState, setUncontrolledState] = useState("open");
+    const isControlled = state !== void 0;
+    const current = isControlled ? state : uncontrolledState;
+    const isOpen = current === "open";
+    const resolvedLabel = current === "accepted" ? RESOLVED_LABELS.accepted : RESOLVED_LABELS.dismissed;
+    const hasConfidence = typeof confidence === "number" && Number.isFinite(confidence);
+    const fraction = hasConfidence ? Math.min(1, Math.max(0, confidence)) : 0;
+    const percent = Math.round(fraction * 100);
+    const band = fraction >= 0.75 ? "done" : fraction >= 0.5 ? "running" : "pending";
+    const [filled, setFilled] = useState(false);
+    const [reduced, setReduced] = useState(false);
+    const playCue = useSoundCue(sound);
+    const currentRef = useRef(current);
+    useIsomorphicLayoutEffect(() => {
+      currentRef.current = current;
+    }, [current]);
+    const resolvedRef = useRef(null);
+    const shouldFocusResolved = useRef(false);
+    const sweep = filled ? fraction : 0;
+    const ringOffset = RING_C * (1 - sweep);
+    const tickerMs = Math.max(0.01, reduced ? 0 : TICKER_MS);
+    useIsomorphicLayoutEffect(() => {
+      const isReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      setReduced(isReduced);
+      if (isReduced) {
+        setFilled(true);
+        return;
+      }
+      let second = 0;
+      const first = requestAnimationFrame(() => {
+        second = requestAnimationFrame(() => {
+          setFilled(true);
+        });
+      });
+      return () => {
+        cancelAnimationFrame(first);
+        cancelAnimationFrame(second);
+      };
+    }, []);
+    useEffect(() => {
+      if (shouldFocusResolved.current) {
+        shouldFocusResolved.current = false;
+        resolvedRef.current?.focus();
+      }
+    });
+    function decide(next) {
+      if (currentRef.current !== "open") return;
+      currentRef.current = next;
+      if (!isControlled) {
+        setUncontrolledState(next);
+      }
+      onStateChange?.(next);
+      playCue(next === "accepted" ? "select" : "close");
+      if (next === "accepted") onAccept?.();
+      else onDismiss?.();
+      shouldFocusResolved.current = true;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "ft-rec border-border w-full rounded-lg border p-4 text-sm",
+          isOpen && "bg-card/50",
+          className
+        ),
+        role: "group",
+        "aria-label": title,
+        "data-state": current,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              badge && /* @__PURE__ */ jsx("p", { className: "ft-rec-badge text-muted-foreground mb-1 text-[0.6875rem] font-medium uppercase", children: badge }),
+              /* @__PURE__ */ jsx("p", { className: "ft-rec-title text-foreground font-medium", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "ft-rec-description text-muted-foreground mt-0.5 text-xs leading-relaxed", children: description })
+            ] }),
+            hasConfidence && /*
+            	One label for the pair: the counter is mid-animation for most of its
+            	life and the ring says nothing out loud, so assistive tech is given the
+            	settled figure once and both halves are hidden behind it.
+            */
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "ft-rec-confidence flex flex-none items-center gap-2",
+                role: "img",
+                "aria-label": `Confidence ${percent}%`,
+                "data-band": band,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "ft-rec-percent text-foreground text-xs font-medium tabular-nums",
+                      "aria-hidden": "true",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          NumberTicker,
+                          {
+                            value: percent,
+                            duration: tickerMs,
+                            className: "text-inherit dark:text-inherit"
+                          }
+                        ),
+                        "%"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("svg", { className: "ft-rec-ring", viewBox: "0 0 32 32", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "ft-rec-ring-track",
+                        cx: "16",
+                        cy: "16",
+                        r: RING_R,
+                        fill: "none",
+                        strokeWidth: "3"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: cn(
+                          "ft-rec-ring-value",
+                          band === "done" && "ft-status-done",
+                          band === "running" && "ft-status-running",
+                          band === "pending" && "ft-status-pending"
+                        ),
+                        cx: "16",
+                        cy: "16",
+                        r: RING_R,
+                        fill: "none",
+                        strokeWidth: "3",
+                        strokeLinecap: "round",
+                        strokeDasharray: RING_C,
+                        strokeDashoffset: ringOffset,
+                        transform: "rotate(-90 16 16)"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          children != null && children !== false && /* @__PURE__ */ jsx("div", { className: "ft-rec-detail mt-3 min-w-0", children }),
+          /* @__PURE__ */ jsx("div", { className: "ft-rec-foot mt-3", "aria-live": "polite", children: isOpen ? /* @__PURE__ */ jsxs("div", { className: "ft-rec-actions flex flex-wrap items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ft-rec-dismiss text-muted-foreground hover:text-foreground hover:bg-foreground/5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                onClick: () => decide("dismissed"),
+                children: dismissLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ft-rec-accept bg-foreground text-background hover:bg-foreground/90 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                onClick: () => decide("accepted"),
+                children: acceptLabel
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            "p",
+            {
+              ref: resolvedRef,
+              tabIndex: -1,
+              className: cn(
+                "ft-rec-resolved focus-visible:ring-ring flex items-center gap-1.5 rounded-md text-xs font-medium focus-visible:ring-1 focus-visible:outline-none",
+                current === "accepted" && "ft-accepted"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "flex-none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "size-3.5",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: current === "accepted" ? /* @__PURE__ */ jsx("path", { d: "m20 6-11 11-5-5" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                      /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                    ] })
+                  }
+                ) }),
+                resolvedLabel
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+RecommendationCard.displayName = "RecommendationCard";
+export {
+  RecommendationCard
+};

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

@@ -0,0 +1,2 @@
+export { RecommendationCard } from "./RecommendationCard.js";
+export type { RecommendationCardProps, RecommendationState } from "./RecommendationCard.js";

package/dist/components/reveal/Reveal.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { RevealPresetName, StaggerFrom } from "../../internals/motion/types.js";
+export interface RevealProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Which of the six directional/scale looks to animate with. */
+    preset?: RevealPresetName;
+    /** What starts the reveal. `"view"` watches the viewport, `"mount"` fires on the next frame, `"manual"` follows the `active` prop. */
+    trigger?: "view" | "mount" | "manual";
+    /** Read only when `trigger="manual"` — `true` reveals, `false` re-arms. */
+    active?: boolean;
+    /** Disconnects the observer after the first reveal. `false` re-arms (and re-hides, unless reduced motion) every time the node leaves the viewport. Only meaningful for `trigger="view"`. */
+    once?: boolean;
+    /** IntersectionObserver threshold. Only meaningful for `trigger="view"`. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Only meaningful for `trigger="view"`. */
+    rootMargin?: string;
+    /** Entrance duration in ms. */
+    duration?: number;
+    /** Delay before the entrance starts, in ms. */
+    delay?: number;
+    /** CSS easing for the entrance. */
+    easing?: string;
+    /** Travel distance in px for the four directional presets — ignored by `scale`. */
+    distance?: number;
+    /** ms per stagger step. `0` (default) animates the root itself; any positive value switches to animating direct element children instead, each offset by its own computed delay. */
+    stagger?: number;
+    /** Where the stagger counts distance from. Only meaningful when `stagger > 0`. */
+    from?: StaggerFrom;
+    /** How the very first server-rendered paint looks. `"hidden"` (the default) starts at `data-state="armed"`, so the content is already hidden before hydration and there is no flash — at the cost of staying hidden on a page that never hydrates (the CSS is gated on `(scripting: enabled)`, which reflects the browser, not this page). `"visible"` starts at the pre-mount `"idle"` state, which paints fully visible; the mount effect then flips it to `"armed"` (an instant hide, no fade-out) and the reveal plays from there. Use it for content that must be readable with JS off or on a `csr = false` route, and accept a one-frame flash. See the README's SSR section. */
+    initial?: "hidden" | "visible";
+    /** The element tag Reveal renders as. */
+    as?: keyof HTMLElementTagNameMap;
+    /** Fires once per reveal, the moment the state machine reaches `"visible"` — including every re-reveal when `once={false}`. */
+    onReveal?: () => void;
+    children: ReactNode;
+}
+export declare const Reveal: import("react").ForwardRefExoticComponent<RevealProps & import("react").RefAttributes<HTMLElement>>;