@nexub/mcp 2.7.0 → 2.8.0

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

@@ -24,54 +24,49 @@ Vertically stacked list of collapsible sections.
 ## Example: Default
 
 ```tsx
-<Accordion.Root type="single" collapsible defaultValue="item-1">
-  <Accordion.Item value="item-1">
-    <Accordion.Trigger>What is Nexub DS?</Accordion.Trigger>
-    <Accordion.Content>
-      Nexub DS is a design system providing accessible, themeable React components
-      built on Radix UI primitives.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2">
-    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
-    <Accordion.Content>
-      Yes. All components follow WAI-ARIA patterns and are keyboard-navigable
-      out of the box.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3">
-    <Accordion.Trigger>Can I customise the styles?</Accordion.Trigger>
-    <Accordion.Content>
-      Absolutely. Components expose design tokens via CSS custom properties,
-      and every element accepts a className prop.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Root>
+import { Accordion, Code } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[480px]">
+      <Accordion.Root type="single" collapsible>
+        <Accordion.Item value="a">
+          <Accordion.Trigger>What is Nexub?</Accordion.Trigger>
+          <Accordion.Content>A design system for ambitious SaaS teams, built on tokens and accessibility.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="b">
+          <Accordion.Trigger>How do I install?</Accordion.Trigger>
+          <Accordion.Content>Run: <Code>pnpm add @nexub/react</Code></Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="c">
+          <Accordion.Trigger>Is it open source?</Accordion.Trigger>
+          <Accordion.Content>Yes — MIT licensed and free to use.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  );
+}
 ```
 
 ## Example: Multiple
 
 ```tsx
-<Accordion.Root type="multiple" defaultValue={['item-1', 'item-2']}>
-  <Accordion.Item value="item-1">
-    <Accordion.Trigger>First section</Accordion.Trigger>
-    <Accordion.Content>
-      This section is open by default. Multiple items can be expanded
-      simultaneously when type is set to "multiple".
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2">
-    <Accordion.Trigger>Second section</Accordion.Trigger>
-    <Accordion.Content>
-      Also open by default. Click any trigger to collapse individual sections
-      independently.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3">
-    <Accordion.Trigger>Third section</Accordion.Trigger>
-    <Accordion.Content>
-      Closed by default. Expanding this does not close the others.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Root>
+import { Accordion } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[480px]">
+      <Accordion.Root type="multiple">
+        <Accordion.Item value="x">
+          <Accordion.Trigger>Section A</Accordion.Trigger>
+          <Accordion.Content>Content for section A — stays open when B is opened.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="y">
+          <Accordion.Trigger>Section B</Accordion.Trigger>
+          <Accordion.Content>Content for section B — multiple can be open at once.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/activity-feed.md

@@ -18,16 +18,17 @@ Chronological list of activity events with avatar, description, and timestamp.
 ## Example: Default
 
 ```tsx
