@overdoser/react-toolkit 0.0.6 → 0.0.8

package/manifest.json

@@ -20,6 +20,7 @@
         "loading": { "type": "boolean", "default": false, "notes": "Disables the button and sets aria-busy." },
         "loadingStyle": { "type": "enum", "values": ["dots", "shimmer", "border"], "default": "dots", "notes": "Only used when loading=true." },
         "fullWidth": { "type": "boolean", "default": false },
+        "iconOnly": { "type": "boolean", "default": false, "notes": "Squares the button and renders content larger/bolder. For single-glyph buttons (‹, ›, ×, +). Always pair with aria-label." },
         "classes": { "type": "Partial<ButtonClasses>", "shape": ["root", "content", "shimmer", "dots", "dot"] }
       }
     },
@@ -142,7 +143,8 @@
       "import": "import { Popover } from '@overdoser/react-toolkit'",
       "element": "div",
       "props": {
-        "trigger": { "type": "ReactNode", "required": true },
+        "trigger": { "type": "ReactNode", "required": true, "notes": "Default mode wraps the value in an internal <button>. Set asChild=true to pass your own interactive element instead." },
+        "asChild": { "type": "boolean", "default": false, "notes": "When true and trigger is a single React element, the element is rendered as-is with onClick/aria-*/ref cloned onto it (no wrapping <button>). Use to avoid the button-in-button hydration warning when passing <Button> as the trigger." },
         "content": { "type": "ReactNode", "required": true },
         "position": { "type": "enum", "values": ["top", "bottom", "left", "right"], "default": "bottom" },
         "open": { "type": "boolean", "notes": "Controlled mode." },
@@ -301,6 +303,301 @@
         "resize": { "type": "enum", "values": ["none", "vertical", "horizontal", "both"], "default": "vertical", "notes": "Ignored when autoExpand=true." },
         "autoExpand": { "type": "boolean", "default": true, "notes": "When true, auto-grows height to fit content." }
       }
