@nexub/mcp 2.7.0 → 2.8.0

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

@@ -37,33 +37,53 @@ Text input field for forms. Supports size variants, icons, addons, and validatio
 ## Example: Default
 
 ```tsx
-<Input placeholder="Enter value…" />
+import { Input } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Input placeholder="Enter value…" /></div>;
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '320px' }}>
-  <Input size="sm" placeholder="Small" />
-  <Input size="md" placeholder="Medium" />
-  <Input size="lg" placeholder="Large" />
-</div>
+import { Input } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start w-[280px]">
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </div>
+  );
+}
 ```
 
 ## Example: Invalid state
 
 ```tsx
-<Input invalid placeholder="Invalid value" />
+import { Input } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Input invalid placeholder="Invalid value" /></div>;
+}
 ```
 
 ## Example: With label and helper
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', maxWidth: '320px' }}>
-  <Label htmlFor="email">Email address</Label>
-  <Input id="email" type="email" placeholder="you@example.com" />
-  <HelperText>We'll never share your email.</HelperText>
-</div>
+import { Label, Input, HelperText } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-1 items-start w-[280px]">
+      <Label htmlFor="demo-email">Email address</Label>
+      <Input id="demo-email" type="email" placeholder="you@example.com" />
+      <HelperText>We&apos;ll never share your email.</HelperText>
+    </div>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -15,28 +15,30 @@ Keyboard key display — renders a styled <kbd> element.
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-  <Kbd>⌘</Kbd>
-  <Kbd>K</Kbd>
-</div>
+import { Kbd } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-1 flex-wrap items-center justify-center">
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </div>
+  );
+}
 ```
 
 ## Example: Combinations
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-    <Kbd>⌘</Kbd>
-    <Kbd>K</Kbd>
-  </div>
-  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-    <Kbd>Ctrl</Kbd>
-    <Kbd>C</Kbd>
-  </div>
-  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-    <Kbd>⇧</Kbd>
-    <Kbd>⌘</Kbd>
-    <Kbd>P</Kbd>
-  </div>
-</div>
+import { Kbd, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <div className="flex gap-1 flex-wrap items-center justify-center"><Kbd>⌘</Kbd><Kbd>K</Kbd><Text size="body-sm" tone="secondary">— Open search</Text></div>
+      <div className="flex gap-1 flex-wrap items-center justify-center"><Kbd>⌃</Kbd><Kbd>C</Kbd><Text size="body-sm" tone="secondary">— Copy</Text></div>
+      <div className="flex gap-1 flex-wrap items-center justify-center"><Kbd>⇧</Kbd><Kbd>⌘</Kbd><Kbd>P</Kbd><Text size="body-sm" tone="secondary">— Command palette</Text></div>
+    </div>
+  );
+}
 ```

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

@@ -18,20 +18,34 @@ An accessible form label that optionally shows a required asterisk and links to
 ## Example: Default
 
 ```tsx
-<Label htmlFor="name">Full name</Label>
+import { Label } from '@nexub/react';
+
+export default function Example() {
+  return <Label htmlFor="demo">Full name</Label>;
+}
 ```
 
 ## Example: Required
 
 ```tsx
-<Label required>Email address</Label>
+import { Label } from '@nexub/react';
+
+export default function Example() {
+  return <Label required>Email address</Label>;
+}
 ```
 
 ## Example: With input
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" type="email" placeholder="you@example.com" />
-</div>
+import { Label, Input } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-1 items-start w-[280px]">
+      <Label htmlFor="email-ex">Email</Label>
+      <Input id="email-ex" type="email" placeholder="you@example.com" />
+    </div>
+  );
+}
 ```

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

@@ -18,21 +18,35 @@ Styled anchor link with variant and external support.
 ## Example: Default
 
 ```tsx
-<Link href="#">View documentation</Link>
+import { Link } from '@nexub/react';
+
+export default function Example() {
+  return <Link href="#">View documentation</Link>;
+}
 ```
 
 ## Example: Variants
 
 ```tsx
