@nexub/mcp 0.0.0-stage → 1.7.0

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

@@ -0,0 +1,28 @@
+# Password Input
+
+A password field with a built-in toggle to reveal or hide the entered value.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: stable
+- Import: `import { PasswordInput } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/password-input
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `placeholder` | `string` |  | Placeholder text shown when the field is empty. |
+| `invalid` | `boolean` |  | Applies error styling to indicate a validation failure. |
+| `disabled` | `boolean` |  | Disables the input. |
+| `size` | `'sm' \| 'md' \| 'lg'` |  | Controls font size and padding. |
+
+## Example: Default
+
+```tsx
+<PasswordInput placeholder="Enter password…" />
+```
+
+## Example: Invalid
+
+```tsx
+<PasswordInput invalid placeholder="Password is too short" />
+```

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

@@ -0,0 +1,34 @@
+# PlanCard
+
+Pricing plan card with feature checklist, badge, and CTA button.
+
+- Package: `@nexub/patterns` · Category: Marketing · Status: stable
+- Import: `import { PlanCard } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/plan-card
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `name` (required) | `string` |  | Plan name (e.g. "Pro"). |
+| `price` (required) | `string` |  | Price string (e.g. "$49/mo"). |
+| `description` | `string` |  | Short plan description. |
+| `features` | `string[]` |  | List of included features. |
+| `highlighted` | `boolean` | `false` | Applies brand accent styling for recommended plans. |
+| `badge` | `string` |  | Label for the plan badge (e.g. "Most Popular"). |
+| `ctaLabel` | `string` | `'Get started'` | CTA button label. |
+| `onCta` | `() => void` |  | CTA button click handler. |
+
+## 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"
+/>
+```

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

@@ -0,0 +1,53 @@
+# Popover
+
+Floating content panel anchored to a trigger element.
+
+- Package: `@nexub/react` · Category: Overlays · Status: stable
+- Import: `import { Popover } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/popover
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `Popover.Root` | `compound` |  | Root provider that manages open/close state. |
+| `Popover.Trigger` | `compound` |  | Element that toggles the popover on click. |
+| `Popover.Content` | `compound` |  | The floating content panel. |
+| `Popover.Arrow` | `compound` |  | Optional arrow pointing to the trigger. |
+| `Popover.Close` | `compound` |  | Button that closes the popover. |
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` |  | Preferred side of the trigger to render the content. |
+| `align` | `'start' \| 'center' \| 'end'` |  | Alignment of the content relative to the trigger. |
+| `sideOffset` | `number` |  | Distance in pixels between the trigger and the content. |
+| `surface` | `'solid' \| 'glass'` | `'solid'` | Glass material on Popover.Content — see Foundations → Materials. |
+
+## 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>
+```
+
+## 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>
+    </div>
+  </Popover.Content>
+</Popover.Root>
+```

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

@@ -0,0 +1,39 @@
+# Progress
+
+Horizontal progress bar with optional tone and animation.
+
+- Package: `@nexub/react` · Category: Loading States · Status: stable
+- Import: `import { Progress } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/progress
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number` |  | Current progress value between 0 and max. |
+| `max` | `number` | `100` | Maximum value of the progress bar. |
+| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  | Semantic colour tone of the filled track. |
+| `animated` | `boolean` | `false` | Adds a stripes-in-motion animation to the filled track. |
+
+## Example: Default
+
+```tsx
+<Progress value={65} />
+```
+
+## 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>
+```
+
+## Example: Animated
+
+```tsx
+<Progress value={40} animated tone="info" />
+```

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

