# Typography Components

> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.

Import each from its kebab-case subpath, e.g. `import { Badge } from "@nurix/components/element/badge"`.

## Text

Inline editable text using native `contentEditable` — plain text that grows a focus border and becomes editable on click, no controlled-input plumbing required.

**Props:** `value`, `defaultValue`, `placeholder`, `disabled`, `readOnly`, `onSave`, `validator`, `onValidationError`, `hideHoverEffect`

Enter or blur commits via `onSave` (skipped if unchanged); Escape reverts to the pre-edit value. A `validator` regex blocks the commit and reports via `onValidationError` instead.

```tsx
<Text
  defaultValue={title}
  placeholder="Untitled"
  onSave={saveTitle}
  validator={/^.{1,80}$/}
/>
```

## SecureText

Masked display for sensitive values (passwords, API keys, card numbers) with an optional reveal toggle.

**Props:** `value`, `revealable` (default true), `defaultRevealed`, `revealed`/`onRevealedChange` (controlled), `variant` [default|mono], `size` [sm|default|lg], `maskOptions` (`{ maskChar, unmaskedStart, unmaskedEnd, preserveSpacing, grouping, showLength }`)

```tsx
<SecureText
  value={apiKey}
  variant="mono"
  maskOptions={{ unmaskedStart: 4, unmaskedEnd: 4, grouping: 4 }}
/>
```

## Other Components

- `badge` — `Badge`: `variant` [default|secondary|destructive|outline|ghost|link], `asChild`
- `chip` — `Chip`: removable tag; `variant` [default|secondary|outline|muted], `size` [sm|default|lg], `onRemove`, `disabled`
- `code` — `Code`: inline `<code>` or a `block` (renders `<pre>`); `variant` [default|ghost|muted], `size` [sm|default|lg], `block`
- `kbd` — `Kbd`: keycap; `variant` [default|outline], `size` [sm|default|lg]
- `label` — `Label`: Radix `Label.Root`, tracks a peer/group's `disabled` state automatically
- `link` — `Link`: `variant` [default|muted|plain|underline], `size` [sm|default|lg], `asChild`, `external` (forces `target="_blank"` + a trailing icon; also auto-detects `target="_blank"`)
- `markdown` — `Markdown`: GFM `react-markdown` + `remark-gfm` render with a full element map (headings, lists, element/code, blockquote, tables) styled on the library's own tokens — no `@tailwindcss/typography` plugin needed; safe to re-render incrementally while streaming. **Props:** `children` (markdown string), `className`