@nexub/mcp 2.8.0 → 3.0.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.
- package/dist/skill/references/components/badge.md +1 -1
- package/dist/skill/references/components/card.md +1 -1
- package/dist/skill/references/components/table.md +2 -2
- package/dist/skill/references/components/toast.md +1 -1
- package/dist/skill/references/components.md +1 -5
- package/dist/skill/references/tokens.md +1 -1
- package/package.json +1 -1
- package/dist/skill/references/components/banner.md +0 -43
- package/dist/skill/references/components/callout.md +0 -35
- package/dist/skill/references/components/status-pill.md +0 -43
- package/dist/skill/references/components/tag.md +0 -33
|
@@ -89,4 +89,4 @@ export default function Example() {
|
|
|
89
89
|
- Reads as inline text. For live status changes, wrap in an element with `role="status"` and `aria-live="polite"`.
|
|
90
90
|
- For interactive equivalents (filtering, dismissing) reach for `Chip` or `FilterChip`.
|
|
91
91
|
|
|
92
|
-
Related: [chip](chip.md)
|
|
92
|
+
Related: [chip](chip.md)
|
|
@@ -103,4 +103,4 @@ export default function Example() {
|
|
|
103
103
|
- Prefer CardLink over wrapping the whole card in `<a>`: the link’s accessible name stays the title instead of every word on the card.
|
|
104
104
|
- Group related content with a heading inside the Card so AT users can navigate by heading level.
|
|
105
105
|
|
|
106
|
-
Related: [media-card](media-card.md), [radio-card](radio-card.md), [
|
|
106
|
+
Related: [media-card](media-card.md), [radio-card](radio-card.md), [alert](alert.md)
|
|
@@ -55,7 +55,7 @@ export default function Example() {
|
|
|
55
55
|
## Example: With caption
|
|
56
56
|
|
|
57
57
|
```tsx
|
|
58
|
-
import { Table,
|
|
58
|
+
import { Table, Badge } from '@nexub/react';
|
|
59
59
|
|
|
60
60
|
export default function Example() {
|
|
61
61
|
const rows = [
|
|
@@ -77,7 +77,7 @@ export default function Example() {
|
|
|
77
77
|
{rows.map((r) => (
|
|
78
78
|
<Table.Row key={r.name}>
|
|
79
79
|
<Table.Cell>{r.name}</Table.Cell>
|
|
80
|
-
<Table.Cell><
|
|
80
|
+
<Table.Cell><Badge variant="soft" tone={r.status === 'Active' ? 'success' : r.status === 'Pending' ? 'warning' : 'neutral'}>{r.status}</Badge></Table.Cell>
|
|
81
81
|
<Table.Cell>{r.date}</Table.Cell>
|
|
82
82
|
</Table.Row>
|
|
83
83
|
))}
|
|
@@ -17,7 +17,7 @@ Imperative toast notifications using the toast object. Render <Toaster /> once i
|
|
|
17
17
|
|
|
18
18
|
- Critical errors that block the user — use Alert or AlertDialog
|
|
19
19
|
- Information the user must read and acknowledge — use Dialog
|
|
20
|
-
- Persistent status that should remain visible — use
|
|
20
|
+
- Persistent status that should remain visible — use Alert
|
|
21
21
|
- Long messages with multiple lines of text
|
|
22
22
|
|
|
23
23
|
## Props
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Component index
|
|
2
2
|
|
|
3
|
-
Nexub DS
|
|
3
|
+
Nexub DS v3.0.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
|
|
@@ -46,8 +46,6 @@ Never use a component marked deprecated.
|
|
|
46
46
|
## Components — Feedback
|
|
47
47
|
|
|
48
48
|
- [Alert](components/alert.md) `@nexub/react`: Inline contextual message with optional title, icon, and dismiss action.
|
|
49
|
-
- [Banner](components/banner.md) `@nexub/react` **(deprecated)**: Deprecated — use Alert. Full-width announcement banner, typically used at the top of a page.
|
|
50
|
-
- [Callout](components/callout.md) `@nexub/react` **(deprecated)**: Deprecated — use Alert. Highlighted content block for tips, warnings, or notes.
|
|
51
49
|
- [Spinner](components/spinner.md) `@nexub/react`: Animated loading indicator. Inherits color from context.
|
|
52
50
|
- [Toast](components/toast.md) `@nexub/react`: Imperative toast notifications using the toast object. Render <Toaster /> once in your layout.
|
|
53
51
|
|
|
@@ -97,8 +95,6 @@ Never use a component marked deprecated.
|
|
|
97
95
|
- [Chip](components/chip.md) `@nexub/react`: Compact label chip, optionally dismissible.
|
|
98
96
|
- [Eyebrow Chip](components/eyebrow-chip.md) `@nexub/react`: A compact eyebrow label, typically used above headings.
|
|
99
97
|
- [Filter Chip](components/filter-chip.md) `@nexub/react`: Interactive chip for filtering, supports selected/unselected state.
|
|
100
|
-
- [Status Pill](components/status-pill.md) `@nexub/react` **(deprecated)**: Deprecated — use Badge. A pill indicator for status values like active, pending, error.
|
|
101
|
-
- [Tag](components/tag.md) `@nexub/react` **(deprecated)**: Deprecated — use Badge. Non-interactive label tag for categorisation.
|
|
102
98
|
|
|
103
99
|
## Components — Layout
|
|
104
100
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Tokens
|
|
2
2
|
|
|
3
|
-
Nexub DS
|
|
3
|
+
Nexub DS v3.0.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": "
|
|
3
|
+
"version": "3.0.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",
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# Banner
|
|
2
|
-
|
|
3
|
-
> **Deprecated.** Do not use in new code. Removal planned in 3.0: use [Alert](alert.md). `<Alert>` has the same props (tone, title, icon, action, onClose), so rename the element. Deprecated — use Alert. Full-width announcement banner, typically used at the top of a page.
|
|
4
|
-
|
|
5
|
-
- Package: `@nexub/react` · Category: Feedback · Status: deprecated
|
|
6
|
-
- Import: `import { Banner } from '@nexub/react';`
|
|
7
|
-
- Docs: https://nexub-ds-docs.pages.dev/components/banner
|
|
8
|
-
|
|
9
|
-
## Props
|
|
10
|
-
|
|
11
|
-
| Prop | Type | Default | Description |
|
|
12
|
-
| --- | --- | --- | --- |
|
|
13
|
-
| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | | Semantic colour tone of the banner. |
|
|
14
|
-
| `action` | `ReactNode` | | Action element (e.g. a button or link) rendered to the right of the content. |
|
|
15
|
-
| `onClose` | `() => void` | | When provided, renders a close button that dismisses the banner. |
|
|
16
|
-
|
|
17
|
-
## Example: Default
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
import { Banner } from '@nexub/react';
|
|
21
|
-
|
|
22
|
-
export default function Example() {
|
|
23
|
-
return <Banner tone="info">New features available — <strong>see what's new</strong></Banner>;
|
|
24
|
-
}
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Example: With action
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import { Banner, Button } from '@nexub/react';
|
|
31
|
-
|
|
32
|
-
export default function Example() {
|
|
33
|
-
return (
|
|
34
|
-
<Banner
|
|
35
|
-
tone="warning"
|
|
36
|
-
action={<Button variant="outline" size="sm">Review now</Button>}
|
|
37
|
-
onClose={() => {}}
|
|
38
|
-
>
|
|
39
|
-
Your payment method is expiring soon.
|
|
40
|
-
</Banner>
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
```
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# Callout
|
|
2
|
-
|
|
3
|
-
> **Deprecated.** Do not use in new code. Removal planned in 3.0: use [Alert](alert.md). `<Alert>` covers tone and icon. Deprecated — use Alert. Highlighted content block for tips, warnings, or notes.
|
|
4
|
-
|
|
5
|
-
- Package: `@nexub/react` · Category: Feedback · Status: deprecated
|
|
6
|
-
- Import: `import { Callout } from '@nexub/react';`
|
|
7
|
-
- Docs: https://nexub-ds-docs.pages.dev/components/callout
|
|
8
|
-
|
|
9
|
-
## Props
|
|
10
|
-
|
|
11
|
-
| Prop | Type | Default | Description |
|
|
12
|
-
| --- | --- | --- | --- |
|
|
13
|
-
| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | | Semantic colour tone of the callout. |
|
|
14
|
-
| `title` | `string` | | Bold title rendered at the top of the callout. |
|
|
15
|
-
| `icon` | `ReactNode` | | Custom icon rendered beside the title. |
|
|
16
|
-
|
|
17
|
-
## Example: Default
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
import { Callout } from '@nexub/react';
|
|
21
|
-
|
|
22
|
-
export default function Example() {
|
|
23
|
-
return <Callout tone="warning" title="Before you continue">Deleting this record is permanent and cannot be undone.</Callout>;
|
|
24
|
-
}
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Example: Info
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import { Callout } from '@nexub/react';
|
|
31
|
-
|
|
32
|
-
export default function Example() {
|
|
33
|
-
return <Callout tone="info">Use token names instead of raw hex values for consistent theming.</Callout>;
|
|
34
|
-
}
|
|
35
|
-
```
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# Status Pill
|
|
2
|
-
|
|
3
|
-
> **Deprecated.** Do not use in new code. Removal planned in 3.0: use [Badge](badge.md). `<Badge variant="soft" leadingIcon={dot}>` covers it. Deprecated — use Badge. A pill indicator for status values like active, pending, error.
|
|
4
|
-
|
|
5
|
-
- Package: `@nexub/react` · Category: Labels & Badges · Status: deprecated
|
|
6
|
-
- Import: `import { StatusPill } from '@nexub/react';`
|
|
7
|
-
- Docs: https://nexub-ds-docs.pages.dev/components/status-pill
|
|
8
|
-
|
|
9
|
-
## Props
|
|
10
|
-
|
|
11
|
-
| Prop | Type | Default | Description |
|
|
12
|
-
| --- | --- | --- | --- |
|
|
13
|
-
| `label` (required) | `string` | | Text displayed inside the pill. |
|
|
14
|
-
| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Semantic colour tone of the pill. |
|
|
15
|
-
| `dot` | `boolean` | `false` | Renders a small status dot before the label. Pulses automatically for success and info tones. |
|
|
16
|
-
|
|
17
|
-
## Example: Default
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
import { StatusPill } from '@nexub/react';
|
|
21
|
-
|
|
22
|
-
export default function Example() {
|
|
23
|
-
return (
|
|
24
|
-
<div className="flex gap-2 flex-wrap items-center justify-center">
|
|
25
|
-
<StatusPill tone="success" label="Active" />
|
|
26
|
-
<StatusPill tone="warning" label="Pending" />
|
|
27
|
-
<StatusPill tone="danger" label="Error" />
|
|
28
|
-
<StatusPill tone="neutral" label="Draft" />
|
|
29
|
-
<StatusPill tone="info" label="Syncing" />
|
|
30
|
-
</div>
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Example: With dot
|
|
36
|
-
|
|
37
|
-
```tsx
|
|
38
|
-
import { StatusPill } from '@nexub/react';
|
|
39
|
-
|
|
40
|
-
export default function Example() {
|
|
41
|
-
return <StatusPill tone="success" dot label="Live" />;
|
|
42
|
-
}
|
|
43
|
-
```
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
# Tag
|
|
2
|
-
|
|
3
|
-
> **Deprecated.** Do not use in new code. Removal planned in 3.0: use [Badge](badge.md). `<Badge size="sm">` covers it. Deprecated — use Badge. Non-interactive label tag for categorisation.
|
|
4
|
-
|
|
5
|
-
- Package: `@nexub/react` · Category: Labels & Badges · Status: deprecated
|
|
6
|
-
- Import: `import { Tag } from '@nexub/react';`
|
|
7
|
-
- Docs: https://nexub-ds-docs.pages.dev/components/tag
|
|
8
|
-
|
|
9
|
-
## Props
|
|
10
|
-
|
|
11
|
-
| Prop | Type | Default | Description |
|
|
12
|
-
| --- | --- | --- | --- |
|
|
13
|
-
| `variant` | `'solid' \| 'soft' \| 'outline'` | `'soft'` | Visual style of the tag. |
|
|
14
|
-
| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | | Semantic colour tone of the tag. |
|
|
15
|
-
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls tag size. |
|
|
16
|
-
|
|
17
|
-
## Example: Default
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
import { Tag } from '@nexub/react';
|
|
21
|
-
|
|
22
|
-
export default function Example() {
|
|
23
|
-
return (
|
|
24
|
-
<div className="flex gap-2 flex-wrap items-center justify-center">
|
|
25
|
-
<Tag>Frontend</Tag>
|
|
26
|
-
<Tag tone="info">Backend</Tag>
|
|
27
|
-
<Tag tone="success">Deployed</Tag>
|
|
28
|
-
<Tag tone="warning">Review</Tag>
|
|
29
|
-
<Tag tone="danger">Blocked</Tag>
|
|
30
|
-
</div>
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
```
|