@nexub/mcp 0.0.0-stage → 1.7.0

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

@@ -0,0 +1,71 @@
+# Error Summary
+
+Lists a form’s errors after a failed submit, with a link to each field. useFormErrors wires the fields to their messages.
+
+- Package: `@nexub/patterns` · Category: Forms · Status: beta
+- Import: `import { ErrorSummary } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/error-summary
+
+## When to use
+
+- Forms validated on submit, especially long ones where some errors are off screen.
+- Alongside inline messages, never instead of them.
+
+## When not to use
+
+- Live validation while typing: pass a new array per submit, not per keystroke, or the summary steals focus.
+- A single field: the inline message is enough.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `errors` (required) | `{ id: string; message: string }[]` |  | One entry per invalid field; `id` is the field’s DOM id. Renders nothing when empty. |
+| `title` | `ReactNode` | `'There is a problem'` | Heading; it also labels the summary. |
+| `onFocusField` | `(id: string) => void` |  | Called after a link moves focus to its field. |
+| `useFormErrors(map)` (required) | `Record<string, string \| null \| undefined \| false>` |  | Takes `{ fieldId: message }`. Falsy messages are skipped. |
+| `→ errors` | `ErrorSummaryItem[]` |  | The list for `ErrorSummary`. Stable for the same map object. |
+| `→ fieldProps(id)` | `function` |  | Spread on the input: `id`, plus `aria-invalid` and `aria-describedby="${id}-error"` when it has an error. |
+| `→ errorProps(id)` | `function` |  | Spread on the inline message: `id="${id}-error"`, the same id FormField.Error uses. |
+
+## Example: Validate on submit
+
+Submit empty to see the summary. A new map per submit moves focus to the summary; links jump to each field.
+
+```tsx
+function SignUp() {
+  const [submitted, setSubmitted] = React.useState<FormErrorMap>({});
+  const { errors, fieldProps, errorProps } = useFormErrors(submitted);
+
+  function 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',
+    });
+  }
+
+  return (
+    <form noValidate onSubmit={submit}>
+      <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>}
+      <Button type="submit">Create account</Button>
+    </form>
+  );
+}
+```
+
+## Accessibility
+
+- Roles: alert
+- Takes focus whenever it receives a new, non-empty `errors` array, so screen readers read it and keyboard users start from it.
+- Each link scrolls its field into view and focuses it.
+- An `alert` labelled by its heading. Fields get `aria-invalid` and `aria-describedby` pointing at their inline message.
+
+Related: [form-field](form-field.md), [input](input.md), [alert](alert.md)

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

@@ -0,0 +1,28 @@
+# Eyebrow Chip
+
+A compact eyebrow label, typically used above headings.
+
+- Package: `@nexub/react` · Category: Labels & Badges · Status: stable
+- Import: `import { EyebrowChip } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/eyebrow-chip
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `'sm' \| 'md'` |  | Controls chip size. |
+
+## Example: Default
+
+```tsx
+<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>
+```

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

@@ -0,0 +1,36 @@
+# FilterBar
+
+Search + filter toolbar pattern for data-heavy list or table views.
+
+- Package: `@nexub/patterns` · Category: Data · Status: stable
+- Import: `import { FilterBar } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/filter-bar
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `searchPlaceholder` | `string` | `'Search…'` | Placeholder text for the search input. |
+| `searchValue` | `string` |  | Controlled search value. |
+| `onSearch` | `(value: string) => void` |  | Callback when search value changes. |
+| `filters` | `React.ReactNode` |  | Filter controls rendered to the right of search. |
+| `actions` | `React.ReactNode` |  | Action buttons (e.g. "Export") rendered on the far right. |
+
+## 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>}
+/>
+```

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

@@ -0,0 +1,26 @@
+# Filter Chip
+
+Interactive chip for filtering, supports selected/unselected state.
+
+- Package: `@nexub/react` · Category: Labels & Badges · Status: stable
+- Import: `import { FilterChip } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/filter-chip
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `selected` | `boolean` |  | Controlled selected state of the chip. |
+| `onSelectedChange` | `(selected: boolean) => void` |  | Called when the selected state changes. |
+| `disabled` | `boolean` |  | Disables the chip. |
+| `size` | `'sm' \| 'md'` |  | Controls chip size. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', gap: '8px' }}>
+  <FilterChip>All</FilterChip>
+  <FilterChip defaultSelected>Active</FilterChip>
+  <FilterChip>Archived</FilterChip>
+</div>
+```

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

