@nexub/react 7.5.0 → 7.6.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.5.0",
+  "version": "7.6.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/Badge/Badge.d.ts

@@ -8,5 +8,14 @@ export declare const badgeVariants: (props?: ({
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     tone?: ToneValue;
     leadingIcon?: React.ReactNode;
+    /**
+     * A status dot. Before the label when there is one; on its own (no children
+     * or count) it is just the dot: give it an `aria-label`, or it's decorative.
+     */
+    dot?: boolean;
+    /** A number to show. Above `max` it reads "99+"; screen readers get the full number. */
+    count?: number;
+    /** @default 99 */
+    max?: number;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.js

@@ -72,10 +72,37 @@ const toneClasses = {
     outline: "border-[color:light-dark(var(--color-palette-founderub-80),var(--color-palette-founderub-40))] text-[var(--color-founderub)]"
   }
 };
+const dotClasses = {
+  neutral: "bg-[var(--color-outline)]",
+  info: "bg-[var(--color-info)]",
+  success: "bg-[var(--color-success)]",
+  warning: "bg-[var(--color-warning)]",
+  danger: "bg-[var(--color-error)]",
+  leap: "bg-[var(--color-leap)]",
+  bookub: "bg-[var(--color-bookub)]",
+  payub: "bg-[var(--color-payub)]",
+  founderub: "bg-[var(--color-founderub)]"
+};
+const dotSizes = { sm: "size-1.5", md: "size-2", lg: "size-2.5" };
 const Badge = React.forwardRef(
-  ({ className, size, variant = "solid", tone = "neutral", leadingIcon, children, ...props }, ref) => {
+  ({ className, size, variant = "solid", tone = "neutral", leadingIcon, dot, count, max = 99, children, ...props }, ref) => {
     const resolvedVariant = variant ?? "solid";
     const toneStyle = toneClasses[tone][resolvedVariant];
+    const dotSize = dotSizes[size ?? "md"];
+    if (dot && children == null && count == null) {
+      const labelled = props["aria-label"] != null || props["aria-labelledby"] != null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          role: labelled ? "img" : void 0,
+          "aria-hidden": labelled ? void 0 : true,
+          className: cn("inline-block shrink-0 rounded-full", dotSize, dotClasses[tone], className),
+          ...props
+        }
+      );
+    }
+    const capped = count != null && count > max;
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -83,8 +110,19 @@ const Badge = React.forwardRef(
         className: cn(badgeVariants({ size, variant: resolvedVariant }), toneStyle, className),
         ...props,
         children: [
+          dot && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("shrink-0 rounded-full", dotSize, resolvedVariant === "solid" ? "bg-current" : dotClasses[tone])
+            }
+          ),
           leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 inline-flex items-center", children: leadingIcon }),
-          children
+          children,
+          count != null && /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": capped || void 0, className: "nx-tick", children: capped ? `${max}+` : count }, count),
+            capped && /* @__PURE__ */ jsx("span", { className: "sr-only", children: count })
+          ] })
         ]
       }
     );

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

