@nexub/mcp 2.7.0 → 2.8.0

package/dist/skill/references/components/scroll-area.md

@@ -19,39 +19,40 @@ Scrollable container with custom styled scrollbars.
 ## Example: Default
 
 ```tsx
-<ScrollArea style={{ height: '200px', width: '280px', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-md)', padding: '12px' }}>
-  {Array.from({ length: 20 }, (_, i) => (
-    <div key={i} style={{ padding: '4px 0', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
-      Item {i + 1}
-    </div>
-  ))}
-</ScrollArea>
+import { ScrollArea } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ScrollArea className="h-[200px] w-[280px] border border-[var(--color-outline-variant)] rounded-shape-field p-3">
+      {Array.from({ length: 20 }, (_, i) => (
+        <div key={i} className="py-1 px-0 text-body-sm text-[var(--color-on-surface-variant)]">
+          List item {i + 1}
+        </div>
+      ))}
+    </ScrollArea>
+  );
+}
 ```
 
 ## Example: Horizontal
 
 ```tsx
-<ScrollArea orientation="horizontal" style={{ width: '320px', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-md)', padding: '12px' }}>
-  <div style={{ display: 'flex', gap: '8px', width: 'max-content' }}>
-    {Array.from({ length: 12 }, (_, i) => (
-      <div
-        key={i}
-        style={{
-          width: '80px',
-          height: '80px',
-          background: 'var(--color-bg-subtle)',
-          borderRadius: 'var(--radius-sm)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: '0.75rem',
-          color: 'var(--color-text-secondary)',
-          flexShrink: 0,
-        }}
-      >
-        Card {i + 1}
+import { ScrollArea } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ScrollArea orientation="horizontal" className="w-[320px] border border-[var(--color-outline-variant)] rounded-shape-field p-3">
+      <div className="flex gap-2 w-max">
+        {Array.from({ length: 12 }, (_, i) => (
+          <div
+            key={i}
+            className="w-[80px] h-[80px] bg-[var(--color-surface-container-low)] rounded-shape-tooltip flex items-center justify-center text-label-sm text-[var(--color-on-surface-variant)] shrink-0"
+          >
+            Card {i + 1}
+          </div>
+        ))}
       </div>
-    ))}
-  </div>
-</ScrollArea>
+    </ScrollArea>
+  );
+}
 ```

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

@@ -18,5 +18,9 @@ A text input pre-wired with a search icon and a clear button for filtering conte
 ## Example: Default
 
 ```tsx
-<SearchInput placeholder="Search…" />
+import { SearchInput } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><SearchInput placeholder="Search…" /></div>;
+}
 ```

package/dist/skill/references/components/segmented-control.md

@@ -17,28 +17,35 @@ Tab-style control for mutually exclusive selections.
 ## Example: Default
 
 ```tsx
-<SegmentedControl.Root defaultValue="month">
-  <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
-  <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
-  <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
-</SegmentedControl.Root>
+import { SegmentedControl } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <SegmentedControl.Root defaultValue="month">
+      <SegmentedControl.Item value="day">Day</SegmentedControl.Item>
+      <SegmentedControl.Item value="week">Week</SegmentedControl.Item>
+      <SegmentedControl.Item value="month">Month</SegmentedControl.Item>
+    </SegmentedControl.Root>
+  );
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <SegmentedControl.Root defaultValue="b" size="sm">
-    <SegmentedControl.Item value="a">Small A</SegmentedControl.Item>
-    <SegmentedControl.Item value="b">Small B</SegmentedControl.Item>
-  </SegmentedControl.Root>
-  <SegmentedControl.Root defaultValue="b" size="md">
-    <SegmentedControl.Item value="a">Medium A</SegmentedControl.Item>
-    <SegmentedControl.Item value="b">Medium B</SegmentedControl.Item>
-  </SegmentedControl.Root>
-  <SegmentedControl.Root defaultValue="b" size="lg">
-    <SegmentedControl.Item value="a">Large A</SegmentedControl.Item>
-    <SegmentedControl.Item value="b">Large B</SegmentedControl.Item>
-  </SegmentedControl.Root>
-</div>
+import { SegmentedControl } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-3 items-start">
+      {(['sm', 'md', 'lg'] as const).map((s) => (
+        <SegmentedControl.Root key={s} size={s} defaultValue="a">
+          <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+          <SegmentedControl.Item value="b">B</SegmentedControl.Item>
+          <SegmentedControl.Item value="c">C</SegmentedControl.Item>
+        </SegmentedControl.Root>
+      ))}
+    </div>
+  );
+}
 ```

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

