@delacour/react-native-ui 0.1.0-alpha.3

package/src/components/chart/index.ts

@@ -0,0 +1,103 @@
+export type { CurveType } from "@delacour/react-native-charts/core";
+export { Chart, type ChartProps } from "./chart";
+export {
+	ChartContext,
+	type ChartContextValue,
+	ChartProvider,
+	type ChartSlots,
+	useChart,
+	useChartContext,
+	useChartSeries,
+	useSeriesColor,
+} from "./chart.context";
+export type {
+	ChartAreaSpec,
+	ChartBarLayout,
+	ChartBarLayoutMode,
+	ChartBarSlot,
+	ChartBarSpec,
+	ChartCandleColors,
+	ChartCandlestickKeys,
+	ChartConfig,
+	ChartDatum,
+	ChartResolvedSeries,
+	ChartSeriesConfig,
+	ChartTooltipInput,
+	ChartTooltipRow,
+} from "./chart.types";
+export {
+	AREA_FILL_OPACITY,
+	AREA_STACKED_FILL_OPACITY,
+	type AreaFill,
+	type AreaFillInput,
+	applyChartColors,
+	BAR_RADIUS_MULTIPLIER,
+	BAR_RADIUS_STEP,
+	CANDLE_SENTIMENT_TOKENS,
+	CANDLE_Y_PADDING,
+	CATEGORY_TICK_CAP,
+	CHART_CURVES,
+	CHART_MAX_TOKEN_SERIES,
+	CHART_SERIES_TOKENS,
+	CHART_SIZES,
+	type ChartColorPartition,
+	type ChartCurve,
+	type ChartSeriesToken,
+	type ChartSize,
+	type ChartTooltipCandle,
+	type ChartVariantProps,
+	chartAxisFontSize,
+	chartSeriesToken,
+	chartTickCount,
+	chartTooltipOffset,
+	chartVariants,
+	type DomainDefaults,
+	type DomainDefaultsInput,
+	EDGE_X_PADDING,
+	PIE_DEFAULT_INNER_RADIUS,
+	type PieLabelFormat,
+	type PieLabelSlice,
+	type PieResolvedSeries,
+	partitionChartColors,
+	pieInnerRadiusSpec,
+	pieLabelText,
+	pieSlicePercent,
+	resolveAreaFill,
+	resolveBarLayout,
+	resolveBarRadius,
+	resolveCategoryTickCount,
+	resolveChartKeys,
+	resolveChartSeries,
+	resolveDomainDefaults,
+	resolvePieSeries,
+	resolveStackedAreaKeys,
+	resolveTooltipRows,
+	resolveXValueFormat,
+} from "./chart.variants";
+export type { ChartAreaProps } from "./chart-area";
+export type { ChartBarProps } from "./chart-bar";
+export type { ChartCandlestickProps } from "./chart-candlestick";
+export type { ChartGridProps } from "./chart-grid";
+export type { ChartLegendProps } from "./chart-legend";
+export type { ChartLineProps } from "./chart-line";
+export type { ChartScatterProps } from "./chart-scatter";
+export type { ChartTooltipProps } from "./chart-tooltip";
+export type { ChartTooltipDotProps } from "./chart-tooltip-dot";
+export type { ChartTooltipXProps } from "./chart-tooltip-x";
+export type { ChartTooltipYProps } from "./chart-tooltip-y";
+export type { ChartXAxisProps } from "./chart-x-axis";
+export type { ChartYAxisProps } from "./chart-y-axis";
+export { PieChart, type PieChartProps } from "./pie-chart";
+export {
+	PieChartContext,
+	type PieChartContextValue,
+	PieChartProvider,
+	usePieChart,
+	usePieChartContext,
+} from "./pie-chart.context";
+export type { PieChartCenterProps } from "./pie-chart-center";
+export type { PieChartLabelProps } from "./pie-chart-label";
+export type { PieChartSliceProps } from "./pie-chart-slice";
+export type { PieChartTooltipProps } from "./pie-chart-tooltip";
+export { useChartFont } from "./use-chart-font";
+export { useChartPalette } from "./use-chart-palette";

