@nexub/react 3.0.0 → 3.2.0

package/dist/components/MoneyInput/MoneyInput.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type InputProps } from '../Input/Input.js';
+export interface MoneyInputProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'type' | 'inputMode' | 'leadingIcon' | 'leadingAddon'> {
+    /** The amount, or null when empty. */
+    value?: number | null;
+    defaultValue?: number | null;
+    /** Called with the parsed amount (rounded to the currency's minor unit) as the person types. */
+    onValueChange?: (value: number | null) => void;
+    /** ISO 4217 code, e.g. 'USD'. */
+    currency: string;
+    /** BCP 47 locale for separators. Defaults to the user's. */
+    locale?: string;
+}
+/**
+ * An amount field: the currency symbol leads, digits are tabular, the locale's
+ * separators parse correctly, and the value is grouped on blur
+ * (e.g. 1234.5 → "1,234.50"). Raw while editing so the caret never jumps.
+ */
+export declare const MoneyInput: React.ForwardRefExoticComponent<MoneyInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/{chunk-FOFNTKCK.js → components/MoneyInput/MoneyInput.js}

@@ -1,27 +1,12 @@
-'use client';
-import {
-  useControllableState
-} from "./chunk-JLUCMNVS.js";
-import {
-  Input
-} from "./chunk-G7VMAWAX.js";
-import {
-  currencySymbol,
-  formatForDisplay,
-  formatForEditing,
-  parseMoney
-} from "./chunk-R3SUPKKI.js";
-import {
-  useIntlLocale
-} from "./chunk-VMSWIC3O.js";
-import {
-  cn
-} from "./chunk-WRVFNYO3.js";
-
-// src/components/MoneyInput/MoneyInput.tsx
-import * as React from "react";
+"use client";
 import { jsx } from "react/jsx-runtime";