-<div style={{ display: 'flex', gap: '16px' }}>
-  <Link href="#" variant="default">Default</Link>
-  <Link href="#" variant="muted">Muted</Link>
-  <Link href="#" variant="underline">Underline</Link>
-</div>
+import { Link } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-4 flex-wrap items-center justify-center">
+      <Link href="#" variant="default">Default</Link>
+      <Link href="#" variant="muted">Muted</Link>
+      <Link href="#" variant="underlined">Underline</Link>
+    </div>
+  );
+}
 ```
 
 ## Example: External
 
 ```tsx
-<Link href="#" external>Open in new tab</Link>
+import { Link } from '@nexub/react';
+
+export default function Example() {
+  return <Link href="#" external>Open in new tab</Link>;
+}
 ```

package/dist/skill/references/components/list-detail.md

@@ -18,10 +18,31 @@ The list-detail layout: side by side at 720px+ of its own width (a container que
 ## Example: Default
 
 ```tsx
-<ListDetail
-  showDetail={selected !== null}
-  onBack={() => setSelected(null)}
-  list={<MessageList onSelect={setSelected} />}
-  detail={<Message id={selected} />}
-/>
+import * as React from 'react';
+import { ListDetail } from '@nexub/patterns';
+
+export default function Example() {
+  const [selected, setSelected] = React.useState<number | null>(0);
+  const items = ['Quarterly report', 'Design review', 'Invoice #4821'];
+  return (
+    <div className="w-full h-[240px] border border-[var(--color-outline-variant)] rounded-[16px] overflow-hidden">
+      <ListDetail
+        showDetail={selected !== null}
+        onBack={() => setSelected(null)}
+        list={
+          <ul className="p-2 m-0 list-none">
+            {items.map((m, i) => (
+              <li key={m}>
+                <button type="button" onClick={() => setSelected(i)} className="nx-state-layer relative w-full rounded-shape-container px-3 py-2 text-left text-body-sm">
+                  {m}
+                </button>
+              </li>
+            ))}
+          </ul>
+        }
+        detail={<div className="text-title-md p-5">{selected === null ? 'Nothing selected' : items[selected]}</div>}
+      />
+    </div>
+  );
+}
 ```

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

@@ -22,32 +22,71 @@ An image card with a glass caption over a soft scrim. With `href`, the whole car
 ## Example: With link
 
 ```tsx
-<MediaCard
-  src="/covers/lisbon.jpg"
-  alt=""
-  eyebrow="Guide"
-  title="A weekend in Lisbon"
-  description="Where to eat, walk and stay."
-  href="/guides/lisbon"
-/>
+import { MediaCard } from '@nexub/react';
+
+// Gradient placeholder image: a data: URI keeps it inside the docs CSP (img-src 'self' data:).
+const COVER =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="g" x2="1" y2="1"><stop offset="0" stop-color="#0e7490"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs><rect width="400" height="300" fill="url(#g)"/></svg>',
+  );
+
+export default function Example() {
+  return (
+    <div className="w-[320px]">
+      <MediaCard src={COVER} alt="" eyebrow="Guide" title="A weekend in Lisbon" description="Where to eat, walk and stay." href="#" />
+    </div>
+  );
+}
 ```
 
 ## Example: Without link, with actions
 
 ```tsx
-<MediaCard src="/covers/q3.jpg" alt="" title="Q3 brand shoot" description="48 photos">
-  <Button size="sm" variant="tonal">Open</Button>
-  <Button size="sm" variant="text">Share</Button>
-</MediaCard>
+import { MediaCard, Button } from '@nexub/react';
+
+// Gradient placeholder image: a data: URI keeps it inside the docs CSP (img-src 'self' data:).
+const COVER =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="g" x2="1" y2="1"><stop offset="0" stop-color="#0e7490"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs><rect width="400" height="300" fill="url(#g)"/></svg>',
+  );
+
+export default function Example() {
+  return (
+    <div className="w-[320px]">
+      <MediaCard src={COVER} alt="" title="Q3 brand shoot" description="48 photos">
+        <Button size="sm" variant="tonal">Open</Button>
+        <Button size="sm" variant="text">Share</Button>
+      </MediaCard>
+    </div>
+  );
+}
 ```
 
 ## Example: Ratios
 
 ```tsx