package/src/components/chart/pie-chart-center.tsx

@@ -0,0 +1,40 @@
+import type { ReactElement, ReactNode } from "react";
+import { View } from "react-native";
+import { cn } from "../../lib/cn";
+import { Text } from "../text";
+import { usePieChart } from "./pie-chart.context";
+
+export type PieChartCenterProps = {
+	/** The headline figure — a total, a percentage. On the type scale, in `foreground`. */
+	value?: string;
+	/** A caption under the value, in `muted-foreground`. */
+	label?: string;
+	className?: string;
+	/** Anything else to place in the hole, after the value and the label. */
+	children?: ReactNode;
+};
+
+/**
+ * Content in the hole of a donut.
+ *
+ * A React Native view, not a Skia mark, because what goes in a donut's hole
+ * is a headline number and a caption, and those want the type scale, a colour
+ * token and a className — none of which exist on a canvas. It is centred over
+ * the whole frame, which is where the circle's centre is: the engine centres
+ * the largest circle the canvas holds, and this chart gives it no padding.
+ *
+ * It takes no touches, so a tap through it still lands on a slice.
+ */
+export function PieChartCenter({ value, label, className, children }: PieChartCenterProps): ReactElement {
+	const { slots } = usePieChart();
+
+	return (
+		<View className={cn(slots.pieCenter(), className)} pointerEvents="none">
+			{value === undefined ? null : <Text className={slots.pieCenterValue()}>{value}</Text>}
+			{label === undefined ? null : <Text className={slots.pieCenterLabel()}>{label}</Text>}
+			{children}
+		</View>
+	);
+}
+
+PieChartCenter.displayName = "DelacourUI.PieChart.Center";

package/src/components/chart/pie-chart-label.tsx

@@ -0,0 +1,56 @@
+import { PieLabel } from "@delacour/react-native-charts";
+import type { PieSliceData } from "@delacour/react-native-charts/core";
+import { type ReactElement, useCallback } from "react";
+import { type PieLabelFormat, pieLabelText } from "./chart.variants";
+import { usePieChart } from "./pie-chart.context";
+
+export type PieChartLabelProps = {
+	/** What each label prints. Defaults to the slice's share, as `42%`. */
+	format?: PieLabelFormat;
+	/**
+	 * Overrides the chart's background, which the labels are drawn in.
+	 *
+	 * A literal, or a value already resolved — a Skia mark cannot look a token
+	 * up, for the reason the folder's `AGENTS.md` opens with.
+	 */
+	color?: string;
+	/** Across the annulus: 0 the inner edge, 1 the outer, more than 1 outside. */
+	radiusOffset?: number;
+	/** Slices narrower than this, in degrees, get no label. */
+	minSweep?: number;
+	opacity?: number;
+};
+
+/**
+ * A text label on every slice wide enough to hold one.
+ *
+ * Skia text in the chart's background colour, so it reads on any slice of the
+ * ramp; the axis labels are the precedent for text living in the canvas. A
+ * slice under twelve degrees gets none, because a label wider than its wedge
+ * lands on the neighbours and three overlapping labels are less legible than
+ * none.
+ */
+export function PieChartLabel({
+	format,
+	color,
+	radiusOffset,
+	minSweep = 12,
+	opacity,
+}: PieChartLabelProps): ReactElement | null {
+	const { surfaceColor } = usePieChart();
+	const formatLabel = useCallback((slice: PieSliceData) => pieLabelText(format, slice), [format]);
+	const paint = color ?? surfaceColor;
+	if (paint === undefined) return null;
+
+	return (
+		<PieLabel
+			color={paint}
+			formatLabel={formatLabel}
+			minSweep={minSweep}
+			opacity={opacity}
+			radiusOffset={radiusOffset}
+		/>
+	);
+}
+
+PieChartLabel.displayName = "DelacourUI.PieChart.Label";

