@nexub/mcp 2.6.0 → 2.8.0

package/dist/skill/references/components/streaming-text.md

@@ -29,18 +29,27 @@ Assistant text as it arrives: new chunks fade in, text already shown stays still
 Words arrive on a timer. Restart streams the paragraph again.
 
 ```tsx
-const reply = 'Tokens arrive a few characters at a time. Each new chunk fades in while the text before it stays put, so the eye can keep reading.';
-const [length, setLength] = React.useState(0);
-const streaming = length < reply.length;
-
-React.useEffect(() => {
-  if (!streaming) return;
-  const id = setTimeout(() => setLength((n) => Math.min(reply.length, n + 6)), 60);
-  return () => clearTimeout(id);
-}, [length, streaming]);
-
-<StreamingText as="p" text={reply.slice(0, length)} streaming={streaming} />
-<Button variant="outline" size="sm" onClick={() => setLength(0)}>Restart</Button>
+import * as React from 'react';
+import { StreamingText, Button } from '@nexub/react';
+
+const STREAM_DEMO_TEXT =
+  'Tokens arrive a few characters at a time. Each new chunk fades in while the text before it stays put, so the eye can keep reading.';
+
+export default function Example() {
+  const [length, setLength] = React.useState(0);
+  const streaming = length < STREAM_DEMO_TEXT.length;
+  React.useEffect(() => {
+    if (!streaming) return;
+    const id = setTimeout(() => setLength((n) => Math.min(STREAM_DEMO_TEXT.length, n + 6)), 60);
+    return () => clearTimeout(id);
+  }, [length, streaming]);
+  return (
+    <div className="flex flex-col gap-3 items-start max-w-[480px]">
+      <StreamingText as="p" text={STREAM_DEMO_TEXT.slice(0, length)} streaming={streaming} />
+      <Button variant="outline" size="sm" onClick={() => setLength(0)}>Restart</Button>
+    </div>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -19,18 +19,19 @@ Toggle control for binary on/off settings. Built on Radix UI Switch.
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-  <Switch id="airplane" />
-  <Label htmlFor="airplane">Airplane mode</Label>
-</div>
+import { Switch } from '@nexub/react';
+
+export default function Example() {
+  return <div className="flex gap-4 flex-wrap items-center justify-center"><Switch defaultChecked /><Switch /></div>;
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-  <Switch size="sm" />
-  <Switch size="md" />
-  <Switch size="lg" />
-</div>
+import { Switch } from '@nexub/react';
+
+export default function Example() {
+  return <div className="flex gap-4 flex-wrap items-center justify-center"><Switch size="sm" defaultChecked /><Switch size="md" defaultChecked /><Switch size="lg" defaultChecked /></div>;
+}
 ```

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

