@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-IIQTAY3J.js

@@ -1,715 +0,0 @@
-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 };