@nexub/react 7.2.0 → 7.3.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.2.0",
+  "version": "7.3.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Accordion/Accordion.js

@@ -33,7 +33,7 @@ const Trigger = React.forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-200", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "shrink-0 transition-transform duration-spatial-fast ease-spatial-fast", "aria-hidden": "true" })
       ]
     }
   ) })

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

@@ -4,6 +4,7 @@ export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HT
     /**
      * Legacy: set it to use `--duration-*` + `--ease-{value}` instead of the
      * spatial spring for the height transition.
+     * @deprecated since 7.3, removed in 8.0 (see MotionBaseProps.easing).
      */
     easing?: MotionBaseProps['easing'];
     /**
@@ -15,10 +16,10 @@ export interface CollapseProps extends Omit<MotionBaseProps, 'easing'>, React.HT
     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.
+ * Collapse — reveals / hides content on the spatial spring by animating a
+ * one-row grid from `0fr` to `1fr`, so the browser sizes it: no height is
+ * measured in JS and content that grows while open just grows. Reduced motion
+ * snaps instead of animating.
  *
  * ```tsx
  * <Collapse in={isOpen}>

package/dist/components/Motion/Collapse.js

@@ -13,63 +13,30 @@ const Collapse = React.forwardRef(function Collapse2({
   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 instant = duration === "instant" || reduced;
+  const settleMs = instant ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
   const [mounted, setMounted] = React.useState(unmountOnExit ? visible : true);
+  const [expanded, setExpanded] = React.useState(visible);
+  const [settled, setSettled] = React.useState(true);
   const prevVisible = React.useRef(visible);
   React.useEffect(() => {
-    const changed = prevVisible.current !== visible;
+    if (prevVisible.current === visible) return;
     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);
-          });
-        });
-      }
+    setSettled(false);
+    if (!visible) {
+      setExpanded(false);
+      return;
     }
-    return () => {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
-    };
-  }, [visible, collapsedHeight]);
+    setMounted(true);
+    const raf = requestAnimationFrame(() => setExpanded(true));
+    return () => cancelAnimationFrame(raf);
+  }, [visible]);
   const finish = React.useCallback(() => {
-    if (visible) {
-      setHeight("auto");
-      setOverflow("visible");
-    } else if (unmountOnExit) {
-      setMounted(false);
-    }
+    setSettled(true);
+    if (!visible && 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) {
@@ -80,20 +47,23 @@ const Collapse = React.forwardRef(function Collapse2({
     return () => clearTimeout(t);
   }, [visible, settleMs, finish]);
   if (!mounted) return null;
-  const maxHeight = height === "auto" ? "none" : `${height}px`;
+  const overflow = expanded && settled ? "visible" : "hidden";
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ref,
       style: {
-        maxHeight,
+        display: "grid",
+        gridTemplateRows: expanded ? "1fr" : "0fr",
         overflow,
-        transition: duration === "instant" || reduced ? "none" : legacy ? `max-height var(--duration-${duration}) var(--ease-${easing})` : spring("max-height", "spatial", SPRING_SPEED[duration]),
+        transition: instant ? "none" : legacy ? `grid-template-rows var(--duration-${duration}) var(--ease-${easing})` : spring("grid-template-rows", "spatial", SPRING_SPEED[duration]),
         ...style
       },
-      onTransitionEnd: handleTransitionEnd,
+      onTransitionEnd: (e) => {
+        if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") finish();
+      },
       ...rest,
-      children: /* @__PURE__ */ jsx("div", { ref: innerRef, children })
+      children: /* @__PURE__ */ jsx("div", { style: { minHeight: collapsedHeight, overflow }, children })
     }
   );
 });

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

