@nexub/react 2.1.0 → 2.3.0

package/dist/{chunk-AKV4GMIY.js → chunk-2NJQBJWH.js}

@@ -83,7 +83,9 @@ var Pagination = React.forwardRef(
                 "aria-current": p === page ? "page" : void 0,
                 className: cn(
                   pressable,
-                  "inline-flex h-11 min-w-11 px-2 items-center justify-center text-label-lg",
+                  // tabular-nums on the button itself: Tailwind 4's preflight lets buttons
+                  // inherit it from the nav, Tailwind 3's (UA font reset) does not.
+                  "inline-flex h-11 min-w-11 px-2 items-center justify-center text-label-lg tabular-nums",
                   p === page ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "bg-transparent text-[var(--color-on-surface)]"
                 ),
                 children: p

package/dist/chunk-4GVGS5N4.js

@@ -0,0 +1,468 @@
+'use client';
+
+// src/components/Motion/Fade.tsx
+import * as React2 from "react";
+
+// src/components/Motion/useMotion.ts
+import * as React from "react";
+
+// src/hooks/useMediaQuery.ts
+import { useState, useEffect } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    setMatches(mql.matches);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+
+// src/components/Motion/useMotion.ts
+var DURATION_MS = {
+  instant: 0,
+  fast: 150,
+  normal: 200,
+  slow: 300,
+  slower: 500
+};
+var SPRING_SPEED = {
+  fast: "fast",
+  normal: "default",
+  slow: "slow",
+  slower: "slow"
+};
+var SPRING_MS = {
+  spatial: { fast: 224, default: 317, slow: 484 },
+  effects: { fast: 150, default: 231, slow: 327 },
+  expressive: { fast: 364, default: 435, slow: 600 }
+};
+var FALLBACK_MARGIN_MS = 50;
+var 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 };
+}
+
+// src/components/Motion/Fade.tsx
+import { jsx } from "react/jsx-runtime";
+var Fade = React2.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";
+
+// src/components/Motion/Slide.tsx
+import * as React3 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var 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)" }
+};
+var Slide = React3.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__ */ jsx2(
+    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";
+
+// src/components/Motion/Scale.tsx
+import * as React4 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Scale = React4.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__ */ jsx3(
+    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";
+
+// src/components/Motion/Collapse.tsx
+import * as React5 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Collapse = React5.forwardRef(function Collapse2({
+  in: visible,
+  duration = "normal",
+  easing,
+  unmountOnExit = false,
+  collapsedHeight = 0,
+  children,
+  style,
+  as: Tag = "div",
+  ...rest
+}, ref) {
+  const innerRef = React5.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] = React5.useState(visible ? "auto" : 0);
+  const [overflow, setOverflow] = React5.useState(
+    visible ? "visible" : "hidden"
+  );
+  const [mounted, setMounted] = React5.useState(unmountOnExit ? visible : true);
+  const prevVisible = React5.useRef(visible);
+  React5.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 = React5.useCallback(() => {
+    if (visible) {
+      setHeight("auto");
+      setOverflow("visible");
+    } else if (unmountOnExit) {
+      setMounted(false);
+    }
+  }, [visible, unmountOnExit]);
+  const handleTransitionEnd = React5.useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
+      finish();
+    },
+    [finish]
+  );
+  const firstRender = React5.useRef(true);
+  React5.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__ */ jsx4(
+    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__ */ jsx4("div", { ref: innerRef, children })
+    }
+  );
+});
+Collapse.displayName = "Collapse";
+
+// src/components/Motion/ListTransition.tsx
+import * as React6 from "react";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var EXIT_FALLBACK_MS = SPRING_MS.effects.default + 50;
+function keyed(children) {
+  const out = [];
+  React6.Children.forEach(children, (child, i) => {
+    const key = React6.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;
+}
+var ListTransition = React6.forwardRef(function ListTransition2({ as: Tag = "div", itemAs: Item = "div", appear = false, children, ...rest }, ref) {
+  const next = keyed(children);
+  const [entries, setEntries] = React6.useState(
+    () => next.map((n) => ({ ...n, state: appear ? "enter" : "idle" }))
+  );
+  const [prevChildren, setPrevChildren] = React6.useState(children);
+  let rendered = entries;
+  if (children !== prevChildren) {
+    rendered = merge(entries, next);
+    setPrevChildren(children);
+    setEntries(rendered);
+  }
+  const remove = React6.useCallback((key) => {
+    setEntries((list) => list.filter((e) => !(e.key === key && e.state === "exit")));
+  }, []);
+  const settle = React6.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("|");
+  React6.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__ */ jsx5(Tag, { ref, ...rest, children: rendered.map((e) => /* @__PURE__ */ jsx5(
+    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__ */ jsx5("div", { className: "nx-list-item-inner", children: e.node })
+    },
+    e.key
+  )) });
+});
+ListTransition.displayName = "ListTransition";
+var SkeletonSwap = React6.forwardRef(function SkeletonSwap2({ loading, skeleton, children, className, ...rest }, ref) {
+  const [phase, setPhase] = React6.useState(loading ? "loading" : "done");
+  const [prevLoading, setPrevLoading] = React6.useState(loading);
+  let current = phase;
+  if (loading !== prevLoading) {
+    current = loading ? "loading" : "out";
+    setPrevLoading(loading);
+    setPhase(current);
+  }
+  React6.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__ */ jsx5("div", { className: current === "out" ? "nx-swap-in" : void 0, children }),
+    current !== "done" && /* @__PURE__ */ jsx5(
+      "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 {
+  useMediaQuery,
+  usePrefersReducedMotion,
+  Fade,
+  Slide,
+  Scale,
+  Collapse,
+  ListTransition,
+  SkeletonSwap
+};

package/dist/{chunk-MX6NYEOW.js → chunk-5HEMUXSR.js}

@@ -101,7 +101,7 @@ var Footer = React.forwardRef(
     {
       ref,
       className: cn(
-        "mt-auto border-t border-[var(--color-outline-variant)] p-4",
+        "sticky bottom-0 mt-auto shrink-0 border-t border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)] p-4",
         className
       ),
       ...props

package/dist/{chunk-UVWQPDOV.js → chunk-6ALDF3XF.js}

@@ -1546,7 +1546,7 @@ var ClassLockOverlay = React2.forwardRef(
 var Overlay3 = React2.forwardRef(
   ({ className, ...props }, ref) => {
     const { scrollLock, open, modal } = React2.useContext(DrawerContext2);
-    const classes = cn("fixed inset-0 z-[var(--z-modal)]", scrim, className);
+    const classes = cn("nx-drawer-overlay fixed inset-0 z-[var(--z-modal)]", scrim, className);
     if (scrollLock === "class") {
       if (!modal) return null;
       return /* @__PURE__ */ jsx(ClassLockOverlay, { ref, open, className: cn("pointer-events-auto", classes), ...props });
@@ -1567,7 +1567,7 @@ var Content3 = React2.forwardRef(({ className, children, side = "right", surface
     {
       ref,
       className: cn(
-        "fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3 focus:outline-none",
+        "nx-drawer fixed z-[var(--z-modal)] flex flex-col bg-[var(--color-surface-elevated)] text-[var(--color-on-surface)] shadow-elevation-3 focus:outline-none",
         sideMap[side],
         surface === "glass" && glassSurfaceClass,
         className

package/dist/components/Drawer/index.js

@@ -2,7 +2,7 @@
 import {
   Drawer,
   Sheet
-} from "../../chunk-UVWQPDOV.js";
+} from "../../chunk-6ALDF3XF.js";
 import "../../chunk-47UGX37F.js";
 import "../../chunk-5FWJXSXT.js";
 import "../../chunk-DEIBF3P7.js";

package/dist/components/MoneyInput/index.js

@@ -5,8 +5,8 @@ import {
 import "../../chunk-JLUCMNVS.js";
 import "../../chunk-NHUQLIHL.js";
 import "../../chunk-F7ZA2VA2.js";
-import "../../chunk-R3SUPKKI.js";
 import "../../chunk-5W3AOOYS.js";
+import "../../chunk-R3SUPKKI.js";
 import "../../chunk-VMSWIC3O.js";
 import "../../chunk-Q7G5WGYV.js";
 export {

package/dist/components/Motion/index.js

@@ -2,12 +2,18 @@
 import {
   Collapse,
   Fade,
+  ListTransition,
   Scale,
-  Slide
-} from "../../chunk-FS4XKWFA.js";
+  SkeletonSwap,
+  Slide,
+  usePrefersReducedMotion
+} from "../../chunk-4GVGS5N4.js";
 export {
   Collapse,
   Fade,
+  ListTransition,
   Scale,
-  Slide
+  SkeletonSwap,
+  Slide,
+  usePrefersReducedMotion
 };

package/dist/components/Pagination/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Pagination
-} from "../../chunk-AKV4GMIY.js";
+} from "../../chunk-2NJQBJWH.js";
 import "../../chunk-5W3AOOYS.js";
 import "../../chunk-VMSWIC3O.js";
 import "../../chunk-Q7G5WGYV.js";

package/dist/components/Sidebar/index.js

@@ -1,7 +1,7 @@
 'use client';
 import {
   Sidebar
-} from "../../chunk-MX6NYEOW.js";
+} from "../../chunk-5HEMUXSR.js";
 import "../../chunk-VMSWIC3O.js";
 import "../../chunk-Q7G5WGYV.js";
 export {

package/dist/index.d.ts

@@ -1733,13 +1733,14 @@ interface MotionBaseProps {
     /** Whether the component is visible / mounted. */
     in: boolean;
     /**
-     * Token-based duration.  Maps to `--duration-{value}`.
+     * Speed on the spring tokens: `fast` → fast, `normal` → default,
+     * `slow`/`slower` → slow springs. `instant` turns motion off.
      * @default 'normal'
      */
     duration?: MotionDuration;
     /**
-     * Token-based easing.  Maps to `--ease-{value}`.
-     * @default 'out'
+     * Legacy: set it to use the old `--duration-*` + `--ease-{value}` tokens
+     * instead of springs. Omit it to ride the spring tokens.
      */
     easing?: MotionEasing;
     /**
@@ -1776,7 +1777,8 @@ interface SlideProps extends MotionBaseProps, React.HTMLAttributes<HTMLDivElemen
     as?: React.ElementType;
 }
 /**
- * Slide — animates opacity + translate from a given direction.
+ * 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">
@@ -1796,7 +1798,8 @@ interface ScaleProps extends MotionBaseProps, React.HTMLAttributes<HTMLDivElemen
     as?: React.ElementType;
 }
 /**
- * Scale — animates opacity + scale(x) from `initialScale` to 1.
+ * 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}>
@@ -1808,8 +1811,8 @@ declare const Scale: React.ForwardRefExoticComponent<ScaleProps & React.RefAttri
 
 interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Easing for the height transition.
-     * @default 'out'
+     * Legacy: set it to use `--duration-*` + `--ease-{value}` instead of the
+     * spatial spring for the height transition.
      */
     easing?: MotionBaseProps['easing'];
     /**
@@ -1821,7 +1824,8 @@ interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttri
     as?: React.ElementType;
 }
 /**
- * Collapse — animates `max-height` to reveal / hide content.
+ * 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.
  *
@@ -1833,4 +1837,53 @@ interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HTMLAttri
  */
 declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, Alert, AlertDialog, type AlertProps, Amount, type AmountProps, AppShell, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonStatus, Callout, type CalloutProps, Card, CardLink, type CardLinkProps, type CardProps, CheckList, CheckListItem, type CheckListItemProps, type CheckListProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, Chip, type ChipProps, Citation, type CitationMessages, type CitationProps, type CitationSource, Code, type CodeProps, Collapse, type CollapseProps, Collapsible, Combobox, CommandPalette, type CommandPaletteRootProps, Container, type ContainerProps, ContextMenu, CountryBadge, type CountryBadgeProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, Drawer, type DrawerRootProps, DropdownMenu, EmptyState, ErrorState, type ErrorStateProps, EyebrowChip, type EyebrowChipProps, Fade, type FadeProps, type Feedback, FileUpload, type FileUploadRootProps, FilterChip, type FilterChipProps, Flag, type FlagProps, Flex, type FlexProps, FormError, type FormErrorProps, FormField, type FormFieldContextValue, type FormFieldRootProps, GradientDivider, type GradientDividerProps, Grid, type GridProps, Heading, type HeadingProps, HelperText, type HelperTextProps, HoverCard, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, KeyboardShortcut, type KeyboardShortcutProps, Label, type LabelProps, Link, type LinkProps, Logo, type LogoProps, MediaCard, type MediaCardProps, type MediaCardRatio, Menubar, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, type MessageFrom, type MessageStrings, MoneyInput, type MoneyInputProps, type MotionBaseProps, type MotionDuration, type MotionEasing, NavigationMenu, NavigationRail, type NavigationRailItemProps, type NavigationRailRootProps, NexubProvider, type NexubProviderProps, NumberInput, type NumberInputProps, NumberTicker, type NumberTickerPart, type NumberTickerProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, Progress, type ProgressProps, PromptInput, type PromptInputMessages, type PromptInputProps, type PromptInputStatus, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, Rating, type RatingProps, Scale, type ScaleProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Select, Separator, type SeparatorProps, Sheet, Sidebar, type SidebarGroupProps, type SidebarHeaderProps, type SidebarItemProps, type SidebarRootProps, Skeleton, type SkeletonProps, Slide, type SlideDirection, type SlideProps, Slider, type SliderProps, SourceChip, type SourceChipProps, SourceList, type SourceListProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, Stack, type StackProps, StatusPill, type StatusPillProps, StreamingText, type StreamingTextProps, Switch, type SwitchProps, Table, type TableRootProps, Tabs, Tag, type TagProps, Text, TextGradient, type TextGradientProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, ThinkingIndicator, type ThinkingIndicatorMessages, type ThinkingIndicatorProps, Toast, type ToastItem, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleProps, Toolbar, type ToolbarRootProps, Tooltip, Provider$1 as TooltipProvider, TopNav, type TopNavItemProps, type TopNavRootProps, type UndoableToastOptions, addonVariants, alertVariants, avatarGroupVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calloutVariants, cardVariants, chipVariants, cn, containerVariants, defaultMessageStrings, headingVariants, iconButtonVariants, inputVariants, inputWrapperVariants, labelVariants, linkVariants, logoVariants, progressFillVariants, progressTrackVariants, ratingVariants, safeUrl, sectionVariants, separatorVariants, skeletonVariants, spinnerVariants, startViewTransition, statusPillVariants, tagVariants, textVariants, textareaVariants, toast, toggleVariants, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useLocale, useMediaQuery, useMergedRefs, useNexubMessages, usePointerSheen, useTheme, useToastStore };
+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>
+ * ```
+ */
+declare const ListTransition: React.ForwardRefExoticComponent<ListTransitionProps & React.RefAttributes<HTMLElement>>;
+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>
+ * ```
+ */
+declare const SkeletonSwap: React.ForwardRefExoticComponent<SkeletonSwapProps & React.RefAttributes<HTMLDivElement>>;
+
+/** True when the user asked the OS for reduced motion. False during SSR. */
+declare function usePrefersReducedMotion(): boolean;
+
+export { Accordion, Alert, AlertDialog, type AlertProps, Amount, type AmountProps, AppShell, AspectRatio, type AspectRatioProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonStatus, Callout, type CalloutProps, Card, CardLink, type CardLinkProps, type CardProps, CheckList, CheckListItem, type CheckListItemProps, type CheckListProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, Chip, type ChipProps, Citation, type CitationMessages, type CitationProps, type CitationSource, Code, type CodeProps, Collapse, type CollapseProps, Collapsible, Combobox, CommandPalette, type CommandPaletteRootProps, Container, type ContainerProps, ContextMenu, CountryBadge, type CountryBadgeProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, Drawer, type DrawerRootProps, DropdownMenu, EmptyState, ErrorState, type ErrorStateProps, EyebrowChip, type EyebrowChipProps, Fade, type FadeProps, type Feedback, FileUpload, type FileUploadRootProps, FilterChip, type FilterChipProps, Flag, type FlagProps, Flex, type FlexProps, FormError, type FormErrorProps, FormField, type FormFieldContextValue, type FormFieldRootProps, GradientDivider, type GradientDividerProps, Grid, type GridProps, Heading, type HeadingProps, HelperText, type HelperTextProps, HoverCard, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, KeyboardShortcut, type KeyboardShortcutProps, Label, type LabelProps, Link, type LinkProps, ListTransition, type ListTransitionProps, Logo, type LogoProps, MediaCard, type MediaCardProps, type MediaCardRatio, Menubar, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, type MessageFrom, type MessageStrings, MoneyInput, type MoneyInputProps, type MotionBaseProps, type MotionDuration, type MotionEasing, NavigationMenu, NavigationRail, type NavigationRailItemProps, type NavigationRailRootProps, NexubProvider, type NexubProviderProps, NumberInput, type NumberInputProps, NumberTicker, type NumberTickerPart, type NumberTickerProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, Progress, type ProgressProps, PromptInput, type PromptInputMessages, type PromptInputProps, type PromptInputStatus, RadioCard, RadioCardGroup, type RadioCardGroupProps, type RadioCardProps, RadioGroup, Rating, type RatingProps, Scale, type ScaleProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Section, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, Select, Separator, type SeparatorProps, Sheet, Sidebar, type SidebarGroupProps, type SidebarHeaderProps, type SidebarItemProps, type SidebarRootProps, Skeleton, type SkeletonProps, SkeletonSwap, type SkeletonSwapProps, Slide, type SlideDirection, type SlideProps, Slider, type SliderProps, SourceChip, type SourceChipProps, SourceList, type SourceListProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, Stack, type StackProps, StatusPill, type StatusPillProps, StreamingText, type StreamingTextProps, Switch, type SwitchProps, Table, type TableRootProps, Tabs, Tag, type TagProps, Text, TextGradient, type TextGradientProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, type ThemeScriptProps, ThinkingIndicator, type ThinkingIndicatorMessages, type ThinkingIndicatorProps, Toast, type ToastItem, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleProps, Toolbar, type ToolbarRootProps, Tooltip, Provider$1 as TooltipProvider, TopNav, type TopNavItemProps, type TopNavRootProps, type UndoableToastOptions, addonVariants, alertVariants, avatarGroupVariants, avatarVariants, badgeVariants, bannerVariants, buttonVariants, calloutVariants, cardVariants, chipVariants, cn, containerVariants, defaultMessageStrings, headingVariants, iconButtonVariants, inputVariants, inputWrapperVariants, labelVariants, linkVariants, logoVariants, progressFillVariants, progressTrackVariants, ratingVariants, safeUrl, sectionVariants, separatorVariants, skeletonVariants, spinnerVariants, startViewTransition, statusPillVariants, tagVariants, textVariants, textareaVariants, toast, toggleVariants, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useLocale, useMediaQuery, useMergedRefs, useNexubMessages, usePointerSheen, usePrefersReducedMotion, useTheme, useToastStore };

package/dist/index.js

@@ -35,20 +35,20 @@ import {
   Toolbar
 } from "./chunk-2ZBJOUJ7.js";
 import "./chunk-XYXMPHND.js";
-import {
-  StreamingText
-} from "./chunk-5QEARXY3.js";
 import {
   StatusPill,
   statusPillVariants
 } from "./chunk-77LYWSJW.js";
+import {
+  StreamingText
+} from "./chunk-5QEARXY3.js";
 import {
   Switch
 } from "./chunk-BTYDDKRQ.js";
+import "./chunk-4B4XWDAH.js";
 import {
   Tabs
 } from "./chunk-CKFRMCZ7.js";
-import "./chunk-4B4XWDAH.js";
 import {
   Tag,
   tagVariants
@@ -69,7 +69,7 @@ import {
 } from "./chunk-CUOASXI7.js";
 import {
   Sidebar
-} from "./chunk-MX6NYEOW.js";
+} from "./chunk-5HEMUXSR.js";
 import {
   Skeleton,
   skeletonVariants
@@ -128,13 +128,13 @@ import {
 } from "./chunk-UCNA2ICU.js";
 import {
   Pagination
-} from "./chunk-AKV4GMIY.js";
-import {
-  Popover
-} from "./chunk-NORCPKRD.js";
+} from "./chunk-2NJQBJWH.js";
 import {
   PasswordInput
 } from "./chunk-TSBBWYDO.js";
+import {
+  Popover
+} from "./chunk-NORCPKRD.js";
 import {
   Progress,
   progressFillVariants,
@@ -147,6 +147,9 @@ import {
 import {
   MediaCard
 } from "./chunk-3QD76BKT.js";
+import {
+  Menubar
+} from "./chunk-VF6RWEKX.js";
 import {
   MessageActions,
   MessageBubble,
@@ -156,9 +159,6 @@ import {
   Provider,
   Tooltip
 } from "./chunk-XQDD76EF.js";
-import {
-  Menubar
-} from "./chunk-VF6RWEKX.js";
 import {
   MoneyInput
 } from "./chunk-6FRG6NMM.js";
@@ -171,9 +171,13 @@ import {
 import {
   Collapse,
   Fade,
+  ListTransition,
   Scale,
-  Slide
-} from "./chunk-FS4XKWFA.js";
+  SkeletonSwap,
+  Slide,
+  useMediaQuery,
+  usePrefersReducedMotion
+} from "./chunk-4GVGS5N4.js";
 import {
   NavigationMenu
 } from "./chunk-BEOHZKPQ.js";
@@ -210,10 +214,10 @@ import {
   FilterChip
 } from "./chunk-NN7SNECM.js";
 import "./chunk-BV3U3ATL.js";
-import "./chunk-ADO2DB6Q.js";
 import {
   Flex
 } from "./chunk-7MSIOYJZ.js";
+import "./chunk-ADO2DB6Q.js";
 import {
   FormField
 } from "./chunk-G4RLUGE3.js";
@@ -247,7 +251,7 @@ import {
 import {
   Drawer,
   Sheet
-} from "./chunk-UVWQPDOV.js";
+} from "./chunk-6ALDF3XF.js";
 import "./chunk-HI7GBSW2.js";
 import {
   DropdownMenu
@@ -363,17 +367,6 @@ import {
 import {
   Accordion
 } from "./chunk-T7RLPFGX.js";
-import {
-  Alert,
-  alertVariants
-} from "./chunk-TXIJMUD5.js";
-import {
-  Amount
-} from "./chunk-ZYR3R36N.js";
-import {
-  NumberTicker
-} from "./chunk-2BAXCPQF.js";
-import "./chunk-R3SUPKKI.js";
 import {
   AlertDialog
 } from "./chunk-TSN6HYVY.js";
@@ -384,9 +377,20 @@ import {
 } from "./chunk-22BGPRJZ.js";
 import "./chunk-5W3AOOYS.js";
 import "./chunk-DEIBF3P7.js";
+import {
+  Amount
+} from "./chunk-ZYR3R36N.js";
+import {
+  NumberTicker
+} from "./chunk-2BAXCPQF.js";
+import "./chunk-R3SUPKKI.js";
 import {
   AppShell
 } from "./chunk-56FERRWW.js";
+import {
+  Alert,
+  alertVariants
+} from "./chunk-TXIJMUD5.js";
 import {
   AspectRatio
 } from "./chunk-S2CTBFLN.js";
@@ -422,21 +426,6 @@ function useDisclosure(initialOpen = false) {
   const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
   return { isOpen, open, close, toggle };
 }
-
-// src/hooks/useMediaQuery.ts
-import { useState as useState2, useEffect } from "react";
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState2(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(query);
-    const handler = (e) => setMatches(e.matches);
-    mql.addEventListener("change", handler);
-    setMatches(mql.matches);
-    return () => mql.removeEventListener("change", handler);
-  }, [query]);
-  return matches;
-}
 export {
   Accordion,
   Alert,
@@ -497,6 +486,7 @@ export {
   KeyboardShortcut,
   Label,
   Link,
+  ListTransition,
   Logo,
   MediaCard,
   Menubar,
@@ -528,6 +518,7 @@ export {
   Sheet,
   Sidebar,
   Skeleton,
+  SkeletonSwap,
   Slide,
   Slider,
   SourceChip,
@@ -600,6 +591,7 @@ export {
   useMergedRefs,
   useNexubMessages,
   usePointerSheen,
+  usePrefersReducedMotion,
   useTheme,
   useToastStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -68,39 +68,39 @@
     "date-fns": "^4.4.0",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.6.1",
-    "@nexub/core": "2.1.0",
-    "@nexub/icons": "2.1.0"
+    "@nexub/core": "2.3.0",
+    "@nexub/icons": "2.3.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@nexub/tokens": "^2.1.0"
+    "@nexub/tokens": "^2.3.0"
   },
   "devDependencies": {
     "@playwright/test": "1.64.0",
     "@storybook/react": "10.6.3",
     "@storybook/react-vite": "10.6.3",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",
     "@types/node": "^26.6.5",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "autoprefixer": "^10.6.1",
     "axe-core": "^4.14.0",
     "jsdom": "^30.1.3",
     "postcss": "^8.5.31",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "storybook": "10.6.3",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vaul": "1.1.2",
     "vite": "^7.3.7",
     "vitest": "^5.0.5",
-    "@nexub/themes": "2.1.0",
-    "@nexub/tokens": "2.1.0"
+    "@nexub/themes": "2.3.0",
+    "@nexub/tokens": "2.3.0"
   },
   "scripts": {
     "build": "tsup && node scripts/check-dts.mjs",

package/dist/chunk-FS4XKWFA.js

@@ -1,308 +0,0 @@
-'use client';
-
-// src/components/Motion/Fade.tsx
-import * as React2 from "react";
-
-// src/components/Motion/useMotion.ts
-import * as React from "react";
-var DURATION_MS = {
-  instant: 0,
-  fast: 150,
-  normal: 200,
-  slow: 300,
-  slower: 500
-};
-var FALLBACK_MARGIN_MS = 50;
-function useMotion({
-  visible,
-  duration = "normal",
-  easing = "out",
-  unmountOnExit = false
-}) {
-  const [phase, setPhase] = React.useState(
-    visible ? "entered" : "exited"
-  );
-  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]);
-  React.useEffect(() => {
-    if (phase !== "exiting") return;
-    const t = setTimeout(() => setPhase("exited"), DURATION_MS[duration] + FALLBACK_MARGIN_MS);
-    return () => clearTimeout(t);
-  }, [phase, duration]);
-  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;
-  const transitionStyle = {
-    transitionDuration: `var(--duration-${duration})`,
-    transitionTimingFunction: `var(--ease-${easing})`,
-    transitionProperty: "opacity, transform"
-  };
-  return { phase, mounted, transitionStyle, handleTransitionEnd };
-}
-
-// src/components/Motion/Fade.tsx
-import { jsx } from "react/jsx-runtime";
-var Fade = React2.forwardRef(function Fade2({
-  in: visible,
-  duration = "normal",
-  easing = "out",
-  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";
-
-// src/components/Motion/Slide.tsx
-import * as React3 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var 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)" }
-};
-var Slide = React3.forwardRef(function Slide2({
-  in: visible,
-  duration = "normal",
-  easing = "out",
-  unmountOnExit = false,
-  direction = "up",
-  distance,
-  children,
-  style,
-  as: Tag = "div",
-  ...rest
-}, ref) {
-  const { phase, mounted, 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__ */ jsx2(
-    Tag,
-    {
-      ref,
-      onTransitionEnd: handleTransitionEnd,
-      style: {
-        opacity: isEntered ? 1 : 0,
-        transform: isEntered ? dt.to : fromTransform,
-        willChange: "opacity, transform",
-        ...transitionStyle,
-        ...style
-      },
-      ...rest,
-      children
-    }
-  );
-});
-Slide.displayName = "Slide";
-
-// src/components/Motion/Scale.tsx
-import * as React4 from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Scale = React4.forwardRef(function Scale2({
-  in: visible,
-  duration = "fast",
-  easing = "out-expo",
-  unmountOnExit = false,
-  initialScale = 0.95,
-  children,
-  style,
-  as: Tag = "div",
-  ...rest
-}, ref) {
-  const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
-    visible,
-    duration,
-    easing,
-    unmountOnExit
-  });
-  if (!mounted) return null;
-  const isEntered = phase === "entered";
-  return /* @__PURE__ */ jsx3(
-    Tag,
-    {
-      ref,
-      onTransitionEnd: handleTransitionEnd,
-      style: {
-        opacity: isEntered ? 1 : 0,
-        transform: isEntered ? "scale(1)" : `scale(${initialScale})`,
-        transformOrigin: "top center",
-        willChange: "opacity, transform",
-        ...transitionStyle,
-        ...style
-      },
-      ...rest,
-      children
-    }
-  );
-});
-Scale.displayName = "Scale";
-
-// src/components/Motion/Collapse.tsx
-import * as React5 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Collapse = React5.forwardRef(function Collapse2({
-  in: visible,
-  duration = "normal",
-  easing = "out",
-  unmountOnExit = false,
-  collapsedHeight = 0,
-  children,
-  style,
-  as: Tag = "div",
-  ...rest
-}, ref) {
-  const innerRef = React5.useRef(null);
-  const [height, setHeight] = React5.useState(visible ? "auto" : 0);
-  const [overflow, setOverflow] = React5.useState(
-    visible ? "visible" : "hidden"
-  );
-  const [mounted, setMounted] = React5.useState(unmountOnExit ? visible : true);
-  const prevVisible = React5.useRef(visible);
-  React5.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 = React5.useCallback(() => {
-    if (visible) {
-      setHeight("auto");
-      setOverflow("visible");
-    } else if (unmountOnExit) {
-      setMounted(false);
-    }
-  }, [visible, unmountOnExit]);
-  const handleTransitionEnd = React5.useCallback(
-    (e) => {
-      if (e.target !== e.currentTarget || e.propertyName !== "max-height") return;
-      finish();
-    },
-    [finish]
-  );
-  const firstRender = React5.useRef(true);
-  React5.useEffect(() => {
-    if (firstRender.current) {
-      firstRender.current = false;
-      return;
-    }
-    const t = setTimeout(finish, DURATION_MS[duration] + 100);
-    return () => clearTimeout(t);
-  }, [visible, duration, finish]);
-  if (!mounted) return null;
-  const maxHeight = height === "auto" ? "none" : `${height}px`;
-  return /* @__PURE__ */ jsx4(
-    Tag,
-    {
-      ref,
-      style: {
-        maxHeight,
-        overflow,
-        transitionProperty: "max-height",
-        transitionDuration: `var(--duration-${duration})`,
-        transitionTimingFunction: `var(--ease-${easing})`,
-        ...style
-      },
-      onTransitionEnd: handleTransitionEnd,
-      ...rest,
-      children: /* @__PURE__ */ jsx4("div", { ref: innerRef, children })
-    }
-  );
-});
-Collapse.displayName = "Collapse";
-
-export {
-  Fade,
-  Slide,
-  Scale,
-  Collapse
-};