@nexub/mcp 2.6.0 → 2.8.0

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

@@ -18,18 +18,30 @@ Generic container primitive with style token props.
 ## Example: Default
 
 ```tsx
-<Box padding="md" style={{ background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-md)' }}>
-  Content inside a Box
-</Box>
+import { Box, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Box className="p-4 bg-[var(--color-surface-container-low)] rounded-shape-field">
+      <Text size="body-sm">Content inside a Box</Text>
+    </Box>
+  );
+}
 ```
 
 ## Example: Nested
 
 ```tsx
-<Box padding="lg" style={{ background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-lg)' }}>
-  <Heading size="h4">Section title</Heading>
-  <Box padding="sm" style={{ background: 'var(--color-bg-default)', borderRadius: 'var(--radius-md)', marginTop: '8px' }}>
-    <Text>Nested box content</Text>
-  </Box>
-</Box>
+import { Box, Heading, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Box className="p-6 bg-[var(--color-surface-container-low)] rounded-shape-container">
+      <Heading size="h4">Section title</Heading>
+      <Box className="p-3 bg-[var(--color-surface)] rounded-shape-field mt-2">
+        <Text size="body-sm">Nested box content</Text>
+      </Box>
+    </Box>
+  );
+}
 ```

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

@@ -19,43 +19,41 @@ Hierarchical navigation trail showing page location.
 ## Example: Default
 
 ```tsx
-<Breadcrumb.Root>
-  <Breadcrumb.List>
-    <Breadcrumb.Item>
-      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
-    </Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item>
-      <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
-    </Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item>
-      <Breadcrumb.Page>Button</Breadcrumb.Page>
-    </Breadcrumb.Item>
-  </Breadcrumb.List>
-</Breadcrumb.Root>
+import { Breadcrumb } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Breadcrumb.Root>
+      <Breadcrumb.List>
+        <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item><Breadcrumb.Link href="/components">Components</Breadcrumb.Link></Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item><Breadcrumb.Page>Button</Breadcrumb.Page></Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  );
+}
 ```
 
 ## Example: With ellipsis
 
 ```tsx
-<Breadcrumb.Root>
-  <Breadcrumb.List>
-    <Breadcrumb.Item>
-      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
-    </Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item>
-      <Breadcrumb.Ellipsis />
-    </Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item>
-      <Breadcrumb.Link href="/components/navigation">Navigation</Breadcrumb.Link>
-    </Breadcrumb.Item>
-    <Breadcrumb.Separator />
-    <Breadcrumb.Item>
-      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
-    </Breadcrumb.Item>
-  </Breadcrumb.List>
-</Breadcrumb.Root>
+import { Breadcrumb } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Breadcrumb.Root>
+      <Breadcrumb.List>
+        <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item><Breadcrumb.Ellipsis /></Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item><Breadcrumb.Link href="/components/navigation">Navigation</Breadcrumb.Link></Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item><Breadcrumb.Page>Breadcrumb</Breadcrumb.Page></Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  );
+}
 ```

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

@@ -16,28 +16,46 @@ Groups related buttons together with optional attachment and orientation.
 ## Example: Default
 
 ```tsx
-<ButtonGroup>
-  <Button variant="primary">Save</Button>
-  <Button variant="outline">Cancel</Button>
-</ButtonGroup>
+import { ButtonGroup, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ButtonGroup>
+      <Button variant="primary">Save</Button>
+      <Button variant="outline">Cancel</Button>
+    </ButtonGroup>
+  );
+}
 ```
 
 ## Example: Attached
 
 ```tsx
-<ButtonGroup attached>
-  <Button variant="outline">Left</Button>
-  <Button variant="outline">Center</Button>
-  <Button variant="outline">Right</Button>
-</ButtonGroup>
+import { ButtonGroup, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ButtonGroup attached>
+      <Button variant="outline">Left</Button>
+      <Button variant="outline">Center</Button>
+      <Button variant="outline">Right</Button>
+    </ButtonGroup>
+  );
+}
 ```
 
 ## Example: Vertical
 
 ```tsx
-<ButtonGroup orientation="vertical">
-  <Button variant="outline">Option A</Button>
-  <Button variant="outline">Option B</Button>
-  <Button variant="outline">Option C</Button>
-</ButtonGroup>
+import { ButtonGroup, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ButtonGroup orientation="vertical">
+      <Button variant="outline">Option A</Button>
+      <Button variant="outline">Option B</Button>
+      <Button variant="outline">Option C</Button>
+    </ButtonGroup>
+  );
+}
 ```

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