-<ActivityFeed.Root>
-  <ActivityFeed.Item
-    title="Alex created a new project"
-    description="Project 'Nexub DS v2' was created"
-    timestamp="2 hours ago"
-  />
-  <ActivityFeed.Item
-    title="Sam invited 3 members"
-    description="Jordan, Riley, and Taylor joined"
-    timestamp="Yesterday"
-  />
-</ActivityFeed.Root>
+import { ActivityFeed } from '@nexub/patterns';
+
+export default function Example() {
+  return (
+    <div className="w-[340px]">
+      <ActivityFeed.Root>
+        <ActivityFeed.Item title="Sarah K. created an invoice" description="Invoice #1042 for Acme Corp" timestamp="2 min ago" />
+        <ActivityFeed.Item title="James L. approved a request" description="Budget increase for Q2" timestamp="15 min ago" />
+        <ActivityFeed.Item title="Maria R. added a comment" description="On the design review document" timestamp="1 hr ago" />
+      </ActivityFeed.Root>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/alert-dialog.md

@@ -23,26 +23,30 @@ Confirmation dialog that requires an explicit user action before proceeding.
 ## Example: Default
 
 ```tsx
-<AlertDialog.Root>
-  <AlertDialog.Trigger asChild>
-    <Button variant="destructive">Delete account</Button>
-  </AlertDialog.Trigger>
-  <AlertDialog.Portal>
-    <AlertDialog.Overlay />
-    <AlertDialog.Content>
-      <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-      <AlertDialog.Description>
-        This action cannot be undone. This will permanently delete your account and remove all associated data.
-      </AlertDialog.Description>
-      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '16px' }}>
-        <AlertDialog.Cancel asChild>
-          <Button variant="outline">Cancel</Button>
-        </AlertDialog.Cancel>
-        <AlertDialog.Action asChild>
-          <Button variant="destructive">Confirm delete</Button>
-        </AlertDialog.Action>
-      </div>
-    </AlertDialog.Content>
-  </AlertDialog.Portal>
-</AlertDialog.Root>
+import * as React from 'react';
+import { Button, AlertDialog } from '@nexub/react';
+
+export default function Example() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>Delete account</Button>
+      <AlertDialog.Root open={open} onOpenChange={setOpen}>
+        <AlertDialog.Portal>
+          <AlertDialog.Overlay />
+          <AlertDialog.Content>
+            <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+            <AlertDialog.Description>
+              This action cannot be undone. This will permanently delete your account and remove all your data.
+            </AlertDialog.Description>
+            <div className="flex gap-2 justify-end mt-6">
+              <AlertDialog.Cancel asChild><Button variant="outline">Cancel</Button></AlertDialog.Cancel>
+              <AlertDialog.Action asChild><Button variant="destructive">Yes, delete</Button></AlertDialog.Action>
+            </div>
+          </AlertDialog.Content>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </>
+  );
+}
 ```

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

@@ -33,22 +33,40 @@ Inline contextual message with optional title, icon, and dismiss action.
 ## Example: Default
 
 ```tsx
-<Alert tone="info" title="Heads up">Your trial expires in 3 days.</Alert>
+import { Alert } from '@nexub/react';
+
+export default function Example() {
+  return <Alert tone="info" title="Heads up">Your trial expires in 3 days.</Alert>;
+}
 ```
 
 ## Example: Tones
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <Alert tone="info" title="Information">This is an informational message.</Alert>
-  <Alert tone="success" title="Success">Your changes have been saved.</Alert>
-  <Alert tone="warning" title="Warning">Please review before proceeding.</Alert>
-  <Alert tone="danger" title="Error">Something went wrong. Please try again.</Alert>
-</div>
+import { Alert } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start w-full max-w-[480px]">
+      <Alert tone="info" title="Info">Informational message.</Alert>
+      <Alert tone="success" title="Success">Operation completed successfully.</Alert>
+      <Alert tone="warning" title="Warning">Something needs your attention.</Alert>
+      <Alert tone="danger" title="Error">Something went wrong.</Alert>
+    </div>
+  );
+}
 ```
 
 ## Example: Dismissible
 
 ```tsx
-<Alert tone="success" title="Saved" onClose={() => {}}>Your changes have been saved.</Alert>
+import { Alert } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[480px]">
+      <Alert tone="success" title="Saved" onClose={() => {}}>Your changes have been saved.</Alert>
+    </div>
+  );
+}
 ```

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

@@ -21,14 +21,26 @@ Honest money: Intl formatting, tabular numerals, the currency’s minor unit and
 ## Example: Display
 
 ```tsx
-<Amount value={128450.75} currency="USD" size="display" />
+import { Amount } from '@nexub/react';
+
+export default function Example() {
+  return <Amount value={128450.75} currency="USD" size="display" />;
+}
 ```
 
 ## Example: Gains and losses
 
 ```tsx
-<Amount value={312.4} currency="USD" tone="auto" signDisplay="exceptZero" />
-<Amount value={-89.99} currency="USD" tone="auto" />
+import { Amount } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-4">
+      <Amount value={312.4} currency="USD" tone="auto" signDisplay="exceptZero" />
+      <Amount value={-89.99} currency="USD" tone="auto" />
+    </div>
+  );
+}
 ```
 
 Related: [money-input](money-input.md), [number-ticker](number-ticker.md)

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

@@ -19,15 +19,26 @@ Authentication layout pattern. Wraps sign-in, sign-up, and reset flows in a cent
 ## Example: Sign in
 
 ```tsx
-<AuthCard
-  title="Sign in to Nexub"
-  description="Enter your credentials below"
-  footer={<Text size="sm">Don't have an account? <Link href="/signup">Sign up</Link></Text>}
->
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-    <Input type="email" placeholder="Email" />
-    <Input type="password" placeholder="Password" />
-    <Button>Sign in</Button>
-  </div>
-</AuthCard>
+import { AuthCard } from '@nexub/patterns';
+import { Label, Input, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[360px]">
+      <AuthCard title="Sign in" description="Welcome back — enter your credentials to continue.">
+        <div className="flex flex-col gap-3 items-start">
+          <div className="flex flex-col gap-1 items-start">
+            <Label htmlFor="auth-email">Email</Label>
+            <Input id="auth-email" type="email" placeholder="you@company.com" />
+          </div>
+          <div className="flex flex-col gap-1 items-start">
+            <Label htmlFor="auth-pass">Password</Label>
+            <Input id="auth-pass" type="password" placeholder="••••••••" />
+          </div>
+          <Button variant="primary" className="w-full">Sign in</Button>
+        </div>
+      </AuthCard>
+    </div>
+  );
+}
 ```

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

@@ -20,35 +20,56 @@ Type-to-search input with matching options dropdown.
 ## Example: Default
 
 ```tsx