package/src/components/chart/pie-chart-slice.tsx

@@ -0,0 +1,45 @@
+import { PieInset, PieSlices } from "@delacour/react-native-charts";
+import { type ReactElement, useMemo } from "react";
+import { usePieChart } from "./pie-chart.context";
+
+export type PieChartSliceProps = {
+	opacity?: number;
+	/**
+	 * A hairline between neighbouring slices, in the chart's background.
+	 *
+	 * On by default: two ramp colours side by side with no gap read as one
+	 * shape with a stripe, and the gap is what makes each wedge its own.
+	 */
+	stroke?: boolean;
+	/** The hairline's width. */
+	strokeWidth?: number;
+	/** Opacity of every slice but the selected one, while one is selected. `1` turns the dim off. */
+	dimUnselected?: number;
+};
+
+/**
+ * Every slice of the pie, one wedge per row, in the series' colours.
+ *
+ * The colours come from the context already resolved, so this is the engine's
+ * `PieSlices` given a list of strings. While a slice is selected — by a tap or
+ * through `selectedIndex` — the others dim, because a selection that changes
+ * nothing on screen looks like a tap that missed.
+ */
+export function PieChartSlice({
+	opacity,
+	stroke = true,
+	strokeWidth = 2,
+	dimUnselected = 0.4,
+}: PieChartSliceProps): ReactElement {
+	const { series, surfaceColor } = usePieChart();
+	const colors = useMemo(() => series.map((entry) => entry.color), [series]);
+
+	return (
+		<>
+			<PieSlices colors={colors} dimUnselected={dimUnselected} opacity={opacity} />
+			{stroke && surfaceColor !== undefined ? <PieInset color={surfaceColor} strokeWidth={strokeWidth} /> : null}
+		</>
+	);
+}
+
+PieChartSlice.displayName = "DelacourUI.PieChart.Slice";

package/src/components/chart/pie-chart-tooltip.tsx

@@ -0,0 +1,85 @@
+import { sliceLabelPosition } from "@delacour/react-native-charts/core";
+import { type ReactElement, useState } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { View } from "react-native";
+import { cn } from "../../lib/cn";
+import { Text } from "../text";
+import { chartTooltipOffset, formatPieValue, pieSlicePercent } from "./chart.variants";
+import { usePieChart } from "./pie-chart.context";
+
+export type PieChartTooltipProps = {
+	className?: string;
+	/** Prints the selected slice's value. Defaults to digits grouped in threes, `1,240`. */
+	formatValue?: (value: number, name: string) => string;
+	/** Prints the selected slice's share. Defaults to a whole-number percentage. */
+	formatPercent?: (percent: number) => string;
+	/** Overrides the measured size used to keep the tooltip inside the frame. */
+	size?: { width: number; height: number };
+};
+
+/** Assumed size before layout, so the first frame is not placed off-screen. */
+const DEFAULT_SIZE = { width: 120, height: 48 };
+
+/**
+ * A readout for the selected slice: its label, its value and its share.
+ *
+ * Selection-driven, not scrub-driven. A pie has no x to scrub along, so the
+ * readout answers a tap rather than following a finger — which is also why it
+ * needs no shared values and no `useAnimatedStyle`: it moves when the
+ * selection changes, a few times a session, not once a frame.
+ *
+ * It sits just outside the slice's outer edge on its bisector, the position a
+ * callout line would point at, and `chartTooltipOffset` keeps it inside the
+ * frame the same way the cartesian tooltip is kept. Hidden while nothing is
+ * selected; a tap outside every slice clears the selection and hides it.
+ */
+export function PieChartTooltip({
+	className,
+	formatValue,
+	formatPercent,
+	size,
+}: PieChartTooltipProps): ReactElement | null {
+	const { series, values, total, slices, slots, frame, selectedIndex } = usePieChart();
+	const [measured, setMeasured] = useState(DEFAULT_SIZE);
+	const box = size ?? measured;
+
+	const onLayout = (event: LayoutChangeEvent): void => {
+		const { width, height } = event.nativeEvent.layout;
+		setMeasured((current) => (current.width === width && current.height === height ? current : { width, height }));
+	};
+
+	if (selectedIndex === null) return null;
+	const entry = series[selectedIndex];
+	const slice = slices[selectedIndex];
+	const value = values[selectedIndex];
+	if (entry === undefined || slice === undefined || value === undefined) return null;
+
+	const anchor = sliceLabelPosition(slice, 1.05);
+	const offset = chartTooltipOffset({
+		x: anchor.x,
+		y: anchor.y,
+		width: box.width,
+		height: box.height,
+		frameWidth: frame.width,
+		frameHeight: frame.height,
+	});
+	const percent = pieSlicePercent(value, total);
+
+	return (
+		<View
+			className={cn(slots.tooltip(), className)}
+			onLayout={onLayout}
+			pointerEvents="none"
+			style={{ transform: [{ translateX: offset.x }, { translateY: offset.y }] }}
+		>
+			<View className={slots.tooltipRow()}>
+				<View className={slots.tooltipSwatch()} style={{ backgroundColor: entry.color }} />
+				<Text className={slots.tooltipName()}>{entry.label}</Text>
+				<Text className={slots.tooltipValue()}>{formatValue?.(value, entry.label) ?? formatPieValue(value)}</Text>
+			</View>
+			<Text className={slots.tooltipHeading()}>{formatPercent?.(percent) ?? `${Math.round(percent)}%`}</Text>
+		</View>
+	);
+}
+
+PieChartTooltip.displayName = "DelacourUI.PieChart.Tooltip";