+    },
+    "LineChart": {
+      "import": "import { LineChart, type ChartConfig } from '@overdoser/react-toolkit'",
+      "element": "div containing responsive SVG",
+      "generic": "T extends Record<string, unknown>",
+      "themeTokens": ["--crk-chart-1", "--crk-chart-2", "--crk-chart-3", "--crk-chart-4", "--crk-chart-5", "--crk-chart-grid", "--crk-chart-axis", "--crk-chart-label-inside", "--crk-chart-tooltip-bg", "--crk-chart-tooltip-text"],
+      "shadcnVariantMapping": {
+        "default": "no extra props",
+        "multiple": "no extra props (multiple keys in config)",
+        "linear": "curve='linear'",
+        "step": "curve='step'",
+        "dots": "showPoints (on by default)",
+        "dots-custom": "renderDot",
+        "dots-colors": "dotColorKey (each row holds its own dot color)",
+        "label": "showValues + valuePosition",
+        "label-custom": "renderLabel",
+        "interactive": "Series-toggle pattern: keep multiple series in `data` but pass only the active series in `config` (`{ [active]: fullConfig[active] }`). Consumer-side selector — tiles, prev/next navigator, or <Dropdown> (see recipes/interactive-line-chart.tsx)."
+      },
+      "props": {
+        "data": { "type": "T[]", "required": true },
+        "xKey": { "type": "keyof T & string", "required": true },
+        "config": { "type": "ChartConfig", "required": true, "notes": "Record<string, { label, color }> keyed by data-field names." },
+        "aspectRatio": { "type": "number", "default": "16/9" },
+        "height": { "type": "number", "notes": "Fixed pixel height. Overrides aspectRatio." },
+        "curve": { "type": "enum", "values": ["linear", "monotone", "step"], "default": "monotone", "notes": "'step' is step-after — value holds until the next x." },
+        "showPoints": { "type": "boolean", "default": true },
+        "dotColorKey": { "type": "keyof T & string", "notes": "Each dot's fill = row[dotColorKey]. Line keeps the series color. Tooltip swatch follows the dot color." },
+        "renderDot": { "type": "(args: { row, value, seriesKey, index, x, y, color, active }) => ReactNode", "notes": "Replaces the default circle with custom SVG per point." },
+        "showValues": { "type": "boolean", "default": false },
+        "valuePosition": { "type": "enum", "values": ["top", "bottom"], "default": "top" },
+        "renderLabel": { "type": "(args: { row, value, seriesKey, index }) => ReactNode", "notes": "Custom label content. Overrides valueFormat for labels. Return null to skip." },
+        "activeIndex": { "type": "number", "notes": "Highlight a specific point index; other points fade." },
+        "onPointClick": { "type": "(args: { row, value, seriesKey, index }) => void" },
+        "showGrid": { "type": "boolean", "default": true },
+        "showLegend": { "type": "boolean", "default": true },
+        "showTooltip": { "type": "boolean", "default": true },
+        "yTickCount": { "type": "number", "default": 5 },
+        "yFormat": { "type": "(v: number) => string" },
+        "xFormat": { "type": "(v: string) => string" },
+        "valueFormat": { "type": "(v: number) => string" },
+        "renderTooltip": { "type": "(row: T) => ReactNode" },
+        "margin": { "type": "Partial<ChartMargin>", "default": "{ top: 12, right: 16, bottom: 28, left: 48 }" },
+        "emptyMessage": { "type": "ReactNode", "default": "No data" },
+        "classes": { "type": "Partial<ChartClasses>", "shape": ["root", "svg", "grid", "axis", "axisLabel", "series", "point", "legend", "legendItem", "tooltip"] }
+      }
+    },
+    "AreaChart": {
+      "import": "import { AreaChart, type ChartConfig } from '@overdoser/react-toolkit'",
+      "element": "div containing responsive SVG",
+      "generic": "T extends Record<string, unknown>",
+      "shadcnVariantMapping": {
+        "default": "no extra props",
+        "linear": "curve='linear'",
+        "step": "curve='step'",
+        "legend": "showLegend (on by default)",
+        "axes": "no extra props (both axes shown by default)",
+        "stacked": "stacked",
+        "stacked-expand": "stacked + stackOffset='expand' (normalizes each row to 100%)",
+        "gradient": "fillGradient",
+        "icons": "set `icon` on each entry in `config` (rendered in legend in place of the swatch)",
+        "interactive": "Data-range filter: all series stay rendered (typically stacked + fillGradient); the selector swaps the slice of `data` shown (e.g. last 7d/14d/30d). Not a series toggle. Consumer-side selector — tiles, prev/next navigator, or <Dropdown>. See recipes/interactive-area-chart.tsx."
+      },
+      "props": {
+        "data": { "type": "T[]", "required": true },
+        "xKey": { "type": "keyof T & string", "required": true },
+        "config": { "type": "ChartConfig", "required": true, "notes": "Each SeriesConfig may also include `icon?: ReactNode` to override the legend swatch." },
+        "aspectRatio": { "type": "number", "default": "16/9" },
+        "height": { "type": "number" },
+        "curve": { "type": "enum", "values": ["linear", "monotone", "step"], "default": "monotone" },
+        "stacked": { "type": "boolean", "default": false, "notes": "Stacks series bottom-up in config-key order." },
+        "stackOffset": { "type": "enum", "values": ["none", "expand"], "default": "none", "notes": "`'expand'` normalizes each row to 100%. Requires stacked=true." },
+        "fillGradient": { "type": "boolean", "default": false, "notes": "Per-series vertical linear gradient (opaque top → transparent bottom)." },
+        "showGrid": { "type": "boolean", "default": true },
+        "showXAxis": { "type": "boolean", "default": true },
+        "showYAxis": { "type": "boolean", "default": true },
+        "showLegend": { "type": "boolean", "default": true },
+        "showTooltip": { "type": "boolean", "default": true },
+        "yTickCount": { "type": "number", "default": 5 },
+        "yFormat": { "type": "(v: number) => string" },
+        "xFormat": { "type": "(v: string) => string" },
+        "valueFormat": { "type": "(v: number) => string" },
+        "renderTooltip": { "type": "(row: T) => ReactNode" },
+        "margin": { "type": "Partial<ChartMargin>" },
+        "emptyMessage": { "type": "ReactNode", "default": "No data" },
+        "classes": { "type": "Partial<ChartClasses>" }
+      }
+    },
+    "BarChart": {
+      "import": "import { BarChart, type ChartConfig } from '@overdoser/react-toolkit'",
+      "element": "div containing responsive SVG",
+      "generic": "T extends Record<string, unknown>",
+      "behavior": "Multi-series renders as grouped bars by default. The full set of shadcn bar-chart variants (default, horizontal, multiple, stacked, label, label-custom, mixed, negative, active, interactive) is reachable via the composable props below.",
+      "shadcnVariantMapping": {
+        "default": "no extra props",
+        "multiple": "no extra props (just multiple keys in config)",
+        "horizontal": "orientation='horizontal'",
+        "stacked": "stacked",
+        "label": "showValues + valuePosition",
+        "label-custom": "renderLabel + valuePosition='inside-start' (typically with orientation='horizontal')",
+        "mixed": "colorBy='index' (+ optional colors)",
+        "negative": "numeric values spanning zero; pair with negativeColor",
+        "active": "activeIndex={n}",
+        "interactive": "Series-toggle pattern: keep multiple series in `data` but pass only the active series in `config` (`{ [active]: fullConfig[active] }`). Consumer-side selector — tiles, prev/next navigator, or <Dropdown> (see recipes/interactive-bar-chart.tsx)."
+      },
+      "props": {
+        "data": { "type": "T[]", "required": true },
+        "xKey": { "type": "keyof T & string", "required": true },
+        "config": { "type": "ChartConfig", "required": true },
+        "orientation": { "type": "enum", "values": ["vertical", "horizontal"], "default": "vertical" },
+        "stacked": { "type": "boolean", "default": false, "notes": "Stack series within each category. Ignored with a single series." },
+        "aspectRatio": { "type": "number", "default": "16/9" },
+        "height": { "type": "number" },
+        "groupPadding": { "type": "number", "default": 0.2, "notes": "Inner padding between category groups, fraction of band width." },
+        "barPadding": { "type": "number", "default": 0.1, "notes": "Inner padding between bars within a grouped group, fraction of bar width. Ignored when stacked." },
+        "barRadius": { "type": "number", "default": 4 },
+        "showGrid": { "type": "boolean", "default": true },
+        "showLegend": { "type": "boolean", "default": true },
+        "showTooltip": { "type": "boolean", "default": true },
+        "showValues": { "type": "boolean", "default": false, "notes": "Render a numeric label on every bar." },
+        "valuePosition": { "type": "enum", "values": ["outside", "inside", "inside-start"], "default": "outside", "notes": "'inside-start' anchors at the baseline edge of the bar; on vertical bars the text rotates ±90° to read along the bar's length." },
+        "renderLabel": { "type": "(args: { row, value, seriesKey, index }) => ReactNode", "notes": "Custom label content. Return null to skip. Overrides valueFormat for labels." },
+        "colorBy": { "type": "enum", "values": ["series", "index"], "default": "series", "notes": "'index' picks color per row from `colors` (config colors are ignored)." },
+        "colors": { "type": "string[]", "default": "the five --crk-chart-N tokens", "notes": "Palette used when colorBy='index'." },
+        "negativeColor": { "type": "string", "notes": "Override fill applied to bars whose value is negative." },
+        "activeIndex": { "type": "number", "notes": "Highlight one category index; other groups fade." },
+        "onBarClick": { "type": "(args: { row, value, seriesKey, index }) => void" },
+        "yTickCount": { "type": "number", "default": 5 },
+        "yFormat": { "type": "(v: number) => string" },
+        "xFormat": { "type": "(v: string) => string" },
+        "valueFormat": { "type": "(v: number) => string" },
+        "renderTooltip": { "type": "(row: T) => ReactNode" },
+        "margin": { "type": "Partial<ChartMargin>" },
+        "emptyMessage": { "type": "ReactNode", "default": "No data" },
+        "classes": { "type": "Partial<ChartClasses>" }
+      }
+    },
+    "PieChart": {
+      "import": "import { PieChart } from '@overdoser/react-toolkit'",
+      "element": "div containing responsive SVG",
+      "generic": "T extends Record<string, unknown>",
+      "shadcnVariantMapping": {
+        "simple": "no extra props",
+        "donut": "innerRadius (number or 'NN%')",
+        "legend": "showLegend (on by default)",
+        "separator-none": "strokeWidth={0}",
+        "label": "showLabels (default content: name + percent). Outside labels get a leader line from slice → label by default; disable with showLabelLines=false.",
+        "label-custom": "renderLabel (leader line still drawn unless showLabelLines=false)",
+        "label-list": "valuePosition='inside' + renderLabel returning the row name. Each slice carries its category name on its colored surface (background-colored text for contrast).",
+        "donut-text": "innerRadius + centerLabel",
+        "donut-active": "activeIndex={n}",
+        "interactive": "Metric/period filter while showing all slices. See recipes/interactive-pie-chart.tsx.",
+        "stacked": "Not currently supported (nested rings)."
+      },
+      "props": {
+        "data": { "type": "T[]", "required": true },
+        "valueKey": { "type": "keyof T & string", "required": true },
+        "nameKey": { "type": "keyof T & string", "required": true },
+        "colorKey": { "type": "keyof T & string", "notes": "Per-row fill from data; falls back to `colors` palette." },
+        "colors": { "type": "string[]", "default": "the five --crk-chart-N tokens" },
+        "aspectRatio": { "type": "number", "default": 1 },
+        "height": { "type": "number" },
+        "innerRadius": { "type": "number | string", "default": 0, "notes": "0 = pie, >0 = donut. Number = pixels, string = 'NN%' of half the minimum chart side." },
+        "outerRadius": { "type": "number | string", "default": "'90%'" },
+        "strokeWidth": { "type": "number", "default": 2, "notes": "Slice separator stroke width. 0 = 'separator-none'." },
+        "strokeColor": { "type": "string", "default": "var(--crk-color-bg)" },
+        "padAngle": { "type": "number", "default": 0, "notes": "Degrees of visual gap between slices." },
+        "showLabels": { "type": "boolean", "default": false },
+        "valuePosition": { "type": "enum", "values": ["outside", "inside"], "default": "outside" },
+        "showLabelLines": { "type": "boolean", "default": true, "notes": "Thin slice-colored leader line from the slice edge to each outside label. No effect for inside labels." },
+        "renderLabel": { "type": "(args: { row, value, fraction, index }) => ReactNode", "notes": "Overrides showLabels default content. Return null to skip a slice." },
+        "centerLabel": { "type": "ReactNode", "notes": "Rendered via foreignObject in the centre of the chart (only useful with innerRadius > 0)." },
+        "activeIndex": { "type": "number", "notes": "Pulls the slice outward; other slices fade." },
+        "onSliceClick": { "type": "(args: { row, value, index }) => void" },
+        "showLegend": { "type": "boolean", "default": true },
+        "showTooltip": { "type": "boolean", "default": true },
+        "valueFormat": { "type": "(v: number) => string" },
+        "renderTooltip": { "type": "(row: T) => ReactNode" },
+        "emptyMessage": { "type": "ReactNode", "default": "No data" },
+        "classes": { "type": "Partial<ChartClasses>" }
+      }
+    },
+    "RadarChart": {
+      "import": "import { RadarChart } from '@overdoser/react-toolkit'",
+      "element": "div containing responsive SVG",
+      "generic": "T extends Record<string, unknown>",
+      "shadcnVariantMapping": {
+        "default": "no extra props",
+        "multiple": "no extra props (multiple keys in config)",
+        "legend": "showLegend (on by default)",
+        "dots": "showPoints (on by default)",
+        "lines-only": "fillOpacity={0}",
+        "grid-circle": "gridType='circle'",
+        "grid-circle-fill": "gridType='circle' (+ fillOpacity for the 'fill')",
+        "grid-circle-no-lines": "gridType='circle' + showRadialLines={false}",
+        "grid-fill": "defaults (filled polygon grid)",
+        "grid-custom": "override the grid via classes={{ grid: '…' }} or theme tokens",
+        "grid-none": "showGrid={false} (+ usually showRadialLines={false})",
+        "icons": "set `icon` on each entry in `config`",
+        "label-custom": "renderAxisLabel",
+        "radius": "showRadiusAxis"
+      },
+      "props": {
+        "data": { "type": "T[]", "required": true },
+        "axisKey": { "type": "keyof T & string", "required": true },
+        "config": { "type": "ChartConfig", "required": true, "notes": "SeriesConfig may include `icon` for the icons variant." },
+        "aspectRatio": { "type": "number", "default": 1 },
+        "height": { "type": "number" },
+        "gridType": { "type": "enum", "values": ["polygon", "circle"], "default": "polygon" },
+        "showGrid": { "type": "boolean", "default": true },
+        "showRadialLines": { "type": "boolean", "default": true },
+        "showAxisLabels": { "type": "boolean", "default": true },
+        "showRadiusAxis": { "type": "boolean", "default": false },
+        "levels": { "type": "number", "default": 5 },
+        "showPoints": { "type": "boolean", "default": true },
+        "fillOpacity": { "type": "number", "default": 0.4, "notes": "0 = 'lines-only' variant." },
+        "strokeWidth": { "type": "number", "default": 2 },
+        "renderAxisLabel": { "type": "(args: { row, index, angle, x, y, textAnchor }) => ReactNode", "notes": "Return null to skip a vertex." },
+        "axisFormat": { "type": "(label: string) => string" },
+        "valueFormat": { "type": "(v: number) => string" },
+        "renderTooltip": { "type": "(row: T) => ReactNode" },
+        "showLegend": { "type": "boolean", "default": true },
+        "showTooltip": { "type": "boolean", "default": true },
+        "emptyMessage": { "type": "ReactNode", "default": "No data" },
+        "classes": { "type": "Partial<ChartClasses>" }
+      }
+    },
+    "TradingChart": {
+      "import": "import { TradingChart, type Datafeed } from '@overdoser/react-toolkit'",
+      "element": "div containing a <canvas>",
+      "renderTech": "Canvas 2D (devicePixelRatio-aware). All other charts use SVG.",
+      "datafeedContract": {
+        "Bar": "{ time: number /* unix seconds */; open: number; high: number; low: number; close: number; volume?: number }",
+        "getBars": "({ symbol, resolution, from, to, countBack? }) => Promise<Bar[]> sorted ascending by time",
+        "subscribeBars": "({ symbol, resolution, onTick(bar) }) => SubscriptionHandle. A tick whose time equals the previous bar updates the in-progress bar; otherwise the chart appends a new bar.",
+        "unsubscribeBars": "(handle) => void"
+      },
+      "indicators": {
+        "sma": "{ type: 'sma', period, color? } — overlay",
+        "ema": "{ type: 'ema', period, color? } — overlay",
+        "bollinger": "{ type: 'bollinger', period, stdDev?, color?, fillOpacity? } — overlay (filled band)",
+        "rsi": "{ type: 'rsi', period?, color?, overbought?, oversold? } — sub-pane",
+        "volume": "{ type: 'volume', upColor?, downColor? } — sub-pane (histogram)"
+      },
+      "props": {
+        "datafeed": { "type": "Datafeed", "required": true },
+        "symbol": { "type": "string", "required": true },
+        "resolution": { "type": "Resolution", "required": true, "notes": "Bar size (the 'tick interval'). TradingView-style: numeric minutes ('1', '5', '60') or 'D'/'W'/'M'. Any other string passes through to the datafeed." },
+        "period": { "type": "Period", "notes": "Visible time-range window (the 'chart interval'): '1D' | '5D' | '1M' | '3M' | '6M' | '1Y' | '5Y' or a `<n><unit>` string. Overrides initialLookback when set. The chart does not auto-adjust resolution; pair with suggestResolutionForPeriod() / suggestPeriodForResolution() to couple the two." },
+        "seriesType": { "type": "enum", "values": ["candle", "bar", "line", "area"], "default": "candle", "notes": "'bar' = OHLC bars (vertical high-low line, left tick at open, right tick at close)." },
+        "timezone": { "type": "Timezone", "notes": "Controlled timezone for the crosshair time label. 'local' | 'utc' | IANA name. Pair with onTimezoneChange." },
+        "defaultTimezone": { "type": "Timezone", "default": "local", "notes": "Initial timezone when uncontrolled." },
+        "onTimezoneChange": { "type": "(tz: Timezone) => void" },
+        "showConfigPanel": { "type": "boolean", "default": true, "notes": "Gear button in the header that opens a Popover with a Timezone dropdown (Local / UTC / common IANA zones)." },
+        "indicators": { "type": "IndicatorConfig[]" },
+        "precision": { "type": "number", "default": 2 },
+        "initialLookback": { "type": "number", "default": 500, "notes": "Used only when `period` is not set." },
+        "height": { "type": "number", "default": 420 },
+        "upColor": { "type": "string", "default": "var(--crk-color-success)" },
+        "downColor": { "type": "string", "default": "var(--crk-color-danger)" },
+        "lineColor": { "type": "string", "default": "var(--crk-chart-1)" },
+        "onCrosshair": { "type": "(info: CrosshairInfo | null) => void" },
+        "onVisibleRangeChange": { "type": "(range: VisibleRange, bars: Bar[]) => void" }
+      },
+      "interactions": {
+        "drag": "pan",
+        "wheel": "zoom (cursor-anchored)",
+        "arrow-keys": "nudge pan",
+        "hover": "full crosshair — dashed horizontal + vertical lines, price badge on the right Y axis at the cursor's price, and a time badge under the X axis showing `YYYY-MM-DD HH:MM:SS <tz>` at the cursor's snapped bar (timezone configurable via the gear panel or props). OHLC readout in the chart header."
+      },
+      "exportedHelpers": ["periodToSeconds", "suggestResolutionForPeriod", "suggestPeriodForResolution", "formatCrosshairTime"],
+      "exportedIndicatorMath": ["sma", "ema", "bollinger", "rsi", "volumeSeries"],
+      "outOfScope": [
+        "Drawing tools (trend lines, fibonacci, shapes)",
+        "Custom indicator settings dialog",
+        "Pinch-zoom touch gestures",
+        "Multi-symbol overlays",
+        "Persistence"
+      ]
+    },
+    "Sparkline": {
+      "import": "import { Sparkline } from '@overdoser/react-toolkit'",
+      "element": "svg",
+      "forwardsRef": true,
+      "behavior": "Inline trend line, fixed pixel size, no axes/legend/tooltip — for table cells and KPI tiles.",
+      "props": {
+        "data": { "type": "number[]", "required": true },
+        "width": { "type": "number", "default": 80 },
+        "height": { "type": "number", "default": 24 },
+        "color": { "type": "string", "default": "var(--crk-chart-1)" },
+        "strokeWidth": { "type": "number", "default": 1.5 },
+        "curve": { "type": "enum", "values": ["linear", "monotone"], "default": "monotone" },
+        "fill": { "type": "boolean", "default": false, "notes": "Render a low-opacity area under the line." },
+        "showLastPoint": { "type": "boolean", "default": false },
+        "aria-label": { "type": "string" }
+      }
     }
   },
   "hooks": {
@@ -347,7 +644,8 @@
     "Modal content lives in Modal.Header / Modal.Body / Modal.Footer compound components.",
     "FormField clones a single child element to inject form props — pass exactly one input element.",
     "Server-side Table mode (when `onSort` is provided): the consumer is responsible for sorting and slicing `data` server-side.",
-    "Theme stylesheet is imported separately: '@overdoser/react-toolkit/theme.css'."
+    "Theme stylesheet is imported separately: '@overdoser/react-toolkit/theme.css'.",
+    "Charts use `--crk-chart-1` … `--crk-chart-5` color tokens (overridable on `:root`). Each chart is responsive via ResizeObserver; ship no external chart library."
   ],
   "recipes": [
     "recipes/login-form.tsx",
@@ -355,6 +653,12 @@
     "recipes/server-side-table.tsx",
     "recipes/confirm-modal.tsx",
     "recipes/searchable-multi-select.tsx",
-    "recipes/dropdown-menu.tsx"
+    "recipes/dropdown-menu.tsx",
+    "recipes/dashboard-charts.tsx",
+    "recipes/interactive-bar-chart.tsx",
+    "recipes/interactive-line-chart.tsx",
+    "recipes/interactive-area-chart.tsx",
+    "recipes/interactive-pie-chart.tsx",
+    "recipes/trading-chart.tsx"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overdoser/react-toolkit",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/recipes/dashboard-charts.tsx

@@ -0,0 +1,123 @@
+import {
+  LineChart,
+  AreaChart,
+  BarChart,
+  Sparkline,
+  Typography,
+  type ChartConfig,
+} from '@overdoser/react-toolkit';
+
+interface MonthRow {
+  month: string;
+  revenue: number;
+  costs: number;
+}
+
+const monthly: MonthRow[] = [
+  { month: 'Jan', revenue: 120, costs: 60 },
+  { month: 'Feb', revenue: 150, costs: 80 },
+  { month: 'Mar', revenue: 95, costs: 70 },
+  { month: 'Apr', revenue: 180, costs: 110 },
+  { month: 'May', revenue: 220, costs: 130 },
+  { month: 'Jun', revenue: 200, costs: 120 },
+];
+
+const finance: ChartConfig = {
+  revenue: { label: 'Revenue', color: 'var(--crk-chart-1)' },
+  costs: { label: 'Costs', color: 'var(--crk-chart-2)' },
+};
+
+const visitors: ChartConfig = {
+  visits: { label: 'Visits', color: 'var(--crk-chart-1)' },
+};
+
+const traffic = [
+  { day: 'Mon', visits: 320 },
+  { day: 'Tue', visits: 410 },
+  { day: 'Wed', visits: 280 },
+  { day: 'Thu', visits: 550 },
+  { day: 'Fri', visits: 720 },
+  { day: 'Sat', visits: 640 },
+  { day: 'Sun', visits: 490 },
+];
+
+const dollar = (v: number) => `$${v}k`;
+
+/**
+ * Compact dashboard with three primary charts and a row of KPI tiles.
+ * Demonstrates: multi-series LineChart, AreaChart with fill, grouped BarChart,
+ * inline Sparkline inside a KPI tile, custom value formatter, theme tokens.
+ */
+export function ChartsDashboard() {
+  return (
+    <div style={{ display: 'grid', gap: 24 }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
+        <KpiTile label="MRR" value="$24.2k" trend={[18, 21, 19, 22, 24, 23, 25]} />
+        <KpiTile label="DAU" value="3,184" trend={[12, 14, 13, 16, 18, 21, 24]} />
+        <KpiTile label="Churn" value="1.9%" trend={[3, 3, 2, 2, 2, 2, 1.9]} color="var(--crk-chart-4)" />
+      </div>
+
+      <section>
+        <Typography variant="h3" weight="semibold">Revenue vs costs</Typography>
+        <LineChart
+          data={monthly}
+          xKey="month"
+          config={finance}
+          yFormat={dollar}
+          valueFormat={dollar}
+        />
+      </section>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
+        <section>
+          <Typography variant="h3" weight="semibold">Weekly visits</Typography>
+          <AreaChart data={traffic} xKey="day" config={visitors} />
+        </section>
+        <section>
+          <Typography variant="h3" weight="semibold">Monthly P&amp;L</Typography>
+          <BarChart
+            data={monthly}
+            xKey="month"
+            config={finance}
+            yFormat={dollar}
+            valueFormat={dollar}
+          />
+        </section>
+      </div>
+    </div>
+  );
+}
+
+function KpiTile({
+  label,
+  value,
+  trend,
+  color = 'var(--crk-chart-1)',
+}: {
+  label: string;
+  value: string;
+  trend: number[];
+  color?: string;
+}) {
+  return (
+    <div
+      style={{
+        padding: 16,
+        borderRadius: 12,
+        border: '1px solid var(--crk-color-border)',
+        background: 'var(--crk-color-bg)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+      }}
+    >
+      <Typography variant="span" color="muted">{label}</Typography>
+      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
+        <Typography variant="span" weight="bold" style={{ fontSize: 'var(--crk-font-size-2xl)' }}>
+          {value}
+        </Typography>
+        <Sparkline data={trend} width={100} height={28} fill color={color} aria-label={`${label} trend`} />
+      </div>
+    </div>
+  );
+}