-<Autocomplete
-  options={[
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-    { value: 'angular', label: 'Angular' },
-  ]}
-  placeholder="Search framework…"
-/>
+import { Autocomplete } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[260px]">
+      <Autocomplete
+        options={[
+          { value: 'react', label: 'React' },
+          { value: 'vue', label: 'Vue' },
+          { value: 'angular', label: 'Angular' },
+          { value: 'svelte', label: 'Svelte' },
+        ]}
+        placeholder="Search framework…"
+      />
+    </div>
+  );
+}
 ```
 
 ## Example: With loading state
 
 ```tsx
-<Autocomplete
-  options={[]}
-  loading
-  placeholder="Loading options…"
-/>
+import { Autocomplete } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[260px]">
+      <Autocomplete options={[]} loading placeholder="Loading options…" />
+    </div>
+  );
+}
 ```
 
 ## Example: Custom empty text
 
 ```tsx
-<Autocomplete
-  options={[
-    { value: 'nexub', label: 'Nexub' },
-    { value: 'acme', label: 'Acme Corp' },
-  ]}
-  placeholder="Search company…"
-  emptyText="No companies found. Try a different search."
-/>
+import { Autocomplete } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[260px]">
+      <Autocomplete
+        options={[
+          { value: 'nexub', label: 'Nexub' },
+          { value: 'acme', label: 'Acme Corp' },
+        ]}
+        placeholder="Search company…"
+        emptyText="No companies found. Try a different search."
+      />
+    </div>
+  );
+}
 ```

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

@@ -17,10 +17,17 @@ Stacked group of avatars with overflow count.
 ## Example: Default
 
 ```tsx
-<AvatarGroup max={3}>
-  <Avatar name="Alice" />
-  <Avatar name="Bob" />
-  <Avatar name="Carol" />
-  <Avatar name="Dave" />
-</AvatarGroup>
+import { AvatarGroup, Avatar } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <AvatarGroup max={3}>
+      <Avatar name="Alice B" />
+      <Avatar name="Bob C" />
+      <Avatar name="Carol D" />
+      <Avatar name="Dave E" />
+      <Avatar name="Eve F" />
+    </AvatarGroup>
+  );
+}
 ```

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

@@ -20,29 +20,50 @@ Displays a user's profile picture with initials fallback.
 ## Example: Default
 
 ```tsx
-<Avatar name="Alex Johnson" />
+import { Avatar } from '@nexub/react';
+
+export default function Example() {
+  return <Avatar name="Alex Johnson" />;
+}
 ```
 
 ## Example: Sizes
 
 ```tsx
-<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-  <Avatar size="xs" name="Alex Johnson" />
-  <Avatar size="sm" name="Alex Johnson" />
-  <Avatar size="md" name="Alex Johnson" />
-  <Avatar size="lg" name="Alex Johnson" />
-  <Avatar size="xl" name="Alex Johnson" />
-</div>
+import { Avatar } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-3 flex-wrap items-center justify-center">
+      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((s) => (
+        <Avatar key={s} name="Alex J" size={s} />
+      ))}
+    </div>
+  );
+}
 ```
 
 ## Example: With image
 
 ```tsx
-<Avatar src="https://i.pravatar.cc/150?img=1" name="Alex Johnson" />
+import { Avatar } from '@nexub/react';
+
+export default function Example() {
+  return <Avatar src="https://i.pravatar.cc/150?img=3" name="Alex Johnson" />;
+}
 ```
 
 ## Example: With badge
 
 ```tsx
