@nexub/react 8.3.0 → 8.5.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.3.0",
+  "version": "8.5.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/Button/Button.d.ts

@@ -9,7 +9,15 @@ export declare const buttonVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonStatus = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * @deprecated 8.4: the 1.x variant names, removed in 9.0. Use filled, tonal, outlined, text
+ * (`npx nexub-migrate --rules button-aliases --write`).
+ */
+export type ButtonLegacyVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Visual style. primary, secondary, outline and ghost are deprecated aliases of
+     *  filled, tonal, outlined and text, removed in 9.0. @default 'filled' */
+    variant?: VariantProps<typeof buttonVariants>['variant'];
     tone?: ToneValue;
     /** Async feedback. `loading` blocks clicks (aria-disabled, focus kept),
      *  `success` draws a check, `error` shakes once. Not applied with `asChild`. */

package/dist/components/Button/Button.js

@@ -62,7 +62,7 @@ const buttonVariants = cva(
       }
     },
     defaultVariants: {
-      variant: "primary",
+      variant: "filled",
       size: "md"
     }
   }
@@ -121,7 +121,7 @@ const Button = React.forwardRef(
       onPointerMove: handlePointerMove,
       "data-tone": tone,
       // Styling hook for opt-in layers (vivid, marketing); no styles depend on it by default.
-      "data-variant": variant ?? "primary",
+      "data-variant": variant ?? "filled",
       ...variant === "glass" && { "data-material": "glass", "data-glass-thickness": "thin" },
       ...props
     };

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

@@ -1,2 +1,2 @@
 export { Button, buttonVariants } from './Button.js';
-export type { ButtonProps, ButtonStatus, ToneValue } from './Button.js';
+export type { ButtonProps, ButtonStatus, ButtonLegacyVariant, ToneValue } from './Button.js';

package/dist/components/CommandPalette/CommandPalette.js

@@ -49,20 +49,27 @@ const Root = React.forwardRef(
     const messages = useNexubMessages();
     const [pages = [], setPages] = useControllableState({ value: pagesProp, defaultValue: defaultPages, onChange: onPagesChange });
     const [open = false, setOpenState] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });
-    const setOpen = (next) => {
-      setOpenState(next);
-      if (!next && pages.length) setPages([]);
-    };
+    const setOpen = React.useCallback(
+      (next) => {
+        setOpenState(next);
+        if (!next && pages.length) setPages([]);
+      },
+      [setOpenState, setPages, pages.length]
+    );
     const [titles, setTitles] = React.useState({});
     const [recents, setRecents] = React.useState([]);
     const handlers = React.useRef(/* @__PURE__ */ new Map()).current;