@@ -32,12 +32,20 @@ Accessible dropdown select built on Radix UI. Supports groups and search.
 ## Example: Default
 
 ```tsx
-<Select.Root>
-  <Select.Trigger placeholder="Pick a fruit" />
-  <Select.Content>
-    <Select.Item value="apple">Apple</Select.Item>
-    <Select.Item value="banana">Banana</Select.Item>
-    <Select.Item value="cherry">Cherry</Select.Item>
-  </Select.Content>
-</Select.Root>
+import { Select } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[220px]">
+      <Select.Root>
+        <Select.Trigger><Select.Value placeholder="Select an option…" /></Select.Trigger>
+        <Select.Content>
+          <Select.Item value="option-1">Option 1</Select.Item>
+          <Select.Item value="option-2">Option 2</Select.Item>
+          <Select.Item value="option-3">Option 3</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </div>
+  );
+}
 ```

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

@@ -16,15 +16,25 @@ A horizontal or vertical visual divider.
 ## Example: Default
 
 ```tsx
-<Separator />
+import { Separator } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><Separator /></div>;
+}
 ```
 
 ## Example: Vertical
 
 ```tsx
-<div style={{ display: 'flex', height: '32px', alignItems: 'center', gap: '16px' }}>
-  <span>Left</span>
-  <Separator orientation="vertical" />
-  <span>Right</span>
-</div>
+import { Separator } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex h-[32px] items-center gap-4">
+      <span className="text-[var(--color-on-surface-variant)] text-body-sm">Left</span>
+      <Separator orientation="vertical" />
+      <span className="text-[var(--color-on-surface-variant)] text-body-sm">Right</span>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/settings-section.md

@@ -18,14 +18,23 @@ Grouped settings panel with title, description, and action area.
 ## Example: Default
 
 ```tsx
-<SettingsSection
-  title="Profile"
-  description="Update your personal information."
-  action={<Button size="sm">Save changes</Button>}
->
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '400px' }}>
-    <Input placeholder="Display name" />
-    <Input placeholder="Email address" type="email" />
-  </div>
-</SettingsSection>
+import { SettingsSection } from '@nexub/patterns';
+import { Switch } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[560px]">
+      <SettingsSection title="Notifications" description="Control how and when you receive notifications.">
+        <div className="flex flex-col gap-3 items-start">
+          {['Email alerts', 'Push notifications'].map((item) => (
+            <div key={item} className="flex items-center justify-between">
+              <span className="text-body-sm text-[var(--color-on-surface)]">{item}</span>
+              <Switch defaultChecked />
+            </div>
+          ))}
+        </div>
+      </SettingsSection>
+    </div>
+  );
+}
 ```

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

@@ -26,26 +26,29 @@ Alias for Drawer — slide-in sheet panel.
 ## Example: Default
 
 ```tsx
-<Sheet.Root>
-  <Sheet.Trigger asChild>
-    <Button variant="outline">Open sheet</Button>
-  </Sheet.Trigger>
-  <Sheet.Portal>
-    <Sheet.Overlay />
-    <Sheet.Content side="right">
-      <Sheet.Header>
-        <Sheet.Title>Notifications</Sheet.Title>
-        <Sheet.Description>Review your latest activity.</Sheet.Description>
-      </Sheet.Header>
-      <div style={{ padding: '16px', flex: 1 }}>
-        <Text size="body-sm" tone="secondary">No new notifications.</Text>
-      </div>
-      <Sheet.Footer>
-        <Sheet.Close asChild>
-          <Button variant="outline">Close</Button>
-        </Sheet.Close>
-      </Sheet.Footer>
-    </Sheet.Content>
-  </Sheet.Portal>
-</Sheet.Root>
+import * as React from 'react';
+import { Button, Sheet, Text } from '@nexub/react';
+
+export default function Example() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>Open Sheet</Button>
+      <Sheet.Root open={open} onOpenChange={setOpen}>
+        <Sheet.Portal>
+          <Sheet.Overlay />
+          <Sheet.Content side="right">
+            <Sheet.Header>
+              <Sheet.Title>Notifications</Sheet.Title>
+              <Sheet.Description>Your recent activity</Sheet.Description>
+            </Sheet.Header>
+            <div className="p-4 flex-1">
+              <Text size="body-sm" tone="muted">No new notifications.</Text>
+            </div>
+          </Sheet.Content>
+        </Sheet.Portal>
+      </Sheet.Root>
+    </>
+  );
+}
 ```

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

@@ -18,21 +18,38 @@ Placeholder loading animation that mimics content layout.
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', width: '280px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
-  <Skeleton shape="circle" width={40} height={40} />
-  <Skeleton shape="line" width="60%" height={12} />
-  <Skeleton shape="line" width="100%" height={12} />
-  <Skeleton shape="line" width="80%" height={12} />
-  <Skeleton shape="rect" width="100%" height={80} />
-</div>
+import { Skeleton } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start w-[280px]">
+      <Skeleton shape="line" width="60%" />
+      <Skeleton shape="line" width="100%" />
+      <Skeleton shape="line" width="80%" />
+      <div className="flex gap-2 flex-nowrap items-center justify-center">
+        <Skeleton shape="circle" width={40} height={40} />
+        <div className="flex flex-col gap-1.5 items-start flex-1">
+          <Skeleton shape="line" width="70%" />
+          <Skeleton shape="line" width="50%" />
+        </div>
+      </div>
+    </div>
+  );
+}
 ```
 
 ## Example: Shapes
 
 ```tsx
-<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-  <Skeleton shape="line" width={120} height={12} />
-  <Skeleton shape="rect" width={80} height={60} />
-  <Skeleton shape="circle" width={40} height={40} />
-</div>
+import { Skeleton } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-4 flex-wrap items-center justify-center">
+      <Skeleton shape="line" width={80} />
+      <Skeleton shape="rect" width={80} height={40} />
+      <Skeleton shape="circle" width={40} height={40} />
+    </div>
+  );
+}
 ```

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

