@nexub/react 2.9.0 → 3.1.0

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

package/dist/components/Motion/Slide.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useMotion } from "./useMotion.js";
+const directionTransform = {
+  up: { from: "translateY(12px)", to: "translateY(0)" },
+  down: { from: "translateY(-12px)", to: "translateY(0)" },
+  left: { from: "translateX(12px)", to: "translateX(0)" },
+  right: { from: "translateX(-12px)", to: "translateX(0)" }
+};
+const Slide = React.forwardRef(function Slide2({
+  in: visible,
+  duration = "normal",
+  easing,
+  unmountOnExit = false,
+  direction = "up",
+  distance,
+  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";
+  const dt = directionTransform[direction];
+  let fromTransform = dt.from;
+  if (distance) {
+    if (direction === "up") fromTransform = `translateY(${distance})`;
+    if (direction === "down") fromTransform = `translateY(-${distance})`;
+    if (direction === "left") fromTransform = `translateX(${distance})`;
+    if (direction === "right") fromTransform = `translateX(-${distance})`;
+  }
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      onTransitionEnd: handleTransitionEnd,
+      style: {
+        opacity: isEntered ? 1 : 0,
+        transform: isEntered || reduced ? dt.to : fromTransform,
+        willChange: "opacity, transform",
+        ...transitionStyle,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+});
+Slide.displayName = "Slide";
+export {
+  Slide
+};

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

@@ -0,0 +1,18 @@
+export { Fade } from './Fade.js';
+export type { FadeProps } from './Fade.js';
+export { Slide } from './Slide.js';
+export type { SlideProps, SlideDirection } from './Slide.js';
+export { Scale } from './Scale.js';
+export type { ScaleProps } from './Scale.js';
+export { Collapse } from './Collapse.js';
+export type { CollapseProps } from './Collapse.js';
+export { ListTransition, SkeletonSwap } from './ListTransition.js';
+export type { ListTransitionProps, SkeletonSwapProps } from './ListTransition.js';
+export { usePrefersReducedMotion } from './useMotion.js';
+export type { MotionDuration, MotionEasing, MotionBaseProps } from './motion.types.js';
+export { Reveal } from './Reveal.js';
+export type { RevealProps } from './Reveal.js';
+export { Float } from './Float.js';
+export type { FloatProps } from './Float.js';
+export { Marquee } from './Marquee.js';
+export type { MarqueeProps } from './Marquee.js';

package/dist/components/Motion/index.js

@@ -1,17 +1,19 @@
-'use client';
-import {
-  Collapse,
-  Fade,
-  ListTransition,
-  Scale,
-  SkeletonSwap,
-  Slide,
-  usePrefersReducedMotion
-} from "../../chunk-4GVGS5N4.js";
+import { Fade } from "./Fade.js";
+import { Slide } from "./Slide.js";
+import { Scale } from "./Scale.js";
+import { Collapse } from "./Collapse.js";
+import { ListTransition, SkeletonSwap } from "./ListTransition.js";
+import { usePrefersReducedMotion } from "./useMotion.js";
+import { Reveal } from "./Reveal.js";
+import { Float } from "./Float.js";
+import { Marquee } from "./Marquee.js";
 export {
   Collapse,
   Fade,
+  Float,
   ListTransition,
+  Marquee,
+  Reveal,
   Scale,
   SkeletonSwap,
   Slide,

package/dist/components/Motion/motion.types.d.ts

@@ -0,0 +1,25 @@
+export type MotionDuration = 'instant' | 'fast' | 'normal' | 'slow' | 'slower';
+export type MotionEasing = 'linear' | 'in' | 'out' | 'in-out' | 'out-expo' | 'spring';
+export interface MotionBaseProps {
+    /** Whether the component is visible / mounted. */
+    in: boolean;
+    /**
+     * Speed on the spring tokens: `fast` → fast, `normal` → default,
+     * `slow`/`slower` → slow springs. `instant` turns motion off.
+     * @default 'normal'
+     */
+    duration?: MotionDuration;
+    /**
+     * Legacy: set it to use the old `--duration-*` + `--ease-{value}` tokens
+     * instead of springs. Omit it to ride the spring tokens.
+     */
+    easing?: MotionEasing;
+    /**
+     * Remove the element from the DOM when `in` becomes false
+     * (after the exit transition completes).
+     * @default false
+     */
+    unmountOnExit?: boolean;
+    children?: React.ReactNode;
+}
+import * as React from 'react';

package/dist/components/Motion/motion.types.js

@@ -0,0 +1 @@
+import * as React from "react";

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import type { MotionDuration, MotionEasing } from './motion.types.js';
+export declare const DURATION_MS: Record<MotionDuration, number>;
+export type SpringSpeed = 'fast' | 'default' | 'slow';
+export type SpringFamily = 'spatial' | 'effects' | 'expressive';
+/** `duration` → spring speed. `instant` is handled separately (no motion). */
+export declare const SPRING_SPEED: Record<Exclude<MotionDuration, 'instant'>, SpringSpeed>;
+export declare const SPRING_MS: Record<SpringFamily, Record<SpringSpeed, number>>;
+/** One `transition` entry riding a spring token. */
+export declare const spring: (property: string, family: SpringFamily, speed: SpringSpeed) => string;
+/** True when the user asked the OS for reduced motion. False during SSR. */
+export declare function usePrefersReducedMotion(): boolean;
+export type TransitionPhase = 'exited' | 'entering' | 'entered' | 'exiting';
+export interface UseMotionReturn {
+    phase: TransitionPhase;
+    mounted: boolean;
+    /** Reduced motion is on: keep the crossfade, drop travel and scale. */
+    reduced: boolean;
+    transitionStyle: React.CSSProperties;
+    /** Attach to onTransitionEnd so the hook can move exiting → exited. */
+    handleTransitionEnd: (e?: React.TransitionEvent) => void;
+}
+/**
+ * Lightweight hook that drives a 4-phase CSS transition state machine.
+ *
+ *   exited ─► entering ─► entered
+ *                              │
+ *                           (in=false)
+ *                              ▼
+ *                           exiting ─► (onTransitionEnd) ─► exited
+ *
+ * Enter rides the springs (opacity on `effects`, transform on `spatial`).
+ * Exit is quicker and never overshoots (`effects` fast for both).
+ * Passing `easing` opts back into the legacy duration + easing tokens.
+ */
+export declare function useMotion({ visible, duration, easing, unmountOnExit, }: {
+    visible: boolean;
+    duration?: MotionDuration;
+    easing?: MotionEasing;
+    unmountOnExit?: boolean;
+}): UseMotionReturn;

package/dist/components/Motion/useMotion.js

@@ -0,0 +1,102 @@
+"use client";
+import * as React from "react";
+import { useMediaQuery } from "../../hooks/useMediaQuery.js";
+const DURATION_MS = {
+  instant: 0,
+  fast: 150,
+  normal: 200,
+  slow: 300,
+  slower: 500
+};
+const SPRING_SPEED = {
+  fast: "fast",
+  normal: "default",
+  slow: "slow",
+  slower: "slow"
+};
+const SPRING_MS = {
+  spatial: { fast: 224, default: 317, slow: 484 },
+  effects: { fast: 150, default: 231, slow: 327 },
+  expressive: { fast: 364, default: 435, slow: 600 }
+};
+const FALLBACK_MARGIN_MS = 50;
+const spring = (property, family, speed) => `${property} var(--motion-spring-${family}-${speed}-duration) var(--motion-spring-${family}-${speed}-easing)`;
+function usePrefersReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)");
+}
+function useMotion({
+  visible,
+  duration = "normal",
+  easing,
+  unmountOnExit = false
+}) {
+  const [phase, setPhase] = React.useState(
+    visible ? "entered" : "exited"
+  );
+  const reduced = usePrefersReducedMotion();
+  const rafRef = React.useRef(null);
+  const isMounted = React.useRef(true);
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  const prevVisible = React.useRef(visible);
+  React.useEffect(() => {
+    if (prevVisible.current === visible) return;
+    prevVisible.current = visible;
+    if (visible) {
+      setPhase("entering");
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          if (isMounted.current) setPhase("entered");
+        });
+      });
+    } else {
+      setPhase("exiting");
+    }
+  }, [visible]);
+  const legacy = easing !== void 0;
+  const exitMs = duration === "instant" ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.effects.fast;
+  React.useEffect(() => {
+    if (phase !== "exiting") return;
+    const t = setTimeout(() => setPhase("exited"), exitMs + FALLBACK_MARGIN_MS);
+    return () => clearTimeout(t);
+  }, [phase, exitMs]);
+  const handleTransitionEnd = React.useCallback((e) => {
+    if (!isMounted.current) return;
+    if (e && e.target !== e.currentTarget) return;
+    setPhase((prev) => prev === "exiting" ? "exited" : prev);
+  }, []);
+  const mounted = unmountOnExit ? phase !== "exited" : true;
+  let transitionStyle;
+  if (duration === "instant") {
+    transitionStyle = { transition: "none" };
+  } else if (legacy) {
+    transitionStyle = {
+      transitionDuration: `var(--duration-${duration})`,
+      transitionTimingFunction: `var(--ease-${easing})`,
+      transitionProperty: "opacity, transform"
+    };
+  } else if (phase === "exiting" || phase === "exited") {
+    transitionStyle = {
+      transition: [spring("opacity", "effects", "fast"), spring("transform", "effects", "fast")].join(", ")
+    };
+  } else {
+    const speed = SPRING_SPEED[duration];
+    transitionStyle = {
+      transition: [spring("opacity", "effects", speed), spring("transform", "spatial", speed)].join(", ")
+    };
+  }
+  return { phase, mounted, reduced, transitionStyle, handleTransitionEnd };
+}
+export {
+  DURATION_MS,
+  SPRING_MS,
+  SPRING_SPEED,
+  spring,
+  useMotion,
+  usePrefersReducedMotion
+};

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as RadixNav from '@radix-ui/react-navigation-menu';
+export declare const NavigationMenu: {
+    Root: React.ForwardRefExoticComponent<RadixNav.NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+    List: React.ForwardRefExoticComponent<RadixNav.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<RadixNav.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+    Trigger: React.ForwardRefExoticComponent<RadixNav.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<RadixNav.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Link: React.ForwardRefExoticComponent<RadixNav.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Viewport: React.ForwardRefExoticComponent<RadixNav.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<RadixNav.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+};