@lt-three/love3 0.0.0 → 0.1.1

package/README.md

@@ -1,3 +1,87 @@
 # @lt-three/love3
 
-Placeholder. Real releases are published from CI.
+The shared design system of <3 (Less Than Three): layered backgrounds, hairline borders, soft shadows, and an indigo primary action.
+It looks the same on web (React + Tailwind CSS v4) and React Native (NativeWind v5). The actual token values (color, radius, shadow, typeface) can also be read as a TS object.
+
+Licensed under MIT.
+
+## Installation
+
+```sh
+npm install @lt-three/love3
+```
+
+- **web**: install `react` and `react-dom` (`>=19.3.0 <20`) and `tailwindcss` (v4). The dependencies used by the web components (Radix, `@tanstack/charts`, and so on) are in this package's `dependencies`, so you do not need to install them separately.
+- **React Native**: install `react`, `react-native`, `nativewind` (v5), `react-native-css`, and `tailwindcss`, plus the native dependencies pulled in by the components you use (`expo`, `expo-router`, `react-native-reanimated`, `react-native-svg`, and so on).
+  Native-only dependencies are **optional `peerDependencies`**. You do not need to install the dependencies of components you do not use (see the `peerDependencies` in `package.json` and the imports of each component to find out which component needs which).
+
+The published files are in `dist/` (ESM `.js` and `.d.ts`). They keep the same structure as the source, one file per component. The dependencies of components you do not use are not pulled in.
+
+## Usage
+
+| import                                                                      | contents                                                                                                                                                                                      |
+| --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@lt-three/love3/styles.css`                                                | Tailwind v4 `@theme` with light and dark. Shared by web and NativeWind                                                                                                                        |
+| `@lt-three/love3/tokens`                                                    | The actual token values as a TS object (`tokens.light` / `tokens.dark`), `cssVar`, and types. For RN charts and Reanimated, where CSS is not available. Does not import `node:` built-ins     |
+| `@lt-three/love3/tokens/contrast`                                           | The foreground / background pairs checked for contrast (`CONTRAST_PAIRS`) and the known exceptions with reasons (`KNOWN_CONTRAST_EXCEPTIONS`). Data only                                      |
+| `@lt-three/love3/tuning`                                                    | The format, validation, and application of "tuning", which overrides tokens at runtime (imports only `zod`)                                                                                   |
+| `@lt-three/love3/web` / `@lt-three/love3/native` / `@lt-three/love3/shared` | The entry point of each layer (`index.ts`)                                                                                                                                                    |
+| `@lt-three/love3/web/atom/button.tsx`, **with the extension**               | Web components. `web/*.ts` (hooks and utilities) and `web/*.tsx`                                                                                                                              |
+| `@lt-three/love3/web/styles.css`                                            | Imported by a web app at its CSS entry. Tailwind, fonts, tokens, and base styles                                                                                                              |
+| `@lt-three/love3/native/atom/button.tsx`, **with the extension**            | Native components                                                                                                                                                                             |
+| `@lt-three/love3/native/styles.css`                                         | **The CSS entry for real devices (Metro / NativeWind v5)**. Tailwind, `nativewind/theme`, tokens, detection of component classes, and an override that maps `dark:` to `prefers-color-scheme` |
+| `@lt-three/love3/shared/…` (`.ts` / `.tsx`)                                 | Props types and variant definitions shared by web and native                                                                                                                                  |
+
+**Wildcard exports use keys with the file extension** (`./web/*.tsx` / `./web/*.ts`). `exports` does not search for extensions, so consumers import with the extension too
+(enable `allowImportingTsExtensions` in TypeScript). Without the extension (`.../atom/button`) the specifier does not resolve. Specifiers point to the `.js` files and the `.d.ts` type declarations in `dist/`.
+
+### web
+
+Import it once at your CSS entry.
+
+```css
+@import "@lt-three/love3/web/styles.css";
+```
+
+```tsx
+import { Button } from "@lt-three/love3/web/atom/button.tsx";
+```
+
+The Tailwind classes used by the components are picked up from `dist/` by `@source` in this CSS. Your own app source is left to Tailwind's automatic detection, based on the bundler's project root.
+Switch to dark with `<html class="dark">`.
+
+### React Native
+
+Import it once in your app's `global.css` (NativeWind v5 / react-native-css compiles it as Tailwind v4).
+
+```css
+@import "@lt-three/love3/native/styles.css";
+```
+
+On native, `dark:` is resolved by **the OS color scheme** (`prefers-color-scheme`), not by a class. With `.dark` as an ancestor selector, react-native-css treats that view as a container,
+and a descendant ScrollView can no longer receive pans. Switch the in-app theme with `Appearance.setColorScheme()`.
+
+The components that use SwiftUI Charts on iOS (`line-chart.ios.tsx` / `pie-chart.ios.tsx`) are imported explicitly, with the extension, by the iOS app.
+
+### Tokens
+
+```ts
+import { cssVar, tokens } from "@lt-three/love3/tokens";
+
+tokens.light["ink-900"]; // the actual value ("#1b1c20")
+cssVar("ink-900"); // "var(--ink-900)"
+```
+
+The variable names are shadcn-compatible names (`--background`, `--primary`, and so on) plus raw tokens such as `--ink-*`, `--line*`, and `--lt-three`.
+
+## Note: `.theme-light` does not lighten semantic classes
+
+`.theme-light` (a scope that forces light) redefines **only the raw tokens** (`--ink-*` / `--line*` / `--frame` / `--paper` / `--raised` / `--overlay` / `--wash` / `--scrim` / `--shadow-color` / `--action-ink` / `--state-*` / `--chart-*`).
+Semantic variables such as `--background` / `--foreground` / `--primary` are declared on `:root` as `var(--paper)` and the like, and **are resolved on the element that declares them, then inherited by descendants**.
+So even if you put `.theme-light` under `<html class="dark">`, classes such as `bg-background` / `text-foreground` / `bg-primary` **stay dark** in its descendants
+(classes of raw tokens such as `bg-paper` / `text-ink-900` do become light).
+love3 components do not use `.theme-light`. On a page that must always be light, use raw-token classes inside `.theme-light`, or also redeclare the semantic variables in `.theme-light`.
+
+## License
+
+[MIT](./LICENSE)

package/dist/native/analytics/animation.d.ts

@@ -0,0 +1,4 @@
+//#region src/native/analytics/animation.d.ts
+/** Chart animation duration (ms). Kept identical to the web analytics animation. */
+export declare const animationDuration = 250;
+//#endregion

