@nucleux/mcp 0.1.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/LICENSE +21 -0
- package/README.md +55 -0
- package/dist/index.js +2387 -0
- package/package.json +51 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,2387 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
// src/index.ts
|
|
4
|
+
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
5
|
+
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
|
6
|
+
import { z } from "zod";
|
|
7
|
+
|
|
8
|
+
// src/catalog.json
|
|
9
|
+
var catalog_default = {
|
|
10
|
+
library: "@nucleux/react",
|
|
11
|
+
version: "0.1.4",
|
|
12
|
+
generatedFrom: "packages/* (do not edit \u2014 run scripts/gen-mcp-catalog.mjs)",
|
|
13
|
+
setup: {
|
|
14
|
+
installFull: "pnpm add @nucleux/react @nucleux/tokens",
|
|
15
|
+
installSingle: "pnpm add @nucleux/<component> @nucleux/tokens",
|
|
16
|
+
theme: [
|
|
17
|
+
'Import the theme once at your app root: import "@nucleux/tokens/styles.css";',
|
|
18
|
+
"Add the Tailwind preset: presets: [require('@nucleux/tokens/preset')] in tailwind.config.",
|
|
19
|
+
"react and react-dom are peer dependencies (>=18)."
|
|
20
|
+
],
|
|
21
|
+
note: "Every component is also re-exported from the @nucleux/react umbrella."
|
|
22
|
+
},
|
|
23
|
+
counts: {
|
|
24
|
+
components: 48,
|
|
25
|
+
packages: 52,
|
|
26
|
+
examples: 6
|
|
27
|
+
},
|
|
28
|
+
packages: [
|
|
29
|
+
{
|
|
30
|
+
name: "accordion",
|
|
31
|
+
package: "@nucleux/accordion",
|
|
32
|
+
kind: "component",
|
|
33
|
+
description: "A vertically stacked set of collapsible panels.",
|
|
34
|
+
summary: "Collapsible accordion panels \u2014 Nucleux agentic UI for React.",
|
|
35
|
+
keywords: [
|
|
36
|
+
"nucleux",
|
|
37
|
+
"react",
|
|
38
|
+
"ui",
|
|
39
|
+
"components",
|
|
40
|
+
"agentic",
|
|
41
|
+
"ai",
|
|
42
|
+
"tailwind",
|
|
43
|
+
"accordion"
|
|
44
|
+
],
|
|
45
|
+
exports: [
|
|
46
|
+
"Accordion",
|
|
47
|
+
"AccordionItem",
|
|
48
|
+
"AccordionTrigger",
|
|
49
|
+
"AccordionContent",
|
|
50
|
+
"AccordionProps",
|
|
51
|
+
"AccordionItemProps"
|
|
52
|
+
],
|
|
53
|
+
components: [
|
|
54
|
+
"Accordion",
|
|
55
|
+
"AccordionItem",
|
|
56
|
+
"AccordionTrigger",
|
|
57
|
+
"AccordionContent"
|
|
58
|
+
],
|
|
59
|
+
import: 'import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@nucleux/accordion";',
|
|
60
|
+
installSingle: "pnpm add @nucleux/accordion @nucleux/tokens",
|
|
61
|
+
props: [
|
|
62
|
+
{
|
|
63
|
+
name: "AccordionProps",
|
|
64
|
+
source: 'export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {\n /** Allow multiple panels open at once. */\n type?: "single" | "multiple";\n /** Initial open value(s). */\n defaultValue?: string | string[];\n}'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: "AccordionItemProps",
|
|
68
|
+
source: "export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string;\n}"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
readme: '# @nucleux/accordion\n\nCollapsible accordion panels \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/accordion @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@nucleux/accordion";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
72
|
+
peerDependencies: {
|
|
73
|
+
react: ">=18",
|
|
74
|
+
"react-dom": ">=18"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: "action-tile",
|
|
79
|
+
package: "@nucleux/action-tile",
|
|
80
|
+
kind: "component",
|
|
81
|
+
description: 'A large, selectable action card \u2014 icon in an accent container, a title, and a\nshort description. Used for entry points like "Record a meeting" /\n"Upload a recording" / "Paste a link".',
|
|
82
|
+
summary: "Large selectable action tile \u2014 Nucleux agentic UI for React.",
|
|
83
|
+
keywords: [
|
|
84
|
+
"nucleux",
|
|
85
|
+
"react",
|
|
86
|
+
"ui",
|
|
87
|
+
"components",
|
|
88
|
+
"agentic",
|
|
89
|
+
"ai",
|
|
90
|
+
"tailwind",
|
|
91
|
+
"action-tile"
|
|
92
|
+
],
|
|
93
|
+
exports: [
|
|
94
|
+
"ActionTile",
|
|
95
|
+
"ActionTileProps"
|
|
96
|
+
],
|
|
97
|
+
components: [
|
|
98
|
+
"ActionTile"
|
|
99
|
+
],
|
|
100
|
+
import: 'import { ActionTile } from "@nucleux/action-tile";',
|
|
101
|
+
installSingle: "pnpm add @nucleux/action-tile @nucleux/tokens",
|
|
102
|
+
props: [
|
|
103
|
+
{
|
|
104
|
+
name: "ActionTileProps",
|
|
105
|
+
source: 'export interface ActionTileProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {\n /** Icon shown in the accent container at the top of the tile. */\n icon: React.ReactNode;\n /** Tile title. */\n title: React.ReactNode;\n /** Supporting description below the title. */\n description?: React.ReactNode;\n}'
|
|
106
|
+
}
|
|
107
|
+
],
|
|
108
|
+
readme: '# @nucleux/action-tile\n\nLarge selectable action tile \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/action-tile @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { ActionTile } from "@nucleux/action-tile";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
109
|
+
peerDependencies: {
|
|
110
|
+
react: ">=18",
|
|
111
|
+
"react-dom": ">=18"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
name: "agent-composer",
|
|
116
|
+
package: "@nucleux/agent-composer",
|
|
117
|
+
kind: "component",
|
|
118
|
+
description: 'An agent task composer \u2014 a card with an auto-growing prompt field and a\ntoolbar (left actions, right actions, and a send/stop button). Enter submits,\nShift+Enter inserts a newline. Source: Figma "Agentic".',
|
|
119
|
+
summary: "Agent task composer with toolbar \u2014 Nucleux agentic UI for React.",
|
|
120
|
+
keywords: [
|
|
121
|
+
"nucleux",
|
|
122
|
+
"react",
|
|
123
|
+
"ui",
|
|
124
|
+
"components",
|
|
125
|
+
"agentic",
|
|
126
|
+
"ai",
|
|
127
|
+
"tailwind",
|
|
128
|
+
"agent-composer"
|
|
129
|
+
],
|
|
130
|
+
exports: [
|
|
131
|
+
"AgentComposer",
|
|
132
|
+
"AgentComposerProps"
|
|
133
|
+
],
|
|
134
|
+
components: [
|
|
135
|
+
"AgentComposer"
|
|
136
|
+
],
|
|
137
|
+
import: 'import { AgentComposer } from "@nucleux/agent-composer";',
|
|
138
|
+
installSingle: "pnpm add @nucleux/agent-composer @nucleux/tokens",
|
|
139
|
+
props: [
|
|
140
|
+
{
|
|
141
|
+
name: "AgentComposerProps",
|
|
142
|
+
source: 'export interface AgentComposerProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {\n /** Controlled textarea value. */\n value: string;\n onValueChange: (value: string) => void;\n /** Called with the trimmed value on submit (Enter or send). */\n onSubmit: (value: string) => void;\n placeholder?: string;\n /** Toolbar content on the left (e.g. attach button). */\n leftActions?: React.ReactNode;\n /** Toolbar content on the right of the input, before the send button (e.g. model picker, mic). */\n rightActions?: React.ReactNode;\n /** Show the agent as busy \u2014 swaps send for a stop button. */\n loading?: boolean;\n onStop?: () => void;\n /** Max auto-grow height in px. */\n maxHeight?: number;\n /** Disable input + send. */\n disabled?: boolean;\n}'
|
|
143
|
+
}
|
|
144
|
+
],
|
|
145
|
+
readme: '# @nucleux/agent-composer\n\nAgent task composer with toolbar \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/agent-composer @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { AgentComposer } from "@nucleux/agent-composer";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
146
|
+
peerDependencies: {
|
|
147
|
+
react: ">=18",
|
|
148
|
+
"react-dom": ">=18"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
name: "alert",
|
|
153
|
+
package: "@nucleux/alert",
|
|
154
|
+
kind: "component",
|
|
155
|
+
description: "Contextual message banner \u2014 info, success, warning, or error.",
|
|
156
|
+
summary: "Contextual message banner (info/success/warning/error) \u2014 Nucleux agentic UI for React.",
|
|
157
|
+
keywords: [
|
|
158
|
+
"nucleux",
|
|
159
|
+
"react",
|
|
160
|
+
"ui",
|
|
161
|
+
"components",
|
|
162
|
+
"agentic",
|
|
163
|
+
"ai",
|
|
164
|
+
"tailwind",
|
|
165
|
+
"alert"
|
|
166
|
+
],
|
|
167
|
+
exports: [
|
|
168
|
+
"Alert",
|
|
169
|
+
"AlertVariant",
|
|
170
|
+
"AlertProps"
|
|
171
|
+
],
|
|
172
|
+
components: [
|
|
173
|
+
"Alert"
|
|
174
|
+
],
|
|
175
|
+
import: 'import { Alert } from "@nucleux/alert";',
|
|
176
|
+
installSingle: "pnpm add @nucleux/alert @nucleux/tokens",
|
|
177
|
+
props: [
|
|
178
|
+
{
|
|
179
|
+
name: "AlertProps",
|
|
180
|
+
source: 'export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {\n variant?: AlertVariant;\n /** Optional bold title above the body. */\n title?: React.ReactNode;\n /** Custom icon; defaults to a variant-appropriate one. */\n icon?: React.ReactNode;\n /** Hide the leading icon entirely. */\n hideIcon?: boolean;\n}'
|
|
181
|
+
}
|
|
182
|
+
],
|
|
183
|
+
readme: '# @nucleux/alert\n\nContextual message banner (info/success/warning/error) \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/alert @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Alert } from "@nucleux/alert";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
184
|
+
peerDependencies: {
|
|
185
|
+
react: ">=18",
|
|
186
|
+
"react-dom": ">=18"
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: "avatar",
|
|
191
|
+
package: "@nucleux/avatar",
|
|
192
|
+
kind: "component",
|
|
193
|
+
description: "Avatar for a conversation participant or entity \u2014 image, initials, or role icon.",
|
|
194
|
+
summary: "Avatar with image, initials, or role icon \u2014 Nucleux agentic UI for React.",
|
|
195
|
+
keywords: [
|
|
196
|
+
"nucleux",
|
|
197
|
+
"react",
|
|
198
|
+
"ui",
|
|
199
|
+
"components",
|
|
200
|
+
"agentic",
|
|
201
|
+
"ai",
|
|
202
|
+
"tailwind",
|
|
203
|
+
"avatar"
|
|
204
|
+
],
|
|
205
|
+
exports: [
|
|
206
|
+
"Avatar",
|
|
207
|
+
"AvatarProps"
|
|
208
|
+
],
|
|
209
|
+
components: [
|
|
210
|
+
"Avatar"
|
|
211
|
+
],
|
|
212
|
+
import: 'import { Avatar } from "@nucleux/avatar";',
|
|
213
|
+
installSingle: "pnpm add @nucleux/avatar @nucleux/tokens",
|
|
214
|
+
props: [
|
|
215
|
+
{
|
|
216
|
+
name: "AvatarProps",
|
|
217
|
+
source: 'export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Role used to pick a default icon and styling when no image/initials given. */\n role?: MessageRole;\n /** Optional image URL; takes precedence over initials and the role icon. */\n src?: string;\n /** Explicit initials. If omitted, derived from `name`. */\n initials?: string;\n /** Display name \u2014 used to derive initials and the default aria-label. */\n name?: string;\n /** Corner style. `rounded` suits entity/person avatars, `circle` suits chat. */\n shape?: "circle" | "rounded";\n /** Accessible label / alt text. */\n alt?: string;\n}'
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
readme: '# @nucleux/avatar\n\nAvatar with image, initials, or role icon \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/avatar @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Avatar } from "@nucleux/avatar";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
221
|
+
peerDependencies: {
|
|
222
|
+
react: ">=18",
|
|
223
|
+
"react-dom": ">=18"
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
name: "badge",
|
|
228
|
+
package: "@nucleux/badge",
|
|
229
|
+
kind: "component",
|
|
230
|
+
description: 'Compact status pill \u2014 action counts, states ("Summarized"), progress ("1/3 Done").',
|
|
231
|
+
summary: "Compact status pill / label \u2014 Nucleux agentic UI for React.",
|
|
232
|
+
keywords: [
|
|
233
|
+
"nucleux",
|
|
234
|
+
"react",
|
|
235
|
+
"ui",
|
|
236
|
+
"components",
|
|
237
|
+
"agentic",
|
|
238
|
+
"ai",
|
|
239
|
+
"tailwind",
|
|
240
|
+
"badge"
|
|
241
|
+
],
|
|
242
|
+
exports: [
|
|
243
|
+
"Badge",
|
|
244
|
+
"BadgeVariant",
|
|
245
|
+
"BadgeProps"
|
|
246
|
+
],
|
|
247
|
+
components: [
|
|
248
|
+
"Badge"
|
|
249
|
+
],
|
|
250
|
+
import: 'import { Badge } from "@nucleux/badge";',
|
|
251
|
+
installSingle: "pnpm add @nucleux/badge @nucleux/tokens",
|
|
252
|
+
props: [
|
|
253
|
+
{
|
|
254
|
+
name: "BadgeProps",
|
|
255
|
+
source: "export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Visual style. */\n variant?: BadgeVariant;\n /** Optional icon rendered before the label. */\n icon?: React.ReactNode;\n}"
|
|
256
|
+
}
|
|
257
|
+
],
|
|
258
|
+
readme: '# @nucleux/badge\n\nCompact status pill / label \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/badge @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Badge } from "@nucleux/badge";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
259
|
+
peerDependencies: {
|
|
260
|
+
react: ">=18",
|
|
261
|
+
"react-dom": ">=18"
|
|
262
|
+
}
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
name: "breadcrumb",
|
|
266
|
+
package: "@nucleux/breadcrumb",
|
|
267
|
+
kind: "component",
|
|
268
|
+
description: "Breadcrumb navigation landmark. Compose with the parts below.",
|
|
269
|
+
summary: "Breadcrumb navigation \u2014 Nucleux agentic UI for React.",
|
|
270
|
+
keywords: [
|
|
271
|
+
"nucleux",
|
|
272
|
+
"react",
|
|
273
|
+
"ui",
|
|
274
|
+
"components",
|
|
275
|
+
"agentic",
|
|
276
|
+
"ai",
|
|
277
|
+
"tailwind",
|
|
278
|
+
"breadcrumb"
|
|
279
|
+
],
|
|
280
|
+
exports: [
|
|
281
|
+
"Breadcrumb",
|
|
282
|
+
"BreadcrumbItem",
|
|
283
|
+
"BreadcrumbLink",
|
|
284
|
+
"BreadcrumbPage",
|
|
285
|
+
"BreadcrumbSeparator"
|
|
286
|
+
],
|
|
287
|
+
components: [
|
|
288
|
+
"Breadcrumb",
|
|
289
|
+
"BreadcrumbItem",
|
|
290
|
+
"BreadcrumbLink",
|
|
291
|
+
"BreadcrumbPage",
|
|
292
|
+
"BreadcrumbSeparator"
|
|
293
|
+
],
|
|
294
|
+
import: 'import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from "@nucleux/breadcrumb";',
|
|
295
|
+
installSingle: "pnpm add @nucleux/breadcrumb @nucleux/tokens",
|
|
296
|
+
props: [],
|
|
297
|
+
readme: '# @nucleux/breadcrumb\n\nBreadcrumb navigation \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/breadcrumb @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "@nucleux/breadcrumb";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
298
|
+
peerDependencies: {
|
|
299
|
+
react: ">=18",
|
|
300
|
+
"react-dom": ">=18"
|
|
301
|
+
}
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
name: "button",
|
|
305
|
+
package: "@nucleux/button",
|
|
306
|
+
kind: "component",
|
|
307
|
+
description: "Button \u2014 variants, sizes, and icons \u2014 Nucleux agentic UI for React.",
|
|
308
|
+
summary: "Button \u2014 variants, sizes, and icons \u2014 Nucleux agentic UI for React.",
|
|
309
|
+
keywords: [
|
|
310
|
+
"nucleux",
|
|
311
|
+
"react",
|
|
312
|
+
"ui",
|
|
313
|
+
"components",
|
|
314
|
+
"agentic",
|
|
315
|
+
"ai",
|
|
316
|
+
"tailwind",
|
|
317
|
+
"button"
|
|
318
|
+
],
|
|
319
|
+
exports: [
|
|
320
|
+
"Button",
|
|
321
|
+
"ButtonVariant",
|
|
322
|
+
"ButtonSize",
|
|
323
|
+
"ButtonProps"
|
|
324
|
+
],
|
|
325
|
+
components: [
|
|
326
|
+
"Button",
|
|
327
|
+
"ButtonSize"
|
|
328
|
+
],
|
|
329
|
+
import: 'import { Button, ButtonSize } from "@nucleux/button";',
|
|
330
|
+
installSingle: "pnpm add @nucleux/button @nucleux/tokens",
|
|
331
|
+
props: [
|
|
332
|
+
{
|
|
333
|
+
name: "ButtonProps",
|
|
334
|
+
source: "export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n /** Icon rendered before the label. */\n leftIcon?: React.ReactNode;\n /** Icon rendered after the label. */\n rightIcon?: React.ReactNode;\n}"
|
|
335
|
+
}
|
|
336
|
+
],
|
|
337
|
+
readme: '# @nucleux/button\n\nButton \u2014 variants, sizes, and icons \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/button @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Button } from "@nucleux/button";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
338
|
+
peerDependencies: {
|
|
339
|
+
react: ">=18",
|
|
340
|
+
"react-dom": ">=18"
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
name: "card",
|
|
345
|
+
package: "@nucleux/card",
|
|
346
|
+
kind: "component",
|
|
347
|
+
description: "Card header. Lays children out in a row with space-between by default.",
|
|
348
|
+
summary: "Composable card surface (CardContainer + parts) \u2014 Nucleux agentic UI for React.",
|
|
349
|
+
keywords: [
|
|
350
|
+
"nucleux",
|
|
351
|
+
"react",
|
|
352
|
+
"ui",
|
|
353
|
+
"components",
|
|
354
|
+
"agentic",
|
|
355
|
+
"ai",
|
|
356
|
+
"tailwind",
|
|
357
|
+
"card"
|
|
358
|
+
],
|
|
359
|
+
exports: [
|
|
360
|
+
"CardContainer",
|
|
361
|
+
"CardHeader",
|
|
362
|
+
"CardTitle",
|
|
363
|
+
"CardDescription",
|
|
364
|
+
"CardAction",
|
|
365
|
+
"CardContent",
|
|
366
|
+
"CardDivider",
|
|
367
|
+
"CardContainerProps"
|
|
368
|
+
],
|
|
369
|
+
components: [
|
|
370
|
+
"CardContainer",
|
|
371
|
+
"CardHeader",
|
|
372
|
+
"CardTitle",
|
|
373
|
+
"CardDescription",
|
|
374
|
+
"CardAction",
|
|
375
|
+
"CardContent",
|
|
376
|
+
"CardDivider"
|
|
377
|
+
],
|
|
378
|
+
import: 'import { CardContainer, CardHeader, CardTitle, CardDescription } from "@nucleux/card";',
|
|
379
|
+
installSingle: "pnpm add @nucleux/card @nucleux/tokens",
|
|
380
|
+
props: [
|
|
381
|
+
{
|
|
382
|
+
name: "CardContainerProps",
|
|
383
|
+
source: "/**\n * Composable card surface. Compose the parts to match the design:\n *\n * ```tsx\n * <CardContainer>\n * <CardHeader>\n * <div>\n * <CardTitle>Recent meeting</CardTitle>\n * <CardDescription>1 in your library</CardDescription>\n * </div>\n * <CardAction>View all</CardAction>\n * </CardHeader>\n * <CardDivider />\n * <CardContent>\u2026</CardContent>\n * </CardContainer>\n * ```\n *\n * Named `CardContainer` to mirror the canonical Figma component.\n */\nexport interface CardContainerProps extends React.HTMLAttributes<HTMLDivElement> {}"
|
|
384
|
+
}
|
|
385
|
+
],
|
|
386
|
+
readme: '# @nucleux/card\n\nComposable card surface (CardContainer + parts) \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/card @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { CardContainer, CardHeader, CardTitle, CardDescription, CardAction, CardContent } from "@nucleux/card";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
387
|
+
peerDependencies: {
|
|
388
|
+
react: ">=18",
|
|
389
|
+
"react-dom": ">=18"
|
|
390
|
+
}
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
name: "checkbox",
|
|
394
|
+
package: "@nucleux/checkbox",
|
|
395
|
+
kind: "component",
|
|
396
|
+
description: "Accessible checkbox (role=checkbox). Controlled via `checked` or uncontrolled.",
|
|
397
|
+
summary: "Accessible checkbox \u2014 Nucleux agentic UI for React.",
|
|
398
|
+
keywords: [
|
|
399
|
+
"nucleux",
|
|
400
|
+
"react",
|
|
401
|
+
"ui",
|
|
402
|
+
"components",
|
|
403
|
+
"agentic",
|
|
404
|
+
"ai",
|
|
405
|
+
"tailwind",
|
|
406
|
+
"checkbox"
|
|
407
|
+
],
|
|
408
|
+
exports: [
|
|
409
|
+
"Checkbox",
|
|
410
|
+
"CheckboxProps"
|
|
411
|
+
],
|
|
412
|
+
components: [
|
|
413
|
+
"Checkbox"
|
|
414
|
+
],
|
|
415
|
+
import: 'import { Checkbox } from "@nucleux/checkbox";',
|
|
416
|
+
installSingle: "pnpm add @nucleux/checkbox @nucleux/tokens",
|
|
417
|
+
props: [
|
|
418
|
+
{
|
|
419
|
+
name: "CheckboxProps",
|
|
420
|
+
source: 'export interface CheckboxProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "type"> {\n /** Controlled checked state. */\n checked?: boolean;\n /** Initial state when uncontrolled. */\n defaultChecked?: boolean;\n /** Called with the next checked state. */\n onCheckedChange?: (checked: boolean) => void;\n}'
|
|
421
|
+
}
|
|
422
|
+
],
|
|
423
|
+
readme: '# @nucleux/checkbox\n\nAccessible checkbox \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/checkbox @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Checkbox } from "@nucleux/checkbox";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
424
|
+
peerDependencies: {
|
|
425
|
+
react: ">=18",
|
|
426
|
+
"react-dom": ">=18"
|
|
427
|
+
}
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
name: "checklist",
|
|
431
|
+
package: "@nucleux/checklist",
|
|
432
|
+
kind: "component",
|
|
433
|
+
description: "A single step in a {@link Checklist}.",
|
|
434
|
+
summary: "Onboarding / progress checklist \u2014 Nucleux agentic UI for React.",
|
|
435
|
+
keywords: [
|
|
436
|
+
"nucleux",
|
|
437
|
+
"react",
|
|
438
|
+
"ui",
|
|
439
|
+
"components",
|
|
440
|
+
"agentic",
|
|
441
|
+
"ai",
|
|
442
|
+
"tailwind",
|
|
443
|
+
"checklist"
|
|
444
|
+
],
|
|
445
|
+
exports: [
|
|
446
|
+
"ChecklistItem",
|
|
447
|
+
"Checklist",
|
|
448
|
+
"ChecklistItemProps",
|
|
449
|
+
"ChecklistProps"
|
|
450
|
+
],
|
|
451
|
+
components: [
|
|
452
|
+
"ChecklistItem",
|
|
453
|
+
"Checklist"
|
|
454
|
+
],
|
|
455
|
+
import: 'import { ChecklistItem, Checklist } from "@nucleux/checklist";',
|
|
456
|
+
installSingle: "pnpm add @nucleux/checklist @nucleux/tokens",
|
|
457
|
+
props: [
|
|
458
|
+
{
|
|
459
|
+
name: "ChecklistItemProps",
|
|
460
|
+
source: 'export interface ChecklistItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {\n /** Whether the step is completed (shows a filled check + strikes the title). */\n done?: boolean;\n /** Step title. */\n title: React.ReactNode;\n /** Supporting description. */\n description?: React.ReactNode;\n /** Trailing action, e.g. a <Button>Connect</Button>. */\n action?: React.ReactNode;\n}'
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
name: "ChecklistProps",
|
|
464
|
+
source: "export interface ChecklistProps extends React.HTMLAttributes<HTMLUListElement> {\n /** Show hairline dividers between items. */\n divided?: boolean;\n}"
|
|
465
|
+
}
|
|
466
|
+
],
|
|
467
|
+
readme: '# @nucleux/checklist\n\nOnboarding / progress checklist \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/checklist @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { ChecklistItem, Checklist } from "@nucleux/checklist";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
468
|
+
peerDependencies: {
|
|
469
|
+
react: ">=18",
|
|
470
|
+
"react-dom": ">=18"
|
|
471
|
+
}
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
name: "chip",
|
|
475
|
+
package: "@nucleux/chip",
|
|
476
|
+
kind: "component",
|
|
477
|
+
description: "A small rounded tag/pill with an optional status dot and removable affordance.\nLighter-weight than {@link Badge} \u2014 use for filters, tokens, and inline tags.",
|
|
478
|
+
summary: "Small rounded tag with optional dot and remove \u2014 Nucleux agentic UI for React.",
|
|
479
|
+
keywords: [
|
|
480
|
+
"nucleux",
|
|
481
|
+
"react",
|
|
482
|
+
"ui",
|
|
483
|
+
"components",
|
|
484
|
+
"agentic",
|
|
485
|
+
"ai",
|
|
486
|
+
"tailwind",
|
|
487
|
+
"chip"
|
|
488
|
+
],
|
|
489
|
+
exports: [
|
|
490
|
+
"Chip",
|
|
491
|
+
"ChipProps"
|
|
492
|
+
],
|
|
493
|
+
components: [
|
|
494
|
+
"Chip"
|
|
495
|
+
],
|
|
496
|
+
import: 'import { Chip } from "@nucleux/chip";',
|
|
497
|
+
installSingle: "pnpm add @nucleux/chip @nucleux/tokens",
|
|
498
|
+
props: [
|
|
499
|
+
{
|
|
500
|
+
name: "ChipProps",
|
|
501
|
+
source: 'export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Show a leading status dot. Pass a className to color it (e.g. "bg-success"). */\n dot?: boolean;\n /** Tailwind classes controlling the dot color (defaults to muted). */\n dotClassName?: string;\n /** When provided, renders a trailing remove button that calls this handler. */\n onRemove?: () => void;\n /** Accessible label for the remove button. */\n removeLabel?: string;\n}'
|
|
502
|
+
}
|
|
503
|
+
],
|
|
504
|
+
readme: '# @nucleux/chip\n\nSmall rounded tag with optional dot and remove \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/chip @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Chip } from "@nucleux/chip";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
505
|
+
peerDependencies: {
|
|
506
|
+
react: ">=18",
|
|
507
|
+
"react-dom": ">=18"
|
|
508
|
+
}
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
name: "code-block",
|
|
512
|
+
package: "@nucleux/code-block",
|
|
513
|
+
kind: "component",
|
|
514
|
+
description: "A code surface with a language label and copy-to-clipboard button. Syntax\nhighlighting is intentionally left to the consumer (bring your own\nhighlighter such as Shiki) so the library stays dependency-light.",
|
|
515
|
+
summary: "Code surface with copy button \u2014 Nucleux agentic UI for React.",
|
|
516
|
+
keywords: [
|
|
517
|
+
"nucleux",
|
|
518
|
+
"react",
|
|
519
|
+
"ui",
|
|
520
|
+
"components",
|
|
521
|
+
"agentic",
|
|
522
|
+
"ai",
|
|
523
|
+
"tailwind",
|
|
524
|
+
"code-block"
|
|
525
|
+
],
|
|
526
|
+
exports: [
|
|
527
|
+
"CodeBlock",
|
|
528
|
+
"CodeBlockProps"
|
|
529
|
+
],
|
|
530
|
+
components: [
|
|
531
|
+
"CodeBlock"
|
|
532
|
+
],
|
|
533
|
+
import: 'import { CodeBlock } from "@nucleux/code-block";',
|
|
534
|
+
installSingle: "pnpm add @nucleux/code-block @nucleux/tokens",
|
|
535
|
+
props: [
|
|
536
|
+
{
|
|
537
|
+
name: "CodeBlockProps",
|
|
538
|
+
source: 'export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {\n /** The raw source code to display. */\n code: string;\n /** Language label shown in the header (e.g. "ts", "python"). */\n language?: string;\n /** Hide the copy button. */\n hideCopy?: boolean;\n}'
|
|
539
|
+
}
|
|
540
|
+
],
|
|
541
|
+
readme: '# @nucleux/code-block\n\nCode surface with copy button \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/code-block @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { CodeBlock } from "@nucleux/code-block";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
542
|
+
peerDependencies: {
|
|
543
|
+
react: ">=18",
|
|
544
|
+
"react-dom": ">=18"
|
|
545
|
+
}
|
|
546
|
+
},
|
|
547
|
+
{
|
|
548
|
+
name: "dialog",
|
|
549
|
+
package: "@nucleux/dialog",
|
|
550
|
+
kind: "component",
|
|
551
|
+
description: "A modal dialog. Controlled via `open` / `onOpenChange`. Renders an overlay and\na centered panel; closes on overlay click or Escape (unless `dismissible` is\nfalse). Compose with DialogHeader, DialogTitle, DialogDescription, DialogFooter.",
|
|
552
|
+
summary: "Modal dialog with overlay \u2014 Nucleux agentic UI for React.",
|
|
553
|
+
keywords: [
|
|
554
|
+
"nucleux",
|
|
555
|
+
"react",
|
|
556
|
+
"ui",
|
|
557
|
+
"components",
|
|
558
|
+
"agentic",
|
|
559
|
+
"ai",
|
|
560
|
+
"tailwind",
|
|
561
|
+
"dialog"
|
|
562
|
+
],
|
|
563
|
+
exports: [
|
|
564
|
+
"Dialog",
|
|
565
|
+
"DialogHeader",
|
|
566
|
+
"DialogTitle",
|
|
567
|
+
"DialogDescription",
|
|
568
|
+
"DialogFooter",
|
|
569
|
+
"DialogProps"
|
|
570
|
+
],
|
|
571
|
+
components: [
|
|
572
|
+
"Dialog",
|
|
573
|
+
"DialogHeader",
|
|
574
|
+
"DialogTitle",
|
|
575
|
+
"DialogDescription",
|
|
576
|
+
"DialogFooter"
|
|
577
|
+
],
|
|
578
|
+
import: 'import { Dialog, DialogHeader, DialogTitle, DialogDescription } from "@nucleux/dialog";',
|
|
579
|
+
installSingle: "pnpm add @nucleux/dialog @nucleux/tokens",
|
|
580
|
+
props: [
|
|
581
|
+
{
|
|
582
|
+
name: "DialogProps",
|
|
583
|
+
source: "export interface DialogProps {\n /** Whether the dialog is open. */\n open: boolean;\n /** Called when the dialog requests to close (overlay click / Escape). */\n onOpenChange: (open: boolean) => void;\n /** Panel content \u2014 compose DialogHeader/Title/Description/Footer. */\n children: React.ReactNode;\n /** Class overrides for the panel. */\n className?: string;\n /** Disable closing on overlay click / Escape. */\n dismissible?: boolean;\n}"
|
|
584
|
+
}
|
|
585
|
+
],
|
|
586
|
+
readme: '# @nucleux/dialog\n\nModal dialog with overlay \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/dialog @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@nucleux/dialog";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
587
|
+
peerDependencies: {
|
|
588
|
+
react: ">=18",
|
|
589
|
+
"react-dom": ">=18"
|
|
590
|
+
}
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
name: "follow-up",
|
|
594
|
+
package: "@nucleux/follow-up",
|
|
595
|
+
kind: "component",
|
|
596
|
+
description: 'An AI answer that surfaces the assumption it made, with a chip to change it \u2014\nfor when a response would otherwise silently guess missing intent.\nSource: Figma "AIUX / Follow Up".',
|
|
597
|
+
summary: "FollowUp \u2014 AI answer with an editable assumption chip \u2014 Nucleux agentic UI for React.",
|
|
598
|
+
keywords: [
|
|
599
|
+
"nucleux",
|
|
600
|
+
"react",
|
|
601
|
+
"ui",
|
|
602
|
+
"components",
|
|
603
|
+
"agentic",
|
|
604
|
+
"ai",
|
|
605
|
+
"tailwind",
|
|
606
|
+
"follow-up",
|
|
607
|
+
"assumption"
|
|
608
|
+
],
|
|
609
|
+
exports: [
|
|
610
|
+
"FollowUp",
|
|
611
|
+
"FollowUpAssumption",
|
|
612
|
+
"FollowUpProps"
|
|
613
|
+
],
|
|
614
|
+
components: [
|
|
615
|
+
"FollowUp",
|
|
616
|
+
"FollowUpAssumption"
|
|
617
|
+
],
|
|
618
|
+
import: 'import { FollowUp, FollowUpAssumption } from "@nucleux/follow-up";',
|
|
619
|
+
installSingle: "pnpm add @nucleux/follow-up @nucleux/tokens",
|
|
620
|
+
props: [
|
|
621
|
+
{
|
|
622
|
+
name: "FollowUpProps",
|
|
623
|
+
source: "export interface FollowUpProps extends React.HTMLAttributes<HTMLDivElement> {\n /** The AI answer text. Ignored if `children` is provided. */\n answer?: React.ReactNode;\n /** The stated assumption; rendered as an editable chip. */\n assumption?: FollowUpAssumption;\n /** Called when the assumption chip is activated (to change the assumption). */\n onChangeAssumption?: () => void;\n}"
|
|
624
|
+
}
|
|
625
|
+
],
|
|
626
|
+
readme: '# @nucleux/follow-up\n\nFollowUp \u2014 AI answer with an editable assumption chip \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/follow-up @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { FollowUp } from "@nucleux/follow-up";\n\n<FollowUp\n answer="Three deals are at risk this quarter."\n assumption={{ label: "Assumed:", value: "Q3", hint: "tap to change" }}\n onChangeAssumption={() => {}}\n/>;\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
627
|
+
peerDependencies: {
|
|
628
|
+
react: ">=18",
|
|
629
|
+
"react-dom": ">=18"
|
|
630
|
+
}
|
|
631
|
+
},
|
|
632
|
+
{
|
|
633
|
+
name: "getting-started-pill",
|
|
634
|
+
package: "@nucleux/getting-started-pill",
|
|
635
|
+
kind: "component",
|
|
636
|
+
description: "A floating, collapsed onboarding launcher \u2014 an icon, a label, a progress\nbadge, and a chevron that toggles the expanded panel. Click toggles `open`\nvia `onClick`. Source: Figma `getting-started-collapsed`.",
|
|
637
|
+
summary: "Floating onboarding progress launcher \u2014 Nucleux agentic UI for React.",
|
|
638
|
+
keywords: [
|
|
639
|
+
"nucleux",
|
|
640
|
+
"react",
|
|
641
|
+
"ui",
|
|
642
|
+
"components",
|
|
643
|
+
"agentic",
|
|
644
|
+
"ai",
|
|
645
|
+
"tailwind",
|
|
646
|
+
"getting-started-pill"
|
|
647
|
+
],
|
|
648
|
+
exports: [
|
|
649
|
+
"GettingStartedPill",
|
|
650
|
+
"GettingStartedPillProps"
|
|
651
|
+
],
|
|
652
|
+
components: [
|
|
653
|
+
"GettingStartedPill"
|
|
654
|
+
],
|
|
655
|
+
import: 'import { GettingStartedPill } from "@nucleux/getting-started-pill";',
|
|
656
|
+
installSingle: "pnpm add @nucleux/getting-started-pill @nucleux/tokens",
|
|
657
|
+
props: [
|
|
658
|
+
{
|
|
659
|
+
name: "GettingStartedPillProps",
|
|
660
|
+
source: 'export interface GettingStartedPillProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> {\n /** Leading label. */\n label?: React.ReactNode;\n /** Leading icon (defaults to a rocket). */\n icon?: React.ReactNode;\n /** Completed step count \u2014 combined with `total` to render "current of total". */\n current?: number;\n /** Total step count. */\n total?: number;\n /** Override the rendered progress text (takes precedence over current/total). */\n progressLabel?: React.ReactNode;\n /** Whether the associated panel is expanded \u2014 flips the chevron. */\n open?: boolean;\n}'
|
|
661
|
+
}
|
|
662
|
+
],
|
|
663
|
+
readme: '# @nucleux/getting-started-pill\n\nFloating onboarding progress launcher \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/getting-started-pill @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { GettingStartedPill } from "@nucleux/getting-started-pill";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
664
|
+
peerDependencies: {
|
|
665
|
+
react: ">=18",
|
|
666
|
+
"react-dom": ">=18"
|
|
667
|
+
}
|
|
668
|
+
},
|
|
669
|
+
{
|
|
670
|
+
name: "global-nav",
|
|
671
|
+
package: "@nucleux/global-nav",
|
|
672
|
+
kind: "component",
|
|
673
|
+
description: "Top application navigation bar. A fixed-height (64px) bar with three zones:\n`left`, `center`, and `right`. Pass slots, or `children` for full control.",
|
|
674
|
+
summary: "Top application navigation bar \u2014 Nucleux agentic UI for React.",
|
|
675
|
+
keywords: [
|
|
676
|
+
"nucleux",
|
|
677
|
+
"react",
|
|
678
|
+
"ui",
|
|
679
|
+
"components",
|
|
680
|
+
"agentic",
|
|
681
|
+
"ai",
|
|
682
|
+
"tailwind",
|
|
683
|
+
"global-nav"
|
|
684
|
+
],
|
|
685
|
+
exports: [
|
|
686
|
+
"GlobalNav",
|
|
687
|
+
"GlobalNavProps"
|
|
688
|
+
],
|
|
689
|
+
components: [
|
|
690
|
+
"GlobalNav"
|
|
691
|
+
],
|
|
692
|
+
import: 'import { GlobalNav } from "@nucleux/global-nav";',
|
|
693
|
+
installSingle: "pnpm add @nucleux/global-nav @nucleux/tokens",
|
|
694
|
+
props: [
|
|
695
|
+
{
|
|
696
|
+
name: "GlobalNavProps",
|
|
697
|
+
source: "export interface GlobalNavProps extends React.HTMLAttributes<HTMLElement> {\n /** Leading content \u2014 brand mark, page heading, breadcrumbs. */\n left?: React.ReactNode;\n /** Centered content \u2014 typically a search field. */\n center?: React.ReactNode;\n /** Trailing content \u2014 notifications, account avatar, actions. */\n right?: React.ReactNode;\n}"
|
|
698
|
+
}
|
|
699
|
+
],
|
|
700
|
+
readme: '# @nucleux/global-nav\n\nTop application navigation bar \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/global-nav @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { GlobalNav } from "@nucleux/global-nav";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
701
|
+
peerDependencies: {
|
|
702
|
+
react: ">=18",
|
|
703
|
+
"react-dom": ">=18"
|
|
704
|
+
}
|
|
705
|
+
},
|
|
706
|
+
{
|
|
707
|
+
name: "hooks",
|
|
708
|
+
package: "@nucleux/hooks",
|
|
709
|
+
kind: "infrastructure",
|
|
710
|
+
description: "React hooks for Nucleux (useAutoScroll, useCopyToClipboard) \u2014 Nucleux agentic UI for React.",
|
|
711
|
+
summary: "React hooks for Nucleux (useAutoScroll, useCopyToClipboard) \u2014 Nucleux agentic UI for React.",
|
|
712
|
+
keywords: [
|
|
713
|
+
"nucleux",
|
|
714
|
+
"react",
|
|
715
|
+
"ui",
|
|
716
|
+
"components",
|
|
717
|
+
"agentic",
|
|
718
|
+
"ai",
|
|
719
|
+
"tailwind",
|
|
720
|
+
"hooks"
|
|
721
|
+
],
|
|
722
|
+
exports: [],
|
|
723
|
+
components: [],
|
|
724
|
+
import: "",
|
|
725
|
+
installSingle: "pnpm add @nucleux/hooks",
|
|
726
|
+
props: [],
|
|
727
|
+
readme: '# @nucleux/hooks\n\nReact hooks for Nucleux (useAutoScroll, useCopyToClipboard) \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/hooks @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\n\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
728
|
+
peerDependencies: {
|
|
729
|
+
react: ">=18",
|
|
730
|
+
"react-dom": ">=18"
|
|
731
|
+
}
|
|
732
|
+
},
|
|
733
|
+
{
|
|
734
|
+
name: "icon-button",
|
|
735
|
+
package: "@nucleux/icon-button",
|
|
736
|
+
kind: "component",
|
|
737
|
+
description: "Square icon-only button \u2014 nav rails, toolbars, card actions.",
|
|
738
|
+
summary: "Icon-only button for toolbars and nav rails \u2014 Nucleux agentic UI for React.",
|
|
739
|
+
keywords: [
|
|
740
|
+
"nucleux",
|
|
741
|
+
"react",
|
|
742
|
+
"ui",
|
|
743
|
+
"components",
|
|
744
|
+
"agentic",
|
|
745
|
+
"ai",
|
|
746
|
+
"tailwind",
|
|
747
|
+
"icon-button"
|
|
748
|
+
],
|
|
749
|
+
exports: [
|
|
750
|
+
"IconButton",
|
|
751
|
+
"IconButtonVariant",
|
|
752
|
+
"IconButtonSize",
|
|
753
|
+
"IconButtonProps"
|
|
754
|
+
],
|
|
755
|
+
components: [
|
|
756
|
+
"IconButton",
|
|
757
|
+
"IconButtonSize"
|
|
758
|
+
],
|
|
759
|
+
import: 'import { IconButton, IconButtonSize } from "@nucleux/icon-button";',
|
|
760
|
+
installSingle: "pnpm add @nucleux/icon-button @nucleux/tokens",
|
|
761
|
+
props: [
|
|
762
|
+
{
|
|
763
|
+
name: "IconButtonProps",
|
|
764
|
+
source: 'export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Accessible label \u2014 required since the button has no visible text. */\n "aria-label": string;\n variant?: IconButtonVariant;\n size?: IconButtonSize;\n}'
|
|
765
|
+
}
|
|
766
|
+
],
|
|
767
|
+
readme: '# @nucleux/icon-button\n\nIcon-only button for toolbars and nav rails \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/icon-button @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { IconButton } from "@nucleux/icon-button";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
768
|
+
peerDependencies: {
|
|
769
|
+
react: ">=18",
|
|
770
|
+
"react-dom": ">=18"
|
|
771
|
+
}
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
name: "input-bar",
|
|
775
|
+
package: "@nucleux/input-bar",
|
|
776
|
+
kind: "component",
|
|
777
|
+
description: "Auto-resizing chat composer. Enter submits, Shift+Enter inserts a newline.\nWhile `loading`, the send button becomes a stop button wired to `onStop`.",
|
|
778
|
+
summary: "Chat composer with auto-resize \u2014 Nucleux agentic UI for React.",
|
|
779
|
+
keywords: [
|
|
780
|
+
"nucleux",
|
|
781
|
+
"react",
|
|
782
|
+
"ui",
|
|
783
|
+
"components",
|
|
784
|
+
"agentic",
|
|
785
|
+
"ai",
|
|
786
|
+
"tailwind",
|
|
787
|
+
"input-bar"
|
|
788
|
+
],
|
|
789
|
+
exports: [
|
|
790
|
+
"InputBar",
|
|
791
|
+
"InputBarProps"
|
|
792
|
+
],
|
|
793
|
+
components: [
|
|
794
|
+
"InputBar"
|
|
795
|
+
],
|
|
796
|
+
import: 'import { InputBar } from "@nucleux/input-bar";',
|
|
797
|
+
installSingle: "pnpm add @nucleux/input-bar @nucleux/tokens",
|
|
798
|
+
props: [
|
|
799
|
+
{
|
|
800
|
+
name: "InputBarProps",
|
|
801
|
+
source: 'export interface InputBarProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onSubmit" | "value" | "onChange"> {\n /** Controlled value of the input. */\n value: string;\n /** Called when the value changes. */\n onValueChange: (value: string) => void;\n /** Called with the trimmed value on submit (Enter or button). */\n onSubmit: (value: string) => void;\n /** Show the agent as busy \u2014 swaps the send button for a stop button. */\n loading?: boolean;\n /** Called when the stop button is pressed while `loading`. */\n onStop?: () => void;\n /** Max auto-grow height in px before scrolling. */\n maxHeight?: number;\n}'
|
|
802
|
+
}
|
|
803
|
+
],
|
|
804
|
+
readme: '# @nucleux/input-bar\n\nChat composer with auto-resize \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/input-bar @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { InputBar } from "@nucleux/input-bar";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
805
|
+
peerDependencies: {
|
|
806
|
+
react: ">=18",
|
|
807
|
+
"react-dom": ">=18"
|
|
808
|
+
}
|
|
809
|
+
},
|
|
810
|
+
{
|
|
811
|
+
name: "link-button",
|
|
812
|
+
package: "@nucleux/link-button",
|
|
813
|
+
kind: "component",
|
|
814
|
+
description: "A link-styled action \u2014 underlined, semibold text with optional icons. Renders\nan `<a>` when `href` is provided, otherwise a `<button>` for in-app actions.",
|
|
815
|
+
summary: "Link-styled action button \u2014 Nucleux agentic UI for React.",
|
|
816
|
+
keywords: [
|
|
817
|
+
"nucleux",
|
|
818
|
+
"react",
|
|
819
|
+
"ui",
|
|
820
|
+
"components",
|
|
821
|
+
"agentic",
|
|
822
|
+
"ai",
|
|
823
|
+
"tailwind",
|
|
824
|
+
"link-button"
|
|
825
|
+
],
|
|
826
|
+
exports: [
|
|
827
|
+
"LinkButton",
|
|
828
|
+
"LinkButtonProps"
|
|
829
|
+
],
|
|
830
|
+
components: [
|
|
831
|
+
"LinkButton"
|
|
832
|
+
],
|
|
833
|
+
import: 'import { LinkButton } from "@nucleux/link-button";',
|
|
834
|
+
installSingle: "pnpm add @nucleux/link-button @nucleux/tokens",
|
|
835
|
+
props: [
|
|
836
|
+
{
|
|
837
|
+
name: "LinkButtonProps",
|
|
838
|
+
source: 'export interface LinkButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Icon before the label. */\n leftIcon?: React.ReactNode;\n /** Icon after the label (e.g. an arrow for "Learn More"). */\n rightIcon?: React.ReactNode;\n}'
|
|
839
|
+
}
|
|
840
|
+
],
|
|
841
|
+
readme: '# @nucleux/link-button\n\nLink-styled action button \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/link-button @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { LinkButton } from "@nucleux/link-button";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
842
|
+
peerDependencies: {
|
|
843
|
+
react: ">=18",
|
|
844
|
+
"react-dom": ">=18"
|
|
845
|
+
}
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
name: "media-card",
|
|
849
|
+
package: "@nucleux/media-card",
|
|
850
|
+
kind: "component",
|
|
851
|
+
description: 'A media card \u2014 a media area (image/video) with a title, description, and\noptional footer. Covers the "Card Variation" family from the design system\nvia `orientation` and the media slot. Source: Figma "Card Variation *".',
|
|
852
|
+
summary: "MediaCard \u2014 media + title + description card (card variations) \u2014 Nucleux agentic UI for React.",
|
|
853
|
+
keywords: [
|
|
854
|
+
"nucleux",
|
|
855
|
+
"react",
|
|
856
|
+
"ui",
|
|
857
|
+
"components",
|
|
858
|
+
"agentic",
|
|
859
|
+
"ai",
|
|
860
|
+
"tailwind",
|
|
861
|
+
"media-card"
|
|
862
|
+
],
|
|
863
|
+
exports: [
|
|
864
|
+
"MediaCard",
|
|
865
|
+
"MediaCardProps"
|
|
866
|
+
],
|
|
867
|
+
components: [
|
|
868
|
+
"MediaCard"
|
|
869
|
+
],
|
|
870
|
+
import: 'import { MediaCard } from "@nucleux/media-card";',
|
|
871
|
+
installSingle: "pnpm add @nucleux/media-card @nucleux/tokens",
|
|
872
|
+
props: [
|
|
873
|
+
{
|
|
874
|
+
name: "MediaCardProps",
|
|
875
|
+
source: 'export interface MediaCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {\n /** Card title. */\n title?: React.ReactNode;\n /** Supporting description. */\n description?: React.ReactNode;\n /** Media node (image/video). Takes precedence over `image`. */\n media?: React.ReactNode;\n /** Image URL rendered as the media, when `media` isn\'t provided. */\n image?: string;\n /** Alt text for `image`. */\n imageAlt?: string;\n /** Layout: media on top (vertical) or beside the body (horizontal). */\n orientation?: "vertical" | "horizontal";\n /** Trailing content below the description (e.g. actions). */\n footer?: React.ReactNode;\n}'
|
|
876
|
+
}
|
|
877
|
+
],
|
|
878
|
+
readme: '# @nucleux/media-card\n\nMediaCard \u2014 media + title + description card (card variations) \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/media-card @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { MediaCard } from "@nucleux/media-card";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
879
|
+
peerDependencies: {
|
|
880
|
+
react: ">=18",
|
|
881
|
+
"react-dom": ">=18"
|
|
882
|
+
}
|
|
883
|
+
},
|
|
884
|
+
{
|
|
885
|
+
name: "menu",
|
|
886
|
+
package: "@nucleux/menu",
|
|
887
|
+
kind: "component",
|
|
888
|
+
description: "A menu surface (dropdown / context menu panel). Presentational \u2014 pair with\nyour own trigger/positioning. Compose with MenuItem, MenuSeparator, MenuLabel.",
|
|
889
|
+
summary: "Dropdown / context menu surface \u2014 Nucleux agentic UI for React.",
|
|
890
|
+
keywords: [
|
|
891
|
+
"nucleux",
|
|
892
|
+
"react",
|
|
893
|
+
"ui",
|
|
894
|
+
"components",
|
|
895
|
+
"agentic",
|
|
896
|
+
"ai",
|
|
897
|
+
"tailwind",
|
|
898
|
+
"menu"
|
|
899
|
+
],
|
|
900
|
+
exports: [
|
|
901
|
+
"Menu",
|
|
902
|
+
"MenuItem",
|
|
903
|
+
"MenuSeparator",
|
|
904
|
+
"MenuLabel",
|
|
905
|
+
"MenuItemProps"
|
|
906
|
+
],
|
|
907
|
+
components: [
|
|
908
|
+
"Menu",
|
|
909
|
+
"MenuItem",
|
|
910
|
+
"MenuSeparator",
|
|
911
|
+
"MenuLabel"
|
|
912
|
+
],
|
|
913
|
+
import: 'import { Menu, MenuItem, MenuSeparator, MenuLabel } from "@nucleux/menu";',
|
|
914
|
+
installSingle: "pnpm add @nucleux/menu @nucleux/tokens",
|
|
915
|
+
props: [
|
|
916
|
+
{
|
|
917
|
+
name: "MenuItemProps",
|
|
918
|
+
source: "export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Leading icon. */\n icon?: React.ReactNode;\n /** Trailing content \u2014 shortcut hint or submenu chevron. */\n trailing?: React.ReactNode;\n /** Style as a destructive action. */\n destructive?: boolean;\n}"
|
|
919
|
+
}
|
|
920
|
+
],
|
|
921
|
+
readme: '# @nucleux/menu\n\nDropdown / context menu surface \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/menu @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Menu, MenuItem, MenuSeparator, MenuLabel } from "@nucleux/menu";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
922
|
+
peerDependencies: {
|
|
923
|
+
react: ">=18",
|
|
924
|
+
"react-dom": ">=18"
|
|
925
|
+
}
|
|
926
|
+
},
|
|
927
|
+
{
|
|
928
|
+
name: "message",
|
|
929
|
+
package: "@nucleux/message",
|
|
930
|
+
kind: "component",
|
|
931
|
+
description: "A single chat message row with an avatar and a role-aware bubble. Pass\n`content` for plain streamed text, or `children` for rich content\n(markdown, code blocks, tool calls, etc.).",
|
|
932
|
+
summary: "Chat message row with avatar + bubble \u2014 Nucleux agentic UI for React.",
|
|
933
|
+
keywords: [
|
|
934
|
+
"nucleux",
|
|
935
|
+
"react",
|
|
936
|
+
"ui",
|
|
937
|
+
"components",
|
|
938
|
+
"agentic",
|
|
939
|
+
"ai",
|
|
940
|
+
"tailwind",
|
|
941
|
+
"message"
|
|
942
|
+
],
|
|
943
|
+
exports: [
|
|
944
|
+
"Message",
|
|
945
|
+
"MessageProps"
|
|
946
|
+
],
|
|
947
|
+
components: [
|
|
948
|
+
"Message"
|
|
949
|
+
],
|
|
950
|
+
import: 'import { Message } from "@nucleux/message";',
|
|
951
|
+
installSingle: "pnpm add @nucleux/message @nucleux/tokens",
|
|
952
|
+
props: [
|
|
953
|
+
{
|
|
954
|
+
name: "MessageProps",
|
|
955
|
+
source: "export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Who authored the message. */\n role: MessageRole;\n /** Message text. Ignored if `children` is provided. */\n content?: string;\n /** True while the assistant is still streaming this message. */\n streaming?: boolean;\n /** Hide the avatar (e.g. for consecutive same-role messages). */\n hideAvatar?: boolean;\n /** Custom node rendered in place of the default avatar. */\n avatar?: React.ReactNode;\n}"
|
|
956
|
+
}
|
|
957
|
+
],
|
|
958
|
+
readme: '# @nucleux/message\n\nChat message row with avatar + bubble \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/message @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Message } from "@nucleux/message";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
959
|
+
peerDependencies: {
|
|
960
|
+
react: ">=18",
|
|
961
|
+
"react-dom": ">=18"
|
|
962
|
+
}
|
|
963
|
+
},
|
|
964
|
+
{
|
|
965
|
+
name: "modular-consent",
|
|
966
|
+
package: "@nucleux/modular-consent",
|
|
967
|
+
kind: "component",
|
|
968
|
+
description: "An agent permission/consent panel \u2014 a titled card with a checklist of\ngranular permissions and Deny / (Always Allow) / Allow actions. Built from\n{@link RichCheckboxOption} + {@link Button}. Place inline or inside a Dialog.",
|
|
969
|
+
summary: "Agent permission/consent panel \u2014 Nucleux agentic UI for React.",
|
|
970
|
+
keywords: [
|
|
971
|
+
"nucleux",
|
|
972
|
+
"react",
|
|
973
|
+
"ui",
|
|
974
|
+
"components",
|
|
975
|
+
"agentic",
|
|
976
|
+
"ai",
|
|
977
|
+
"tailwind",
|
|
978
|
+
"modular-consent"
|
|
979
|
+
],
|
|
980
|
+
exports: [
|
|
981
|
+
"ModularConsent",
|
|
982
|
+
"ConsentPermission",
|
|
983
|
+
"ModularConsentProps"
|
|
984
|
+
],
|
|
985
|
+
components: [
|
|
986
|
+
"ModularConsent",
|
|
987
|
+
"ConsentPermission"
|
|
988
|
+
],
|
|
989
|
+
import: 'import { ModularConsent, ConsentPermission } from "@nucleux/modular-consent";',
|
|
990
|
+
installSingle: "pnpm add @nucleux/modular-consent @nucleux/tokens",
|
|
991
|
+
props: [
|
|
992
|
+
{
|
|
993
|
+
name: "ModularConsentProps",
|
|
994
|
+
source: 'export interface ModularConsentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {\n title: React.ReactNode;\n description?: React.ReactNode;\n /** The permissions the user can grant. */\n permissions: ConsentPermission[];\n denyLabel?: string;\n onDeny?: () => void;\n /** Optional middle action, e.g. "Always Allow". */\n secondaryLabel?: string;\n onSecondary?: (selectedIds: string[]) => void;\n allowLabel?: string;\n /** Called with the ids of the granted permissions. */\n onAllow?: (selectedIds: string[]) => void;\n}'
|
|
995
|
+
}
|
|
996
|
+
],
|
|
997
|
+
readme: '# @nucleux/modular-consent\n\nAgent permission/consent panel \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/modular-consent @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { ModularConsent } from "@nucleux/modular-consent";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
998
|
+
peerDependencies: {
|
|
999
|
+
react: ">=18",
|
|
1000
|
+
"react-dom": ">=18"
|
|
1001
|
+
}
|
|
1002
|
+
},
|
|
1003
|
+
{
|
|
1004
|
+
name: "nav-panel",
|
|
1005
|
+
package: "@nucleux/nav-panel",
|
|
1006
|
+
kind: "component",
|
|
1007
|
+
description: "An expanded vertical navigation panel (docs/library sidebar) with a header,\ncollapsible {@link NavSection}s, and text {@link NavItem}s.",
|
|
1008
|
+
summary: "Expanded navigation panel with collapsible sections \u2014 Nucleux agentic UI for React.",
|
|
1009
|
+
keywords: [
|
|
1010
|
+
"nucleux",
|
|
1011
|
+
"react",
|
|
1012
|
+
"ui",
|
|
1013
|
+
"components",
|
|
1014
|
+
"agentic",
|
|
1015
|
+
"ai",
|
|
1016
|
+
"tailwind",
|
|
1017
|
+
"nav-panel"
|
|
1018
|
+
],
|
|
1019
|
+
exports: [
|
|
1020
|
+
"NavPanel",
|
|
1021
|
+
"NavPanelHeader",
|
|
1022
|
+
"NavSection",
|
|
1023
|
+
"NavItem",
|
|
1024
|
+
"NavPanelHeaderProps",
|
|
1025
|
+
"NavSectionProps",
|
|
1026
|
+
"NavItemProps"
|
|
1027
|
+
],
|
|
1028
|
+
components: [
|
|
1029
|
+
"NavPanel",
|
|
1030
|
+
"NavPanelHeader",
|
|
1031
|
+
"NavSection",
|
|
1032
|
+
"NavItem"
|
|
1033
|
+
],
|
|
1034
|
+
import: 'import { NavPanel, NavPanelHeader, NavSection, NavItem } from "@nucleux/nav-panel";',
|
|
1035
|
+
installSingle: "pnpm add @nucleux/nav-panel @nucleux/tokens",
|
|
1036
|
+
props: [
|
|
1037
|
+
{
|
|
1038
|
+
name: "NavPanelHeaderProps",
|
|
1039
|
+
source: "export interface NavPanelHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Trailing meta text, e.g. a count. */\n meta?: React.ReactNode;\n}"
|
|
1040
|
+
},
|
|
1041
|
+
{
|
|
1042
|
+
name: "NavSectionProps",
|
|
1043
|
+
source: 'export interface NavSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {\n /** Section title. */\n title: React.ReactNode;\n /** Whether the section is collapsible (shows a chevron toggle). */\n collapsible?: boolean;\n /** Initial open state (collapsible sections). */\n defaultOpen?: boolean;\n}'
|
|
1044
|
+
},
|
|
1045
|
+
{
|
|
1046
|
+
name: "NavItemProps",
|
|
1047
|
+
source: "export interface NavItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Marks the item as the current page. */\n active?: boolean;\n}"
|
|
1048
|
+
}
|
|
1049
|
+
],
|
|
1050
|
+
readme: '# @nucleux/nav-panel\n\nExpanded navigation panel with collapsible sections \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/nav-panel @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { NavPanel, NavPanelHeader, NavSection, NavItem } from "@nucleux/nav-panel";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1051
|
+
peerDependencies: {
|
|
1052
|
+
react: ">=18",
|
|
1053
|
+
"react-dom": ">=18"
|
|
1054
|
+
}
|
|
1055
|
+
},
|
|
1056
|
+
{
|
|
1057
|
+
name: "page-header",
|
|
1058
|
+
package: "@nucleux/page-header",
|
|
1059
|
+
kind: "component",
|
|
1060
|
+
description: 'A page header block \u2014 an optional badge row, a large title, a description,\nand optional trailing actions. Source: Figma "AIUX / Page Header Block".',
|
|
1061
|
+
summary: "PageHeader \u2014 badges row, title, and description block \u2014 Nucleux agentic UI for React.",
|
|
1062
|
+
keywords: [
|
|
1063
|
+
"nucleux",
|
|
1064
|
+
"react",
|
|
1065
|
+
"ui",
|
|
1066
|
+
"components",
|
|
1067
|
+
"agentic",
|
|
1068
|
+
"ai",
|
|
1069
|
+
"tailwind",
|
|
1070
|
+
"page-header"
|
|
1071
|
+
],
|
|
1072
|
+
exports: [
|
|
1073
|
+
"PageHeader",
|
|
1074
|
+
"PageHeaderProps"
|
|
1075
|
+
],
|
|
1076
|
+
components: [
|
|
1077
|
+
"PageHeader"
|
|
1078
|
+
],
|
|
1079
|
+
import: 'import { PageHeader } from "@nucleux/page-header";',
|
|
1080
|
+
installSingle: "pnpm add @nucleux/page-header @nucleux/tokens",
|
|
1081
|
+
props: [
|
|
1082
|
+
{
|
|
1083
|
+
name: "PageHeaderProps",
|
|
1084
|
+
source: 'export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {\n /** Page title (large heading). */\n title: React.ReactNode;\n /** Supporting description below the title. */\n description?: React.ReactNode;\n /** Badges / tags rendered in a row above the title. */\n badges?: React.ReactNode;\n /** Trailing actions aligned to the right of the title. */\n actions?: React.ReactNode;\n}'
|
|
1085
|
+
}
|
|
1086
|
+
],
|
|
1087
|
+
readme: '# @nucleux/page-header\n\nPageHeader \u2014 badges row, title, and description block \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/page-header @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { PageHeader } from "@nucleux/page-header";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1088
|
+
peerDependencies: {
|
|
1089
|
+
react: ">=18",
|
|
1090
|
+
"react-dom": ">=18"
|
|
1091
|
+
}
|
|
1092
|
+
},
|
|
1093
|
+
{
|
|
1094
|
+
name: "popover",
|
|
1095
|
+
package: "@nucleux/popover",
|
|
1096
|
+
kind: "component",
|
|
1097
|
+
description: "A click-triggered popover. Compose PopoverTrigger + PopoverContent. Closes on\noutside click or Escape. Content is positioned relative to the trigger.",
|
|
1098
|
+
summary: "Click popover with outside-click/Escape \u2014 Nucleux agentic UI for React.",
|
|
1099
|
+
keywords: [
|
|
1100
|
+
"nucleux",
|
|
1101
|
+
"react",
|
|
1102
|
+
"ui",
|
|
1103
|
+
"components",
|
|
1104
|
+
"agentic",
|
|
1105
|
+
"ai",
|
|
1106
|
+
"tailwind",
|
|
1107
|
+
"popover"
|
|
1108
|
+
],
|
|
1109
|
+
exports: [
|
|
1110
|
+
"Popover",
|
|
1111
|
+
"PopoverTrigger",
|
|
1112
|
+
"PopoverContent",
|
|
1113
|
+
"PopoverProps",
|
|
1114
|
+
"PopoverContentProps"
|
|
1115
|
+
],
|
|
1116
|
+
components: [
|
|
1117
|
+
"Popover",
|
|
1118
|
+
"PopoverTrigger",
|
|
1119
|
+
"PopoverContent"
|
|
1120
|
+
],
|
|
1121
|
+
import: 'import { Popover, PopoverTrigger, PopoverContent } from "@nucleux/popover";',
|
|
1122
|
+
installSingle: "pnpm add @nucleux/popover @nucleux/tokens",
|
|
1123
|
+
props: [
|
|
1124
|
+
{
|
|
1125
|
+
name: "PopoverProps",
|
|
1126
|
+
source: "export interface PopoverProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children: React.ReactNode;\n}"
|
|
1127
|
+
},
|
|
1128
|
+
{
|
|
1129
|
+
name: "PopoverContentProps",
|
|
1130
|
+
source: 'export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Horizontal alignment relative to the trigger. */\n align?: "start" | "end";\n}'
|
|
1131
|
+
}
|
|
1132
|
+
],
|
|
1133
|
+
readme: '# @nucleux/popover\n\nClick popover with outside-click/Escape \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/popover @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Popover, PopoverTrigger, PopoverContent } from "@nucleux/popover";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1134
|
+
peerDependencies: {
|
|
1135
|
+
react: ">=18",
|
|
1136
|
+
"react-dom": ">=18"
|
|
1137
|
+
}
|
|
1138
|
+
},
|
|
1139
|
+
{
|
|
1140
|
+
name: "progress",
|
|
1141
|
+
package: "@nucleux/progress",
|
|
1142
|
+
kind: "component",
|
|
1143
|
+
description: "A horizontal progress bar. Determinate when `value` is set, else indeterminate.",
|
|
1144
|
+
summary: "Determinate/indeterminate progress bar \u2014 Nucleux agentic UI for React.",
|
|
1145
|
+
keywords: [
|
|
1146
|
+
"nucleux",
|
|
1147
|
+
"react",
|
|
1148
|
+
"ui",
|
|
1149
|
+
"components",
|
|
1150
|
+
"agentic",
|
|
1151
|
+
"ai",
|
|
1152
|
+
"tailwind",
|
|
1153
|
+
"progress"
|
|
1154
|
+
],
|
|
1155
|
+
exports: [
|
|
1156
|
+
"Progress",
|
|
1157
|
+
"ProgressSize",
|
|
1158
|
+
"ProgressProps"
|
|
1159
|
+
],
|
|
1160
|
+
components: [
|
|
1161
|
+
"Progress",
|
|
1162
|
+
"ProgressSize"
|
|
1163
|
+
],
|
|
1164
|
+
import: 'import { Progress, ProgressSize } from "@nucleux/progress";',
|
|
1165
|
+
installSingle: "pnpm add @nucleux/progress @nucleux/tokens",
|
|
1166
|
+
props: [
|
|
1167
|
+
{
|
|
1168
|
+
name: "ProgressProps",
|
|
1169
|
+
source: 'export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Current value (0\u2013max). Omit for an indeterminate bar. */\n value?: number;\n /** Maximum value. */\n max?: number;\n size?: ProgressSize;\n /** Class applied to the filled indicator (e.g. "bg-success"). */\n indicatorClassName?: string;\n}'
|
|
1170
|
+
}
|
|
1171
|
+
],
|
|
1172
|
+
readme: '# @nucleux/progress\n\nDeterminate/indeterminate progress bar \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/progress @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Progress } from "@nucleux/progress";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1173
|
+
peerDependencies: {
|
|
1174
|
+
react: ">=18",
|
|
1175
|
+
"react-dom": ">=18"
|
|
1176
|
+
}
|
|
1177
|
+
},
|
|
1178
|
+
{
|
|
1179
|
+
name: "radio-group",
|
|
1180
|
+
package: "@nucleux/radio-group",
|
|
1181
|
+
kind: "component",
|
|
1182
|
+
description: "Single-select radio group. Compose with {@link Radio}.",
|
|
1183
|
+
summary: "Single-select radio group \u2014 Nucleux agentic UI for React.",
|
|
1184
|
+
keywords: [
|
|
1185
|
+
"nucleux",
|
|
1186
|
+
"react",
|
|
1187
|
+
"ui",
|
|
1188
|
+
"components",
|
|
1189
|
+
"agentic",
|
|
1190
|
+
"ai",
|
|
1191
|
+
"tailwind",
|
|
1192
|
+
"radio-group"
|
|
1193
|
+
],
|
|
1194
|
+
exports: [
|
|
1195
|
+
"RadioGroup",
|
|
1196
|
+
"Radio",
|
|
1197
|
+
"RadioGroupProps",
|
|
1198
|
+
"RadioProps"
|
|
1199
|
+
],
|
|
1200
|
+
components: [
|
|
1201
|
+
"RadioGroup",
|
|
1202
|
+
"Radio"
|
|
1203
|
+
],
|
|
1204
|
+
import: 'import { RadioGroup, Radio } from "@nucleux/radio-group";',
|
|
1205
|
+
installSingle: "pnpm add @nucleux/radio-group @nucleux/tokens",
|
|
1206
|
+
props: [
|
|
1207
|
+
{
|
|
1208
|
+
name: "RadioGroupProps",
|
|
1209
|
+
source: 'export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {\n /** Controlled selected value. */\n value?: string;\n /** Initial value when uncontrolled. */\n defaultValue?: string;\n /** Called with the newly selected value. */\n onValueChange?: (value: string) => void;\n /** Accessible group label. */\n label?: string;\n}'
|
|
1210
|
+
},
|
|
1211
|
+
{
|
|
1212
|
+
name: "RadioProps",
|
|
1213
|
+
source: 'export interface RadioProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type"> {\n /** The value this radio represents. */\n value: string;\n}'
|
|
1214
|
+
}
|
|
1215
|
+
],
|
|
1216
|
+
readme: '# @nucleux/radio-group\n\nSingle-select radio group \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/radio-group @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { RadioGroup, Radio } from "@nucleux/radio-group";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1217
|
+
peerDependencies: {
|
|
1218
|
+
react: ">=18",
|
|
1219
|
+
"react-dom": ">=18"
|
|
1220
|
+
}
|
|
1221
|
+
},
|
|
1222
|
+
{
|
|
1223
|
+
name: "react",
|
|
1224
|
+
package: "@nucleux/react",
|
|
1225
|
+
kind: "infrastructure",
|
|
1226
|
+
description: "Umbrella package \u2014 every Nucleux component, hook, and util \u2014 Nucleux agentic UI for React.",
|
|
1227
|
+
summary: "Umbrella package \u2014 every Nucleux component, hook, and util \u2014 Nucleux agentic UI for React.",
|
|
1228
|
+
keywords: [
|
|
1229
|
+
"nucleux",
|
|
1230
|
+
"react",
|
|
1231
|
+
"ui",
|
|
1232
|
+
"components",
|
|
1233
|
+
"agentic",
|
|
1234
|
+
"ai",
|
|
1235
|
+
"tailwind"
|
|
1236
|
+
],
|
|
1237
|
+
exports: [],
|
|
1238
|
+
components: [],
|
|
1239
|
+
import: "",
|
|
1240
|
+
installSingle: "pnpm add @nucleux/react",
|
|
1241
|
+
props: [],
|
|
1242
|
+
readme: '# @nucleux/react\n\nUmbrella package \u2014 every Nucleux component, hook, and util \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/react @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Accordion, ActionTile, AgentComposer, Alert, Avatar, Badge } from "@nucleux/react";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1243
|
+
peerDependencies: {
|
|
1244
|
+
react: ">=18",
|
|
1245
|
+
"react-dom": ">=18"
|
|
1246
|
+
}
|
|
1247
|
+
},
|
|
1248
|
+
{
|
|
1249
|
+
name: "reasoning",
|
|
1250
|
+
package: "@nucleux/reasoning",
|
|
1251
|
+
kind: "component",
|
|
1252
|
+
description: "A collapsible panel for an agent's chain-of-thought / reasoning tokens,\nvisually de-emphasized from the final answer.",
|
|
1253
|
+
summary: "Collapsible chain-of-thought panel \u2014 Nucleux agentic UI for React.",
|
|
1254
|
+
keywords: [
|
|
1255
|
+
"nucleux",
|
|
1256
|
+
"react",
|
|
1257
|
+
"ui",
|
|
1258
|
+
"components",
|
|
1259
|
+
"agentic",
|
|
1260
|
+
"ai",
|
|
1261
|
+
"tailwind",
|
|
1262
|
+
"reasoning"
|
|
1263
|
+
],
|
|
1264
|
+
exports: [
|
|
1265
|
+
"Reasoning",
|
|
1266
|
+
"ReasoningProps"
|
|
1267
|
+
],
|
|
1268
|
+
components: [
|
|
1269
|
+
"Reasoning"
|
|
1270
|
+
],
|
|
1271
|
+
import: 'import { Reasoning } from "@nucleux/reasoning";',
|
|
1272
|
+
installSingle: "pnpm add @nucleux/reasoning @nucleux/tokens",
|
|
1273
|
+
props: [
|
|
1274
|
+
{
|
|
1275
|
+
name: "ReasoningProps",
|
|
1276
|
+
source: "export interface ReasoningProps extends React.HTMLAttributes<HTMLDivElement> {\n /** The reasoning / thinking text to reveal. */\n content: string;\n /** Whether reasoning is still streaming (shows a subtle pulse). */\n streaming?: boolean;\n /** Expanded by default. */\n defaultOpen?: boolean;\n /** Header label. */\n label?: string;\n}"
|
|
1277
|
+
}
|
|
1278
|
+
],
|
|
1279
|
+
readme: '# @nucleux/reasoning\n\nCollapsible chain-of-thought panel \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/reasoning @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Reasoning } from "@nucleux/reasoning";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1280
|
+
peerDependencies: {
|
|
1281
|
+
react: ">=18",
|
|
1282
|
+
"react-dom": ">=18"
|
|
1283
|
+
}
|
|
1284
|
+
},
|
|
1285
|
+
{
|
|
1286
|
+
name: "related-patterns-grid",
|
|
1287
|
+
package: "@nucleux/related-patterns-grid",
|
|
1288
|
+
kind: "component",
|
|
1289
|
+
description: "A responsive grid of {@link RelatedPatternCard}s.",
|
|
1290
|
+
summary: "RelatedPatternsGrid \u2014 grid of related pattern cards \u2014 Nucleux agentic UI for React.",
|
|
1291
|
+
keywords: [
|
|
1292
|
+
"nucleux",
|
|
1293
|
+
"react",
|
|
1294
|
+
"ui",
|
|
1295
|
+
"components",
|
|
1296
|
+
"agentic",
|
|
1297
|
+
"ai",
|
|
1298
|
+
"tailwind",
|
|
1299
|
+
"related-patterns-grid"
|
|
1300
|
+
],
|
|
1301
|
+
exports: [
|
|
1302
|
+
"RelatedPatternsGrid",
|
|
1303
|
+
"RelatedPatternCard",
|
|
1304
|
+
"RelatedPatternsGridProps",
|
|
1305
|
+
"RelatedPatternCardProps"
|
|
1306
|
+
],
|
|
1307
|
+
components: [
|
|
1308
|
+
"RelatedPatternsGrid",
|
|
1309
|
+
"RelatedPatternCard"
|
|
1310
|
+
],
|
|
1311
|
+
import: 'import { RelatedPatternsGrid, RelatedPatternCard } from "@nucleux/related-patterns-grid";',
|
|
1312
|
+
installSingle: "pnpm add @nucleux/related-patterns-grid @nucleux/tokens",
|
|
1313
|
+
props: [
|
|
1314
|
+
{
|
|
1315
|
+
name: "RelatedPatternsGridProps",
|
|
1316
|
+
source: "export interface RelatedPatternsGridProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Number of columns (default 2). */\n columns?: number;\n}"
|
|
1317
|
+
},
|
|
1318
|
+
{
|
|
1319
|
+
name: "RelatedPatternCardProps",
|
|
1320
|
+
source: 'export interface RelatedPatternCardProps\n extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {\n /** Card title. */\n title: React.ReactNode;\n /** Supporting meta text, e.g. "Onboarding \xB7 Trust & Disclosure". */\n meta?: React.ReactNode;\n}'
|
|
1321
|
+
}
|
|
1322
|
+
],
|
|
1323
|
+
readme: '# @nucleux/related-patterns-grid\n\nRelatedPatternsGrid \u2014 grid of related pattern cards \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/related-patterns-grid @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { RelatedPatternsGrid } from "@nucleux/related-patterns-grid";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1324
|
+
peerDependencies: {
|
|
1325
|
+
react: ">=18",
|
|
1326
|
+
"react-dom": ">=18"
|
|
1327
|
+
}
|
|
1328
|
+
},
|
|
1329
|
+
{
|
|
1330
|
+
name: "rich-checkbox-group",
|
|
1331
|
+
package: "@nucleux/rich-checkbox-group",
|
|
1332
|
+
kind: "component",
|
|
1333
|
+
description: "A selectable option card with a checkbox, label, and description. The whole\ncard is one accessible checkbox control (click anywhere to toggle).",
|
|
1334
|
+
summary: "Selectable option cards with checkboxes \u2014 Nucleux agentic UI for React.",
|
|
1335
|
+
keywords: [
|
|
1336
|
+
"nucleux",
|
|
1337
|
+
"react",
|
|
1338
|
+
"ui",
|
|
1339
|
+
"components",
|
|
1340
|
+
"agentic",
|
|
1341
|
+
"ai",
|
|
1342
|
+
"tailwind",
|
|
1343
|
+
"rich-checkbox-group"
|
|
1344
|
+
],
|
|
1345
|
+
exports: [
|
|
1346
|
+
"RichCheckboxOption",
|
|
1347
|
+
"RichCheckboxGroup",
|
|
1348
|
+
"RichCheckboxOptionProps",
|
|
1349
|
+
"RichCheckboxGroupProps"
|
|
1350
|
+
],
|
|
1351
|
+
components: [
|
|
1352
|
+
"RichCheckboxOption",
|
|
1353
|
+
"RichCheckboxGroup"
|
|
1354
|
+
],
|
|
1355
|
+
import: 'import { RichCheckboxOption, RichCheckboxGroup } from "@nucleux/rich-checkbox-group";',
|
|
1356
|
+
installSingle: "pnpm add @nucleux/rich-checkbox-group @nucleux/tokens",
|
|
1357
|
+
props: [
|
|
1358
|
+
{
|
|
1359
|
+
name: "RichCheckboxOptionProps",
|
|
1360
|
+
source: 'export interface RichCheckboxOptionProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "type"> {\n /** Primary label. */\n label: React.ReactNode;\n /** Supporting secondary text. */\n description?: React.ReactNode;\n /** Controlled checked state. */\n checked?: boolean;\n /** Initial state when uncontrolled. */\n defaultChecked?: boolean;\n /** Called with the next checked state. */\n onCheckedChange?: (checked: boolean) => void;\n}'
|
|
1361
|
+
},
|
|
1362
|
+
{
|
|
1363
|
+
name: "RichCheckboxGroupProps",
|
|
1364
|
+
source: "export interface RichCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Accessible group label. */\n label?: string;\n}"
|
|
1365
|
+
}
|
|
1366
|
+
],
|
|
1367
|
+
readme: '# @nucleux/rich-checkbox-group\n\nSelectable option cards with checkboxes \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/rich-checkbox-group @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { RichCheckboxOption, RichCheckboxGroup } from "@nucleux/rich-checkbox-group";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1368
|
+
peerDependencies: {
|
|
1369
|
+
react: ">=18",
|
|
1370
|
+
"react-dom": ">=18"
|
|
1371
|
+
}
|
|
1372
|
+
},
|
|
1373
|
+
{
|
|
1374
|
+
name: "right-sidebar",
|
|
1375
|
+
package: "@nucleux/right-sidebar",
|
|
1376
|
+
kind: "component",
|
|
1377
|
+
description: 'A right-hand contextual panel \u2014 an "on this page" table of contents plus a\nmetadata list. Compose with the parts below. Source: Figma "AIUX / Right Sidebar".',
|
|
1378
|
+
summary: "RightSidebar \u2014 on-this-page table of contents + metadata panel \u2014 Nucleux agentic UI for React.",
|
|
1379
|
+
keywords: [
|
|
1380
|
+
"nucleux",
|
|
1381
|
+
"react",
|
|
1382
|
+
"ui",
|
|
1383
|
+
"components",
|
|
1384
|
+
"agentic",
|
|
1385
|
+
"ai",
|
|
1386
|
+
"tailwind",
|
|
1387
|
+
"right-sidebar"
|
|
1388
|
+
],
|
|
1389
|
+
exports: [
|
|
1390
|
+
"RightSidebar",
|
|
1391
|
+
"RightSidebarLabel",
|
|
1392
|
+
"RightSidebarAnchor",
|
|
1393
|
+
"RightSidebarMeta",
|
|
1394
|
+
"RightSidebarSeparator",
|
|
1395
|
+
"RightSidebarAnchorProps",
|
|
1396
|
+
"RightSidebarMetaProps"
|
|
1397
|
+
],
|
|
1398
|
+
components: [
|
|
1399
|
+
"RightSidebar",
|
|
1400
|
+
"RightSidebarLabel",
|
|
1401
|
+
"RightSidebarAnchor",
|
|
1402
|
+
"RightSidebarMeta",
|
|
1403
|
+
"RightSidebarSeparator"
|
|
1404
|
+
],
|
|
1405
|
+
import: 'import { RightSidebar, RightSidebarLabel, RightSidebarAnchor, RightSidebarMeta } from "@nucleux/right-sidebar";',
|
|
1406
|
+
installSingle: "pnpm add @nucleux/right-sidebar @nucleux/tokens",
|
|
1407
|
+
props: [
|
|
1408
|
+
{
|
|
1409
|
+
name: "RightSidebarAnchorProps",
|
|
1410
|
+
source: "export interface RightSidebarAnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Marks the current in-view anchor. */\n active?: boolean;\n}"
|
|
1411
|
+
},
|
|
1412
|
+
{
|
|
1413
|
+
name: "RightSidebarMetaProps",
|
|
1414
|
+
source: 'export interface RightSidebarMetaProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Field name, e.g. "Stage". */\n label: React.ReactNode;\n /** Field value, e.g. "Onboarding". */\n value: React.ReactNode;\n}'
|
|
1415
|
+
}
|
|
1416
|
+
],
|
|
1417
|
+
readme: '# @nucleux/right-sidebar\n\nRightSidebar \u2014 on-this-page table of contents + metadata panel \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/right-sidebar @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { RightSidebar } from "@nucleux/right-sidebar";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1418
|
+
peerDependencies: {
|
|
1419
|
+
react: ">=18",
|
|
1420
|
+
"react-dom": ">=18"
|
|
1421
|
+
}
|
|
1422
|
+
},
|
|
1423
|
+
{
|
|
1424
|
+
name: "search-input",
|
|
1425
|
+
package: "@nucleux/search-input",
|
|
1426
|
+
kind: "component",
|
|
1427
|
+
description: 'Compact search field used in the top navigation ("Ask or search").',
|
|
1428
|
+
summary: "Compact search field \u2014 Nucleux agentic UI for React.",
|
|
1429
|
+
keywords: [
|
|
1430
|
+
"nucleux",
|
|
1431
|
+
"react",
|
|
1432
|
+
"ui",
|
|
1433
|
+
"components",
|
|
1434
|
+
"agentic",
|
|
1435
|
+
"ai",
|
|
1436
|
+
"tailwind",
|
|
1437
|
+
"search-input"
|
|
1438
|
+
],
|
|
1439
|
+
exports: [
|
|
1440
|
+
"SearchInput",
|
|
1441
|
+
"SearchInputProps"
|
|
1442
|
+
],
|
|
1443
|
+
components: [
|
|
1444
|
+
"SearchInput"
|
|
1445
|
+
],
|
|
1446
|
+
import: 'import { SearchInput } from "@nucleux/search-input";',
|
|
1447
|
+
installSingle: "pnpm add @nucleux/search-input @nucleux/tokens",
|
|
1448
|
+
props: [
|
|
1449
|
+
{
|
|
1450
|
+
name: "SearchInputProps",
|
|
1451
|
+
source: 'export interface SearchInputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {\n /** Custom leading icon (defaults to a magnifier). */\n icon?: React.ReactNode;\n /** Optional trailing content, e.g. a keyboard-shortcut hint. */\n trailing?: React.ReactNode;\n /** Wrapper className (the input fills the remaining space). */\n containerClassName?: string;\n}'
|
|
1452
|
+
}
|
|
1453
|
+
],
|
|
1454
|
+
readme: '# @nucleux/search-input\n\nCompact search field \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/search-input @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { SearchInput } from "@nucleux/search-input";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1455
|
+
peerDependencies: {
|
|
1456
|
+
react: ">=18",
|
|
1457
|
+
"react-dom": ">=18"
|
|
1458
|
+
}
|
|
1459
|
+
},
|
|
1460
|
+
{
|
|
1461
|
+
name: "select",
|
|
1462
|
+
package: "@nucleux/select",
|
|
1463
|
+
kind: "component",
|
|
1464
|
+
description: "An accessible select built on the native `<select>` element (full keyboard +\nscreen-reader support), styled to match the design system with a chevron.\nPass `<option>`s as children.",
|
|
1465
|
+
summary: "Accessible native-backed select with a chevron \u2014 Nucleux agentic UI for React.",
|
|
1466
|
+
keywords: [
|
|
1467
|
+
"nucleux",
|
|
1468
|
+
"react",
|
|
1469
|
+
"ui",
|
|
1470
|
+
"components",
|
|
1471
|
+
"agentic",
|
|
1472
|
+
"ai",
|
|
1473
|
+
"tailwind",
|
|
1474
|
+
"select"
|
|
1475
|
+
],
|
|
1476
|
+
exports: [
|
|
1477
|
+
"Select",
|
|
1478
|
+
"SelectProps"
|
|
1479
|
+
],
|
|
1480
|
+
components: [
|
|
1481
|
+
"Select"
|
|
1482
|
+
],
|
|
1483
|
+
import: 'import { Select } from "@nucleux/select";',
|
|
1484
|
+
installSingle: "pnpm add @nucleux/select @nucleux/tokens",
|
|
1485
|
+
props: [
|
|
1486
|
+
{
|
|
1487
|
+
name: "SelectProps",
|
|
1488
|
+
source: "export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n /** Wrapper className (the chevron is positioned within it). */\n containerClassName?: string;\n}"
|
|
1489
|
+
}
|
|
1490
|
+
],
|
|
1491
|
+
readme: '# @nucleux/select\n\nAccessible native-backed select with a chevron \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/select @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Select } from "@nucleux/select";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1492
|
+
peerDependencies: {
|
|
1493
|
+
react: ">=18",
|
|
1494
|
+
"react-dom": ">=18"
|
|
1495
|
+
}
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
name: "separator",
|
|
1499
|
+
package: "@nucleux/separator",
|
|
1500
|
+
kind: "component",
|
|
1501
|
+
description: "A thin dividing line between content, horizontal or vertical.",
|
|
1502
|
+
summary: "Horizontal or vertical divider \u2014 Nucleux agentic UI for React.",
|
|
1503
|
+
keywords: [
|
|
1504
|
+
"nucleux",
|
|
1505
|
+
"react",
|
|
1506
|
+
"ui",
|
|
1507
|
+
"components",
|
|
1508
|
+
"agentic",
|
|
1509
|
+
"ai",
|
|
1510
|
+
"tailwind",
|
|
1511
|
+
"separator"
|
|
1512
|
+
],
|
|
1513
|
+
exports: [
|
|
1514
|
+
"Separator",
|
|
1515
|
+
"SeparatorProps"
|
|
1516
|
+
],
|
|
1517
|
+
components: [
|
|
1518
|
+
"Separator"
|
|
1519
|
+
],
|
|
1520
|
+
import: 'import { Separator } from "@nucleux/separator";',
|
|
1521
|
+
installSingle: "pnpm add @nucleux/separator @nucleux/tokens",
|
|
1522
|
+
props: [
|
|
1523
|
+
{
|
|
1524
|
+
name: "SeparatorProps",
|
|
1525
|
+
source: 'export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: "horizontal" | "vertical";\n /** Purely visual (no semantic meaning for assistive tech). Defaults to true. */\n decorative?: boolean;\n}'
|
|
1526
|
+
}
|
|
1527
|
+
],
|
|
1528
|
+
readme: '# @nucleux/separator\n\nHorizontal or vertical divider \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/separator @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Separator } from "@nucleux/separator";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1529
|
+
peerDependencies: {
|
|
1530
|
+
react: ">=18",
|
|
1531
|
+
"react-dom": ">=18"
|
|
1532
|
+
}
|
|
1533
|
+
},
|
|
1534
|
+
{
|
|
1535
|
+
name: "sheet",
|
|
1536
|
+
package: "@nucleux/sheet",
|
|
1537
|
+
kind: "component",
|
|
1538
|
+
description: "A slide-over drawer anchored to a screen edge. Controlled via `open` /\n`onOpenChange`; closes on overlay click, Escape, or {@link SheetClose}.",
|
|
1539
|
+
summary: "Sheet \u2014 a slide-over drawer panel \u2014 Nucleux agentic UI for React.",
|
|
1540
|
+
keywords: [
|
|
1541
|
+
"nucleux",
|
|
1542
|
+
"react",
|
|
1543
|
+
"ui",
|
|
1544
|
+
"components",
|
|
1545
|
+
"agentic",
|
|
1546
|
+
"ai",
|
|
1547
|
+
"tailwind",
|
|
1548
|
+
"sheet",
|
|
1549
|
+
"drawer"
|
|
1550
|
+
],
|
|
1551
|
+
exports: [
|
|
1552
|
+
"Sheet",
|
|
1553
|
+
"SheetHeader",
|
|
1554
|
+
"SheetTitle",
|
|
1555
|
+
"SheetDescription",
|
|
1556
|
+
"SheetBody",
|
|
1557
|
+
"SheetFooter",
|
|
1558
|
+
"SheetClose",
|
|
1559
|
+
"SheetSide",
|
|
1560
|
+
"SheetProps"
|
|
1561
|
+
],
|
|
1562
|
+
components: [
|
|
1563
|
+
"Sheet",
|
|
1564
|
+
"SheetHeader",
|
|
1565
|
+
"SheetTitle",
|
|
1566
|
+
"SheetDescription",
|
|
1567
|
+
"SheetBody",
|
|
1568
|
+
"SheetFooter",
|
|
1569
|
+
"SheetClose",
|
|
1570
|
+
"SheetSide"
|
|
1571
|
+
],
|
|
1572
|
+
import: 'import { Sheet, SheetHeader, SheetTitle, SheetDescription } from "@nucleux/sheet";',
|
|
1573
|
+
installSingle: "pnpm add @nucleux/sheet @nucleux/tokens",
|
|
1574
|
+
props: [
|
|
1575
|
+
{
|
|
1576
|
+
name: "SheetProps",
|
|
1577
|
+
source: "export interface SheetProps {\n /** Whether the sheet is open. */\n open: boolean;\n /** Called when the sheet requests to close (overlay click / Escape / close button). */\n onOpenChange: (open: boolean) => void;\n /** Which edge the sheet slides in from. */\n side?: SheetSide;\n /** Panel content \u2014 compose SheetHeader/Title/Description/Body/Footer. */\n children: React.ReactNode;\n /** Class overrides for the panel. */\n className?: string;\n /** Disable closing on overlay click / Escape. */\n dismissible?: boolean;\n}"
|
|
1578
|
+
}
|
|
1579
|
+
],
|
|
1580
|
+
readme: '# @nucleux/sheet\n\nSheet \u2014 a slide-over drawer panel \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/sheet @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Sheet, SheetHeader, SheetTitle, SheetBody, SheetFooter } from "@nucleux/sheet";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1581
|
+
peerDependencies: {
|
|
1582
|
+
react: ">=18",
|
|
1583
|
+
"react-dom": ">=18"
|
|
1584
|
+
}
|
|
1585
|
+
},
|
|
1586
|
+
{
|
|
1587
|
+
name: "sidebar",
|
|
1588
|
+
package: "@nucleux/sidebar",
|
|
1589
|
+
kind: "component",
|
|
1590
|
+
description: "A single icon entry in a collapsed {@link Sidebar}.",
|
|
1591
|
+
summary: "Collapsed icon navigation rail \u2014 Nucleux agentic UI for React.",
|
|
1592
|
+
keywords: [
|
|
1593
|
+
"nucleux",
|
|
1594
|
+
"react",
|
|
1595
|
+
"ui",
|
|
1596
|
+
"components",
|
|
1597
|
+
"agentic",
|
|
1598
|
+
"ai",
|
|
1599
|
+
"tailwind",
|
|
1600
|
+
"sidebar"
|
|
1601
|
+
],
|
|
1602
|
+
exports: [
|
|
1603
|
+
"Sidebar",
|
|
1604
|
+
"SidebarItem",
|
|
1605
|
+
"SidebarSeparator",
|
|
1606
|
+
"SidebarProps",
|
|
1607
|
+
"SidebarItemProps"
|
|
1608
|
+
],
|
|
1609
|
+
components: [
|
|
1610
|
+
"Sidebar",
|
|
1611
|
+
"SidebarItem",
|
|
1612
|
+
"SidebarSeparator"
|
|
1613
|
+
],
|
|
1614
|
+
import: 'import { Sidebar, SidebarItem, SidebarSeparator } from "@nucleux/sidebar";',
|
|
1615
|
+
installSingle: "pnpm add @nucleux/sidebar @nucleux/tokens",
|
|
1616
|
+
props: [
|
|
1617
|
+
{
|
|
1618
|
+
name: "SidebarProps",
|
|
1619
|
+
source: '/**\n * Collapsed application sidebar \u2014 a narrow vertical icon rail. Compose a brand\n * mark, {@link SidebarItem}s, {@link SidebarSeparator}s, and a pinned `footer`:\n *\n * ```tsx\n * <Sidebar footer={<SidebarItem icon={<Settings />} label="Settings" />}>\n * <BrandMark />\n * <SidebarItem icon={<Home />} label="Home" active />\n * <SidebarItem icon={<Sparkles />} label="Assistant" />\n * </Sidebar>\n * ```\n */\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n /** Content pinned to the bottom of the rail (e.g. settings). */\n footer?: React.ReactNode;\n}'
|
|
1620
|
+
},
|
|
1621
|
+
{
|
|
1622
|
+
name: "SidebarItemProps",
|
|
1623
|
+
source: "export interface SidebarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** The icon to render. */\n icon: React.ReactNode;\n /** Accessible label + tooltip (rail is icon-only). */\n label: string;\n /** Marks the item as the current page. */\n active?: boolean;\n}"
|
|
1624
|
+
}
|
|
1625
|
+
],
|
|
1626
|
+
readme: '# @nucleux/sidebar\n\nCollapsed icon navigation rail \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/sidebar @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Sidebar, SidebarItem, SidebarSeparator } from "@nucleux/sidebar";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1627
|
+
peerDependencies: {
|
|
1628
|
+
react: ">=18",
|
|
1629
|
+
"react-dom": ">=18"
|
|
1630
|
+
}
|
|
1631
|
+
},
|
|
1632
|
+
{
|
|
1633
|
+
name: "streaming-text",
|
|
1634
|
+
package: "@nucleux/streaming-text",
|
|
1635
|
+
kind: "component",
|
|
1636
|
+
description: "Renders streamed model output with an optional blinking caret. The caret is\na pure CSS animation (see the `nx-caret-blink` keyframe in the preset), so it\ncosts nothing while idle.",
|
|
1637
|
+
summary: "Streamed model output with a caret \u2014 Nucleux agentic UI for React.",
|
|
1638
|
+
keywords: [
|
|
1639
|
+
"nucleux",
|
|
1640
|
+
"react",
|
|
1641
|
+
"ui",
|
|
1642
|
+
"components",
|
|
1643
|
+
"agentic",
|
|
1644
|
+
"ai",
|
|
1645
|
+
"tailwind",
|
|
1646
|
+
"streaming-text"
|
|
1647
|
+
],
|
|
1648
|
+
exports: [
|
|
1649
|
+
"StreamingText",
|
|
1650
|
+
"StreamingTextProps"
|
|
1651
|
+
],
|
|
1652
|
+
components: [
|
|
1653
|
+
"StreamingText"
|
|
1654
|
+
],
|
|
1655
|
+
import: 'import { StreamingText } from "@nucleux/streaming-text";',
|
|
1656
|
+
installSingle: "pnpm add @nucleux/streaming-text @nucleux/tokens",
|
|
1657
|
+
props: [
|
|
1658
|
+
{
|
|
1659
|
+
name: "StreamingTextProps",
|
|
1660
|
+
source: "export interface StreamingTextProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** The text produced so far. */\n text: string;\n /** Show the blinking caret (typically true while tokens are still arriving). */\n streaming?: boolean;\n}"
|
|
1661
|
+
}
|
|
1662
|
+
],
|
|
1663
|
+
readme: '# @nucleux/streaming-text\n\nStreamed model output with a caret \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/streaming-text @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { StreamingText } from "@nucleux/streaming-text";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1664
|
+
peerDependencies: {
|
|
1665
|
+
react: ">=18",
|
|
1666
|
+
"react-dom": ">=18"
|
|
1667
|
+
}
|
|
1668
|
+
},
|
|
1669
|
+
{
|
|
1670
|
+
name: "suggestions",
|
|
1671
|
+
package: "@nucleux/suggestions",
|
|
1672
|
+
kind: "component",
|
|
1673
|
+
description: "A single suggestion pill \u2014 a secondary-styled action button.",
|
|
1674
|
+
summary: "Prompt suggestion chips \u2014 Nucleux agentic UI for React.",
|
|
1675
|
+
keywords: [
|
|
1676
|
+
"nucleux",
|
|
1677
|
+
"react",
|
|
1678
|
+
"ui",
|
|
1679
|
+
"components",
|
|
1680
|
+
"agentic",
|
|
1681
|
+
"ai",
|
|
1682
|
+
"tailwind",
|
|
1683
|
+
"suggestions"
|
|
1684
|
+
],
|
|
1685
|
+
exports: [
|
|
1686
|
+
"SuggestionChip",
|
|
1687
|
+
"Suggestions",
|
|
1688
|
+
"SuggestionsProps"
|
|
1689
|
+
],
|
|
1690
|
+
components: [
|
|
1691
|
+
"SuggestionChip",
|
|
1692
|
+
"Suggestions"
|
|
1693
|
+
],
|
|
1694
|
+
import: 'import { SuggestionChip, Suggestions } from "@nucleux/suggestions";',
|
|
1695
|
+
installSingle: "pnpm add @nucleux/suggestions @nucleux/tokens",
|
|
1696
|
+
props: [
|
|
1697
|
+
{
|
|
1698
|
+
name: "SuggestionsProps",
|
|
1699
|
+
source: 'export interface SuggestionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {\n /** Convenience: render a chip per string and call `onSelect` on click. */\n items?: string[];\n /** Called with the selected suggestion text. */\n onSelect?: (value: string) => void;\n}'
|
|
1700
|
+
}
|
|
1701
|
+
],
|
|
1702
|
+
readme: '# @nucleux/suggestions\n\nPrompt suggestion chips \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/suggestions @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { SuggestionChip, Suggestions } from "@nucleux/suggestions";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1703
|
+
peerDependencies: {
|
|
1704
|
+
react: ">=18",
|
|
1705
|
+
"react-dom": ">=18"
|
|
1706
|
+
}
|
|
1707
|
+
},
|
|
1708
|
+
{
|
|
1709
|
+
name: "switch",
|
|
1710
|
+
package: "@nucleux/switch",
|
|
1711
|
+
kind: "component",
|
|
1712
|
+
description: "Accessible on/off toggle. Controlled via `checked`, or uncontrolled via `defaultChecked`.",
|
|
1713
|
+
summary: "Accessible on/off toggle \u2014 Nucleux agentic UI for React.",
|
|
1714
|
+
keywords: [
|
|
1715
|
+
"nucleux",
|
|
1716
|
+
"react",
|
|
1717
|
+
"ui",
|
|
1718
|
+
"components",
|
|
1719
|
+
"agentic",
|
|
1720
|
+
"ai",
|
|
1721
|
+
"tailwind",
|
|
1722
|
+
"switch"
|
|
1723
|
+
],
|
|
1724
|
+
exports: [
|
|
1725
|
+
"Switch",
|
|
1726
|
+
"SwitchSize",
|
|
1727
|
+
"SwitchProps"
|
|
1728
|
+
],
|
|
1729
|
+
components: [
|
|
1730
|
+
"Switch",
|
|
1731
|
+
"SwitchSize"
|
|
1732
|
+
],
|
|
1733
|
+
import: 'import { Switch, SwitchSize } from "@nucleux/switch";',
|
|
1734
|
+
installSingle: "pnpm add @nucleux/switch @nucleux/tokens",
|
|
1735
|
+
props: [
|
|
1736
|
+
{
|
|
1737
|
+
name: "SwitchProps",
|
|
1738
|
+
source: 'export interface SwitchProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {\n /** Controlled on/off state. */\n checked?: boolean;\n /** Initial state when uncontrolled. */\n defaultChecked?: boolean;\n /** Called with the next state when toggled. */\n onCheckedChange?: (checked: boolean) => void;\n size?: SwitchSize;\n}'
|
|
1739
|
+
}
|
|
1740
|
+
],
|
|
1741
|
+
readme: '# @nucleux/switch\n\nAccessible on/off toggle \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/switch @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Switch } from "@nucleux/switch";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1742
|
+
peerDependencies: {
|
|
1743
|
+
react: ">=18",
|
|
1744
|
+
"react-dom": ">=18"
|
|
1745
|
+
}
|
|
1746
|
+
},
|
|
1747
|
+
{
|
|
1748
|
+
name: "table",
|
|
1749
|
+
package: "@nucleux/table",
|
|
1750
|
+
kind: "component",
|
|
1751
|
+
description: "Scroll-wrapped table root.",
|
|
1752
|
+
summary: "Semantic table primitives \u2014 Nucleux agentic UI for React.",
|
|
1753
|
+
keywords: [
|
|
1754
|
+
"nucleux",
|
|
1755
|
+
"react",
|
|
1756
|
+
"ui",
|
|
1757
|
+
"components",
|
|
1758
|
+
"agentic",
|
|
1759
|
+
"ai",
|
|
1760
|
+
"tailwind",
|
|
1761
|
+
"table"
|
|
1762
|
+
],
|
|
1763
|
+
exports: [
|
|
1764
|
+
"Table",
|
|
1765
|
+
"TableHeader",
|
|
1766
|
+
"TableBody",
|
|
1767
|
+
"TableRow",
|
|
1768
|
+
"TableHead",
|
|
1769
|
+
"TableCell",
|
|
1770
|
+
"TableCaption"
|
|
1771
|
+
],
|
|
1772
|
+
components: [
|
|
1773
|
+
"Table",
|
|
1774
|
+
"TableHeader",
|
|
1775
|
+
"TableBody",
|
|
1776
|
+
"TableRow",
|
|
1777
|
+
"TableHead",
|
|
1778
|
+
"TableCell",
|
|
1779
|
+
"TableCaption"
|
|
1780
|
+
],
|
|
1781
|
+
import: 'import { Table, TableHeader, TableBody, TableRow } from "@nucleux/table";',
|
|
1782
|
+
installSingle: "pnpm add @nucleux/table @nucleux/tokens",
|
|
1783
|
+
props: [],
|
|
1784
|
+
readme: '# @nucleux/table\n\nSemantic table primitives \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/table @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@nucleux/table";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1785
|
+
peerDependencies: {
|
|
1786
|
+
react: ">=18",
|
|
1787
|
+
"react-dom": ">=18"
|
|
1788
|
+
}
|
|
1789
|
+
},
|
|
1790
|
+
{
|
|
1791
|
+
name: "tabs",
|
|
1792
|
+
package: "@nucleux/tabs",
|
|
1793
|
+
kind: "component",
|
|
1794
|
+
description: "Accessible tabs root. Compose with TabsList, TabsTrigger, and TabsContent.",
|
|
1795
|
+
summary: "Accessible tabs (horizontal/vertical) \u2014 Nucleux agentic UI for React.",
|
|
1796
|
+
keywords: [
|
|
1797
|
+
"nucleux",
|
|
1798
|
+
"react",
|
|
1799
|
+
"ui",
|
|
1800
|
+
"components",
|
|
1801
|
+
"agentic",
|
|
1802
|
+
"ai",
|
|
1803
|
+
"tailwind",
|
|
1804
|
+
"tabs"
|
|
1805
|
+
],
|
|
1806
|
+
exports: [
|
|
1807
|
+
"Tabs",
|
|
1808
|
+
"TabsList",
|
|
1809
|
+
"TabsTrigger",
|
|
1810
|
+
"TabsContent",
|
|
1811
|
+
"TabsProps",
|
|
1812
|
+
"TabsTriggerProps",
|
|
1813
|
+
"TabsContentProps"
|
|
1814
|
+
],
|
|
1815
|
+
components: [
|
|
1816
|
+
"Tabs",
|
|
1817
|
+
"TabsList",
|
|
1818
|
+
"TabsTrigger",
|
|
1819
|
+
"TabsContent"
|
|
1820
|
+
],
|
|
1821
|
+
import: 'import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nucleux/tabs";',
|
|
1822
|
+
installSingle: "pnpm add @nucleux/tabs @nucleux/tokens",
|
|
1823
|
+
props: [
|
|
1824
|
+
{
|
|
1825
|
+
name: "TabsProps",
|
|
1826
|
+
source: 'export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {\n /** Controlled active tab value. */\n value?: string;\n /** Initial active tab when uncontrolled. */\n defaultValue?: string;\n /** Called with the newly selected value. */\n onValueChange?: (value: string) => void;\n orientation?: Orientation;\n}'
|
|
1827
|
+
},
|
|
1828
|
+
{
|
|
1829
|
+
name: "TabsTriggerProps",
|
|
1830
|
+
source: "export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Value linking this trigger to its TabsContent. */\n value: string;\n}"
|
|
1831
|
+
},
|
|
1832
|
+
{
|
|
1833
|
+
name: "TabsContentProps",
|
|
1834
|
+
source: "export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {\n value: string;\n}"
|
|
1835
|
+
}
|
|
1836
|
+
],
|
|
1837
|
+
readme: '# @nucleux/tabs\n\nAccessible tabs (horizontal/vertical) \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/tabs @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from "@nucleux/tabs";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1838
|
+
peerDependencies: {
|
|
1839
|
+
react: ">=18",
|
|
1840
|
+
"react-dom": ">=18"
|
|
1841
|
+
}
|
|
1842
|
+
},
|
|
1843
|
+
{
|
|
1844
|
+
name: "thread",
|
|
1845
|
+
package: "@nucleux/thread",
|
|
1846
|
+
kind: "component",
|
|
1847
|
+
description: 'Scrollable transcript container that keeps itself pinned to the newest\nmessage while content streams, and surfaces a "jump to latest" button when\nthe user scrolls away.',
|
|
1848
|
+
summary: "Auto-scrolling chat transcript container \u2014 Nucleux agentic UI for React.",
|
|
1849
|
+
keywords: [
|
|
1850
|
+
"nucleux",
|
|
1851
|
+
"react",
|
|
1852
|
+
"ui",
|
|
1853
|
+
"components",
|
|
1854
|
+
"agentic",
|
|
1855
|
+
"ai",
|
|
1856
|
+
"tailwind",
|
|
1857
|
+
"thread"
|
|
1858
|
+
],
|
|
1859
|
+
exports: [
|
|
1860
|
+
"Thread",
|
|
1861
|
+
"ThreadProps"
|
|
1862
|
+
],
|
|
1863
|
+
components: [
|
|
1864
|
+
"Thread"
|
|
1865
|
+
],
|
|
1866
|
+
import: 'import { Thread } from "@nucleux/thread";',
|
|
1867
|
+
installSingle: "pnpm add @nucleux/thread @nucleux/tokens",
|
|
1868
|
+
props: [
|
|
1869
|
+
{
|
|
1870
|
+
name: "ThreadProps",
|
|
1871
|
+
source: 'export interface ThreadProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Change this whenever messages are added so the view re-pins to bottom. */\n autoScrollKey?: unknown;\n /** Disable the sticky "scroll to bottom" affordance. */\n hideScrollButton?: boolean;\n}'
|
|
1872
|
+
}
|
|
1873
|
+
],
|
|
1874
|
+
readme: '# @nucleux/thread\n\nAuto-scrolling chat transcript container \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/thread @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Thread } from "@nucleux/thread";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1875
|
+
peerDependencies: {
|
|
1876
|
+
react: ">=18",
|
|
1877
|
+
"react-dom": ">=18"
|
|
1878
|
+
}
|
|
1879
|
+
},
|
|
1880
|
+
{
|
|
1881
|
+
name: "toast",
|
|
1882
|
+
package: "@nucleux/toast",
|
|
1883
|
+
kind: "component",
|
|
1884
|
+
description: "A single toast notification surface. Usually rendered by {@link ToastProvider}.",
|
|
1885
|
+
summary: "Toast notifications + ToastProvider/useToast \u2014 Nucleux agentic UI for React.",
|
|
1886
|
+
keywords: [
|
|
1887
|
+
"nucleux",
|
|
1888
|
+
"react",
|
|
1889
|
+
"ui",
|
|
1890
|
+
"components",
|
|
1891
|
+
"agentic",
|
|
1892
|
+
"ai",
|
|
1893
|
+
"tailwind",
|
|
1894
|
+
"toast"
|
|
1895
|
+
],
|
|
1896
|
+
exports: [
|
|
1897
|
+
"Toast",
|
|
1898
|
+
"useToast",
|
|
1899
|
+
"ToastProvider",
|
|
1900
|
+
"ToastVariant",
|
|
1901
|
+
"ToastProps",
|
|
1902
|
+
"ToastOptions",
|
|
1903
|
+
"ToastProviderProps"
|
|
1904
|
+
],
|
|
1905
|
+
components: [
|
|
1906
|
+
"Toast",
|
|
1907
|
+
"ToastProvider",
|
|
1908
|
+
"ToastOptions"
|
|
1909
|
+
],
|
|
1910
|
+
import: 'import { Toast, ToastProvider, ToastOptions } from "@nucleux/toast";',
|
|
1911
|
+
installSingle: "pnpm add @nucleux/toast @nucleux/tokens",
|
|
1912
|
+
props: [
|
|
1913
|
+
{
|
|
1914
|
+
name: "ToastProps",
|
|
1915
|
+
source: 'export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {\n variant?: ToastVariant;\n title?: React.ReactNode;\n description?: React.ReactNode;\n /** Renders a close button that calls this handler. */\n onClose?: () => void;\n}'
|
|
1916
|
+
},
|
|
1917
|
+
{
|
|
1918
|
+
name: "ToastProviderProps",
|
|
1919
|
+
source: 'export interface ToastProviderProps {\n children: React.ReactNode;\n /** Viewport placement. */\n placement?: "top" | "bottom";\n}'
|
|
1920
|
+
}
|
|
1921
|
+
],
|
|
1922
|
+
readme: '# @nucleux/toast\n\nToast notifications + ToastProvider/useToast \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/toast @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Toast, ToastProvider } from "@nucleux/toast";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1923
|
+
peerDependencies: {
|
|
1924
|
+
react: ">=18",
|
|
1925
|
+
"react-dom": ">=18"
|
|
1926
|
+
}
|
|
1927
|
+
},
|
|
1928
|
+
{
|
|
1929
|
+
name: "tokens",
|
|
1930
|
+
package: "@nucleux/tokens",
|
|
1931
|
+
kind: "infrastructure",
|
|
1932
|
+
description: "Design tokens (CSS variables) + Tailwind preset for Nucleux \u2014 Nucleux agentic UI for React.",
|
|
1933
|
+
summary: "Design tokens (CSS variables) + Tailwind preset for Nucleux \u2014 Nucleux agentic UI for React.",
|
|
1934
|
+
keywords: [
|
|
1935
|
+
"nucleux",
|
|
1936
|
+
"react",
|
|
1937
|
+
"ui",
|
|
1938
|
+
"components",
|
|
1939
|
+
"agentic",
|
|
1940
|
+
"ai",
|
|
1941
|
+
"tailwind",
|
|
1942
|
+
"tokens"
|
|
1943
|
+
],
|
|
1944
|
+
exports: [],
|
|
1945
|
+
components: [],
|
|
1946
|
+
import: "",
|
|
1947
|
+
installSingle: "pnpm add @nucleux/tokens",
|
|
1948
|
+
props: [],
|
|
1949
|
+
readme: '# @nucleux/tokens\n\nDesign tokens (CSS variables) + Tailwind preset for Nucleux \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/tokens\n```\n\n## Usage\n\n```ts\n// Theme stylesheet (import once near your app root)\nimport "@nucleux/tokens/styles.css";\n\n// Tailwind preset\nimport nucleux from "@nucleux/tokens/preset";\nexport default { presets: [nucleux], content: ["./src/**/*.{ts,tsx}"] };\n```\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1950
|
+
peerDependencies: {}
|
|
1951
|
+
},
|
|
1952
|
+
{
|
|
1953
|
+
name: "tool-call",
|
|
1954
|
+
package: "@nucleux/tool-call",
|
|
1955
|
+
kind: "component",
|
|
1956
|
+
description: "A collapsible card visualizing an agent tool/function call: its name, live\nstatus, arguments, and result.",
|
|
1957
|
+
summary: "Collapsible agent tool-call card \u2014 Nucleux agentic UI for React.",
|
|
1958
|
+
keywords: [
|
|
1959
|
+
"nucleux",
|
|
1960
|
+
"react",
|
|
1961
|
+
"ui",
|
|
1962
|
+
"components",
|
|
1963
|
+
"agentic",
|
|
1964
|
+
"ai",
|
|
1965
|
+
"tailwind",
|
|
1966
|
+
"tool-call"
|
|
1967
|
+
],
|
|
1968
|
+
exports: [
|
|
1969
|
+
"ToolCall",
|
|
1970
|
+
"ToolCallProps"
|
|
1971
|
+
],
|
|
1972
|
+
components: [
|
|
1973
|
+
"ToolCall"
|
|
1974
|
+
],
|
|
1975
|
+
import: 'import { ToolCall } from "@nucleux/tool-call";',
|
|
1976
|
+
installSingle: "pnpm add @nucleux/tool-call @nucleux/tokens",
|
|
1977
|
+
props: [
|
|
1978
|
+
{
|
|
1979
|
+
name: "ToolCallProps",
|
|
1980
|
+
source: 'export interface ToolCallProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {\n /** The tool call to render. */\n toolCall: ToolCallData;\n /** Whether the details are expanded initially. */\n defaultOpen?: boolean;\n}'
|
|
1981
|
+
}
|
|
1982
|
+
],
|
|
1983
|
+
readme: '# @nucleux/tool-call\n\nCollapsible agent tool-call card \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/tool-call @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { ToolCall } from "@nucleux/tool-call";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
1984
|
+
peerDependencies: {
|
|
1985
|
+
react: ">=18",
|
|
1986
|
+
"react-dom": ">=18"
|
|
1987
|
+
}
|
|
1988
|
+
},
|
|
1989
|
+
{
|
|
1990
|
+
name: "tooltip",
|
|
1991
|
+
package: "@nucleux/tooltip",
|
|
1992
|
+
kind: "component",
|
|
1993
|
+
description: "Lightweight hover/focus tooltip. Reveals `content` when the wrapped trigger is\nhovered or focused \u2014 no positioning library, pure CSS. The trigger must be\nfocusable (e.g. a button or link) for keyboard users.",
|
|
1994
|
+
summary: "Hover/focus tooltip \u2014 Nucleux agentic UI for React.",
|
|
1995
|
+
keywords: [
|
|
1996
|
+
"nucleux",
|
|
1997
|
+
"react",
|
|
1998
|
+
"ui",
|
|
1999
|
+
"components",
|
|
2000
|
+
"agentic",
|
|
2001
|
+
"ai",
|
|
2002
|
+
"tailwind",
|
|
2003
|
+
"tooltip"
|
|
2004
|
+
],
|
|
2005
|
+
exports: [
|
|
2006
|
+
"Tooltip",
|
|
2007
|
+
"TooltipSide",
|
|
2008
|
+
"TooltipProps"
|
|
2009
|
+
],
|
|
2010
|
+
components: [
|
|
2011
|
+
"Tooltip",
|
|
2012
|
+
"TooltipSide"
|
|
2013
|
+
],
|
|
2014
|
+
import: 'import { Tooltip, TooltipSide } from "@nucleux/tooltip";',
|
|
2015
|
+
installSingle: "pnpm add @nucleux/tooltip @nucleux/tokens",
|
|
2016
|
+
props: [
|
|
2017
|
+
{
|
|
2018
|
+
name: "TooltipProps",
|
|
2019
|
+
source: 'export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "content"> {\n /** The tooltip text/content. */\n content: React.ReactNode;\n /** Which side of the trigger to show on. */\n side?: TooltipSide;\n /** The trigger element(s). */\n children: React.ReactNode;\n}'
|
|
2020
|
+
}
|
|
2021
|
+
],
|
|
2022
|
+
readme: '# @nucleux/tooltip\n\nHover/focus tooltip \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/tooltip @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { Tooltip } from "@nucleux/tooltip";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
2023
|
+
peerDependencies: {
|
|
2024
|
+
react: ">=18",
|
|
2025
|
+
"react-dom": ">=18"
|
|
2026
|
+
}
|
|
2027
|
+
},
|
|
2028
|
+
{
|
|
2029
|
+
name: "typing-indicator",
|
|
2030
|
+
package: "@nucleux/typing-indicator",
|
|
2031
|
+
kind: "component",
|
|
2032
|
+
description: "Three animated dots indicating the agent is preparing a response.",
|
|
2033
|
+
summary: "Animated typing dots \u2014 Nucleux agentic UI for React.",
|
|
2034
|
+
keywords: [
|
|
2035
|
+
"nucleux",
|
|
2036
|
+
"react",
|
|
2037
|
+
"ui",
|
|
2038
|
+
"components",
|
|
2039
|
+
"agentic",
|
|
2040
|
+
"ai",
|
|
2041
|
+
"tailwind",
|
|
2042
|
+
"typing-indicator"
|
|
2043
|
+
],
|
|
2044
|
+
exports: [
|
|
2045
|
+
"TypingIndicator",
|
|
2046
|
+
"TypingIndicatorProps"
|
|
2047
|
+
],
|
|
2048
|
+
components: [
|
|
2049
|
+
"TypingIndicator"
|
|
2050
|
+
],
|
|
2051
|
+
import: 'import { TypingIndicator } from "@nucleux/typing-indicator";',
|
|
2052
|
+
installSingle: "pnpm add @nucleux/typing-indicator @nucleux/tokens",
|
|
2053
|
+
props: [
|
|
2054
|
+
{
|
|
2055
|
+
name: "TypingIndicatorProps",
|
|
2056
|
+
source: "export interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Accessible label announced to assistive tech. */\n label?: string;\n}"
|
|
2057
|
+
}
|
|
2058
|
+
],
|
|
2059
|
+
readme: '# @nucleux/typing-indicator\n\nAnimated typing dots \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/typing-indicator @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\nimport { TypingIndicator } from "@nucleux/typing-indicator";\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
2060
|
+
peerDependencies: {
|
|
2061
|
+
react: ">=18",
|
|
2062
|
+
"react-dom": ">=18"
|
|
2063
|
+
}
|
|
2064
|
+
},
|
|
2065
|
+
{
|
|
2066
|
+
name: "utils",
|
|
2067
|
+
package: "@nucleux/utils",
|
|
2068
|
+
kind: "infrastructure",
|
|
2069
|
+
description: "cn() class merger + shared types for Nucleux \u2014 Nucleux agentic UI for React.",
|
|
2070
|
+
summary: "cn() class merger + shared types for Nucleux \u2014 Nucleux agentic UI for React.",
|
|
2071
|
+
keywords: [
|
|
2072
|
+
"nucleux",
|
|
2073
|
+
"react",
|
|
2074
|
+
"ui",
|
|
2075
|
+
"components",
|
|
2076
|
+
"agentic",
|
|
2077
|
+
"ai",
|
|
2078
|
+
"tailwind",
|
|
2079
|
+
"utils"
|
|
2080
|
+
],
|
|
2081
|
+
exports: [],
|
|
2082
|
+
components: [],
|
|
2083
|
+
import: "",
|
|
2084
|
+
installSingle: "pnpm add @nucleux/utils",
|
|
2085
|
+
props: [],
|
|
2086
|
+
readme: '# @nucleux/utils\n\ncn() class merger + shared types for Nucleux \u2014 Nucleux agentic UI for React.\n\nPart of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** \u2014 agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).\n\n## Install\n\n```bash\npnpm add @nucleux/utils @nucleux/tokens\n```\n\n`react` / `react-dom` are peer dependencies.\n\n## Usage\n\n```tsx\n\n```\n\nRequires the theme once in your app: `import "@nucleux/tokens/styles.css";`\nand the Tailwind preset from `@nucleux/tokens/preset`.\n\n## License\n\nMIT \xA9 Nucleux',
|
|
2087
|
+
peerDependencies: {}
|
|
2088
|
+
}
|
|
2089
|
+
],
|
|
2090
|
+
examples: [
|
|
2091
|
+
{
|
|
2092
|
+
name: "agent-chat",
|
|
2093
|
+
title: "Examples/Agent Chat",
|
|
2094
|
+
source: `import { useState } from "react";
|
|
2095
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2096
|
+
import { Bell, Calendar, Home, ListChecks, Mic, Paperclip, Settings, Sparkles } from "lucide-react";
|
|
2097
|
+
import {
|
|
2098
|
+
AgentComposer,
|
|
2099
|
+
Avatar,
|
|
2100
|
+
Badge,
|
|
2101
|
+
GlobalNav,
|
|
2102
|
+
IconButton,
|
|
2103
|
+
Message,
|
|
2104
|
+
Reasoning,
|
|
2105
|
+
SearchInput,
|
|
2106
|
+
Sidebar,
|
|
2107
|
+
SidebarItem,
|
|
2108
|
+
Suggestions,
|
|
2109
|
+
Thread,
|
|
2110
|
+
ToolCall,
|
|
2111
|
+
} from "../index";
|
|
2112
|
+
|
|
2113
|
+
/**
|
|
2114
|
+
* A full agent chat screen assembled from Nucleux primitives \u2014 app shell +
|
|
2115
|
+
* transcript with reasoning, a tool call, streaming, suggestions, and the
|
|
2116
|
+
* agent composer.
|
|
2117
|
+
*/
|
|
2118
|
+
const meta = {
|
|
2119
|
+
title: "Examples/Agent Chat",
|
|
2120
|
+
parameters: { layout: "fullscreen" },
|
|
2121
|
+
} satisfies Meta;
|
|
2122
|
+
|
|
2123
|
+
export default meta;
|
|
2124
|
+
type Story = StoryObj<typeof meta>;
|
|
2125
|
+
|
|
2126
|
+
export const Default: Story = {
|
|
2127
|
+
render: () => {
|
|
2128
|
+
const [value, setValue] = useState("");
|
|
2129
|
+
return (
|
|
2130
|
+
<div className="flex h-screen flex-col bg-background">
|
|
2131
|
+
<GlobalNav
|
|
2132
|
+
left={<span className="text-base font-medium text-foreground">Nebula</span>}
|
|
2133
|
+
center={<SearchInput containerClassName="w-72" />}
|
|
2134
|
+
right={
|
|
2135
|
+
<>
|
|
2136
|
+
<IconButton aria-label="Notifications" size="lg">
|
|
2137
|
+
<Bell />
|
|
2138
|
+
</IconButton>
|
|
2139
|
+
<Avatar name="Eric" className="size-8" />
|
|
2140
|
+
</>
|
|
2141
|
+
}
|
|
2142
|
+
/>
|
|
2143
|
+
|
|
2144
|
+
<div className="flex min-h-0 flex-1">
|
|
2145
|
+
<Sidebar footer={<SidebarItem icon={<Settings />} label="Settings" />}>
|
|
2146
|
+
<SidebarItem icon={<Home />} label="Home" />
|
|
2147
|
+
<SidebarItem icon={<Sparkles />} label="Assistant" active />
|
|
2148
|
+
<SidebarItem icon={<Calendar />} label="Calendar" />
|
|
2149
|
+
<SidebarItem icon={<ListChecks />} label="Tasks" />
|
|
2150
|
+
</Sidebar>
|
|
2151
|
+
|
|
2152
|
+
<main className="flex min-w-0 flex-1 flex-col">
|
|
2153
|
+
<Thread className="mx-auto w-full max-w-3xl">
|
|
2154
|
+
<Message role="user" content="Summarize the CPQ Q3 scope review and list the action items." />
|
|
2155
|
+
|
|
2156
|
+
<div className="flex w-full max-w-3xl flex-col gap-2">
|
|
2157
|
+
<Reasoning
|
|
2158
|
+
defaultOpen
|
|
2159
|
+
content="The user wants a summary plus action items. I'll pull the transcript, extract decisions, then format owners and due dates."
|
|
2160
|
+
/>
|
|
2161
|
+
<ToolCall
|
|
2162
|
+
defaultOpen
|
|
2163
|
+
toolCall={{
|
|
2164
|
+
id: "t1",
|
|
2165
|
+
name: "get_transcript",
|
|
2166
|
+
status: "success",
|
|
2167
|
+
args: { meetingId: "zuora-cpq-q3" },
|
|
2168
|
+
result: { turns: 214, durationSec: 2700 },
|
|
2169
|
+
}}
|
|
2170
|
+
/>
|
|
2171
|
+
</div>
|
|
2172
|
+
|
|
2173
|
+
<Message
|
|
2174
|
+
role="assistant"
|
|
2175
|
+
content="Here's the summary: the team aligned on a phased CPQ rollout, with pricing rules landing first. Three action items were captured."
|
|
2176
|
+
/>
|
|
2177
|
+
<Message role="assistant" streaming content="Drafting the action item list" />
|
|
2178
|
+
</Thread>
|
|
2179
|
+
|
|
2180
|
+
<div className="mx-auto w-full max-w-3xl space-y-3 p-4">
|
|
2181
|
+
<Suggestions
|
|
2182
|
+
items={["List action items", "Draft a follow-up email", "Show decisions"]}
|
|
2183
|
+
onSelect={setValue}
|
|
2184
|
+
/>
|
|
2185
|
+
<AgentComposer
|
|
2186
|
+
value={value}
|
|
2187
|
+
onValueChange={setValue}
|
|
2188
|
+
onSubmit={() => setValue("")}
|
|
2189
|
+
leftActions={
|
|
2190
|
+
<IconButton aria-label="Attach" size="sm">
|
|
2191
|
+
<Paperclip />
|
|
2192
|
+
</IconButton>
|
|
2193
|
+
}
|
|
2194
|
+
rightActions={
|
|
2195
|
+
<>
|
|
2196
|
+
<Badge variant="secondary">Opus 4.8</Badge>
|
|
2197
|
+
<IconButton aria-label="Voice" size="sm">
|
|
2198
|
+
<Mic />
|
|
2199
|
+
</IconButton>
|
|
2200
|
+
</>
|
|
2201
|
+
}
|
|
2202
|
+
/>
|
|
2203
|
+
</div>
|
|
2204
|
+
</main>
|
|
2205
|
+
</div>
|
|
2206
|
+
</div>
|
|
2207
|
+
);
|
|
2208
|
+
},
|
|
2209
|
+
};`
|
|
2210
|
+
},
|
|
2211
|
+
{
|
|
2212
|
+
name: "card-gallery",
|
|
2213
|
+
title: "Examples/Card Gallery",
|
|
2214
|
+
source: 'import type { Meta, StoryObj } from "@storybook/react";\nimport { ArrowUpRight, Play, TrendingUp, Users } from "lucide-react";\nimport {\n Avatar,\n Badge,\n Button,\n CardAction,\n CardContainer,\n CardContent,\n CardDescription,\n CardDivider,\n CardHeader,\n CardTitle,\n LinkButton,\n Progress,\n} from "../index";\n\n/**\n * A gallery of card layouts ("card variations") \u2014 all built from the same\n * CardContainer primitive plus Badge, Avatar, Progress, and Button.\n */\nconst meta = {\n title: "Examples/Card Gallery",\n parameters: { layout: "padded" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction StatCard() {\n return (\n <CardContainer>\n <CardContent className="space-y-2">\n <div className="flex items-center justify-between">\n <span className="text-sm text-muted-foreground">Meetings summarized</span>\n <TrendingUp className="size-4 text-success" />\n </div>\n <p className="text-3xl font-semibold tracking-tight text-foreground">128</p>\n <Badge variant="success">+12% this week</Badge>\n </CardContent>\n </CardContainer>\n );\n}\n\nfunction MediaCard() {\n return (\n <CardContainer className="overflow-hidden">\n <div className="relative flex aspect-video items-center justify-center bg-gradient-to-br from-slate-800 to-slate-950">\n <span className="inline-flex size-12 items-center justify-center rounded-full bg-background/95 text-foreground shadow-md">\n <Play className="size-5 translate-x-0.5 fill-current" />\n </span>\n </div>\n <CardContent className="space-y-1">\n <CardTitle>CPQ Q3 scope review</CardTitle>\n <CardDescription>45:00 \xB7 Summarized</CardDescription>\n </CardContent>\n </CardContainer>\n );\n}\n\nfunction ProgressCard() {\n return (\n <CardContainer>\n <CardHeader>\n <div>\n <CardTitle>Onboarding</CardTitle>\n <CardDescription>2 of 3 steps</CardDescription>\n </div>\n <Badge>66%</Badge>\n </CardHeader>\n <CardDivider />\n <CardContent className="space-y-3">\n <Progress value={66} aria-label="Onboarding progress" />\n <LinkButton rightIcon={<ArrowUpRight />}>Continue setup</LinkButton>\n </CardContent>\n </CardContainer>\n );\n}\n\nfunction TeamCard() {\n return (\n <CardContainer>\n <CardHeader>\n <div>\n <CardTitle>Workspace</CardTitle>\n <CardDescription>4 members</CardDescription>\n </div>\n <CardAction>Manage</CardAction>\n </CardHeader>\n <CardDivider />\n <CardContent className="flex items-center justify-between">\n <div className="flex -space-x-2">\n {["Eric Idle", "Zoe Ray", "Ada Lin", "Sam Poe"].map((n) => (\n <Avatar key={n} name={n} className="size-8 ring-2 ring-background" />\n ))}\n </div>\n <Button variant="secondary" size="sm" leftIcon={<Users className="size-4" />}>\n Invite\n </Button>\n </CardContent>\n </CardContainer>\n );\n}\n\nexport const Default: Story = {\n render: () => (\n <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">\n <StatCard />\n <MediaCard />\n <ProgressCard />\n <TeamCard />\n </div>\n ),\n};'
|
|
2215
|
+
},
|
|
2216
|
+
{
|
|
2217
|
+
name: "card-variations",
|
|
2218
|
+
title: "Examples/Card Variations",
|
|
2219
|
+
source: 'import type { ReactNode } from "react";\nimport type { Meta, StoryObj } from "@storybook/react";\nimport { ArrowUpRight, ImageIcon, Play } from "lucide-react";\nimport {\n Avatar,\n Badge,\n Button,\n Chip,\n LinkButton,\n MediaCard,\n} from "../index";\n\n/**\n * The **Card Variation** family from Figma ("Card Variation 1\u202633") \u2014 every one\n * of them is the same anatomy: a media area with an overlaid *label*, a\n * *heading*, and a *description*. Rather than ship 22+ near-identical packages,\n * the whole family is expressed with a single {@link MediaCard} primitive via\n * its `media` slot, `orientation`, `footer`, and `title`/`description` props.\n *\n * This gallery reproduces the Figma pattern and then walks through the\n * meaningful, real-world permutations you get for free.\n */\nconst meta = {\n title: "Examples/Card Variations",\n parameters: { layout: "padded" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n/** A gradient "poster" with an optional overlaid label \u2014 the Figma media area. */\nfunction Poster({\n label,\n labelVariant,\n icon,\n from = "from-slate-700",\n to = "to-slate-950",\n}: {\n label?: ReactNode;\n labelVariant?: "chip" | "info" | "success" | "default";\n icon?: ReactNode;\n from?: string;\n to?: string;\n}) {\n return (\n <div className={`relative flex size-full items-center justify-center bg-gradient-to-br ${from} ${to}`}>\n {icon && <span className="text-background/90">{icon}</span>}\n {label != null &&\n (labelVariant && labelVariant !== "chip" ? (\n <Badge variant={labelVariant} className="absolute left-3 top-3 shadow-sm">\n {label}\n </Badge>\n ) : (\n <Chip className="absolute left-3 top-3 shadow-sm">{label}</Chip>\n ))}\n </div>\n );\n}\n\n/** Small captioned frame so each variation is self-describing in the gallery. */\nfunction Cell({ caption, children }: { caption: string; children: ReactNode }) {\n return (\n <div className="space-y-2">\n <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{caption}</p>\n {children}\n </div>\n );\n}\n\nexport const Gallery: Story = {\n render: () => (\n <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">\n <Cell caption="Canonical (label overlay)">\n <MediaCard\n media={<Poster label="Label" icon={<Play className="size-8 fill-current" />} />}\n title="Heading"\n description="Description"\n />\n </Cell>\n\n <Cell caption="Info label">\n <MediaCard\n media={<Poster label="New" labelVariant="info" from="from-indigo-600" to="to-violet-900" />}\n title="Model comparison"\n description="Claude Opus 4.8 vs. Sonnet on reasoning benchmarks."\n />\n </Cell>\n\n <Cell caption="Success label">\n <MediaCard\n media={<Poster label="Live" labelVariant="success" from="from-emerald-600" to="to-teal-900" />}\n title="Deployment ready"\n description="All checks passed. Ship when you are."\n />\n </Cell>\n\n <Cell caption="No label">\n <MediaCard\n media={<Poster icon={<ImageIcon className="size-8" />} />}\n title="Untitled asset"\n description="Uploaded just now \xB7 2.4 MB"\n />\n </Cell>\n\n <Cell caption="Text only (no media)">\n <MediaCard\n title="Weekly summary"\n description="12 conversations \xB7 3 flagged for follow-up. Your agent handled routing automatically."\n />\n </Cell>\n\n <Cell caption="With footer action">\n <MediaCard\n media={<Poster label="Guide" icon={<Play className="size-8 fill-current" />} />}\n title="Getting started"\n description="A 5-minute tour of the agent workspace."\n footer={<LinkButton rightIcon={<ArrowUpRight className="size-4" />}>Open guide</LinkButton>}\n />\n </Cell>\n\n <Cell caption="Real image">\n <MediaCard\n image="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=640&q=60"\n imageAlt="Abstract data visualization"\n title="Telemetry dashboard"\n description="Latency and token usage across all sessions."\n />\n </Cell>\n\n <Cell caption="CTA footer">\n <MediaCard\n media={<Poster label="Beta" labelVariant="default" from="from-fuchsia-600" to="to-purple-900" />}\n title="Try agent memory"\n description="Persist context across conversations automatically."\n footer={\n <Button size="sm" className="w-full">\n Enable memory\n </Button>\n }\n />\n </Cell>\n\n <Cell caption="Contributor footer">\n <MediaCard\n media={<Poster label="Draft" icon={<ImageIcon className="size-8" />} />}\n title="Q3 planning doc"\n description="Shared workspace \xB7 edited 2h ago"\n footer={\n <div className="flex items-center gap-2">\n <div className="flex -space-x-2">\n {["Ada Lin", "Sam Poe", "Zoe Ray"].map((n) => (\n <Avatar key={n} name={n} className="size-6 ring-2 ring-background" />\n ))}\n </div>\n <span className="text-xs text-muted-foreground">+4 editing</span>\n </div>\n }\n />\n </Cell>\n\n <Cell caption="Horizontal">\n <MediaCard\n orientation="horizontal"\n media={<Poster label="45:00" icon={<Play className="size-6 fill-current" />} />}\n title="CPQ scope review"\n description="Recorded meeting \xB7 summarized by agent."\n />\n </Cell>\n\n <Cell caption="Horizontal + action">\n <MediaCard\n orientation="horizontal"\n media={<Poster icon={<ImageIcon className="size-6" />} from="from-sky-600" to="to-blue-900" />}\n title="Design handoff"\n description="14 frames ready for review."\n footer={<LinkButton rightIcon={<ArrowUpRight className="size-4" />}>Review</LinkButton>}\n />\n </Cell>\n\n <Cell caption="Body badge">\n <MediaCard\n media={<Poster label="Report" from="from-slate-600" to="to-slate-900" />}\n title="Usage report"\n description="Generated for July 2026."\n >\n <Badge variant="success" className="mt-1 w-fit">\n +12% vs. June\n </Badge>\n </MediaCard>\n </Cell>\n </div>\n ),\n};'
|
|
2220
|
+
},
|
|
2221
|
+
{
|
|
2222
|
+
name: "day-0-dashboard",
|
|
2223
|
+
title: "Examples/Day-0 Dashboard (App Shell)",
|
|
2224
|
+
source: 'import type { Meta, StoryObj } from "@storybook/react";\nimport { Bell, Calendar, Home, ListChecks, Plus, Settings, Sparkles } from "lucide-react";\nimport {\n Avatar,\n GlobalNav,\n IconButton,\n SearchInput,\n Sidebar,\n SidebarItem,\n SidebarSeparator,\n} from "../index";\nimport { MeetingDashboardBody } from "./meeting-dashboard";\n\n/**\n * Full "day-0-dashboard" app shell \u2014 GlobalNav + collapsed Sidebar wrapping the\n * meeting dashboard body. Faithful implementation of the source Figma design\n * (AI-UX-Pattern \u203A day-0-dashboard).\n */\nconst meta = {\n title: "Examples/Day-0 Dashboard (App Shell)",\n parameters: { layout: "fullscreen" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction BrandMark() {\n return (\n <div className="flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-br from-emerald-400 via-teal-500 to-violet-600 text-sm font-semibold text-white">\n P\n </div>\n );\n}\n\nexport const Default: Story = {\n render: () => (\n <div className="flex h-screen flex-col bg-background">\n <GlobalNav\n left={<span className="text-base text-foreground">Heading</span>}\n center={<SearchInput containerClassName="w-72" />}\n right={\n <>\n <div className="relative">\n <IconButton aria-label="Notifications" size="lg">\n <Bell />\n </IconButton>\n <span className="absolute right-2 top-1.5 size-2 rounded-full bg-destructive ring-2 ring-background" />\n </div>\n <Avatar name="Eric" className="size-8" />\n </>\n }\n />\n\n <div className="flex min-h-0 flex-1">\n <Sidebar footer={<SidebarItem icon={<Settings />} label="Settings" />}>\n <BrandMark />\n <IconButton aria-label="New recording" variant="solid">\n <Plus />\n </IconButton>\n <SidebarSeparator />\n <SidebarItem icon={<Home />} label="Home" active />\n <SidebarItem icon={<Sparkles />} label="Assistant" />\n <SidebarItem icon={<Calendar />} label="Calendar" />\n <SidebarItem icon={<ListChecks />} label="Tasks" />\n <SidebarSeparator />\n <SidebarItem icon={<Plus />} label="Add" />\n </Sidebar>\n\n <main className="min-w-0 flex-1 overflow-y-auto">\n <MeetingDashboardBody />\n </main>\n </div>\n </div>\n ),\n};'
|
|
2225
|
+
},
|
|
2226
|
+
{
|
|
2227
|
+
name: "meeting-dashboard",
|
|
2228
|
+
title: "Examples/Meeting Dashboard",
|
|
2229
|
+
source: 'import type { Meta, StoryObj } from "@storybook/react";\nimport { MeetingDashboardBody } from "./meeting-dashboard";\n\n/**\n * The "Meeting dashboard" centered content (no app chrome), assembled entirely\n * from Nucleux primitives \u2014 a faithful implementation of the source Figma\n * design (AI-UX-Pattern \u203A Body).\n */\nconst meta = {\n title: "Examples/Meeting Dashboard",\n parameters: { layout: "fullscreen" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n render: () => (\n <div className="min-h-screen bg-background">\n <MeetingDashboardBody />\n </div>\n ),\n};'
|
|
2230
|
+
},
|
|
2231
|
+
{
|
|
2232
|
+
name: "settings",
|
|
2233
|
+
title: "Examples/Settings",
|
|
2234
|
+
source: 'import { type ReactNode, useState } from "react";\nimport type { Meta, StoryObj } from "@storybook/react";\nimport {\n Alert,\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n CardContainer,\n CardContent,\n CardDivider,\n CardHeader,\n CardTitle,\n ModularConsent,\n Radio,\n RadioGroup,\n Select,\n Separator,\n Switch,\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from "../index";\n\n/**\n * A settings screen composed from Nucleux primitives \u2014 breadcrumb + page\n * header, tabs, toggles, a select, a radio group, an alert, and the modular\n * consent block.\n */\nconst meta = {\n title: "Examples/Settings",\n parameters: { layout: "fullscreen" },\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nfunction SettingRow({\n title,\n description,\n children,\n}: {\n title: string;\n description: string;\n children: ReactNode;\n}) {\n return (\n <div className="flex items-center justify-between gap-4 py-3">\n <div>\n <p className="text-sm font-medium text-foreground">{title}</p>\n <p className="text-sm text-muted-foreground">{description}</p>\n </div>\n {children}\n </div>\n );\n}\n\nexport const Default: Story = {\n render: () => {\n const [speed, setSpeed] = useState("balanced");\n return (\n <div className="min-h-screen bg-background">\n <div className="mx-auto max-w-3xl px-6 py-10">\n <Breadcrumb className="mb-4">\n <BreadcrumbItem>\n <BreadcrumbLink href="#">Workspace</BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage>Settings</BreadcrumbPage>\n </BreadcrumbItem>\n </Breadcrumb>\n\n <header className="mb-6">\n <h1 className="text-3xl font-semibold tracking-tight text-foreground">Settings</h1>\n <p className="mt-1 text-muted-foreground">Manage assistant behavior and permissions.</p>\n </header>\n\n <Tabs defaultValue="general">\n <TabsList>\n <TabsTrigger value="general">General</TabsTrigger>\n <TabsTrigger value="permissions">Permissions</TabsTrigger>\n <TabsTrigger value="notifications">Notifications</TabsTrigger>\n </TabsList>\n\n <TabsContent value="general" className="pt-2">\n <CardContainer>\n <CardHeader>\n <CardTitle>Assistant</CardTitle>\n </CardHeader>\n <CardDivider />\n <CardContent className="divide-y divide-border py-0">\n <SettingRow title="Auto-summarize" description="Summarize meetings as they end.">\n <Switch defaultChecked aria-label="Auto-summarize" />\n </SettingRow>\n <SettingRow title="Summary speed" description="Trade latency for depth.">\n <div className="w-40">\n <Select\n aria-label="Summary speed"\n value={speed}\n onChange={(e) => setSpeed(e.target.value)}\n >\n <option value="instant">Instant</option>\n <option value="balanced">Balanced</option>\n <option value="thorough">Thorough</option>\n </Select>\n </div>\n </SettingRow>\n <div className="py-3">\n <p className="mb-2 text-sm font-medium text-foreground">Default tone</p>\n <RadioGroup value={speed === "instant" ? "concise" : "neutral"} label="Default tone">\n <label className="flex items-center gap-2 text-sm text-foreground">\n <Radio value="concise" /> Concise\n </label>\n <label className="flex items-center gap-2 text-sm text-foreground">\n <Radio value="neutral" /> Neutral\n </label>\n <label className="flex items-center gap-2 text-sm text-foreground">\n <Radio value="detailed" /> Detailed\n </label>\n </RadioGroup>\n </div>\n </CardContent>\n </CardContainer>\n </TabsContent>\n\n <TabsContent value="permissions" className="space-y-4 pt-2">\n <Alert variant="info" title="AI-generated content">\n Summaries are generated automatically and may contain mistakes.\n </Alert>\n <ModularConsent\n className="max-w-none"\n title="Workspace access"\n description="Choose what the assistant can read or change."\n secondaryLabel="Always Allow"\n permissions={[\n { id: "read", label: "Read selected files", description: "Only files attached to this workspace.", defaultChecked: true },\n { id: "draft", label: "Draft edits", description: "Create suggestions without applying them.", defaultChecked: true },\n { id: "actions", label: "Run external actions", description: "Ask before connecting tools." },\n ]}\n />\n </TabsContent>\n\n <TabsContent value="notifications" className="pt-2">\n <CardContainer>\n <CardContent className="divide-y divide-border py-0">\n <SettingRow title="Email" description="Send a digest when summaries are ready.">\n <Switch defaultChecked aria-label="Email notifications" />\n </SettingRow>\n <SettingRow title="Desktop" description="Show a toast when the agent finishes.">\n <Switch aria-label="Desktop notifications" />\n </SettingRow>\n </CardContent>\n </CardContainer>\n </TabsContent>\n </Tabs>\n\n <Separator className="my-8" />\n <p className="text-xs text-muted-foreground">Changes are saved automatically.</p>\n </div>\n </div>\n );\n },\n};'
|
|
2235
|
+
}
|
|
2236
|
+
]
|
|
2237
|
+
};
|
|
2238
|
+
|
|
2239
|
+
// src/index.ts
|
|
2240
|
+
var byName = /* @__PURE__ */ new Map();
|
|
2241
|
+
for (const p of catalog_default.packages) {
|
|
2242
|
+
byName.set(p.name.toLowerCase(), p);
|
|
2243
|
+
byName.set(p.package.toLowerCase(), p);
|
|
2244
|
+
for (const c of p.components) byName.set(c.toLowerCase(), p);
|
|
2245
|
+
}
|
|
2246
|
+
function resolve(query) {
|
|
2247
|
+
const q = query.trim().toLowerCase();
|
|
2248
|
+
return byName.get(q) ?? byName.get(q.replace(/^@nucleux\//, "")) ?? catalog_default.packages.find((p) => p.name.toLowerCase() === q || p.components.some((c) => c.toLowerCase() === q));
|
|
2249
|
+
}
|
|
2250
|
+
function text(s) {
|
|
2251
|
+
return { content: [{ type: "text", text: s }] };
|
|
2252
|
+
}
|
|
2253
|
+
function renderComponent(p) {
|
|
2254
|
+
const lines = [
|
|
2255
|
+
`# ${p.components[0] ?? p.name} (${p.package})`,
|
|
2256
|
+
"",
|
|
2257
|
+
p.description || p.summary,
|
|
2258
|
+
"",
|
|
2259
|
+
`**Kind:** ${p.kind}`,
|
|
2260
|
+
`**Install:** \`${p.installSingle}\` (or the full kit: \`${catalog_default.setup.installFull}\`)`,
|
|
2261
|
+
`**Import:** \`${p.import || `import { /* \u2026 */ } from "${p.package}";`}\``,
|
|
2262
|
+
"",
|
|
2263
|
+
`**Exports:** ${p.exports.join(", ") || "\u2014"}`
|
|
2264
|
+
];
|
|
2265
|
+
if (p.props.length) {
|
|
2266
|
+
lines.push("", "## Props", "");
|
|
2267
|
+
for (const pr of p.props) lines.push("```ts", pr.source, "```", "");
|
|
2268
|
+
}
|
|
2269
|
+
return lines.join("\n").trim();
|
|
2270
|
+
}
|
|
2271
|
+
var server = new McpServer({
|
|
2272
|
+
name: "nucleux",
|
|
2273
|
+
version: catalog_default.version
|
|
2274
|
+
});
|
|
2275
|
+
server.tool(
|
|
2276
|
+
"list_components",
|
|
2277
|
+
"List every Nucleux UI component with its package name and one-line description. Start here to see what the library offers.",
|
|
2278
|
+
{
|
|
2279
|
+
kind: z.enum(["component", "infrastructure", "all"]).optional().describe("Filter by kind. 'component' (default) = UI components; 'infrastructure' = utils/hooks/tokens/umbrella.")
|
|
2280
|
+
},
|
|
2281
|
+
async ({ kind = "component" }) => {
|
|
2282
|
+
const rows = catalog_default.packages.filter((p) => kind === "all" || p.kind === kind).map((p) => `- ${p.components[0] ?? p.name} (${p.package}) \u2014 ${p.summary || p.description}`);
|
|
2283
|
+
return text(
|
|
2284
|
+
`Nucleux ${catalog_default.library}@${catalog_default.version} \u2014 ${catalog_default.counts.components} components, ${catalog_default.counts.examples} examples.
|
|
2285
|
+
|
|
2286
|
+
${rows.join("\n")}`
|
|
2287
|
+
);
|
|
2288
|
+
}
|
|
2289
|
+
);
|
|
2290
|
+
server.tool(
|
|
2291
|
+
"get_component",
|
|
2292
|
+
"Get full details for one component: description, install/import, exports, and the verbatim TypeScript Props interface(s). Accepts a component name (e.g. 'Badge') or package name (e.g. '@nucleux/badge').",
|
|
2293
|
+
{
|
|
2294
|
+
name: z.string().describe("Component or package name, e.g. 'Badge', 'badge', or '@nucleux/badge'.")
|
|
2295
|
+
},
|
|
2296
|
+
async ({ name }) => {
|
|
2297
|
+
const p = resolve(name);
|
|
2298
|
+
if (!p) {
|
|
2299
|
+
const suggestions = catalog_default.packages.map((x) => x.components[0] ?? x.name).filter((n) => n.toLowerCase().includes(name.trim().toLowerCase())).slice(0, 8);
|
|
2300
|
+
return text(
|
|
2301
|
+
`No component named "${name}".${suggestions.length ? ` Did you mean: ${suggestions.join(", ")}?` : " Use list_components to see all."}`
|
|
2302
|
+
);
|
|
2303
|
+
}
|
|
2304
|
+
return text(renderComponent(p));
|
|
2305
|
+
}
|
|
2306
|
+
);
|
|
2307
|
+
server.tool(
|
|
2308
|
+
"search_components",
|
|
2309
|
+
"Search components by keyword across names, descriptions, and keywords. Use when you know what you need ('chat input', 'toast', 'avatar') but not the exact component name.",
|
|
2310
|
+
{
|
|
2311
|
+
query: z.string().describe("Free-text query, e.g. 'chat input', 'progress', 'file upload'.")
|
|
2312
|
+
},
|
|
2313
|
+
async ({ query }) => {
|
|
2314
|
+
const q = query.trim().toLowerCase();
|
|
2315
|
+
const terms = q.split(/\s+/).filter(Boolean);
|
|
2316
|
+
const scored = catalog_default.packages.map((p) => {
|
|
2317
|
+
const hay = [p.name, p.package, p.description, p.summary, p.exports.join(" "), p.keywords.join(" ")].join(" ").toLowerCase();
|
|
2318
|
+
const score = terms.reduce((s, t) => s + (hay.includes(t) ? 1 : 0), 0);
|
|
2319
|
+
return { p, score };
|
|
2320
|
+
}).filter((r) => r.score > 0).sort((a, b) => b.score - a.score).slice(0, 12);
|
|
2321
|
+
if (!scored.length) return text(`No matches for "${query}". Try list_components to browse everything.`);
|
|
2322
|
+
return text(
|
|
2323
|
+
scored.map(({ p }) => `- ${p.components[0] ?? p.name} (${p.package}) \u2014 ${p.summary || p.description}`).join("\n")
|
|
2324
|
+
);
|
|
2325
|
+
}
|
|
2326
|
+
);
|
|
2327
|
+
server.tool(
|
|
2328
|
+
"get_setup",
|
|
2329
|
+
"Get install and theming setup for Nucleux (Tailwind preset + tokens CSS, peer deps). Read this before writing code that imports @nucleux components.",
|
|
2330
|
+
{},
|
|
2331
|
+
async () => {
|
|
2332
|
+
const s = catalog_default.setup;
|
|
2333
|
+
return text(
|
|
2334
|
+
[
|
|
2335
|
+
`# Nucleux setup (${catalog_default.library}@${catalog_default.version})`,
|
|
2336
|
+
"",
|
|
2337
|
+
`**Full kit:** \`${s.installFull}\``,
|
|
2338
|
+
`**Single component:** \`${s.installSingle}\``,
|
|
2339
|
+
"",
|
|
2340
|
+
"## Theme",
|
|
2341
|
+
...s.theme.map((t) => `- ${t}`),
|
|
2342
|
+
"",
|
|
2343
|
+
s.note
|
|
2344
|
+
].join("\n")
|
|
2345
|
+
);
|
|
2346
|
+
}
|
|
2347
|
+
);
|
|
2348
|
+
server.tool(
|
|
2349
|
+
"list_examples",
|
|
2350
|
+
"List runnable example compositions (agent chat, dashboards, card variations, settings\u2026) that show how components combine into real screens.",
|
|
2351
|
+
{},
|
|
2352
|
+
async () => {
|
|
2353
|
+
return text(
|
|
2354
|
+
catalog_default.examples.map((e) => `- ${e.name} \u2014 "${e.title}"`).join("\n") || "No examples available."
|
|
2355
|
+
);
|
|
2356
|
+
}
|
|
2357
|
+
);
|
|
2358
|
+
server.tool(
|
|
2359
|
+
"get_example",
|
|
2360
|
+
"Get the full source of one example composition by name (see list_examples). Returns working TSX you can adapt.",
|
|
2361
|
+
{
|
|
2362
|
+
name: z.string().describe("Example name, e.g. 'agent-chat', 'card-variations', 'settings'.")
|
|
2363
|
+
},
|
|
2364
|
+
async ({ name }) => {
|
|
2365
|
+
const q = name.trim().toLowerCase();
|
|
2366
|
+
const ex = catalog_default.examples.find((e) => e.name.toLowerCase() === q);
|
|
2367
|
+
if (!ex) {
|
|
2368
|
+
return text(
|
|
2369
|
+
`No example "${name}". Available: ${catalog_default.examples.map((e) => e.name).join(", ")}.`
|
|
2370
|
+
);
|
|
2371
|
+
}
|
|
2372
|
+
return text(`# ${ex.title} (${ex.name})
|
|
2373
|
+
|
|
2374
|
+
\`\`\`tsx
|
|
2375
|
+
${ex.source}
|
|
2376
|
+
\`\`\``);
|
|
2377
|
+
}
|
|
2378
|
+
);
|
|
2379
|
+
async function main() {
|
|
2380
|
+
const transport = new StdioServerTransport();
|
|
2381
|
+
await server.connect(transport);
|
|
2382
|
+
console.error(`nucleux-mcp ready \u2014 ${catalog_default.counts.components} components, ${catalog_default.counts.examples} examples.`);
|
|
2383
|
+
}
|
|
2384
|
+
main().catch((err) => {
|
|
2385
|
+
console.error("nucleux-mcp failed to start:", err);
|
|
2386
|
+
process.exit(1);
|
|
2387
|
+
});
|