@nexub/react 7.5.0 → 7.7.0

package/dist/components/DataTable/DataTable.js

@@ -20,7 +20,6 @@ import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Table } from "../Table/Table.js";
 import { Checkbox } from "../Checkbox/Checkbox.js";
 import { Button } from "../Button/Button.js";
-import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
 import { useReorder } from "../Sortable/reorder.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
@@ -134,6 +133,67 @@ function TreeCell({
   ] });
 }
 const px = (n) => typeof n === "number" ? `${n}px` : n;
+const ViewOptions = React.lazy(() => import("./ViewOptions.js").then((m) => ({ default: m.ViewOptions })));
+const placeCell = (column, resizable) => (el) => {
+  if (!el) return;
+  el.style.width = resizable ? px(column.getSize()) : "";
+  const side = column.getIsPinned();
+  el.style.insetInlineStart = side === "left" ? px(column.getStart("left")) : "";
+  el.style.insetInlineEnd = side === "right" ? px(column.getAfter("right")) : "";
+};
+const pinClass = (column) => {
+  const side = column.getIsPinned();
+  if (!side) return void 0;
+  return cn(
+    "sticky z-[1] bg-[var(--color-surface)]",
+    "[tr:hover>&]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,var(--color-surface))]",
+    "[tr[data-state=selected]>&]:bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-surface))]",
+    side === "left" && column.getIsLastColumn("left") && "border-e border-[var(--color-outline-variant)]",
+    side === "right" && column.getIsFirstColumn("right") && "border-s border-[var(--color-outline-variant)]"
+  );
+};
+function RowViewImpl({
+  row,
+  index,
+  selected,
+  compact,
+  pinned,
+  resizable,
+  selectable,
+  tree,
+  virtual,
+  measure,
+  expandLabel,
+  collapseLabel,
+  dragProps
+}) {
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      ref: measure,
+      "data-index": index,
+      "aria-rowindex": virtual ? index + 2 : void 0,
+      "data-state": selectable && selected ? "selected" : void 0,
+      ...dragProps,
+      children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          ref: pinned || resizable ? placeCell(cell.column, resizable) : void 0,
+          className: cn(
+            alignText[cell.column.columnDef.meta?.align ?? "start"],
+            compact && "py-1.5",
+            pinClass(cell.column),
+            resizable && "truncate"
+          ),
+          children: tree && cell === cells.find((c) => c.column.id !== "__select") ? /* @__PURE__ */ jsx(TreeCell, { row, expandLabel, collapseLabel, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
+        },
+        cell.id
+      ))
+    }
+  );
+}
+const sameRow = (a, b) => Object.keys(a).every((k) => k === "row" || a[k] === b[k]) && a.row.id === b.row.id && a.row.original === b.row.original && a.row.index === b.row.index && a.row.depth === b.row.depth;
+const RowView = React.memo(RowViewImpl, sameRow);
 const apply = (u, prev) => typeof u === "function" ? u(prev) : u;
 const columnLabel = (c) => typeof c.columnDef.header === "string" ? c.columnDef.header : c.id;
 function DataTable({
@@ -164,7 +224,15 @@ function DataTable({
   maxHeight,
   grid = false,
   rowWindow,
-  pagination,
+  pagination: paginationProp,
+  sort,
+  onSortChange,
+  manualSort = false,
+  page,
+  pageSize: pageSizeProp,
+  onPageChange,
+  manualPagination = false,
+  rowCount,
   getSubRows,
   expanded: expandedProp,
   defaultExpanded,
@@ -182,7 +250,11 @@ function DataTable({
 }) {
   const messages = useNexubMessages();
   const { locale, dir } = useLocale();
-  const [sorting, setSorting] = React.useState([]);
+  const [sorting = [], setSorting] = useControllableState({
+    value: sort,
+    defaultValue: [],
+    onChange: onSortChange
+  });
   const [rowSelection = {}, setRowSelection] = useControllableState({
     value: rowSelectionProp,
     defaultValue: {},
@@ -222,10 +294,14 @@ function DataTable({
   const tableRef = React.useRef(null);
   const gridNav = React.useMemo(() => createGridNavigation(dir), [dir]);
   const dragged = React.useRef(null);
-  const [paginationState, setPaginationState] = React.useState({
-    pageIndex: 0,
-    pageSize: pagination?.pageSize ?? 20
+  const pagination = !!paginationProp || page !== void 0 || pageSizeProp !== void 0 || manualPagination;
+  const [pageIndex = 0, setPageIndex] = useControllableState({
+    value: page,
+    defaultValue: 0,
+    onChange: onPageChange
   });
+  const pageSize = pageSizeProp ?? paginationProp?.pageSize ?? 20;
+  const paginationState = React.useMemo(() => ({ pageIndex, pageSize }), [pageIndex, pageSize]);
   const withSelectColumn = enableRowSelection && selectionColumn;
   const reorderRows = Boolean(onRowOrderChange) && sorting.length === 0;
   const rowReorder = useReorder({
@@ -312,7 +388,8 @@ function DataTable({
     columns: allColumns,
     state: tableState,
     getRowId,
-    onSortingChange: enableSorting ? setSorting : void 0,
+    onSortingChange: enableSorting ? (u) => setSorting(apply(u, sorting)) : void 0,
+    manualSorting: manualSort,
     onRowSelectionChange: enableRowSelection ? (u) => setRowSelection(apply(u, rowSelection)) : void 0,
     onColumnVisibilityChange: (u) => setColumnVisibility(apply(u, columnVisibility)),
     onColumnSizingChange: (u) => setColumnSizing(apply(u, columnSizing)),
@@ -321,11 +398,15 @@ function DataTable({
     enableColumnResizing,
     columnResizeMode: "onChange",
     columnResizeDirection: dir,
-    onPaginationChange: pagination ? setPaginationState : void 0,
+    onPaginationChange: pagination ? (u) => {
+      const next = apply(u, paginationState).pageIndex;
+      if (next !== pageIndex) setPageIndex(next);
+    } : void 0,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+    getSortedRowModel: enableSorting && !manualSort ? getSortedRowModel() : void 0,
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    getPaginationRowModel: pagination && !manualPagination ? getPaginationRowModel() : void 0,
+    rowCount,
     getSubRows,
     getExpandedRowModel: getSubRows ? getExpandedRowModel() : void 0,
     onExpandedChange: getSubRows ? (u) => setExpanded(apply(u, expanded)) : void 0,
@@ -333,7 +414,7 @@ function DataTable({
     // (TanStack then expands inside the page model; without pages it must not).
     paginateExpandedRows: !pagination,
     enableRowSelection,
-    manualPagination: false
+    manualPagination
   });
   const compact = density === "compact";
   const selectedRows = enableRowSelection ? table.getSelectedRowModel().rows : [];
@@ -354,24 +435,11 @@ function DataTable({
     if (scroller) scroller.style.maxHeight = maxHeight == null ? "" : px(maxHeight);
     if (grid) gridNav.sync(t);
   });
-  const placeCell = (column) => (el) => {
-    if (!el) return;
-    el.style.width = enableColumnResizing ? px(column.getSize()) : "";
-    const side = column.getIsPinned();
-    el.style.insetInlineStart = side === "left" ? px(column.getStart("left")) : "";
-    el.style.insetInlineEnd = side === "right" ? px(column.getAfter("right")) : "";
-  };
-  const pinClass = (column) => {
-    const side = column.getIsPinned();
-    if (!side) return void 0;
-    return cn(
-      "sticky z-[1] bg-[var(--color-surface)]",
-      "[tr:hover>&]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,var(--color-surface))]",
-      "[tr[data-state=selected]>&]:bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-surface))]",
-      side === "left" && column.getIsLastColumn("left") && "border-e border-[var(--color-outline-variant)]",
-      side === "right" && column.getIsFirstColumn("right") && "border-s border-[var(--color-outline-variant)]"
-    );
-  };
+  const visibleColumns = table.getVisibleLeafColumns();
+  const viewButton = /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ms-auto", children: [
+    /* @__PURE__ */ jsx(SlidersHorizontal, { size: "sm", "aria-hidden": "true" }),
+    messages.view
+  ] });
   const moveColumn = (id, to) => {
     const ids = table.getAllLeafColumns().map((c) => c.id);
     const order = (columnOrder.length ? columnOrder : ids).filter((c) => c !== "__select" && ids.includes(c));
@@ -390,31 +458,21 @@ function DataTable({
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-density": density, ...props, children: [
     (toolbar != null || viewOptions) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       toolbar,
-      viewOptions && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ms-auto", children: [
-          /* @__PURE__ */ jsx(SlidersHorizontal, { size: "sm", "aria-hidden": "true" }),
-          messages.view
-        ] }) }),
-        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.density }),
-          /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, { value: density, onValueChange: (v) => setDensity(v), children: [
-            /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "comfortable", children: messages.comfortable }),
-            /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "compact", children: messages.compact })
-          ] }),
-          /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.columns }),
-          table.getAllLeafColumns().filter((c) => c.getCanHide()).map((c) => /* @__PURE__ */ jsx(
-            DropdownMenu.CheckboxItem,
-            {
-              checked: c.getIsVisible(),
-              onCheckedChange: (v) => c.toggleVisibility(v === true),
-              onSelect: (e) => e.preventDefault(),
-              children: columnLabel(c)
-            },
-            c.id
-          ))
-        ] })
-      ] })
+      viewOptions && // The plain button stands in (same size, no layout shift) until the menu loads.
+      /* @__PURE__ */ jsx(React.Suspense, { fallback: viewButton, children: /* @__PURE__ */ jsx(
+        ViewOptions,
+        {
+          trigger: viewButton,
+          density,
+          onDensityChange: setDensity,
+          columns: table.getAllLeafColumns().filter((c) => c.getCanHide()).map((c) => ({
+            id: c.id,
+            label: columnLabel(c),
+            visible: c.getIsVisible(),
+            toggle: (v) => c.toggleVisibility(v)
+          }))
+        }
+      ) })
     ] }),
     offerAll && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-shape-container bg-[var(--color-surface-container-low)] px-4 py-2 text-body-sm", children: table.getIsAllRowsSelected() ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { children: messages.selectedCount(fmt(totalRows)) }),