package/dist/native/analytics/animation.js

@@ -0,0 +1,6 @@
+//#region src/native/analytics/animation.ts
+/** Chart animation duration (ms). Kept identical to the web analytics animation. */
+const animationDuration = 250;
+
+//#endregion
+export { animationDuration };

package/dist/native/analytics/chart.types.d.ts

@@ -0,0 +1,25 @@
+import { ChartCommonProps as ChartCommonProps$1, LineChartSharedProps, LinePoint, LineSeries, MultiLineChartSharedProps } from "../../shared/analytics.js";
+import { ViewStyle } from "react-native";
+//#region src/native/analytics/chart.types.d.ts
+export type PieSlice = {
+  label: string;
+  value: number;
+  color?: string;
+};
+type ChartCommonProps = ChartCommonProps$1 & {
+  style?: ViewStyle;
+  /**
+   * Text shown on platforms without native chart support.
+   * This is a shared package, so it only provides a default; consumers pass their own translation.
+   */
+  fallbackText?: string;
+};
+export type LineChartProps = ChartCommonProps & LineChartSharedProps;
+export type PieChartProps = ChartCommonProps & {
+  data: PieSlice[];
+  /** Renders a donut with a hollow center. */
+  donut?: boolean;
+};
+export type MultiLineChartProps = ChartCommonProps & MultiLineChartSharedProps;
+//#endregion
+export type { LinePoint, LineSeries };

package/dist/native/analytics/line-chart.d.ts