@@ -21,11 +21,19 @@ Range slider built on Radix UI Slider.
 ## Example: Default
 
 ```tsx
-<Slider defaultValue={[50]} min={0} max={100} style={{ width: '240px' }} />
+import { Slider } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[240px]"><Slider defaultValue={[50]} min={0} max={100} /></div>;
+}
 ```
 
 ## Example: Range
 
 ```tsx
-<Slider defaultValue={[20, 80]} min={0} max={100} style={{ width: '240px' }} />
+import { Slider } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[240px]"><Slider defaultValue={[20, 80]} min={0} max={100} /></div>;
+}
 ```

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

@@ -16,17 +16,26 @@ Animated loading indicator. Inherits color from context.
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-  <Spinner size="xs" />
-  <Spinner size="sm" />
-  <Spinner size="md" />
-  <Spinner size="lg" />
-  <Spinner size="xl" />
-</div>
+import { Spinner } from '@nexub/react';
+
+export default function Example() {
+  return <div className="flex gap-5 flex-wrap items-center justify-center"><Spinner size="sm" /><Spinner size="md" /><Spinner size="lg" /><Spinner size="xl" /></div>;
+}
 ```
 
 ## Example: Inside button
 
 ```tsx
-<Button loading>Saving…</Button>
+import { Spinner } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-5 flex-wrap items-center justify-center">
+      <Spinner size="md" tone="info" />
+      <Spinner size="md" tone="success" />
+      <Spinner size="md" tone="warning" />
+      <Spinner size="md" tone="danger" />
+    </div>
+  );
+}
 ```

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

@@ -18,26 +18,37 @@ A primary action with related secondary actions behind a chevron, as one connect
 ## Example: Default
 
 ```tsx
-<SplitButton
-  onClick={save}
-  menuLabel="More save options"
-  menu={
-    <>
-      <DropdownMenu.Item>Save as draft</DropdownMenu.Item>
-      <DropdownMenu.Item>Save a copy</DropdownMenu.Item>
-    </>
-  }
->
-  Save
-</SplitButton>
+import { SplitButton, DropdownMenu } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <SplitButton
+      menuLabel="More save options"
+      menu={
+        <>
+          <DropdownMenu.Item>Save as draft</DropdownMenu.Item>
+          <DropdownMenu.Item>Save a copy</DropdownMenu.Item>
+        </>
+      }
+    >
+      Save
+    </SplitButton>
+  );
+}
 ```
 
 ## Example: Outlined
 
 ```tsx
-<SplitButton variant="outlined" menuLabel="More export options" menu={<DropdownMenu.Item>CSV</DropdownMenu.Item>}>
-  Export
-</SplitButton>
+import { SplitButton, DropdownMenu } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <SplitButton variant="outlined" menuLabel="More export options" menu={<DropdownMenu.Item>CSV</DropdownMenu.Item>}>
+      Export
+    </SplitButton>
+  );
+}
 ```
 
 Related: [button](button.md), [button-group](button-group.md), [dropdown-menu](dropdown-menu.md)

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

@@ -17,19 +17,31 @@ Vertical stack layout with configurable gap.
 ## Example: Default
 
 ```tsx
