@nexub/mcp 2.6.0 → 2.8.0

package/dist/skill/references/components/empty-state.md

@@ -19,59 +19,49 @@ Placeholder UI shown when a list or page has no content.
 ## Example: Default
 
 ```tsx
-<EmptyState.Root>
-  <EmptyState.Illustration>
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="var(--color-text-disabled)"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.35-4.35" />
-    </svg>
-  </EmptyState.Illustration>
-  <EmptyState.Title>No results found</EmptyState.Title>
-  <EmptyState.Description>
-    Try adjusting your search or filters to find what you're looking for.
-  </EmptyState.Description>
-  <EmptyState.Actions>
-    <Button variant="primary">Clear filters</Button>
-    <Button variant="outline">Browse all</Button>
-  </EmptyState.Actions>
-</EmptyState.Root>
+import { EmptyState, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <EmptyState.Root>
+      <EmptyState.Illustration>
+        <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+          <rect x="8" y="8" width="32" height="32" rx="4" stroke="var(--color-outline-variant)" strokeWidth="2" />
+          <path d="M18 24h12M24 18v12" stroke="var(--color-on-surface-muted)" strokeWidth="2" strokeLinecap="round" />
+        </svg>
+      </EmptyState.Illustration>
+      <EmptyState.Title>No results found</EmptyState.Title>
+      <EmptyState.Description>Try adjusting your search or filters to find what you&apos;re looking for.</EmptyState.Description>
+      <EmptyState.Actions>
+        <Button variant="primary" size="sm">Clear filters</Button>
+      </EmptyState.Actions>
+    </EmptyState.Root>
+  );
+}
 ```
 
 ## Example: Custom illustration
 
 ```tsx
-<EmptyState.Root>
-  <EmptyState.Illustration>
-    <svg
-      width="80"
-      height="80"
-      viewBox="0 0 80 80"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <rect width="80" height="80" rx="40" fill="var(--color-bg-subtle)" />
-      <rect x="24" y="28" width="32" height="24" rx="4" stroke="var(--color-border-strong)" strokeWidth="2" />
-      <path d="M24 36h32" stroke="var(--color-border-strong)" strokeWidth="2" />
-      <circle cx="40" cy="48" r="4" fill="var(--color-text-disabled)" />
-    </svg>
-  </EmptyState.Illustration>
-  <EmptyState.Title>No documents yet</EmptyState.Title>
-  <EmptyState.Description>
-    Upload your first document to get started.
-  </EmptyState.Description>
-  <EmptyState.Actions>
-    <Button variant="primary">Upload document</Button>
-  </EmptyState.Actions>
-</EmptyState.Root>
+import { EmptyState, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <EmptyState.Root>
+      <EmptyState.Illustration>
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" aria-hidden="true">
+          <rect width="80" height="80" rx="40" fill="var(--color-surface-container-low)" />
+          <rect x="24" y="28" width="32" height="24" rx="4" stroke="var(--color-outline)" strokeWidth="2" />
+          <path d="M24 36h32" stroke="var(--color-outline)" strokeWidth="2" />
+          <circle cx="40" cy="48" r="4" fill="color-mix(in srgb, var(--color-on-surface) 38%, transparent)" />
+        </svg>
+      </EmptyState.Illustration>
+      <EmptyState.Title>No documents yet</EmptyState.Title>
+      <EmptyState.Description>Upload your first document to get started.</EmptyState.Description>
+      <EmptyState.Actions>
+        <Button variant="primary">Upload document</Button>
+      </EmptyState.Actions>
+    </EmptyState.Root>
+  );
+}
 ```

package/dist/skill/references/components/error-state.md

@@ -19,19 +19,31 @@ Full-page or section error view with retry action.
 ## Example: Default
 
 ```tsx
-<ErrorState
-  title="Something went wrong"
-  description="We could not load the data. Please try again."
-  onRetry={() => {}}
-/>
+import { ErrorState } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ErrorState
+      title="Something went wrong"
+      description="We could not load the data. Please try again."
+      onRetry={() => {}}
+    />
+  );
+}
 ```
 
 ## Example: Warning
 
 ```tsx
-<ErrorState
-  tone="warning"
-  title="Connection issue"
-  description="Check your network and try again."
-/>
+import { ErrorState } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <ErrorState
+      tone="warning"
+      title="Connection issue"
+      description="Check your network and try again."
+    />
+  );
+}
 ```

