@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/chunk-6QFJKHSX.js

@@ -0,0 +1,743 @@
+import {
+  createRecipe
+} from "./chunk-DKVXTMIJ.js";
+import {
+  Slot
+} from "./chunk-TTZOIXKE.js";
+import {
+  hexToRgb,
+  isHex,
+  oklabToRgb,
+  rgbToHex,
+  rgbToOklab,
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/chart/chart-text.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+
+// src/components/chart/chart.context.ts
+import { createContext, useContext } from "react";
+var ChartContext = createContext(null);
+ChartContext.displayName = "XAUI.Chart.Context";
+var ChartProvider = ChartContext.Provider;
+function useChart() {
+  const value = useContext(ChartContext);
+  if (value === null) {
+    throw new Error(
+      "XAUI: useChart must be called inside <Chart>. It reads the styles and the palette that frame resolved, so it can only be called under one."
+    );
+  }
+  return value;
+}
+function useOptionalChart() {
+  return useContext(ChartContext);
+}
+
+// src/components/chart/chart-text.tsx
+import { jsx } from "react/jsx-runtime";
+function textSlot(key, name, role) {
+  const Component = forwardRef(function ChartText({ children, accessibilityRole, style, ...props }, ref) {
+    const context = useChart();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref,
+        accessibilityRole: accessibilityRole ?? role,
+        style: [context[key], styleProps, style],
+        ...rest,
+        children
+      }
+    );
+  });
+  Component.displayName = name;
+  return Component;
+}
+var ChartTitle = textSlot("titleStyle", "XAUI.Chart.Title", "header");
+var ChartDescription = textSlot(
+  "descriptionStyle",
+  "XAUI.Chart.Description"
+);
+var ChartValue = textSlot("valueStyle", "XAUI.Chart.Value");
+
+// src/components/chart/chart-footer.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChartFooter = forwardRef2(function ChartFooter2({ children, style, ...props }, ref) {
+  const { footerStyle } = useChart();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx2(View, { ref, ...rest, style: [footerStyle, styleProps, style], children });
+});
+ChartFooter.displayName = "XAUI.Chart.Footer";
+
+// src/components/chart/chart-header.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChartHeader = forwardRef3(function ChartHeader2({ children, style, ...props }, ref) {
+  const { headerStyle } = useChart();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx3(View2, { ref, ...rest, style: [headerStyle, styleProps, style], children });
+});
+ChartHeader.displayName = "XAUI.Chart.Header";
+
+// src/components/chart/chart-heading.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChartHeading = forwardRef4(
+  function ChartHeading2({ children, style, ...props }, ref) {
+    const { headingStyle } = useChart();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx4(View3, { ref, ...rest, style: [headingStyle, styleProps, style], children });
+  }
+);
+ChartHeading.displayName = "XAUI.Chart.Heading";
+
+// src/components/chart/chart-legend.tsx
+import { Children, createContext as createContext2, forwardRef as forwardRef5, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { Text as Text2, View as View4 } from "react-native";
+
+// src/components/chart/chart.hook.ts
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+
+// src/utils/chart-palette.ts
+var SPAN = 0.34;
+var MIN_LIGHTNESS = 0.34;
+var MAX_LIGHTNESS = 0.84;
+var CHROMA_EPSILON = 5e-3;
+function chartPalette(seed, count) {
+  const size = Math.max(Math.floor(count), 0);
+  if (size === 0) return [];
+  if (!isHex(seed)) return Array.from({ length: size }, () => seed);
+  if (size === 1) return [seed];
+  const [L, a, b] = rgbToOklab(hexToRgb(seed));
+  const half = SPAN / 2;
+  const shift = Math.min(
+    Math.max(0, MIN_LIGHTNESS - (L - half)),
+    // The second `Math.max` is the case where the span is wider than the scale allows;
+    // there the window fills it and the clamp below does the rest.
+    Math.max(0, MAX_LIGHTNESS - MIN_LIGHTNESS - SPAN)
+  );
+  const start = L - half + shift - Math.max(0, L + half + shift - MAX_LIGHTNESS);
+  return Array.from({ length: size }, (_, index) => {
+    const lightness = clamp(start + SPAN * index / (size - 1));
+    return rgbToHex(oklabToRgb(inGamut(lightness, a, b)));
+  });
+}
+function clamp(lightness) {
+  return Math.min(Math.max(lightness, MIN_LIGHTNESS), MAX_LIGHTNESS);
+}
+function inGamut(lightness, a, b) {
+  if (fitsInGamut(lightness, a, b)) return [lightness, a, b];
+  let low = 0;
+  let high = 1;
+  while (high - low > CHROMA_EPSILON) {
+    const mid = (low + high) / 2;
+    if (fitsInGamut(lightness, a * mid, b * mid)) low = mid;
+    else high = mid;
+  }
+  return [lightness, a * low, b * low];
+}
+function fitsInGamut(L, a, b) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const channels = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  return channels.every((channel) => channel >= -1e-4 && channel <= 1 + 1e-4);
+}
+
+// src/components/chart/chart.recipe.ts
+var SLOTS = [
+  "root",
+  "ink",
+  "plot",
+  "label",
+  "grid",
+  "axis",
+  "header",
+  "heading",
+  "footer",
+  "title",
+  "description",
+  "value",
+  "legend",
+  "legendItem",
+  "legendDot",
+  "legendLabel"
+];
+var VARIANT_TOKENS = {
+  primary: { bgSelected: "accent" },
+  secondary: { bgSelected: "foreground" },
+  success: { bgSelected: "success" },
+  warning: { bgSelected: "warning" },
+  danger: { bgSelected: "danger" }
+};
+var SIZES = {
+  sm: { height: 140, label: "xs", title: "sm", value: "xl" },
+  md: { height: 200, label: "xs", title: "md", value: "2xl" },
+  lg: { height: 280, label: "sm", title: "lg", value: "3xl" }
+};
+function sizeAxis(step) {
+  const { height, label, title, value } = step;
+  return (theme) => ({
+    plot: { height },
+    label: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    },
+    title: {
+      fontSize: theme.fontSizes[title],
+      lineHeight: theme.lineHeights[title]
+    },
+    description: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    },
+    value: {
+      fontSize: theme.fontSizes[value],
+      lineHeight: theme.lineHeights[value]
+    },
+    legendLabel: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    }
+  });
+}
+var chartRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    // The card the figure is read against. It is the `Chart` container's, not the plot's —
+    // a chart used on its own draws no ground, and this is what a caller reaches for when
+    // they want the whole thing: a title, the figure, a legend under it.
+    root: {
+      width: "100%",
+      backgroundColor: theme.colors.surface,
+      borderRadius: theme.radius["2xl"],
+      padding: theme.spacing(4),
+      gap: theme.spacing(3)
+    },
+    plot: { width: "100%" },
+    header: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      gap: theme.spacing(3)
+    },
+    /** The title and its description, as one block on the leading edge. */
+    heading: { flexShrink: 1, gap: theme.spacing(0.5) },
+    footer: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: theme.spacing(3),
+      flexWrap: "wrap"
+    },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      color: theme.colors.foreground
+    },
+    description: { fontFamily: theme.fontFamilies.body, color: theme.colors.muted },
+    value: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.bold,
+      color: theme.colors.foreground,
+      // A number that grows a digit must not shift the words beside it.
+      fontVariant: ["tabular-nums"]
+    },
+    legend: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing(4),
+      flexWrap: "wrap"
+    },
+    legendItem: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing(1.5)
+    },
+    legendDot: {
+      width: theme.spacing(2),
+      height: theme.spacing(2),
+      borderRadius: theme.radius.full
+    },
+    legendLabel: { fontFamily: theme.fontFamilies.body, color: theme.colors.muted },
+    label: { fontFamily: theme.fontFamilies.body, color: theme.colors.muted },
+    // The rules behind the series are the **separator**, not the border: a grid is a
+    // reading aid rather than an edge, and at the border's weight it competes with the
+    // line it exists to help you read.
+    grid: { backgroundColor: theme.colors.separator },
+    axis: { backgroundColor: theme.colors.border }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The ink rides on `root` — a slot whose `color` is never a style anyone renders, because
+   * an SVG path is painted by a **prop**. The root reads it back off the resolved styles,
+   * exactly as the `ProgressCircle` reads its two strokes off two slots it never draws.
+   */
+  paint: (_theme, colors) => ({ ink: { color: colors.bgSelected } }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    }
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/chart/chart.hook.ts
+function useChartInk({
+  variant,
+  size,
+  color,
+  isDisabled,
+  count
+}) {
+  const theme = useXAUITheme();
+  const selection = { variant, size };
+  const styles = chartRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const tint = color ? chartRecipe.tint({ theme, color, selection }) : void 0;
+  return useMemo(() => {
+    const ink = StyleSheet.flatten([styles.ink, tint?.ink]);
+    const label = StyleSheet.flatten([styles.label]);
+    const grid = StyleSheet.flatten([styles.grid]);
+    const axis = StyleSheet.flatten([styles.axis]);
+    const seed = typeof ink.color === "string" ? ink.color : theme.colors.accent;
+    return {
+      styles,
+      colors: chartPalette(seed, count),
+      ink: {
+        labelColor: typeof label.color === "string" ? label.color : theme.colors.muted,
+        labelSize: label.fontSize ?? theme.fontSizes.xs,
+        gridColor: typeof grid.backgroundColor === "string" ? grid.backgroundColor : theme.colors.separator,
+        axisColor: typeof axis.backgroundColor === "string" ? axis.backgroundColor : theme.colors.border,
+        labelStyle: styles.label
+      }
+    };
+  }, [styles, tint, theme, count]);
+}
+
+// src/components/chart/chart-legend.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var ChartLegendContext = createContext2(null);
+ChartLegendContext.displayName = "XAUI.Chart.Legend.Context";
+function useChartLegend() {
+  const value = useContext2(ChartLegendContext);
+  if (value === null) {
+    throw new Error(
+      "XAUI: useChartLegend must be called inside <Chart.Legend>. It reads the palette that legend walked, so it can only be called under one."
+    );
+  }
+  return value;
+}
+var ChartLegend = forwardRef5(function ChartLegend2({ labels, children, variant, size, color, count, style, ...props }, ref) {
+  const frame = useOptionalChart();
+  const [styleProps, rest] = useStyleProps(props);
+  const series = Math.max(1, count ?? labels?.length ?? Children.count(children));
+  const own = useChartInk({
+    variant: variant ?? frame?.variant,
+    size: size ?? frame?.size ?? "md",
+    color: color ?? frame?.color,
+    isDisabled: frame?.isDisabled ?? false,
+    count: series
+  });
+  const context = useMemo2(
+    () => frame === null ? {
+      itemStyle: own.styles.legendItem,
+      dotStyle: own.styles.legendDot,
+      labelStyle: own.styles.legendLabel,
+      colors: own.colors
+    } : {
+      itemStyle: frame.legendItemStyle,
+      dotStyle: frame.legendDotStyle,
+      labelStyle: frame.legendLabelStyle,
+      // The frame's, not this legend's: the palette has to be the one the figure
+      // beside it actually drew with, and only the frame knows how many series that was.
+      colors: frame.colors
+    },
+    [frame, own]
+  );
+  return /* @__PURE__ */ jsx5(ChartLegendContext.Provider, { value: context, children: /* @__PURE__ */ jsx5(
+    View4,
+    {
+      ref,
+      ...rest,
+      style: [frame?.legendStyle ?? own.styles.legend, styleProps, style],
+      children: children ?? labels?.map((label, index) => /* @__PURE__ */ jsx5(ChartLegendItem, { index, children: label }, label))
+    }
+  ) });
+});
+ChartLegend.displayName = "XAUI.Chart.Legend";
+var ChartLegendItem = forwardRef5(
+  function ChartLegendItem2({ index = 0, color, children, style, ...props }, ref) {
+    const { itemStyle, dotStyle, labelStyle, colors } = useChartLegend();
+    const [styleProps, rest] = useStyleProps(props);
+    const dot = color ?? colors[index] ?? colors[0];
+    return /* @__PURE__ */ jsxs(View4, { ref, ...rest, style: [itemStyle, styleProps, style], children: [
+      /* @__PURE__ */ jsx5(View4, { style: [dotStyle, { backgroundColor: dot }] }),
+      typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx5(Text2, { style: labelStyle, children }) : children
+    ] });
+  }
+);
+ChartLegendItem.displayName = "XAUI.Chart.LegendItem";
+
+// src/components/chart/chart.tsx
+import { forwardRef as forwardRef6, useMemo as useMemo3 } from "react";
+import { View as View5 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ChartRoot = forwardRef6(function Chart({
+  children,
+  variant,
+  size = "md",
+  color,
+  seriesCount = 0,
+  isDisabled = false,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const { styles, colors } = useChartInk({
+    variant,
+    size,
+    color,
+    isDisabled,
+    // The frame cannot count the figure's series — it has not rendered yet, and the keys
+    // are the figure's props. `seriesCount` is what a legend needs and nothing else does,
+    // which is why it is on the frame rather than inferred.
+    count: Math.max(seriesCount, 1)
+  });
+  const context = useMemo3(
+    () => ({
+      headerStyle: styles.header,
+      headingStyle: styles.heading,
+      footerStyle: styles.footer,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      valueStyle: styles.value,
+      legendStyle: styles.legend,
+      legendItemStyle: styles.legendItem,
+      legendDotStyle: styles.legendDot,
+      legendLabelStyle: styles.legendLabel,
+      colors,
+      variant,
+      size,
+      color,
+      isDisabled
+    }),
+    [styles, colors, variant, size, color, isDisabled]
+  );
+  const rootStyle = [styles.root, styleProps, style];
+  return /* @__PURE__ */ jsx6(ChartProvider, { value: context, children: asChild ? /* @__PURE__ */ jsx6(Slot, { ref, ...rest, style: rootStyle, children }) : /* @__PURE__ */ jsx6(View5, { ref, ...rest, style: rootStyle, children }) });
+});
+ChartRoot.displayName = "XAUI.Chart.Root";
+
+// src/components/chart/chart-plot.tsx
+import { forwardRef as forwardRef7, useMemo as useMemo4, useState } from "react";
+import { Text as Text3, View as View6 } from "react-native";
+import { Line, Svg } from "react-native-svg";
+
+// src/utils/chart-scale.ts
+var NICE_STEPS = [1, 2, 2.5, 5, 10];
+function linearScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0;
+  if (span === 0 || !Number.isFinite(span)) return () => (r0 + r1) / 2;
+  return (value) => r0 + (value - d0) / span * (r1 - r0);
+}
+function niceScale(min, max, count = 4) {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    return { domain: [0, 1], ticks: [0, 1] };
+  }
+  const target = Math.max(Math.floor(count), 1);
+  const low = Math.min(min, max);
+  const high = Math.max(min, max);
+  if (low === high) {
+    const step2 = niceStep(Math.abs(low) || 1, target);
+    const places2 = decimalsOf(step2);
+    const at = (value) => Number(value.toFixed(places2));
+    return {
+      domain: [low - step2, low + step2],
+      ticks: [at(low - step2), at(low), at(low + step2)]
+    };
+  }
+  const step = niceStep(high - low, target);
+  const start = Math.floor(low / step) * step;
+  const end = Math.ceil(high / step) * step;
+  const ticks = [];
+  const steps = Math.round((end - start) / step);
+  const places = decimalsOf(step);
+  for (let index = 0; index <= steps; index += 1) {
+    ticks.push(Number((start + step * index).toFixed(places)));
+  }
+  return { domain: [start, end], ticks };
+}
+function niceStep(span, count) {
+  const rough = span / count;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const normalised = rough / magnitude;
+  const step = NICE_STEPS.find((candidate) => candidate >= normalised) ?? 10;
+  return step * magnitude;
+}
+function decimalsOf(step) {
+  for (let places = 0; places <= 20; places += 1) {
+    if (Number(step.toFixed(places)) === step) return places;
+  }
+  return 20;
+}
+function bandScale(count, range, padding = 0) {
+  const [r0, r1] = range;
+  const size = Math.max(Math.floor(count), 0);
+  if (size === 0) return { center: () => r0, width: 0, step: 0 };
+  const step = (r1 - r0) / size;
+  const gap = Math.min(Math.max(padding, 0), 0.95);
+  return {
+    // The middle of the slot, not its edge: a bar is centred on its label and a point sits
+    // over it, and an edge-aligned scale puts the first one half off the plot.
+    center: (index) => r0 + step * (index + 0.5),
+    width: step * (1 - gap),
+    step
+  };
+}
+function pointScale(count, range) {
+  const [r0, r1] = range;
+  const size = Math.max(Math.floor(count), 0);
+  if (size === 0) return { center: () => r0, width: 0, step: 0 };
+  if (size === 1) {
+    const middle = (r0 + r1) / 2;
+    return { center: () => middle, width: r1 - r0, step: r1 - r0 };
+  }
+  const step = (r1 - r0) / (size - 1);
+  return { center: (index) => r0 + step * index, width: step, step };
+}
+function extent(values) {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const value of values) {
+    if (!Number.isFinite(value)) continue;
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  if (min > max) return [0, 0];
+  return [min, max];
+}
+
+// src/components/chart/chart-plot.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var Y_AXIS_WIDTH = 40;
+var X_AXIS_HEIGHT = 20;
+var TOP_PADDING = 8;
+var ChartPlotRoot = forwardRef7(function ChartPlot({
+  data,
+  xKey,
+  yKeys,
+  variant,
+  size,
+  color,
+  hasGrid = true,
+  hasXAxis = true,
+  hasYAxis = true,
+  tickCount = 4,
+  xLabelCount,
+  formatX,
+  formatY,
+  hasZeroBaseline = true,
+  spacing = "point",
+  bandPadding = 0,
+  isDisabled = false,
+  children,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const [styleProps, rest] = useStyleProps(props);
+  const frame = useOptionalChart();
+  const { styles, ink, colors } = useChartInk({
+    variant: variant ?? frame?.variant,
+    size: size ?? frame?.size ?? "md",
+    color: color ?? frame?.color,
+    isDisabled: isDisabled || (frame?.isDisabled ?? false),
+    count: yKeys.length
+  });
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const handleLayout = (event) => {
+    onLayout?.(event);
+    setWidth(event.nativeEvent.layout.width);
+    setHeight(event.nativeEvent.layout.height);
+  };
+  const plot = useMemo4(() => {
+    if (width <= 0 || height <= 0) return null;
+    const inset = hasYAxis ? Y_AXIS_WIDTH : 0;
+    const floor = height - (hasXAxis ? X_AXIS_HEIGHT : 0);
+    const frame2 = {
+      x: inset,
+      y: TOP_PADDING,
+      width: width - inset,
+      height: floor - TOP_PADDING
+    };
+    const baseline = frame2.y + frame2.height;
+    const values = yKeys.flatMap(
+      (key) => data.map((row) => Number(row[key])).filter(Number.isFinite)
+    );
+    const [low, high] = extent(values);
+    const { domain, ticks } = niceScale(
+      hasZeroBaseline ? Math.min(0, low) : low,
+      high,
+      tickCount
+    );
+    const scaleY = linearScale(domain, [baseline, frame2.y]);
+    const along = [frame2.x, frame2.x + frame2.width];
+    const band = spacing === "band" ? bandScale(data.length, along, bandPadding) : pointScale(data.length, along);
+    const series = yKeys.map((key, index) => {
+      const rows = data.map((row) => Number(row[key]));
+      return {
+        key,
+        color: colors[index] ?? colors[0],
+        values: rows,
+        points: rows.map((value, rowIndex) => ({
+          x: band.center(rowIndex),
+          y: scaleY(Number.isFinite(value) ? value : domain[0])
+        }))
+      };
+    });
+    return { frame: frame2, series, band, scaleY, domainY: domain, ticks, colors };
+  }, [
+    data,
+    yKeys,
+    colors,
+    width,
+    height,
+    hasXAxis,
+    hasYAxis,
+    hasZeroBaseline,
+    tickCount,
+    spacing,
+    bandPadding
+  ]);
+  const xEvery = useMemo4(() => {
+    if (data.length === 0) return 1;
+    const wanted = xLabelCount ?? Math.max(1, Math.floor(width / 56));
+    return Math.max(1, Math.ceil(data.length / wanted));
+  }, [data.length, width, xLabelCount]);
+  return /* @__PURE__ */ jsx7(
+    View6,
+    {
+      ref,
+      ...rest,
+      onLayout: handleLayout,
+      style: [styles.plot, styleProps, style],
+      children: plot === null ? null : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Svg, { width, height, children: [
+          hasGrid ? plot.ticks.map((tick) => /* @__PURE__ */ jsx7(
+            Line,
+            {
+              x1: plot.frame.x,
+              x2: plot.frame.x + plot.frame.width,
+              y1: plot.scaleY(tick),
+              y2: plot.scaleY(tick),
+              stroke: ink.gridColor,
+              strokeWidth: 1
+            },
+            tick
+          )) : null,
+          children(plot)
+        ] }),
+        hasYAxis ? plot.ticks.map((tick) => /* @__PURE__ */ jsx7(
+          Text3,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.label,
+              {
+                position: "absolute",
+                // R13 — `start`, so a right-to-left layout puts the axis on the
+                // other side without a second branch here.
+                start: 0,
+                width: Y_AXIS_WIDTH - 6,
+                textAlign: "right",
+                // Half the line's height above the rule, so the number is centred
+                // on the rule rather than hanging from it.
+                top: plot.scaleY(tick) - ink.labelSize * 0.7
+              }
+            ],
+            children: formatY ? formatY(tick) : String(tick)
+          },
+          tick
+        )) : null,
+        hasXAxis ? data.map(
+          (row, index) => index % xEvery === 0 ? /* @__PURE__ */ jsx7(
+            Text3,
+            {
+              numberOfLines: 1,
+              style: [
+                styles.label,
+                {
+                  position: "absolute",
+                  start: plot.band.center(index) - plot.band.step / 2,
+                  width: plot.band.step,
+                  textAlign: "center",
+                  top: plot.frame.y + plot.frame.height + 4
+                }
+              ],
+              children: formatX ? formatX(row[xKey], index) : String(row[xKey] ?? "")
+            },
+            index
+          ) : null
+        ) : null
+      ] })
+    }
+  );
+});
+
+// src/components/chart/index.ts
+var Chart2 = Object.assign(ChartRoot, {
+  Header: ChartHeader,
+  Heading: ChartHeading,
+  Title: ChartTitle,
+  Description: ChartDescription,
+  Value: ChartValue,
+  Legend: ChartLegend,
+  LegendItem: ChartLegendItem,
+  Footer: ChartFooter
+});
+
+export {
+  useChart,
+  useOptionalChart,
+  ChartTitle,
+  ChartDescription,
+  ChartValue,
+  ChartFooter,
+  ChartHeader,
+  ChartHeading,
+  chartRecipe,
+  useChartInk,
+  useChartLegend,
+  ChartLegend,
+  ChartLegendItem,
+  ChartRoot,
+  ChartPlotRoot,
+  Chart2 as Chart
+};