+    const setTitle = React.useCallback(
+      (page, title) => setTitles((t) => t[page] === title ? t : { ...t, [page]: title }),
+      []
+    );
     React.useEffect(() => setRecents(recentKey ? readRecents(recentKey) : []), [recentKey]);
     const ctx = {
       pages,
       push: (page) => setPages([...pages, page]),
       pop: () => setPages(pages.slice(0, -1)),
       titles,
-      setTitle: (page, title) => setTitles((t) => t[page] === title ? t : { ...t, [page]: title }),
+      setTitle,
       loading,
       recents,
       record: (recent) => {
@@ -132,11 +139,12 @@ const Input = React.forwardRef(({ className, value: valueProp, onValueChange, on
   const pages = palette?.pages ?? [];
   const [value = "", setValue] = useControllableState({ value: valueProp, defaultValue: "", onChange: onValueChange });
   const depth = pages.length;
-  const first = React.useRef(true);
+  const shownDepth = React.useRef(depth);
   React.useEffect(() => {
-    if (first.current) first.current = false;
-    else setValue("");
-  }, [depth]);
+    if (shownDepth.current === depth) return;
+    shownDepth.current = depth;
+    setValue("");
+  }, [depth, setValue]);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border-b border-[var(--color-outline-variant)] px-3", children: [
     /* @__PURE__ */ jsx(Search, { size: "sm", className: "me-1 shrink-0 opacity-50", "aria-hidden": "true" }),
     pages.map((page) => /* @__PURE__ */ jsx(Badge, { variant: "soft", size: "sm", className: "shrink-0", children: palette?.titles[page] ?? page }, page)),
@@ -271,7 +279,7 @@ function Page({ id, title, children }) {
   const setTitle = palette?.setTitle;
   useIsomorphicLayoutEffect(() => {
     if (id && title) setTitle?.(id, title);
-  }, [id, title]);
+  }, [id, title, setTitle]);
   const pages = palette?.pages ?? [];
   const active = id ? pages[pages.length - 1] === id : pages.length === 0;
   return active ? /* @__PURE__ */ jsx(Fragment, { children }) : null;

package/dist/components/DataTable/DataTable.js

@@ -314,6 +314,8 @@ function DataTable({
     () => withSelectColumn && pinningIn.left?.length && !pinningIn.left.includes("__select") ? { ...pinningIn, left: ["__select", ...pinningIn.left] } : pinningIn,
     [withSelectColumn, pinningIn]
   );
+  const rowReorderRef = React.useRef(rowReorder);
+  rowReorderRef.current = rowReorder;
   const withRowHandles = React.useCallback(
     (cols) => reorderRows ? [
       {
@@ -321,13 +323,11 @@ function DataTable({
         enableSorting: false,
         enableHiding: false,
         header: () => null,
-        cell: ({ row }) => row.depth === 0 ? rowReorder.handle([0, row.index]) : null
+        cell: ({ row }) => row.depth === 0 ? rowReorderRef.current.handle([0, row.index]) : null
       },
       ...cols
     ] : cols,
-    // rowReorder changes every render; the handle reads fresh data through it.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [reorderRows, data]
+    [reorderRows]
   );
   const allColumns = React.useMemo(
     () => withRowHandles(withSelectColumn ? [
@@ -436,7 +436,7 @@ function DataTable({
     if (grid) gridNav.sync(t);
   });
   const visibleColumns = table.getVisibleLeafColumns();
-  const viewButton = /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ms-auto", children: [
+  const viewButton = /* @__PURE__ */ jsxs(Button, { variant: "outlined", size: "sm", className: "ms-auto", children: [
     /* @__PURE__ */ jsx(SlidersHorizontal, { size: "sm", "aria-hidden": "true" }),
     messages.view
   ] });
@@ -670,7 +670,7 @@ function DataTable({
             selectedRows.map((r) => r.original),
             clear
           ),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: clear, "aria-label": messages.clearSelection, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
+          /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", onClick: clear, "aria-label": messages.clearSelection, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
         ]
       }
     )

package/dist/components/DatePicker/DatePicker.d.ts

@@ -22,6 +22,9 @@ export declare function useCalendarLocale(localeProp?: Locale): {
 };
 export interface DatePickerProps {
     value?: Date;
+    /** Called with the new value. */
+    onValueChange?: (date: Date | undefined) => void;
+    /** @deprecated 8.5: use `onValueChange` (the name every other Nexub input, and React Native, uses). Removed in 9.0. */
     onChange?: (date: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;

package/dist/components/DatePicker/DatePicker.js

@@ -88,6 +88,7 @@ const calendarClassNames = {
 const DatePicker = React.forwardRef(
   function DatePicker2({
     value,
+    onValueChange,
     onChange,
     placeholder: placeholderProp,
     disabled = false,
@@ -102,6 +103,10 @@ const DatePicker = React.forwardRef(
     typeable = false
   }, ref) {
     const [open, setOpen] = React.useState(false);
+    const change = (v) => {
+      onValueChange?.(v);
+      onChange?.(v);
+    };
     const messages = useNexubMessages();
     const placeholder = placeholderProp ?? messages.pickDate;
     const calendar = useCalendarLocale(localeProp);
@@ -112,11 +117,11 @@ const DatePicker = React.forwardRef(
     const invalid = typed !== void 0 && (!isValid(typed) || minDate !== void 0 && typed < minDate || maxDate !== void 0 && typed > maxDate || disabledDates !== void 0 && dateMatchModifiers(typed, disabledDates));
     const commit = () => {
       if (text === null || invalid) return;
-      onChange?.(typed);
+      change(typed);
       setText(null);
     };
     const pick = (date) => {
-      onChange?.(date);
+      change(date);
       setText(null);
       setOpen(false);
     };
@@ -215,7 +220,7 @@ const DatePicker = React.forwardRef(
                 ...calendar.dayPickerProps
               }
             ),
-            presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-t border-[var(--color-outline-variant)] p-2", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onClick: () => pick(p.date), children: p.label }, p.label)) })
+            presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-t border-[var(--color-outline-variant)] p-2", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { variant: "text", size: "xs", onClick: () => pick(p.date), children: p.label }, p.label)) })
           ]
         }
       ) })

package/dist/components/DateTimePicker/DateTimePicker.d.ts

@@ -3,6 +3,9 @@ import type { Locale } from 'date-fns';
 export interface DateTimePickerProps {
     /** Date and time in the reader's local time. */
     value?: Date;
+    /** Called with the new value. */
+    onValueChange?: (value: Date | undefined) => void;
+    /** @deprecated 8.5: use `onValueChange` (the name every other Nexub input, and React Native, uses). Removed in 9.0. */
     onChange?: (value: Date | undefined) => void;
     /** Time used when a date is picked first. @default '09:00' */
     defaultTime?: string;
@@ -17,4 +20,4 @@ export interface DateTimePickerProps {
     locale?: Locale;
 }
 /** A DatePicker and a TimePicker that edit one `Date` together. */
-export declare function DateTimePicker({ value, onChange, defaultTime, minuteStep, minDate, maxDate, disabled, timeZone, 'aria-label': ariaLabel, className, locale, }: DateTimePickerProps): React.JSX.Element;
+export declare function DateTimePicker({ value, onValueChange, onChange, defaultTime, minuteStep, minDate, maxDate, disabled, timeZone, 'aria-label': ariaLabel, className, locale, }: DateTimePickerProps): React.JSX.Element;

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -15,6 +15,7 @@ const withTime = (d, time) => {
 };
 function DateTimePicker({
   value,
+  onValueChange,
   onChange,
   defaultTime = "09:00",
   minuteStep,
@@ -26,6 +27,10 @@ function DateTimePicker({
   className,
   locale
 }) {
+  const change = (v) => {
+    onValueChange?.(v);
+    onChange?.(v);
+  };
   const messages = useNexubMessages();
   const intlLocale = useIntlLocale();
   const [pendingTime, setPendingTime] = React.useState(defaultTime);
@@ -37,7 +42,7 @@ function DateTimePicker({
       {
         "aria-label": messages.dateLabel,
         value,
-        onChange: (date) => onChange?.(date ? withTime(date, time) : void 0),
+        onValueChange: (date) => change(date ? withTime(date, time) : void 0),
         minDate,
         maxDate,
         disabled,
@@ -54,7 +59,7 @@ function DateTimePicker({
         disabled,
         onValueChange: (next) => {
           if (!next) return;
-          if (value) onChange?.(withTime(value, next));
+          if (value) change(withTime(value, next));
           else setPendingTime(next);
         }
       }

package/dist/components/FilterBuilder/FilterBuilder.js

@@ -82,14 +82,14 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
           return isFilterGroup(r) ? /* @__PURE__ */ jsx(GroupView, { group: r, fields, depth: depth + 1, maxDepth, onChange: replace, onRemove: remove }, r.id) : /* @__PURE__ */ jsx(RuleRow, { rule: r, fields, onChange: replace, onRemove: remove }, r.id);
         }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setRules((rules) => [...rules, newRule()]), disabled: !first, children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "text", size: "sm", onClick: () => setRules((rules) => [...rules, newRule()]), disabled: !first, children: [
             /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
             t.addFilter
           ] }),
           depth < maxDepth && /* @__PURE__ */ jsxs(
             Button,
             {
-              variant: "ghost",
+              variant: "text",
               size: "sm",
               onClick: () => setRules((rules) => [...rules, { id: uid(), combinator: "and", rules: [newRule()] }]),
               disabled: !first,

package/dist/components/Motion/ListTransition.js

@@ -53,10 +53,9 @@ const ListTransition = React.forwardRef(function ListTransition2({ as: Tag = "di
   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);
+    const t = setTimeout(() => setEntries((list) => list.filter((e) => e.state !== "exit")), EXIT_FALLBACK_MS);
     return () => clearTimeout(t);
-  }, [exiting, remove]);
+  }, [exiting]);
   return /* @__PURE__ */ jsx(Tag, { ref, ...rest, children: rendered.map((e) => /* @__PURE__ */ jsx(
     Item,
     {

package/dist/components/NumberInput/NumberInput.d.ts

@@ -9,6 +9,9 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     showSteppers?: boolean;
     value?: number;
     defaultValue?: number;
+    /** Called with the new value. */
+    onValueChange?: (value: number) => void;
+    /** @deprecated 8.5: use `onValueChange` (the name every other Nexub input, and React Native, uses). Removed in 9.0. */
     onChange?: (value: number) => void;
     invalid?: boolean;
 }

package/dist/components/NumberInput/NumberInput.js

@@ -26,19 +26,24 @@ const NumberInput = React.forwardRef(
     showSteppers = false,
     value,
     defaultValue = 0,
+    onValueChange,
     onChange,
     invalid,
     disabled,
     ...props
   }, ref) => {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const change = (v) => {
+      onValueChange?.(v);
+      onChange?.(v);
+    };
     const messages = useNexubMessages();
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
     const commit = (next) => {
       const clamped = clampValue(next, min, max);
       if (!controlled) setInternalValue(clamped);
-      onChange?.(clamped);
+      change(clamped);
     };
     const handleChange = (e) => {
       const parsed = parseFloat(e.target.value);

package/dist/components/SavedViews/SavedViews.js

@@ -14,7 +14,7 @@ function SavedViews({ views, activeId, onSelect, onSave, onUpdate, onDelete, cla
   const active = views.find((v) => v.id === activeId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className, children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outlined", size: "sm", className, children: [
         /* @__PURE__ */ jsx(Bookmark, { size: "sm", "aria-hidden": "true" }),
         active?.name ?? t.views,
         /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true" })
@@ -51,7 +51,7 @@ function SavedViews({ views, activeId, onSelect, onSave, onUpdate, onDelete, cla
           /* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: t.saveView.replace(/…$/, "") }) }),
           /* @__PURE__ */ jsx(Input, { "aria-label": t.viewName, placeholder: t.viewName, value: name, onChange: (e) => setName(e.target.value), autoFocus: true }),
           /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
-            /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", children: t.cancel }) }),
+            /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "text", children: t.cancel }) }),
             /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !name.trim(), children: t.save })
           ] })
         ]

package/dist/components/Sortable/reorder.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
 import { GripVertical } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
@@ -152,7 +153,11 @@ function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
     setDragging(null);
     setMark(null);
   };
-  React.useEffect(() => () => finish(false), []);
+  const finishRef = React.useRef(finish);
+  useIsomorphicLayoutEffect(() => {
+    finishRef.current = finish;
+  });
+  React.useEffect(() => () => finishRef.current(false), []);
   const begin = (d) => {
     d.active = true;
     d.el = itemOf(d.handle) ?? d.handle;

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export type { CitationProps, CitationSource, CitationMessages, SourceChipProps,
 export { NexubProvider, useNexubMessages, useLocale, defaultMessages } from './components/NexubProvider/index.js';
 export type { NexubProviderProps, NexubMessages, Direction as TextDirection } from './components/NexubProvider/index.js';
 export { Button, buttonVariants } from './components/Button/index.js';
-export type { ButtonProps, ButtonStatus, ToneValue } from './components/Button/index.js';
+export type { ButtonProps, ButtonStatus, ButtonLegacyVariant, ToneValue } from './components/Button/index.js';
 export { ButtonGroup } from './components/ButtonGroup/index.js';
 export type { ButtonGroupProps } from './components/ButtonGroup/index.js';
 export { SplitButton } from './components/SplitButton/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -86,14 +86,14 @@
     "get-nonce": "^1.0.1",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0",
-    "@nexub/core": "8.3.0",
-    "@nexub/icons": "8.3.0"
+    "@nexub/core": "8.5.0",
+    "@nexub/icons": "8.5.0"
   },
   "peerDependencies": {
     "react": ">=19 <20",
     "react-dom": ">=19 <20",
     "@tanstack/react-virtual": "^3.14.22",
-    "@nexub/tokens": "^8.3.0"
+    "@nexub/tokens": "^8.5.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-virtual": {
@@ -126,8 +126,8 @@
     "vaul": "1.1.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5",
-    "@nexub/themes": "8.3.0",
-    "@nexub/tokens": "8.3.0"
+    "@nexub/themes": "8.5.0",
+    "@nexub/tokens": "8.5.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && rm -f dist/vendor/*.d.ts && node scripts/check-dts.mjs && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp -R ../themes/src/fonts dist/fonts",