@nexub/mcp 2.7.0 → 2.8.0

package/dist/skill/references/components/navigation-rail.md

@@ -19,11 +19,20 @@ Navigation for medium-width windows: icons over labels, with an active pill behi
 ## Example: Default
 
 ```tsx
-<NavigationRail.Root aria-label="Workspace">
-  <NavigationRail.Item href="/" icon={<Home />} label="Home" active />
-  <NavigationRail.Item href="/files" icon={<Folder />} label="Files" />
-  <NavigationRail.Item href="/settings" icon={<Settings />} label="Settings" />
-</NavigationRail.Root>
+import { NavigationRail } from '@nexub/react';
+
+export default function Example() {
+  const glyph = (d: string) => (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
+  );
+  return (
+    <NavigationRail.Root aria-label="Workspace" className="h-auto bg-[var(--color-surface-container-low)] rounded-[24px]">
+      <NavigationRail.Item href="#" icon={glyph('M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z')} label="Home" active />
+      <NavigationRail.Item href="#" icon={glyph('M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z')} label="Files" />
+      <NavigationRail.Item href="#" icon={glyph('M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z')} label="Settings" />
+    </NavigationRail.Root>
+  );
+}
 ```
 
 Related: [sidebar](sidebar.md), [top-nav](top-nav.md)

package/dist/skill/references/components/notification-item.md

@@ -20,10 +20,14 @@ Single notification row for notification panels or dropdowns.
 ## Example: Default
 
 ```tsx
-<NotificationItem
-  title="New comment on your post"
-  description="Alex left a comment on 'Design System v2'"
-  timestamp="5 min ago"
-  unread
-/>
+import { NotificationItem } from '@nexub/patterns';
+
+export default function Example() {
+  return (
+    <div className="w-[340px]">
+      <NotificationItem title="New team member" description="Sarah joined your workspace." timestamp="2 min ago" read={false} />
+      <NotificationItem title="Invoice paid" description="Invoice #1042 was paid successfully." timestamp="1 hr ago" read />
+    </div>
+  );
+}
 ```

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

@@ -20,11 +20,19 @@ A numeric input with increment and decrement controls, supporting min/max clampi
 ## Example: Default
 
 ```tsx
-<NumberInput defaultValue={0} />
+import { NumberInput } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[180px]"><NumberInput defaultValue={0} /></div>;
+}
 ```
 
 ## Example: With range
 
 ```tsx
-<NumberInput defaultValue={5} min={0} max={10} />
+import { NumberInput } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[180px]"><NumberInput defaultValue={5} min={0} max={10} /></div>;
+}
 ```

package/dist/skill/references/components/number-ticker.md

@@ -20,12 +20,20 @@ A number whose digits roll to new values on the spatial spring. The first render
 Each digit is a 0–9 strip; separators and symbols stay still.
 
 ```tsx
-const [n, setN] = React.useState(12480);
+import * as React from 'react';
+import { NumberTicker, Button } from '@nexub/react';
 
-<NumberTicker value={n} format={{ maximumFractionDigits: 0 }} className="text-title-lg" />
-<Button size="sm" variant="outlined" onClick={() => setN(Math.round(Math.random() * 100000))}>
-  Change
-</Button>
+export default function Example() {
+  const [n, setN] = React.useState(12480);
+  return (
+    <div className="flex flex-col gap-3 items-center">
+      <NumberTicker value={n} format={{ maximumFractionDigits: 0 }} className="text-title-lg" />
+      <Button size="sm" variant="outlined" onClick={() => setN(Math.round(Math.random() * 100000))}>
+        Change
+      </Button>
+    </div>
+  );
+}
 ```
 
 ## Example: Amount
@@ -33,7 +41,20 @@ const [n, setN] = React.useState(12480);
 `Amount animate` uses the ticker and keeps the quieter symbol and minor units.
 
 ```tsx
-<Amount value={balance} currency="USD" size="display" animate />
+import * as React from 'react';
+import { Amount, Button } from '@nexub/react';
+
+export default function Example() {
+  const [balance, setBalance] = React.useState(128450.75);
+  return (
+    <div className="flex flex-col gap-3 items-center">
+      <Amount value={balance} currency="USD" size="display" animate />
+      <Button size="sm" variant="outlined" onClick={() => setBalance(Math.round(Math.random() * 20000000) / 100)}>
+        Change
+      </Button>
+    </div>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -21,32 +21,23 @@ Page navigation control with prev/next and page number buttons.
 ## Example: Default
 
 ```tsx