@@ -0,0 +1,4 @@
+import { LineChartProps } from "./chart.types.js";
+//#region src/native/analytics/line-chart.d.ts
+export declare function LineChart(props: LineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/line-chart.ios.d.ts

@@ -0,0 +1,4 @@
+import { LineChartProps } from "./chart.types.js";
+//#region src/native/analytics/line-chart.ios.d.ts
+export declare function LineChart({ data, color, height, style }: LineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/line-chart.ios.js

@@ -0,0 +1,24 @@
+import { useChartPalette } from "../lib/chart-palette.js";
+import { Chart, Host } from "@expo/ui/swift-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/line-chart.ios.tsx
+function LineChart({ data, color, height = 220, style }) {
+	const palette = useChartPalette();
+	return /* @__PURE__ */ jsx(Host, {
+		style: [{ height }, style],
+		children: /* @__PURE__ */ jsx(Chart, {
+			data: data.map((point) => ({
+				x: point.x,
+				y: point.y
+			})),
+			type: "line",
+			showGrid: true,
+			animate: true,
+			lineStyle: { color: color ?? palette[0] }
+		})
+	});
+}
+
+//#endregion
+export { LineChart };

package/dist/native/analytics/line-chart.js

@@ -0,0 +1,33 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Suspense, lazy } from "react";
+import { Platform, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/line-chart.tsx
+const SwiftUILineChart = lazy(() => import("./line-chart.ios.js").then((module) => ({ default: module.LineChart })));
+const DEFAULT_FALLBACK_TEXT = "チャートは現在 iOS でのみ表示できます";
+const DEFAULT_HEIGHT = 220;
+function LineChart(props) {
+	const height = props.height ?? DEFAULT_HEIGHT;
+	if (Platform.OS !== "ios") return /* @__PURE__ */ jsx(LineChartFallback, {
+		height,
+		text: props.fallbackText
+	});
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(View, { style: { height } }),
+		children: /* @__PURE__ */ jsx(SwiftUILineChart, { ...props })
+	});
+}
+function LineChartFallback({ height, text }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: { height },
+		className: "items-center justify-center",
+		children: /* @__PURE__ */ jsx(Text$1, {
+			className: "text-muted-foreground text-sm",
+			children: text ?? DEFAULT_FALLBACK_TEXT
+		})
+	});
+}
+
+//#endregion
+export { LineChart };

package/dist/native/analytics/metric-card.d.ts

@@ -0,0 +1,10 @@
+import { MetricCardSharedProps } from "../../shared/analytics.js";
+//#region src/native/analytics/metric-card.d.ts
+export type MetricCardProps = MetricCardSharedProps;
+/**
+ * A single metric on a surface. Mirrors the web analytics metric-card.
+ * The content (label + large monospaced number + secondary text) lives in `atom/readout`;
+ * as on the web, this component only wraps it in the card chrome.
+ */
+export declare function MetricCard({ label, value, subValue, trend, className }: MetricCardProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/metric-card.js

@@ -0,0 +1,29 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Readout } from "../atom/readout.js";
+import { Panel } from "../layout/panel.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/metric-card.tsx
+/**
+* A single metric on a surface. Mirrors the web analytics metric-card.
+* The content (label + large monospaced number + secondary text) lives in `atom/readout`;
+* as on the web, this component only wraps it in the card chrome.
+*/
+function MetricCard({ label, value, subValue, trend, className }) {
+	const up = useTokenColor("--state-success");
+	const down = useTokenColor("--state-error");
+	const valueColor = trend === void 0 || trend === 0 ? void 0 : trend > 0 ? up : down;
+	return /* @__PURE__ */ jsx(Panel, {
+		className: cn("p-4", className),
+		children: /* @__PURE__ */ jsx(Readout, {
+			label,
+			value,
+			sub: subValue,
+			valueColor
+		})
+	});
+}
+
+//#endregion
+export { MetricCard };

package/dist/native/analytics/multi-line-chart.d.ts