-var MoneyInput = React.forwardRef(
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useIntlLocale } from "../NexubProvider/NexubProvider.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { currencySymbol, formatForDisplay, formatForEditing, parseMoney } from "../../utils/money.js";
+import { Input } from "../Input/Input.js";
+const MoneyInput = React.forwardRef(
   ({ value: valueProp, defaultValue = null, onValueChange, currency, locale: localeProp, onFocus, onBlur, className, ...props }, ref) => {
     const locale = useIntlLocale(localeProp);
     const [value, setValue] = useControllableState({
@@ -59,7 +44,6 @@ var MoneyInput = React.forwardRef(
   }
 );
 MoneyInput.displayName = "MoneyInput";
-
 export {
   MoneyInput
 };

package/dist/components/MoneyInput/index.d.ts

@@ -0,0 +1,2 @@
+export { MoneyInput } from './MoneyInput.js';
+export type { MoneyInputProps } from './MoneyInput.js';

package/dist/components/MoneyInput/index.js

@@ -1,14 +1,4 @@
-'use client';
-import {
-  MoneyInput
-} from "../../chunk-FOFNTKCK.js";
-import "../../chunk-JLUCMNVS.js";
-import "../../chunk-NHUQLIHL.js";
-import "../../chunk-G7VMAWAX.js";
-import "../../chunk-VALIDQXU.js";
-import "../../chunk-R3SUPKKI.js";
-import "../../chunk-VMSWIC3O.js";
-import "../../chunk-WRVFNYO3.js";
+import { MoneyInput } from "./MoneyInput.js";
 export {
   MoneyInput
 };

package/dist/components/Motion/Collapse.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { MotionBaseProps } from './motion.types.js';
+export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Legacy: set it to use `--duration-*` + `--ease-{value}` instead of the
+     * spatial spring for the height transition.
+     */
+    easing?: MotionBaseProps['easing'];
+    /**
+     * Starting height when collapsed. Useful for "peek" effects.
+     * @default 0
+     */
+    collapsedHeight?: number | string;
+    /** Wrapper element tag. @default 'div' */
+    as?: React.ElementType;
+}
+/**
+ * Collapse — animates `max-height` to reveal / hide content on the spatial
+ * spring. Reduced motion snaps the height instead of animating it.
+ * Height is measured from the content ref so you don't need to
+ * provide an explicit height.
+ *
+ * ```tsx
+ * <Collapse in={isOpen}>
+ *   <p>Hidden content</p>
+ * </Collapse>
+ * ```
+ */
+export declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/Collapse.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DURATION_MS, SPRING_MS, SPRING_SPEED, spring, usePrefersReducedMotion } from "./useMotion.js";
+const Collapse = React.forwardRef(function Collapse2({
+  in: visible,
+  duration = "normal",
+  easing,
+  unmountOnExit = false,
+  collapsedHeight = 0,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const innerRef = React.useRef(null);
+  const reduced = usePrefersReducedMotion();
+  const legacy = easing !== void 0;
+  const settleMs = duration === "instant" || reduced ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
+  const [height, setHeight] = React.useState(visible ? "auto" : 0);
+  const [overflow, setOverflow] = React.useState(
+    visible ? "visible" : "hidden"
+  );
+  const [mounted, setMounted] = React.useState(unmountOnExit ? visible : true);
+  const prevVisible = React.useRef(visible);
+  React.useEffect(() => {
+    const changed = prevVisible.current !== visible;
+    prevVisible.current = visible;
+    if (!changed) return;
+    let raf1 = 0;
+    let raf2 = 0;
+    if (visible) {
+      setMounted(true);
+      raf1 = requestAnimationFrame(() => {
+        const el = innerRef.current;
+        if (el) {
+          setHeight(el.scrollHeight);
+          setOverflow("hidden");
+        }
+      });
+    } else {
+      const el = innerRef.current;
+      if (el) {
+        setHeight(el.scrollHeight);
+        setOverflow("hidden");
+        raf1 = requestAnimationFrame(() => {
+          raf2 = requestAnimationFrame(() => {
+            setHeight(typeof collapsedHeight === "number" ? collapsedHeight : 0);
+          });
+        });
+      }
+    }
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [visible, collapsedHeight]);
+  const finish = React.useCallback(() => {
+    if (visible) {
+      setHeight("auto");
+      setOverflow("visible");
+    } else if (unmountOnExit) {
+      setMounted(false);
+    }
+  }, [visible, unmountOnExit]);
+  const handleTransitionEnd = React.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
+      finish();
+    },
+    [finish]
+  );
+  const firstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    const t = setTimeout(finish, settleMs + 100);
+    return () => clearTimeout(t);
+  }, [visible, settleMs, finish]);
+  if (!mounted) return null;
+  const maxHeight = height === "auto" ? "none" : `${height}px`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      style: {
+        maxHeight,
+        overflow,
+        transition: duration === "instant" || reduced ? "none" : legacy ? `max-height var(--duration-${duration}) var(--ease-${easing})` : spring("max-height", "spatial", SPRING_SPEED[duration]),
+        ...style
+      },
+      onTransitionEnd: handleTransitionEnd,
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { ref: innerRef, children })
+    }
+  );
+});
+Collapse.displayName = "Collapse";
+export {
+  Collapse
+};