-function DefaultPagination() {
+import * as React from 'react';
+import { Pagination } from '@nexub/react';
+
+export default function Example() {
   const [page, setPage] = React.useState(3);
-  return (
-    <Pagination
-      page={page}
-      totalItems={100}
-      pageSize={10}
-      onPageChange={setPage}
-    />
-  );
+  return <Pagination page={page} totalItems={100} pageSize={10} onPageChange={setPage} />;
 }
 ```
 
 ## Example: Large dataset
 
 ```tsx
-function LargeDatasetPagination() {
-  const [page, setPage] = React.useState(5);
-  return (
-    <Pagination
-      page={page}
-      totalItems={500}
-      pageSize={20}
-      siblingCount={2}
-      onPageChange={setPage}
-    />
-  );
+import * as React from 'react';
+import { Pagination } from '@nexub/react';
+
+export default function Example() {
+  const [page, setPage] = React.useState(3);
+  return <Pagination page={page} totalItems={500} pageSize={20} siblingCount={2} onPageChange={setPage} />;
 }
 ```

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

@@ -14,15 +14,26 @@ A password field with a built-in toggle to reveal or hide the entered value.
 | `invalid` | `boolean` |  | Applies error styling to indicate a validation failure. |
 | `disabled` | `boolean` |  | Disables the input. |
 | `size` | `'sm' \| 'md' \| 'lg'` |  | Controls font size and padding. |
+| `visible` | `boolean` |  | Shows the password as text. Controlled when set; pair with onVisibleChange. |
+| `defaultVisible` | `boolean` |  | Initial visibility when uncontrolled. Defaults to false. |
+| `onVisibleChange` | `(visible: boolean) => void` |  | Called when the reveal toggle is pressed. |
 
 ## Example: Default
 
 ```tsx
-<PasswordInput placeholder="Enter password…" />
+import { PasswordInput } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><PasswordInput placeholder="Enter password…" /></div>;
+}
 ```
 
 ## Example: Invalid
 
 ```tsx
-<PasswordInput invalid placeholder="Password is too short" />
+import { PasswordInput } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><PasswordInput invalid placeholder="Password is too short" /></div>;
+}
 ```

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

@@ -22,13 +22,21 @@ Pricing plan card with feature checklist, badge, and CTA button.
 ## Example: Default
 
 ```tsx
-<PlanCard
-  name="Pro"
-  price="$49/mo"
-  description="Everything you need to scale."
-  features={['Unlimited projects', 'Priority support', 'Custom domains', 'Analytics']}
-  highlighted
-  badge="Most Popular"
-  ctaLabel="Start free trial"
-/>
+import { PlanCard } from '@nexub/patterns';
+
+export default function Example() {
+  return (
+    <div className="w-[280px]">
+      <PlanCard
+        name="Pro"
+        price="$49"
+        period="/ month"
+        description="For growing teams that need more power."
+        features={['Unlimited seats', 'Advanced analytics', 'Priority support']}
+        cta="Get started"
+        onSelect={() => {}}
+      />
+    </div>
+  );
+}
 ```

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

@@ -23,31 +23,41 @@ Floating content panel anchored to a trigger element.
 ## Example: Default
 
 ```tsx