package/dist/skill/references/components/error-summary.md

@@ -33,28 +33,34 @@ Lists a form’s errors after a failed submit, with a link to each field. useFor
 Submit empty to see the summary. A new map per submit moves focus to the summary; links jump to each field.
 
 ```tsx
-function SignUp() {
+import * as React from 'react';
+import { type FormErrorMap, useFormErrors, ErrorSummary } from '@nexub/patterns';
+import { Label, Input, FormError, Button } from '@nexub/react';
+
+export default function Example() {
   const [submitted, setSubmitted] = React.useState<FormErrorMap>({});
   const { errors, fieldProps, errorProps } = useFormErrors(submitted);
-
-  function submit(e: React.FormEvent<HTMLFormElement>) {
+  const submit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const data = new FormData(e.currentTarget);
     setSubmitted({
-      name: String(data.get('name')).trim() ? undefined : 'Enter your name',
-      email: /^\S+@\S+\.\S+$/.test(String(data.get('email'))) ? undefined : 'Enter an email address, like name@example.com',
+      'es-name': String(data.get('name')).trim() ? undefined : 'Enter your name',
+      'es-email': /^\S+@\S+\.\S+$/.test(String(data.get('email'))) ? undefined : 'Enter an email address, like name@example.com',
     });
-  }
-
+  };
   return (
-    <form noValidate onSubmit={submit}>
+    <form noValidate onSubmit={submit} className="flex flex-col gap-3 items-stretch w-[340px]">
       <ErrorSummary errors={errors} />
-      <Label htmlFor="name">Name</Label>
-      <Input name="name" {...fieldProps('name')} invalid={Boolean(submitted.name)} />
-      {submitted.name && <FormError {...errorProps('name')}>{submitted.name}</FormError>}
-      <Label htmlFor="email">Email</Label>
-      <Input name="email" type="email" {...fieldProps('email')} invalid={Boolean(submitted.email)} />
-      {submitted.email && <FormError {...errorProps('email')}>{submitted.email}</FormError>}
+      <div className="flex flex-col gap-1 items-stretch">
+        <Label htmlFor="es-name">Name</Label>
+        <Input name="name" {...fieldProps('es-name')} invalid={Boolean(submitted['es-name'])} />
+        {submitted['es-name'] && <FormError {...errorProps('es-name')}>{submitted['es-name']}</FormError>}
+      </div>
+      <div className="flex flex-col gap-1 items-stretch">
+        <Label htmlFor="es-email">Email</Label>
+        <Input name="email" type="email" {...fieldProps('es-email')} invalid={Boolean(submitted['es-email'])} />
+        {submitted['es-email'] && <FormError {...errorProps('es-email')}>{submitted['es-email']}</FormError>}
+      </div>
       <Button type="submit">Create account</Button>
     </form>
   );

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

@@ -15,14 +15,24 @@ A compact eyebrow label, typically used above headings.
 ## Example: Default
 
 ```tsx
-<EyebrowChip>New release</EyebrowChip>
+import { EyebrowChip } from '@nexub/react';
+
+export default function Example() {
+  return <EyebrowChip>New release</EyebrowChip>;
+}
 ```
 
 ## Example: Usage
 
 ```tsx
-<div>
-  <EyebrowChip>Now available</EyebrowChip>
-  <h2 style={{ marginTop: '8px', fontSize: '1.5rem', fontWeight: 700 }}>Version 2.0</h2>
-</div>
+import { EyebrowChip } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <EyebrowChip>Now available</EyebrowChip>
+      <h2 className="m-0 text-[1.5rem] font-bold text-[var(--color-on-surface)]">Version 2.0</h2>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/filter-bar.md