@@ -447,7 +505,7 @@ function DataTable({
             return /* @__PURE__ */ jsxs(
               TableHead,
               {
-                ref: placeCell(col),
+                ref: placeCell(col, enableColumnResizing),
                 className: cn(
                   alignText[align],
                   compact && "h-8",
@@ -532,32 +590,29 @@ function DataTable({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination?.pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination ? pageSize : 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
             rowWin.before > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.before }),
             rowWin.indexes.map((i) => {
               const row = rows[i];
               return /* @__PURE__ */ jsx(
-                TableRow,
+                RowView,
                 {
-                  ref: rowWin.measure,
-                  "data-index": i,
-                  "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
-                  "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
-                  ...reorderRows && row.depth === 0 ? rowReorder.itemProps([0, row.index]) : {},
-                  children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
-                    TableCell,
-                    {
-                      ref: pinned || enableColumnResizing ? placeCell(cell.column) : void 0,
-                      className: cn(
-                        alignText[cell.column.columnDef.meta?.align ?? "start"],
-                        compact && "py-1.5",
-                        pinClass(cell.column),
-                        enableColumnResizing && "truncate"
-                      ),
-                      children: getSubRows && cell === cells.find((c) => c.column.id !== "__select") ? /* @__PURE__ */ jsx(TreeCell, { row, expandLabel: messages.expandRow, collapseLabel: messages.collapseRow, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
-                    },
-                    cell.id
-                  ))
+                  row,
+                  index: i,
+                  selected: enableRowSelection && row.getIsSelected(),
+                  expanded: !!getSubRows && row.getIsExpanded(),
+                  columns: visibleColumns,
+                  columnSizing,
+                  compact,
+                  pinned,
+                  resizable: enableColumnResizing,
+                  selectable: enableRowSelection,
+                  tree: !!getSubRows,
+                  virtual: rowWin.virtual,
+                  measure: rowWin.measure,
+                  expandLabel: messages.expandRow,
+                  collapseLabel: messages.collapseRow,
+                  dragProps: reorderRows && row.depth === 0 ? rowReorder.itemProps([0, row.index]) : void 0
                 },
                 row.id
               );

package/dist/components/DataTable/ViewOptions.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { DataTableDensity } from './DataTable.js';
+export interface ViewOptionsProps {
+    trigger: React.ReactElement;
+    density: DataTableDensity;
+    onDensityChange: (density: DataTableDensity) => void;
+    /** Hideable columns. */
+    columns: {
+        id: string;
+        label: string;
+        visible: boolean;
+        toggle: (visible: boolean) => void;
+    }[];
+}
+export declare function ViewOptions({ trigger, density, onDensityChange, columns }: ViewOptionsProps): React.JSX.Element;

package/dist/components/DataTable/ViewOptions.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+function ViewOptions({ trigger, density, onDensityChange, columns }) {
+  const messages = useNexubMessages();
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.density }),
+      /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, { value: density, onValueChange: (v) => onDensityChange(v), children: [
+        /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "comfortable", children: messages.comfortable }),
+        /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "compact", children: messages.compact })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.columns }),
+      columns.map((c) => /* @__PURE__ */ jsx(
+        DropdownMenu.CheckboxItem,
+        {
+          checked: c.visible,
+          onCheckedChange: (v) => c.toggle(v === true),
+          onSelect: (e) => e.preventDefault(),
+          children: c.label
+        },
+        c.id
+      ))
+    ] })
+  ] });
+}
+export {
+  ViewOptions
+};