@@ -0,0 +1,18 @@
+import { MultiLineChartProps } from "./chart.types.js";
+//#region src/native/analytics/multi-line-chart.d.ts
+/**
+ * Multi-series line chart. The web counterpart is `analytics/multi-line-chart` (`@tanstack/charts`)
+ * (the props are shared via `shared/analytics.ts`).
+ *
+ * **The `@expo/ui` Chart can only draw a single series** (its type definitions also state that
+ * line/area are single-series), so use this component when two or more series share an axis.
+ * Splitting series with the same unit and axis (such as balance and equity) across two cards
+ * makes the relationship hard to read without comparing them vertically.
+ *
+ * Drawing uses react-native-svg. Unlike SwiftUI Charts it draws no outer frame, only the tick lines
+ * (a consumer wrapping it in a `Panel` would otherwise get a double border).
+ *
+ * Tapping reads out each series' value at that position, since tick marks alone only convey the rough shape.
+ */
+export declare function MultiLineChart({ series, height, formatValue, emptyText, style, accessibilityLabel }: MultiLineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/multi-line-chart.js

@@ -0,0 +1,216 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Text as Text$2 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Circle, Line, Path, Text as Text$1 } from "react-native-svg";
+
+//#region src/native/analytics/multi-line-chart.tsx
+/**
+* Multi-series line chart. The web counterpart is `analytics/multi-line-chart` (`@tanstack/charts`)
+* (the props are shared via `shared/analytics.ts`).
+*
+* **The `@expo/ui` Chart can only draw a single series** (its type definitions also state that
+* line/area are single-series), so use this component when two or more series share an axis.
+* Splitting series with the same unit and axis (such as balance and equity) across two cards
+* makes the relationship hard to read without comparing them vertically.
+*
+* Drawing uses react-native-svg. Unlike SwiftUI Charts it draws no outer frame, only the tick lines
+* (a consumer wrapping it in a `Panel` would otherwise get a double border).
+*
+* Tapping reads out each series' value at that position, since tick marks alone only convey the rough shape.
+*/
+function MultiLineChart({ series, height = 220, formatValue = (value) => String(Math.round(value)), emptyText = "データがありません", style, accessibilityLabel }) {
+	const line = useTokenColor("--line");
+	const mutedInk = useTokenColor("--ink-500");
+	const [width, setWidth] = useState(0);
+	const [pickedX, setPickedX] = useState(null);
+	const withData = series.filter((entry) => entry.points.length > 0);
+	const values = withData.flatMap((entry) => entry.points.map((point) => point.y));
+	if (withData.length === 0) return /* @__PURE__ */ jsx(View, {
+		style: [{ height }, style],
+		className: "items-center justify-center",
+		children: /* @__PURE__ */ jsx(Text$2, {
+			className: "text-muted-foreground text-sm",
+			children: emptyText
+		})
+	});
+	const padding = {
+		top: 8,
+		right: 8,
+		bottom: 8,
+		left: 72
+	};
+	const plotWidth = Math.max(width - padding.left - padding.right, 0);
+	const plotHeight = height - padding.top - padding.bottom;
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const span = max - min || Math.max(Math.abs(max), 1);
+	const low = max === min ? min - span / 2 : min;
+	const high = max === min ? max + span / 2 : max;
+	const toY = (value) => padding.top + (1 - (value - low) / (high - low)) * plotHeight;
+	const times = withData.flatMap((entry) => entry.points.map((point) => point.t));
+	const timed = times.every((time) => time !== void 0) && times.length > 0;
+	const tMin = timed ? Math.min(...times) : 0;
+	const tSpan = (timed ? Math.max(...times) : 0) - tMin;
+	const toX = (index, count, time) => {
+		if (timed && time !== void 0) return padding.left + (tSpan === 0 ? plotWidth / 2 : (time - tMin) / tSpan * plotWidth);
+		return padding.left + (count === 1 ? plotWidth / 2 : index / (count - 1) * plotWidth);
+	};
+	const ticks = [
+		high,
+		(high + low) / 2,
+		low
+	];
+	const picked = pickedX === null ? [] : withData.map((entry) => ({
+		entry,
+		hit: nearestPoint(entry, pickedX, toX)
+	})).filter((row) => row.hit !== null);
+	const marker = picked[0];
+	return /* @__PURE__ */ jsxs(View, {
+		style,
+		...accessibilityLabel === void 0 ? {} : {
+			accessible: true,
+			accessibilityRole: "image",
+			accessibilityLabel
+		},
+		children: [
+			/* @__PURE__ */ jsx(Pressable, {
+				focusable: false,
+				tabIndex: -1,
+				onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+				onPress: (event) => {
+					const x = pressX(event);
+					if (x === null) return;
+					setPickedX(x < padding.left || x > padding.left + plotWidth ? null : x);
+				},
+				children: /* @__PURE__ */ jsxs(Svg, {
+					width,
+					height,
+					children: [
+						ticks.map((tick) => /* @__PURE__ */ jsx(Line, {
+							x1: padding.left,
+							x2: padding.left + plotWidth,
+							y1: toY(tick),
+							y2: toY(tick),
+							stroke: line,
+							strokeWidth: 1
+						}, `grid-${tick}`)),
+						ticks.map((tick) => /* @__PURE__ */ jsx(Text$1, {
+							x: padding.left - 8,
+							y: toY(tick) + 4,
+							fontSize: 10,
+							fill: mutedInk,
+							textAnchor: "end",
+							children: formatValue(tick)
+						}, `label-${tick}`)),
+						withData.map((entry) => /* @__PURE__ */ jsx(Path, {
+							d: pathOf(entry, toX, toY),
+							stroke: entry.color,
+							strokeWidth: entry.dashed === true ? 1 : 1.5,
+							strokeDasharray: entry.dashed === true ? "4 3" : void 0,
+							fill: "none"
+						}, entry.key)),
+						marker !== void 0 && /* @__PURE__ */ jsx(Line, {
+							x1: marker.hit.x,
+							x2: marker.hit.x,
+							y1: padding.top,
+							y2: padding.top + plotHeight,
+							stroke: mutedInk,
+							strokeWidth: 1,
+							strokeDasharray: "2 2"
+						}),
+						picked.map((row) => /* @__PURE__ */ jsx(Circle, {
+							cx: row.hit.x,
+							cy: toY(row.hit.value.y),
+							r: 3,
+							fill: row.entry.color
+						}, `dot-${row.entry.key}`))
+					]
+				})
+			}),
+			marker !== void 0 && /* @__PURE__ */ jsxs(View, {
+				className: "border-line bg-popover rounded-control mt-2 gap-1 border p-2.5 shadow-md",
+				children: [/* @__PURE__ */ jsx(Text$2, {
+					style: tabularNums,
+					className: "text-muted-foreground font-mono text-[11px]",
+					children: String(marker.hit.value.x)
+				}), picked.map((row) => /* @__PURE__ */ jsxs(View, {
+					className: "flex-row items-center justify-between gap-3",
+					children: [/* @__PURE__ */ jsxs(View, {
+						className: "flex-row items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(View, { style: {
+							width: 10,
+							height: 2,
+							backgroundColor: row.entry.color
+						} }), /* @__PURE__ */ jsx(Text$2, {
+							className: "text-muted-foreground text-[11px]",
+							children: row.entry.label
+						})]
+					}), /* @__PURE__ */ jsx(Text$2, {
+						style: tabularNums,
+						className: "text-foreground font-mono text-[13px] font-semibold",
+						children: formatValue(row.hit.value.y)
+					})]
+				}, `read-${row.entry.key}`))]
+			}),
+			/* @__PURE__ */ jsx(View, {
+				className: "flex-row flex-wrap gap-x-4 gap-y-1 px-1 pt-2",
+				children: series.map((entry) => /* @__PURE__ */ jsxs(View, {
+					className: "flex-row items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(View, { style: {
+						width: 10,
+						height: 2,
+						backgroundColor: entry.color,
+						opacity: entry.points.length > 0 ? 1 : .4
+					} }), /* @__PURE__ */ jsx(Text$2, {
+						className: "text-muted-foreground text-[11px]",
+						children: entry.label
+					})]
+				}, `legend-${entry.key}`))
+			})
+		]
+	});
+}
+/**
+* The pressed position (x from the left edge of the pressed element). On a device this is `locationX`.
+* react-native-web's `onPress` passes a DOM click (no `locationX`), so in that case it is computed from the difference to the element's left edge.
+* Returns null for a click without a position (keyboard, etc.).
+*/
+function pressX(event) {
+	const { locationX } = event.nativeEvent;
+	if (typeof locationX === "number" && Number.isFinite(locationX)) return locationX;
+	const dom = event.nativeEvent;
+	if (dom.detail === 0) return null;
+	const target = event.currentTarget;
+	return dom.clientX - target.getBoundingClientRect().left;
+}
+/** Turns a series into a single SVG path. */
+function pathOf(entry, toX, toY) {
+	const count = entry.points.length;
+	return entry.points.map((point, index) => `${index === 0 ? "M" : "L"}${toX(index, count, point.t)},${toY(point.y)}`).join(" ");
+}
+/** Returns the point nearest to the pressed x, together with its drawn position. */
+function nearestPoint(entry, pickedX, toX) {
+	const count = entry.points.length;
+	let best;
+	let bestX = 0;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (let index = 0; index < count; index++) {
+		const x = toX(index, count, entry.points[index]?.t);
+		const distance = Math.abs(x - pickedX);
+		if (distance < bestDistance) {
+			bestDistance = distance;
+			bestX = x;
+			best = entry.points[index];
+		}
+	}
+	return best === void 0 ? null : {
+		x: bestX,
+		value: best
+	};
+}
+
+//#endregion
+export { MultiLineChart };