@@ -19,18 +19,22 @@ Search + filter toolbar pattern for data-heavy list or table views.
 ## Example: Default
 
 ```tsx
-<FilterBar
-  searchPlaceholder="Search users…"
-  onSearch={(v) => {}}
-  filters={
-    <Select.Root>
-      <Select.Trigger><Select.Value placeholder="Status" /></Select.Trigger>
-      <Select.Content>
-        <Select.Item value="active">Active</Select.Item>
-        <Select.Item value="inactive">Inactive</Select.Item>
-      </Select.Content>
-    </Select.Root>
-  }
-  actions={<Button variant="outline" size="sm">Export</Button>}
-/>
+import { FilterBar } from '@nexub/patterns';
+import { Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-full max-w-[480px]">
+      <FilterBar
+        searchPlaceholder="Search users…"
+        filters={
+          <div className="flex gap-2 flex-wrap items-center justify-center">
+            <Badge tone="neutral">Status: All</Badge>
+            <Badge tone="neutral">Plan: All</Badge>
+          </div>
+        }
+      />
+    </div>
+  );
+}
 ```

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

@@ -18,9 +18,16 @@ Interactive chip for filtering, supports selected/unselected state.
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px' }}>
-  <FilterChip>All</FilterChip>
-  <FilterChip defaultSelected>Active</FilterChip>
-  <FilterChip>Archived</FilterChip>
-</div>
+import { FilterChip } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <FilterChip>All</FilterChip>
+      <FilterChip selected>Active</FilterChip>
+      <FilterChip>Archived</FilterChip>
+      <FilterChip>Draft</FilterChip>
+    </div>
+  );
+}
 ```

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

@@ -19,29 +19,45 @@ Flexbox layout primitive.
 ## Example: Default
 
 ```tsx
-<Flex gap="md" align="center">
-  <Button variant="primary">Action</Button>
-  <Button variant="outline">Cancel</Button>
-</Flex>
+import { Flex, Button } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Flex gap="md" align="center">
+      <Button variant="primary">Action</Button>
+      <Button variant="outline">Cancel</Button>
+    </Flex>
+  );
+}
 ```
 
 ## Example: Space between
 
 ```tsx
-<Flex justify="between">
-  <Badge tone="success">Active</Badge>
-  <Badge tone="neutral">Draft</Badge>
-</Flex>
+import { Flex, Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Flex justify="between" className="w-full max-w-[320px]">
+      <Badge tone="success">Active</Badge>
+      <Badge tone="neutral">Draft</Badge>
+    </Flex>
+  );
+}
 ```
 
 ## Example: Wrap
 
 ```tsx
-<Flex gap="sm" wrap>
-  <Badge tone="info">React</Badge>
-  <Badge tone="info">TypeScript</Badge>
-  <Badge tone="info">Tailwind</Badge>
-  <Badge tone="info">Radix UI</Badge>
-  <Badge tone="info">Storybook</Badge>
-</Flex>
+import { Flex, Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Flex gap="sm" wrap className="max-w-[260px]">
+      {['React', 'TypeScript', 'Tailwind', 'Radix UI', 'Storybook'].map((t) => (
+        <Badge key={t} tone="info">{t}</Badge>
+      ))}
+    </Flex>
+  );
+}
 ```

package/dist/skill/references/components/form-field.md

@@ -18,9 +18,15 @@ Wraps Label, Input, HelperText and FormError into a single accessible group.
 ## Example: Default
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', width: '280px' }}>
-  <Label htmlFor="field-name" required>Full name</Label>
-  <Input id="field-name" placeholder="Jane Smith" />
-  <HelperText>Enter your legal name.</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="field-name" required>Full name</Label>
+      <Input id="field-name" placeholder="Jane Smith" />
+      <HelperText>Enter your legal name.</HelperText>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/gradient-divider.md

@@ -9,5 +9,9 @@ A decorative gradient-faded horizontal rule.
 ## Example: Default
 
 ```tsx
-<GradientDivider />
+import { GradientDivider } from '@nexub/react';
+
+export default function Example() {
+  return <div className="w-[280px]"><GradientDivider /></div>;
+}
 ```

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

@@ -17,23 +17,31 @@ CSS Grid layout primitive.
 ## Example: 2-column
 
 ```tsx
