@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-SYJEPXP6.js

@@ -0,0 +1,1303 @@
+import { MetricDelta } from './chunk-N7AX4OA4.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Animated, Text, Pressable, Easing } from 'react-native';
+import { Svg, Path, Polyline, Circle, Line, Rect } from 'react-native-svg';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/charts/charts-labels.ts
+var DEFAULT_CHARTS_LABELS = {
+  emptyTitle: "No data",
+  emptyMessage: "There is nothing to show for this range.",
+  errorTitle: "Could not load this chart",
+  errorMessage: "The data could not be loaded.",
+  retry: "Retry",
+  loading: "Loading chart",
+  other: "Other",
+  lineChart: "Line chart",
+  barChart: "Bar chart",
+  donutChart: "DonutChart chart",
+  stackedBarChart: "Stacked bar chart",
+  noData: (kind) => kind + ", no data",
+  pointCount: (n) => n + " " + (n === 1 ? "point" : "points"),
+  span: (first, end) => first + " to " + end,
+  seriesSummary: (kind, span, points, min, max, last) => kind + (span ? ", " + span : "") + ", " + points + ", " + min + " to " + max + ", last " + last,
+  donutSummary: (kind, slices) => kind + ": " + slices,
+  donutSlice: (label, pct) => label + " " + pct + "%",
+  stackedSummary: (kind, names, columns) => kind + " of " + names + " across " + columns + " columns",
+  splitBar: "Split bar",
+  rankedBars: "Ranked bars",
+  free: "Free",
+  splitEmpty: "No data yet",
+  percent: (pct) => pct + " percent"
+};
+function ChartFrame({
+  state = "data",
+  width,
+  height,
+  compact = false,
+  icon,
+  tone,
+  variant = "plain",
+  motion,
+  emptyTitle: emptyTitleProp,
+  emptyMessage: emptyMessageProp,
+  errorTitle: errorTitleProp,
+  errorMessage: errorMessageProp,
+  retryLabel: retryLabelProp,
+  loadingLabel: loadingLabelProp,
+  labels: labelsProp,
+  onRetry
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const emptyTitle = emptyTitleProp ?? labels.emptyTitle;
+  const emptyMessage = emptyMessageProp ?? labels.emptyMessage;
+  const errorTitle = errorTitleProp ?? labels.errorTitle;
+  const errorMessage = errorMessageProp ?? labels.errorMessage;
+  const retryLabel = retryLabelProp ?? labels.retry;
+  const loadingLabel = loadingLabelProp ?? labels.loading;
+  const theme = useLoamTheme("charts");
+  const { styles } = useStyles(frameSheet);
+  if (state === "data") return null;
+  const box = {
+    minWidth: width,
+    minHeight: height,
+    ...variant !== "plain" ? {
+      borderWidth: theme.borderWidth.thin,
+      borderColor: theme.color.border,
+      borderRadius: theme.radius.md,
+      ...variant === "filled" ? { backgroundColor: theme.color.surface } : null
+    } : null
+  };
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        width,
+        height: height ?? 120,
+        accessibilityLabel: loadingLabel,
+        motion,
+        style: box
+      }
+    );
+  }
+  if (!compact) {
+    const error = state === "error";
+    return /* @__PURE__ */ jsx(View, { style: box, children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: error || tone === "danger" ? "error" : "empty",
+        icon: icon ?? (error ? "alert-triangle" : "chart-bar"),
+        title: error ? errorTitle : emptyTitle,
+        description: error ? errorMessage : emptyMessage,
+        actionLabel: error && onRetry ? retryLabel : void 0,
+        onAction: error ? onRetry : void 0
+      }
+    ) });
+  }
+  if (state === "empty") {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "image",
+        accessibilityLabel: `${emptyTitle}. ${emptyMessage}`,
+        style: [styles.center, box],
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: icon ?? "chart-bar",
+            size: 18,
+            color: tone ? toneColors(theme, tone).main : theme.color.text3
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.centerRow, box], children: [
+    /* @__PURE__ */ jsx(Icon, { name: icon ?? "alert-triangle", size: 18, color: theme.color.danger }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onRetry, accessibilityLabel: retryLabel, children: retryLabel })
+  ] });
+}
+var frameSheet = createStyleSheet((theme) => ({
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    padding: theme.space.s4
+  },
+  centerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2,
+    padding: theme.space.s2
+  }
+}));
+function chartHue(theme, index) {
+  const palette = [
+    theme.chart.c1,
+    theme.chart.c2,
+    theme.chart.c3,
+    theme.chart.c4,
+    theme.chart.c5,
+    theme.chart.c6
+  ];
+  return palette[((Math.round(index) - 1) % 6 + 6) % 6];
+}
+function chartEdgeHue(theme, index) {
+  return theme.chart.edge[((Math.round(index) - 1) % 6 + 6) % 6];
+}
+function toneColors(theme, tone) {
+  switch (tone) {
+    case "good":
+      return { main: theme.color.good, soft: theme.color.goodSoft };
+    case "warn":
+      return { main: theme.color.warn, soft: theme.color.warnSoft };
+    case "danger":
+      return { main: theme.color.danger, soft: theme.color.dangerSoft };
+    default:
+      return { main: theme.color.accentStrong, soft: theme.color.accentSoft };
+  }
+}
+function toneStep(theme, i) {
+  const steps = [
+    theme.opacity[100],
+    theme.opacity[72],
+    theme.opacity[56],
+    theme.opacity[48],
+    theme.opacity[38],
+    theme.opacity[32]
+  ];
+  return steps[Math.min(Math.max(0, Math.round(i)), steps.length - 1)];
+}
+function useToneColors(tone) {
+  return toneColors(useLoamTheme("charts"), tone);
+}
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function useDrawIn(motion, animate) {
+  const resolved = useResolvedMotion(motion ?? (animate ? "full" : "none"), "charts");
+  const on = resolved !== "none";
+  const theme = useLoamTheme("charts");
+  const opacity = React.useRef(new Animated.Value(on ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!on) return;
+    const anim = Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [on, opacity, theme.motion.enter]);
+  return opacity;
+}
+function Sparkline({
+  labels: labelsProp,
+  data,
+  width = 120,
+  height = 32,
+  tone = "accent",
+  strokeWidth = 2,
+  showArea = false,
+  showDot = false,
+  motion,
+  animate = false,
+  state = "data",
+  emptyTitle,
+  emptyMessage,
+  errorTitle,
+  errorMessage,
+  retryLabel,
+  loadingLabel,
+  onRetry,
+  accessibilityLabel: labelProp
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const { main, soft } = useToneColors(tone);
+  const opacity = useDrawIn(motion, animate);
+  const dotR = strokeWidth + 1.5;
+  const accessibilityLabel = labelProp ?? summarizeSeries(labels.lineChart, data, void 0, labels);
+  const pad = Math.max(strokeWidth, showDot ? dotR : 0);
+  const innerW = Math.max(0, width - pad * 2);
+  const innerH = Math.max(0, height - pad * 2);
+  const n = data.length;
+  const min = n > 0 ? Math.min(...data) : 0;
+  const max = n > 0 ? Math.max(...data) : 0;
+  const range = max - min || 1;
+  const stepX = n > 1 ? innerW / (n - 1) : 0;
+  const px = (i) => pad + i * stepX;
+  const py = (v) => pad + (1 - (v - min) / range) * innerH;
+  const points = data.map((v, i) => `${px(i)},${py(v)}`).join(" ");
+  const lastX = px(n - 1);
+  const lastY = n > 0 ? py(data[n - 1]) : 0;
+  const areaPath = n > 1 ? `M ${points.replace(/ /g, " L ")} L ${lastX},${height} L ${px(0)},${height} Z` : "";
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(
+      ChartFrame,
+      {
+        labels,
+        compact: true,
+        state,
+        width,
+        height,
+        emptyTitle,
+        emptyMessage,
+        errorTitle,
+        errorMessage,
+        retryLabel,
+        loadingLabel,
+        onRetry
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel,
+      style: { width, height, opacity },
+      children: /* @__PURE__ */ jsxs(Svg, { width, height, viewBox: `0 0 ${width} ${height}`, fill: "none", children: [
+        showArea && areaPath ? /* @__PURE__ */ jsx(Path, { d: areaPath, fill: soft }) : null,
+        n > 1 ? /* @__PURE__ */ jsx(
+          Polyline,
+          {
+            points,
+            fill: "none",
+            stroke: main,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) : null,
+        showDot && n > 0 ? /* @__PURE__ */ jsx(Circle, { cx: lastX, cy: lastY, r: dotR, fill: main }) : null
+      ] })
+    }
+  );
+}
+function spoken(n) {
+  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(n);
+}
+function summarizeSeries(kind, values, labels, copy = DEFAULT_CHARTS_LABELS) {
+  if (values.length === 0) return copy.noData(kind);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const last = values[values.length - 1];
+  const first = labels?.[0];
+  const end = labels?.[values.length - 1];
+  const span = first && end ? copy.span(first, end) : "";
+  return copy.seriesSummary(
+    kind,
+    span,
+    copy.pointCount(values.length),
+    spoken(min),
+    spoken(max),
+    spoken(last)
+  );
+}
+function normalizeBars(data) {
+  return data.map((d) => typeof d === "number" ? { value: d } : d);
+}
+function topRoundedBar(x, y, w, h, r) {
+  const rr = Math.max(0, Math.min(r, w / 2, h));
+  if (rr <= 0) return `M ${x},${y} h ${w} v ${h} h ${-w} Z`;
+  return `M ${x},${y + h} L ${x},${y + rr} Q ${x},${y} ${x + rr},${y} L ${x + w - rr},${y} Q ${x + w},${y} ${x + w},${y + rr} L ${x + w},${y + h} Z`;
+}
+function BarChart({
+  labels: labelsProp,
+  data,
+  width = 140,
+  height = 150,
+  tone = "accent",
+  gap = 8,
+  barRadius = 4,
+  highlightLast = true,
+  highlightIndex,
+  colors,
+  motion,
+  animate = false,
+  state = "data",
+  emptyTitle,
+  emptyMessage,
+  errorTitle,
+  errorMessage,
+  retryLabel,
+  loadingLabel,
+  onRetry,
+  accessibilityLabel: labelProp
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
+  const { main, soft } = useToneColors(tone);
+  const opacity = useDrawIn(motion, animate);
+  const bars = normalizeBars(data);
+  const accessibilityLabel = labelProp ?? summarizeSeries(
+    labels.barChart,
+    bars.map((b) => b.value),
+    bars.map((b) => b.label),
+    labels
+  );
+  const n = bars.length;
+  const values = bars.map((b) => b.value);
+  const max = n > 0 ? Math.max(...values, 0) : 0;
+  const barW = n > 0 ? Math.max(0, (width - gap * (n - 1)) / n) : 0;
+  const fillFor = (i) => {
+    if (colors && colors.length > 0) {
+      const c = colors[i % colors.length];
+      return typeof c === "number" ? chartHue(theme, c) : toneColors(theme, c).main;
+    }
+    if (highlightIndex !== void 0) {
+      return i === highlightIndex ? theme.chart.c1 : theme.chart.c2;
+    }
+    return highlightLast ? i === n - 1 ? main : soft : main;
+  };
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(
+      ChartFrame,
+      {
+        labels,
+        state,
+        width,
+        height,
+        emptyTitle,
+        emptyMessage,
+        errorTitle,
+        errorMessage,
+        retryLabel,
+        loadingLabel,
+        onRetry
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel,
+      style: { width, height, opacity },
+      children: /* @__PURE__ */ jsx(Svg, { width, height, viewBox: `0 0 ${width} ${height}`, fill: "none", children: bars.map((b, i) => {
+        const h = max > 0 ? clamp(b.value / max, 0, 1) * height : 0;
+        const x = i * (barW + gap);
+        const y = height - h;
+        return /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: topRoundedBar(x, y, barW, h, Math.min(barRadius, barW / 4)),
+            fill: fillFor(i)
+          },
+          i
+        );
+      }) })
+    }
+  );
+}
+function RingChart({
+  labels: labelsProp,
+  value,
+  max = 100,
+  diameter: size = 92,
+  thickness = 8,
+  tone = "accent",
+  label = false,
+  motion,
+  animate = false,
+  state = "data",
+  accessibilityLabel
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
+  const { main } = useToneColors(tone);
+  const opacity = useDrawIn(motion, animate);
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(ChartFrame, { labels, state, width: size, height: size, compact: true });
+  }
+  const fraction = max > 0 ? clamp(value / max, 0, 1) : 0;
+  const now = Math.round(fraction * 100);
+  const center = size / 2;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - fraction);
+  const labelText = label === true ? `${now}%` : typeof label === "string" ? label : null;
+  const labelSize = Math.max(theme.fontSize[14], Math.round(size * 0.2));
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "progressbar",
+      accessibilityLabel,
+      accessibilityValue: { min: 0, max, now: Math.round(fraction * max) },
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": Math.round(fraction * max),
+      style: { width: size, height: size, alignItems: "center", justifyContent: "center", opacity },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Svg,
+          {
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            fill: "none",
+            style: ringSvgStyle,
+            children: [
+              /* @__PURE__ */ jsx(
+                Circle,
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  stroke: theme.color.surface3,
+                  strokeWidth: thickness,
+                  fill: "none"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Circle,
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  stroke: main,
+                  strokeWidth: thickness,
+                  strokeLinecap: "round",
+                  fill: "none",
+                  strokeDasharray: `${circumference} ${circumference}`,
+                  strokeDashoffset: dashOffset,
+                  transform: `rotate(-90 ${center} ${center})`
+                }
+              )
+            ]
+          }
+        ),
+        labelText !== null ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              position: "absolute",
+              fontFamily: theme.font.sans,
+              fontWeight: theme.fontWeight.bold,
+              fontSize: labelSize,
+              color: theme.color.text
+            },
+            children: labelText
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var ringSvgStyle = { position: "absolute" };
+function foldDonutSlices(data, max, other) {
+  if (max <= 0 || data.length <= max) return data;
+  const keep = new Set(
+    data.map((d, i) => ({ v: d.value, i })).sort((a, b) => b.v - a.v).slice(0, max - 1).map((x) => x.i)
+  );
+  const rest = data.filter((_, i) => !keep.has(i)).reduce((a, d) => a + d.value, 0);
+  return [...data.filter((_, i) => keep.has(i)), { label: other, value: rest }];
+}
+function DonutChart({
+  labels: labelsProp,
+  data: rawData,
+  maxSlices = 5,
+  otherLabel: otherLabelProp,
+  diameter: size = 140,
+  thickness = 18,
+  showLegend = true,
+  centerLabel,
+  motion,
+  animate = false,
+  state = "data",
+  emptyTitle,
+  emptyMessage,
+  errorTitle,
+  errorMessage,
+  retryLabel,
+  loadingLabel,
+  onRetry,
+  accessibilityLabel: labelProp,
+  tone
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const data = foldDonutSlices(rawData, maxSlices, otherLabelProp ?? labels.other);
+  const donutTotal = data.reduce((a, d) => a + d.value, 0);
+  const accessibilityLabel = labelProp ?? (data.length && donutTotal > 0 ? labels.donutSummary(
+    labels.donutChart,
+    data.map((d) => labels.donutSlice(d.label, Math.round(d.value / donutTotal * 100))).join(", ")
+  ) : labels.noData(labels.donutChart));
+  const theme = useLoamTheme("charts");
+  const { styles } = useStyles(donutSheet);
+  const opacity = useDrawIn(motion, animate);
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(
+      ChartFrame,
+      {
+        labels,
+        state,
+        width: size,
+        height: size,
+        emptyTitle,
+        emptyMessage,
+        errorTitle,
+        errorMessage,
+        retryLabel,
+        loadingLabel,
+        onRetry
+      }
+    );
+  }
+  const palette = [
+    theme.chart.c1,
+    theme.chart.c2,
+    theme.chart.c3,
+    theme.chart.c4,
+    theme.chart.c5,
+    theme.chart.c6
+  ];
+  const colorAt = (i) => tone ? toneColors(theme, tone).main : palette[i % palette.length];
+  const center = size / 2;
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const total = data.reduce((sum, d) => sum + Math.max(0, d.value), 0);
+  const fractionOf = (v) => total > 0 ? Math.max(0, v) / total : 0;
+  let acc = 0;
+  const segments = data.map((d, i) => {
+    const fraction = fractionOf(d.value);
+    const start = acc;
+    acc += fraction;
+    return { i, fraction, start, color: colorAt(i), pct: Math.round(fraction * 100) };
+  });
+  const centerContent = centerLabel ?? String(Math.round(total));
+  const seam = segments.length > 1 ? 2 : 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel,
+      style: showLegend ? styles.container : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            style: {
+              width: size,
+              height: size,
+              alignItems: "center",
+              justifyContent: "center",
+              opacity
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Svg,
+                {
+                  width: size,
+                  height: size,
+                  viewBox: `0 0 ${size} ${size}`,
+                  fill: "none",
+                  style: ringSvgStyle,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Circle,
+                      {
+                        cx: center,
+                        cy: center,
+                        r: radius,
+                        stroke: theme.chart.grid,
+                        strokeWidth: thickness,
+                        fill: "none"
+                      }
+                    ),
+                    segments.map((s) => /* @__PURE__ */ jsx(
+                      Circle,
+                      {
+                        cx: center,
+                        cy: center,
+                        r: radius,
+                        stroke: s.color,
+                        ...tone ? { strokeOpacity: toneStep(theme, s.i) } : null,
+                        strokeWidth: thickness,
+                        fill: "none",
+                        strokeDasharray: `${Math.max(0, s.fraction * circumference - seam)} ${circumference - Math.max(0, s.fraction * circumference - seam)}`,
+                        strokeDashoffset: -s.start * circumference,
+                        transform: `rotate(-90 ${center} ${center})`
+                      },
+                      s.i
+                    ))
+                  ]
+                }
+              ),
+              typeof centerContent === "string" || typeof centerContent === "number" ? (
+                // The Metric value: sans 700 tabular, 20 on the donut (R18).
+                /* @__PURE__ */ jsx(Text, { style: styles.centre, children: centerContent })
+              ) : centerContent
+            ]
+          }
+        ),
+        showLegend ? /* @__PURE__ */ jsx(View, { style: styles.legend, children: segments.map((s) => /* @__PURE__ */ jsxs(View, { style: styles.legendRow, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.chip,
+                { backgroundColor: s.color, borderColor: chartEdgeHue(theme, s.i + 1) },
+                tone ? { borderColor: s.color, opacity: toneStep(theme, s.i) } : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.legendLabel, children: data[s.i].label }),
+          /* @__PURE__ */ jsxs(Text, { style: styles.legendPct, children: [
+            s.pct,
+            "%"
+          ] })
+        ] }, s.i)) }) : null
+      ]
+    }
+  );
+}
+var donutSheet = createStyleSheet((theme) => ({
+  container: { flexDirection: "row", alignItems: "center", gap: theme.space.s5 },
+  legend: { flexShrink: 1, gap: theme.space.s2 },
+  legendRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minWidth: theme.space[140]
+  },
+  centre: {
+    position: "absolute",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[20],
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text
+  },
+  // The static key (R18): 10 swatch r 3 with its series edge, gap 8, the label
+  // at the platform's label weight (F51), the value in the count style.
+  chip: {
+    width: theme.space[10],
+    height: theme.space[10],
+    borderRadius: theme.radius[3],
+    borderWidth: theme.borderWidth.thin
+  },
+  legendLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: isAndroidIdiom(theme) ? theme.fontWeight.medium : theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  legendPct: {
+    marginLeft: "auto",
+    textAlign: "right",
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[12],
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
+  }
+}));
+function StackedBarChart({
+  labels: labelsProp,
+  data,
+  series,
+  width = 280,
+  height = 160,
+  gap = 10,
+  barRadius = 4,
+  colors,
+  stackMax,
+  showLabels = false,
+  showLegend = true,
+  motion,
+  animate = false,
+  state = "data",
+  emptyTitle,
+  emptyMessage,
+  errorTitle,
+  errorMessage,
+  retryLabel,
+  loadingLabel,
+  onRetry,
+  accessibilityLabel,
+  tone
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
+  const { styles } = useStyles(stackedSheet);
+  const opacity = useDrawIn(motion, animate);
+  const palette = [
+    theme.chart.c1,
+    theme.chart.c2,
+    theme.chart.c3,
+    theme.chart.c4,
+    theme.chart.c5,
+    theme.chart.c6
+  ];
+  const segColor = (i) => tone ? toneColors(theme, tone).main : colors && colors.length > 0 ? chartHue(theme, colors[i % colors.length]) : palette[i % palette.length];
+  const label = accessibilityLabel ?? (series && series.length ? labels.stackedSummary(
+    labels.stackedBarChart,
+    series.map((s) => s.label).join(", "),
+    data.length
+  ) : labels.stackedBarChart);
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(
+      ChartFrame,
+      {
+        labels,
+        state,
+        width,
+        height,
+        emptyTitle,
+        emptyMessage,
+        errorTitle,
+        errorMessage,
+        retryLabel,
+        loadingLabel,
+        onRetry
+      }
+    );
+  }
+  const n = data.length;
+  const colW = n > 0 ? Math.max(0, (width - gap * (n - 1)) / n) : 0;
+  const totals = data.map((d) => d.values.reduce((a, v) => a + Math.max(0, v), 0));
+  const domain = stackMax ?? Math.max(...totals, 0);
+  const gridFractions = [0.25, 0.5, 0.75];
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "image", accessibilityLabel: label, style: styles.wrap, children: [
+    /* @__PURE__ */ jsx(Animated.View, { style: { opacity }, children: /* @__PURE__ */ jsxs(Svg, { width, height, viewBox: `0 0 ${width} ${height}`, fill: "none", children: [
+      gridFractions.map((f) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          x1: 0,
+          y1: f * height,
+          x2: width,
+          y2: f * height,
+          stroke: theme.chart.grid,
+          strokeWidth: 1
+        },
+        f
+      )),
+      data.map((d, ci) => {
+        const x = ci * (colW + gap);
+        let topIdx = -1;
+        d.values.forEach((v, si) => {
+          if (v > 0) topIdx = si;
+        });
+        let yCursor = height;
+        return d.values.map((v, si) => {
+          const h = domain > 0 ? Math.max(0, v) / domain * height : 0;
+          if (h <= 0) return null;
+          yCursor -= h;
+          const y = yCursor;
+          if (si === topIdx) {
+            return /* @__PURE__ */ jsx(
+              Path,
+              {
+                d: topRoundedBar(x, y, colW, h, Math.min(barRadius, colW / 4)),
+                fill: segColor(si),
+                ...tone ? { fillOpacity: toneStep(theme, si) } : null,
+                stroke: theme.color.surface,
+                strokeWidth: 1
+              },
+              `${ci}-${si}`
+            );
+          }
+          return (
+            // Touching segments part on a 1 px surface seam, no outline (R19 V1).
+            /* @__PURE__ */ jsx(
+              Rect,
+              {
+                x,
+                y,
+                width: colW,
+                height: h,
+                fill: segColor(si),
+                ...tone ? { fillOpacity: toneStep(theme, si) } : null,
+                stroke: theme.color.surface,
+                strokeWidth: 1
+              },
+              `${ci}-${si}`
+            )
+          );
+        });
+      })
+    ] }) }),
+    showLabels ? /* @__PURE__ */ jsx(View, { style: styles.axis, children: data.map((d, i) => /* @__PURE__ */ jsx(Text, { style: styles.axisLabel, children: d.label }, i)) }) : null,
+    showLegend && series && series.length ? /* @__PURE__ */ jsx(View, { style: styles.legend, children: series.map((s, i) => /* @__PURE__ */ jsxs(View, { style: styles.legendItem, children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles.legendChip,
+            {
+              backgroundColor: segColor(i),
+              borderColor: chartEdgeHue(
+                theme,
+                colors && colors.length > 0 ? colors[i % colors.length] : i + 1
+              )
+            },
+            tone ? { borderColor: segColor(i), opacity: toneStep(theme, i) } : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: styles.legendLabel, children: s.label })
+    ] }, i)) }) : null
+  ] });
+}
+var stackedSheet = createStyleSheet((theme) => ({
+  wrap: { gap: theme.space.s2 },
+  axis: { flexDirection: "row", justifyContent: "space-between" },
+  axisLabel: {
+    flex: 1,
+    textAlign: "center",
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[11],
+    color: theme.color.text3
+  },
+  legend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space.s4,
+    rowGap: theme.space.s2
+  },
+  legendItem: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  legendChip: {
+    width: theme.space[10],
+    height: theme.space[10],
+    borderRadius: theme.radius[3],
+    borderWidth: theme.borderWidth.thin
+  },
+  legendLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: isAndroidIdiom(theme) ? theme.fontWeight.medium : theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  }
+}));
+function StatCard({
+  labels: labelsProp,
+  label,
+  value,
+  delta,
+  deltaTone = "good",
+  data,
+  tone = "accent",
+  loading = false,
+  roll = false,
+  motion,
+  onPress,
+  accessibilityLabel,
+  elevation = "default",
+  size = "sm",
+  variant = "default",
+  padding = "md",
+  format,
+  unit,
+  align = "start"
+}) {
+  useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const theme = useLoamTheme("charts");
+  const android = isAndroidIdiom(theme);
+  const { styles } = useStyles(statSheet, {
+    idiom: android ? "android" : "ios",
+    size,
+    elevation: elevation === "default" ? void 0 : elevation
+  });
+  const valueFont = size === "lg" ? theme.type.largeTitle.fontSize : size === "md" ? theme.type.title1.fontSize : android ? theme.fontSize[24] : theme.fontSize[22];
+  const alignText = {
+    textAlign: align === "start" ? "left" : align === "end" ? "right" : "center"
+  };
+  const alignRow = {
+    justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
+  };
+  const trimmed = delta?.trim() ?? "";
+  const direction = /^[-−]/.test(trimmed) ? "down" : /^\+/.test(trimmed) ? "up" : "flat";
+  const invert = direction === "down" ? deltaTone === "good" : deltaTone === "danger";
+  const [sparkW, setSparkW] = React.useState(0);
+  const onSparkLayout = React.useCallback((e) => {
+    setSparkW(e.nativeEvent.layout.width);
+  }, []);
+  const cardStyle = [
+    styles.card,
+    variant === "outline" ? styles.cardOutline : variant === "ghost" ? styles.cardGhost : null,
+    padding === "sm" ? styles.cardPadSm : padding === "lg" ? styles.cardPadLg : null
+  ];
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles.label, resolveTextRole(theme, "overline", android), alignText], children: label }),
+    loading ? /* @__PURE__ */ jsxs(View, { style: styles.valueRow, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 96, height: Math.round(valueFont * 1.1), decorative: true }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 48, height: theme.space[20], decorative: true })
+    ] }) : /* @__PURE__ */ jsxs(View, { style: [styles.valueRow, alignRow], children: [
+      roll && typeof value === "number" ? /* @__PURE__ */ jsx(NumberRoll, { value, format, textStyle: styles.value, motion }) : typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: typeof value === "number" && format ? value.toLocaleString(locale, format) : value }) : value,
+      unit ? /* @__PURE__ */ jsx(Text, { style: styles.unit, children: unit }) : null,
+      delta ? /* @__PURE__ */ jsx(MetricDelta, { delta, deltaDirection: direction, invert, size: "sm" }) : null
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.spark, onLayout: onSparkLayout, children: loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 34, decorative: true }) : (
+      /* 120 is the pre-measurement fallback (first paint, jsdom). */
+      /* @__PURE__ */ jsx(
+        Sparkline,
+        {
+          data,
+          tone,
+          width: sparkW > 0 ? sparkW : 120,
+          height: 34,
+          showArea: true
+        }
+      )
+    ) })
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: loading ? { busy: true } : void 0,
+        "aria-busy": loading || void 0,
+        onPress,
+        style: ({ pressed }) => [cardStyle, pressed ? styles.cardPressed : null],
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: cardStyle,
+      children: body
+    }
+  );
+}
+var statSheet = createStyleSheet((theme) => ({
+  card: {
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.lg,
+    minHeight: theme.space[112],
+    padding: theme.space[16],
+    gap: theme.space.s2,
+    variants: {
+      elevation: {
+        flat: {},
+        raised: { ...theme.shadow.lg }
+      }
+    }
+  },
+  cardOutline: { backgroundColor: "transparent" },
+  cardGhost: { backgroundColor: "transparent", borderColor: "transparent" },
+  cardPadSm: { padding: theme.space[10] },
+  cardPadLg: { padding: theme.space[24] },
+  unit: { fontFamily: theme.font.sans, color: theme.color.text2 },
+  cardPressed: { backgroundColor: theme.state.pressed },
+  label: { fontFamily: theme.font.sans, color: theme.color.text2 },
+  valueRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.space.s2,
+    rowGap: theme.space.s1
+  },
+  // The money figure (F51): iOS 22 / 700, Android 24 / 400, tabular.
+  value: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text,
+    variants: {
+      idiom: {
+        ios: { fontWeight: theme.fontWeight.bold, fontSize: theme.fontSize[22] },
+        android: { fontWeight: theme.fontWeight.regular, fontSize: theme.fontSize[24] }
+      },
+      size: {
+        sm: {},
+        md: {
+          fontSize: theme.type.title1.fontSize,
+          lineHeight: theme.type.title1.lineHeight,
+          letterSpacing: theme.type.title1.letterSpacing
+        },
+        lg: {
+          fontSize: theme.type.largeTitle.fontSize,
+          lineHeight: theme.type.largeTitle.lineHeight,
+          letterSpacing: theme.type.largeTitle.letterSpacing
+        }
+      }
+    }
+  },
+  spark: { marginTop: "auto" }
+}));
+var plain = (v) => String(Math.round(v * 100) / 100);
+function chartSlot(theme, i) {
+  const six = [
+    theme.chart.c1,
+    theme.chart.c2,
+    theme.chart.c3,
+    theme.chart.c4,
+    theme.chart.c5,
+    theme.chart.c6
+  ];
+  return i < 6 ? six[i] : theme.chart.tier[(i - 6) % 6] ?? six[i % 6];
+}
+function segFill(theme, kind) {
+  if (kind === "free") return theme.color.surface2;
+  if (kind === "other") return theme.color.borderStrong;
+  return chartSlot(theme, kind % 12);
+}
+function splitSegments(parts, maxParts, total, labels) {
+  const clean = parts.filter((p) => p.value > 0);
+  const own = clean.length > maxParts ? clean.slice(0, Math.max(0, maxParts - 1)) : clean;
+  const rest = clean.slice(own.length);
+  const segs = own.map((p, i) => ({ ...p, kind: i }));
+  if (rest.length) {
+    segs.push({
+      id: "__other",
+      label: labels.other,
+      value: rest.reduce((a, p) => a + p.value, 0),
+      kind: "other"
+    });
+  }
+  const sum = segs.reduce((a, s) => a + s.value, 0);
+  if (total !== void 0 && total > sum) {
+    segs.push({ id: "__free", label: labels.free, value: total - sum, kind: "free" });
+  }
+  return segs;
+}
+function SplitBar({
+  parts,
+  total,
+  maxParts = 5,
+  format = plain,
+  legend = "below",
+  size = "md",
+  title,
+  summary,
+  state = "data",
+  emptyText,
+  motion,
+  labels: labelsProp,
+  tone
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
+  const android = isAndroidIdiom(theme);
+  const { styles } = useStyles(splitSheet, { size });
+  const segs = splitSegments(parts, maxParts, total, labels);
+  const paint = (kind) => tone && typeof kind === "number" ? toneColors(theme, tone).main : segFill(theme, kind);
+  const whole = segs.reduce((a, s) => a + s.value, 0);
+  const [lit, setLit] = React.useState(null);
+  const pct = (v) => whole > 0 ? Math.round(v / whole * 100) : 0;
+  const readout = lit !== null && segs[lit] ? `${segs[lit].label} \xB7 ${format(segs[lit].value)} \xB7 ${pct(segs[lit].value)}%` : void 0;
+  const detail = readout ?? summary;
+  const header = title !== void 0 || detail !== void 0 ? /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+    title !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.title, resolveTextRole(theme, "body", android)], children: title }) : /* @__PURE__ */ jsx(View, {}),
+    state === "data" && detail !== void 0 ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        accessibilityLiveRegion: "polite",
+        style: [styles.detail, resolveTextRole(theme, "subheadline", android)],
+        children: detail
+      }
+    ) : null
+  ] }) : null;
+  if (state !== "data" || segs.length === 0) {
+    return /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
+      header,
+      state === "loading" ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: size === "sm" ? 8 : 12, motion }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.bar, styles.emptyTrack] }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.emptyText, resolveTextRole(theme, "footnote", android)], children: emptyText ?? labels.splitEmpty })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
+    header,
+    /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: labels.splitBar, style: [styles.bar, styles.row], children: segs.map((s, i) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `${s.label}, ${format(s.value)}, ${labels.percent(pct(s.value))}`,
+        onPress: () => {
+          haptics.selection();
+          setLit(lit === i ? null : i);
+        },
+        hitSlop: { top: theme.space[16], bottom: theme.space[16] },
+        style: [
+          styles.segment,
+          s.kind === "free" && styles.freeEdge,
+          {
+            flexGrow: s.value,
+            backgroundColor: paint(s.kind),
+            opacity: lit !== null && lit !== i ? theme.opacity[32] : tone && typeof s.kind === "number" ? toneStep(theme, s.kind) : 1
+          }
+        ]
+      },
+      s.id
+    )) }),
+    legend === "below" ? /* @__PURE__ */ jsx(View, { style: styles.legend, children: segs.map((s) => /* @__PURE__ */ jsxs(View, { style: styles.legendItem, children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles.dot,
+            s.kind === "free" && styles.freeEdge,
+            { backgroundColor: paint(s.kind) },
+            tone && typeof s.kind === "number" ? { opacity: toneStep(theme, s.kind) } : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: [styles.legendText, resolveTextRole(theme, "footnote", android)], children: s.label })
+    ] }, s.id)) }) : null
+  ] });
+}
+var splitSheet = createStyleSheet((theme) => ({
+  wrap: { gap: theme.space[10] },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "baseline",
+    gap: theme.space.s3
+  },
+  title: { fontFamily: theme.font.sans, color: theme.color.text, flexShrink: 1 },
+  detail: { fontFamily: theme.font.sans, color: theme.color.text2, fontVariant: ["tabular-nums"] },
+  bar: { variants: { size: { sm: { height: theme.space[8] }, md: { height: theme.space[12] } } } },
+  row: { flexDirection: "row", gap: theme.space[2] },
+  // r 4 on every segment; min 2 so a tiny share stays visible.
+  segment: { flexBasis: 0, minWidth: theme.space[2], borderRadius: theme.radius.xs },
+  freeEdge: { borderWidth: theme.borderWidth.thin, borderColor: theme.color.border },
+  emptyTrack: {
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border
+  },
+  emptyText: { fontFamily: theme.font.sans, color: theme.color.text3 },
+  legend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space[14],
+    rowGap: theme.space[6]
+  },
+  legendItem: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  dot: { width: theme.space[8], height: theme.space[8], borderRadius: theme.radius.full },
+  legendText: { fontFamily: theme.font.sans, color: theme.color.text2 }
+}));
+function RankedBars({
+  items,
+  limit = 5,
+  tone = 1,
+  format = plain,
+  state = "data",
+  emptyText,
+  motion,
+  accessibilityLabel,
+  labels: labelsProp
+}) {
+  const labels = useLabels("charts", DEFAULT_CHARTS_LABELS, labelsProp);
+  const theme = useLoamTheme("charts");
+  const android = isAndroidIdiom(theme);
+  const { styles } = useStyles(rankedSheet);
+  const shown = [...items].sort((a, b) => b.value - a.value).slice(0, limit);
+  const max = Math.max(0, ...shown.map((r) => r.value));
+  const fill = chartSlot(theme, ((Math.round(tone) - 1) % 12 + 12) % 12);
+  const labelRole = resolveTextRole(theme, android ? "bodyMedium" : "subheadline", android);
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx(View, { style: styles.list, children: Array.from({ length: Math.min(limit, 5) }, (_, i) => /* @__PURE__ */ jsxs(View, { style: [styles.row, styles.rowStatic], children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 96, motion }),
+      /* @__PURE__ */ jsx(View, { style: styles.trackCell, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 8, motion }) })
+    ] }, i)) });
+  }
+  if (state === "empty" || shown.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { style: [styles.empty, resolveTextRole(theme, "footnote", android)], children: emptyText ?? labels.splitEmpty });
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "list",
+      accessibilityLabel: accessibilityLabel ?? labels.rankedBars,
+      style: styles.list,
+      children: shown.map((r) => {
+        const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.label, labelRole], children: r.label }),
+          /* @__PURE__ */ jsx(View, { style: [styles.trackCell, styles.track], children: /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.fill,
+                { width: `${max > 0 ? r.value / max * 100 : 0}%`, backgroundColor: fill }
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.value, labelRole, android && styles.valueAndroid], children: format(r.value) })
+        ] });
+        return r.onPress ? /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `${r.label}, ${format(r.value)}`,
+            onPress: r.onPress,
+            android_ripple: android ? { color: theme.state.pressed } : void 0,
+            style: ({ pressed }) => [
+              styles.row,
+              styles.rowTouch,
+              pressed && !android && { backgroundColor: theme.state.pressed }
+            ],
+            children: body
+          }
+        ) }, r.id) : /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "listitem",
+            accessible: true,
+            accessibilityLabel: `${r.label}, ${format(r.value)}`,
+            style: [styles.row, styles.rowStatic],
+            children: body
+          },
+          r.id
+        );
+      })
+    }
+  );
+}
+var rankedSheet = createStyleSheet((theme) => ({
+  list: { paddingVertical: theme.space[4] },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4
+  },
+  rowStatic: { height: theme.space[32] },
+  rowTouch: { height: theme.space[48] },
+  label: { width: theme.space[96], fontFamily: theme.font.sans, color: theme.color.text },
+  trackCell: { flex: 1 },
+  track: {
+    height: theme.space[8],
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.color.surface2
+  },
+  fill: { height: theme.space[8], borderRadius: theme.radius.xs },
+  value: {
+    width: theme.space[44],
+    textAlign: "right",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text
+  },
+  valueAndroid: { fontWeight: theme.fontWeight.medium },
+  empty: { fontFamily: theme.font.sans, color: theme.color.text3, padding: theme.space.s2 }
+}));
+
+export { BarChart, ChartFrame, DonutChart, RankedBars, RingChart, Sparkline, SplitBar, StackedBarChart, StatCard, foldDonutSlices };