package/dist/components/DataTableVirtual/DataTableVirtual.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type DataTableProps } from '../DataTable/DataTable.js';
-export interface DataTableVirtualProps<TData> extends Omit<DataTableProps<TData>, 'pagination' | 'rowWindow'> {
+export interface DataTableVirtualProps<TData> extends Omit<DataTableProps<TData>, 'pagination' | 'rowWindow' | 'page' | 'pageSize' | 'onPageChange' | 'manualPagination' | 'rowCount'> {
     /** Height of the scrolling area. Required: rows are windowed within it. */
     maxHeight: number | string;
     /** Row height before measuring, in px. Default 49, or 37 when compact. */

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

@@ -15,6 +15,12 @@ declare function Root({ scrollLock, modal, ...props }: DialogRootProps): React.J
 interface ContentProps extends RadixDialog.DialogContentProps {
     size?: Size | 'xl' | 'full';
     surface?: SurfaceValue;
+    /** Adds a close button in the top-end corner. @default false */
+    showClose?: boolean;
+    /** Accessible name of the close button. @default messages.close */
+    closeLabel?: string;
+    /** `true`: bottom sheet. `'auto'`: bottom sheet below the `md` breakpoint, centred above. @default false */
+    sheet?: boolean | 'auto';
 }
 export declare const Dialog: {
     Root: typeof Root;
@@ -26,6 +32,7 @@ export declare const Dialog: {
     Title: React.ForwardRefExoticComponent<RadixDialog.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<RadixDialog.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
     Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/components/Dialog/Dialog.js

@@ -1,11 +1,15 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { cn } from "../../utils/cn.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { glassSurfaceClass } from "../../utils/glass.js";
 import { ClassLockOverlay, ScrollLockContext } from "../../hooks/useClassScrollLock.js";
+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 }) {
   const lock = React.useMemo(() => ({ scrollLock, modal }), [scrollLock, modal]);
   return /* @__PURE__ */ jsx(ScrollLockContext.Provider, { value: lock, children: /* @__PURE__ */ jsx(RadixDialog.Root, { modal, ...props }) });
@@ -33,8 +37,19 @@ const Overlay = React.forwardRef(
   }
 );
 Overlay.displayName = "Dialog.Overlay";
+const StackContext = React.createContext(null);
 const Content = React.forwardRef(
-  function DialogContent({ className, size = "md", surface = "solid", children, ...props }, ref) {
+  function DialogContent({ className, size = "md", surface = "solid", showClose = false, closeLabel, sheet = false, children, ...props }, ref) {
+    const messages = useNexubMessages();
+    const narrow = useMediaQuery("(max-width: 47.99rem)");
+    const asSheet = sheet === true || sheet === "auto" && narrow;
+    const parent = React.useContext(StackContext);
+    const [openChildren, setOpenChildren] = React.useState(0);
+    React.useEffect(() => {
+      if (!parent) return;
+      parent((n) => n + 1);
+      return () => parent((n) => n - 1);
+    }, [parent]);
     const sizeMap = {
       sm: "max-w-sm",
       md: "max-w-lg",
@@ -42,23 +57,28 @@ const Content = React.forwardRef(
       xl: "max-w-4xl",
       full: "max-w-[calc(100vw-2rem)]"
     };
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       RadixDialog.Content,
       {
         ref,
         className: cn(
-          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
+          asSheet ? "fixed inset-x-0 bottom-0 z-[var(--z-modal)] w-full" : "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
           "nx-motion nx-dialog",
           overlaySurface,
           "max-h-[90vh] overflow-y-auto p-6 focus:outline-none",
-          sizeMap[size],
+          asSheet ? "rounded-b-none" : sizeMap[size],
           surface === "glass" && glassSurfaceClass,
           className
         ),
         "data-material": surface === "glass" ? "glass" : void 0,
         "data-glass-thickness": surface === "glass" ? "thick" : void 0,
+        "data-sheet": asSheet ? "" : void 0,
+        "data-nested": openChildren > 0 ? "" : void 0,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(StackContext.Provider, { value: setOpenChildren, children }),
+          showClose && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { label: closeLabel ?? messages.close, variant: "ghost", size: "sm", className: "absolute end-3 top-3", children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) }) })
+        ]
       }
     );
   }