@@ -41,39 +41,61 @@ Triggers an action or event. Supports multiple variants, sizes, and semantic ton
 ## Example: Default
 
 ```tsx
-<Button variant="primary">Click me</Button>
+import { Button } from '@nexub/react';
+
+export default function Example() {
+  return <Button variant="primary">Click me</Button>;
+}
 ```
 
 ## Example: Variants
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-  <Button variant="primary">Primary</Button>
-  <Button variant="outline">Outline</Button>
-  <Button variant="ghost">Ghost</Button>
-  <Button variant="subtle">Subtle</Button>
-  <Button variant="link">Link</Button>
-</div>
+import { Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Button variant="primary">Primary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="subtle">Subtle</Button>
+      <Button variant="link">Link</Button>
+    </div>
+  );
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-  <Button size="xs" variant="primary">XSmall</Button>
-  <Button size="sm" variant="primary">Small</Button>
-  <Button size="md" variant="primary">Medium</Button>
-  <Button size="lg" variant="primary">Large</Button>
-</div>
+import { Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Button size="xs" variant="primary">XSmall</Button>
+      <Button size="sm" variant="primary">Small</Button>
+      <Button size="md" variant="primary">Medium</Button>
+      <Button size="lg" variant="primary">Large</Button>
+    </div>
+  );
+}
 ```
 
 ## Example: States
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Button variant="primary" loading>Loading</Button>
-  <Button variant="outline" disabled>Disabled</Button>
-</div>
+import { Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Button variant="primary" loading>Loading</Button>
+      <Button variant="outline" disabled>Disabled</Button>
+    </div>
+  );
+}
 ```
 
 ## Example: Async
@@ -81,23 +103,26 @@ Triggers an action or event. Supports multiple variants, sizes, and semantic ton
 Drive `status` from the request. Each click here moves to the next status.
 
 ```tsx
-function SaveButton() {
-  const [status, setStatus] = React.useState<ButtonStatus>('idle');
+import * as React from 'react';
+import { type ButtonStatus, Button } from '@nexub/react';
 
-  async function save() {
-    setStatus('loading');
-    try {
-      await saveProfile();
-      setStatus('success');
-    } catch {
-      setStatus('error');
-    }
-  }
+const NEXT_STATUS: Record<ButtonStatus, ButtonStatus> = { idle: 'loading', loading: 'success', success: 'error', error: 'idle' };
 
+export default function Example() {
+  const [status, setStatus] = React.useState<ButtonStatus>('idle');
+  // Clicks are ignored while loading, so loading moves on by itself.
+  React.useEffect(() => {
+    if (status !== 'loading') return;
+    const t = setTimeout(() => setStatus('success'), 1200);
+    return () => clearTimeout(t);
+  }, [status]);
   return (
-    <Button status={status} loadingLabel="Saving" successLabel="Saved" errorLabel="Couldn't save" onClick={save}>
-      Save
-    </Button>
+    <div className="flex flex-col gap-2 items-start">
+      <Button status={status} loadingLabel="Saving" successLabel="Saved" errorLabel="Couldn't save" onClick={() => setStatus(NEXT_STATUS[status])}>
+        Save
+      </Button>
+      <span className="text-body-sm text-[var(--color-on-surface-variant)]">status: {status}</span>
+    </div>
   );
 }
 ```

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

@@ -17,11 +17,19 @@
 ## Example: Default
 
 ```tsx
-<Callout tone="warning" title="Before you continue">Deleting this record is permanent and cannot be undone.</Callout>
+import { Callout } from '@nexub/react';
+
+export default function Example() {
+  return <Callout tone="warning" title="Before you continue">Deleting this record is permanent and cannot be undone.</Callout>;
+}
 ```
 
 ## Example: Info
 
 ```tsx
-<Callout tone="info">Use token names instead of raw hex values for consistent theming.</Callout>
+import { Callout } from '@nexub/react';
+
+export default function Example() {
+  return <Callout tone="info">Use token names instead of raw hex values for consistent theming.</Callout>;
+}
 ```

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