package/src/components/chart/pie-chart.context.tsx

@@ -0,0 +1,77 @@
+import type { PieSliceData } from "@delacour/react-native-charts/core";
+import { createContext, type ReactNode, useContext } from "react";
+import type { ChartSlots } from "./chart.context";
+import type { ChartResolvedSeries } from "./chart.types";
+import type { ChartSize } from "./chart.variants";
+
+export type PieChartContextValue = {
+	/** One per drawn slice, in data order, colours already resolved to values. */
+	readonly series: readonly ChartResolvedSeries[];
+	/** The slices' values, index-aligned with `series`. */
+	readonly values: readonly number[];
+	readonly total: number;
+	/**
+	 * The slices' geometry, index-aligned with `series`.
+	 *
+	 * Resolved here as well as in the engine, from the same pure functions on
+	 * the same frame, because the tooltip is a React Native view outside the
+	 * canvas and the engine's context does not reach it.
+	 */
+	readonly slices: readonly PieSliceData[];
+	readonly slots: ChartSlots;
+	readonly size: ChartSize;
+	/** The surface under the pie — what the hairline between slices is painted in. */
+	readonly surfaceColor: string | undefined;
+	/** The frame's measured size, for placing an overlay inside it. */
+	readonly frame: { readonly width: number; readonly height: number };
+	readonly nameKey: string;
+	readonly valueKey: string;
+	/** The hole, as a fraction of the radius. `0` is a pie. */
+	readonly innerRadius: number;
+	/** The slice singled out by a tap or by the caller, or `null`. */
+	readonly selectedIndex: number | null;
+	/** Selects a slice by index, or clears the selection with `null`. */
+	readonly select: (index: number | null) => void;
+};
+
+/**
+ * The resolved pie, published twice from one value — once around the React
+ * Native subtree and once inside the canvas — for the reason `ChartContext`
+ * documents: Skia's renderer is its own reconciler and context does not cross
+ * into it.
+ */
+export const PieChartContext = createContext<PieChartContextValue | null>(null);
+
+PieChartContext.displayName = "DelacourUI.PieChartContext";
+
+export function PieChartProvider({
+	value,
+	children,
+}: {
+	readonly value: PieChartContextValue;
+	readonly children: ReactNode;
+}): ReactNode {
+	return <PieChartContext.Provider value={value}>{children}</PieChartContext.Provider>;
+}
+
+PieChartProvider.displayName = "DelacourUI.PieChartProvider";
+
+/**
+ * The pie a part belongs to. Throws outside one, for the reason `useChart`
+ * does: a mark that silently drew nothing would be a blank canvas with no
+ * error to read.
+ */
+export function usePieChart(): PieChartContextValue {
+	const value = useContext(PieChartContext);
+	if (value === null) {
+		throw new Error(
+			"[DelacourUI] a PieChart part was used outside a <PieChart>. Every part reads the chart from context."
+		);
+	}
+	return value;
+}
+
+/** The pie, or `null` outside one. */
+export function usePieChartContext(): PieChartContextValue | null {
+	return useContext(PieChartContext);
+}