@@ -4,7 +4,7 @@ import type { ToneValue } from '@nexub/core';
 export type { ToneValue };
 export { toneTextClasses } from '../../utils/control.js';
 export declare const buttonVariants: (props?: ({
-    variant?: "accent" | "text" | "link" | "outline" | "primary" | "glass" | "ghost" | "subtle" | "filled" | "tonal" | "outlined" | "hero" | "secondary" | "destructive" | null | undefined;
+    variant?: "accent" | "text" | "link" | "outline" | "primary" | "glass" | "filled" | "tonal" | "outlined" | "hero" | "secondary" | "subtle" | "ghost" | "destructive" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { Command } from 'cmdk';
 export interface CommandPaletteRootProps extends RadixDialog.DialogProps {
     className?: string;
     /** Accessible name of the dialog. @default 'Command palette' */
@@ -17,6 +18,36 @@ export interface CommandPaletteRootProps extends RadixDialog.DialogProps {
      * the page, e.g. `'k'` for Cmd+K / Ctrl+K. Off by default.
      */
     shortcut?: string;
+    /** The open page stack (ids of `CommandPalette.Page`s), deepest last. Empty = the root page. */
+    pages?: string[];
+    defaultPages?: string[];
+    onPagesChange?: (pages: string[]) => void;
+    /** Shows a loading row (e.g. while async results arrive) and hides `Empty`. */
+    loading?: boolean;
+    /**
+     * Opt-in recents: the last `recentLimit` items picked on the root page are
+     * kept in localStorage under this key and shown as a "Recent" group while
+     * the query is empty.
+     */
+    recentKey?: string;
+    /** @default 5 */
+    recentLimit?: number;
+}
+export interface CommandPaletteItemProps extends React.ComponentProps<typeof Command.Item> {
+    /** Opens this `CommandPalette.Page` (by id) when selected. */
+    page?: string;
+}
+export interface CommandPalettePageProps {
+    /** Pushed by `<CommandPalette.Item page="id">`. Leave out for the root page. */
+    id?: string;
+    /** Shown in the input's breadcrumb. Defaults to the id. */
+    title?: string;
+    children?: React.ReactNode;
+}
+/** Content shown only while this page is on top of the stack (no id: the root page). */
+declare function Page({ id, title, children }: CommandPalettePageProps): React.JSX.Element | null;
+declare namespace Page {
+    var displayName: string;
 }
 export declare const CommandPalette: {
     Root: React.ForwardRefExoticComponent<CommandPaletteRootProps & React.RefAttributes<HTMLDivElement>>;
@@ -55,19 +86,7 @@ export declare const CommandPalette: {
         value?: string;
         forceMount?: boolean;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<{
-        children?: React.ReactNode;
-    } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        ref?: React.Ref<HTMLDivElement>;
-    } & {
-        asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
-        disabled?: boolean;
-        onSelect?: (value: string) => void;
-        value?: string;
-        keywords?: string[];
-        forceMount?: boolean;
-    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<CommandPaletteItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         ref?: React.Ref<HTMLDivElement>;
     } & {
@@ -75,4 +94,6 @@ export declare const CommandPalette: {
     }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
         alwaysRender?: boolean;
     } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Page: typeof Page;
 };
+export {};

package/dist/components/CommandPalette/CommandPalette.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
-import { Command } from "cmdk";
+import { Command, useCommandState } from "cmdk";
 import { Search } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
@@ -10,15 +10,72 @@ import { overlaySurface, scrim } from "../../utils/surface.js";
 import { useClassScrollLock } from "../../hooks/useClassScrollLock.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { useMergedRefs } from "../../hooks/useMergedRefs.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { Badge } from "../Badge/Badge.js";
+import { Spinner } from "../Spinner/Spinner.js";
+const PaletteContext = React.createContext(null);
+const usePalette = () => React.useContext(PaletteContext);
+function readRecents(key) {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(key) ?? "[]");
+    return Array.isArray(parsed) ? parsed.filter((r) => typeof r?.value === "string" && typeof r?.label === "string") : [];
+  } catch {
+    return [];
+  }
+}
 const overlayClasses = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim);
 function ClassLockOverlay() {
   useClassScrollLock();
   return /* @__PURE__ */ jsx("div", { "data-state": "open", className: overlayClasses });
 }
 const Root = React.forwardRef(
-  ({ children, label: labelProp, scrollLock = "style", shouldFilter, shortcut, open: openProp, defaultOpen, onOpenChange, ...props }, ref) => {
+  ({
+    children,
+    label: labelProp,
+    scrollLock = "style",
+    shouldFilter,
+    shortcut,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    pages: pagesProp,
+    defaultPages,
+    onPagesChange,
+    loading,
+    recentKey,
+    recentLimit = 5,
+    ...props
+  }, ref) => {
     const messages = useNexubMessages();
-    const [open = false, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });
+    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 [titles, setTitles] = React.useState({});
+    const [recents, setRecents] = React.useState([]);
+    const handlers = React.useRef(/* @__PURE__ */ new Map()).current;
+    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 }),
+      loading,
+      recents,
+      record: (recent) => {
+        if (!recentKey || pages.length) return;
+        const next = [recent, ...recents.filter((r) => r.value !== recent.value)].slice(0, recentLimit);
+        setRecents(next);
+        try {
+          localStorage.setItem(recentKey, JSON.stringify(next));
+        } catch {
+        }
+      },
+      handlers
+    };
     React.useEffect(() => {
       if (!shortcut) return;
       const onKeyDown = (e) => {
@@ -60,7 +117,7 @@ const Root = React.forwardRef(
                 shouldFilter,
                 loop: true,
                 className: "flex h-full w-full flex-col overflow-hidden text-[var(--color-on-surface)]",
-                children
+                children: /* @__PURE__ */ jsx(PaletteContext.Provider, { value: ctx, children })
               }
             )
           ]
@@ -70,31 +127,75 @@ const Root = React.forwardRef(
   }
 );
 Root.displayName = "CommandPalette.Root";