@@ -20,20 +20,34 @@ Surface container for grouping related content. Supports flat, surface, and inte
 ## Example: Default
 
 ```tsx
-<Card>
-  <Heading level={3} size="h5">Card title</Heading>
-  <Text size="body-sm" tone="muted">Card description goes here.</Text>
-</Card>
+import { Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[280px]">
+      <Card>
+        <div className="font-semibold mb-1 text-[var(--color-on-surface)]">Card title</div>
+        <Text size="body-sm" tone="muted">Cards group related content on a raised surface.</Text>
+      </Card>
+    </div>
+  );
+}
 ```
 
 ## Example: Variants
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <Card variant="flat"><Text size="body-sm">Flat</Text></Card>
-  <Card variant="surface"><Text size="body-sm">Surface (elevated)</Text></Card>
-  <Card variant="interactive"><Text size="body-sm">Interactive (hover)</Text></Card>
-</div>
+import { Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2.5 items-start w-[280px]">
+      <Card variant="flat"><Text size="body-sm">Flat</Text></Card>
+      <Card variant="surface"><Text size="body-sm">Surface</Text></Card>
+      <Card variant="interactive"><Text size="body-sm">Interactive</Text></Card>
+    </div>
+  );
+}
 ```
 
 ## Example: Card link
@@ -41,15 +55,25 @@ Surface container for grouping related content. Supports flat, surface, and inte
 The whole card is one link named by its title. The button sits above the link with `relative z-[1]`.
 
 ```tsx
-<Card variant="interactive" className="p-4">
-  <Heading level={3} size="h5">
-    <CardLink href="/projects/atlas">Atlas</CardLink>
-  </Heading>
-  <Text size="body-sm" tone="muted">Updated 2 hours ago</Text>
-  <Button size="sm" variant="text" className="relative z-[1]" onClick={star}>
-    Star
-  </Button>
-</Card>
+import * as React from 'react';
+import { Card, Heading, CardLink, Text, Button } from '@nexub/react';
+
+export default function Example() {
+  const [starred, setStarred] = React.useState(false);
+  return (
+    <div className="w-[280px]">
+      <Card variant="interactive" className="p-4">
+        <Heading level={3} size="h5">
+          <CardLink href="#">Atlas</CardLink>
+        </Heading>
+        <Text size="body-sm" tone="muted">Updated 2 hours ago</Text>
+        <Button size="sm" variant="text" className="relative z-[1] mt-2" onClick={() => setStarred((v) => !v)}>
+          {starred ? 'Starred' : 'Star'}
+        </Button>
+      </Card>
+    </div>
+  );
+}
 ```
 
 ## Example: Sheen
@@ -57,10 +81,18 @@ The whole card is one link named by its title. The button sits above the link wi
 Move the pointer over the card.
 
 ```tsx
-<Card variant="surface" effect="sheen" className="p-6">
-  <Heading level={3} size="h5">Pro</Heading>
-  <Text size="body-sm" tone="muted">Everything in Team, plus audit logs.</Text>
-</Card>
+import { Card, Heading, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[280px]">
+      <Card variant="surface" effect="sheen" className="p-6">
+        <Heading level={3} size="h5">Pro</Heading>
+        <Text size="body-sm" tone="muted">Everything in Team, plus audit logs.</Text>
+      </Card>
+    </div>
+  );
+}
 ```
 
 ## Accessibility

package/dist/skill/references/components/checkbox-card.md

@@ -23,19 +23,34 @@ A checkbox drawn as a whole card: title, description and optional icon. Pick any
 Lay checkbox cards out with any grid; there is no group component.
 
 ```tsx
-<fieldset className="grid gap-3 sm:grid-cols-3">
-  <legend className="sr-only">Add-ons</legend>
-  <CheckboxCard icon={<Bell />} title="Alerts" description="Email and push notifications." defaultChecked />
-  <CheckboxCard icon={<Shield />} title="Audit log" description="Keep a year of activity." />
-  <CheckboxCard icon={<Zap />} title="Automations" description="Run rules on new records." />
-</fieldset>
+import { CheckboxCard } from '@nexub/react';
+import { Bell, Shield, Zap } from '@nexub/icons';
+
+export default function Example() {
+  return (
+    <fieldset className="grid gap-3 sm:grid-cols-3 w-full border-0 p-0 m-0">
+      <legend className="sr-only">Add-ons</legend>
+      <CheckboxCard icon={<Bell />} title="Alerts" description="Email and push notifications." defaultChecked />
+      <CheckboxCard icon={<Shield />} title="Audit log" description="Keep a year of activity." />
+      <CheckboxCard icon={<Zap />} title="Automations" description="Run rules on new records." />
+    </fieldset>
+  );
+}
 ```
 
 ## Example: Disabled
 
 ```tsx
