@nexub/react 5.1.0 → 5.3.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.0",
+  "version": "5.3.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",
@@ -693,6 +693,23 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "multi-select",
+      "name": "Multi Select",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Type: Filters the options and opens the list.",
+        "ArrowDown / ArrowUp: Moves through the options.",
+        "Enter: Toggles the highlighted option.",
+        "Backspace: In an empty field, removes the last chip.",
+        "Escape: Closes the list."
+      ],
+      "screenReader": [
+        "Options carry `aria-checked`; each chip has a \"Remove <label>\" button."
+      ]
+    },
     {
       "slug": "navigation-rail",
       "name": "Navigation Rail",

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -17,9 +17,18 @@ export interface AutocompleteProps {
      * filtered (fetched for this text), so the built-in filtering is off.
      */
     onInputChange?: (text: string) => void;
+    /**
+     * `'inline'` (default): the list always shows under the input.
+     * `'popover'`: a field whose list opens below it while typing.
+     */
+    mode?: 'inline' | 'popover';
+    /** Adds a "Create “text”" option when the text matches no option exactly. */
+    onCreate?: (text: string) => void;
+    disabled?: boolean;
     className?: string;
+    'aria-label'?: string;
 }
-export declare function Autocomplete({ options, value, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, className, }: AutocompleteProps): React.JSX.Element;
+export declare function Autocomplete({ options, value, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, mode, onCreate, disabled, className, 'aria-label': ariaLabel, }: AutocompleteProps): React.JSX.Element;
 export declare namespace Autocomplete {
     var displayName: string;
 }

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,8 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Plus } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Combobox } from "../Combobox/Combobox.js";
+import { ComboboxLoading, ComboboxPopover } from "../Combobox/ComboboxPopover.js";
 function Autocomplete({
   options,
   value,
@@ -12,39 +15,84 @@ function Autocomplete({
   loading = false,
   inputValue,
   onInputChange,
-  className
+  mode = "inline",
+  onCreate,
+  disabled,
+  className,
+  "aria-label": ariaLabel
 }) {
   const messages = useNexubMessages();
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const [innerSearch, setInnerSearch] = React.useState(selectedLabel);
   const [prevValue, setPrevValue] = React.useState(value);
+  const [open, setOpen] = React.useState(false);
   const search = inputValue ?? innerSearch;
-  const setSearch = (text) => {
-    setInnerSearch(text);
-    onInputChange?.(text);
+  const setSearch = (text2) => {
+    setInnerSearch(text2);
+    onInputChange?.(text2);
   };
   if (value !== prevValue) {
     setPrevValue(value);
     setInnerSearch(selectedLabel);
   }
-  return /* @__PURE__ */ jsxs(Combobox.Root, { className, shouldFilter: !onInputChange, children: [
-    /* @__PURE__ */ jsx(Combobox.Input, { placeholder: placeholder ?? messages.searchPlaceholder, value: search, onValueChange: setSearch }),
-    /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-[var(--color-on-surface-muted)]", children: messages.loading }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
-      options.map((opt) => /* @__PURE__ */ jsx(
-        Combobox.Item,
-        {
-          value: opt.label,
-          keywords: [opt.value],
-          onSelect: () => {
-            onValueChange?.(opt.value);
-            setSearch(opt.label);
-          },
-          children: opt.label
+  const text = search.trim();
+  const canCreate = !!onCreate && !loading && text !== "" && !options.some((o) => o.label.toLowerCase() === text.toLowerCase());
+  const list = /* @__PURE__ */ jsx(Combobox.List, { children: loading ? /* @__PURE__ */ jsx(ComboboxLoading, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    !canCreate && /* @__PURE__ */ jsx(Combobox.Empty, { children: emptyText ?? messages.noResults }),
+    options.map((opt) => /* @__PURE__ */ jsx(
+      Combobox.Item,
+      {
+        value: opt.label,
+        keywords: [opt.value],
+        onSelect: () => {
+          onValueChange?.(opt.value);
+          setSearch(opt.label);
+          setOpen(false);
         },
-        opt.value
-      ))
-    ] }) })
+        children: opt.label
+      },
+      opt.value
+    )),
+    canCreate && /* @__PURE__ */ jsxs(
+      Combobox.Item,
+      {
+        forceMount: true,
+        value: "\0",
+        onSelect: () => {
+          onCreate(text);
+          setOpen(false);
+        },
+        className: "gap-2",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+          messages.createOption(text)
+        ]
+      }
+    )
+  ] }) });
+  const input = {
+    placeholder: placeholder ?? messages.searchPlaceholder,
+    value: search,
+    "aria-label": ariaLabel,
+    onValueChange: (t) => {
+      setSearch(t);
+      setOpen(true);
+    }
+  };
+  if (mode === "popover") {
+    return /* @__PURE__ */ jsx(
+      Combobox.Root,
+      {
+        label: ariaLabel,
+        className: cn("overflow-visible rounded-none bg-transparent", className),
+        shouldFilter: !onInputChange,
+        children: /* @__PURE__ */ jsx(ComboboxPopover, { open: open && !disabled, onOpenChange: setOpen, input, disabled, children: list })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Combobox.Root, { label: ariaLabel, className, shouldFilter: !onInputChange, children: [
+    /* @__PURE__ */ jsx(Combobox.Input, { ...input, disabled }),
+    list
   ] });
 }
 Autocomplete.displayName = "Autocomplete";

package/dist/components/Chip/Chip.d.ts

@@ -8,5 +8,7 @@ export declare const chipVariants: (props?: ({
 export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {
     tone?: ToneValue;
     onRemove?: () => void;
+    /** Accessible name of the remove button. Defaults to the localised "Remove". */
+    removeLabel?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Chip/Chip.js

@@ -32,7 +32,7 @@ const chipVariants = cva(
   }
 );
 const Chip = React.forwardRef(
-  ({ className, size, tone = "neutral", onRemove, children, ...props }, ref) => {
+  ({ className, size, tone = "neutral", onRemove, removeLabel, children, ...props }, ref) => {
     const messages = useNexubMessages();
     return /* @__PURE__ */ jsxs(
       "span",
@@ -46,7 +46,7 @@ const Chip = React.forwardRef(
             "button",
             {
               type: "button",
-              "aria-label": messages.remove,
+              "aria-label": removeLabel ?? messages.remove,
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();

package/dist/components/Combobox/ComboboxPopover.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Command } from 'cmdk';
+export interface ComboboxPopoverProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Rendered inside the field, before the input (MultiSelect chips). */
+    before?: React.ReactNode;
+    input: React.ComponentProps<typeof Command.Input>;
+    disabled?: boolean;
+    /** The list (a Combobox.List). */
+    children: React.ReactNode;
+}
+/**
+ * A field that keeps focus in its input while a list opens below it.
+ * The list is not portalled: cmdk finds its items inside the Command root.
+ */
+export declare function ComboboxPopover({ open, onOpenChange, before, input, disabled, children }: ComboboxPopoverProps): React.JSX.Element;
+/** Three placeholder rows while options load; the word "Loading" is read out. */
+export declare function ComboboxLoading(): React.JSX.Element;

package/dist/components/Combobox/ComboboxPopover.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+import { cn } from "../../utils/cn.js";
+import { floatingSurface } from "../../utils/surface.js";
+import { field, fieldDisabled, fieldFocusWithin } from "../../utils/control.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+function ComboboxPopover({ open, onOpenChange, before, input, disabled, children }) {
+  const anchorRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const labelledBy = input["aria-labelledby"];
+  useIsomorphicLayoutEffect(() => {
+    inputRef.current?.setAttribute("aria-expanded", String(open));
+    if (labelledBy) inputRef.current?.setAttribute("aria-labelledby", labelledBy);
+  });
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(RadixPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          field,
+          fieldFocusWithin,
+          "flex min-h-control-md w-full flex-wrap items-center gap-1.5 px-3 py-1",
+          disabled && fieldDisabled
+        ),
+        onPointerDown: (e) => {
+          if (disabled) return;
+          if (e.target.closest("button")) return;
+          if (e.target !== inputRef.current) e.preventDefault();
+          inputRef.current?.focus();
+          onOpenChange(true);
+        },
+        children: [
+          before,
+          /* @__PURE__ */ jsx(
+            Command.Input,
+            {
+              ref: inputRef,
+              disabled,
+              ...input,
+              onKeyDown: (e) => {
+                if (e.key === "ArrowDown" && !open) onOpenChange(true);
+                input.onKeyDown?.(e);
+              },
+              className: cn(
+                "min-w-8 flex-1 bg-transparent text-body-md outline-none placeholder:text-[var(--color-on-surface-muted)]",
+                input.className
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      RadixPopover.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (anchorRef.current?.contains(e.target)) e.preventDefault();
+        },
+        className: cn(
+          "z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden p-0 outline-none",
+          floatingSurface,
+          "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+        ),
+        children
+      }
+    )
+  ] });
+}
+function ComboboxLoading() {
+  const messages = useNexubMessages();
+  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-busy": "true", className: "flex flex-col gap-2 px-2.5 py-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.loading }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-3/4", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-1/2", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-2/3", "aria-hidden": "true" })
+  ] });
+}
+export {
+  ComboboxLoading,
+  ComboboxPopover
+};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColumnDef, type RowData } from '@tanstack/react-table';
+import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
@@ -8,6 +8,7 @@ declare module '@tanstack/react-table' {
 }
 /** A DataTable column: TanStack's `ColumnDef`, with `meta.align` for numeric columns. */
 export type DataTableColumn<TData> = ColumnDef<TData, unknown>;
+export type DataTableDensity = 'comfortable' | 'compact';
 export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
     columns: DataTableColumn<TData>[];
     /** Names the table for assistive tech (and is shown below it unless `captionHidden`). */
@@ -17,8 +18,29 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     data: TData[];
     enableSorting?: boolean;
     enableRowSelection?: boolean;
+    /**
+     * With `enableRowSelection`: a checkbox column with select-page in its
+     * header, and "Select all N" across pages. On by default from 6.0.
+     */
+    selectionColumn?: boolean;
+    /** Controlled selection, keyed by row id (see `getRowId`). */
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Stable row ids for selection; defaults to the row index. */
+    getRowId?: (row: TData, index: number) => string;
+    /** A floating bar while rows are selected: render your actions for the selected rows. */
+    bulkActions?: (rows: TData[], clear: () => void) => React.ReactNode;
+    density?: DataTableDensity;
+    defaultDensity?: DataTableDensity;
+    onDensityChange?: (density: DataTableDensity) => void;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    /** A "View" menu above the table: density and which columns show. */
+    viewOptions?: boolean;
+    /** Content at the start of the row above the table (filters, a title). */
+    toolbar?: React.ReactNode;
     pagination?: {
         pageSize?: number;
     };
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
   useReactTable,
@@ -9,11 +9,16 @@ import {
   getPaginationRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
+import { ArrowUp, ArrowDown, ChevronsUpDown, SlidersHorizontal, X } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, pressable } from "../../utils/control.js";
-import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { floatingSurface } from "../../utils/surface.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+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";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -47,7 +52,7 @@ const TableRow = React.forwardRef(
     {
       ref,
       className: cn(
-        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
+        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)]",
         className
       ),
       ...props
@@ -79,11 +84,25 @@ const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "DataTable.TableCell";
+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({
   columns,
   data,
   enableSorting = false,
   enableRowSelection = false,
+  selectionColumn = false,
+  rowSelection: rowSelectionProp,
+  onRowSelectionChange,
+  getRowId,
+  bulkActions,
+  density: densityProp,
+  defaultDensity = "comfortable",
+  onDensityChange,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  viewOptions = false,
+  toolbar,
   pagination,
   caption,
   captionHidden = false,
@@ -93,26 +112,73 @@ function DataTable({
   ...props
 }) {
   const messages = useNexubMessages();
+  const { locale } = useLocale();
   const [sorting, setSorting] = React.useState([]);
-  const [rowSelection, setRowSelection] = React.useState({});
+  const [rowSelection = {}, setRowSelection] = useControllableState({
+    value: rowSelectionProp,
+    defaultValue: {},
+    onChange: onRowSelectionChange
+  });
+  const [density = "comfortable", setDensity] = useControllableState({
+    value: densityProp,
+    defaultValue: defaultDensity,
+    onChange: onDensityChange
+  });
+  const [columnVisibility = {}, setColumnVisibility] = useControllableState({
+    value: columnVisibilityProp,
+    defaultValue: {},
+    onChange: onColumnVisibilityChange
+  });
   const [paginationState, setPaginationState] = React.useState({
     pageIndex: 0,
     pageSize: pagination?.pageSize ?? 20
   });
+  const withSelectColumn = enableRowSelection && selectionColumn;
+  const allColumns = React.useMemo(
+    () => withSelectColumn ? [
+      {
+        id: "__select",
+        enableSorting: false,
+        enableHiding: false,
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": messages.selectAllOnPage,
+            checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
+            onCheckedChange: (v) => table2.toggleAllPageRowsSelected(v === true)
+          }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": messages.selectRow,
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onCheckedChange: (v) => row.toggleSelected(v === true)
+          }
+        )
+      },
+      ...columns
+    ] : columns,
+    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow]
+  );
   const tableState = React.useMemo(
     () => ({
       sorting: enableSorting ? sorting : void 0,
       rowSelection: enableRowSelection ? rowSelection : void 0,
-      pagination: pagination ? paginationState : void 0
+      pagination: pagination ? paginationState : void 0,
+      columnVisibility
     }),
-    [enableSorting, sorting, enableRowSelection, rowSelection, pagination, paginationState]
+    [enableSorting, sorting, enableRowSelection, rowSelection, pagination, paginationState, columnVisibility]
   );
   const table = useReactTable({
     data,
-    columns,
+    columns: allColumns,
     state: tableState,
+    getRowId,
     onSortingChange: enableSorting ? setSorting : void 0,
-    onRowSelectionChange: enableRowSelection ? setRowSelection : void 0,
+    onRowSelectionChange: enableRowSelection ? (u) => setRowSelection(apply(u, rowSelection)) : void 0,
+    onColumnVisibilityChange: (u) => setColumnVisibility(apply(u, columnVisibility)),
     onPaginationChange: pagination ? setPaginationState : void 0,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
@@ -121,7 +187,49 @@ function DataTable({
     enableRowSelection,
     manualPagination: false
   });
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ...props, children: [
+  const compact = density === "compact";
+  const selectedRows = enableRowSelection ? table.getSelectedRowModel().rows : [];
+  const totalRows = table.getCoreRowModel().rows.length;
+  const fmt = (n) => new Intl.NumberFormat(locale).format(n);
+  const multiSort = sorting.length > 1;
+  const offerAll = withSelectColumn && !!pagination && table.getIsAllPageRowsSelected() && totalRows > table.getRowModel().rows.length;
+  const clear = () => table.resetRowSelection(true);
+  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
+          ))
+        ] })
+      ] })
+    ] }),
+    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)) }),
+      /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: clear, children: messages.clearSelection })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: messages.selectedCount(fmt(selectedRows.length)) }),
+      /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: () => table.toggleAllRowsSelected(true), children: messages.selectAllRows(fmt(totalRows)) })
+    ] }) }),
     /* @__PURE__ */ jsxs(TableRoot, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [
       caption != null && /* @__PURE__ */ jsx(Table.Caption, { className: cn(captionHidden && "sr-only"), children: caption }),
       /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
@@ -129,7 +237,7 @@ function DataTable({
         return /* @__PURE__ */ jsx(
           TableHead,
           {
-            className: alignText[align],
+            className: cn(alignText[align], compact && "h-8", header.column.id === "__select" && "w-10"),
             "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
             children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
               "button",
@@ -142,6 +250,10 @@ function DataTable({
                 ),
                 children: [
                   flexRender(header.column.columnDef.header, header.getContext()),
+                  multiSort && header.column.getIsSorted() && /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums leading-none", children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: header.column.getSortIndex() + 1 }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.sortOrder(header.column.getSortIndex() + 1) })
+                  ] }),
                   header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
                 ]
               }
@@ -157,7 +269,7 @@ function DataTable({
           children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
             TableCell,
             {
-              className: alignText[cell.column.columnDef.meta?.align ?? "start"],
+              className: cn(alignText[cell.column.columnDef.meta?.align ?? "start"], compact && "py-1.5"),
               children: flexRender(cell.column.columnDef.cell, cell.getContext())
             },
             cell.id
@@ -167,7 +279,7 @@ function DataTable({
       )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
         TableCell,
         {
-          colSpan: columns.length,
+          colSpan: table.getVisibleLeafColumns().length,
           className: "h-24 text-center text-[var(--color-on-surface-muted)]",
           children: messages.noResults
         }
@@ -197,7 +309,27 @@ function DataTable({
           }
         )
       ] })
-    ] })
+    ] }),
+    bulkActions && selectedRows.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        "aria-label": messages.selectedCount(fmt(selectedRows.length)),
+        className: cn(
+          floatingSurface,
+          "nx-motion sticky bottom-4 z-10 mx-auto flex w-fit max-w-full flex-wrap items-center gap-3 px-4 py-2"
+        ),
+        "data-state": "open",
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "text-label-lg tabular-nums", children: messages.selectedCount(fmt(selectedRows.length)) }),
+          bulkActions(
+            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" }) })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    emptyText?: string;
+    loading?: boolean;
+    /** Controlled search text. */
+    inputValue?: string;
+    /** Called as the user types; options are then shown as given (no built-in filtering). */
+    onInputChange?: (text: string) => void;
+    /** Adds a "Create “text”" option when the text matches no option exactly. */
+    onCreate?: (text: string) => void;
+    /** Chips shown before the rest collapse into "+N more". Default 3. */
+    maxVisibleChips?: number;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Pick several options: chips in the field, a filterable list below.
+ * Backspace in an empty field removes the last chip.
+ */
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, emptyText, loading, inputValue, onInputChange, onCreate, maxVisibleChips, disabled, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: MultiSelectProps): React.JSX.Element;
+export declare namespace MultiSelect {
+    var displayName: string;
+}