-<Popover.Root>
-  <Popover.Trigger asChild>
-    <Button variant="outline">Open popover</Button>
-  </Popover.Trigger>
-  <Popover.Content>
-    <Text size="body-sm">Popover content goes here.</Text>
-  </Popover.Content>
-</Popover.Root>
+import { Popover, Button, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </Popover.Trigger>
+      <Popover.Content>
+        <Text size="body-sm">This is popover content. You can put anything here.</Text>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
 ```
 
 ## Example: With close button
 
 ```tsx
-<Popover.Root>
-  <Popover.Trigger asChild>
-    <Button variant="outline">Settings</Button>
-  </Popover.Trigger>
-  <Popover.Content side="bottom" align="end" sideOffset={8}>
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      <Text weight="semibold">Preferences</Text>
-      <Text size="body-sm" tone="secondary">Adjust your display settings.</Text>
-      <Popover.Close asChild>
-        <Button variant="ghost" size="sm">Close</Button>
-      </Popover.Close>
+import { Popover, Button, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-3 flex-wrap items-center justify-center">
+      {(['top', 'right', 'bottom', 'left'] as const).map((s) => (
+        <Popover.Root key={s}>
+          <Popover.Trigger asChild>
+            <Button variant="ghost" size="sm">{s}</Button>
+          </Popover.Trigger>
+          <Popover.Content side={s}>
+            <Text size="body-sm">Opens {s}</Text>
+          </Popover.Content>
+        </Popover.Root>
+      ))}
     </div>
-  </Popover.Content>
-</Popover.Root>
+  );
+}
 ```

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

@@ -18,22 +18,36 @@ Horizontal progress bar with optional tone and animation.
 ## Example: Default
 
 ```tsx
-<Progress value={65} />
+import { Progress } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Progress value={65} /></div>;
+}
 ```
 
 ## Example: Tones
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <Progress value={80} tone="info" />
-  <Progress value={60} tone="success" />
-  <Progress value={45} tone="warning" />
-  <Progress value={30} tone="danger" />
-</div>
+import { Progress } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2.5 items-start w-[280px]">
+      <Progress value={80} tone="success" />
+      <Progress value={55} tone="info" />
+      <Progress value={30} tone="warning" />
+      <Progress value={20} tone="danger" />
+    </div>
+  );
+}
 ```
 
 ## Example: Animated
 
 ```tsx
-<Progress value={40} animated tone="info" />
+import { Progress } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Progress value={40} animated tone="info" /></div>;
+}
 ```

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

@@ -37,27 +37,48 @@ The composer for a chat: an auto-growing text field with Send, which turns into
 Enter sends, Shift+Enter adds a line. Send stays inert until there is text.
 
 ```tsx
-<PromptInput placeholder="Ask anything" onSubmit={(text) => send(text)} />
+import { PromptInput } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[520px]">
+      <PromptInput placeholder="Ask anything" />
+    </div>
+  );
+}
 ```
 
 ## Example: Attachments and actions
 
 ```tsx
-<PromptInput
-  placeholder="Ask about these files"
-  attachments={
-    <>
-      <Chip onRemove={() => remove('q3-report.pdf')}>q3-report.pdf</Chip>
-      <Chip onRemove={() => remove('pricing.csv')}>pricing.csv</Chip>
-    </>
-  }
-  actions={
-    <>
-      <IconButton size="sm" label="Attach files"><Paperclip /></IconButton>
-      <IconButton size="sm" label="Search the web"><Globe /></IconButton>
-    </>
-  }
-/>
+import * as React from 'react';
+import { PromptInput, Chip, IconButton } from '@nexub/react';
+import { Paperclip, Globe } from '@nexub/icons';
+
+export default function Example() {
+  const [files, setFiles] = React.useState(['q3-report.pdf', 'pricing.csv']);
+  return (
+    <div className="w-full max-w-[520px]">
+      <PromptInput
+        placeholder="Ask about these files"
+        attachments={
+          files.length > 0 &&
+          files.map((f) => (
+            <Chip key={f} onRemove={() => setFiles((all) => all.filter((x) => x !== f))}>
+              {f}
+            </Chip>
+          ))
+        }
+        actions={
+          <>
+            <IconButton size="sm" label="Attach files"><Paperclip /></IconButton>
+            <IconButton size="sm" label="Search the web"><Globe /></IconButton>
+          </>
+        }
+      />
+    </div>
+  );
+}
 ```
 
 ## Example: Streaming