package/dist/components/Motion/Fade.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { MotionBaseProps } from './motion.types.js';
+export interface FadeProps extends MotionBaseProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Wrapper element tag. @default 'div' */
+    as?: React.ElementType;
+}
+/**
+ * Fade — animates opacity between 0 and 1.
+ *
+ * ```tsx
+ * <Fade in={isOpen}>
+ *   <p>Hello</p>
+ * </Fade>
+ * ```
+ */
+export declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/Fade.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useMotion } from "./useMotion.js";
+const Fade = React.forwardRef(function Fade2({
+  in: visible,
+  duration = "normal",
+  easing,
+  unmountOnExit = false,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const opacity = phase === "entered" ? 1 : 0;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity,
+        willChange: "opacity",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Fade.displayName = "Fade";
+export {
+  Fade
+};

package/dist/components/Motion/Float.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface FloatProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `slow` drifts on a longer, reversed loop, so two floating cards don't move in step. */
+    speed?: 'normal' | 'slow';
+    asChild?: boolean;
+}
+/** Gently bobs its content, in marketing mode (@nexub/themes/marketing). Still under reduced motion. */
+export declare const Float: React.ForwardRefExoticComponent<FloatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/Float.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+const Float = React.forwardRef(
+  ({ speed = "normal", asChild = false, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, "data-speed": speed, className: cn("nx-mkt-float", className), ...props });
+  }
+);
+Float.displayName = "Float";
+export {
+  Float
+};

package/dist/components/Motion/ListTransition.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export interface ListTransitionProps extends React.HTMLAttributes<HTMLElement> {
+    /** List element. @default 'div' */
+    as?: React.ElementType;
+    /** Element wrapping each item, e.g. `'li'` inside a `'ul'`. @default 'div' */
+    itemAs?: React.ElementType;
+    /** Animate the items present on first render too. @default false */
+    appear?: boolean;
+    /** Keyed children. Items without a key are rendered but never animated. */
+    children?: React.ReactNode;
+}
+/**
+ * ListTransition — animates keyed items in and out of a list.
+ * New items grow in from zero height and fade in; removed items stay in place
+ * while they collapse and fade out, then unmount. Uses CSS keyframes on the
+ * spring tokens (`nx-list-item` in `@nexub/themes/base`); reduced motion keeps
+ * only the fade.
+ *
+ * Space items with padding inside each item, not `gap`, so a collapsing item
+ * takes its spacing with it.
+ *
+ * ```tsx
+ * <ListTransition as="ul" itemAs="li">
+ *   {items.map((item) => <Row key={item.id} item={item} />)}
+ * </ListTransition>
+ * ```
+ */
+export declare const ListTransition: React.ForwardRefExoticComponent<ListTransitionProps & React.RefAttributes<HTMLElement>>;
+export interface SkeletonSwapProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** While true the skeleton shows; flipping to false crossfades to the content. */
+    loading: boolean;
+    /** Placeholder shown while loading, usually `Skeleton`s shaped like the content. */
+    skeleton: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * SkeletonSwap — crossfades from a skeleton to the loaded content in place,
+ * instead of popping. Sets `aria-busy` while loading.
+ *
+ * ```tsx
+ * <SkeletonSwap loading={isLoading} skeleton={<Skeleton shape="rect" height={120} />}>
+ *   <Card>…</Card>
+ * </SkeletonSwap>
+ * ```
+ */
+export declare const SkeletonSwap: React.ForwardRefExoticComponent<SkeletonSwapProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/ListTransition.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SPRING_MS } from "./useMotion.js";
+const EXIT_FALLBACK_MS = SPRING_MS.effects.default + 50;
+function keyed(children) {
+  const out = [];
+  React.Children.forEach(children, (child, i) => {
+    const key = React.isValidElement(child) && child.key != null ? child.key : `__nx-${i}`;
+    out.push({ key, node: child });
+  });
+  return out;
+}
+function merge(prev, next) {
+  const before = new Map(prev.map((p) => [p.key, p]));
+  const nextKeys = new Set(next.map((n) => n.key));
+  const result = next.map((n) => {
+    const old = before.get(n.key);
+    return { ...n, state: !old || old.state === "exit" ? "enter" : old.state };
+  });
+  prev.forEach((p, i) => {
+    if (nextKeys.has(p.key)) return;
+    let at = 0;
+    for (let j = i - 1; j >= 0; j--) {
+      const idx = result.findIndex((r) => r.key === prev[j].key);
+      if (idx !== -1) {
+        at = idx + 1;
+        break;
+      }
+    }
+    result.splice(at, 0, { ...p, state: "exit" });
+  });
+  return result;
+}
+const ListTransition = React.forwardRef(function ListTransition2({ as: Tag = "div", itemAs: Item = "div", appear = false, children, ...rest }, ref) {
+  const next = keyed(children);
+  const [entries, setEntries] = React.useState(
+    () => next.map((n) => ({ ...n, state: appear ? "enter" : "idle" }))
+  );
+  const [prevChildren, setPrevChildren] = React.useState(children);
+  let rendered = entries;
+  if (children !== prevChildren) {
+    rendered = merge(entries, next);
+    setPrevChildren(children);
+    setEntries(rendered);
+  }
+  const remove = React.useCallback((key) => {
+    setEntries((list) => list.filter((e) => !(e.key === key && e.state === "exit")));
+  }, []);
+  const settle = React.useCallback((key) => {
+    setEntries((list) => list.map((e) => e.key === key && e.state === "enter" ? { ...e, state: "idle" } : e));
+  }, []);
+  const exiting = rendered.filter((e) => e.state === "exit").map((e) => e.key).join("|");
+  React.useEffect(() => {
+    if (!exiting) return;
+    const keys = rendered.filter((e) => e.state === "exit").map((e) => e.key);
+    const t = setTimeout(() => keys.forEach(remove), EXIT_FALLBACK_MS);
+    return () => clearTimeout(t);
+  }, [exiting, remove]);
+  return /* @__PURE__ */ jsx(Tag, { ref, ...rest, children: rendered.map((e) => /* @__PURE__ */ jsx(
+    Item,
+    {
+      className: "nx-list-item",
+      "data-state": e.state === "idle" ? void 0 : e.state,
+      "aria-hidden": e.state === "exit" ? true : void 0,
+      onAnimationEnd: (ev) => {
+        if (ev.target !== ev.currentTarget) return;
+        if (e.state === "exit") remove(e.key);
+        else if (e.state === "enter") settle(e.key);
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "nx-list-item-inner", children: e.node })
+    },
+    e.key
+  )) });
+});
+ListTransition.displayName = "ListTransition";
+const SkeletonSwap = React.forwardRef(function SkeletonSwap2({ loading, skeleton, children, className, ...rest }, ref) {
+  const [phase, setPhase] = React.useState(loading ? "loading" : "done");
+  const [prevLoading, setPrevLoading] = React.useState(loading);
+  let current = phase;
+  if (loading !== prevLoading) {
+    current = loading ? "loading" : "out";
+    setPrevLoading(loading);
+    setPhase(current);
+  }
+  React.useEffect(() => {
+    if (current !== "out") return;
+    const t = setTimeout(() => setPhase("done"), SPRING_MS.effects.default + 50);
+    return () => clearTimeout(t);
+  }, [current]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: className ? `nx-swap ${className}` : "nx-swap", "aria-busy": loading || void 0, ...rest, children: [
+    current !== "loading" && /* @__PURE__ */ jsx("div", { className: current === "out" ? "nx-swap-in" : void 0, children }),
+    current !== "done" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: current === "out" ? "nx-swap-out" : void 0,
+        "aria-hidden": "true",
+        onAnimationEnd: (e) => {
+          if (e.target === e.currentTarget) setPhase("done");
+        },
+        children: skeleton
+      }
+    )
+  ] });
+});
+SkeletonSwap.displayName = "SkeletonSwap";
+export {
+  ListTransition,
+  SkeletonSwap
+};