package/src/components/chart/pie-chart.tsx

@@ -0,0 +1,247 @@
+import { PolarChart } from "@delacour/react-native-charts";
+import { type PieSliceData, resolvePolarLayout, resolveSlices } from "@delacour/react-native-charts/core";
+import { Children, isValidElement, type ReactElement, type ReactNode, useMemo, useState } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { View } from "react-native";
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import type { ChartConfig, ChartDatum } from "./chart.types";
+import {
+	type ChartSize,
+	chartAxisFontSize,
+	chartVariants,
+	PIE_DEFAULT_INNER_RADIUS,
+	pieInnerRadiusSpec,
+	resolvePieSeries,
+} from "./chart.variants";
+import { ChartLegend } from "./chart-legend";
+import { type PieChartContextValue, PieChartProvider } from "./pie-chart.context";
+import { PieChartCenter } from "./pie-chart-center";
+import { PieChartLabel } from "./pie-chart-label";
+import { PieChartSlice } from "./pie-chart-slice";
+import { PieChartTooltip } from "./pie-chart-tooltip";
+import { useChartFont } from "./use-chart-font";
+import { useChartPalette } from "./use-chart-palette";
+
+export type PieChartProps = {
+	/**
+	 * Labels and colours by row name, for the rows that want one.
+	 *
+	 * Optional, because a pie's categories are its rows and the ramp already
+	 * colours them in order. An entry is keyed by the row's `nameKey` value.
+	 */
+	config?: ChartConfig;
+	data: readonly ChartDatum[];
+	/** The field that names a slice. */
+	nameKey: string;
+	/** The field that sizes a slice. Negative, missing and unreadable values are dropped. */
+	valueKey: string;
+	size?: ChartSize;
+	/** The hole, as a fraction of the radius. `0` is a pie; `0.6` is a donut. */
+	innerRadius?: number;
+	/** Where the first slice begins. Degrees clockwise from 12 o'clock. */
+	startAngle?: number;
+	/** The selected slice's index in the drawn order, or `null`. Controlled when given. */
+	selectedIndex?: number | null;
+	/** Called with a tapped slice's index, or `null` for a tap outside every slice. */
+	onSelect?: (index: number | null) => void;
+	className?: string;
+	/** Named on the frame, so a capture flow or a test can find the plot. */
+	testID?: string;
+	children?: ReactNode;
+};
+
+/** The field names the engine rows are built with. */
+const ENGINE_NAME_KEY = "name";
+const ENGINE_VALUE_KEY = "value";
+
+type EngineRow = { readonly name: string; readonly value: number };
+
+function PieChartRoot({
+	config,
+	data,
+	nameKey,
+	valueKey,
+	size = "md",
+	innerRadius = PIE_DEFAULT_INNER_RADIUS,
+	startAngle = 0,
+	selectedIndex,
+	onSelect,
+	className,
+	testID,
+	children,
+}: PieChartProps): ReactElement {
+	const slots = chartVariants({ size });
+	const [frame, setFrame] = useState({ width: 0, height: 0 });
+
+	const resolved = useMemo(
+		() => resolvePieSeries(data, nameKey, valueKey, config ?? {}),
+		[data, nameKey, valueKey, config]
+	);
+
+	// Every theme lookup happens here, above the canvas — see `Chart`.
+	const series = useChartPalette(resolved.series);
+	const surfaceColor = useThemeColor("background");
+	const font = useChartFont(chartAxisFontSize(size));
+
+	const [selected, select] = useControllableState<number | null>({
+		value: selectedIndex,
+		defaultValue: null,
+		onChange: onSelect,
+	});
+
+	// The engine draws the rows this resolved to, not the caller's data, so a
+	// dropped row is dropped everywhere and the slice indices, the series and
+	// the values all agree.
+	const rows = useMemo<EngineRow[]>(
+		() => series.map((entry, index) => ({ name: entry.label, value: resolved.values[index] ?? 0 })),
+		[series, resolved.values]
+	);
+
+	const innerRadiusSpec = pieInnerRadiusSpec(innerRadius);
+
+	// The same geometry the engine resolves, resolved again here for the parts
+	// that live outside the canvas: the tooltip needs a slice's bisector, and
+	// the engine's context stops at the canvas boundary.
+	const slices = useMemo<PieSliceData[]>(() => {
+		const layout = resolvePolarLayout({ canvas: frame, innerRadius: innerRadiusSpec });
+		return resolveSlices({
+			values: resolved.values,
+			labels: series.map((entry) => entry.label),
+			layout,
+			startAngle,
+		});
+	}, [frame, innerRadiusSpec, resolved.values, series, startAngle]);
+
+	const value = useMemo<PieChartContextValue>(
+		() => ({
+			series,
+			values: resolved.values,
+			total: resolved.total,
+			slices,
+			slots,
+			size,
+			surfaceColor,
+			frame,
+			nameKey,
+			valueKey,
+			innerRadius,
+			selectedIndex: selected,
+			select,
+		}),
+		[series, resolved, slices, slots, size, surfaceColor, frame, nameKey, valueKey, innerRadius, selected, select]
+	);
+
+	const { canvas, overlay, below, selectable } = useMemo(() => partitionPieChildren(children), [children]);
+
+	const onLayout = (event: LayoutChangeEvent): void => {
+		const { width, height } = event.nativeEvent.layout;
+		setFrame((current) => (current.width === width && current.height === height ? current : { width, height }));
+	};
+
+	// A tap selects only when something would show it: a tooltip, a caller's
+	// handler, or a controlled selection. Otherwise the chart takes no gesture
+	// at all, and a pie in a list is nothing more than a picture.
+	const onSlicePress = selectable || onSelect !== undefined || selectedIndex !== undefined ? select : undefined;
+
+	return (
+		<PieChartProvider value={value}>
+			<View className={slots.root({ className })}>
+				<View className={slots.frame()} onLayout={onLayout} testID={testID}>
+					<PolarChart
+						data={rows}
+						font={font}
+						innerRadius={innerRadiusSpec}
+						labelKey={ENGINE_NAME_KEY}
+						onSlicePress={onSlicePress}
+						selectedIndex={selected}
+						startAngle={startAngle}
+						valueKey={ENGINE_VALUE_KEY}
+					>
+						<PieChartProvider value={value}>{canvas}</PieChartProvider>
+					</PolarChart>
+					{overlay}
+				</View>
+				{below}
+			</View>
+		</PieChartProvider>
+	);
+}
+
+/**
+ * Splits the children by where they have to be mounted, the way `Chart` does.
+ *
+ * Slices and labels are Skia marks and go inside the canvas; the centre and
+ * the tooltip are React Native views floated over it; a legend, or anything
+ * else, sits under it. Matching is by component identity, so a part must be a
+ * direct child of `<PieChart>` — an array from `.map()` is fine, a part wrapped
+ * in a caller's own component is not.
+ *
+ * It also reports whether a tooltip was placed, because that is what decides
+ * whether a tap should select anything.
+ */
+function partitionPieChildren(children: ReactNode): {
+	canvas: ReactNode[];
+	overlay: ReactNode[];
+	below: ReactNode[];
+	selectable: boolean;
+} {
+	const canvas: ReactNode[] = [];
+	const overlay: ReactNode[] = [];
+	const below: ReactNode[] = [];
+	let selectable = false;
+
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		if (child.type === PieChartSlice || child.type === PieChartLabel) canvas.push(child);
+		else if (child.type === PieChartCenter) overlay.push(child);
+		else if (child.type === PieChartTooltip) {
+			overlay.push(child);
+			selectable = true;
+		} else below.push(child);
+	}
+
+	return { canvas, overlay, below, selectable };
+}
+
+/**
+ * A pie or donut, wearing the theme's five-colour series ramp.
+ *
+ * A second root beside `Chart` rather than a part of it, because a pie shares
+ * nothing with a cartesian plot on screen — no axes, no grid, no scrub — and
+ * only the palette, the legend and the font underneath. Its categories are its
+ * **rows**: the first row is `chart-1`, the second `chart-2`, and a `config`
+ * entry keyed by a row's name overrides that one row's label or colour.
+ *
+ * `PieChart.Slice` and `PieChart.Label` draw into the canvas; `PieChart.Center`
+ * and `PieChart.Tooltip` float over it as React Native views; `PieChart.Legend`
+ * sits beneath. The tooltip answers a tap rather than a scrub — tap a slice to
+ * select it and dim the rest, tap outside to clear — and `selectedIndex` with
+ * `onSelect` makes the selection controlled.
+ *
+ * @example
+ * <PieChart data={rows} nameKey="browser" valueKey="visitors">
+ *   <PieChart.Slice />
+ *   <PieChart.Legend />
+ * </PieChart>
+ *
+ * @example
+ * <PieChart data={rows} innerRadius={0.6} nameKey="browser" valueKey="visitors">
+ *   <PieChart.Slice />
+ *   <PieChart.Center label="Visitors" value="1,125" />
+ *   <PieChart.Tooltip />
+ * </PieChart>
+ */
+export const PieChart = Object.assign(PieChartRoot, {
+	/** Every slice, in the series' colours, with a hairline between them. */
+	Slice: PieChartSlice,
+	/** A percentage — or a value, or the name — on every slice wide enough to hold one. */
+	Label: PieChartLabel,
+	/** A headline figure and a caption in the hole of a donut. A React Native view. */
+	Center: PieChartCenter,
+	/** A readout for the tapped slice. A React Native view, over the canvas. */
+	Tooltip: PieChartTooltip,
+	/** A swatch and a label per slice, under the chart. */
+	Legend: ChartLegend,
+	displayName: "DelacourUI.PieChart",
+});