@@ -65,20 +86,27 @@ Enter sends, Shift+Enter adds a line. Send stays inert until there is text.
 Send a message: the button turns into Stop for three seconds. Stop or Escape ends it early.
 
 ```tsx
-const [status, setStatus] = React.useState<PromptInputStatus>('idle');
-const timer = React.useRef<ReturnType<typeof setTimeout>>();
-
-function send() {
-  setStatus('streaming');
-  timer.current = setTimeout(() => setStatus('idle'), 3000);
+import * as React from 'react';
+import { type PromptInputStatus, PromptInput } from '@nexub/react';
+
+export default function Example() {
+  const [status, setStatus] = React.useState<PromptInputStatus>('idle');
+  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const send = () => {
+    setStatus('streaming');
+    timer.current = setTimeout(() => setStatus('idle'), 3000);
+  };
+  const stop = () => {
+    clearTimeout(timer.current);
+    setStatus('idle');
+  };
+  return (
+    <div className="w-full max-w-[520px]">
+      <PromptInput placeholder="Ask anything" status={status} onSubmit={send} onStop={stop} />
+    </div>
+  );
 }
-
-function stop() {
-  clearTimeout(timer.current);
-  setStatus('idle');
-}
-
-<PromptInput placeholder="Ask anything" status={status} onSubmit={send} onStop={stop} />
 ```
 
 ## Accessibility

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

@@ -33,19 +33,26 @@ A radio group where each option is a whole card: title, description and optional
 ## Example: Plan picker
 
 ```tsx
-const [plan, setPlan] = React.useState('team');
-
-<RadioCardGroup aria-label="Plan" columns={3} value={plan} onValueChange={setPlan}>
-  <RadioCard value="solo" icon={<User />} title="Solo" description="One seat, core features.">
-    <span className="text-sm font-medium">$0 / month</span>
-  </RadioCard>
-  <RadioCard value="team" icon={<Users />} title="Team" description="Up to 20 seats, shared workspaces.">
-    <span className="text-sm font-medium">$12 / seat</span>
-  </RadioCard>
-  <RadioCard value="enterprise" icon={<Building2 />} title="Enterprise" description="SSO, audit logs, priority support.">
-    <span className="text-sm font-medium">Contact sales</span>
-  </RadioCard>
-</RadioCardGroup>
+import * as React from 'react';
+import { RadioCardGroup, RadioCard } from '@nexub/react';
+import { User, Users, Building2 } from '@nexub/icons';
+
+export default function Example() {
+  const [plan, setPlan] = React.useState('team');
+  return (
+    <RadioCardGroup aria-label="Plan" columns={3} value={plan} onValueChange={setPlan} className="w-full">
+      <RadioCard value="solo" icon={<User />} title="Solo" description="One seat, core features.">
+        <span className="text-sm font-medium">$0 / month</span>
+      </RadioCard>
+      <RadioCard value="team" icon={<Users />} title="Team" description="Up to 20 seats, shared workspaces.">
+        <span className="text-sm font-medium">$12 / seat</span>
+      </RadioCard>
+      <RadioCard value="enterprise" icon={<Building2 />} title="Enterprise" description="SSO, audit logs, priority support.">
+        <span className="text-sm font-medium">Contact sales</span>
+      </RadioCard>
+    </RadioCardGroup>
+  );
+}
 ```
 
 ## Example: Columns
@@ -53,10 +60,16 @@ const [plan, setPlan] = React.useState('team');
 Two columns from the sm breakpoint up, one below.
 
 ```tsx
-<RadioCardGroup aria-label="Billing" columns={2} defaultValue="yearly">
-  <RadioCard value="monthly" title="Monthly" description="Billed every month." />
-  <RadioCard value="yearly" title="Yearly" description="Two months free." />
-</RadioCardGroup>
+import { RadioCardGroup, RadioCard } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <RadioCardGroup aria-label="Billing" columns={2} defaultValue="yearly" className="w-full">
+      <RadioCard value="monthly" title="Monthly" description="Billed every month." />
+      <RadioCard value="yearly" title="Yearly" description="Two months free." />
+    </RadioCardGroup>
+  );
+}
 ```
 
 ## Example: Disabled
