@nexub/mcp 5.4.0 → 5.6.0

package/dist/skill/references/components/alert-dialog.md

@@ -19,6 +19,7 @@ Confirmation dialog that requires an explicit user action before proceeding.
 | `AlertDialog.Description` | `compound` |  | Supporting description text for the dialog. |
 | `AlertDialog.Action` | `compound` |  | Confirms the destructive or affirmative action and closes the dialog. |
 | `AlertDialog.Cancel` | `compound` |  | Cancels the action and closes the dialog. |
+| `AlertDialog.Confirm text` | `string` |  | Type-to-confirm (5.6): the Action stays disabled until this text is typed. For irreversible actions on named resources. |
 
 ## Example: Default
 
@@ -50,3 +51,34 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Type to confirm
+
+Deleting a workspace asks for its name first.
+
+```tsx
+'use client';
+
+import { AlertDialog, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <Button variant="destructive">Delete workspace</Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Delete acme-prod?</AlertDialog.Title>
+          <AlertDialog.Description>All projects, members and billing history go with it. This can’t be undone.</AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Confirm text="acme-prod" />
+        <AlertDialog.Footer>
+          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+          <AlertDialog.Action>Delete workspace</AlertDialog.Action>
+        </AlertDialog.Footer>
+      </AlertDialog.Content>
+    </AlertDialog.Root>
+  );
+}
+```

package/dist/skill/references/components/date-range-picker.md

@@ -17,10 +17,10 @@ Dual-calendar date range selector.
 | `disabled` | `boolean` | `false` | Disables the trigger input and calendar popover. |
 | `minDate` | `Date` |  | Earliest selectable date. Dates before this are greyed out. |
 | `maxDate` | `Date` |  | Latest selectable date. Dates after this are greyed out. |
-| `numberOfMonths` | `number` | `2` | Number of months to display in the calendar popover. |
 | `aria-label` | `string` |  | Field name for screen readers; the selected value is appended. |
 | `id` | `string` |  | Id for the trigger button, e.g. to pair with a <label htmlFor>. |
-| `error` | `string` |  | Error message displayed below the input. |
+| `presets` | `boolean \| { label: string; range: (today: Date) => DateRange }[]` |  | `true` adds Today, Last 7 days, Last 30 days, Month to date and Last month beside the calendar; or pass your own (5.5). |
+| `timeZone` | `string` |  | IANA zone the dates mean, e.g. `Europe/London`. Shown under the calendar; presets count "today" there (5.5). `todayIn(zone)` is exported. |
 
 ## Example: Default
 
@@ -52,3 +52,23 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Presets and time zone
+
+Quick ranges counted in the chosen time zone, which is labelled under the calendar.
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { DateRangePicker, type DateRange } from '@nexub/react';
+
+export default function Example() {
+  const [range, setRange] = React.useState<DateRange | undefined>();
+  return (
+    <div className="w-[300px]">
+      <DateRangePicker aria-label="Report period" value={range} onChange={setRange} presets timeZone="Europe/London" />
+    </div>
+  );
+}
+```

package/dist/skill/references/components/empty-state.md

@@ -15,6 +15,8 @@ Placeholder UI shown when a list or page has no content.
 | `EmptyState.Title children` (required) | `React.ReactNode` |  | Primary heading text for the empty state. |
 | `EmptyState.Description children` | `React.ReactNode` |  | Supporting text providing more context or guidance. |
 | `EmptyState.Actions children` | `React.ReactNode` |  | One or more action buttons rendered below the description. |
+| `EmptyStatePreset kind` (required) | `'noData' \| 'noResults' \| 'noAccess' \| 'serverError' \| 'offline'` |  | Ready-made icon, title and description (5.6). serverError and offline are announced as alerts. |
+| `EmptyStatePreset title / description / actions` | `ReactNode` |  | Override the localised text; add buttons such as Retry. |
 
 ## Example: Default
 
@@ -65,3 +67,20 @@ export default function Example() {
   );
 }
 ```
+
+## Example: Presets
+
+`EmptyStatePreset` for no data, no results, no access (403), server error (500) and offline.
+
+```tsx
+import { Button, EmptyStatePreset } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="grid w-full gap-4 sm:grid-cols-2">
+      <EmptyStatePreset kind="noResults" actions={<Button variant="outline" size="sm">Clear filters</Button>} />
+      <EmptyStatePreset kind="serverError" actions={<Button size="sm">Retry</Button>} />
+    </div>
+  );
+}
+```

package/dist/skill/references/components/filter-bar.md