-const Input = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--color-outline-variant)] px-3", children: [
-  /* @__PURE__ */ jsx(Search, { size: "sm", className: "me-2 shrink-0 opacity-50", "aria-hidden": "true" }),
-  /* @__PURE__ */ jsx(
-    Command.Input,
+const Input = React.forwardRef(({ className, value: valueProp, onValueChange, onKeyDown, ...props }, ref) => {
+  const palette = usePalette();
+  const pages = palette?.pages ?? [];
+  const [value = "", setValue] = useControllableState({ value: valueProp, defaultValue: "", onChange: onValueChange });
+  const depth = pages.length;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) first.current = false;
+    else setValue("");
+  }, [depth]);
+  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)),
+    /* @__PURE__ */ jsx(
+      Command.Input,
+      {
+        ref,
+        value,
+        onValueChange: setValue,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (!e.defaultPrevented && e.key === "Backspace" && !e.currentTarget.value && depth) {
+            e.preventDefault();
+            palette?.pop();
+          }
+        },
+        className: cn(
+          "ms-1 flex h-control-xl w-full bg-transparent text-body-lg outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+Input.displayName = "CommandPalette.Input";
+const List = React.forwardRef(({ className, children, ...props }, ref) => {
+  const palette = usePalette();
+  const messages = useNexubMessages();
+  const search = useCommandState((state) => state.search);
+  const showRecents = palette && !palette.loading && !palette.pages.length && !search && palette.recents.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Command.List,
     {
       ref,
-      className: cn(
-        "flex h-control-xl w-full bg-transparent text-body-lg outline-none placeholder:text-[var(--color-on-surface-muted)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]",
-        className
-      ),
-      ...props
+      className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
+      ...props,
+      children: [
+        palette?.loading && /* @__PURE__ */ jsxs(Command.Loading, { label: messages.loading, className: cn(itemClasses, "text-[var(--color-on-surface-muted)]"), children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": "true" }),
+          messages.loading
+        ] }),
+        showRecents && /* @__PURE__ */ jsx(Group, { heading: messages.recent, children: palette.recents.map((r) => /* @__PURE__ */ jsx(
+          Command.Item,
+          {
+            value: `recent:${r.value}`,
+            onSelect: () => palette.handlers.get(r.value)?.(r.value),
+            className: itemClasses,
+            children: r.label
+          },
+          r.value
+        )) }),
+        children
+      ]
     }
-  )
-] }));
-Input.displayName = "CommandPalette.Input";
-const List = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command.List,
-  {
-    ref,
-    className: cn("max-h-[400px] overflow-y-auto overflow-x-hidden p-2", className),
-    ...props
-  }
-));
+  );
+});
 List.displayName = "CommandPalette.List";
-const Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Empty = React.forwardRef(({ className, ...props }, ref) => usePalette()?.loading ? null : /* @__PURE__ */ jsx(
   Command.Empty,
   {
     ref,
@@ -106,6 +207,11 @@ const Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Empty.displayName = "CommandPalette.Empty";
+const itemClasses = cn(
+  "relative flex cursor-default select-none items-center gap-2 rounded-shape-container px-3 py-2.5 text-body-sm outline-none",
+  "aria-selected:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
+  "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--color-text-disabled)]"
+);
 const Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command.Group,
   {
@@ -119,20 +225,37 @@ const Group = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Group.displayName = "CommandPalette.Group";
-const Item = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command.Item,
-  {
-    ref,
-    className: cn(
-      // Concentric: overlay 24px − 8px padding = 16px.
-      "relative flex cursor-default select-none items-center gap-2 rounded-shape-container px-3 py-2.5 text-body-sm outline-none",
-      "aria-selected:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)]",
-      "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-[var(--color-text-disabled)]",
-      className
-    ),
-    ...props
+const Item = React.forwardRef(
+  ({ className, page, onSelect, ...props }, ref) => {
+    const palette = usePalette();
+    const local = React.useRef(null);
+    const select = (value) => {
+      onSelect?.(value);
+      if (page) palette?.push(page);
+      palette?.record({ value, label: local.current?.textContent?.trim() ?? value });
+    };
+    const selectRef = React.useRef(select);
+    selectRef.current = select;
+    React.useEffect(() => {
+      const value = local.current?.getAttribute("data-value");
+      if (!palette || !value) return;
+      const run = (v) => selectRef.current(v);
+      palette.handlers.set(value, run);
+      return () => {
+        if (palette.handlers.get(value) === run) palette.handlers.delete(value);
+      };
+    });
+    return /* @__PURE__ */ jsx(
+      Command.Item,
+      {
+        ref: useMergedRefs(ref, local),
+        onSelect: select,
+        className: cn(itemClasses, className),
+        ...props
+      }
+    );
   }
-));
+);
 Item.displayName = "CommandPalette.Item";
 const Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command.Separator,
@@ -143,7 +266,18 @@ const Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 Separator.displayName = "CommandPalette.Separator";
-const CommandPalette = { Root, Input, List, Empty, Group, Item, Separator };
+function Page({ id, title, children }) {
+  const palette = usePalette();
+  const setTitle = palette?.setTitle;
+  useIsomorphicLayoutEffect(() => {
+    if (id && title) setTitle?.(id, title);
+  }, [id, title]);
+  const pages = palette?.pages ?? [];
+  const active = id ? pages[pages.length - 1] === id : pages.length === 0;
+  return active ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+Page.displayName = "CommandPalette.Page";
+const CommandPalette = { Root, Input, List, Empty, Group, Item, Separator, Page };
 export {
   CommandPalette
 };

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

@@ -1,2 +1,2 @@
 export { CommandPalette } from './CommandPalette.js';
-export type { CommandPaletteRootProps } from './CommandPalette.js';
+export type { CommandPaletteRootProps, CommandPaletteItemProps, CommandPalettePageProps } from './CommandPalette.js';

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. */