-<Grid cols={2} gap="md">
-  <Card><Card.Body><Text>Card one</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card two</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card three</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card four</Text></Card.Body></Card>
-</Grid>
+import { Grid, Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Grid cols={2} gap="md" className="w-full max-w-[400px]">
+      {[1, 2, 3, 4].map((n) => (
+        <Card key={n}><Text size="body-sm" tone="muted">Card {n}</Text></Card>
+      ))}
+    </Grid>
+  );
+}
 ```
 
 ## Example: 3-column
 
 ```tsx
-<Grid cols={3} gap="md">
-  <Card><Card.Body><Text>Card one</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card two</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card three</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card four</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card five</Text></Card.Body></Card>
-  <Card><Card.Body><Text>Card six</Text></Card.Body></Card>
-</Grid>
+import { Grid, Card, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <Grid cols={3} gap="sm" className="w-full max-w-[480px]">
+      {[1, 2, 3, 4, 5, 6].map((n) => (
+        <Card key={n}><Text size="caption" tone="muted">Item {n}</Text></Card>
+      ))}
+    </Grid>
+  );
+}
 ```

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

@@ -19,28 +19,44 @@ Semantic heading component with size, weight, and tone control.
 ## Example: Default
 
 ```tsx
-<Heading>The quick brown fox</Heading>
+import { Heading } from '@nexub/react';
+
+export default function Example() {
+  return <Heading>The quick brown fox</Heading>;
+}
 ```
 
 ## Example: Scale
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <Heading size="h1">Heading H1</Heading>
-  <Heading size="h2">Heading H2</Heading>
-  <Heading size="h3">Heading H3</Heading>
-  <Heading size="h4">Heading H4</Heading>
-  <Heading size="h5">Heading H5</Heading>
-</div>
+import { Heading } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <Heading size="h1">Heading 1</Heading>
+      <Heading size="h2">Heading 2</Heading>
+      <Heading size="h3">Heading 3</Heading>
+      <Heading size="h4">Heading 4</Heading>
+      <Heading size="h5">Heading 5</Heading>
+    </div>
+  );
+}
 ```
 
 ## Example: Tones
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <Heading tone="info">Info heading</Heading>
-  <Heading tone="success">Success heading</Heading>
-  <Heading tone="warning">Warning heading</Heading>
-  <Heading tone="danger">Danger heading</Heading>
-</div>
+import { Heading } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-2 items-start">
+      <Heading tone="info">Info tone</Heading>
+      <Heading tone="success">Success tone</Heading>
+      <Heading tone="warning">Warning tone</Heading>
+      <Heading tone="danger">Danger tone</Heading>
+    </div>
+  );
+}
 ```

package/dist/skill/references/components/helper-text.md

@@ -16,16 +16,26 @@ Small supporting text placed beneath a form field to provide hints or validation
 ## Example: Default
 
 ```tsx
-<HelperText>We will never share your email with anyone else.</HelperText>
+import { HelperText } from '@nexub/react';
+
+export default function Example() {
+  return <HelperText>We will never share your email with anyone else.</HelperText>;
+}
 ```
 
 ## Example: Tones
 
 ```tsx
-<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-  <HelperText tone="info">Your password must be at least 8 characters.</HelperText>
-  <HelperText tone="success">Username is available.</HelperText>
-  <HelperText tone="warning">This action may affect other records.</HelperText>
-  <HelperText tone="danger">This field is required.</HelperText>
-</div>
+import { HelperText } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="flex flex-col gap-1.5 items-start">
+      <HelperText tone="info">Sync runs every 10 minutes.</HelperText>
+      <HelperText tone="success">Your account is verified.</HelperText>
+      <HelperText tone="warning">This action cannot be reversed.</HelperText>
+      <HelperText tone="danger">Required field is missing.</HelperText>
+    </div>
+  );
+}
 ```

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

@@ -19,16 +19,25 @@ Rich tooltip card revealed on hover.
 ## Example: Default
 
 ```tsx
