Initialer Import: HA-Panel, Design-System, Companion-App

Drei zusammengehörige Teile in einem Repository: - homeassistant/ Das fertige, im Einsatz befindliche Home-Assistant-Panel (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl, Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage fahrzeugprofil.example.json ist mit dabei. - design-system/ Eigenständige React-Komponentenbibliothek (@audi-dash/ui), die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude Design. War bis hierher ein eigenes Repository und ist in dieses eingeschmolzen worden. - companion-app/ Datenschicht der neuen App DataMetric360 (iOS/Android via Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche: REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur innerhalb des HA-Frontends existiert. Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels), COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App), AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche Bauauftrag. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-11 00:20:05 +02:00
commit e1d570992e
151 changed files with 18162 additions and 0 deletions
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Accordion, LeafRow } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Open() {
+  return (
+    <Root>
+      <div style={{ width: 300 }}>
+        <Accordion title="Reifen" summary="4,2 mm" defaultOpen>
+          <LeafRow title="Vorne" value="4,2 mm" />
+          <LeafRow title="Hinten" value="3,8 mm" />
+        </Accordion>
+      </div>
+    </Root>
+  );
+}
+
+export function Closed() {
+  return (
+    <Root>
+      <div style={{ width: 300 }}>
+        <Accordion title="Versicherung" summary="248 €/Jahr">
+          <LeafRow title="Haftpflicht" value="180 €" />
+          <LeafRow title="Teilkasko" value="68 €" />
+        </Accordion>
+      </div>
+    </Root>
+  );
+}
+
+export function NestedLevel2() {
+  return (
+    <Root>
+      <div style={{ width: 300 }}>
+        <Accordion title="Service" summary="Nächster Termin" defaultOpen>
+          <Accordion title="Inspektion" level={2} defaultOpen>
+            <LeafRow title="Fällig bei" value="45.000 km" />
+          </Accordion>
+          <Accordion title="Ölwechsel" level={2}>
+            <LeafRow title="Fällig bei" value="47.500 km" />
+          </Accordion>
+        </Accordion>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ActionButton } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <ActionButton>Speichern</ActionButton>
+    </Root>
+  );
+}
+
+export function Destructive() {
+  return (
+    <Root>
+      <ActionButton variant="destructive">Fahrt löschen</ActionButton>
+    </Root>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Root>
+      <ActionButton disabled>Speichern</ActionButton>
+    </Root>
+  );
+}
+
+export function Group() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 10 }}>
+        <ActionButton>Übernehmen</ActionButton>
+        <ActionButton variant="destructive">Verwerfen</ActionButton>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Feld, Switch } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function ReadOnlyValue() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <Feld label="Kennzeichen" value="M-AB 1234" />
+        <Feld label="Erstzulassung" value="03/2022" last />
+      </div>
+    </Root>
+  );
+}
+
+export function WithUnit() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <Feld label="Anzugsmoment" unit="Nm" last>
+          <input type="number" defaultValue={120} style={{ width: 60, textAlign: "right" }} />
+        </Feld>
+      </div>
+    </Root>
+  );
+}
+
+export function WithControl() {
+  const [on, setOn] = React.useState(true);
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <Feld label="Benachrichtigungen" last>
+          <Switch checked={on} onChange={setOn} aria-label="Benachrichtigungen" />
+        </Feld>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Fig } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <Fig value={128} unit="km" />
+    </Root>
+  );
+}
+
+export function LargeHero() {
+  return (
+    <Root>
+      <Fig value={64} unit="%" size={40} />
+    </Root>
+  );
+}
+
+export function Compact() {
+  return (
+    <Root>
+      <Fig value={7.2} unit="l/100km" size={17} />
+    </Root>
+  );
+}
+
+export function NoUnit() {
+  return (
+    <Root>
+      <Fig value={2.4} size={28} />
+    </Root>
+  );
+}
@@ -0,0 +1,53 @@
+import * as React from "react";
+import { IconButton } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+const GearIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <circle cx="12" cy="12" r="3.2" />
+    <path d="M12 2.5v3M12 18.5v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2.5 12h3M18.5 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
+  </svg>
+);
+
+const BackIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
+    <path d="M15 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const CloseIcon = (
+  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
+    <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
+  </svg>
+);
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 12 }}>
+        <IconButton aria-label="Zurück">{BackIcon}</IconButton>
+        <IconButton aria-label="Einstellungen">{GearIcon}</IconButton>
+        <IconButton aria-label="Schließen">{CloseIcon}</IconButton>
+      </div>
+    </Root>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 12 }}>
+        <IconButton aria-label="Einstellungen" disabled>
+          {GearIcon}
+        </IconButton>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { ImagePlaceholder } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Empty() {
+  return (
+    <Root>
+      <ImagePlaceholder alt="Fahrzeugfoto" label="Kein Foto" hint="foto.jpg" />
+    </Root>
+  );
+}
+
+export function Mini() {
+  return (
+    <Root>
+      <ImagePlaceholder alt="Vorschau" label="Kein Foto" size="mini" />
+    </Root>
+  );
+}
+
+export function Round() {
+  return (
+    <Root>
+      <ImagePlaceholder alt="Profilbild" label="Kein Bild" size="round" />
+    </Root>
+  );
+}
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { LeafRow } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <LeafRow title="Sommerreifen" subTitle="Vorne" value="4,2 mm" onClick={() => {}} />
+      </div>
+    </Root>
+  );
+}
+
+export function List() {
+  return (
+    <Root>
+      <div style={{ width: 280, display: "flex", flexDirection: "column", gap: 2 }}>
+        <LeafRow title="Sommerreifen" subTitle="Vorne" value="4,2 mm" onClick={() => {}} />
+        <LeafRow title="Sommerreifen" subTitle="Hinten" value="3,8 mm" onClick={() => {}} />
+        <LeafRow title="Winterreifen" subTitle="Eingelagert" value="6,1 mm" subValue="seit Mai" onClick={() => {}} />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Pill } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Pill>Elektro</Pill>
+        <Pill>Automatik</Pill>
+        <Pill>5 Sitze</Pill>
+      </div>
+    </Root>
+  );
+}
+
+export function Work() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 8 }}>
+        <Pill variant="work">Neu</Pill>
+        <Pill variant="work">-15%</Pill>
+      </div>
+    </Root>
+  );
+}
+
+export function Mixed() {
+  return (
+    <Root>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+        <Pill>Diesel</Pill>
+        <Pill variant="work">SmartDeal</Pill>
+        <Pill>4x4</Pill>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Popup, PopupMenuItem } from "@audi-dash/ui";
+
+function Root({ children, height }: { children: React.ReactNode; height: number }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ position: "relative", width: "100%", height, padding: 0 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Menu() {
+  return (
+    <Root height={260}>
+      <Popup open onClose={() => {}} variant="menu" anchor="center">
+        <PopupMenuItem onClick={() => {}}>Foto ändern</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}}>Foto entfernen</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}} destructive>
+          Fahrzeug löschen
+        </PopupMenuItem>
+      </Popup>
+    </Root>
+  );
+}
+
+export function Form() {
+  return (
+    <Root height={280}>
+      <Popup open onClose={() => {}} variant="form" anchor="center">
+        <label className="ads-label">Gültig bis</label>
+        <input type="date" defaultValue="2026-12-31" />
+      </Popup>
+    </Root>
+  );
+}
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { PopupMenuItem } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <div
+        className="ads-popup ads-popup--menu"
+        style={{ position: "static", transform: "none", display: "inline-flex", flexDirection: "column" }}
+      >
+        <PopupMenuItem onClick={() => {}}>Foto ändern</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}}>Details anzeigen</PopupMenuItem>
+      </div>
+    </Root>
+  );
+}
+
+export function Destructive() {
+  return (
+    <Root>
+      <div
+        className="ads-popup ads-popup--menu"
+        style={{ position: "static", transform: "none", display: "inline-flex", flexDirection: "column" }}
+      >
+        <PopupMenuItem onClick={() => {}}>Bearbeiten</PopupMenuItem>
+        <PopupMenuItem onClick={() => {}} destructive>
+          Löschen
+        </PopupMenuItem>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ProgressBar } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function SingleFill() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <ProgressBar percent={68} />
+      </div>
+    </Root>
+  );
+}
+
+export function SegmentedWithLegend() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <ProgressBar
+          segments={[
+            { value: 4, color: "var(--ok)", label: "Kraftstoff" },
+            { value: 2, color: "var(--warn)", label: "Verschleiß" },
+            { value: 1, color: "var(--bad)", label: "Wartung" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
+
+export function SingleSegmentNoLegend() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <ProgressBar segments={[{ value: 1, color: "var(--fg)" }]} showLegend={false} />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { ProgressRing } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <ProgressRing percent={64} unit="%" label="Ladestand" />
+    </Root>
+  );
+}
+
+export function CustomValue() {
+  return (
+    <Root>
+      <ProgressRing percent={82} value="312" unit="km" label="Reichweite" />
+    </Root>
+  );
+}
+
+export function Low() {
+  return (
+    <Root>
+      <ProgressRing percent={12} unit="%" label="Kraftstoff" />
+    </Root>
+  );
+}
+
+export function Small() {
+  return (
+    <Root>
+      <ProgressRing percent={45} unit="%" size={90} />
+    </Root>
+  );
+}
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { RowList } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <RowList
+          items={[
+            { key: "km", label: "Kilometerstand", value: "42.318 km" },
+            { key: "verbrauch", label: "Ø Verbrauch", value: "6,8 l/100km" },
+            { key: "letzte", label: "Letzte Fahrt", value: "12 km", subValue: "vor 2 Stunden" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
+
+export function WithSubValues() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <RowList
+          items={[
+            { key: "vorne", label: "Solldruck vorne", value: "2,3 bar", subValue: "kalt gemessen" },
+            { key: "hinten", label: "Solldruck hinten", value: "2,1 bar", subValue: "kalt gemessen" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Seg } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function TwoOptions() {
+  const [value, setValue] = React.useState<"nacht" | "tag">("nacht");
+  return (
+    <Root>
+      <Seg
+        options={[
+          { value: "nacht", label: "Nacht" },
+          { value: "tag", label: "Tag" },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    </Root>
+  );
+}
+
+export function ThreeOptions() {
+  const [value, setValue] = React.useState("woche");
+  return (
+    <Root>
+      <Seg
+        options={[
+          { value: "tag", label: "Tag" },
+          { value: "woche", label: "Woche" },
+          { value: "monat", label: "Monat" },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    </Root>
+  );
+}
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { StatGrid } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function FourColumns() {
+  return (
+    <Root>
+      <div style={{ width: 320 }}>
+        <StatGrid
+          items={[
+            { value: 42318, caption: "Kilometer" },
+            { value: 6.8, unit: "l", caption: "Ø Verbrauch" },
+            { value: 12, caption: "Fahrten" },
+            { value: 312, unit: "km", caption: "Reichweite" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
+
+export function TwoColumns() {
+  return (
+    <Root>
+      <div style={{ width: 200 }}>
+        <StatGrid
+          columns={2}
+          items={[
+            { value: 2.3, unit: "bar", caption: "Vorne" },
+            { value: 2.1, unit: "bar", caption: "Hinten" },
+          ]}
+        />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { StatusRow } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function AllStatuses() {
+  return (
+    <Root>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8, width: 260 }}>
+        <StatusRow status="ok" title="Reifendruck" subtitle="Alle vier in Ordnung" />
+        <StatusRow status="warn" title="Ölstand" subtitle="Nächster Wechsel in 800 km" />
+        <StatusRow status="bad" title="Batterie" subtitle="Spannung niedrig" />
+      </div>
+    </Root>
+  );
+}
+
+export function Clickable() {
+  return (
+    <Root>
+      <div style={{ width: 260 }}>
+        <StatusRow status="warn" title="Service fällig" subtitle="Tippen für Details" onClick={() => {}} />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { SwipeRow, LeafRow } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Closed() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <SwipeRow onDelete={() => {}} deleteLabel="Löschen">
+          <LeafRow title="Fahrt nach Hause" subTitle="Heute, 08:12" value="12 km" />
+        </SwipeRow>
+      </div>
+    </Root>
+  );
+}
+
+export function SwipedOpen() {
+  return (
+    <Root>
+      <div style={{ width: 280 }}>
+        <SwipeRow onDelete={() => {}} deleteLabel="Löschen" swiped>
+          <LeafRow title="Fahrt zur Arbeit" subTitle="Gestern, 17:40" value="18 km" />
+        </SwipeRow>
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Switch } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
+      {children}
+    </div>
+  );
+}
+
+export function On() {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <Root>
+      <Switch checked={checked} onChange={setChecked} aria-label="Benachrichtigungen" />
+    </Root>
+  );
+}
+
+export function Off() {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <Root>
+      <Switch checked={checked} onChange={setChecked} aria-label="Benachrichtigungen" />
+    </Root>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Root>
+      <Switch checked={true} onChange={() => {}} disabled aria-label="Benachrichtigungen" />
+    </Root>
+  );
+}
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { TabBar } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+const HomeIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <path d="M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1v-9Z" strokeLinejoin="round" />
+  </svg>
+);
+const ListIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" strokeLinecap="round" />
+  </svg>
+);
+const CarIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <path d="M4 16v-3l2-5h12l2 5v3M4 16h16M4 16v2M20 16v2M7 19v-2M17 19v-2" strokeLinejoin="round" />
+  </svg>
+);
+const GearIcon = (
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
+    <circle cx="12" cy="12" r="3.2" />
+    <path d="M12 2.5v3M12 18.5v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2.5 12h3M18.5 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
+  </svg>
+);
+
+const items = [
+  { key: "home", label: "Übersicht", icon: HomeIcon },
+  { key: "trips", label: "Fahrten", icon: ListIcon },
+  { key: "car", label: "Fahrzeug", icon: CarIcon },
+  { key: "settings", label: "Einstellungen", icon: GearIcon },
+];
+
+export function Default() {
+  const [active, setActive] = React.useState("home");
+  return (
+    <Root>
+      <div style={{ width: 340 }}>
+        <TabBar items={items} activeKey={active} onChange={setActive} />
+      </div>
+    </Root>
+  );
+}
+
+export function IconOnly() {
+  const [active, setActive] = React.useState("trips");
+  return (
+    <Root>
+      <div style={{ width: 220 }}>
+        <TabBar items={items} activeKey={active} onChange={setActive} iconOnly />
+      </div>
+    </Root>
+  );
+}
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Tile, Fig } from "@audi-dash/ui";
+
+function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="ads-root" data-theme="nacht" style={{ padding: 16 }}>
+      {children}
+    </div>
+  );
+}
+
+export function Default() {
+  return (
+    <Root>
+      <div style={{ width: 240 }}>
+        <Tile>
+          <div className="ads-label">Reichweite</div>
+          <Fig value={312} unit="km" size={28} />
+        </Tile>
+      </div>
+    </Root>
+  );
+}
+
+export function Flat() {
+  return (
+    <Root>
+      <div style={{ width: 240 }}>
+        <Tile variant="flat">Zusatzinformation ohne Rahmenschatten</Tile>
+      </div>
+    </Root>
+  );
+}
+
+export function ButtonWithChevron() {
+  return (
+    <Root>
+      <div style={{ width: 240 }}>
+        <Tile variant="button" chevron onClick={() => {}}>
+          Alle Fahrten anzeigen
+        </Tile>
+      </div>
+    </Root>
+  );
+}