@@ -92,16 +112,22 @@ const Description = React.forwardRef(
 Description.displayName = "Dialog.Description";
 const Header = React.forwardRef(
   function DialogHeader({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4 flex flex-col gap-1", className), ...props });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("nx-dialog-header mb-4 flex flex-col gap-1", className), ...props });
   }
 );
 Header.displayName = "Dialog.Header";
 const Footer = React.forwardRef(
   function DialogFooter({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("nx-dialog-footer mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
   }
 );
 Footer.displayName = "Dialog.Footer";
+const Body = React.forwardRef(
+  function DialogBody({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("nx-dialog-body", className), ...props });
+  }
+);
+Body.displayName = "Dialog.Body";
 const Dialog = {
   Root,
   Trigger,
@@ -112,6 +138,7 @@ const Dialog = {
   Title,
   Description,
   Header,
+  Body,
   Footer
 };
 export {

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
+export interface EmptyStateRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Scales spacing, icon and text. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Fades in on mount (nx-reveal; reduced motion keeps the crossfade). */
+    animate?: boolean;
+}
 export declare const EmptyState: {
-    Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Root: React.ForwardRefExoticComponent<EmptyStateRootProps & React.RefAttributes<HTMLDivElement>>;
     Illustration: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
     Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/EmptyState/EmptyState.js

@@ -1,13 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
+const rootSizes = { sm: "gap-3 py-8", md: "gap-4 py-16", lg: "gap-6 py-24" };
 const Root = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, size = "md", animate, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
+      "data-size": size,
       className: cn(
-        "flex flex-col items-center justify-center gap-4 py-16 text-center",
+        "group/empty-state flex flex-col items-center justify-center text-center",
+        rootSizes[size],
+        animate && "nx-reveal",
         className
       ),
       ...props
@@ -20,7 +24,11 @@ const Illustration = React.forwardRef(
     "div",
     {
       ref,
-      className: cn("text-[var(--color-on-surface-muted)]", className),
+      className: cn(
+        "text-[var(--color-on-surface-muted)]",
+        "group-data-[size=sm]/empty-state:[&_svg]:size-8 group-data-[size=lg]/empty-state:[&_svg]:size-16",
+        className
+      ),
       ...props
     }
   )
@@ -31,7 +39,11 @@ const Title = React.forwardRef(
     "h3",
     {
       ref,
-      className: cn("text-lg font-semibold text-[var(--color-on-surface)]", className),
+      className: cn(
+        "text-lg font-semibold text-[var(--color-on-surface)]",
+        "group-data-[size=sm]/empty-state:text-base group-data-[size=lg]/empty-state:text-xl",
+        className
+      ),
       ...props
     }
   )
@@ -41,7 +53,11 @@ const Description = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   "p",
   {
     ref,
-    className: cn("max-w-sm text-sm text-[var(--color-on-surface-muted)]", className),
+    className: cn(
+      "max-w-sm text-sm text-[var(--color-on-surface-muted)]",
+      "group-data-[size=sm]/empty-state:text-xs group-data-[size=lg]/empty-state:text-base",
+      className
+    ),
     ...props
   }
 ));

package/dist/components/EmptyState/EmptyStatePreset.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import type { NexubMessages } from '@nexub/core';
+import { type EmptyStateRootProps } from './EmptyState.js';
 export type EmptyStateKind = keyof NexubMessages['emptyStates'];
-export interface EmptyStatePresetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface EmptyStatePresetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, Pick<EmptyStateRootProps, 'size' | 'animate'> {
     /** noData, noResults, noAccess (403), serverError (500) or offline. */
     kind: EmptyStateKind;
     /** Overrides the preset's title; the description too. Both default to localised text. */