package/src/components/chart/use-chart-font.ts

@@ -0,0 +1,25 @@
+import { type ChartFont, useSystemFont } from "@delacour/react-native-charts";
+import { useCSSVariable } from "uniwind";
+
+/**
+ * The font Skia draws axis labels with.
+ *
+ * The family comes from `--font-sans`, which `theme.css` declares per platform
+ * under `@variant ios` / `@variant android`. It is deliberately **not** aliased
+ * through `@theme inline` — aliasing a font would redefine each name as itself
+ * and every `font-*` utility would silently draw nothing — so the raw variable
+ * is the only thing there to read, which is exactly what `useCSSVariable` takes.
+ *
+ * An unresolved family is not a failure. `matchFont` then picks the platform's
+ * own default, which is what `--font-sans` names on both platforms anyway; the
+ * variable only matters once an app overrides it.
+ *
+ * No font file ships with this package or with `@delacour/react-native-charts`. That is the
+ * same choice `theme.css` already made for the rest of the type: OS-bundled
+ * families mean nothing has to be loaded through `expo-font` and a consuming
+ * app needs no config plugin.
+ */
+export function useChartFont(size: number): ChartFont {
+	const family = useCSSVariable("--font-sans") as string | undefined;
+	return useSystemFont(family, size);
+}