@@ -21,69 +21,75 @@ Semantic HTML table with styled variants.
 ## Example: Default
 
 ```tsx
-<Table.Root>
-  <Table.Header>
-    <Table.Row>
-      <Table.Head>Name</Table.Head>
-      <Table.Head>Status</Table.Head>
-      <Table.Head>Date</Table.Head>
-    </Table.Row>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>Alice Johnson</Table.Cell>
-      <Table.Cell><StatusPill tone="success" label="Active" /></Table.Cell>
-      <Table.Cell>12 Jan 2026</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Bob Martinez</Table.Cell>
-      <Table.Cell><StatusPill tone="warning" label="Pending" /></Table.Cell>
-      <Table.Cell>18 Feb 2026</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Carol Smith</Table.Cell>
-      <Table.Cell><StatusPill tone="neutral" label="Inactive" /></Table.Cell>
-      <Table.Cell>03 Mar 2026</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-</Table.Root>
+import { Table, Badge } from '@nexub/react';
+
+export default function Example() {
+  const rows = [
+    { name: 'Alice Brown', status: 'Active', date: 'Jan 15, 2026' },
+    { name: 'Bob Carter', status: 'Pending', date: 'Jan 14, 2026' },
+    { name: 'Carol Davis', status: 'Inactive', date: 'Jan 10, 2026' },
+  ];
+  return (
+    <Table.Root className="w-full max-w-[480px]">
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Name</Table.Head>
+          <Table.Head>Status</Table.Head>
+          <Table.Head>Date</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {rows.map((r) => (
+          <Table.Row key={r.name}>
+            <Table.Cell>{r.name}</Table.Cell>
+            <Table.Cell><Badge tone={r.status === 'Active' ? 'success' : r.status === 'Pending' ? 'warning' : 'neutral'} size="sm">{r.status}</Badge></Table.Cell>
+            <Table.Cell>{r.date}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+}
 ```
 
 ## Example: With caption
 
 ```tsx
-<Table.Root>
-  <Table.Caption>Recent user activity — last 30 days</Table.Caption>
-  <Table.Header>
-    <Table.Row>
-      <Table.Head>Name</Table.Head>
-      <Table.Head>Status</Table.Head>
-      <Table.Head>Date</Table.Head>
-    </Table.Row>
-  </Table.Header>
-  <Table.Body>
-    <Table.Row>
-      <Table.Cell>Alice Johnson</Table.Cell>
-      <Table.Cell><StatusPill tone="success" label="Active" /></Table.Cell>
-      <Table.Cell>12 Jan 2026</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Bob Martinez</Table.Cell>
-      <Table.Cell><StatusPill tone="warning" label="Pending" /></Table.Cell>
-      <Table.Cell>18 Feb 2026</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>Carol Smith</Table.Cell>
-      <Table.Cell><StatusPill tone="neutral" label="Inactive" /></Table.Cell>
-      <Table.Cell>03 Mar 2026</Table.Cell>
-    </Table.Row>
-  </Table.Body>
-  <Table.Footer>
-    <Table.Row>
-      <Table.Cell colSpan={3} style={{ color: 'var(--color-text-secondary)', fontSize: '0.875rem' }}>
-        Showing 3 of 3 users
-      </Table.Cell>
-    </Table.Row>
-  </Table.Footer>
-</Table.Root>
+import { Table, StatusPill } from '@nexub/react';
+
+export default function Example() {
+  const rows = [
+    { name: 'Alice Brown', status: 'Active', date: 'Jan 15, 2026' },
+    { name: 'Bob Carter', status: 'Pending', date: 'Jan 14, 2026' },
+    { name: 'Carol Davis', status: 'Inactive', date: 'Jan 10, 2026' },
+  ];
+  return (
+    <Table.Root className="w-full max-w-[480px]">
+      <Table.Caption>Recent user activity — last 30 days</Table.Caption>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Name</Table.Head>
+          <Table.Head>Status</Table.Head>
+          <Table.Head>Date</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {rows.map((r) => (
+          <Table.Row key={r.name}>
+            <Table.Cell>{r.name}</Table.Cell>
+            <Table.Cell><StatusPill tone={r.status === 'Active' ? 'success' : r.status === 'Pending' ? 'warning' : 'neutral'} label={r.status} /></Table.Cell>
+            <Table.Cell>{r.date}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+      <Table.Footer>
+        <Table.Row>
+          <Table.Cell colSpan={3} className="text-[var(--color-on-surface-variant)] text-body-sm">
+            Showing {rows.length} of {rows.length} users
+          </Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    </Table.Root>
+  );
+}
 ```

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

@@ -32,20 +32,28 @@ Layered content panels switched by tab triggers. Built on Radix UI Tabs.
 ## Example: Default
 
 ```tsx
-<Tabs.Root defaultValue="account">
-  <Tabs.List>
-    <Tabs.Trigger value="account">Account</Tabs.Trigger>
-    <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
-    <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
-  </Tabs.List>
-  <Tabs.Content value="account">
-    <Text>Account settings content.</Text>
-  </Tabs.Content>
-  <Tabs.Content value="billing">
-    <Text>Billing details content.</Text>
-  </Tabs.Content>
-  <Tabs.Content value="notifications">
-    <Text>Notification preferences content.</Text>
-  </Tabs.Content>
-</Tabs.Root>
+import { Tabs } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[320px]">
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List>
+          <Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Analytics</Tabs.Trigger>
+          <Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">
+          <div className="py-3 px-0 text-[var(--color-on-surface-variant)] text-body-sm">Overview content goes here.</div>
+        </Tabs.Content>
+        <Tabs.Content value="tab2">
+          <div className="py-3 px-0 text-[var(--color-on-surface-variant)] text-body-sm">Analytics content goes here.</div>
+        </Tabs.Content>
+        <Tabs.Content value="tab3">
+          <div className="py-3 px-0 text-[var(--color-on-surface-variant)] text-body-sm">Settings content goes here.</div>
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>
+  );
+}
 ```

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

@@ -17,9 +17,17 @@
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Tag>Frontend</Tag>
-  <Tag tone="info">Backend</Tag>
-  <Tag tone="success">Deployed</Tag>
-</div>
+import { Tag } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Tag>Frontend</Tag>
+      <Tag tone="info">Backend</Tag>
+      <Tag tone="success">Deployed</Tag>
+      <Tag tone="warning">Review</Tag>
+      <Tag tone="danger">Blocked</Tag>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/text-gradient.md

