@nexub/mcp 6.1.0 → 6.3.0

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

@@ -12,6 +12,8 @@ Feature-rich data table with sorting and row selection powered by TanStack Table
 | --- | --- | --- | --- |
 | `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. |
 | `data` (required) | `TData[]` |  | Array of row data objects to render. |
+| `getSubRows` | `(row, index) => TData[] \| undefined` |  | Nested rows (a tree table). The first column gets an expand toggle (`aria-expanded`) and indents each level; sorting sorts within each level. |
+| `expanded / defaultExpanded / onExpandedChange` | `ExpandedState` |  | Expanded rows by row id (see `getRowId`), or `true` for all. |
 | `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. |
@@ -242,6 +244,56 @@ export default function Example() {
 }
 ```
 
+## Example: Tree rows
+
+`getSubRows` nests rows: the first column gets an expand toggle and indents each level. With pages, a parent and its children stay on one page.
+
+```tsx
+'use client';
+
+import { DataTable, type DataTableColumn } from '@nexub/react';
+
+type Account = { name: string; owner: string; arr: number; children?: Account[] };
+
+const data: Account[] = [
+  {
+    name: 'Acme Group',
+    owner: 'Ada',
+    arr: 420000,
+    children: [
+      { name: 'Acme EU', owner: 'Grace', arr: 180000, children: [{ name: 'Acme Berlin', owner: 'Grace', arr: 60000 }] },
+      { name: 'Acme US', owner: 'Alan', arr: 240000 },
+    ],
+  },
+  { name: 'Globex', owner: 'Linus', arr: 95000 },
+];
+
+const columns: DataTableColumn<Account>[] = [
+  { accessorKey: 'name', header: 'Account' },
+  { accessorKey: 'owner', header: 'Owner' },
+  {
+    accessorKey: 'arr',
+    header: 'ARR',
+    meta: { align: 'end' },
+    cell: ({ getValue }) => new Intl.NumberFormat('en', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(getValue<number>()),
+  },
+];
+
+export default function Example() {
+  return (
+    <DataTable
+      caption="Accounts by region"
+      captionHidden
+      columns={columns}
+      data={data}
+      getSubRows={(row) => row.children}
+      getRowId={(row) => row.name}
+      defaultExpanded={{ 'Acme Group': true }}
+    />
+  );
+}
+```
+
 ## Accessibility
 
 - Roles: table (default), grid (with `grid`), columnheader with aria-sort when sortable

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

@@ -0,0 +1,43 @@
+# Date Time Picker
+
+A DatePicker and a TimePicker that edit one Date, with an optional time-zone label.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: beta
+- Import: `import { DateTimePicker } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/date-time-picker
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value / onChange` | `Date \| undefined` |  | Date and time in the reader’s local time. |
+| `defaultTime` | `string` | `'09:00'` | Time used when the date is picked first. |
+| `minuteStep` | `number` |  | Passed to the TimePicker. |
+| `minDate / maxDate` | `Date` |  | Limits the calendar. |
+| `timeZone` | `string` |  | IANA zone named next to the fields, e.g. "Time zone: GMT+8 (Asia/Singapore)". Label only. |
+| `aria-label` | `string` |  | Names the group; the parts read "Date" and "Time". |
+
+## Example: Meeting start
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { DateTimePicker } from '@nexub/react';
+
+export default function Example() {
+  const [starts, setStarts] = React.useState<Date | undefined>();
+  return (
+    <div className="flex w-full max-w-md flex-col gap-2">
+      <DateTimePicker aria-label="Meeting starts" value={starts} onChange={setStarts} minuteStep={15} timeZone="Asia/Singapore" />
+      <p className="text-body-sm text-[var(--color-on-surface-muted)]">{starts ? starts.toString() : 'Pick a date first; the time defaults to 09:00.'}</p>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- A labelled group holding the DatePicker button and the native time input.
+
+Related: [date-picker](date-picker.md), [time-picker](time-picker.md)

package/dist/skill/references/components/event-calendar.md

@@ -0,0 +1,61 @@
+# Event Calendar
+
+A month or week grid of events. Display only: your app owns the events and what a click does.
+
+- Package: `@nexub/react` · Category: Data Display · Status: beta
+- Import: `import { EventCalendar } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/event-calendar
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `events` (required) | `CalendarEvent[]` |  | `{ id, title, start, end?, allDay?, tone? }`. Events spanning days show on each day; `tone` is primary, success, warning, error or info. |
+| `date / defaultDate / onDateChange` | `Date` |  | Any day in the shown month or week; Today and the arrows change it. |
+| `view / defaultView / onViewChange` | `'month' \| 'week'` | `'month'` | Week shows every event; month shows `maxEventsPerDay` then "N more". |
+| `onEventClick` | `(event) => void` |  | Makes events buttons. |
+| `onDayClick` | `(date) => void` |  | Makes day numbers and "N more" buttons, for example to open the day. |
+| `maxEventsPerDay` | `number` | `3` | Month view only. |
+| `weekStartsOn` | `0–6` |  | Defaults to the locale’s first day (Monday for en-GB, Sunday for en-US). |
+
+## Example: Team calendar
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { EventCalendar, type CalendarEvent } from '@nexub/react';
+
+const today = new Date();
+const on = (day: number, hour?: number) => new Date(today.getFullYear(), today.getMonth(), day, hour ?? 0);
+
+const events: CalendarEvent[] = [
+  { id: '1', title: 'Design review', start: on(3, 10) },
+  { id: '2', title: 'Offsite', start: on(11), end: on(12), allDay: true, tone: 'success' },
+  { id: '3', title: 'Standup', start: on(16, 9) },
+  { id: '4', title: 'Launch', start: on(16, 14), tone: 'warning' },
+  { id: '5', title: 'Retro', start: on(16, 16) },
+  { id: '6', title: 'Incident review', start: on(16, 17), tone: 'error' },
+];
+
+export default function Example() {
+  const [picked, setPicked] = React.useState('');
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <EventCalendar
+        events={events}
+        onEventClick={(e) => setPicked(e.title)}
+        onDayClick={(d) => setPicked(d.toDateString())}
+      />
+      <p aria-live="polite" className="text-body-sm text-[var(--color-on-surface-muted)]">{picked && `Opened: ${picked}`}</p>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- A table with weekday column headers; today has `aria-current="date"` and each day reads its full date.
+- The title is a polite live region, so Today and the arrows announce the new month or week.
+
+Related: [date-picker](date-picker.md), [date-time-picker](date-time-picker.md)

package/dist/skill/references/components/time-picker.md

@@ -0,0 +1,40 @@
+# Time Picker
+
+A time field on the native time input: 12 or 24 hours from the reader’s locale, and the platform picker on phones.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: beta
+- Import: `import { TimePicker } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/time-picker
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value / defaultValue / onValueChange` | `string` |  | 24-hour `"HH:mm"`, whatever the display format. |
+| `minuteStep` | `number` | `1` | Minutes per step for the arrow keys and the picker. |
+| `min / max / required / name` | `string \| boolean` |  | Native attributes; Form validates them. |
+
+## Example: Reminder time
+
+```tsx
+import { FormField, TimePicker } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <FormField.Root name="reminder" className="w-40">
+      <FormField.Label>Remind me at</FormField.Label>
+      <FormField.Control>
+        <TimePicker defaultValue="09:00" minuteStep={15} />
+      </FormField.Control>
+    </FormField.Root>
+  );
+}
+```
+
+## Accessibility
+
+- `ArrowUp / ArrowDown`: Changes the focused segment (hour, minute, AM/PM).
+- `ArrowLeft / ArrowRight`: Moves between segments.
+- Native `<input type="time">`: screen readers announce each segment, and phones open their own time picker.
+
+Related: [date-time-picker](date-time-picker.md), [date-picker](date-picker.md)

package/dist/skill/references/components/tree-view.md

@@ -0,0 +1,106 @@
+# Tree View
+
+A keyboard-friendly hierarchy (ARIA tree) with lazy children and tri-state checkboxes.
+
+- Package: `@nexub/react` · Category: Navigation · Status: beta
+- Import: `import { TreeView } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/tree-view
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `nodes` (required) | `TreeNode[]` |  | `{ id, label, textValue?, icon?, children?, hasChildren?, disabled? }`. |
+| `aria-label / aria-labelledby` (required) | `string` |  | Names the tree. |
+| `expanded / defaultExpanded / onExpandedChange` | `string[]` |  | Open node ids. |
+| `selected / defaultSelected / onSelectedChange` | `string \| null` |  | Single selection, set by click, Enter or Space. |
+| `checkable` | `boolean` |  | Checkboxes instead of selection. A parent is checked when all its children are and mixed when some are. |
+| `checked / defaultChecked / onCheckedChange` | `string[]` |  | Every checked id, parents included. |
+| `onLoadChildren` | `(node) => Promise` |  | Called when a `hasChildren` node without `children` opens. Load them and pass the new `nodes`; the item is `aria-busy` meanwhile. |
+
+## Example: Lazy loading and selection
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { TreeView, type TreeNode } from '@nexub/react';
+
+export default function Example() {
+  const [nodes, setNodes] = React.useState<TreeNode[]>([
+    {
+      id: 'eng',
+      label: 'Engineering',
+      children: [
+        { id: 'web', label: 'Web', children: [{ id: 'ada', label: 'Ada Lovelace' }, { id: 'alan', label: 'Alan Turing' }] },
+        { id: 'mobile', label: 'Mobile', hasChildren: true },
+      ],
+    },
+    { id: 'design', label: 'Design', children: [{ id: 'grace', label: 'Grace Hopper' }] },
+  ]);
+  const [selected, setSelected] = React.useState<string | null>('ada');
+
+  // Pretend server call: fills Mobile's children the first time it opens.
+  const load = async (node: TreeNode) => {
+    await new Promise((r) => setTimeout(r, 700));
+    const fill = (list: TreeNode[]): TreeNode[] =>
+      list.map((n) =>
+        n.id === node.id
+          ? { ...n, children: [{ id: 'linus', label: 'Linus Torvalds' }, { id: 'margaret', label: 'Margaret Hamilton' }] }
+          : { ...n, children: n.children && fill(n.children) },
+      );
+    setNodes(fill);
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <TreeView aria-label="Teams" nodes={nodes} defaultExpanded={['eng', 'web']} selected={selected} onSelectedChange={setSelected} onLoadChildren={load} />
+      <p className="text-body-sm text-[var(--color-on-surface-muted)]">Selected: {selected ?? 'none'}</p>
+    </div>
+  );
+}
+```
+
+## Example: Checkboxes
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { TreeView, type TreeNode } from '@nexub/react';
+
+const nodes: TreeNode[] = [
+  {
+    id: 'reports',
+    label: 'Reports',
+    children: [
+      { id: 'revenue', label: 'Revenue' },
+      { id: 'churn', label: 'Churn' },
+    ],
+  },
+  { id: 'settings', label: 'Settings', children: [{ id: 'billing', label: 'Billing' }, { id: 'members', label: 'Members' }] },
+];
+
+export default function Example() {
+  const [checked, setChecked] = React.useState<string[]>(['revenue']);
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <TreeView aria-label="Permissions" nodes={nodes} checkable defaultExpanded={['reports', 'settings']} checked={checked} onCheckedChange={setChecked} />
+      <p className="text-body-sm text-[var(--color-on-surface-muted)]">Granted: {checked.join(', ') || 'nothing'}</p>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Roles: tree, treeitem with aria-level, aria-setsize, aria-posinset, aria-expanded, group
+- `ArrowDown / ArrowUp`: Next or previous visible item.
+- `ArrowRight`: Opens a closed item, or moves to its first child. Mirrored in RTL.
+- `ArrowLeft`: Closes an open item, or moves to its parent. Mirrored in RTL.
+- `Home / End`: First or last visible item.
+- `Enter / Space`: Selects the item, or toggles its checkbox.
+- `Type a letter`: Moves to the next item starting with the typed text.
+- The tree is one tab stop (roving tabindex); it returns to the last focused or the selected item.
+
+Related: [data-table](data-table.md), [sidebar](sidebar.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v6.1.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v6.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -36,6 +36,7 @@ Never use a component marked deprecated.
 - [Donut Chart](components/donut-chart.md) `@nexub/react`: Parts of a whole, with an optional total in the hole. Keep it to six slices or fewer.
 - [Empty State](components/empty-state.md) `@nexub/react`: Placeholder UI shown when a list or page has no content.
 - [Error State](components/error-state.md) `@nexub/react`: Full-page or section error view with retry action.
+- [Event Calendar](components/event-calendar.md) `@nexub/react`: A month or week grid of events. Display only: your app owns the events and what a click does.
 - [Funnel](components/funnel.md) `@nexub/react`: Drop-off through ordered steps, with conversion from the first step.
 - [Gauge](components/gauge.md) `@nexub/react`: Progress toward a target on a 270° arc.
 - [Heatmap](components/heatmap.md) `@nexub/react`: Intensity over a grid, such as activity by weekday and week, in seven sequential steps.
@@ -67,6 +68,7 @@ Never use a component marked deprecated.
 
 - [Date Picker](components/date-picker.md) `@nexub/react`: Calendar date picker with text input.
 - [Date Range Picker](components/date-range-picker.md) `@nexub/react`: Dual-calendar date range selector.
+- [Date Time Picker](components/date-time-picker.md) `@nexub/react`: A DatePicker and a TimePicker that edit one Date, with an optional time-zone label.
 - [Fieldset](components/fieldset.md) `@nexub/react`: Groups related fields under a legend; disabling it disables everything inside.
 - [Form](components/form.md) `@nexub/react`: Validates on submit with the browser’s own checks plus yours, shows each message on its FormField and focuses the first invalid field.
 - [Form Field](components/form-field.md) `@nexub/react`: Wraps Label, Input, HelperText and FormError into a single accessible group.
@@ -79,6 +81,7 @@ Never use a component marked deprecated.
 - [Password Input](components/password-input.md) `@nexub/react`: A password field with a built-in toggle to reveal or hide the entered value.
 - [Search Input](components/search-input.md) `@nexub/react`: A text input pre-wired with a search icon and a clear button for filtering content.
 - [Textarea](components/textarea.md) `@nexub/react`: A multi-line text input with configurable resize behaviour, size, and validation states.
+- [Time Picker](components/time-picker.md) `@nexub/react`: A time field on the native time input: 12 or 24 hours from the reader’s locale, and the platform picker on phones.
 
 ## Components — Form Controls
 
@@ -154,6 +157,7 @@ Never use a component marked deprecated.
 - [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.
+- [Tree View](components/tree-view.md) `@nexub/react`: A keyboard-friendly hierarchy (ARIA tree) with lazy children and tri-state checkboxes.
 
 ## Components — Overlays
 

package/dist/skill/references/tokens.md

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