@@ -0,0 +1,95 @@
+# Prompt Input
+
+The composer for a chat: an auto-growing text field with Send, which turns into Stop while a reply streams.
+
+- Package: `@nexub/react` · Category: AI · Status: beta
+- Import: `import { PromptInput } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/prompt-input
+
+## When to use
+
+- The message box of a chat or assistant.
+- Any free-text prompt that starts a long-running, stoppable generation.
+
+## When not to use
+
+- Ordinary forms: use Textarea, where Enter adds a line.
+- Search: use SearchInput.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value / defaultValue / onValueChange` | `string` |  | Controlled or uncontrolled text. Uncontrolled input clears itself after a submit. |
+| `onSubmit` | `(value: string) => void` |  | Called with the text on Enter or Send. Not called while empty, disabled or not `idle`. |
+| `onStop` | `() => void` |  | Called by Stop, or Escape in the field, while `status="streaming"`. |
+| `status` | `'idle' \| 'submitting' \| 'streaming'` | `'idle'` | `streaming` swaps Send for Stop; `submitting` holds Send until the request is accepted. |
+| `maxRows` | `number` | `8` | Rows the field grows to before it scrolls. |
+| `attachments` | `ReactNode` |  | Rendered above the text, e.g. removable Chips. |
+| `actions` | `ReactNode` |  | Rendered bottom-start, e.g. an attach IconButton or a model picker. |
+| `surface` | `'solid' \| 'glass'` | `'solid'` | Glass material for composers floating over content. |
+| `label` | `string` | `messages.promptLabel ('Message')` | Accessible name of the text field. |
+| `messages` | `Partial<PromptInputMessages>` |  | Local overrides for `promptLabel`, `sendMessage`, `stopGenerating`, `promptHint`. |
+| `textareaClassName` | `string` |  | Class for the textarea; `className` goes to the outer container. |
+
+## Example: Default
+
+Enter sends, Shift+Enter adds a line. Send stays inert until there is text.
+
+```tsx
+<PromptInput placeholder="Ask anything" onSubmit={(text) => send(text)} />
+```
+
+## 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>
+    </>
+  }
+/>
+```
+
+## Example: Streaming
+
+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);
+}
+
+function stop() {
+  clearTimeout(timer.current);
+  setStatus('idle');
+}
+
+<PromptInput placeholder="Ask anything" status={status} onSubmit={send} onStop={stop} />
+```
+
+## Accessibility
+
+- Roles: textbox (multiline), button (Send / Stop)
+- `Enter`: Sends. Ignored while an IME composition is open.
+- `Shift + Enter`: New line.
+- `Escape`: Stops the reply while streaming.
+- Focus stays in the field after sending, so the user can type the next message straight away.
+- An empty field keeps Send focusable with `aria-disabled`, rather than removing it from the tab order.
+- The field is named by `label` (default "Message") and described by the Enter/Shift+Enter hint.
+- Send and Stop are icon buttons with their own names; the swap does not move focus.
+
+Related: [message-bubble](message-bubble.md), [conversation](conversation.md), [textarea](textarea.md)

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

@@ -0,0 +1,83 @@
+# Radio Card
+
+A radio group where each option is a whole card: title, description and optional icon, one choice.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: beta
+- Import: `import { RadioCard } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/radio-card
+
+## When to use
+
+- Two to six options that each need a sentence of explanation, like plans or regions.
+- A choice important enough to deserve the space.
+
+## When not to use
+
+- Short labels with no description: use RadioGroup.
+- More than six options: use Select or Combobox.
+- Cards that hold links or buttons: the whole card is the control, so use Card with CardLink.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `RadioCardGroup columns` | `1 \| 2 \| 3 \| 4` | `1` | Grid columns. Collapses to one column on narrow screens. |
+| `RadioCardGroup value / defaultValue / onValueChange` | `string` |  | Radix RadioGroup props; the group also takes `disabled`, `name`, `required`. |
+| `value` (required) | `string` |  | The option this card selects. |
+| `title` (required) | `ReactNode` |  | The card’s accessible name. |
+| `description` | `ReactNode` |  | Secondary text, exposed as the accessible description. |
+| `icon` | `ReactNode` |  | Leading icon. Turns primary when selected. |
+| `children` | `ReactNode` |  | Extra content under the description. Keep it non-interactive: the whole card is the control. |
+| `disabled` | `boolean` | `false` | Disables this card only. |
+
+## 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>
+```
+
+## Example: Columns
+
+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>
+```
+
+## Example: Disabled
+
+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>
+```
+
+## Accessibility
+
+- Roles: radiogroup, radio (each card)
+- `Tab`: Moves focus into the group, to the selected card.
+- `Arrow keys`: Move between cards and select.
+- `Space`: Selects the focused card.
+- The title is the accessible name and the description is the accessible description.
+- Give the group an `aria-label` or `aria-labelledby`.
+
+Related: [radio-group](radio-group.md), [checkbox-card](checkbox-card.md), [card](card.md)

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

@@ -0,0 +1,57 @@
+# Radio Group
+
+Group of mutually exclusive radio inputs.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: stable
+- Import: `import { RadioGroup } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/radio-group
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `RadioGroup.Root` | `compound` |  | Root provider that manages selection state. |
+| `RadioGroup.Item` | `compound` |  | Individual radio option within the group. |
+| `value` | `string` |  | The controlled selected value. |
+| `defaultValue` | `string` |  | The initial selected value when uncontrolled. |
+| `onValueChange` | `(value: string) => void` |  | Callback fired when the selection changes. |
+| `disabled` | `boolean` |  | Disables all items in the group. |
+| `orientation` | `'horizontal' \| 'vertical'` |  | Layout orientation of the radio items. |
+
+## 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>
+```
+
+## 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>
+```

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

@@ -0,0 +1,39 @@
+# Rating
+
+Star rating input, supports controlled and read-only modes.
+
+- Package: `@nexub/react` · Category: Interactive · Status: stable
+- Import: `import { Rating } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/rating
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `number` |  | The controlled rating value. |
+| `max` | `number` | `5` | Maximum number of stars. |
+| `readOnly` | `boolean` | `false` | Prevents user interaction when true. |
+| `size` | `'sm' \| 'md' \| 'lg'` |  | Size of the star icons. |
+| `onValueChange` | `(value: number) => void` |  | Callback fired when the user selects a new rating. |
+
+## Example: Default
+
+```tsx
+<Rating defaultValue={3} />
+```
+
+## Example: Read-only
+
+```tsx
+<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>
+```

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