-<MediaCard ratio="16/9" src={src} alt="" title="16/9" />
-<MediaCard ratio="4/3" src={src} alt="" title="4/3" />
-<MediaCard ratio="1/1" src={src} alt="" title="1/1" />
-<MediaCard ratio="3/4" src={src} alt="" title="3/4" />
+import { MediaCard } from '@nexub/react';
+
+// Gradient placeholder image: a data: URI keeps it inside the docs CSP (img-src 'self' data:).
+const COVER =
+  'data:image/svg+xml;utf8,' +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="g" x2="1" y2="1"><stop offset="0" stop-color="#0e7490"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs><rect width="400" height="300" fill="url(#g)"/></svg>',
+  );
+
+export default function Example() {
+  return (
+    <div className="flex gap-3 flex-wrap items-start justify-center">
+      {(['16/9', '4/3', '1/1', '3/4'] as const).map((r) => (
+        <div key={r} className="w-[160px]">
+          <MediaCard ratio={r} src={COVER} alt="" title={r} />
+        </div>
+      ))}
+    </div>
+  );
+}
 ```
 
 ## Accessibility

package/dist/skill/references/components/message-bubble.md

@@ -36,24 +36,41 @@ One message in a conversation. User messages sit in a bubble at the end; assista
 Hover or focus the assistant reply to show its actions.
 
 ```tsx
-<MessageBubble from="user">How do I cancel my subscription?</MessageBubble>
-<MessageBubble from="assistant" avatar={<Avatar size="sm" fallback={<Sparkles />} />}>
-  <p>Open Settings, then Billing, and choose Cancel plan. You keep access until the end of the billing period.</p>
-  <MessageActions
-    text="Open Settings, then Billing, and choose Cancel plan."
-    onFeedback={(value) => logFeedback(value)}
-    onRegenerate={() => regenerate()}
-  />
-</MessageBubble>
-<MessageBubble from="system">Conversation moved to Billing support</MessageBubble>
+import { MessageBubble, Avatar, MessageActions, toast } from '@nexub/react';
+import { Sparkles } from '@nexub/icons';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-4 items-stretch w-full max-w-[560px]">
+      <MessageBubble from="user">How do I cancel my subscription?</MessageBubble>
+      <MessageBubble from="assistant" avatar={<Avatar size="sm" fallback={<Sparkles />} />}>
+        <p>Open Settings, then Billing, and choose Cancel plan. You keep access until the end of the billing period.</p>
+        <MessageActions
+          text="Open Settings, then Billing, and choose Cancel plan."
+          onFeedback={() => {}}
+          onRegenerate={() => toast.info('Regenerating…')}
+        />
+      </MessageBubble>
+      <MessageBubble from="system">Conversation moved to Billing support</MessageBubble>
+    </div>
+  );
+}
 ```
 
 ## Example: Failed to send
 
 ```tsx
-<MessageBubble from="user" status="error" onRetry={() => resend()}>
-  Can I get a refund for last month?
-</MessageBubble>
+import { MessageBubble, toast } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[560px]">
+      <MessageBubble from="user" status="error" onRetry={() => toast.info('Retrying…')}>
+        Can I get a refund for last month?
+      </MessageBubble>
+    </div>
+  );
+}
 ```
 
 ## Accessibility

package/dist/skill/references/components/money-input.md

@@ -18,13 +18,21 @@ An amount field: locale-aware parsing as you type, grouped on blur, the currency
 ## Example: Default
 
 ```tsx
