# Typo

## Overview

Typography component with predefined variants for headings, body text, captions, and utility text. Renders a semantic HTML tag per variant (overridable via `as`).

---

## Props

| Prop        | Type                                | Default     | Description                     |
| ----------- | ----------------------------------- | ----------- | ------------------------------- |
| `variant`   | `TypoVariant`                       | `"body"`    | Typographic style to apply.     |
| `as`        | `React.ElementType`                 | auto        | Override rendered HTML element. |
| `className` | `string`                            | `undefined` | Extra classes.                  |
| `...props`  | `React.HTMLAttributes<HTMLElement>` | —           | Spread to rendered element.     |

`TypoVariant`:

- `"hero-title"`, `"title"`, `"subtitle"`
- `"body"`, `"body-bold"`
- `"caption"`, `"overline"`, `"button"`, `"small"`
- `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`

---

## Behavior

- **Semantic tag**: Each variant maps to a sensible HTML tag (e.g., `h1` for `h1`, `p` for `body`).
- **Theming**: Variants use DS tokens for color and size; add `className` to tweak.

---

## Examples

```tsx
import { Typo } from "laif-ds";

export function Variants() {
  return (
    <div className="space-y-2">
      <Typo variant="hero-title">Hero Title</Typo>
      <Typo variant="title">Page Title</Typo>
      <Typo variant="subtitle">Subtitle</Typo>
      <Typo variant="body">Regular body text</Typo>
      <Typo variant="body-bold">Bold body text</Typo>
      <Typo variant="caption">Caption</Typo>
      <Typo variant="overline">Overline</Typo>
      <Typo variant="small">Small text</Typo>
    </div>
  );
}

export function OverrideElement() {
  return (
    <Typo variant="body" as="span">
      Inline body as span
    </Typo>
  );
}
```

---

## Notes

- **Accessibility**: Use heading variants (`h1`–`h5`) to reflect document structure.
- **Consistency**: Prefer `variant` over ad‑hoc classes for consistent typography.