package/dist/components/Motion/Marquee.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
+    speed?: 'slow' | 'normal' | 'fast';
+    /** Classes for each copy of the row (gap, alignment). @default 'gap-12 pe-12 items-center' */
+    rowClassName?: string;
+}
+/**
+ * A row that scrolls sideways forever (logo strips, tool lists), in marketing
+ * mode (@nexub/themes/marketing). It pauses on hover and while focus is inside,
+ * and stands still under reduced motion. The second copy of the row is
+ * hidden from assistive technology and can't be focused.
+ */
+export declare const Marquee: React.ForwardRefExoticComponent<MarqueeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/Marquee.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const Marquee = React.forwardRef(
+  ({ speed = "normal", rowClassName = "gap-12 pe-12 items-center", className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-speed": speed, className: cn("nx-mkt-marquee", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "nx-mkt-marquee-track", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0", rowClassName), children }),
+    /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0", rowClassName), "aria-hidden": "true", inert: true, children })
+  ] }) })
+);
+Marquee.displayName = "Marquee";
+export {
+  Marquee
+};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface RevealProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+/**
+ * Fades its content up as it scrolls into view, in marketing mode
+ * (@nexub/themes/marketing). Uses a CSS scroll-driven animation where the
+ * browser supports one; elsewhere an IntersectionObserver plays the same
+ * animation once. Content that starts on screen, and every visitor without
+ * JS or with reduced motion, just sees it.
+ */
+export declare const Reveal: React.ForwardRefExoticComponent<RevealProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/Reveal.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { useMergedRefs } from "../../hooks/useMergedRefs.js";
+const Reveal = React.forwardRef(
+  ({ asChild = false, className, ...props }, ref) => {
+    const self = React.useRef(null);
+    React.useEffect(() => {
+      const el = self.current;
+      if (!el || typeof IntersectionObserver === "undefined") return;
+      if (CSS.supports?.("animation-timeline: view()")) return;
+      if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+      if (el.getBoundingClientRect().top < window.innerHeight) return;
+      el.dataset.reveal = "pending";
+      const io = new IntersectionObserver(([entry]) => {
+        if (!entry?.isIntersecting) return;
+        el.dataset.reveal = "done";
+        io.disconnect();
+      }, { threshold: 0.15 });
+      io.observe(el);
+      return () => io.disconnect();
+    }, []);
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref: useMergedRefs(ref, self), className: cn("nx-mkt-reveal", className), ...props });
+  }
+);
+Reveal.displayName = "Reveal";
+export {
+  Reveal
+};