@@ -0,0 +1,47 @@
+# Flex
+
+Flexbox layout primitive.
+
+- Package: `@nexub/react` · Category: Layout · Status: stable
+- Import: `import { Flex } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/flex
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` |  | Sets the flex-direction CSS property. |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch'` |  | Sets the align-items CSS property. |
+| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around'` |  | Sets the justify-content CSS property. |
+| `gap` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` |  | Spacing between children using design tokens. |
+| `wrap` | `boolean` |  | Allows children to wrap onto multiple lines. |
+
+## Example: Default
+
+```tsx
+<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>
+```
+
+## 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>
+```

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

@@ -0,0 +1,26 @@
+# Form Field
+
+Wraps Label, Input, HelperText and FormError into a single accessible group.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: stable
+- Import: `import { FormField } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/form-field
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `name` (required) | `string` |  | Name attribute forwarded to the underlying input. |
+| `id` | `string` |  | Explicit id for the input; defaults to the name value. |
+| `error` | `string` |  | Validation error message shown below the input. |
+| `required` | `boolean` |  | Marks the field as required and renders a required indicator on the label. |
+
+## 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>
+```

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

@@ -0,0 +1,13 @@
+# Gradient Divider
+
+A decorative gradient-faded horizontal rule.
+
+- Package: `@nexub/react` · Category: Dividers · Status: stable
+- Import: `import { GradientDivider } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/gradient-divider
+
+## Example: Default
+
+```tsx
+<GradientDivider />
+```

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

@@ -0,0 +1,39 @@
+# Grid
+
+CSS Grid layout primitive.
+
+- Package: `@nexub/react` · Category: Layout · Status: stable
+- Import: `import { Grid } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/grid
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `cols` | `number \| string` |  | Number of columns or a custom grid-template-columns value. |
+| `gap` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` |  | Gap between grid cells using design tokens. |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch'` |  | Sets the align-items CSS property for all grid cells. |
+
+## 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>
+```
+
+## 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>
+```

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

@@ -0,0 +1,46 @@
+# Heading
+
+Semantic heading component with size, weight, and tone control.
+
+- Package: `@nexub/react` · Category: Typography · Status: stable
+- Import: `import { Heading } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/heading
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | The semantic HTML heading level rendered. |
+| `size` | `'display' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` |  | Visual size of the heading, independent of the semantic level. |
+| `tone` | `'default' \| 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger'` |  | Color tone applied to the heading text. |
+| `weight` | `'regular' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold'` |  | Font weight of the heading. |
+| `asChild` | `boolean` |  | Merges props onto the immediate child element (Radix Slot). |
+
+## Example: Default
+
+```tsx
+<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>
+```
+
+## 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>
+```

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

@@ -0,0 +1,31 @@
+# Helper Text
+
+Small supporting text placed beneath a form field to provide hints or validation feedback.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: stable
+- Import: `import { HelperText } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/helper-text
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tone` | `'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Semantic colour tone of the helper text. |
+| `disabled` | `boolean` |  | Applies muted disabled styling. |
+
+## Example: Default
+
+```tsx
+<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>
+```

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

@@ -0,0 +1,34 @@
+# Hover Card
+
+Rich tooltip card revealed on hover.
+
+- Package: `@nexub/react` · Category: Overlays · Status: stable
+- Import: `import { HoverCard } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/hover-card
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `HoverCard.Root` | `compound` |  | Root provider that manages open/close state. |
+| `HoverCard.Trigger` | `compound` |  | Element that triggers the card on hover. |
+| `HoverCard.Content` | `compound` |  | The floating card panel shown on hover. |
+| `openDelay` | `number` |  | Delay in milliseconds before the card opens. |
+| `closeDelay` | `number` |  | Delay in milliseconds before the card closes. |
+
+## 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>
+```

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

