@nexub/mcp 5.1.0 → 5.3.0

package/dist/skill/references/components/autocomplete.md

@@ -15,9 +15,12 @@ Type-to-search input with matching options dropdown.
 | `onValueChange` | `(value: string) => void` |  | Callback fired when the selected value changes. |
 | `placeholder` | `string` |  | Placeholder text shown in the input when empty. |
 | `emptyText` | `string` |  | Text shown when no options match the current search query. |
-| `loading` | `boolean` |  | Shows a loading indicator while options are being fetched. |
+| `loading` | `boolean` |  | Skeleton rows while options are being fetched (5.2); "Loading" is announced. |
 | `inputValue` | `string` |  | Controlled input text (5.1). |
 | `onInputChange` | `(text: string) => void` |  | Called as the user types, so you can fetch options (5.1). When set, options are shown as given, without built-in filtering. |
+| `mode` | `'inline' \| 'popover'` | `'inline'` | Popover (5.2): a field whose list opens below it while typing. Inline keeps the list always visible; it stays the default until 6.0. |
+| `onCreate` | `(text: string) => void` |  | Adds a "Create “text”" option when the text matches no option (5.2). |
+| `aria-label` | `string` |  | Accessible name of the field when it has no visible label. |
 
 ## Example: Default
 
@@ -75,3 +78,44 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Popover, fetch as you type
+
+`mode="popover"` with `onInputChange`: the app filters, the list shows skeleton rows while loading.
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Autocomplete } from '@nexub/react';
+
+const all = ['Amsterdam', 'Berlin', 'Lisbon', 'London', 'Madrid', 'Paris', 'Singapore', 'Tokyo'];
+
+// Fetch-as-you-type: onInputChange turns built-in filtering off.
+export default function Example() {
+  const [query, setQuery] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [options, setOptions] = React.useState(all.map((c) => ({ value: c, label: c })));
+  React.useEffect(() => {
+    setLoading(true);
+    const t = setTimeout(() => {
+      const q = query.toLowerCase();
+      setOptions(all.filter((c) => c.toLowerCase().includes(q)).map((c) => ({ value: c, label: c })));
+      setLoading(false);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [query]);
+  return (
+    <div className="w-[280px]">
+      <Autocomplete
+        mode="popover"
+        aria-label="City"
+        placeholder="Search cities…"
+        options={options}
+        loading={loading}
+        onInputChange={setQuery}
+      />
+    </div>
+  );
+}
+```

package/dist/skill/references/components/chip.md

@@ -12,6 +12,7 @@ Compact label chip, optionally dismissible.
 | --- | --- | --- | --- |
 | `variant` | `'filled' \| 'outline'` | `'filled'` | Visual style of the chip. |
 | `onRemove` | `() => void` |  | When provided, renders a dismiss button that calls this handler. |
+| `removeLabel` | `string` | `'Remove'` | Accessible name of the dismiss button (5.2), e.g. "Remove Bug". Use it when several chips sit together. |
 | `size` | `'sm' \| 'md'` |  | Controls chip size. |
 
 ## Example: Default

package/dist/skill/references/components/data-table.md

@@ -11,15 +11,19 @@ Feature-rich data table with sorting and row selection powered by TanStack Table
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `columns` (required) | `DataTableColumn<TData>[]` |  | TanStack Table column definitions (`DataTableColumn` is exported from @nexub/react). Set `meta: { align: 'end' }` for numeric columns; headers, sort buttons and cells follow it. |
-| `caption` | `ReactNode` |  | Names the table for assistive tech (and its scroll region). Shown below the table; add `captionHidden` to keep it screen-reader only. |
 | `data` (required) | `TData[]` |  | Array of row data objects to render. |
-| `enableSorting` | `boolean` | `false` | Enables click-to-sort on column headers. |
-| `enableRowSelection` | `boolean` | `false` | Adds a checkbox column for row selection. |
-| `pagination.pageSize` | `number` | `10` | Number of rows per page when pagination is active. |
-| `pagination.pageIndex` | `number` | `0` | Zero-based index of the currently visible page. |
-| `onRowSelectionChange` | `(selectedRows: TData[]) => void` |  | Callback invoked when the row selection state changes. |
-| `loading` | `boolean` | `false` | Shows a skeleton loading state over the table body. |
-| `emptyState` | `React.ReactNode` |  | Custom content rendered when the data array is empty. |
+| `caption` | `ReactNode` |  | Names the table for assistive tech (and its scroll region). Shown below the table; add `captionHidden` to keep it screen-reader only. |
+| `enableSorting` | `boolean` | `false` | Click a header to sort; Shift+click adds more columns, numbered 1, 2… (5.3). |
+| `enableRowSelection` | `boolean` | `false` | Turns on row selection state. |
+| `selectionColumn` | `boolean` | `false` | With `enableRowSelection` (5.3): a checkbox column, select-page in its header, and "Select all N" across pages. On by default from 6.0. |
+| `rowSelection / onRowSelectionChange` | `Record<string, boolean>` |  | Controlled selection keyed by row id (5.3). |
+| `getRowId` | `(row: TData, index: number) => string` |  | Stable row ids for selection; defaults to the row index (5.3). |
+| `bulkActions` | `(rows: TData[], clear: () => void) => ReactNode` |  | A floating bar while rows are selected, with the count, your actions and a clear button (5.3). |
+| `density / defaultDensity / onDensityChange` | `'comfortable' \| 'compact'` | `'comfortable'` | Row height (5.3). |
+| `columnVisibility / onColumnVisibilityChange` | `Record<string, boolean>` |  | Which columns show, keyed by column id (5.3). |
+| `viewOptions` | `boolean` | `false` | A "View" menu above the table for density and column visibility (5.3). |
+| `toolbar` | `ReactNode` |  | Content at the start of the row above the table, e.g. filters (5.3). |
+| `pagination.pageSize` | `number` | `20` | Rows per page; pagination is on when `pagination` is set. |
 
 ## Example: Default
 
@@ -72,3 +76,67 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Selection, bulk actions and view menu
+
+Select rows with the checkbox column; the bar at the bottom acts on them. The View menu switches density and hides columns.
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Button, DataTable, type DataTableColumn } from '@nexub/react';
+
+interface Invoice {
+  id: string;
+  customer: string;
+  status: string;
+  amount: number;
+}
+
+const invoices: Invoice[] = [
+  { id: 'INV-2041', customer: 'Acme', status: 'Overdue', amount: 1200 },
+  { id: 'INV-2042', customer: 'Globex', status: 'Paid', amount: 860 },
+  { id: 'INV-2043', customer: 'Initech', status: 'Draft', amount: 430 },
+  { id: 'INV-2044', customer: 'Umbrella', status: 'Overdue', amount: 2150 },
+  { id: 'INV-2045', customer: 'Hooli', status: 'Paid', amount: 990 },
+];
+
+const columns: DataTableColumn<Invoice>[] = [
+  { accessorKey: 'id', header: 'Invoice' },
+  { accessorKey: 'customer', header: 'Customer' },
+  { accessorKey: 'status', header: 'Status' },
+  { accessorKey: 'amount', header: 'Amount', meta: { align: 'end' } },
+];
+
+export default function Example() {
+  const [selection, setSelection] = React.useState<Record<string, boolean>>({ 'INV-2041': true, 'INV-2044': true });
+  return (
+    <div className="w-full max-w-[640px]">
+      <DataTable
+        caption="Invoices"
+        captionHidden
+        columns={columns}
+        data={invoices}
+        getRowId={(r) => r.id}
+        enableSorting
+        enableRowSelection
+        selectionColumn
+        rowSelection={selection}
+        onRowSelectionChange={setSelection}
+        viewOptions
+        bulkActions={(rows, clear) => (
+          <>
+            <Button size="sm" variant="outline" onClick={clear}>
+              Send reminders ({rows.length})
+            </Button>
+            <Button size="sm" variant="destructive" onClick={clear}>
+              Void
+            </Button>
+          </>
+        )}
+      />
+    </div>
+  );
+}
+```

package/dist/skill/references/components/multi-select.md

@@ -0,0 +1,70 @@
+# Multi Select
+
+Pick several options as chips, with search, "+N more" and an optional create option.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { MultiSelect } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/multi-select
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `options` (required) | `{ value: string; label: string }[]` |  | The options to pick from. |
+| `value / defaultValue` | `string[]` |  | Selected values, controlled or not. |
+| `onValueChange` | `(value: string[]) => void` |  | Called with the new selection. |
+| `maxVisibleChips` | `number` | `3` | Chips shown before the rest collapse into "+N more". |
+| `onInputChange` | `(text: string) => void` |  | Called as the user types. When set, options are shown as given, so you can fetch them. |
+| `onCreate` | `(text: string) => void` |  | Adds a "Create “text”" option when the text matches no option. |
+| `loading` | `boolean` |  | Skeleton rows instead of options; "Loading" is announced. |
+| `aria-label / aria-labelledby` | `string` |  | Name the field: there is no visible label inside it. |
+
+## Example: Labels with create
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { MultiSelect } from '@nexub/react';
+
+const labels = [
+  { value: 'bug', label: 'Bug' },
+  { value: 'design', label: 'Design' },
+  { value: 'docs', label: 'Docs' },
+  { value: 'perf', label: 'Performance' },
+  { value: 'a11y', label: 'Accessibility' },
+  { value: 'security', label: 'Security' },
+];
+
+export default function Example() {
+  const [options, setOptions] = React.useState(labels);
+  const [value, setValue] = React.useState(['bug', 'a11y']);
+  return (
+    <div className="w-[320px]">
+      <MultiSelect
+        aria-label="Labels"
+        placeholder="Add labels…"
+        options={options}
+        value={value}
+        onValueChange={setValue}
+        onCreate={(text) => {
+          const v = text.toLowerCase();
+          setOptions((o) => [...o, { value: v, label: text }]);
+          setValue((s) => [...s, v]);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- `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.
+- Options carry `aria-checked`; each chip has a "Remove <label>" button.
+
+Related: [autocomplete](autocomplete.md), [chip](chip.md), [select](select.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v5.1.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v5.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -83,6 +83,7 @@ Never use a component marked deprecated.
 - [Checkbox](components/checkbox.md) `@nexub/react`: Binary checkbox input built on Radix UI.
 - [Checkbox Card](components/checkbox-card.md) `@nexub/react`: A checkbox drawn as a whole card: title, description and optional icon. Pick any number.
 - [Combobox](components/combobox.md) `@nexub/react`: Command-palette style searchable dropdown built on cmdk.
+- [Multi Select](components/multi-select.md) `@nexub/react`: Pick several options as chips, with search, "+N more" and an optional create option.
 - [Radio Card](components/radio-card.md) `@nexub/react`: A radio group where each option is a whole card: title, description and optional icon, one choice.
 - [Radio Group](components/radio-group.md) `@nexub/react`: Group of mutually exclusive radio inputs.
 - [Select](components/select.md) `@nexub/react`: Accessible dropdown select built on Radix UI. Supports groups and search.

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v5.1.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v5.3.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",