-<MoneyInput aria-label="Amount to send" currency="USD" defaultValue={1250} onValueChange={setAmount} />
+import { MoneyInput } from '@nexub/react';
+
+export default function Example() {
+  return <MoneyInput aria-label="Amount to send" currency="USD" defaultValue={1250} />;
+}
 ```
 
 ## Example: German separators
 
 ```tsx
-<MoneyInput aria-label="Betrag" currency="EUR" locale="de-DE" defaultValue={1234.5} />
+import { MoneyInput } from '@nexub/react';
+
+export default function Example() {
+  return <MoneyInput aria-label="Betrag" currency="EUR" locale="de-DE" defaultValue={1234.5} />;
+}
 ```
 
 Related: [amount](amount.md), [number-input](number-input.md), [input](input.md)

package/dist/skill/references/components/motion-collapse.md

@@ -20,35 +20,35 @@ Expands and collapses content along the block axis.
 ## Example: Default
 
 ```tsx
-<Collapse in={true}>
-  <div style={{ padding: '16px', background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-md)' }}>
-    Collapsed content
-  </div>
-</Collapse>
+import { Collapse, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Collapse in>
+      <div className="p-4 bg-[var(--color-surface-container-low)] rounded-shape-field">
+        <Text size="body-sm">Collapsed content goes here.</Text>
+      </div>
+    </Collapse>
+  );
+}
 ```
 
 ## Example: Toggle
 
 ```tsx
