@nexub/mcp 2.7.0 → 2.8.0

package/dist/skill/references/components/collapsible.md

@@ -20,49 +20,54 @@ Toggle visibility of content with smooth animation.
 ## Example: Default
 
 ```tsx
-<Collapsible.Root>
-  <Collapsible.Trigger asChild>
-    <Button variant="outline">Toggle details</Button>
-  </Collapsible.Trigger>
-  <Collapsible.Content>
-    <div style={{ paddingTop: '12px', color: 'var(--color-text-secondary)' }}>
-      Hidden content revealed on toggle.
-    </div>
-  </Collapsible.Content>
-</Collapsible.Root>
+import * as React from 'react';
+import { Collapsible, Button } from '@nexub/react';
+
+export default function Example() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Collapsible.Trigger asChild>
+        <Button variant="outline">{open ? 'Hide details' : 'Show details'}</Button>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div className="pt-3 text-[var(--color-on-surface-variant)] text-body-sm">
+          Hidden content revealed on toggle. This section can hold any content.
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}
 ```
 
 ## Example: Controlled
 
 ```tsx
-function ControlledExample() {
-  const [open, setOpen] = React.useState(false);
+import * as React from 'react';
+import { Collapsible, Button, Switch, Label } from '@nexub/react';
+
+export default function Example() {
+  const [open2, setOpen2] = React.useState(false);
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-        <span style={{ fontWeight: 500 }}>Advanced settings</span>
+    <Collapsible.Root open={open2} onOpenChange={setOpen2}>
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-[var(--color-on-surface)] text-body-sm">Advanced settings</span>
         <Collapsible.Trigger asChild>
-          <IconButton
-            aria-label={open ? 'Collapse' : 'Expand'}
-            variant="ghost"
-            size="sm"
-          />
+          <Button variant="ghost" size="sm">{open2 ? 'Collapse' : 'Expand'}</Button>
         </Collapsible.Trigger>
       </div>
       <Collapsible.Content>
-        <div style={{ paddingTop: '12px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Switch id="notif" />
-            <Label htmlFor="notif">Enable notifications</Label>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Switch id="autosave" />
-            <Label htmlFor="autosave">Auto-save drafts</Label>
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Switch id="tooltips" />
-            <Label htmlFor="tooltips">Show tooltips</Label>
-          </div>
+        <div className="pt-3 flex flex-col gap-3">
+          {[
+            { id: 'notif', label: 'Enable notifications' },
+            { id: 'autosave', label: 'Auto-save drafts' },
+            { id: 'tooltips', label: 'Show tooltips' },
+          ].map(({ id, label }) => (
+            <div key={id} className="flex items-center gap-2">
+              <Switch id={id} />
+              <Label htmlFor={id}>{label}</Label>
+            </div>
+          ))}
         </div>
       </Collapsible.Content>
     </Collapsible.Root>

package/dist/skill/references/components/combobox.md

@@ -21,20 +21,22 @@ Command-palette style searchable dropdown built on cmdk.
 ## Example: Default
 
 ```tsx
-<Combobox.Root>
-  <Combobox.Input placeholder="Search..." />
-  <Combobox.List>
-    <Combobox.Empty>No results found.</Combobox.Empty>
-    <Combobox.Group heading="Frameworks">
-      <Combobox.Item value="react">React</Combobox.Item>
-      <Combobox.Item value="vue">Vue</Combobox.Item>
-      <Combobox.Item value="svelte">Svelte</Combobox.Item>
-    </Combobox.Group>
-    <Combobox.Separator />
-    <Combobox.Group heading="Languages">
-      <Combobox.Item value="typescript">TypeScript</Combobox.Item>
-      <Combobox.Item value="rust">Rust</Combobox.Item>
-    </Combobox.Group>
-  </Combobox.List>
-</Combobox.Root>
+import { Combobox } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Combobox.Root className="w-[260px]">
+      <Combobox.Input placeholder="Search…" />
+      <Combobox.List>
+        <Combobox.Empty>No results found.</Combobox.Empty>
+        <Combobox.Group heading="Frameworks">
+          <Combobox.Item value="react">React</Combobox.Item>
+          <Combobox.Item value="vue">Vue</Combobox.Item>
+          <Combobox.Item value="angular">Angular</Combobox.Item>
+          <Combobox.Item value="svelte">Svelte</Combobox.Item>
+        </Combobox.Group>
+      </Combobox.List>
+    </Combobox.Root>
+  );
+}
 ```

package/dist/skill/references/components/conversation.md

@@ -30,15 +30,27 @@ Chat layout: a scrolling message list that follows new content, with a sticky co
 Send a message: it shows Thinking, then streams a cited reply. Stop or Escape ends the reply early.
 
 ```tsx