@@ -17,14 +17,23 @@ Renders text with a brand gradient fill.
 ## Example: Default
 
 ```tsx
-<TextGradient>Design system for ambitious teams</TextGradient>
+import { TextGradient } from '@nexub/react';
+
+export default function Example() {
+  return <TextGradient className="text-[1.5rem] font-bold">Design system for ambitious teams</TextGradient>;
+}
 ```
 
 ## Example: In heading
 
 ```tsx
-<Heading size="h1">
-  Build with{' '}
-  <TextGradient>Nexub</TextGradient>
-</Heading>
+import { Heading, TextGradient } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Heading size="h2">
+      <TextGradient>Build faster, ship consistently</TextGradient>
+    </Heading>
+  );
+}
 ```

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

@@ -20,26 +20,43 @@ Paragraph text component with size, tone, and weight variants.
 ## Example: Default
 
 ```tsx
-<Text>The Nexub design system provides accessible, token-driven components.</Text>
+import { Text } from '@nexub/react';
+
+export default function Example() {
+  return <Text>The Nexub design system provides accessible, token-driven components.</Text>;
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <Text size="body-lg">Body large — ideal for introductory paragraphs.</Text>
-  <Text size="body">Body — the default reading size.</Text>
-  <Text size="body-sm">Body small — secondary content and descriptions.</Text>
-  <Text size="caption">Caption — metadata and timestamps.</Text>
-</div>
+import { Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-1.5 items-start">
+      <Text size="body-lg">Body Large — spacious reading.</Text>
+      <Text size="body">Body — default paragraph.</Text>
+      <Text size="body-sm">Body Small — compact content.</Text>
+      <Text size="caption">Caption — supporting info.</Text>
+    </div>
+  );
+}
 ```
 
 ## Example: Tones
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <Text tone="default">Default tone</Text>
-  <Text tone="secondary">Secondary tone</Text>
-  <Text tone="muted">Muted tone</Text>
-</div>
+import { Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-1.5 items-start">
+      <Text tone="default">Default</Text>
+      <Text tone="secondary">Secondary</Text>
+      <Text tone="muted">Muted</Text>
+      <Text tone="subtle">Subtle</Text>
+    </div>
+  );
+}
 ```

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

@@ -20,21 +20,35 @@ A multi-line text input with configurable resize behaviour, size, and validation
 ## Example: Default
 
 ```tsx
-<Textarea placeholder="Enter your message…" />
+import { Textarea } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Textarea placeholder="Enter your message…" /></div>;
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <Textarea size="sm" placeholder="Small textarea" />
-  <Textarea size="md" placeholder="Medium textarea" />
-  <Textarea size="lg" placeholder="Large textarea" />
-</div>
+import { Textarea } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start w-[280px]">
+      <Textarea size="sm" placeholder="Small" rows={2} />
+      <Textarea size="md" placeholder="Medium" rows={3} />
+      <Textarea size="lg" placeholder="Large" rows={4} />
+    </div>
+  );
+}
 ```
 
 ## Example: Invalid
 
 ```tsx
-<Textarea invalid placeholder="This field has an error" />
+import { Textarea } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Textarea invalid placeholder="This field has an error" /></div>;
+}
 ```

package/dist/skill/references/components/thinking-indicator.md

@@ -27,7 +27,11 @@ Shows the assistant is working before the first token arrives: a morphing shape
 ## Example: Default
 
 ```tsx
-<ThinkingIndicator />
+import { ThinkingIndicator } from '@nexub/react';
+
+export default function Example() {
+  return <ThinkingIndicator />;
+}
 ```
 
 ## Example: Custom label and sizes
@@ -35,9 +39,17 @@ Shows the assistant is working before the first token arrives: a morphing shape
 Name the step when you know it. `label={null}` keeps only the shape.
 
 ```tsx
-<ThinkingIndicator label="Searching 4 sources" />
-<ThinkingIndicator size="sm" />
-<ThinkingIndicator size="sm" label={null} />
+import { ThinkingIndicator } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-4 items-start">
+      <ThinkingIndicator label="Searching 4 sources" />
+      <ThinkingIndicator size="sm" />
+      <ThinkingIndicator size="sm" label={null} />
+    </div>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -40,17 +40,14 @@ Imperative toast notifications using the toast object. Render <Toaster /> once i
 ## Example: Default
 
 ```tsx
-function DefaultToast() {
+import { Button, toast } from '@nexub/react';
+
+// The docs root layout already renders <Toaster />; a second one doubles every toast.
+export default function Example() {
   return (
-    <>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => toast.custom('Changes saved', { description: 'Your profile has been updated.' })}
-      >
-        Show toast
-      </Button>
-    </>
+    <Button variant="outline" onClick={() => toast.custom('Changes saved', { description: 'Your profile has been updated.' })}>
+      Show toast
+    </Button>
   );
 }
 ```