package/dist/native/analytics/pie-chart.d.ts

@@ -0,0 +1,15 @@
+import { PieChartProps } from "./chart.types.js";
+//#region src/native/analytics/pie-chart.d.ts
+/**
+ * Pie chart (react-native-svg). The default implementation for Android and web. The iOS SwiftUI Charts version (`pie-chart.ios.tsx`)
+ * needs `@expo/ui`, so iOS is drawn with this implementation too unless the app imports that file explicitly.
+ *
+ * Drawing uses the same react-native-svg as `multi-line-chart`. It is **not** an "iOS only"
+ * placeholder because a screen's main content can be produced by this component alone,
+ * and on Android that content would be replaced entirely by a text message.
+ *
+ * **No legend here.** Consumers are expected to list the colored breakdown below the circle,
+ * so a legend here would show the same thing twice and eat into the circle's height.
+ */
+export declare function PieChart({ data, donut, height, style, accessibilityLabel }: PieChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/pie-chart.ios.d.ts

@@ -0,0 +1,4 @@
+import { PieChartProps } from "./chart.types.js";
+//#region src/native/analytics/pie-chart.ios.d.ts
+export declare function PieChart({ data, donut, height, style }: PieChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/pie-chart.ios.js

@@ -0,0 +1,24 @@
+import { useChartPalette } from "../lib/chart-palette.js";
+import { Chart, Host } from "@expo/ui/swift-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/pie-chart.ios.tsx
+function PieChart({ data, donut, height = 220, style }) {
+	const palette = useChartPalette();
+	return /* @__PURE__ */ jsx(Host, {
+		style: [{ height }, style],
+		children: /* @__PURE__ */ jsx(Chart, {
+			data: data.map((slice, index) => ({
+				x: slice.label,
+				y: slice.value,
+				color: slice.color ?? palette[index % palette.length]
+			})),
+			type: "pie",
+			animate: true,
+			pieStyle: donut ? { innerRadius: .6 } : void 0
+		})
+	});
+}
+
+//#endregion
+export { PieChart };

package/dist/native/analytics/pie-chart.js

@@ -0,0 +1,92 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { useChartPalette } from "../lib/chart-palette.js";
+import { Text as Text$2 } from "../base/text.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import Svg, { Circle, Path } from "react-native-svg";
+
+//#region src/native/analytics/pie-chart.tsx
+/**
+* Pie chart (react-native-svg). The default implementation for Android and web. The iOS SwiftUI Charts version (`pie-chart.ios.tsx`)
+* needs `@expo/ui`, so iOS is drawn with this implementation too unless the app imports that file explicitly.
+*
+* Drawing uses the same react-native-svg as `multi-line-chart`. It is **not** an "iOS only"
+* placeholder because a screen's main content can be produced by this component alone,
+* and on Android that content would be replaced entirely by a text message.
+*
+* **No legend here.** Consumers are expected to list the colored breakdown below the circle,
+* so a legend here would show the same thing twice and eat into the circle's height.
+*/
+function PieChart({ data, donut, height = 220, style, accessibilityLabel }) {
+	const palette = useChartPalette();
+	const fallbackColor = useTokenColor("--chart-1");
+	const total = data.reduce((sum, slice) => sum + Math.max(slice.value, 0), 0);
+	const colorOf = (slice, index) => slice.color ?? palette[index % palette.length] ?? fallbackColor;
+	const size = height;
+	const radius = size / 2;
+	const inner = donut ? radius * .6 : 0;
+	return /* @__PURE__ */ jsx(View, {
+		style,
+		...accessibilityLabel === void 0 ? {} : {
+			accessible: true,
+			accessibilityRole: "image",
+			accessibilityLabel
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			style: { height: size },
+			className: "items-center justify-center",
+			children: total > 0 ? /* @__PURE__ */ jsx(Svg, {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				children: data.length === 1 && data[0] ? /* @__PURE__ */ jsx(Circle, {
+					cx: radius,
+					cy: radius,
+					r: (radius + inner) / 2,
+					stroke: colorOf(data[0], 0),
+					strokeWidth: radius - inner,
+					fill: "none"
+				}) : slicePaths(data, total, radius, inner).map(({ slice, d }, index) => /* @__PURE__ */ jsx(Path, {
+					d,
+					fill: colorOf(slice, index)
+				}, slice.label))
+			}) : /* @__PURE__ */ jsx(Text$2, {
+				className: "text-muted-foreground text-sm",
+				children: "–"
+			})
+		})
+	});
+}
+/** Turns each slice into an SVG path. Slices run clockwise from 12 o'clock (the same direction as SwiftUI Charts). */
+function slicePaths(data, total, radius, inner) {
+	let angle = -Math.PI / 2;
+	return data.map((slice) => {
+		const sweep = Math.max(slice.value, 0) / total * Math.PI * 2;
+		const end = angle + sweep;
+		const large = sweep > Math.PI ? 1 : 0;
+		const outerStart = point(radius, radius, radius, angle);
+		const outerEnd = point(radius, radius, radius, end);
+		const innerEnd = point(radius, radius, inner, end);
+		const innerStart = point(radius, radius, inner, angle);
+		angle = end;
+		return {
+			slice,
+			d: [
+				`M ${outerStart.x} ${outerStart.y}`,
+				`A ${radius} ${radius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}`,
+				`L ${innerEnd.x} ${innerEnd.y}`,
+				inner > 0 ? `A ${inner} ${inner} 0 ${large} 0 ${innerStart.x} ${innerStart.y}` : "",
+				"Z"
+			].filter(Boolean).join(" ")
+		};
+	});
+}
+function point(cx, cy, r, angle) {
+	return {
+		x: cx + r * Math.cos(angle),
+		y: cy + r * Math.sin(angle)
+	};
+}
+
+//#endregion
+export { PieChart };

package/dist/native/analytics/single-number.d.ts

@@ -0,0 +1,19 @@
+//#region src/native/analytics/single-number.d.ts
+export type SingleNumberProps = {
+  title: string;
+  subTitle?: string;
+  value: number | null;
+  unit?: string;
+  /** Value to compare against. When given, the difference and the percentage change are shown alongside. */
+  compareValue?: number;
+  compareTitle?: string;
+  /** Flips the colors for metrics where an increase is bad (cost, etc.). */
+  reverseColor?: boolean;
+  className?: string;
+};
+/**
+ * A metric showing a large number on a raised surface (surface corner radius, 1px hairline border).
+ * Mirrors the web analytics single-number. Increase/decrease uses the state colors (the surface does not invert, so the same theme values work).
+ */
+export declare function SingleNumber({ title, subTitle, value, unit, compareValue, compareTitle, reverseColor, className }: SingleNumberProps): import("react").JSX.Element;
+//#endregion