-<HoverCard.Root openDelay={200} closeDelay={100}>
-  <HoverCard.Trigger asChild>
-    <Link href="#">@sasidharan</Link>
-  </HoverCard.Trigger>
-  <HoverCard.Content side="bottom" align="start" sideOffset={8}>
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', width: '240px' }}>
-      <Text weight="semibold">Sasidharan</Text>
-      <Text size="body-sm" tone="secondary">Full-stack engineer building design systems.</Text>
-      <Text size="caption" tone="muted">Joined April 2024</Text>
-    </div>
-  </HoverCard.Content>
-</HoverCard.Root>
+import { HoverCard, Link, Avatar, Text } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger asChild>
+        <Link href="#">@alex_johnson</Link>
+      </HoverCard.Trigger>
+      <HoverCard.Content>
+        <div className="flex flex-col gap-2 items-start">
+          <Avatar name="Alex Johnson" size="lg" />
+          <div>
+            <Text weight="semibold">Alex Johnson</Text>
+            <Text size="body-sm" tone="muted">Product Designer</Text>
+          </div>
+          <Text size="body-sm" tone="secondary">Building design systems and making developers happy.</Text>
+        </div>
+      </HoverCard.Content>
+    </HoverCard.Root>
+  );
+}
 ```

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

@@ -19,26 +19,28 @@ A square button designed to hold a single icon, with an accessible label.
 ## Example: Default
 
 ```tsx
-<IconButton variant="ghost" aria-label="Settings">
-  <div style={{ width: 16, height: 16, background: 'currentColor', borderRadius: 2 }} />
-</IconButton>
+import { IconButton } from '@nexub/react';
+
+export default function Example() {
+  const icon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>;
+  return <IconButton variant="ghost" label="Add item">{icon}</IconButton>;
+}
 ```
 
 ## Example: Variants
 
 ```tsx
-<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-  <IconButton variant="ghost" aria-label="Ghost action">
-    <div style={{ width: 16, height: 16, background: 'currentColor', borderRadius: 2 }} />
-  </IconButton>
-  <IconButton variant="solid" aria-label="Solid action">
-    <div style={{ width: 16, height: 16, background: 'currentColor', borderRadius: 2 }} />
-  </IconButton>
-  <IconButton variant="outline" aria-label="Outline action">
-    <div style={{ width: 16, height: 16, background: 'currentColor', borderRadius: 2 }} />
-  </IconButton>
-  <IconButton variant="subtle" aria-label="Subtle action">
-    <div style={{ width: 16, height: 16, background: 'currentColor', borderRadius: 2 }} />
-  </IconButton>
-</div>
+import { IconButton } from '@nexub/react';
+
+export default function Example() {
+  const icon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>;
+  return (
+    <div className="flex gap-2 flex-wrap items-center justify-center">
+      <IconButton variant="ghost" label="Ghost">{icon}</IconButton>
+      <IconButton variant="solid" label="Solid">{icon}</IconButton>
+      <IconButton variant="outline" label="Outline">{icon}</IconButton>
+      <IconButton variant="subtle" label="Subtle">{icon}</IconButton>
+    </div>
+  );
+}
 ```

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

@@ -16,10 +16,19 @@ Key–value list for displaying structured metadata or details.
 ## Example: Default
 
 ```tsx
-<InfoList.Root>
-  <InfoList.Item label="Plan" value="Pro" />
-  <InfoList.Item label="Status" value={<Badge tone="success">Active</Badge>} />
-  <InfoList.Item label="Member since" value="Jan 2024" />
-  <InfoList.Item label="Team size" value="12 members" />
-</InfoList.Root>
+import { InfoList } from '@nexub/patterns';
+import { Badge } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="w-[280px]">
+      <InfoList.Root>
+        <InfoList.Item label="Plan" value="Pro" />
+        <InfoList.Item label="Seats" value="12 / 50" />
+        <InfoList.Item label="Renewal" value="Jan 15, 2026" />
+        <InfoList.Item label="Status" value={<Badge tone="success" size="sm">Active</Badge>} />
+      </InfoList.Root>
+    </div>
+  );
+}
 ```