-<CheckboxCard title="SSO" description="Available on Enterprise." disabled />
-<CheckboxCard title="Data residency" description="Included in your plan." defaultChecked disabled />
+import { CheckboxCard } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-3 items-stretch w-[320px]">
+      <CheckboxCard title="SSO" description="Available on Enterprise." disabled />
+      <CheckboxCard title="Data residency" description="Included in your plan." defaultChecked disabled />
+    </div>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -19,33 +19,46 @@ Binary checkbox input built on Radix UI.
 ## Example: Default
 
 ```tsx
-<Checkbox defaultChecked />
+import { Checkbox } from '@nexub/react';
+
+export default function Example() {
+  return <Checkbox defaultChecked />;
+}
 ```
 
 ## Example: With label
 
 ```tsx
-<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">I agree to the terms</Label>
-</div>
+import { Checkbox, Label } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">I agree to the terms and conditions</Label>
+    </div>
+  );
+}
 ```
 
 ## Example: States
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-    <Checkbox id="checked" defaultChecked />
-    <Label htmlFor="checked">Checked</Label>
-  </div>
-  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-    <Checkbox id="unchecked" />
-    <Label htmlFor="unchecked">Unchecked</Label>
-  </div>
-  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-    <Checkbox id="disabled" disabled />
-    <Label htmlFor="disabled">Disabled</Label>
-  </div>
-</div>
+import { Checkbox, Label } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-3 items-start">
+      <div className="flex items-center gap-2">
+        <Checkbox defaultChecked /><Label>Checked</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox /><Label>Unchecked</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox disabled /><Label>Disabled</Label>
+      </div>
+    </div>
+  );
+}
 ```

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

@@ -17,19 +17,31 @@ Compact label chip, optionally dismissible.
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Chip>Design</Chip>
-  <Chip>Engineering</Chip>
-  <Chip>Product</Chip>
-</div>
+import { Chip } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      {['Design', 'Engineering', 'Product'].map((c) => <Chip key={c}>{c}</Chip>)}
+    </div>
+  );
+}
 ```
 
 ## Example: Dismissible
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Chip onRemove={() => {}}>Design</Chip>
-  <Chip onRemove={() => {}}>Engineering</Chip>
-  <Chip onRemove={() => {}}>Product</Chip>
-</div>
+import * as React from 'react';
+import { Chip } from '@nexub/react';
+
+export default function Example() {
+  const [chips, setChips] = React.useState(['Design', 'Engineering', 'Product']);
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      {chips.map((c) => (
+        <Chip key={c} onRemove={() => setChips((prev) => prev.filter((x) => x !== c))}>{c}</Chip>
+      ))}
+    </div>
+  );
+}
 ```

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

@@ -35,18 +35,26 @@ Numbered source markers for running text, with a hover preview, plus SourceChip
 Hover or focus a number to preview its source.
 
 ```tsx
-const sources: CitationSource[] = [
-  { url: 'https://example.com/guides/heat-pumps', title: 'Choosing a heat pump', snippet: 'Air-source pumps suit most homes with a garden or outside wall.' },
-  { url: 'https://example.org/grants', title: 'Grants for home heating', domain: 'example.org' },
-  { url: 'https://example.net/costs', title: 'Running costs compared' },
+import { Citation, SourceList, type CitationSource } from '@nexub/react';
+
+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' },
 ];
 
-<p>
-  Most homes can use an air-source heat pump<Citation index={1} source={sources[0]} />.
-  Grants cover part of the cost<Citation index={2} source={sources[1]} />, and running
-  costs are close to gas<Citation index={3} source={sources[2]} />.
-</p>
-<SourceList sources={sources} />
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-4 items-stretch max-w-[560px]">
+      <p>
+        Most homes can use an air-source heat pump<Citation index={1} source={CITATION_SOURCES[0]!} />. Grants cover
+        part of the cost<Citation index={2} source={CITATION_SOURCES[1]!} />, and running costs are close to gas
+        <Citation index={3} source={CITATION_SOURCES[2]!} />.
+      </p>
+      <SourceList sources={CITATION_SOURCES} />
+    </div>
+  );
+}
 ```
 
 ## Accessibility

package/dist/skill/references/components/code-inline.md

@@ -15,11 +15,29 @@ Inline code span for technical terms and short code snippets.
 ## Example: Default
 
 ```tsx
-<Code>npm install @nexub/react</Code>
+import { Code } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap">
+      <Code>npm install</Code>
+      <Code>useTheme()</Code>
+      <Code>@nexub/react</Code>
+    </div>
+  );
+}
 ```
 
 ## Example: In prose
 
 ```tsx
-<Text>Use the <Code>useTheme()</Code> hook to access the current theme.</Text>
+import { Text, Code } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Text>
+      Use the <Code>useTheme()</Code> hook to access the current theme from any component.
+    </Text>
+  );
+}
 ```