@nexub/mcp 4.5.0 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# Chart Toggle
|
|
2
|
+
|
|
3
|
+
A legend whose entries switch series on and off, wrapped around any chart.
|
|
4
|
+
|
|
5
|
+
- Package: `@nexub/react` · Category: Data Display · Status: beta
|
|
6
|
+
- Import: `import { ChartToggle } from '@nexub/react';`
|
|
7
|
+
- Docs: https://nexub-ds-docs.pages.dev/components/chart-toggle
|
|
8
|
+
|
|
9
|
+
## Props
|
|
10
|
+
|
|
11
|
+
| Prop | Type | Default | Description |
|
|
12
|
+
| --- | --- | --- | --- |
|
|
13
|
+
| `series` (required) | `ChartSeries[]` | | The same series the chart takes. |
|
|
14
|
+
| `children` (required) | `(visible: ChartSeries[]) => ReactNode` | | Renders the chart with the series that are on. Colours stay stable. |
|
|
15
|
+
| `label` | `string` | `'Series'` | Accessible name for the group of toggles. |
|
|
16
|
+
|
|
17
|
+
## Example: Toggle series
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
'use client';
|
|
21
|
+
|
|
22
|
+
import { ChartToggle, LineChart } from '@nexub/react';
|
|
23
|
+
|
|
24
|
+
const data = [
|
|
25
|
+
{ m: 'May', web: 120, ios: 80, android: 60 },
|
|
26
|
+
{ m: 'Jun', web: 140, ios: 95, android: 72 },
|
|
27
|
+
{ m: 'Jul', web: 150, ios: 110, android: 90 },
|
|
28
|
+
{ m: 'Aug', web: 170, ios: 128, android: 101 },
|
|
29
|
+
];
|
|
30
|
+
const series = [{ key: 'web', label: 'Web' }, { key: 'ios', label: 'iOS' }, { key: 'android', label: 'Android' }];
|
|
31
|
+
|
|
32
|
+
export default function Example() {
|
|
33
|
+
return (
|
|
34
|
+
<ChartToggle series={series} className="w-full">
|
|
35
|
+
{(visible) => <LineChart legend={false} title="Signups by platform" data={data} index="m" series={visible} />}
|
|
36
|
+
</ChartToggle>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Accessibility
|
|
42
|
+
|
|
43
|
+
- `Tab / Space`: Move between series and switch one on or off.
|
|
44
|
+
- Each series is a toggle button with `aria-pressed`. The last visible series cannot be switched off.
|
|
45
|
+
|
|
46
|
+
Related: [bar-chart](bar-chart.md), [line-chart](line-chart.md)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Component index
|
|
2
2
|
|
|
3
|
-
Nexub DS v4.
|
|
3
|
+
Nexub DS v4.6.0. Open `components/<slug>.md` for props, examples and accessibility notes.
|
|
4
4
|
Never use a component marked deprecated.
|
|
5
5
|
|
|
6
6
|
## Components — Actions
|
|
@@ -27,6 +27,7 @@ Never use a component marked deprecated.
|
|
|
27
27
|
|
|
28
28
|
- [Amount](components/amount.md) `@nexub/react`: Honest money: Intl formatting, tabular numerals, the currency’s minor unit and a true minus sign.
|
|
29
29
|
- [Bar Chart](components/bar-chart.md) `@nexub/react`: Compare values across categories, grouped or stacked. Server-rendered SVG on the chart palette.
|
|
30
|
+
- [Chart Toggle](components/chart-toggle.md) `@nexub/react`: A legend whose entries switch series on and off, wrapped around any chart.
|
|
30
31
|
- [Data Table](components/data-table.md) `@nexub/react`: Feature-rich data table with sorting and row selection powered by TanStack Table.
|
|
31
32
|
- [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.
|
|
32
33
|
- [Empty State](components/empty-state.md) `@nexub/react`: Placeholder UI shown when a list or page has no content.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Tokens
|
|
2
2
|
|
|
3
|
-
Nexub DS v4.
|
|
3
|
+
Nexub DS v4.6.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
|
|
4
4
|
The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
|
|
5
5
|
|
|
6
6
|
## Color roles
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexub/mcp",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.6.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|