@krizaka/charts 0.0.0-stage → 0.1.0

package/dist/native.js

@@ -0,0 +1,875 @@
+// src/core/labels.ts
+var DEFAULT_LABELS = {
+  showData: "Show data",
+  hideData: "Hide data",
+  tableCaption: "{title} \u2014 data",
+  exportPng: "PNG",
+  exportSvg: "SVG",
+  exportCsv: "CSV",
+  loading: "Loading chart\u2026",
+  empty: "No data for this period yet.",
+  error: "The chart could not be loaded.",
+  keyboardHint: "Use the arrow keys to move between points, Home and End to jump to the ends.",
+  roleDescription: "chart",
+  summaryIntro: "{kind}, {count}.",
+  summarySeries: "{label}: from {first} to {last}",
+  summaryRange: "lowest {min} ({minAt}), highest {max} ({maxAt})",
+  summaryTrendUp: "up {change}",
+  summaryTrendDown: "down {change}",
+  summaryTrendFlat: "stable",
+  summaryTotal: "total {total}",
+  summaryThreshold: "{label} at {value}",
+  summaryShare: "{label} {value} ({share})",
+  summaryCorrelation: "correlation {r}",
+  summaryConversion: "{from} \u2192 {to} {rate}",
+  summaryOverall: "overall {rate}",
+  summaryPeak: "peak {value} ({at})",
+  summaryActive: "{count} with a value",
+  summaryOhlc: "opened at {open}, closed at {close}, low {low}, high {high}",
+  kinds: {
+    line: "Line chart",
+    area: "Area chart",
+    bar: "Bar chart",
+    pie: "Pie chart",
+    donut: "Donut chart",
+    gauge: "Gauge",
+    sparkline: "Sparkline",
+    radar: "Radar chart",
+    heatmap: "Heatmap",
+    calendar: "Calendar heatmap",
+    sankey: "Flow diagram",
+    funnel: "Funnel",
+    candlestick: "Candlestick chart",
+    treemap: "Treemap",
+    scatter: "Scatter chart",
+    map: "Map",
+    globe: "Globe",
+    chart: "Chart"
+  },
+  category: "Category",
+  value: "Value",
+  total: "Total",
+  noValue: "\u2014"
+};
+function mergeLabels(...layers) {
+  let out = DEFAULT_LABELS;
+  for (const layer of layers) {
+    if (!layer) continue;
+    out = { ...out, ...layer, kinds: { ...out.kinds, ...layer.kinds } };
+  }
+  return out;
+}
+function capitalize(text) {
+  return text.charAt(0).toLocaleUpperCase() + text.slice(1);
+}
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+}
+
+// src/native/cartesian.tsx
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import Svg, { Circle, G, Line, Path, Text as SvgText } from "react-native-svg";
+
+// src/core/data.ts
+function read(accessor, datum, index) {
+  return typeof accessor === "function" ? accessor(datum, index) : datum[accessor];
+}
+var toNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
+function normalizeSeries(series, y, label) {
+  if (series?.length) return series;
+  if (y !== void 0) return [{ key: y, label: label ?? (typeof y === "string" ? y : "") }];
+  return [];
+}
+function tabulate(data, x, series) {
+  return {
+    categories: data.map((datum, i) => x === void 0 ? i + 1 : read(x, datum, i)),
+    series: series.map((spec, s) => ({
+      id: typeof spec.key === "string" ? spec.key : `series-${s}`,
+      label: spec.label,
+      values: data.map((datum, i) => toNumber(read(spec.key, datum, i))),
+      color: spec.color,
+      dashed: spec.dashed,
+      slot: s % 8 + 1
+    }))
+  };
+}
+function extent(series, stacked = false) {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  const count = series[0]?.values.length ?? 0;
+  if (stacked) {
+    for (let i = 0; i < count; i += 1) {
+      let pos = 0;
+      let neg = 0;
+      for (const s of series) {
+        const v = s.values[i] ?? 0;
+        if (v >= 0) pos += v;
+        else neg += v;
+      }
+      min = Math.min(min, neg);
+      max = Math.max(max, pos);
+    }
+  } else {
+    for (const s of series) {
+      for (const v of s.values) {
+        if (v == null) continue;
+        min = Math.min(min, v);
+        max = Math.max(max, v);
+      }
+    }
+  }
+  if (min === Number.POSITIVE_INFINITY) return [0, 0];
+  return [min, max];
+}
+function stack(series) {
+  const count = series[0]?.values.length ?? 0;
+  const out = series.map(() => []);
+  for (let i = 0; i < count; i += 1) {
+    let pos = 0;
+    let neg = 0;
+    series.forEach((s, k) => {
+      const v = s.values[i] ?? 0;
+      if (v >= 0) {
+        out[k].push({ base: pos, top: pos + v });
+        pos += v;
+      } else {
+        out[k].push({ base: neg, top: neg + v });
+        neg += v;
+      }
+    });
+  }
+  return out;
+}
+function summarize(series, categories, writeCategory) {
+  let min = null;
+  let max = null;
+  let first = null;
+  let last = null;
+  let total = 0;
+  let count = 0;
+  series.values.forEach((v, i) => {
+    if (v == null) return;
+    count += 1;
+    total += v;
+    if (first === null) first = v;
+    last = v;
+    if (!min || v < min.value) min = { value: v, category: writeCategory(categories[i]) };
+    if (!max || v > max.value) max = { value: v, category: writeCategory(categories[i]) };
+  });
+  const change = first !== null && last !== null && first !== 0 && count > 1 ? last / first - 1 : null;
+  const trend = count < 2 || change === null ? count < 2 ? "none" : last > first ? "up" : last < first ? "down" : "flat" : Math.abs(change) < 0.01 ? "flat" : change > 0 ? "up" : "down";
+  return { label: series.label, count, min, max, first, last, total, change, trend };
+}
+
+// src/core/describe.ts
+function describeSeries(table, { kind, labels, value, category, share, thresholds = [] }) {
+  const points = table.categories.length;
+  const first = points ? category(table.categories[0]) : "";
+  const last = points ? category(table.categories[points - 1]) : "";
+  const count = table.series.length > 1 ? `${table.series.length} \xD7 ${points}` : String(points);
+  const intro = fill(labels.summaryIntro, { kind: labels.kinds[kind], count: points > 1 ? `${count} (${first} \u2013 ${last})` : count });
+  const sentences = table.series.map((series) => {
+    const s = summarize(series, table.categories, category);
+    if (!s.count) return `${s.label}: ${labels.noValue}.`;
+    const parts = [fill(labels.summarySeries, { label: s.label, first: value(s.first), last: value(s.last) })];
+    if (s.min && s.max && s.count > 2) parts.push(fill(labels.summaryRange, { min: value(s.min.value), minAt: s.min.category, max: value(s.max.value), maxAt: s.max.category }));
+    if (s.trend === "up" || s.trend === "down") {
+      const template = s.trend === "up" ? labels.summaryTrendUp : labels.summaryTrendDown;
+      if (s.change !== null) parts.push(fill(template, { change: share(Math.abs(s.change)) }));
+    } else if (s.trend === "flat") parts.push(labels.summaryTrendFlat);
+    return `${parts.join(", ")}.`;
+  });
+  const marks = thresholds.map((t) => fill(labels.summaryThreshold, { label: t.label, value: value(t.value) }));
+  return [intro, ...sentences, ...marks.length ? [`${marks.join(", ")}.`] : []].join(" ");
+}
+function describeParts(kind, parts, { labels, value, share }) {
+  const total = parts.reduce((sum, p) => sum + Math.max(0, p.value), 0);
+  const intro = fill(labels.summaryIntro, { kind: labels.kinds[kind], count: parts.length });
+  const sorted = [...parts].sort((a, b) => b.value - a.value);
+  const items = sorted.map((p) => fill(labels.summaryShare, { label: p.label, value: value(p.value), share: share(total ? p.value / total : 0) }));
+  return `${intro} ${items.join(", ")}. ${capitalize(fill(labels.summaryTotal, { total: value(total) }))}.`;
+}
+
+// src/core/format.ts
+import { currencyDigits, formatCompact, formatDate, formatMoney, formatNumber, formatPercent, getDateTimeFormat, getNumberFormat } from "@krizaka/intl";
+function valueFormatter(format = "number", locale, noValue = "\u2014", axis = false) {
+  const write = writerOf(format, locale, axis);
+  return (value) => value == null || Number.isNaN(value) ? noValue : write(value);
+}
+function writerOf(format, locale, axis) {
+  if (typeof format === "function") return (value) => format(value, locale);
+  if (format === "integer") return (value) => formatNumber(Math.round(value), { locale, maximumFractionDigits: 0 });
+  if (format === "compact") return (value) => formatCompact(value, { locale });
+  if (format === "percent") return (value) => formatPercent(value, { locale, maximumFractionDigits: axis ? 0 : 1 });
+  if (format === "number") {
+    return (value) => axis && Math.abs(value) >= 1e4 ? formatCompact(value, { locale }) : formatNumber(value, { locale, maximumFractionDigits: 2 });
+  }
+  if (format.style === "money") {
+    const { currency } = format;
+    const digits = currencyDigits(currency);
+    return (value) => {
+      const minor = Math.round(value);
+      if ((axis || format.compact) && Math.abs(minor) >= 1e6) {
+        const options2 = { style: "currency", currency, currencyDisplay: "narrowSymbol", notation: "compact", minimumFractionDigits: 0, maximumFractionDigits: 1 };
+        return getNumberFormat(locale, options2).format(minor / 10 ** digits);
+      }
+      if (axis && minor % 10 ** digits === 0) {
+        return getNumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(minor / 10 ** digits);
+      }
+      return formatMoney(minor, { currency, locale });
+    };
+  }
+  if (format.style === "unit") {
+    const { unit } = format;
+    const compact = axis || format.compact;
+    const options2 = { style: "unit", unit, unitDisplay: "short", ...compact ? { notation: "compact" } : {}, maximumFractionDigits: compact ? 1 : 2 };
+    return (value) => getNumberFormat(locale, options2).format(value);
+  }
+  const { options } = format;
+  return (value) => formatNumber(value, { locale, ...options });
+}
+function asDate(value) {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "number" && value > 1e10) return new Date(value);
+  if (typeof value === "string" && /^\d{4}-\d{2}(-\d{2})?([T ][\d:.]+(Z|[+-]\d{2}:?\d{2})?)?$/.test(value)) {
+    const iso = value.length === 7 ? `${value}-01T00:00:00Z` : value.length === 10 ? `${value}T00:00:00Z` : value;
+    const date = new Date(iso);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  return null;
+}
+var DATE_OPTIONS = {
+  year: { year: "numeric", timeZone: "UTC" },
+  month: { month: "short", year: "numeric", timeZone: "UTC" },
+  day: { month: "short", day: "numeric", timeZone: "UTC" },
+  date: { dateStyle: "medium", timeZone: "UTC" },
+  time: { timeStyle: "short", timeZone: "UTC" },
+  datetime: { dateStyle: "medium", timeStyle: "short", timeZone: "UTC" }
+};
+function categoryFormatter(format, locale) {
+  if (typeof format === "function") return (category) => format(category, locale);
+  if (format === "text") return (category) => String(category ?? "");
+  return (category) => {
+    const date = asDate(category);
+    if (!date) return String(category ?? "");
+    const kind = format ?? guessPrecision(category);
+    if (kind === "date") return formatDate(date, { locale, style: "medium", timeZone: "UTC" });
+    return getDateTimeFormat(locale, DATE_OPTIONS[kind]).format(date);
+  };
+}
+function guessPrecision(category) {
+  if (typeof category === "string") {
+    if (category.length === 7) return "month";
+    if (category.length === 10) return "date";
+    return "datetime";
+  }
+  const date = asDate(category);
+  return date && date.getUTCHours() === 0 && date.getUTCMinutes() === 0 ? "date" : "datetime";
+}
+function shareFormatter(locale) {
+  return (ratio) => formatPercent(ratio, { locale, maximumFractionDigits: Math.abs(ratio) < 0.1 ? 1 : 0 });
+}
+
+// src/core/scale.ts
+function niceStep(span, count) {
+  if (!(span > 0) || !(count > 0)) return 1;
+  const raw = span / count;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const fraction = raw / power;
+  const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
+  return nice * power;
+}
+function niceDomain(min, max, count = 5) {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return { domain: [0, 1], ticks: [0, 1] };
+  if (min === max) {
+    if (min === 0) return { domain: [0, 1], ticks: [0, 0.5, 1] };
+    const pad = Math.abs(min) * 0.5;
+    [min, max] = min > 0 ? [0, max + pad] : [min - pad, 0];
+  }
+  const step = niceStep(max - min, count);
+  const lo = Math.floor(min / step) * step;
+  const hi = Math.ceil(max / step) * step;
+  const ticks = [];
+  const digits = Math.max(0, -Math.floor(Math.log10(step)) + 2);
+  for (let v = lo; v <= hi + step / 2; v += step) ticks.push(Number(v.toFixed(digits)));
+  return { domain: [lo, hi], ticks };
+}
+function linearScale(domain, range, ticks = domain) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const k = d1 === d0 ? 0 : (r1 - r0) / (d1 - d0);
+  const scale = ((value) => r0 + (value - d0) * k);
+  return Object.assign(scale, { domain, range, ticks });
+}
+function bandScale(count, range, padding = 0.3) {
+  const [r0, r1] = range;
+  const step = count > 0 ? (r1 - r0) / count : 0;
+  const bandwidth = step * (1 - padding);
+  const scale = ((index) => r0 + index * step + (step - bandwidth) / 2);
+  return Object.assign(scale, { bandwidth, step, count });
+}
+function pointScale(count, range) {
+  const [r0, r1] = range;
+  if (count <= 1) return () => (r0 + r1) / 2;
+  const step = (r1 - r0) / (count - 1);
+  return (index) => r0 + index * step;
+}
+function thinLabels(count, max) {
+  if (count <= max) return Array.from({ length: count }, (_, i) => i);
+  const every = Math.ceil(count / Math.max(1, max));
+  const out = [];
+  for (let i = 0; i < count; i += every) out.push(i);
+  if (out[out.length - 1] !== count - 1) {
+    if (count - 1 - out[out.length - 1] < every) out.pop();
+    out.push(count - 1);
+  }
+  return out;
+}
+
+// src/core/shape.ts
+var r = (n) => Math.round(n * 100) / 100;
+function segments(points) {
+  const out = [];
+  let current = [];
+  for (const point of points) {
+    if (point) current.push(point);
+    else if (current.length) {
+      out.push(current);
+      current = [];
+    }
+  }
+  if (current.length) out.push(current);
+  return out;
+}
+function linePath(points, curve = "monotone") {
+  if (points.length === 0) return "";
+  const [x0, y0] = points[0];
+  if (points.length === 1) return `M${r(x0)},${r(y0)}`;
+  if (curve === "step") {
+    let d2 = `M${r(x0)},${r(y0)}`;
+    for (let i = 1; i < points.length; i += 1) {
+      const [px] = points[i - 1];
+      const [x, y] = points[i];
+      const mid = (px + x) / 2;
+      d2 += `H${r(mid)}V${r(y)}H${r(x)}`;
+    }
+    return d2;
+  }
+  if (curve === "linear" || points.length === 2) return points.map(([x, y], i) => `${i ? "L" : "M"}${r(x)},${r(y)}`).join("");
+  const tangents = monotoneTangents(points);
+  let d = `M${r(x0)},${r(y0)}`;
+  for (let i = 1; i < points.length; i += 1) {
+    const [xa, ya] = points[i - 1];
+    const [xb, yb] = points[i];
+    const h = (xb - xa) / 3;
+    d += `C${r(xa + h)},${r(ya + h * tangents[i - 1])} ${r(xb - h)},${r(yb - h * tangents[i])} ${r(xb)},${r(yb)}`;
+  }
+  return d;
+}
+function monotoneTangents(points) {
+  const n = points.length;
+  const slopes = [];
+  for (let i = 0; i < n - 1; i += 1) {
+    const [xa, ya] = points[i];
+    const [xb, yb] = points[i + 1];
+    slopes.push(xb === xa ? 0 : (yb - ya) / (xb - xa));
+  }
+  const tangents = [slopes[0]];
+  for (let i = 1; i < n - 1; i += 1) {
+    const a = slopes[i - 1];
+    const b = slopes[i];
+    tangents.push(a * b <= 0 ? 0 : 3 * a * b / (Math.max(a, b) * 2 + Math.min(a, b)) || 0);
+  }
+  tangents.push(slopes[n - 2]);
+  return tangents;
+}
+function areaPath(top, base, curve = "monotone") {
+  if (top.length === 0) return "";
+  const line = linePath(top, curve);
+  const bottom = typeof base === "number" ? [top[top.length - 1], top[0]].map(([x]) => [x, base]) : [...base].reverse();
+  if (typeof base === "number") return `${line}L${r(bottom[0][0])},${r(base)}L${r(bottom[1][0])},${r(base)}Z`;
+  return `${line}L${linePath(bottom, curve).slice(1)}Z`;
+}
+function barPath(x, y, width, height, radius = 4, horizontal = false, negative = false) {
+  if (width <= 0 || height <= 0) return "";
+  const rad = Math.min(radius, horizontal ? height / 2 : width / 2, horizontal ? width : height);
+  if (!horizontal) {
+    if (!negative) {
+      return `M${r(x)},${r(y + height)}V${r(y + rad)}Q${r(x)},${r(y)} ${r(x + rad)},${r(y)}H${r(x + width - rad)}Q${r(x + width)},${r(y)} ${r(x + width)},${r(y + rad)}V${r(y + height)}Z`;
+    }
+    return `M${r(x)},${r(y)}V${r(y + height - rad)}Q${r(x)},${r(y + height)} ${r(x + rad)},${r(y + height)}H${r(x + width - rad)}Q${r(x + width)},${r(y + height)} ${r(x + width)},${r(y + height - rad)}V${r(y)}Z`;
+  }
+  if (!negative) {
+    return `M${r(x)},${r(y)}H${r(x + width - rad)}Q${r(x + width)},${r(y)} ${r(x + width)},${r(y + rad)}V${r(y + height - rad)}Q${r(x + width)},${r(y + height)} ${r(x + width - rad)},${r(y + height)}H${r(x)}Z`;
+  }
+  return `M${r(x + width)},${r(y)}H${r(x + rad)}Q${r(x)},${r(y)} ${r(x)},${r(y + rad)}V${r(y + height - rad)}Q${r(x)},${r(y + height)} ${r(x + rad)},${r(y + height)}H${r(x + width)}Z`;
+}
+function polar(cx, cy, radius, angle) {
+  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
+}
+function arcPath(cx, cy, inner, outer, start, end) {
+  const sweep = end - start;
+  if (sweep <= 0 || outer <= 0) return "";
+  if (sweep >= Math.PI * 2 - 1e-6) {
+    const mid = start + Math.PI;
+    return `${arcPath(cx, cy, inner, outer, start, mid)}${arcPath(cx, cy, inner, outer, mid, start + Math.PI * 2)}`;
+  }
+  const large = sweep > Math.PI ? 1 : 0;
+  const [ox0, oy0] = polar(cx, cy, outer, start);
+  const [ox1, oy1] = polar(cx, cy, outer, end);
+  let d = `M${r(ox0)},${r(oy0)}A${r(outer)},${r(outer)} 0 ${large} 1 ${r(ox1)},${r(oy1)}`;
+  if (inner > 0) {
+    const [ix1, iy1] = polar(cx, cy, inner, end);
+    const [ix0, iy0] = polar(cx, cy, inner, start);
+    d += `L${r(ix1)},${r(iy1)}A${r(inner)},${r(inner)} 0 ${large} 0 ${r(ix0)},${r(iy0)}Z`;
+  } else d += `L${r(cx)},${r(cy)}Z`;
+  return d;
+}
+function strokeArcPath(cx, cy, radius, start, end) {
+  if (end - start <= 0) return "";
+  const [x0, y0] = polar(cx, cy, radius, start);
+  const [x1, y1] = polar(cx, cy, radius, end);
+  return `M${r(x0)},${r(y0)}A${r(radius)},${r(radius)} 0 ${end - start > Math.PI ? 1 : 0} 1 ${r(x1)},${r(y1)}`;
+}
+
+// ../tokens/dist/native.js
+var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
+  "surface0": "#0c0c0e",
+  "surface1": "#161618",
+  "surface2": "#1f1f23",
+  "surface3": "#2a2a2d",
+  "media": "#1b1b1d",
+  "borderSubtle": "rgba(255,255,255,0.06)",
+  "borderDefault": "rgba(255,255,255,0.1)",
+  "borderStrong": "rgba(255,255,255,0.16)",
+  "textPrimary": "#f5f5f5",
+  "textSecondary": "#a0a0a7",
+  "textMuted": "#73737d",
+  "textOnMedia": "#ffffff",
+  "accent": "#196df5",
+  "accentHover": "#0e5bd8",
+  "accentSoft": "rgba(25,109,245,0.1)",
+  "accentText": "#629cf8",
+  "accent2": "#196df5",
+  "onAccent": "#ffffff",
+  "ring": "#196df5",
+  "brandGradientFrom": "#0e1525",
+  "brandGradientVia": "#0e0f16",
+  "brandGradientTo": "#0c0c0e",
+  "success": "#10b77f",
+  "successText": "#36d399",
+  "warning": "#f59f0a",
+  "warningText": "#f6a823",
+  "danger": "#ef4343",
+  "dangerText": "#f87272",
+  "info": "#196df5",
+  "infoText": "#629cf8",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)"
+}), light: /* @__PURE__ */ Object.freeze({
+  "surface0": "#fafafa",
+  "surface1": "#ffffff",
+  "surface2": "#f1f1f3",
+  "surface3": "#e4e4e7",
+  "media": "#e9e9ec",
+  "borderSubtle": "rgba(0,0,0,0.06)",
+  "borderDefault": "rgba(0,0,0,0.1)",
+  "borderStrong": "rgba(0,0,0,0.16)",
+  "textPrimary": "#18181b",
+  "textSecondary": "#64646d",
+  "textMuted": "#808089",
+  "textOnMedia": "#ffffff",
+  "accent": "#0a64f5",
+  "accentHover": "#0d55c9",
+  "accentSoft": "rgba(10,100,245,0.08)",
+  "accentText": "#0954ce",
+  "accent2": "#0a64f5",
+  "onAccent": "#ffffff",
+  "ring": "#0a64f5",
+  "brandGradientFrom": "#dcebfe",
+  "brandGradientVia": "#f3f6fc",
+  "brandGradientTo": "#fafafa",
+  "success": "#10b77f",
+  "successText": "#0a714e",
+  "warning": "#f59f0a",
+  "warningText": "#955104",
+  "danger": "#ef4343",
+  "dangerText": "#af1d1d",
+  "info": "#0a64f5",
+  "infoText": "#0954ce",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)"
+}) });
+
+// src/native/frame.tsx
+import { createContext, useContext, useMemo, useState } from "react";
+import { Pressable, StyleSheet, Text, useColorScheme, View } from "react-native";
+
+// src/core/palette.ts
+var HUES = {
+  blue: { light: "#2a78d6", dark: "#3987e5" },
+  orange: { light: "#eb6834", dark: "#d95926" },
+  aqua: { light: "#1baf7a", dark: "#199e70" },
+  yellow: { light: "#eda100", dark: "#c98500" },
+  magenta: { light: "#e87ba4", dark: "#d55181" },
+  green: { light: "#008300", dark: "#008300" },
+  violet: { light: "#6250d6", dark: "#9085e9" },
+  red: { light: "#e34948", dark: "#e66767" }
+};
+var ORDERS = {
+  krizaka: ["blue", "green", "magenta", "yellow", "aqua", "orange", "violet", "red"],
+  orazaka: ["orange", "aqua", "blue", "yellow", "magenta", "green", "violet", "red"],
+  orochia: ["violet", "magenta", "yellow", "aqua", "orange", "blue", "green", "red"]
+};
+function palette(brand, mode) {
+  return ORDERS[brand].map((hue) => HUES[hue][mode]);
+}
+var DIVERGING = {
+  light: { low: HUES.blue.light, high: HUES.red.light },
+  dark: { low: HUES.blue.dark, high: HUES.red.dark }
+};
+
+// src/native/frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var THEMES = themes;
+var Context = createContext({});
+function ChartsProvider({ children, ...settings }) {
+  const parent = useContext(Context);
+  const value = useMemo(() => ({ ...parent, ...Object.fromEntries(Object.entries(settings).filter(([, v]) => v !== void 0)) }), [parent, settings]);
+  return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+}
+function useNativeSettings(own) {
+  const shared = useContext(Context);
+  const device = useColorScheme();
+  const scheme = own.scheme ?? shared.scheme ?? (device === "light" ? "light" : "dark");
+  const brand = own.brand ?? shared.brand ?? "krizaka";
+  return useMemo(() => {
+    const theme = { ...THEMES[scheme], ...shared.theme, ...own.theme };
+    const colors = palette(brand, scheme);
+    const tones = { neutral: theme.textSecondary, accent: theme.accent, success: theme.success, warning: theme.warning, danger: theme.danger, info: theme.info };
+    return {
+      locale: own.locale ?? shared.locale ?? "en-US",
+      labels: mergeLabels(shared.labels, own.labels),
+      theme,
+      palette: colors,
+      color: (color, slot) => color === void 0 ? colors[(slot - 1) % 8] : typeof color === "number" ? colors[color - 1] : color in tones ? tones[color] : color
+    };
+  }, [scheme, brand, shared, own.locale, own.labels, own.theme]);
+}
+function NativeFrame({ frame, defaultHeight, resolved, summary, isEmpty, points, active, onActive, indexAt, legend, children }) {
+  const { title, hideTitle, height = defaultHeight, loading, empty, style } = frame;
+  const { theme, labels } = resolved;
+  const [width, setWidth] = useState(0);
+  const onLayout = (event) => setWidth(Math.round(event.nativeEvent.layout.width));
+  const readout = active !== null ? points[active] : null;
+  const n = points.length;
+  let body;
+  if (loading) body = /* @__PURE__ */ jsx(View, { style: [styles.state, { backgroundColor: theme.surface2 }], role: "progressbar", "aria-label": labels.loading });
+  else if (isEmpty)
+    body = empty ?? /* @__PURE__ */ jsx(View, { style: [styles.state, { borderColor: theme.borderDefault, borderWidth: StyleSheet.hairlineWidth, borderStyle: "dashed" }], children: /* @__PURE__ */ jsx(Text, { style: [styles.small, { color: theme.textSecondary }], children: labels.empty }) });
+  else body = width > 0 ? children(width, height) : null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    !hideTitle && /* @__PURE__ */ jsx(Text, { style: [styles.title, { color: theme.textPrimary }], role: "heading", children: title }),
+    legend,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onLayout,
+        style: { height },
+        disabled: isEmpty || loading,
+        onPress: (event) => indexAt && onActive(indexAt(event.nativeEvent.locationX, width)),
+        accessible: true,
+        accessibilityRole: n ? "adjustable" : "image",
+        accessibilityLabel: `${title}. ${summary}`,
+        accessibilityValue: n ? { min: 0, max: n - 1, now: active ?? 0, ...readout ? { text: readout } : {} } : void 0,
+        "aria-valuemin": n ? 0 : void 0,
+        "aria-valuemax": n ? n - 1 : void 0,
+        "aria-valuenow": n ? active ?? 0 : void 0,
+        "aria-valuetext": readout ?? void 0,
+        accessibilityActions: n ? [{ name: "increment" }, { name: "decrement" }] : [],
+        onAccessibilityAction: (event) => {
+          if (!n) return;
+          if (event.nativeEvent.actionName === "increment") onActive(Math.min(n - 1, (active ?? -1) + 1));
+          if (event.nativeEvent.actionName === "decrement") onActive(Math.max(0, (active ?? n) - 1));
+        },
+        children: body
+      }
+    ),
+    readout ? /* @__PURE__ */ jsx(Text, { style: [styles.small, { color: theme.textSecondary }], "aria-hidden": true, children: readout }) : null
+  ] });
+}
+function NativeLegend({ items, theme }) {
+  if (items.length < 2) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.legend, "aria-hidden": true, children: items.map((item) => /* @__PURE__ */ jsxs(View, { style: styles.legendItem, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.key, { backgroundColor: item.color }] }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.small, { color: theme.textSecondary }], children: item.label })
+  ] }, item.label)) });
+}
+var styles = StyleSheet.create({
+  root: { gap: 8 },
+  title: { fontSize: 14, fontWeight: "600", lineHeight: 20 },
+  small: { fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
+  state: { flex: 1, borderRadius: 10, alignItems: "center", justifyContent: "center", padding: 16 },
+  legend: { flexDirection: "row", flexWrap: "wrap", columnGap: 14, rowGap: 4 },
+  legendItem: { flexDirection: "row", alignItems: "center", gap: 6 },
+  key: { width: 10, height: 10, borderRadius: 3 }
+});
+
+// src/native/cartesian.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var textWidth = (text) => Math.ceil(text.length * 6.4);
+function NativeCartesian({ props, mode }) {
+  const { data, x, y, yLabel, series: seriesProp, format, xFormat, thresholds = [] } = props;
+  const resolved = useNativeSettings(props);
+  const { locale, labels, theme, color } = resolved;
+  const specs = useMemo2(() => normalizeSeries(seriesProp, y, yLabel), [seriesProp, y, yLabel]);
+  const table = useMemo2(() => tabulate(data, x, specs), [data, x, specs]);
+  const fmt = useMemo2(
+    () => ({ value: valueFormatter(format, locale, labels.noValue), axis: valueFormatter(format, locale, labels.noValue, true), category: categoryFormatter(xFormat, locale), share: shareFormatter(locale) }),
+    [format, xFormat, locale, labels.noValue]
+  );
+  const isEmpty = table.series.length === 0 || table.series.every((s) => s.values.every((v) => v == null));
+  const summary = isEmpty ? labels.empty : describeSeries(table, { kind: mode.kind, labels, value: fmt.value, category: fmt.category, share: fmt.share, thresholds });
+  const points = table.categories.map((c, i) => `${fmt.category(c)}: ${table.series.map((s) => `${s.label} ${fmt.value(s.values[i])}`).join(", ")}`);
+  const [active, setActive] = useState2(null);
+  const colors = table.series.map((s) => color(s.color, s.slot));
+  const count = table.categories.length;
+  const stacked = Boolean(mode.stacked);
+  return /* @__PURE__ */ jsx2(
+    NativeFrame,
+    {
+      frame: props,
+      defaultHeight: 220,
+      resolved,
+      summary,
+      isEmpty,
+      points,
+      active,
+      onActive: setActive,
+      legend: /* @__PURE__ */ jsx2(NativeLegend, { theme, items: table.series.map((s, i) => ({ label: s.label, color: colors[i] })) }),
+      indexAt: (px, width) => {
+        if (!count) return null;
+        const left = 44;
+        return Math.max(0, Math.min(count - 1, mode.kind === "bar" ? Math.floor((px - left) / (width - left - 8) * count) : Math.round((px - left) / (width - left - 8) * (count - 1))));
+      },
+      children: (width, height) => {
+        let [lo, hi] = extent(table.series, stacked);
+        for (const t of thresholds) {
+          lo = Math.min(lo, t.value);
+          hi = Math.max(hi, t.value);
+        }
+        lo = Math.min(0, lo);
+        hi = Math.max(0, hi);
+        const nice = niceDomain(lo, hi, 4);
+        const ticks = nice.ticks.map((t) => fmt.axis(t));
+        const x0 = Math.max(...ticks.map(textWidth)) + 8;
+        const x1 = width - 8;
+        const y0 = 8;
+        const y1 = height - 22;
+        const value = linearScale(nice.domain, [y1, y0], nice.ticks);
+        const band = bandScale(count, [x0, x1], 0.3);
+        const at = mode.kind === "bar" ? (i) => band(i) + band.bandwidth / 2 : pointScale(count, [x0, x1]);
+        const stacks = stacked ? stack(table.series) : null;
+        const widest = Math.max(...table.categories.map((c) => textWidth(fmt.category(c))));
+        const labelsAt = thinLabels(count, Math.max(2, Math.floor((x1 - x0) / (widest + 16))));
+        const groups = stacked ? 1 : table.series.length;
+        const thickness = Math.min(20, Math.max(2, (band.bandwidth - (groups - 1) * 2) / groups));
+        return /* @__PURE__ */ jsxs2(Svg, { width, height, children: [
+          nice.ticks.map((t, i) => /* @__PURE__ */ jsxs2(G, { children: [
+            /* @__PURE__ */ jsx2(Line, { x1: x0, x2: x1, y1: value(t), y2: value(t), stroke: t === 0 ? theme.borderDefault : theme.borderSubtle, strokeWidth: 1 }),
+            /* @__PURE__ */ jsx2(SvgText, { x: x0 - 6, y: value(t) + 4, fontSize: 11, fill: theme.textSecondary, textAnchor: "end", children: ticks[i] })
+          ] }, t)),
+          labelsAt.map((i) => /* @__PURE__ */ jsx2(SvgText, { x: at(i), y: y1 + 16, fontSize: 11, fill: theme.textSecondary, textAnchor: mode.kind !== "bar" && i === 0 ? "start" : mode.kind !== "bar" && i === count - 1 ? "end" : "middle", children: fmt.category(table.categories[i]) }, i)),
+          active !== null && /* @__PURE__ */ jsx2(Line, { x1: at(active), x2: at(active), y1: y0, y2: y1, stroke: theme.borderDefault, strokeWidth: 1 }),
+          table.series.map((s, k) => {
+            if (mode.kind === "bar") {
+              return s.values.map((v, i) => {
+                const seg = stacks?.[k]?.[i];
+                const from = seg ? seg.base : 0;
+                const to = seg ? seg.top : v ?? 0;
+                if (from === to) return null;
+                const isTop = !stacked || k === table.series.length - 1;
+                const top = Math.min(value(from), value(to));
+                const size = Math.abs(value(to) - value(from)) - (isTop ? 0 : 2);
+                const left = band(i) + (band.bandwidth - (thickness * groups + (groups - 1) * 2)) / 2 + (stacked ? 0 : k * (thickness + 2));
+                return /* @__PURE__ */ jsx2(Path, { d: barPath(left, isTop ? top : top + 2, thickness, Math.max(0, size), isTop ? 4 : 0, false, to < from), fill: colors[k], opacity: active !== null && active !== i ? 0.4 : 1 }, `${k}-${i}`);
+              });
+            }
+            const pts = s.values.map((v, i) => v == null ? null : [at(i), value(stacks ? stacks[k][i].top : v)]);
+            return segments(pts).map((seg) => /* @__PURE__ */ jsxs2(G, { children: [
+              mode.kind === "area" && /* @__PURE__ */ jsx2(Path, { d: areaPath(seg, stacks && k > 0 ? seg.map(([px]) => [px, value(stacks[k][Math.round((px - x0) / (x1 - x0) * (count - 1))].base)]) : value(0), mode.curve), fill: colors[k], opacity: stacked ? 0.5 : 0.14 }),
+              /* @__PURE__ */ jsx2(Path, { d: linePath(seg, mode.curve), stroke: colors[k], strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: s.dashed ? "6 4" : void 0 })
+            ] }, `${k}-${seg[0][0]}`));
+          }),
+          thresholds.map((t, i) => /* @__PURE__ */ jsxs2(G, { children: [
+            /* @__PURE__ */ jsx2(Line, { x1: x0, x2: x1, y1: value(t.value), y2: value(t.value), stroke: color(t.tone ?? "neutral", 1), strokeWidth: 1.5, strokeDasharray: "6 4" }),
+            /* @__PURE__ */ jsx2(SvgText, { x: x1, y: value(t.value) - 6, fontSize: 11, fontWeight: "600", fill: theme.textPrimary, textAnchor: "end", children: t.label })
+          ] }, `t-${i}`)),
+          active !== null && mode.kind !== "bar" && table.series.map((s, k) => {
+            const v = s.values[active];
+            if (v == null) return null;
+            return /* @__PURE__ */ jsx2(Circle, { cx: at(active), cy: value(stacks ? stacks[k][active].top : v), r: 5, fill: colors[k], stroke: theme.surface1, strokeWidth: 2 }, k);
+          })
+        ] });
+      }
+    }
+  );
+}
+function LineChart({ curve = "monotone", ...props }) {
+  return /* @__PURE__ */ jsx2(NativeCartesian, { props, mode: { kind: "line", curve } });
+}
+function AreaChart({ curve = "monotone", stacked, ...props }) {
+  return /* @__PURE__ */ jsx2(NativeCartesian, { props, mode: { kind: "area", curve, stacked } });
+}
+function BarChart({ stacked, ...props }) {
+  return /* @__PURE__ */ jsx2(NativeCartesian, { props, mode: { kind: "bar", stacked } });
+}
+
+// src/native/round.tsx
+import { useMemo as useMemo3, useState as useState3 } from "react";
+import Svg2, { Circle as Circle2, Line as Line2, Path as Path2, Text as SvgText2 } from "react-native-svg";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PieChart(props) {
+  const { data, label, value, format, donut, centerLabel, maxSlices = 6, otherLabel = "Other" } = props;
+  const resolved = useNativeSettings(props);
+  const { locale, labels, theme, color } = resolved;
+  const fmt = useMemo3(() => ({ value: valueFormatter(format, locale, labels.noValue), share: shareFormatter(locale) }), [format, locale, labels.noValue]);
+  const slices = useMemo3(() => {
+    const rows = data.map((d, i) => ({ label: read(label, d, i), value: Math.max(0, Number(read(value, d, i)) || 0) })).sort((a, b) => b.value - a.value);
+    const kept = rows.length > maxSlices ? rows.slice(0, maxSlices - 1) : rows;
+    const out = kept.map((r2, i) => ({ ...r2, color: color(void 0, i + 1) }));
+    if (rows.length > maxSlices) out.push({ label: otherLabel, value: rows.slice(maxSlices - 1).reduce((s, r2) => s + r2.value, 0), color: theme.textMuted });
+    return out;
+  }, [data, label, value, maxSlices, otherLabel, color, theme.textMuted]);
+  const total = slices.reduce((s, x) => s + x.value, 0);
+  const [active, setActive] = useState3(null);
+  const isEmpty = total <= 0;
+  const summary = isEmpty ? labels.empty : describeParts(donut ? "donut" : "pie", slices, { labels, value: fmt.value, share: fmt.share });
+  return /* @__PURE__ */ jsx3(
+    NativeFrame,
+    {
+      frame: props,
+      defaultHeight: 200,
+      resolved,
+      summary,
+      isEmpty,
+      points: slices.map((s) => `${s.label}: ${fmt.value(s.value)} (${fmt.share(total ? s.value / total : 0)})`),
+      active,
+      onActive: setActive,
+      legend: /* @__PURE__ */ jsx3(NativeLegend, { theme, items: slices.map((s) => ({ label: `${s.label} \xB7 ${fmt.share(total ? s.value / total : 0)}`, color: s.color })) }),
+      children: (width, height) => {
+        const radius = Math.max(10, Math.min(width, height) / 2 - 6);
+        const inner = donut ? radius * 0.64 : 0;
+        let angle = 0;
+        return /* @__PURE__ */ jsxs3(Svg2, { width, height, children: [
+          slices.map((s, i) => {
+            const start = angle;
+            angle += total ? s.value / total * Math.PI * 2 : 0;
+            return /* @__PURE__ */ jsx3(Path2, { d: arcPath(width / 2, height / 2, inner, radius, start, angle), fill: s.color, stroke: theme.surface1, strokeWidth: slices.length > 1 ? 2 : 0, opacity: active !== null && active !== i ? 0.4 : 1 }, s.label);
+          }),
+          donut && /* @__PURE__ */ jsx3(SvgText2, { x: width / 2, y: height / 2 + (centerLabel ? 0 : 7), fontSize: Math.max(14, Math.min(24, inner / 3)), fontWeight: "600", fill: theme.textPrimary, textAnchor: "middle", children: fmt.value(total) }),
+          donut && centerLabel ? /* @__PURE__ */ jsx3(SvgText2, { x: width / 2, y: height / 2 + 18, fontSize: 11, fill: theme.textSecondary, textAnchor: "middle", children: centerLabel }) : null
+        ] });
+      }
+    }
+  );
+}
+function DonutChart(props) {
+  return /* @__PURE__ */ jsx3(PieChart, { ...props, donut: true });
+}
+var START = -120 * Math.PI / 180;
+var END = 120 * Math.PI / 180;
+function Gauge(props) {
+  const { value, min = 0, max = 100, format, caption, target, zones = [], tone = "accent" } = props;
+  const resolved = useNativeSettings(props);
+  const { locale, labels, theme, color } = resolved;
+  const fmt = valueFormatter(format, locale, labels.noValue);
+  const clamped = Math.min(max, Math.max(min, value));
+  const zone = zones.find((z) => clamped <= z.to) ?? zones[zones.length - 1];
+  const at = (v) => START + (Math.min(max, Math.max(min, v)) - min) / (max - min || 1) * (END - START);
+  const text = fmt(value);
+  return /* @__PURE__ */ jsx3(
+    NativeFrame,
+    {
+      frame: props,
+      defaultHeight: 170,
+      resolved,
+      summary: `${labels.kinds.gauge}: ${text} / ${fmt(max)}${zone?.label ? `, ${zone.label}` : ""}.`,
+      isEmpty: false,
+      points: [],
+      active: null,
+      onActive: () => {
+      },
+      children: (width, height) => {
+        const radius = Math.max(20, Math.min(width / 2 - 12, (height - 16) / 1.58));
+        const cx = width / 2;
+        const cy = 8 + radius;
+        const stroke = Math.max(8, radius * 0.16);
+        const [tx0, ty0] = target ? polar(cx, cy, radius - stroke, at(target.value)) : [0, 0];
+        const [tx1, ty1] = target ? polar(cx, cy, radius + stroke, at(target.value)) : [0, 0];
+        return /* @__PURE__ */ jsxs3(Svg2, { width, height, children: [
+          /* @__PURE__ */ jsx3(Path2, { d: strokeArcPath(cx, cy, radius, START, END), stroke: theme.surface3, strokeWidth: stroke, strokeLinecap: "round", fill: "none" }),
+          clamped > min && /* @__PURE__ */ jsx3(Path2, { d: strokeArcPath(cx, cy, radius, START, at(clamped)), stroke: color(zone?.tone ?? tone, 1), strokeWidth: stroke, strokeLinecap: "round", fill: "none" }),
+          target && /* @__PURE__ */ jsx3(Line2, { x1: tx0, y1: ty0, x2: tx1, y2: ty1, stroke: theme.textPrimary, strokeWidth: 2, strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx3(SvgText2, { x: cx, y: cy + 8, fontSize: Math.max(12, Math.min(30, radius / 2.6, radius * 1.45 / (text.length * 0.58))), fontWeight: "600", fill: theme.textPrimary, textAnchor: "middle", children: text }),
+          caption ? /* @__PURE__ */ jsx3(SvgText2, { x: cx, y: cy + Math.max(26, radius / 2.4), fontSize: 11, fill: theme.textSecondary, textAnchor: "middle", children: caption }) : null
+        ] });
+      }
+    }
+  );
+}
+function Sparkline(props) {
+  const { data, categories, variant = "line", color: own, trendTone, format, width: fixed, height = 32 } = props;
+  const resolved = useNativeSettings(props);
+  const { locale, labels, color } = resolved;
+  const fmt = useMemo3(() => ({ value: valueFormatter(format, locale, labels.noValue), category: categoryFormatter(void 0, locale), share: shareFormatter(locale) }), [format, locale, labels.noValue]);
+  const values = data.filter((v) => v != null);
+  const table = { categories: categories ?? data.map((_, i) => i + 1), series: [{ id: "v", label: props.title, values: data, slot: 1 }] };
+  const isEmpty = values.length === 0;
+  const up = (values[values.length - 1] ?? 0) >= (values[0] ?? 0);
+  const stroke = color(own ?? (trendTone ? (trendTone === "inverse" ? !up : up) ? "success" : "danger" : void 0), 1);
+  return /* @__PURE__ */ jsx3(
+    NativeFrame,
+    {
+      frame: { ...props, hideTitle: true, height, style: { ...fixed ? { width: fixed } : {}, ...props.style } },
+      defaultHeight: 32,
+      resolved,
+      summary: isEmpty ? labels.empty : describeSeries(table, { kind: "sparkline", labels, value: fmt.value, category: fmt.category, share: fmt.share }),
+      isEmpty,
+      points: [],
+      active: null,
+      onActive: () => {
+      },
+      children: (width, h) => {
+        const lo = variant === "bar" ? Math.min(0, ...values) : Math.min(...values);
+        const hi = variant === "bar" ? Math.max(0, ...values) : Math.max(...values);
+        const yOf = (v) => 3 + (1 - (v - lo) / (hi - lo || 1)) * (h - 6);
+        const n = data.length;
+        const xOf = (i) => variant === "bar" ? (i + 0.5) * (width / n) : n > 1 ? 3 + i / (n - 1) * (width - 6) : width / 2;
+        const pts = data.map((v, i) => v == null ? null : [xOf(i), yOf(v)]);
+        const last = [...pts].reverse().find(Boolean);
+        return /* @__PURE__ */ jsxs3(Svg2, { width, height: h, children: [
+          variant === "bar" ? data.map((v, i) => v == null || v === 0 ? null : /* @__PURE__ */ jsx3(Path2, { d: barPath(xOf(i) - Math.min(4, width / n / 3), Math.min(yOf(v), yOf(0)), Math.min(8, width / n * 0.7), Math.abs(yOf(v) - yOf(0)), 1.5), fill: stroke }, i)) : segments(pts).map((seg) => [
+            variant === "area" ? /* @__PURE__ */ jsx3(Path2, { d: areaPath(seg, h), fill: stroke, opacity: 0.14 }, `a${seg[0][0]}`) : null,
+            /* @__PURE__ */ jsx3(Path2, { d: linePath(seg), stroke, strokeWidth: 1.75, fill: "none", strokeLinecap: "round" }, `l${seg[0][0]}`)
+          ]),
+          variant !== "bar" && last ? /* @__PURE__ */ jsx3(Circle2, { cx: last[0], cy: last[1], r: 2.75, fill: stroke }) : null
+        ] });
+      }
+    }
+  );
+}
+export {
+  AreaChart,
+  BarChart,
+  ChartsProvider,
+  DEFAULT_LABELS,
+  DonutChart,
+  Gauge,
+  LineChart,
+  PieChart,
+  Sparkline
+};
+//# sourceMappingURL=native.js.map