# @audi-dash/ui

Generisches React-Komponenten-Set, das die visuelle Sprache des Audi-Dashboards (Kacheln,
Formularzeilen, Toggle, Segmented Control, Popups, Statusanzeigen, Fortschrittsanzeigen …)
nachbildet. Enthält **keine** Audi-Marken-Assets (Font "Audi Type", Ringe, Typenschild) - diese
sind laut Lizenzvereinbarung ausschließlich für die private Home-Assistant-Installation
freigegeben. Diese Bibliothek nutzt einen neutralen Fallback-Font-Stack (`Helvetica, Arial,
sans-serif`).

## Verwendung

Konsumierende Apps legen die `.ads-root`-Klasse um den Baum, der die Bibliothek nutzt, und setzen
`data-theme="nacht"` (Standard) oder `data-theme="tag"`:

```tsx
import { Tile, Feld, Switch } from "@audi-dash/ui";
import "@audi-dash/ui/styles.css";

function App() {
  return (
    <div className="ads-root" data-theme="nacht">
      <Tile>
        <Feld label="Beispiel">
          <Switch checked={true} onChange={() => {}} />
        </Feld>
      </Tile>
    </div>
  );
}
```

## Design-Tokens

Alle Farben/Radien/Abstände liegen als CSS-Custom-Properties in `src/tokens/tokens.css` vor -
Komponenten referenzieren ausschließlich `var(--token)`, nie Literal-Hex-Werte. Siehe die Datei
für die vollständige Liste (`--red`, `--canvas`, `--tile`, `--fg`/`--fg2`/`--fg3`, `--ok`/`--warn`/
`--bad`, `--r-tile`/`--r-pill`/`--r-func`, `--sp-1`…`--sp-5`).

## Typografie-Utility-Klassen

Reine Textstil-Hooks ohne eigene Komponentenstruktur (in `tokens.css` definiert) - direkt als
`className` anwenden:

| Klasse | Verwendung |
|---|---|
| `.ads-eyebrow` | Kleine Überschrift über einem Seitentitel (10px, uppercase, `--fg3`) |
| `.ads-title` | Seitentitel (23px, einzeilig, ellipsis) |
| `.ads-label` | Feld-/Kachel-Label (10px, uppercase, `--fg3`) |
| `.ads-sport` | Kursiver Akzenttext |

Die einzige Ausnahme mit echter interner Struktur ist die `Fig`-Komponente (großer Zahlenwert +
Einheit) - sie wird intern auch von `ProgressRing` und `StatGrid` genutzt.

## Komponenten

Pill, IconButton, Fig, StatusRow, ActionButton, Switch, Seg, RowList, LeafRow, Tile, Feld,
ProgressRing, ProgressBar, StatGrid, Accordion, SwipeRow, TabBar, Popup (+PopupMenuItem),
ImagePlaceholder. Props-Referenz: `.d.ts`-Dateien im Build bzw. die jeweilige `<Name>.tsx`.

## Build

```bash
npm install
npm run typecheck
npm run build
```