package/dist/components/Motion/Scale.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { MotionBaseProps } from './motion.types.js';
+export interface ScaleProps extends MotionBaseProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The scale value at the start/end of the animation (when `in={false}`).
+     * @default 0.95
+     */
+    initialScale?: number;
+    /** Wrapper element tag. @default 'div' */
+    as?: React.ElementType;
+}
+/**
+ * Scale — animates opacity + scale(x) from `initialScale` to 1 on the spring
+ * tokens. Reduced motion keeps the fade and drops the scale.
+ *
+ * ```tsx
+ * <Scale in={isOpen} initialScale={0.9}>
+ *   <Menu />
+ * </Scale>
+ * ```
+ */
+export declare const Scale: React.ForwardRefExoticComponent<ScaleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Motion/Scale.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useMotion } from "./useMotion.js";
+const Scale = React.forwardRef(function Scale2({
+  in: visible,
+  duration = "fast",
+  easing,
+  unmountOnExit = false,
+  initialScale = 0.95,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const { phase, mounted, reduced, transitionStyle, handleTransitionEnd } = useMotion({
+    visible,
+    duration,
+    easing,
+    unmountOnExit
+  });
+  if (!mounted) return null;
+  const isEntered = phase === "entered";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity: isEntered ? 1 : 0,
+        transform: isEntered || reduced ? "scale(1)" : `scale(${initialScale})`,
+        transformOrigin: "top center",
+        willChange: "opacity, transform",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Scale.displayName = "Scale";
+export {
+  Scale
+};

package/dist/components/Motion/Slide.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { MotionBaseProps } from './motion.types.js';
+export type SlideDirection = 'up' | 'down' | 'left' | 'right';
+export interface SlideProps extends MotionBaseProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Direction the element slides in from. @default 'up' */
+    direction?: SlideDirection;
+    /** Distance of the slide offset. @default '12px' */
+    distance?: string;
+    /** Wrapper element tag. @default 'div' */
+    as?: React.ElementType;
+}
+/**
+ * Slide — animates opacity + translate from a given direction on the spring
+ * tokens. Reduced motion keeps the fade and drops the travel.
+ *
+ * ```tsx
+ * <Slide in={isOpen} direction="up">
+ *   <Card />
+ * </Slide>
+ * ```
+ */
+export declare const Slide: React.ForwardRefExoticComponent<SlideProps & React.RefAttributes<HTMLDivElement>>;