@nexub/react 7.9.0 → 8.0.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.9.0",
+  "version": "8.0.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/AlertDialog/AlertDialog.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { type ScrollLock } from '../../hooks/useClassScrollLock.js';
 export interface AlertDialogRootProps extends RadixAlertDialog.AlertDialogProps {
-    /** See Dialog.Root `scrollLock`. @default 'style' (becomes 'class' in 8.0) */
+    /** See Dialog.Root `scrollLock`. @default 'class' (since 8.0) */
     scrollLock?: ScrollLock;
 }
 declare function Root({ scrollLock, ...props }: AlertDialogRootProps): React.JSX.Element;

package/dist/components/AlertDialog/AlertDialog.js

@@ -10,7 +10,7 @@ import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
 const ConfirmContext = React.createContext(null);
 const ALERT_LOCK = { style: { scrollLock: "style", modal: true }, class: { scrollLock: "class", modal: true } };
-function Root({ scrollLock = "style", ...props }) {
+function Root({ scrollLock = "class", ...props }) {
   return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: ALERT_LOCK[scrollLock], children: /* @__PURE__ */ jsx(RadixAlertDialog.Root, { ...props }) });
 }
 const Trigger = RadixAlertDialog.Trigger;

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -7,8 +7,8 @@ export interface CommandPaletteRootProps extends RadixDialog.DialogProps {
     label?: string;
     /**
      * How page scroll is locked while open.
-     * - `'style'` (default): Radix's lock, which injects a `<style>` tag (blocked by `style-src 'self'`).
-     * - `'class'`: the `nexub-scroll-lock` class from `@nexub/themes/base`. Strict-CSP safe.
+     * - `'class'` (default since 8.0): the `nexub-scroll-lock` class from `@nexub/themes/base`. Strict-CSP safe.
+     * - `'style'`: Radix's lock, which injects a `<style>` tag (blocked by `style-src 'self'`).
      */
     scrollLock?: 'style' | 'class';
     /** `false` when the items are already filtered (e.g. async search results). @default true */

package/dist/components/CommandPalette/CommandPalette.js

@@ -32,7 +32,7 @@ const Root = React.forwardRef(
   ({
     children,
     label: labelProp,
-    scrollLock = "style",
+    scrollLock = "class",
     shouldFilter,
     shortcut,
     open: openProp,

package/dist/components/Dialog/Dialog.d.ts

@@ -7,7 +7,7 @@ export interface DialogRootProps extends RadixDialog.DialogProps {
     /**
      * `'class'` locks page scroll with a class on <html> instead of the <style>
      * Radix injects, so the dialog works under a strict `style-src` with no nonce.
-     * @default 'style' (becomes 'class' in 8.0)
+     * @default 'class' (since 8.0)
      */
     scrollLock?: ScrollLock;
 }

package/dist/components/Dialog/Dialog.js

@@ -10,7 +10,7 @@ import { useMediaQuery } from "../../hooks/useMediaQuery.js";
 import { X } from "@nexub/icons";
 import { IconButton } from "../IconButton/IconButton.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
-function Root({ scrollLock = "style", modal = true, ...props }) {
+function Root({ scrollLock = "class", modal = true, ...props }) {
   const lock = React.useMemo(() => ({ scrollLock, modal }), [scrollLock, modal]);
   return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: lock, children: /* @__PURE__ */ jsx(RadixDialog.Root, { modal, ...props }) });
 }

package/dist/components/Drawer/Drawer.d.ts

@@ -21,7 +21,7 @@ export interface DrawerRootProps {
      * - `'class'`: adds the `nexub-scroll-lock` class from `@nexub/themes/base` to `<html>`.
      *   Injects nothing, so it works under `style-src 'self'`. Focus trap, Escape and
      *   outside-click dismissal are unchanged.
-     * @default 'style'
+     * @default 'class' (since 8.0)
      */
     scrollLock?: 'style' | 'class';
     /** When `false`, dragging, outside clicks and Escape don't close the drawer. @default true */

package/dist/components/Drawer/Drawer.js

@@ -8,7 +8,7 @@ import { scrim } from "../../utils/surface.js";
 import { useClassScrollLock } from "../../hooks/useClassScrollLock.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 const DrawerContext = React.createContext({ scrollLock: "style", open: false, modal: true });
-function Root({ scrollLock = "style", onOpenChange, ...props }) {
+function Root({ scrollLock = "class", onOpenChange, ...props }) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(props.defaultOpen ?? false);
   const open = props.open ?? uncontrolledOpen;
   return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { scrollLock, open, modal: props.modal ?? true }, children: /* @__PURE__ */ jsx(

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

@@ -1,12 +1,6 @@
 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.
-     * @deprecated since 7.3, removed in 8.0 (see MotionBaseProps.easing).
-     */
-    easing?: MotionBaseProps['easing'];
+export interface CollapseProps extends MotionBaseProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Starting height when collapsed. Useful for "peek" effects.
      * @default 0

package/dist/components/Motion/Collapse.js

@@ -1,11 +1,10 @@
 "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";
+import { 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,
@@ -14,9 +13,8 @@ const Collapse = React.forwardRef(function Collapse2({
   ...rest
 }, ref) {
   const reduced = usePrefersReducedMotion();
-  const legacy = easing !== void 0;
   const instant = duration === "instant" || reduced;
-  const settleMs = instant ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.spatial[SPRING_SPEED[duration]];
+  const settleMs = instant ? 0 : 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);
@@ -56,7 +54,7 @@ const Collapse = React.forwardRef(function Collapse2({
         display: "grid",
         gridTemplateRows: expanded ? "1fr" : "0fr",
         overflow,
-        transition: instant ? "none" : legacy ? `grid-template-rows var(--duration-${duration}) var(--ease-${easing})` : spring("grid-template-rows", "spatial", SPRING_SPEED[duration]),
+        transition: instant ? "none" : spring("grid-template-rows", "spatial", SPRING_SPEED[duration]),
         ...style
       },
       onTransitionEnd: (e) => {

package/dist/components/Motion/Fade.js

@@ -5,7 +5,6 @@ import { useMotion } from "./useMotion.js";
 const Fade = React.forwardRef(function Fade2({
   in: visible,
   duration = "normal",
-  easing,
   unmountOnExit = false,
   children,
   style,
@@ -15,7 +14,6 @@ const Fade = React.forwardRef(function Fade2({
   const { phase, mounted, transitionStyle, handleTransitionEnd } = useMotion({
     visible,
     duration,
-    easing,
     unmountOnExit
   });
   if (!mounted) return null;

package/dist/components/Motion/Scale.js

@@ -5,7 +5,6 @@ import { useMotion } from "./useMotion.js";
 const Scale = React.forwardRef(function Scale2({
   in: visible,
   duration = "fast",
-  easing,
   unmountOnExit = false,
   initialScale = 0.95,
   children,
@@ -16,7 +15,6 @@ const Scale = React.forwardRef(function Scale2({
   const { phase, mounted, reduced, transitionStyle, handleTransitionEnd } = useMotion({
     visible,
     duration,
-    easing,
     unmountOnExit
   });
   if (!mounted) return null;

package/dist/components/Motion/Slide.js

@@ -11,7 +11,6 @@ const directionTransform = {
 const Slide = React.forwardRef(function Slide2({
   in: visible,
   duration = "normal",
-  easing,
   unmountOnExit = false,
   direction = "up",
   distance,
@@ -23,7 +22,6 @@ const Slide = React.forwardRef(function Slide2({
   const { phase, mounted, reduced, transitionStyle, handleTransitionEnd } = useMotion({
     visible,
     duration,
-    easing,
     unmountOnExit
   });
   if (!mounted) return null;

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

@@ -9,7 +9,7 @@ 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 type { MotionDuration, MotionBaseProps } from './motion.types.js';
 export { Reveal } from './Reveal.js';
 export type { RevealProps } from './Reveal.js';
 export { Float } from './Float.js';

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

@@ -1,5 +1,4 @@
 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;
@@ -9,13 +8,6 @@ export interface MotionBaseProps {
      * @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.
-     * @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;
     /**
      * Remove the element from the DOM when `in` becomes false
      * (after the exit transition completes).

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import type { MotionDuration, MotionEasing } from './motion.types.js';
-export declare const DURATION_MS: Record<MotionDuration, number>;
+import type { MotionDuration } from './motion.types.js';
 export type SpringSpeed = 'fast' | 'default' | 'slow';
 export type SpringFamily = 'spatial' | 'effects' | 'expressive';
 /** `duration` → spring speed. `instant` is handled separately (no motion). */
@@ -31,11 +30,9 @@ export interface UseMotionReturn {
  *
  * 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, }: {
+export declare function useMotion({ visible, duration, unmountOnExit, }: {
     visible: boolean;
     duration?: MotionDuration;
-    easing?: MotionEasing;
     unmountOnExit?: boolean;
 }): UseMotionReturn;

package/dist/components/Motion/useMotion.js

@@ -1,13 +1,6 @@
 "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",
@@ -27,7 +20,6 @@ function usePrefersReducedMotion() {
 function useMotion({
   visible,
   duration = "normal",
-  easing,
   unmountOnExit = false
 }) {
   const [phase, setPhase] = React.useState(
@@ -58,8 +50,7 @@ function useMotion({
       setPhase("exiting");
     }
   }, [visible]);
-  const legacy = easing !== void 0;
-  const exitMs = duration === "instant" ? 0 : legacy ? DURATION_MS[duration] : SPRING_MS.effects.fast;
+  const exitMs = duration === "instant" ? 0 : SPRING_MS.effects.fast;
   React.useEffect(() => {
     if (phase !== "exiting") return;
     const t = setTimeout(() => setPhase("exited"), exitMs + FALLBACK_MARGIN_MS);
@@ -74,12 +65,6 @@ function useMotion({
   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(", ")
@@ -93,7 +78,6 @@ function useMotion({
   return { phase, mounted, reduced, transitionStyle, handleTransitionEnd };
 }
 export {
-  DURATION_MS,
   SPRING_MS,
   SPRING_SPEED,
   spring,

package/dist/index.d.ts

@@ -255,7 +255,7 @@ export type { DateRangePickerProps, DateRange, DateRangePreset } from './compone
 export { ThemeProvider, ThemeScript, useTheme } from './components/ThemeProvider/index.js';
 export type { ThemeMode, GlassMode, ThemeContextValue, ThemeProviderProps, ThemeScriptProps } from './components/ThemeProvider/index.js';
 export { Fade, Slide, Scale, Collapse, ListTransition, SkeletonSwap, usePrefersReducedMotion, Reveal, Float, Marquee } from './components/Motion/index.js';
-export type { FadeProps, SlideProps, SlideDirection, ScaleProps, CollapseProps, ListTransitionProps, SkeletonSwapProps, MotionDuration, MotionEasing, MotionBaseProps, RevealProps, FloatProps, MarqueeProps } from './components/Motion/index.js';
+export type { FadeProps, SlideProps, SlideDirection, ScaleProps, CollapseProps, ListTransitionProps, SkeletonSwapProps, MotionDuration, MotionBaseProps, RevealProps, FloatProps, MarqueeProps } from './components/Motion/index.js';
 export type { DataTableColumn } from './components/DataTable/index.js';
 export type { TableRootProps } from './components/Table/index.js';
 export type { PromiseToastOptions } from './components/Toast/index.js';