-<Avatar name="Online User" badge badgeColor="green" />
+import { Avatar } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-3 flex-wrap items-center justify-center">
+      <Avatar name="Online" badge badgeColor="var(--color-success)" />
+      <Avatar name="Away" badge badgeColor="var(--color-warning)" />
+    </div>
+  );
+}
 ```

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

@@ -32,32 +32,53 @@ Small status indicator or label. Communicates state, category, or count.
 ## Example: Tones
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Badge tone="success">Active</Badge>
-  <Badge tone="danger">Error</Badge>
-  <Badge tone="warning">Warning</Badge>
-  <Badge tone="info">Info</Badge>
-  <Badge tone="neutral">Draft</Badge>
-</div>
+import { Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Badge tone="success">Active</Badge>
+      <Badge tone="danger">Error</Badge>
+      <Badge tone="warning">Warning</Badge>
+      <Badge tone="info">Info</Badge>
+      <Badge tone="neutral">Draft</Badge>
+    </div>
+  );
+}
 ```
 
 ## Example: Variants
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Badge variant="solid" tone="success">Solid</Badge>
-  <Badge variant="soft" tone="info">Soft</Badge>
-  <Badge variant="outline" tone="warning">Outline</Badge>
-</div>
+import { Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <Badge variant="solid" tone="success">Solid</Badge>
+      <Badge variant="soft" tone="info">Soft</Badge>
+      <Badge variant="outline" tone="warning">Outline</Badge>
+    </div>
+  );
+}
 ```
 
 ## Example: With leading dot
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Badge tone="success" leadingIcon={<span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />}>Online</Badge>
-  <Badge tone="danger" leadingIcon={<span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />}>Offline</Badge>
-</div>
+import { Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      {(['success', 'danger', 'warning'] as const).map((t) => (
+        <Badge key={t} tone={t} leadingIcon={<span className="w-[6px] h-[6px] rounded-full bg-current inline-block" />}>
+          {t === 'success' ? 'Online' : t === 'danger' ? 'Offline' : 'Away'}
+        </Badge>
+      ))}
+    </div>
+  );
+}
 ```
 
 ## Accessibility

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

@@ -17,16 +17,27 @@
 ## Example: Default
 
 ```tsx
-<Banner tone="info">New features available — <strong>see what's new</strong></Banner>
+import { Banner } from '@nexub/react';
+
+export default function Example() {
+  return <Banner tone="info">New features available — <strong>see what&apos;s new</strong></Banner>;
+}
 ```
 
 ## Example: With action
 
 ```tsx
-<Banner
-  tone="warning"
-  action={<Button size="sm" variant="outline">View details</Button>}
->
-  Your subscription renews in 5 days.
-</Banner>
+import { Banner, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Banner
+      tone="warning"
+      action={<Button variant="outline" size="sm">Review now</Button>}
+      onClose={() => {}}
+    >
+      Your payment method is expiring soon.
+    </Banner>
+  );
+}
 ```

package/dist/skill/references/components/bento-grid.md

@@ -26,17 +26,39 @@ A grid of card tiles in mixed sizes. Responds to its own width: 1 column, 2 at 4
 ## Example: Dashboard
 
 ```tsx
-<BentoGrid>
-  <BentoTile size="2x2">
-    <h3 className="text-title-sm">Revenue, last 7 days</h3>
-    <RevenueChart />
-  </BentoTile>
-  <BentoTile><StatTile label="Active users" value="12,480" /></BentoTile>
-  <BentoTile><StatTile label="Conversion" value="3.2%" /></BentoTile>
-  <BentoTile size="2x1">3 invoices awaiting approval.</BentoTile>
-  <BentoTile><StatTile label="Churn" value="0.8%" /></BentoTile>
-  <BentoTile><StatTile label="NPS" value="61" /></BentoTile>
-</BentoGrid>
+import { BentoGrid, BentoTile } from '@nexub/patterns';
+
+function BentoStat({ label, value }: { label: string; value: string }) {
+  return (
+    <BentoTile className="flex flex-col justify-between">
+      <span className="text-label-md text-[var(--color-on-surface-variant)]">{label}</span>
+      <span className="text-title-lg text-[var(--color-on-surface)]">{value}</span>
+    </BentoTile>
+  );
+}
+
+export default function Example() {
+  const bars = ['40%', '65%', '50%', '80%', '72%', '90%', '60%'];
+  return (
+    <BentoGrid className="w-full">
+      <BentoTile size="2x2" className="flex flex-col gap-3">
+        <h3 className="text-title-sm text-[var(--color-on-surface)]">Revenue, last 7 days</h3>
+        <div role="img" aria-label={`Bar chart: ${bars.join(', ')}`} className="flex flex-1 items-end gap-2">
+          {bars.map((h, i) => (
+            <div key={i} className="flex-1 rounded-shape-min bg-[var(--color-primary-container)]" style={{ height: h }} />
+          ))}
+        </div>
+      </BentoTile>
+      <BentoStat label="Active users" value="12,480" />
+      <BentoStat label="Conversion" value="3.2%" />
+      <BentoTile size="2x1" className="flex items-center text-body-md text-[var(--color-on-surface-variant)]">
+        3 invoices awaiting approval.
+      </BentoTile>
+      <BentoStat label="Churn" value="0.8%" />
+      <BentoStat label="NPS" value="61" />
+    </BentoGrid>
+  );
+}
 ```
 
 Related: [card](card.md), [stat-card](stat-card.md)