@@ -64,11 +77,17 @@ Two columns from the sm breakpoint up, one below.
 Disable one card, or pass `disabled` to the group to disable all of them.
 
 ```tsx
-<RadioCardGroup aria-label="Region" columns={2} defaultValue="eu">
-  <RadioCard value="eu" title="Europe" description="Frankfurt" />
-  <RadioCard value="us" title="United States" description="Virginia" />
-  <RadioCard value="ap" title="Asia Pacific" description="Coming soon" disabled />
-</RadioCardGroup>
+import { RadioCardGroup, RadioCard } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <RadioCardGroup aria-label="Region" columns={2} defaultValue="eu" className="w-full">
+      <RadioCard value="eu" title="Europe" description="Frankfurt" />
+      <RadioCard value="us" title="United States" description="Virginia" />
+      <RadioCard value="ap" title="Asia Pacific" description="Coming soon" disabled />
+    </RadioCardGroup>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -21,37 +21,41 @@ Group of mutually exclusive radio inputs.
 ## Example: Default
 
 ```tsx
-<RadioGroup.Root defaultValue="option-2">
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <RadioGroup.Item value="option-1" id="r1" />
-      <Label htmlFor="r1">Option one</Label>
-    </div>
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <RadioGroup.Item value="option-2" id="r2" />
-      <Label htmlFor="r2">Option two</Label>
-    </div>
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <RadioGroup.Item value="option-3" id="r3" />
-      <Label htmlFor="r3">Option three</Label>
-    </div>
-  </div>
-</RadioGroup.Root>
+import { RadioGroup, Label } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <RadioGroup.Root defaultValue="monthly">
+      <div className="flex flex-col gap-2 items-start">
+        {['Monthly', 'Yearly', 'Lifetime'].map((opt) => (
+          <div key={opt} className="flex items-center gap-2">
+            <RadioGroup.Item value={opt.toLowerCase()} id={`rg-${opt}`} />
+            <Label htmlFor={`rg-${opt}`}>{opt}</Label>
+          </div>
+        ))}
+      </div>
+    </RadioGroup.Root>
+  );
+}
 ```
 
 ## Example: Horizontal
 
 ```tsx
-<RadioGroup.Root defaultValue="monthly" orientation="horizontal">
-  <div style={{ display: 'flex', gap: '16px' }}>
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <RadioGroup.Item value="monthly" id="monthly" />
-      <Label htmlFor="monthly">Monthly</Label>
-    </div>
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <RadioGroup.Item value="annual" id="annual" />
-      <Label htmlFor="annual">Annual</Label>
-    </div>
-  </div>
-</RadioGroup.Root>
+import { RadioGroup, Label } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <RadioGroup.Root defaultValue="monthly" orientation="horizontal">
+      <div className="flex gap-4">
+        {[{ value: 'monthly', label: 'Monthly' }, { value: 'annual', label: 'Annual' }].map(({ value, label }) => (
+          <div key={value} className="flex items-center gap-2">
+            <RadioGroup.Item value={value} id={`rgh-${value}`} />
+            <Label htmlFor={`rgh-${value}`}>{label}</Label>
+          </div>
+        ))}
+      </div>
+    </RadioGroup.Root>
+  );
+}
 ```

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

@@ -19,21 +19,37 @@ Star rating input, supports controlled and read-only modes.
 ## Example: Default
 
 ```tsx
-<Rating defaultValue={3} />
+import * as React from 'react';
+import { Rating } from '@nexub/react';
+
+export default function Example() {
+  const [val, setVal] = React.useState(3);
+  return <Rating value={val} onValueChange={setVal} />;
+}
 ```
 
 ## Example: Read-only
 
 ```tsx
-<Rating value={4} readOnly />
+import { Rating } from '@nexub/react';
+
+export default function Example() {
+  return <Rating value={4} readOnly />;
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <Rating defaultValue={3} size="sm" />
-  <Rating defaultValue={3} size="md" />
-  <Rating defaultValue={3} size="lg" />
-</div>
+import { Rating } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <Rating size="sm" value={4} readOnly />
+      <Rating size="md" value={4} readOnly />
+      <Rating size="lg" value={4} readOnly />
+    </div>
+  );
+}
 ```