@@ -58,28 +55,16 @@ function DefaultToast() {
 ## Example: Variants
 
 ```tsx
-function ToastVariants() {
+import { Button, toast } from '@nexub/react';
+
+export default function Example() {
   return (
-    <>
-      <Toaster />
-      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-        <Button variant="outline" onClick={() => toast.custom('Default notification')}>
-          Default
-        </Button>
-        <Button variant="outline" onClick={() => toast.success('Saved successfully')}>
-          Success
-        </Button>
-        <Button variant="outline" onClick={() => toast.error('Something went wrong')}>
-          Error
-        </Button>
-        <Button variant="outline" onClick={() => toast.warning('Proceed with caution')}>
-          Warning
-        </Button>
-        <Button variant="outline" onClick={() => toast.info('New update available')}>
-          Info
-        </Button>
-      </div>
-    </>
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Button variant="outline" size="sm" onClick={() => toast.success('Saved successfully!')}>Success</Button>
+      <Button variant="outline" size="sm" onClick={() => toast.error('Something went wrong.')}>Error</Button>
+      <Button variant="outline" size="sm" onClick={() => toast.warning('Review required.')}>Warning</Button>
+      <Button variant="outline" size="sm" onClick={() => toast.info('New update available.')}>Info</Button>
+    </div>
   );
 }
 ```
@@ -87,25 +72,21 @@ function ToastVariants() {
 ## Example: With action
 
 ```tsx
-function ToastWithAction() {
+import { Button, toast } from '@nexub/react';
+
+export default function Example() {
   return (
-    <>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() =>
-          toast.custom('Message sent', {
-            description: 'Your message has been delivered to the team.',
-            action: {
-              label: 'Undo',
-              onClick: () => {},
-            },
-          })
-        }
-      >
-        Send message
-      </Button>
-    </>
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast.custom('File deleted', {
+          description: 'The file was moved to trash.',
+          action: { label: 'Undo', onClick: () => {} },
+        })
+      }
+    >
+      Delete with undo
+    </Button>
   );
 }
 ```
@@ -115,27 +96,23 @@ function ToastWithAction() {
 Hide the item right away; delete it for real only when the toast closes without Undo.
 
 ```tsx
-function UndoableDelete() {
-  const [hidden, setHidden] = React.useState(false);
+import * as React from 'react';
+import { Button, toast } from '@nexub/react';
 
-  function remove() {
+export default function Example() {
+  const [hidden, setHidden] = React.useState(false);
+  const remove = () => {
     setHidden(true);
     toast.undoable('Invoice deleted', {
       description: 'INV-2041',
       onUndo: () => setHidden(false),
-      onCommit: () => deleteInvoice('INV-2041'),
+      onCommit: () => {},
     });
-  }
-
-  return (
-    <>
-      <Toaster />
-      {hidden ? (
-        <Button variant="text" onClick={() => setHidden(false)}>Restore demo</Button>
-      ) : (
-        <Button variant="outline" tone="danger" onClick={remove}>Delete INV-2041</Button>
-      )}
-    </>
+  };
+  return hidden ? (
+    <Button variant="text" onClick={() => setHidden(false)}>Restore demo</Button>
+  ) : (
+    <Button variant="outline" tone="danger" onClick={remove}>Delete INV-2041</Button>
   );
 }
 ```

package/dist/skill/references/components/toggle-group.md

@@ -17,19 +17,31 @@ Group of toggle buttons where one or many can be active.
 ## Example: Single
 
 ```tsx
-<ToggleGroup.Root type="single" defaultValue="left">
-  <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-  <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-  <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-</ToggleGroup.Root>
+import { ToggleGroup } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ToggleGroup.Root type="single" defaultValue="left">
+      <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
+      <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
+      <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+}
 ```
 
 ## Example: Multiple
 
 ```tsx
-<ToggleGroup.Root type="multiple" defaultValue={["bold", "italic"]}>
-  <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
-  <ToggleGroup.Item value="italic">Italic</ToggleGroup.Item>
-  <ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
-</ToggleGroup.Root>
+import { ToggleGroup } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ToggleGroup.Root type="multiple" defaultValue={['bold', 'italic']}>
+      <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
+      <ToggleGroup.Item value="italic">Italic</ToggleGroup.Item>
+      <ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
+    </ToggleGroup.Root>
+  );
+}
 ```