-<Stack gap="md">
-  <Button variant="outline">Item 1</Button>
-  <Button variant="outline">Item 2</Button>
-  <Button variant="outline">Item 3</Button>
-</Stack>
+import { Stack, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Stack gap="md">
+      <Button variant="outline">Item 1</Button>
+      <Button variant="outline">Item 2</Button>
+      <Button variant="outline">Item 3</Button>
+    </Stack>
+  );
+}
 ```
 
 ## Example: With dividers
 
 ```tsx
-<Stack gap="md" dividers>
-  <Text>First section</Text>
-  <Text>Second section</Text>
-  <Text>Third section</Text>
-</Stack>
+import { Stack, Separator, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Stack gap="md" divider={<Separator />} className="w-[220px]">
+      <Text size="body-sm">First item</Text>
+      <Text size="body-sm">Second item</Text>
+      <Text size="body-sm">Third item</Text>
+    </Stack>
+  );
+}
 ```

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

@@ -22,29 +22,48 @@ Metric display card showing a KPI value, label, optional delta, and icon.
 ## Example: Default
 
 ```tsx
-<StatCard
-  label="Total Revenue"
-  value="$48,295"
-  delta="+12.5%"
-  deltaType="increase"
-  description="vs last month"
-/>
+import { StatCard } from '@nexub/patterns';
+
+export default function Example() {
+  return (
+    <div className="w-[240px]">
+      <StatCard label="Total Revenue" value="$48,295" delta="+12.5%" deltaType="increase" description="vs last month" />
+    </div>
+  );
+}
 ```
 
 ## Example: With icon
 
 ```tsx
-<StatCard
-  label="Active Users"
-  value="2,841"
-  delta="-3.2%"
-  deltaType="decrease"
-  icon={<Users size={20} />}
-/>
+import { StatCard } from '@nexub/patterns';
+
+export default function Example() {
+  return (
+    <div className="flex gap-3 flex-wrap items-center justify-center">
+      <StatCard label="Users" value="2,841" delta="+8.3%" deltaType="increase" />
+      <StatCard label="Churn" value="3.2%" delta="-0.4%" deltaType="decrease" />
+    </div>
+  );
+}
 ```
 
 ## Example: Animated
 
 ```tsx
-<StatCard label="Orders today" value={orders.toLocaleString()} animate />
+import * as React from 'react';
+import { StatCard } from '@nexub/patterns';
+import { Button } from '@nexub/react';
+
+export default function Example() {
+  const [orders, setOrders] = React.useState(1284);
+  return (
+    <div className="flex flex-col gap-3 items-stretch w-[240px]">
+      <StatCard label="Orders today" value={orders.toLocaleString('en-US')} animate />
+      <Button size="sm" variant="outlined" onClick={() => setOrders((o) => o + Math.ceil(Math.random() * 40))}>
+        New orders
+      </Button>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/status-pill.md

@@ -17,21 +17,27 @@
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <StatusPill tone="success" label="Active" />
-  <StatusPill tone="warning" label="Pending" />
-  <StatusPill tone="danger" label="Error" />
-  <StatusPill tone="neutral" label="Draft" />
-  <StatusPill tone="info" label="Syncing" />
-</div>
+import { StatusPill } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <StatusPill tone="success" label="Active" />
+      <StatusPill tone="warning" label="Pending" />
+      <StatusPill tone="danger" label="Error" />
+      <StatusPill tone="neutral" label="Draft" />
+      <StatusPill tone="info" label="Syncing" />
+    </div>
+  );
+}
 ```
 
 ## Example: With dot
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <StatusPill tone="success" dot label="Live" />
-  <StatusPill tone="info" dot label="Syncing" />
-  <StatusPill tone="warning" dot label="Degraded" />
-</div>
+import { StatusPill } from '@nexub/react';
+
+export default function Example() {
+  return <StatusPill tone="success" dot label="Live" />;
+}
 ```

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

@@ -17,13 +17,14 @@ Visual progress indicator for multi-step flows like onboarding or checkout.
 ## Example: Default
 
 ```tsx
-<StepIndicator
-  currentStep={1}
-  steps={[
-    { label: 'Account' },
-    { label: 'Profile' },
-    { label: 'Payment' },
-    { label: 'Review' },
-  ]}
-/>
+import { StepIndicator } from '@nexub/patterns';
+
+export default function Example() {
+  return (
+    <StepIndicator
+      currentStep={1}
+      steps={[{ label: 'Account' }, { label: 'Profile' }, { label: 'Billing' }, { label: 'Done' }]}
+    />
+  );
+}
 ```