@@ -0,0 +1,44 @@
+# Icon Button
+
+A square button designed to hold a single icon, with an accessible label.
+
+- Package: `@nexub/react` · Category: Actions · Status: stable
+- Import: `import { IconButton } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/icon-button
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `'ghost' \| 'solid' \| 'outline' \| 'subtle'` | `'ghost'` | Visual style of the icon button. |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Controls button dimensions. |
+| `disabled` | `boolean` |  | Disables the button. |
+| `loading` | `boolean` |  | Shows a spinner and disables interaction. |
+| `asChild` | `boolean` |  | Merges props onto the immediate child element (Radix Slot). |
+
+## Example: Default
+
+```tsx
+<IconButton variant="ghost" aria-label="Settings">
+  <div style={{ width: 16, height: 16, background: 'currentColor', borderRadius: 2 }} />
+</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>
+```

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

@@ -0,0 +1,25 @@
+# InfoList
+
+Key–value list for displaying structured metadata or details.
+
+- Package: `@nexub/patterns` · Category: Data · Status: stable
+- Import: `import { InfoList } from '@nexub/patterns';`
+- Docs: https://nexub-ds-docs.pages.dev/patterns/info-list
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` (required) | `string` |  | The key label. |
+| `value` (required) | `React.ReactNode` |  | The displayed value. |
+
+## 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>
+```

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

@@ -0,0 +1,78 @@
+# Input
+
+Text input field for forms. Supports size variants, icons, addons, and validation states.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: stable
+- Import: `import { Input } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/input
+
+## When to use
+
+- Capturing short free-form text (name, email, search term)
+- Single-line data entry within a form
+- Filtering or searching a list of items
+- Inline editing of a single value
+
+## When not to use
+
+- Multi-line text — use Textarea instead
+- Choosing from a fixed list of options — use Select or Combobox
+- Numeric stepping — use NumberInput for increment/decrement control
+- Passwords — use PasswordInput which toggles visibility
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Control height and font size. |
+| `invalid` | `boolean` | `false` | Applies error ring styling. |
+| `disabled` | `boolean` | `false` | Disables the input. |
+| `placeholder` | `string` |  | Placeholder text. |
+| `type` | `string` | `'text'` | HTML input type attribute. |
+| `leadingIcon` | `React.ReactNode` |  | Icon rendered at the start of the input. |
+| `trailingIcon` | `React.ReactNode` |  | Icon rendered at the end of the input. |
+| `leadingAddon` | `string` |  | Text addon rendered before the input (e.g. "https://"). |
+| `trailingAddon` | `string` |  | Text addon rendered after the input (e.g. ".com"). |
+
+## Example: Default
+
+```tsx
+<Input placeholder="Enter value…" />
+```
+
+## Example: Sizes
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '320px' }}>
+  <Input size="sm" placeholder="Small" />
+  <Input size="md" placeholder="Medium" />
+  <Input size="lg" placeholder="Large" />
+</div>
+```
+
+## Example: Invalid state
+
+```tsx
+<Input invalid placeholder="Invalid value" />
+```
+
+## Example: With label and helper
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', maxWidth: '320px' }}>
+  <Label htmlFor="email">Email address</Label>
+  <Input id="email" type="email" placeholder="you@example.com" />
+  <HelperText>We'll never share your email.</HelperText>
+</div>
+```
+
+## Accessibility
+
+- Roles: textbox
+- `Tab`: Moves focus to the input.
+- `Esc`: Browsers may revert recent changes (autofill suggestions).
+- Visible focus ring on `:focus-visible`. Pair with a `<Label htmlFor>` so clicking the label moves focus into the field.
+- `invalid` toggles `aria-invalid="true"` so AT users hear the error state.
+- Use `aria-describedby` to associate `HelperText` or error messages.
+
+Related: [textarea](textarea.md), [number-input](number-input.md), [password-input](password-input.md), [search-input](search-input.md)

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

@@ -0,0 +1,42 @@
+# Kbd
+
+Keyboard key display — renders a styled <kbd> element.
+
+- Package: `@nexub/react` · Category: Inline Primitives · Status: stable
+- Import: `import { Kbd } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/kbd
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `...props` | `React.HTMLAttributes<HTMLElement>` |  | All standard kbd HTML attributes are forwarded. |
+
+## Example: Default
+
+```tsx
+<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</div>
+```
+
+## Example: Combinations
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+    <Kbd>⌘</Kbd>
+    <Kbd>K</Kbd>
+  </div>
+  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+    <Kbd>Ctrl</Kbd>
+    <Kbd>C</Kbd>
+  </div>
+  <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+    <Kbd>⇧</Kbd>
+    <Kbd>⌘</Kbd>
+    <Kbd>P</Kbd>
+  </div>
+</div>
+```

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

@@ -0,0 +1,37 @@
+# Label
+
+An accessible form label that optionally shows a required asterisk and links to an input via htmlFor.
+
+- Package: `@nexub/react` · Category: Form & Input · Status: stable
+- Import: `import { Label } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/label
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `htmlFor` | `string` |  | Associates the label with a form control by its id. |
+| `required` | `boolean` |  | Renders a required indicator (asterisk) after the label text. |
+| `disabled` | `boolean` |  | Applies disabled styling to the label. |
+| `size` | `'sm' \| 'md'` | `'md'` | Controls label font size. |
+
+## Example: Default
+
+```tsx
+<Label htmlFor="name">Full name</Label>
+```
+
+## Example: Required
+
+```tsx
+<Label required>Email address</Label>
+```
+
+## Example: With input
+
+```tsx
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" placeholder="you@example.com" />
+</div>
+```