@@ -15,6 +15,8 @@ Search + filter toolbar pattern for data-heavy list or table views.
 | `onSearch` | `(value: string) => void` |  | Callback when search value changes. |
 | `searchLabel` | `string` | `'Search'` | Accessible name of the search field (5.1). Defaults to the localised `search` message. |
 | `filters` | `React.ReactNode` |  | Filter controls rendered to the right of search. |
+| `activeCount` | `number` | `0` | Applied filters; above 0 shows "N filters" (5.5). `countFilters(group)` counts a FilterBuilder query. |
+| `onClearAll` | `() => void` |  | Shows a Clear all button next to the count (5.5). |
 | `actions` | `React.ReactNode` |  | Action buttons (e.g. "Export") rendered on the far right. |
 
 ## Example: Default

package/dist/skill/references/components/filter-builder.md

@@ -0,0 +1,68 @@
+# Filter Builder
+
+Build AND/OR filter queries with nested groups. The output is plain JSON your app runs.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { FilterBuilder } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/filter-builder
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `fields` (required) | `{ id; label; type: "text" \| "number" \| "select" \| "date"; options? }[]` |  | What can be filtered. The type picks the operators and the value input. |
+| `value / defaultValue` | `FilterGroup` |  | `{ id, combinator: "and" \| "or", rules: (FilterRule \| FilterGroup)[] }`; a rule is `{ id, field, operator, value: string }`. |
+| `onValueChange` | `(value: FilterGroup) => void` |  | Called with the whole query on every change. |
+| `maxDepth` | `number` | `1` | Levels of nested groups "Add group" may create; 0 hides it. |
+
+## Example: Deals filter
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { FilterBuilder, type FilterField, type FilterGroup } from '@nexub/react';
+
+const fields: FilterField[] = [
+  { id: 'name', label: 'Deal name', type: 'text' },
+  { id: 'amount', label: 'Amount', type: 'number' },
+  {
+    id: 'stage',
+    label: 'Stage',
+    type: 'select',
+    options: [
+      { value: 'lead', label: 'Lead' },
+      { value: 'proposal', label: 'Proposal' },
+      { value: 'won', label: 'Won' },
+    ],
+  },
+  { id: 'close', label: 'Close date', type: 'date' },
+];
+
+export default function Example() {
+  const [query, setQuery] = React.useState<FilterGroup>({
+    id: 'root',
+    combinator: 'and',
+    rules: [
+      { id: 'r1', field: 'stage', operator: 'equals', value: 'proposal' },
+      { id: 'r2', field: 'amount', operator: 'greaterThan', value: '10000' },
+    ],
+  });
+  return (
+    <div className="flex w-full max-w-[640px] flex-col gap-4">
+      <FilterBuilder fields={fields} value={query} onValueChange={setQuery} />
+      <pre className="max-h-40 overflow-auto rounded-shape-container bg-[var(--color-surface-container-low)] p-3 text-label-sm">
+        {JSON.stringify(query, null, 2)}
+      </pre>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Roles: Each group is a `group` named "Filters, match all/any".
+- Field, condition and value controls are labelled; remove buttons say what they remove.
+- Helpers: `emptyFilter()`, `countFilters(group)`, `isFilterGroup(rule)`, `filterOperators`.
+
+Related: [filter-bar](filter-bar.md), [saved-views](saved-views.md), [data-table](data-table.md)

package/dist/skill/references/components/otp-input.md

@@ -0,0 +1,49 @@
+# OTP Input
+
+One box per digit for verification codes, with paste and one-time-code autofill.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { OtpInput } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/otp-input
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `length` | `number` | `6` | Number of boxes. |
+| `value / defaultValue / onValueChange` | `string` |  | The code so far, without gaps. |
+| `onComplete` | `(code: string) => void` |  | Called when every box is filled; submit or verify here. |
+| `mode` | `'numeric' \| 'alphanumeric'` | `'numeric'` | Numeric shows the number keypad on phones. |
+| `invalid / disabled` | `boolean` |  | Error styling (pair with a FormError) and the disabled state. |
+| `name` | `string` |  | Submits the code with a form. |
+| `aria-label` | `string` | `'Verification code'` | Group name; each box reads "Digit N of M". |
+
+## Example: Verification code
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { OTPInput } from '@nexub/react';
+
+export default function Example() {
+  const [status, setStatus] = React.useState('');
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <OTPInput onComplete={(code) => setStatus(code === '123456' ? 'Verified' : 'That code didn’t work')} onValueChange={() => setStatus('')} />
+      <p aria-live="polite" className="text-body-sm text-[var(--color-on-surface-muted)]">
+        {status || 'Try 123456'}
+      </p>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- `Type`: Fills the box and moves to the next.
+- `Backspace`: Clears the box, or the previous one when empty.
+- `ArrowLeft / ArrowRight`: Moves between boxes.
+- The first box has `autocomplete="one-time-code"`, so the code from an SMS fills every box.
+
+Related: [input](input.md), [password-input](password-input.md)

package/dist/skill/references/components/saved-views.md

@@ -0,0 +1,53 @@
+# Saved Views
+
+A menu to switch, save, update and delete saved filter views. Your app stores them.
+
+- Package: `@nexub/react` · Category: Navigation · Status: beta
+- Import: `import { SavedViews } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/saved-views
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `views` (required) | `{ id: string; name: string }[]` |  | The saved views. |
+| `activeId` | `string` |  | The view in use; its name shows on the button. |
+| `onSelect` (required) | `(id: string) => void` |  | Switch to a view: restore its filters, sort and columns. |
+| `onSave` | `(name: string) => void` |  | Adds "Save as new view…", which asks for a name. |
+| `onUpdate / onDelete` | `(id: string) => void` |  | Add "Update" and "Delete" for the active view. |
+
+## Example: Views for a deals table
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { SavedViews, type SavedView } from '@nexub/react';
+
+export default function Example() {
+  const [views, setViews] = React.useState<SavedView[]>([
+    { id: 'mine', name: 'My open deals' },
+    { id: 'big', name: 'Over $10k' },
+  ]);
+  const [active, setActive] = React.useState('mine');
+  return (
+    <SavedViews
+      views={views}
+      activeId={active}
+      onSelect={setActive}
+      onSave={(name) => {
+        const id = crypto.randomUUID();
+        setViews((v) => [...v, { id, name }]);
+        setActive(id);
+      }}
+      onUpdate={() => {}}
+      onDelete={(id) => {
+        setViews((v) => v.filter((x) => x.id !== id));
+        setActive('');
+      }}
+    />
+  );
+}
+```
+
+Related: [filter-builder](filter-builder.md), [filter-bar](filter-bar.md), [data-table](data-table.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v5.4.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v5.6.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -83,7 +83,9 @@ 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.
+- [Filter Builder](components/filter-builder.md) `@nexub/react`: Build AND/OR filter queries with nested groups. The output is plain JSON your app runs.
 - [Multi Select](components/multi-select.md) `@nexub/react`: Pick several options as chips, with search, "+N more" and an optional create option.
+- [OTP Input](components/otp-input.md) `@nexub/react`: One box per digit for verification codes, with paste and one-time-code autofill.
 - [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.
@@ -147,6 +149,7 @@ Never use a component marked deprecated.
 - [Breadcrumb](components/breadcrumb.md) `@nexub/react`: Hierarchical navigation trail showing page location.
 - [Navigation Rail](components/navigation-rail.md) `@nexub/react`: Navigation for medium-width windows: icons over labels, with an active pill behind the icon.
 - [Pagination](components/pagination.md) `@nexub/react`: Page navigation control with prev/next and page number buttons.
+- [Saved Views](components/saved-views.md) `@nexub/react`: A menu to switch, save, update and delete saved filter views. Your app stores them.
 - [Tabs](components/tabs.md) `@nexub/react`: Layered content panels switched by tab triggers. Built on Radix UI Tabs.
 
 ## Components — Overlays
@@ -225,5 +228,5 @@ Never use a component marked deprecated.
 
 These exist; read their TypeScript props in `node_modules/<package>/dist/index.d.ts`.
 
-- `@nexub/react`: AgentKit, AppShell, AspectRatio, Chart, CheckList, Code, CommandPalette, Container, ContextMenu, CountryBadge, DataTableVirtual, DropdownMenu, FileUpload, Flag, FormError, KeyboardShortcut, Logo, Menubar, Motion, NavigationMenu, NexubProvider, PageHeader, Section, Sidebar, ThemeProvider, Toolbar, TopNav, VisuallyHidden
+- `@nexub/react`: AgentKit, AppShell, AspectRatio, Chart, CheckList, Code, CommandPalette, Container, ContextMenu, CountryBadge, DataTableVirtual, DropdownMenu, FileUpload, Flag, FormError, KeyboardShortcut, Logo, Menubar, Motion, NavigationMenu, NexubProvider, OTPInput, PageHeader, Section, Sidebar, ThemeProvider, Toolbar, TopNav, VisuallyHidden
 - `@nexub/patterns`: ActivityPage, AppHeader, AppLauncher, ChatPage, CheckoutPage, DashboardPage, PageFrame, PaywallPage, SettingsLayout, SettingsPage, SignInPage, TransactionDetailPage

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v5.4.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v5.6.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.4.0",
+  "version": "5.6.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",