-function CollapseToggle() {
-  const [open, setOpen] = React.useState(false);
+import * as React from 'react';
+import { Button, Collapse, Text } from '@nexub/react';
+
+export default function Example() {
+  const [visible, setVisible] = React.useState(true);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      <Button variant="outline" onClick={() => setOpen((o) => !o)}>
-        {open ? 'Collapse' : 'Expand'}
+    <div className="flex flex-col gap-3 items-start">
+      <Button variant="outline" onClick={() => setVisible((v) => !v)}>
+        {visible ? 'Collapse' : 'Expand'}
       </Button>
-      <Collapse in={open} unmountOnExit>
-        <div
-          style={{
-            padding: '16px',
-            background: 'var(--color-bg-subtle)',
-            borderRadius: 'var(--radius-md)',
-            color: 'var(--color-text-secondary)',
-            fontSize: '0.875rem',
-          }}
-        >
-          This section smoothly expands and collapses along the vertical axis.
-          It preserves the natural document flow by animating the block size.
+      <Collapse in={visible}>
+        <div className="p-4 bg-[var(--color-surface-container-low)] rounded-shape-field">
+          <Text size="body-sm">This content collapses and expands smoothly.</Text>
         </div>
       </Collapse>
     </div>

package/dist/skill/references/components/motion-fade.md

@@ -20,25 +20,28 @@ Animates opacity between 0 and 1 based on the `in` prop.
 ## Example: Default
 
 ```tsx
-<Fade in={true}>
-  <Card>Faded in content</Card>
-</Fade>
+import { Fade, Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return <Fade in><Card className="w-[200px]"><Text size="body-sm">Faded in content</Text></Card></Fade>;
+}
 ```
 
 ## Example: Toggle
 
 ```tsx
-function FadeToggle() {
+import * as React from 'react';
+import { Button, Fade, Card, Text } from '@nexub/react';
+
+export default function Example() {
   const [visible, setVisible] = React.useState(true);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <div className="flex flex-col gap-3 items-start">
       <Button variant="outline" onClick={() => setVisible((v) => !v)}>
-        {visible ? 'Fade out' : 'Fade in'}
+        {visible ? 'Hide' : 'Show'}
       </Button>
-      <Fade in={visible} duration="normal" easing="out" unmountOnExit>
-        <Card style={{ padding: '16px' }}>
-          This content fades in and out. Toggle the button to animate it.
-        </Card>
+      <Fade in={visible} unmountOnExit>
+        <Card className="w-[200px]"><Text size="body-sm">Animated content</Text></Card>
       </Fade>
     </div>
   );
@@ -48,15 +51,16 @@ function FadeToggle() {
 ## Example: Slow with spring easing
 
 ```tsx
-function SlowFade() {
+import * as React from 'react';
+import { Button, Fade, Card, Text } from '@nexub/react';
+
+export default function Example() {
   const [visible, setVisible] = React.useState(true);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <div className="flex flex-col gap-3 items-start">
       <Button variant="outline" onClick={() => setVisible((v) => !v)}>Toggle</Button>
       <Fade in={visible} duration="slow" easing="spring">
-        <div style={{ padding: '16px', background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-md)' }}>
-          Slow spring fade animation.
-        </div>
+        <Card className="w-[200px]"><Text size="body-sm">Slow spring fade animation.</Text></Card>
       </Fade>
     </div>
   );

package/dist/skill/references/components/motion-scale.md

@@ -20,33 +20,26 @@ Scales content in/out from its center.
 ## Example: Default
 
 ```tsx
-<Scale in={true}>
-  <Card>Scaled content</Card>
-</Scale>
+import { Scale, Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return <Scale in><Card className="w-[200px]"><Text size="body-sm">Scaled content</Text></Card></Scale>;
+}
 ```
 
 ## Example: Toggle
 
 ```tsx
-function ScaleToggle() {
+import * as React from 'react';
+import { Button, Scale, Card, Text } from '@nexub/react';
+
+export default function Example() {
   const [visible, setVisible] = React.useState(true);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <Button variant="outline" onClick={() => setVisible((v) => !v)}>
-        {visible ? 'Scale out' : 'Scale in'}
-      </Button>
-      <Scale in={visible} duration="fast" easing="spring" unmountOnExit>
-        <div
-          style={{
-            padding: '24px',
-            background: 'var(--color-bg-subtle)',
-            borderRadius: 'var(--radius-md)',
-            textAlign: 'center',
-            color: 'var(--color-text-secondary)',
-          }}
-        >
-          Pop!
-        </div>
+    <div className="flex flex-col gap-3 items-start">
+      <Button variant="outline" onClick={() => setVisible((v) => !v)}>Toggle</Button>
+      <Scale in={visible} unmountOnExit>
+        <Card className="w-[200px]"><Text size="body-sm">Scaling content</Text></Card>
       </Scale>
     </div>
   );

package/dist/skill/references/components/motion-slide.md

@@ -21,38 +21,26 @@ Slides content in from a direction based on the `in` prop.
 ## Example: Default
 
 ```tsx
-<Slide in={true} direction="up">
-  <Card>Slid in from bottom</Card>
-</Slide>
+import { Slide, Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return <Slide in direction="up"><Card className="w-[200px]"><Text size="body-sm">Slid in from bottom</Text></Card></Slide>;
+}
 ```
 
 ## Example: Directions
 
 ```tsx
-function SlideDirections() {
+import * as React from 'react';
+import { Button, Slide, Card, Text } from '@nexub/react';
+
+export default function Example() {
   const [visible, setVisible] = React.useState(true);
-  const [direction, setDirection] = React.useState('up');
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-        {['up', 'down', 'left', 'right'].map((dir) => (
-          <Button
-            key={dir}
-            variant={direction === dir ? 'primary' : 'outline'}
-            size="sm"
-            onClick={() => { setDirection(dir); setVisible(true); }}
-          >
-            {dir}
-          </Button>
-        ))}
-        <Button variant="ghost" size="sm" onClick={() => setVisible((v) => !v)}>
-          Toggle
-        </Button>
-      </div>
-      <Slide in={visible} direction={direction} unmountOnExit>
-        <div style={{ padding: '16px', background: 'var(--color-bg-subtle)', borderRadius: 'var(--radius-md)' }}>
-          Sliding in from {direction}.
-        </div>
+    <div className="flex flex-col gap-3 items-start">
+      <Button variant="outline" onClick={() => setVisible((v) => !v)}>Toggle</Button>
+      <Slide in={visible} direction="up" unmountOnExit>
+        <Card className="w-[200px]"><Text size="body-sm">Sliding content</Text></Card>
       </Slide>
     </div>
   );