@@ -12,6 +12,8 @@ export interface MotionBaseProps {
     /**
      * Legacy: set it to use the old `--duration-*` + `--ease-{value}` tokens
      * instead of springs. Omit it to ride the spring tokens.
+     * @deprecated since 7.3: the `--duration-*` / `--ease-*` tokens (tokens/motion.json) are
+     * retired in favour of the spring tokens. Removed in 8.0.
      */
     easing?: MotionEasing;
     /**

package/dist/components/NavigationMenu/NavigationMenu.js

@@ -50,7 +50,7 @@ const Trigger = React.forwardRef(
           ChevronDown,
           {
             size: "xs",
-            className: "relative ms-1 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative ms-1 transition-transform duration-spatial-fast ease-spatial-fast group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -96,6 +96,8 @@ const Viewport = React.forwardRef(
         "nx-motion nx-pop origin-top relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
         floatingSurface,
         "md:w-[var(--radix-navigation-menu-viewport-width)]",
+        // Resize between items on the spatial spring instead of snapping.
+        "transition-[width,height] duration-spatial-default ease-spatial-default motion-reduce:transition-none",
         className
       ),
       ...props

package/dist/components/Progress/Progress.js

@@ -20,7 +20,7 @@ const progressTrackVariants = cva(
   }
 );
 const progressFillVariants = cva(
-  "h-full rounded-full transition-all duration-300 ease-in-out",
+  "h-full rounded-full transition-all duration-spatial-default ease-spatial-default",
   {
     variants: {
       tone: {

package/dist/components/Tabs/Tabs.js

@@ -6,7 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { useMergedRefs } from "../../hooks/useMergedRefs.js";
 import { useSlidingIndicator } from "../../hooks/useSlidingIndicator.js";
 const Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-3", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cn("flex flex-col gap-3 data-[orientation=vertical]:flex-row", className), ...props })
 );
 Root.displayName = "Tabs.Root";
 const List = React.forwardRef(
@@ -18,8 +18,12 @@ const List = React.forwardRef(
       {
         ref: useMergedRefs(ref, forwardedRef),
         className: cn(
-          "relative flex w-full items-stretch justify-start overflow-x-auto",
+          "group/tabs relative flex w-full items-stretch justify-start overflow-x-auto",
           "border-b border-[var(--color-outline-variant)]",
+          // Vertical: a column with the rule on the inline-end side.
+          "data-[orientation=vertical]:w-auto data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col",
+          "data-[orientation=vertical]:overflow-x-visible data-[orientation=vertical]:overflow-y-auto",
+          "data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-e",
           className
         ),
         ...props,
@@ -32,7 +36,10 @@ const List = React.forwardRef(
               className: cn(
                 "pointer-events-none absolute bottom-0 left-0 h-[3px] rounded-t-full bg-[var(--color-primary)]",
                 "w-[var(--nx-ind-w,0px)] translate-x-[var(--nx-ind-x,0px)] opacity-[var(--nx-ind-o,0)]",
-                "[[data-nx-indicator=ready]>&]:transition-[transform,width] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
+                "group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:bottom-auto group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:end-0",
+                "group-data-[orientation=vertical]/tabs:h-[var(--nx-ind-h,0px)] group-data-[orientation=vertical]/tabs:w-[3px] group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-full",
+                "group-data-[orientation=vertical]/tabs:translate-x-0 group-data-[orientation=vertical]/tabs:translate-y-[var(--nx-ind-y,0px)]",
+                "[[data-nx-indicator=ready]>&]:transition-[transform,width,height] [[data-nx-indicator=ready]>&]:duration-spatial-default [[data-nx-indicator=ready]>&]:ease-spatial-default"
               )
             }
           )
@@ -52,6 +59,7 @@ const Trigger = React.forwardRef(
         "nx-state-layer relative inline-flex h-control-md items-center justify-center whitespace-nowrap rounded-t-[var(--shape-field)] px-4 text-label-lg select-none",
         "text-[var(--color-on-surface-variant)] transition-colors duration-effects-fast ease-effects-fast",
         "data-[state=active]:text-[var(--color-primary)]",
+        "group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:rounded-none group-data-[orientation=vertical]/tabs:rounded-s-[var(--shape-field)]",
         "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
         className
       ),
@@ -66,6 +74,8 @@ const Content = React.forwardRef(
     {
       ref,
       className: cn(
+        // Crossfade in on the effects spring (@starting-style, @nexub/themes/base).
+        "nx-tab-panel",
         className,
         // Radix hides inactive panels with the `hidden` attribute, which any
         // display class (`flex`, `md:grid`…) overrides. !important always wins.

package/dist/hooks/useSlidingIndicator.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 /**
  * One indicator that slides to the active item (SegmentedControl thumb, Tabs
- * underline). Writes --nx-ind-x / -w / -o (opacity) on the (position: relative) root;
+ * underline). Writes --nx-ind-x / -w / -y / -h / -o (opacity) on the (position: relative) root;
  * CSS transitions do the motion. Sets data-nx-indicator="ready" one frame after
  * the first measure so the indicator doesn't animate in on mount.
  */

package/dist/hooks/useSlidingIndicator.js

@@ -10,6 +10,8 @@ function useSlidingIndicator(ref, activeSelector) {
       if (!el) return;
       root.style.setProperty("--nx-ind-x", `${el.offsetLeft}px`);
       root.style.setProperty("--nx-ind-w", `${el.offsetWidth}px`);
+      root.style.setProperty("--nx-ind-y", `${el.offsetTop}px`);
+      root.style.setProperty("--nx-ind-h", `${el.offsetHeight}px`);
     };
     update();
     const frame = requestAnimationFrame(() => root.dataset.nxIndicator = "ready");