-type Message = { id: number; from: 'user' | 'assistant'; text: string };
+import * as React from 'react';
+import { type PromptInputStatus, PromptInput, MessageBubble, ThinkingIndicator, StreamingText, Citation, type CitationSource } from '@nexub/react';
+import { Conversation } from '@nexub/patterns';
 
-const REPLY = 'Air-source heat pumps work in most homes and run at roughly the cost of gas.';
-const SOURCE = { title: 'Choosing a heat pump', url: 'https://example.com/guides/heat-pumps' };
+const CITATION_SOURCES: CitationSource[] = [
+  { title: 'Choosing a heat pump', url: 'https://example.com/guides/heat-pumps', snippet: 'Air-source pumps suit most homes with a garden or outside wall.' },
+  { title: 'Grants for home heating', url: 'https://example.org/grants', domain: 'example.org' },
+  { title: 'Running costs compared', url: 'https://example.net/costs' },
+];
 
-function Chat() {
-  const [messages, setMessages] = React.useState<Message[]>([]);
-  const [status, setStatus] = React.useState<'idle' | 'submitting' | 'streaming'>('idle');
-  const timer = React.useRef<ReturnType<typeof setTimeout>>();
+type ChatMessage = { id: number; from: 'user' | 'assistant'; text: string };
+
+const CHAT_REPLY = 'Air-source heat pumps work in most homes and run at roughly the cost of gas.';
+
+const CHAT_SOURCE = CITATION_SOURCES[0]!;
+
+export default function Example() {
+  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
+  const [status, setStatus] = React.useState<PromptInputStatus>('idle');
+  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
 
   function send(text: string) {
     const id = Date.now();
@@ -51,8 +63,8 @@ function Chat() {
   }
 
   function stream(id: number, length: number) {
-    setMessages((m) => m.map((msg) => (msg.id === id ? { ...msg, text: REPLY.slice(0, length) } : msg)));
-    if (length >= REPLY.length) return setStatus('idle');
+    setMessages((m) => m.map((msg) => (msg.id === id ? { ...msg, text: CHAT_REPLY.slice(0, length) } : msg)));
+    if (length >= CHAT_REPLY.length) return setStatus('idle');
     timer.current = setTimeout(() => stream(id, length + 4), 50);
   }
 
@@ -65,7 +77,7 @@ function Chat() {
 
   return (
     <Conversation
-      style={{ height: 420 }}
+      className="h-[420px] w-full"
       composer={<PromptInput placeholder="Ask about heat pumps" status={status} onSubmit={send} onStop={stop} />}
     >
       {messages.map((msg) =>
@@ -78,7 +90,7 @@ function Chat() {
             ) : (
               <>
                 <StreamingText as="span" text={msg.text} streaming={status === 'streaming' && msg === last} />
-                {msg.text === REPLY && <Citation index={1} source={SOURCE} />}
+                {msg.text === CHAT_REPLY && <Citation index={1} source={CHAT_SOURCE} />}
               </>
             )}
           </MessageBubble>

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

@@ -24,47 +24,51 @@ Feature-rich data table with sorting and row selection powered by TanStack Table
 ## Example: Default
 
 ```tsx
-const columns = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'role', header: 'Role' },
-  { accessorKey: 'status', header: 'Status' },
-  { accessorKey: 'joined', header: 'Joined' },
-];
+import { DataTable } from '@nexub/react';
 
-const data = [
-  { name: 'Alice Johnson', role: 'Admin', status: 'Active', joined: '2024-01-10' },
-  { name: 'Bob Martinez', role: 'Editor', status: 'Pending', joined: '2024-03-22' },
-  { name: 'Carol Smith', role: 'Viewer', status: 'Inactive', joined: '2024-06-05' },
-  { name: 'David Lee', role: 'Editor', status: 'Active', joined: '2024-09-17' },
-  { name: 'Eva Chen', role: 'Admin', status: 'Active', joined: '2025-01-03' },
-];
-
-<DataTable columns={columns} data={data} />
+export default function Example() {
+  const data = [
+    { name: 'Alice Brown', email: 'alice@example.com', plan: 'Pro', status: 'Active' },
+    { name: 'Bob Carter', email: 'bob@example.com', plan: 'Free', status: 'Pending' },
+    { name: 'Carol Davis', email: 'carol@example.com', plan: 'Pro', status: 'Inactive' },
+    { name: 'Dave Evans', email: 'dave@example.com', plan: 'Enterprise', status: 'Active' },
+  ];
+  const columns = [
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+    { accessorKey: 'plan', header: 'Plan' },
+    { accessorKey: 'status', header: 'Status' },
+  ];
+  return (
+    <div className="w-full max-w-[600px]">
+      <DataTable columns={columns} data={data} />
+    </div>
+  );
+}
 ```
 
 ## Example: With sorting
 
 ```tsx
-const columns = [
-  { accessorKey: 'name', header: 'Name', enableSorting: true },
-  { accessorKey: 'role', header: 'Role', enableSorting: true },
-  { accessorKey: 'status', header: 'Status', enableSorting: true },
-  { accessorKey: 'joined', header: 'Joined', enableSorting: true },
-];
-
-const data = [
-  { name: 'Alice Johnson', role: 'Admin', status: 'Active', joined: '2024-01-10' },
-  { name: 'Bob Martinez', role: 'Editor', status: 'Pending', joined: '2024-03-22' },
-  { name: 'Carol Smith', role: 'Viewer', status: 'Inactive', joined: '2024-06-05' },
-  { name: 'David Lee', role: 'Editor', status: 'Active', joined: '2024-09-17' },
-  { name: 'Eva Chen', role: 'Admin', status: 'Active', joined: '2025-01-03' },
-];
+import { DataTable } from '@nexub/react';
 
-<DataTable
-  columns={columns}
-  data={data}
-  enableSorting
-  enableRowSelection
-  pagination={{ pageSize: 5, pageIndex: 0 }}
-/>
+export default function Example() {
+  const data = [
+    { name: 'Alice Brown', email: 'alice@example.com', plan: 'Pro', status: 'Active' },
+    { name: 'Bob Carter', email: 'bob@example.com', plan: 'Free', status: 'Pending' },
+    { name: 'Carol Davis', email: 'carol@example.com', plan: 'Pro', status: 'Inactive' },
+    { name: 'Dave Evans', email: 'dave@example.com', plan: 'Enterprise', status: 'Active' },
+  ];
+  const columns = [
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'email', header: 'Email' },
+    { accessorKey: 'plan', header: 'Plan' },
+    { accessorKey: 'status', header: 'Status' },
+  ];
+  return (
+    <div className="w-full max-w-[600px]">
+      <DataTable columns={columns} data={data} enableSorting />
+    </div>
+  );
+}
 ```

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

@@ -25,32 +25,36 @@ Calendar date picker with text input.
 ## Example: Default
 
 ```tsx
-<DatePicker placeholder="Select a date…" />
+import { DatePicker } from '@nexub/react';
+
+export default function Example() {
+  return <DatePicker placeholder="Select a date…" />;
+}
 ```
 
 ## Example: With value
 
 ```tsx
-function ControlledDatePicker() {
-  const [date, setDate] = React.useState(new Date('2026-01-15'));
-  return (
-    <DatePicker
-      aria-label="Appointment date"
-      value={date}
-      onChange={setDate}
-      placeholder="Select a date…"
-    />
-  );
+import { DatePicker } from '@nexub/react';
+
+export default function Example() {
+  return <DatePicker value={new Date('2026-01-15')} onChange={() => {}} />;
 }
 ```
 
 ## Example: With constraints
 
 ```tsx
-<DatePicker
-  aria-label="Schedule for"
-  placeholder="Select a future date…"
-  minDate={new Date()}
-  maxDate={new Date(Date.now() + 90 * 24 * 60 * 60 * 1000)}
-/>
+import { DatePicker } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <DatePicker
+      aria-label="Schedule for"
+      placeholder="Select a future date…"
+      minDate={new Date()}
+      maxDate={new Date(Date.now() + 90 * 24 * 60 * 60 * 1000)}
+    />
+  );
+}
 ```

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

@@ -25,22 +25,28 @@ Dual-calendar date range selector.
 ## Example: Default
 
 ```tsx
-<DateRangePicker placeholder="Select date range…" />
+import { DateRangePicker } from '@nexub/react';
+
+export default function Example() {
+  return <DateRangePicker placeholder="Select date range…" />;
+}
 ```
 
 ## Example: Controlled
 
 ```tsx
-function ControlledDateRangePicker() {
-  const [range, setRange] = React.useState({
+import * as React from 'react';
+import { DateRangePicker } from '@nexub/react';
+
+export default function Example() {
+  const [range, setRange] = React.useState<{ from: Date | undefined; to: Date | undefined }>({
     from: new Date('2026-04-01'),
     to: new Date('2026-04-14'),
   });
   return (
     <DateRangePicker
-      aria-label="Booking period"
       value={range}
-      onChange={setRange}
+      onChange={(r) => setRange({ from: r?.from, to: r?.to })}
       placeholder="Select date range…"
     />
   );

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

@@ -32,26 +32,30 @@ Modal dialog built on Radix UI. Fully accessible with focus trapping and ARIA ro
 ## Example: Default
 
 ```tsx
-<Dialog.Root>
-  <Dialog.Trigger asChild>
-    <Button>Open Dialog</Button>
-  </Dialog.Trigger>
-  <Dialog.Portal>
-    <Dialog.Overlay />
-    <Dialog.Content>
-      <Dialog.Header>
-        <Dialog.Title>Edit profile</Dialog.Title>
-        <Dialog.Description>
-          Make changes to your profile here.
-        </Dialog.Description>
-      </Dialog.Header>
-      <Dialog.Footer>
-        <Dialog.Close asChild>
-          <Button variant="outline">Cancel</Button>
-        </Dialog.Close>
-        <Button>Save changes</Button>
-      </Dialog.Footer>
-    </Dialog.Content>
-  </Dialog.Portal>
-</Dialog.Root>
+import * as React from 'react';
+import { Button, Dialog } from '@nexub/react';
+
+export default function Example() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Portal>
+          <Dialog.Overlay />
+          <Dialog.Content size="sm">
+            <Dialog.Title>Confirm action</Dialog.Title>
+            <Dialog.Description className="mt-2 mb-6">
+              Are you sure you want to continue? This action cannot be undone.
+            </Dialog.Description>
+            <div className="flex gap-2 justify-end">
+              <Dialog.Close asChild><Button variant="outline">Cancel</Button></Dialog.Close>
+              <Button variant="primary" onClick={() => setOpen(false)}>Confirm</Button>
+            </div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
+  );
+}
 ```

package/dist/skill/references/components/drawer.md

@@ -27,53 +27,75 @@ Slide-in panel from any edge of the screen.
 ## Example: Default
 
 ```tsx
-<Drawer.Root>
-  <Drawer.Trigger asChild>
-    <Button variant="outline">Open drawer</Button>
-  </Drawer.Trigger>
-  <Drawer.Portal>
-    <Drawer.Overlay />
-    <Drawer.Content side="right">
-      <Drawer.Header>
-        <Drawer.Title>Edit profile</Drawer.Title>
-        <Drawer.Description>Make changes to your profile settings.</Drawer.Description>
-      </Drawer.Header>
-      <div style={{ padding: '16px', flex: 1 }}>
-        <Text size="body-sm" tone="secondary">Drawer body content goes here.</Text>
-      </div>
-      <Drawer.Footer>
-        <Drawer.Close asChild>
-          <Button variant="outline">Cancel</Button>
-        </Drawer.Close>
-        <Button variant="primary">Save changes</Button>
-      </Drawer.Footer>
-    </Drawer.Content>
-  </Drawer.Portal>
-</Drawer.Root>
+import * as React from 'react';
+import { Button, Drawer, Label, Input } from '@nexub/react';
+
+export default function Example() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>Open Drawer</Button>
+      <Drawer.Root open={open} onOpenChange={setOpen}>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content side="right">
+            <Drawer.Header>
+              <Drawer.Title>Edit profile</Drawer.Title>
+              <Drawer.Description>Update your profile details.</Drawer.Description>
+            </Drawer.Header>
+            <div className="p-4 flex-1 overflow-y-auto">
+              <div className="flex flex-col gap-3 items-start">
+                <div className="flex flex-col gap-1 items-start">
+                  <Label htmlFor="d-name">Name</Label>
+                  <Input id="d-name" placeholder="Jane Smith" />
+                </div>
+                <div className="flex flex-col gap-1 items-start">
+                  <Label htmlFor="d-email">Email</Label>
+                  <Input id="d-email" type="email" placeholder="jane@example.com" />
+                </div>
+              </div>
+            </div>
+            <Drawer.Footer>
+              <div className="flex gap-2 justify-end">
+                <Drawer.Close asChild><Button variant="outline">Cancel</Button></Drawer.Close>
+                <Button variant="primary">Save changes</Button>
+              </div>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </>
+  );
+}
 ```
 
 ## Example: Bottom sheet
 
 ```tsx
-<Drawer.Root>
-  <Drawer.Trigger asChild>
-    <Button variant="outline">Open bottom sheet</Button>
-  </Drawer.Trigger>
-  <Drawer.Portal>
-    <Drawer.Overlay />
-    <Drawer.Content side="bottom">
-      <Drawer.Header>
-        <Drawer.Title>Share</Drawer.Title>
-      </Drawer.Header>
-      <div style={{ padding: '16px' }}>
-        <Text size="body-sm">Choose how you would like to share this item.</Text>
-      </div>
-      <Drawer.Footer>
-        <Drawer.Close asChild>
-          <Button variant="outline" fullWidth>Cancel</Button>
-        </Drawer.Close>
-      </Drawer.Footer>
-    </Drawer.Content>
-  </Drawer.Portal>
-</Drawer.Root>
+import * as React from 'react';
+import { Button, Drawer } from '@nexub/react';
+
+export default function Example() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>Open Bottom Sheet</Button>
+      <Drawer.Root open={open} onOpenChange={setOpen}>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content side="bottom">
+            <Drawer.Header>
+              <Drawer.Title>Share to</Drawer.Title>
+            </Drawer.Header>
+            <div className="p-4 flex gap-3 flex-wrap">
+              {['Twitter', 'LinkedIn', 'Slack', 'Email'].map((s) => (
+                <Button key={s} variant="outline" size="sm">{s}</Button>
+              ))}
+            </div>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </>
+  );
+}
 ```