@@ -0,0 +1,57 @@
+# Scroll Area
+
+Scrollable container with custom styled scrollbars.
+
+- Package: `@nexub/react` · Category: Disclosure · Status: stable
+- Import: `import { ScrollArea } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/scroll-area
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `'auto' \| 'always' \| 'scroll' \| 'hover'` | `'hover'` | Controls when the scrollbar is visible. "hover" shows it on mouse-over, "scroll" while scrolling, "always" always, "auto" when content overflows. |
+| `scrollHideDelay` | `number` | `600` | Milliseconds before the scrollbar hides after the user stops interacting (only applies to types "scroll" and "hover"). |
+| `orientation` | `'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Which axis(es) to make scrollable. |
+| `className` | `string` |  | Additional CSS class names applied to the viewport wrapper. |
+| `style` | `React.CSSProperties` |  | Inline styles applied to the viewport wrapper. |
+
+## 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>
+```
+
+## 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}
+      </div>
+    ))}
+  </div>
+</ScrollArea>
+```

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

@@ -0,0 +1,22 @@
+# Search Input
+
+A text input pre-wired with a search icon and a clear button for filtering content.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: stable
+- Import: `import { SearchInput } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/search-input
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `placeholder` | `string` |  | Placeholder text shown when empty. |
+| `value` | `string` |  | Controlled value of the search field. |
+| `onClear` | `() => void` |  | Called when the user clicks the clear button. |
+| `size` | `'sm' \| 'md' \| 'lg'` |  | Controls font size and padding. |
+
+## Example: Default
+
+```tsx
+<SearchInput placeholder="Search…" />
+```

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

@@ -0,0 +1,44 @@
+# Segmented Control
+
+Tab-style control for mutually exclusive selections.
+
+- Package: `@nexub/react` · Category: Interactive · Status: stable
+- Import: `import { SegmentedControl } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/segmented-control
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the segmented control. |
+| `value` | `string` |  | The controlled selected value. |
+| `defaultValue` | `string` |  | The initial selected value when uncontrolled. |
+
+## 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>
+```
+
+## 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>
+```

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

@@ -0,0 +1,43 @@
+# Select
+
+Accessible dropdown select built on Radix UI. Supports groups and search.
+
+- Package: `@nexub/react` · Category: Form Controls · Status: stable
+- Import: `import { Select } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/select
+
+## When to use
+
+- Choosing a single option from a list of 5+ items
+- When screen space is limited and a dropdown collapses the options
+- Selecting a region, country, currency, or other enumerated value
+- Filtering or configuring a setting with predefined choices
+
+## When not to use
+
+- Fewer than 5 options — use RadioGroup to keep choices visible
+- Searching or typing to find an option — use Combobox instead
+- Multi-select — use Combobox or a checkbox list
+- Boolean on/off choices — use Switch or Checkbox
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` |  | Controlled selected value. |
+| `onValueChange` | `(value: string) => void` |  | Callback when value changes. |
+| `placeholder` | `string` |  | Placeholder when no value selected. |
+| `disabled` | `boolean` | `false` | Disables the select. |
+
+## 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>
+```

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

@@ -0,0 +1,30 @@
+# Separator
+
+A horizontal or vertical visual divider.
+
+- Package: `@nexub/react` · Category: Dividers · Status: stable
+- Import: `import { Separator } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/separator
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction of the separator line. |
+| `decorative` | `boolean` | `true` | When true, the separator is hidden from the accessibility tree. |
+
+## Example: Default
+
+```tsx
+<Separator />
+```
+
+## Example: Vertical
+
+```tsx
+<div style={{ display: 'flex', height: '32px', alignItems: 'center', gap: '16px' }}>
+  <span>Left</span>
+  <Separator orientation="vertical" />
+  <span>Right</span>
+</div>
+```

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

@@ -0,0 +1,31 @@
+# SettingsSection
+
+Grouped settings panel with title, description, and action area.
+
+- Package: `@nexub/patterns` · Category: Layout · Status: stable
+- Import: `import { SettingsSection } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/settings-section
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` (required) | `string` |  | Section heading. |
+| `description` | `string` |  | Supporting description for the section. |
+| `children` (required) | `React.ReactNode` |  | Settings controls. |
+| `action` | `React.ReactNode` |  | Primary action (e.g. save button). |
+
+## 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>
+```