@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-IIQTAY3J.js

@@ -0,0 +1,715 @@
+import { Skeleton } from './chunk-RIBDXGUG.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text, Animated, 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';
+
+var STATE_DEFAULTS = {
+  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.",
+  retryLabel: "Retry",
+  loadingLabel: "Loading chart"
+};
+function ChartFrame({
+  state = "data",
+  width,
+  height,
+  compact = false,
+  emptyTitle = STATE_DEFAULTS.emptyTitle,
+  emptyMessage = STATE_DEFAULTS.emptyMessage,
+  errorTitle = STATE_DEFAULTS.errorTitle,
+  errorMessage = STATE_DEFAULTS.errorMessage,
+  retryLabel = STATE_DEFAULTS.retryLabel,
+  loadingLabel = STATE_DEFAULTS.loadingLabel,
+  onRetry
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(frameSheet);
+  if (state === "data") return null;
+  const box = { minWidth: width, minHeight: height };
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        width,
+        height: height ?? 120,
+        accessibilityLabel: loadingLabel,
+        style: box
+      }
+    );
+  }
+  if (state === "empty") {
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        accessibilityRole: "image",
+        accessibilityLabel: `${emptyTitle}. ${emptyMessage}`,
+        style: [styles.center, box],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "chart-bar", size: compact ? 18 : 24, color: theme.color.text3 }),
+          compact ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.title, children: emptyTitle }),
+            /* @__PURE__ */ jsx(Text, { style: styles.message, children: emptyMessage })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [compact ? styles.centerRow : styles.center, box], children: [
+    /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: compact ? 18 : 24, color: theme.color.danger }),
+    compact ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.title, children: errorTitle }),
+      /* @__PURE__ */ jsx(Text, { style: styles.message, children: errorMessage })
+    ] }),
+    /* @__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
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  message: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2,
+    textAlign: "center"
+  }
+}));
+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 useToneColors(tone) {
+  return toneColors(useLoamTheme(), 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"));
+  const on = resolved !== "none";
+  const theme = useLoamTheme();
+  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({
+  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 = "Sparkline chart"
+}) {
+  const { main, soft } = useToneColors(tone);
+  const opacity = useDrawIn(motion, animate);
+  const dotR = strokeWidth + 1.5;
+  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,
+      {
+        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 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({
+  data,
+  width = 140,
+  height = 150,
+  tone = "accent",
+  gap = 8,
+  barRadius = 6,
+  highlightLast = true,
+  highlightIndex,
+  colors,
+  accessibilityLabel = "Bar chart"
+}) {
+  const theme = useLoamTheme();
+  const { main, soft } = useToneColors(tone);
+  const bars = normalizeBars(data);
+  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) return colors[i % colors.length];
+    if (highlightIndex !== void 0) {
+      return i === highlightIndex ? theme.chart.c1 : theme.chart.c2;
+    }
+    return highlightLast ? i === n - 1 ? main : soft : main;
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel,
+      style: { width, height },
+      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, barRadius), fill: fillFor(i) }, i);
+      }) })
+    }
+  );
+}
+function RingChart({
+  value,
+  max = 100,
+  size = 92,
+  thickness = 8,
+  tone = "accent",
+  label = false,
+  accessibilityLabel
+}) {
+  const theme = useLoamTheme();
+  const { main } = useToneColors(tone);
+  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(
+    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" },
+      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 Donut({
+  data,
+  size = 140,
+  thickness = 18,
+  showLegend = true,
+  centerLabel,
+  motion,
+  animate = false,
+  state = "data",
+  emptyTitle,
+  emptyMessage,
+  errorTitle,
+  errorMessage,
+  retryLabel,
+  loadingLabel,
+  onRetry,
+  accessibilityLabel = "Donut chart"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(donutSheet);
+  const opacity = useDrawIn(motion, animate);
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(
+      ChartFrame,
+      {
+        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) => 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 ?? "100%";
+  const centerSize = Math.round(size * 0.16);
+  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,
+                        strokeWidth: thickness,
+                        fill: "none",
+                        strokeDasharray: `${s.fraction * circumference} ${circumference - s.fraction * circumference}`,
+                        strokeDashoffset: -s.start * circumference,
+                        transform: `rotate(-90 ${center} ${center})`
+                      },
+                      s.i
+                    ))
+                  ]
+                }
+              ),
+              typeof centerContent === "string" || typeof centerContent === "number" ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    position: "absolute",
+                    fontFamily: theme.font.display,
+                    fontWeight: theme.fontWeight.bold,
+                    fontSize: centerSize,
+                    color: theme.color.text
+                  },
+                  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 }] }),
+          /* @__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]
+  },
+  chip: { width: theme.space[11], height: theme.space[11], borderRadius: theme.radius[3] },
+  legendLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  legendPct: {
+    marginLeft: "auto",
+    textAlign: "right",
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  }
+}));
+function StackedBar({
+  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
+}) {
+  const theme = useLoamTheme();
+  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) => colors && colors.length > 0 ? colors[i % colors.length] : palette[i % palette.length];
+  const label = accessibilityLabel ?? (series && series.length ? `Stacked bar chart of ${series.map((s) => s.label).join(", ")} across ${data.length} columns` : "Stacked bar chart");
+  if (state !== "data") {
+    return /* @__PURE__ */ jsx(
+      ChartFrame,
+      {
+        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 / 2)),
+                fill: segColor(si)
+              },
+              `${ci}-${si}`
+            );
+          }
+          return /* @__PURE__ */ jsx(Rect, { x, y, width: colW, height: h, fill: segColor(si) }, `${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) }] }),
+      /* @__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[10],
+    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] },
+  legendLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text
+  }
+}));
+function StatCard({
+  label,
+  value,
+  delta,
+  deltaTone = "good",
+  data,
+  tone = "accent",
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(statSheet, { deltaTone });
+  const [sparkW, setSparkW] = React.useState(0);
+  const onSparkLayout = React.useCallback((e) => {
+    setSparkW(e.nativeEvent.layout.width);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel ?? label,
+      style: styles.card,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
+        /* @__PURE__ */ jsxs(View, { style: styles.valueRow, children: [
+          typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: value }) : value,
+          delta ? /* @__PURE__ */ jsx(Text, { style: styles.delta, children: delta }) : null
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.spark, onLayout: onSparkLayout, children: /* @__PURE__ */ jsx(Sparkline, { data, tone, width: sparkW > 0 ? sparkW : 120, height: 34, showArea: true }) })
+      ]
+    }
+  );
+}
+var statSheet = createStyleSheet((theme) => ({
+  card: {
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.lg,
+    minHeight: theme.space[112],
+    padding: theme.space[14],
+    gap: theme.space.s2
+  },
+  label: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text2 },
+  valueRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space[7] },
+  value: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[24],
+    lineHeight: theme.fontSize[24] * theme.lineHeight.none,
+    color: theme.color.text
+  },
+  delta: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[11],
+    variants: {
+      deltaTone: {
+        good: { color: theme.color.good },
+        danger: { color: theme.color.danger }
+      }
+    }
+  },
+  spark: { marginTop: "auto" }
+}));
+
+export { BarChart, ChartFrame, Donut, RingChart, Sparkline, StackedBar, StatCard };