@lt-three/love3 0.0.0 → 0.1.1

package/dist/native/lib/tuning.js

@@ -0,0 +1,42 @@
+import { catalog } from "../../tuning/catalog.gen.js";
+import { effectiveTokens, normalize } from "../../tuning/model.js";
+import { toNativeVariables } from "../../tuning/native.js";
+import { useActiveScheme } from "./theme.js";
+import { TuningTokensContext } from "./tuning-context.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { VariableContextProvider } from "react-native-css";
+
+//#region src/native/lib/tuning.tsx
+/**
+* The root that applies tuning (runtime overrides of tokens) to descendant components. Place it **inside `ThemeRoot`** (to receive the effective theme and the dark variables).
+*
+* - Distributes the changed colors, radius, and typefaces as CSS variables with `VariableContextProvider` from `react-native-css`. On device, what takes effect is
+*   classes that use color tokens whose values differ between light and dark (such as `bg-card`) and typefaces. Classes folded into literals at build time, such as `bg-action`,
+*   plus radius, body text size, and the targets of semantic references, **do not take effect on device** (`nativeLimits` returns an explanation.
+*   On react-native-web they are CSS variables, so everything takes effect)
+* - Components that look up colors from TS (`useTokenColor`) read the effective values (references resolved) from `TuningTokensContext`, so **all of them follow**
+* - With no tuning (same as the defaults), nothing changes (empty `tuning` restores the original look)
+*
+* Not yet verified on a real device (Expo). The README lists what was verified in react-native-web browser tests.
+*/
+function TuningRoot({ tuning, catalog: catalog$1 = catalog, children }) {
+	const scheme = useActiveScheme();
+	const normalized = useMemo(() => normalize(tuning, catalog$1), [tuning, catalog$1]);
+	const variables = useMemo(() => toNativeVariables(normalized, catalog$1, scheme), [
+		normalized,
+		catalog$1,
+		scheme
+	]);
+	const tokens = useMemo(() => effectiveTokens(normalized, catalog$1), [normalized, catalog$1]);
+	return /* @__PURE__ */ jsx(TuningTokensContext.Provider, {
+		value: tokens,
+		children: /* @__PURE__ */ jsx(VariableContextProvider, {
+			value: variables,
+			children
+		})
+	});
+}
+
+//#endregion
+export { TuningRoot };

package/dist/native/lib/typography.d.ts

@@ -0,0 +1,10 @@
+import { TextStyle } from "react-native";
+//#region src/native/lib/typography.d.ts
+/**
+ * A style that aligns digits with equal widths (tabular).
+ *
+ * Tailwind's `tabular-nums` (`font-variant-numeric`) cannot be expressed in className because
+ * react-native-css does not support it. For numeric displays, pass this via `style`.
+ */
+export declare const tabularNums: TextStyle;
+//#endregion

package/dist/native/lib/typography.js

@@ -0,0 +1,11 @@
+//#region src/native/lib/typography.ts
+/**
+* A style that aligns digits with equal widths (tabular).
+*
+* Tailwind's `tabular-nums` (`font-variant-numeric`) cannot be expressed in className because
+* react-native-css does not support it. For numeric displays, pass this via `style`.
+*/
+const tabularNums = { fontVariant: ["tabular-nums"] };
+
+//#endregion
+export { tabularNums };

package/dist/native/lib/utils.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { ClassValue } from "clsx";
+//#region src/native/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * A `ReactNode` that renders nothing (`null`, `undefined`, booleans, the empty string, and arrays or `<></>` containing only those).
+ * Used to decide whether a heading or label "exists" (an empty heading such as `""` or `<></>` does not count as a name).
+ * An element (such as `<Text />`) counts as existing even if its content is empty (it is drawn). Only a Fragment is decided by its content.
+ */
+export declare function isBlankNode(node: ReactNode): boolean;
+//#endregion

package/dist/native/lib/utils.js

@@ -0,0 +1,21 @@
+import { Fragment, isValidElement } from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/native/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* A `ReactNode` that renders nothing (`null`, `undefined`, booleans, the empty string, and arrays or `<></>` containing only those).
+* Used to decide whether a heading or label "exists" (an empty heading such as `""` or `<></>` does not count as a name).
+* An element (such as `<Text />`) counts as existing even if its content is empty (it is drawn). Only a Fragment is decided by its content.
+*/
+function isBlankNode(node) {
+	if (node === null || node === void 0 || typeof node === "boolean" || node === "") return true;
+	if (Array.isArray(node)) return node.every(isBlankNode);
+	return isValidElement(node) && node.type === Fragment && isBlankNode(node.props.children);
+}
+
+//#endregion
+export { cn, isBlankNode };

package/dist/native/once/confirm.d.ts

@@ -0,0 +1,7 @@
+//#region src/native/once/confirm.d.ts
+/**
+ * The confirmation dialog invoked by `confirm()` (`lib/confirm.ts`). Place exactly one at the app root.
+ * It reads from an external store (`confirmDialogStore`).
+ */
+export declare function ConfirmDialog(): import("react").JSX.Element;
+//#endregion

package/dist/native/once/confirm.js

@@ -0,0 +1,60 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Button } from "../atom/button.js";
+import { closeConfirmDialog, confirmDialogStore, registerConfirmDialog } from "../lib/confirm.js";
+import { useEffect } from "react";
+import { Modal, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/once/confirm.tsx
+/**
+* The confirmation dialog invoked by `confirm()` (`lib/confirm.ts`). Place exactly one at the app root.
+* It reads from an external store (`confirmDialogStore`).
+*/
+function ConfirmDialog() {
+	const dialog = confirmDialogStore.use();
+	useEffect(() => registerConfirmDialog(), []);
+	const dismiss = () => {
+		dialog.onDismiss?.();
+		closeConfirmDialog();
+	};
+	return /* @__PURE__ */ jsx(Modal, {
+		visible: dialog.isOpen,
+		transparent: true,
+		animationType: "fade",
+		onRequestClose: dismiss,
+		"aria-label": dialog.title,
+		children: /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			className: "flex-1 items-center justify-center bg-scrim p-6",
+			onPress: dialog.onOutsideClick ? () => dialog.onOutsideClick?.(closeConfirmDialog) : void 0,
+			children: /* @__PURE__ */ jsxs(Pressable, {
+				accessible: false,
+				className: "w-full max-w-[400px] self-center rounded-surface bg-popover p-5 shadow-lg",
+				onPress: () => {},
+				children: [/* @__PURE__ */ jsxs(View, {
+					className: "gap-1.5",
+					children: [dialog.title ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-base leading-6 font-semibold",
+						children: dialog.title
+					}) : null, dialog.description ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-muted-foreground text-[13px] leading-5",
+						children: dialog.description
+					}) : null]
+				}), /* @__PURE__ */ jsx(View, {
+					className: "mt-4 flex-row justify-end gap-2",
+					children: dialog.buttons?.map(({ text, onClick, variant }) => /* @__PURE__ */ jsx(Button, {
+						variant,
+						onPress: () => {
+							onClick();
+							closeConfirmDialog();
+						},
+						children: text
+					}, text))
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+export { ConfirmDialog };

package/dist/native/once/error-boundary.d.ts

@@ -0,0 +1,28 @@
+import { Component, ReactNode } from "react";
+//#region src/native/once/error-boundary.d.ts
+export type ErrorBoundaryLabels = {
+  title: string;
+  description: string;
+  retry: string;
+};
+export type ErrorBoundaryProps = {
+  children: ReactNode;
+  /** Text for the fallback screen. The app resolves i18n and passes it in. */
+  labels: ErrorBoundaryLabels;
+};
+type State = {
+  hasError: boolean;
+};
+/**
+ * An error boundary wrapping the whole app. It catches rendering exceptions in the child tree and,
+ * instead of a blank-screen crash, shows a fallback with a way to recover.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+  state: State;
+  static getDerivedStateFromError(): State;
+  componentDidCatch(error: unknown): void;
+  reset: () => void;
+  render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+}
+//#endregion
+export {};

package/dist/native/once/error-boundary.js

@@ -0,0 +1,55 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Button } from "../atom/button.js";
+import { Component } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/once/error-boundary.tsx
+function ErrorFallback({ title, description, retry, onRetry }) {
+	return /* @__PURE__ */ jsxs(View, {
+		role: "alert",
+		className: "flex-1 items-center justify-center gap-4 bg-background p-8",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				className: "text-lg font-bold text-foreground",
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				variant: "muted",
+				className: "text-center leading-5",
+				children: description
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onPress: onRetry,
+				children: retry
+			})
+		]
+	});
+}
+/**
+* An error boundary wrapping the whole app. It catches rendering exceptions in the child tree and,
+* instead of a blank-screen crash, shows a fallback with a way to recover.
+*/
+var ErrorBoundary = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		this.state = { hasError: false };
+		this.reset = () => this.setState({ hasError: false });
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	componentDidCatch(error) {
+		console.error("Uncaught render error:", error);
+	}
+	render() {
+		if (this.state.hasError) return /* @__PURE__ */ jsx(ErrorFallback, {
+			...this.props.labels,
+			onRetry: this.reset
+		});
+		return this.props.children;
+	}
+};
+
+//#endregion
+export { ErrorBoundary };

package/dist/native/once/loading-lock.d.ts

@@ -0,0 +1,8 @@
+//#region src/native/once/loading-lock.d.ts
+/**
+ * An overlay that blocks interaction during global loading. Place exactly one at the app root.
+ * It appears on `globalLoading(true)` (`lib/loading.ts`) and disappears on `false`.
+ * It reads from an external store (`loadingStore`).
+ */
+export declare function LoadingLock(): import("react").JSX.Element;
+//#endregion

package/dist/native/once/loading-lock.js

@@ -0,0 +1,28 @@
+import { LOADING_LABEL } from "../lib/labels.js";
+import { Spinner } from "../atom/spinner.js";
+import { loadingStore } from "../lib/loading.js";
+import { Modal, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/once/loading-lock.tsx
+/**
+* An overlay that blocks interaction during global loading. Place exactly one at the app root.
+* It appears on `globalLoading(true)` (`lib/loading.ts`) and disappears on `false`.
+* It reads from an external store (`loadingStore`).
+*/
+function LoadingLock() {
+	const loading = loadingStore.use();
+	return /* @__PURE__ */ jsx(Modal, {
+		visible: loading,
+		transparent: true,
+		animationType: "fade",
+		"aria-label": LOADING_LABEL,
+		children: /* @__PURE__ */ jsx(View, {
+			className: "flex-1 items-center justify-center bg-scrim",
+			children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
+		})
+	});
+}
+
+//#endregion
+export { LoadingLock };

package/dist/native/once/offline-banner.d.ts

@@ -0,0 +1,15 @@
+//#region src/native/once/offline-banner.d.ts
+export type OfflineBannerProps = {
+  /** The text to show. love3 does not depend on i18n, so the app resolves it and passes it in. */
+  message: string;
+};
+/**
+ * A banner permanently shown at the top of the screen while the connection is down. It disappears automatically when the connection returns.
+ * The root needs `react-native-safe-area-context`'s `SafeAreaProvider` (Expo Router includes it by default).
+ *
+ * The colors are the `destructive` surface and the text on it (`paper`; the same pair as `atom/button`'s destructive).
+ * love3 has no color literals (it uses tokens), so the banner follows the theme.
+ * The state comes from `useIsOnline` in `lib/network.ts` (NetInfo; `navigator.onLine` on web). When the connection drops it is announced with `role="alert"`.
+ */
+export declare function OfflineBanner({ message }: OfflineBannerProps): import("react").JSX.Element | null;
+//#endregion

package/dist/native/once/offline-banner.js

@@ -0,0 +1,35 @@
+import { Text as Text$1 } from "../base/text.js";
+import { useIsOnline } from "../lib/network.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+//#region src/native/once/offline-banner.tsx
+/**
+* A banner permanently shown at the top of the screen while the connection is down. It disappears automatically when the connection returns.
+* The root needs `react-native-safe-area-context`'s `SafeAreaProvider` (Expo Router includes it by default).
+*
+* The colors are the `destructive` surface and the text on it (`paper`; the same pair as `atom/button`'s destructive).
+* love3 has no color literals (it uses tokens), so the banner follows the theme.
+* The state comes from `useIsOnline` in `lib/network.ts` (NetInfo; `navigator.onLine` on web). When the connection drops it is announced with `role="alert"`.
+*/
+function OfflineBanner({ message }) {
+	const online = useIsOnline();
+	const insets = useSafeAreaInsets();
+	if (online) return null;
+	return /* @__PURE__ */ jsx(View, {
+		role: "alert",
+		className: "bg-destructive",
+		style: { paddingTop: insets.top },
+		children: /* @__PURE__ */ jsx(View, {
+			className: "items-center py-1.5",
+			children: /* @__PURE__ */ jsx(Text$1, {
+				className: "text-paper text-[13px] font-semibold",
+				children: message
+			})
+		})
+	});
+}
+
+//#endregion
+export { OfflineBanner };

package/dist/native/once/snackbar.d.ts

@@ -0,0 +1,17 @@
+//#region src/native/once/snackbar.d.ts
+export type SnackbarProps = {
+  /** Whether toasts appear from the top edge (default) or the bottom edge. */
+  position?: "top" | "bottom";
+  /** Spoken name of each toast's close button (default "閉じる", i.e. "Close"). */
+  closeLabel?: string;
+};
+/**
+ * The home for toasts. Place exactly one at the app root (make the parent a full-screen View; the position is the top or bottom edge of that parent).
+ * Corresponds to the web `once/snackbar` (sonner's Toaster).
+ * The root needs `react-native-safe-area-context`'s `SafeAreaProvider` (Expo Router includes it by default).
+ *
+ * Show toasts with `snackbar()` from `lib/snackbar.ts`. **Nothing appears unless this is mounted** (in development `snackbar()` warns).
+ * Errors use `role="alert"` and everything else `role="status"` (read out by assistive technology). iOS has no live region, so `announceForAccessibility` reads it out when a toast appears.
+ */
+export declare function Snackbar({ position, closeLabel }: SnackbarProps): import("react").JSX.Element | null;
+//#endregion

package/dist/native/once/snackbar.js

@@ -0,0 +1,106 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Text as Text$1 } from "../base/text.js";
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { dismissSnackbar, registerSnackbarHost, snackbarStore } from "../lib/snackbar.js";
+import { useEffect } from "react";
+import { AccessibilityInfo, Platform, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+//#region src/native/once/snackbar.tsx
+const ICON = {
+	success: "check-circle",
+	error: "alert-octagon",
+	info: "info",
+	warning: "alert-triangle"
+};
+/**
+* The home for toasts. Place exactly one at the app root (make the parent a full-screen View; the position is the top or bottom edge of that parent).
+* Corresponds to the web `once/snackbar` (sonner's Toaster).
+* The root needs `react-native-safe-area-context`'s `SafeAreaProvider` (Expo Router includes it by default).
+*
+* Show toasts with `snackbar()` from `lib/snackbar.ts`. **Nothing appears unless this is mounted** (in development `snackbar()` warns).
+* Errors use `role="alert"` and everything else `role="status"` (read out by assistive technology). iOS has no live region, so `announceForAccessibility` reads it out when a toast appears.
+*/
+function Snackbar({ position = "top", closeLabel = CLOSE_LABEL }) {
+	const items = snackbarStore.use();
+	const insets = useSafeAreaInsets();
+	useEffect(() => registerSnackbarHost(), []);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(View, {
+		pointerEvents: "box-none",
+		style: {
+			position: "absolute",
+			left: 0,
+			right: 0,
+			...position === "top" ? { top: insets.top } : { bottom: insets.bottom }
+		},
+		className: "gap-2 p-4",
+		children: items.map((item) => /* @__PURE__ */ jsx(Toast, {
+			item,
+			closeLabel
+		}, item.id))
+	});
+}
+function Toast({ item, closeLabel }) {
+	const ink = useTokenColor("--ink-1000");
+	const iconColor = {
+		success: useTokenColor("--state-success"),
+		error: useTokenColor("--state-error"),
+		warning: useTokenColor("--state-warning"),
+		info: ink
+	}[item.icon];
+	const { id, title, description, action } = item;
+	useEffect(() => {
+		if (Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(description ? `${title}。${description}` : title);
+	}, [title, description]);
+	return /* @__PURE__ */ jsxs(View, {
+		role: item.icon === "error" ? "alert" : "status",
+		"aria-live": item.icon === "error" ? "assertive" : "polite",
+		className: "flex-row items-start gap-3 rounded-surface border border-line bg-popover p-3 shadow-md",
+		children: [
+			/* @__PURE__ */ jsx(Feather, {
+				name: ICON[item.icon],
+				size: 16,
+				color: iconColor
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				className: "shrink grow gap-1",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					className: "text-sm font-medium",
+					children: title
+				}), description ? /* @__PURE__ */ jsx(Text$1, {
+					className: "text-muted-foreground text-xs",
+					children: description
+				}) : null]
+			}),
+			action ? /* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				hitSlop: 8,
+				onPress: () => {
+					dismissSnackbar(id);
+					action.onPress();
+				},
+				children: /* @__PURE__ */ jsx(Text$1, {
+					className: "text-action-ink text-xs font-medium underline",
+					children: action.label
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				accessibilityLabel: closeLabel,
+				hitSlop: 8,
+				onPress: () => dismissSnackbar(id),
+				children: /* @__PURE__ */ jsx(Feather, {
+					name: "x",
+					size: 14,
+					color: ink
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { Snackbar };

package/dist/native/styles.css

@@ -0,0 +1,46 @@
+/*
+ * love3's native styles (`@lt-three/love3/native/styles.css`). **The CSS entry point for Metro (real devices)**.
+ * Import it exactly once in the app's `global.css` (NativeWind v5 / react-native-css compiles it as Tailwind v4).
+ *
+ *   @import "@lt-three/love3/native/styles.css";
+ *
+ * **Not the same as `native/web/styles.css`.** That one is the entry point used when preview and vitest draw with react-native-web
+ * (it rides on web Tailwind, so `nativewind/theme` is not needed, and dark is `<html class="dark">`). It is not used on real devices.
+ *
+ * Contents: the Tailwind v4 core, the NativeWind theme, the tokens (`@lt-three/love3/styles.css`), and detection of component classes.
+ * Token values live in `src/tokens/definition.ts` (the single source of truth). No tokens are written here.
+ */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+
+@import "nativewind/theme";
+
+/* The token body (@theme, light, dark). It is generated, so to change values, edit definition.ts */
+@import "@lt-three/love3/styles.css";
+
+/*
+ * Pick up the Tailwind classes used by love3's native components. node_modules (through the workspace symlink) is
+ * outside automatic detection, so it is listed explicitly here. The `@source` paths are relative to this CSS file's location.
+ * In the published package (`dist/`) components are `*.js`, so both `tsx` and `js` are picked up (the same files exist in both src and dist).
+ * `web/` is a helper for react-native-web (it has no classes), so it is excluded.
+ */
+@source "./**/*.{tsx,js}";
+@source not "./**/*.test.tsx";
+@source not "./web/**";
+
+/*
+ * On native, `dark:` is resolved **by the OS color scheme setting, not by a class**.
+ *
+ * The default of `@lt-three/love3/styles.css` is `&:is(.dark *)` (it assumes web's `<html class="dark">`).
+ * Using that on native too would make `.dark` appear as an ancestor selector of rules that have `dark:`,
+ * so react-native-css would treat a view with `.dark` as a **container**
+ * and attach hover/active/focus tracking handlers. Then **a ScrollView among that view's descendants
+ * can no longer receive pan, and the whole app becomes unscrollable**
+ * (taps still go through, so it is easy to miss; confirmed on a real device).
+ *
+ * The OS color scheme can be switched with `Appearance.setColorScheme()` (`ThemeRoot` does this), so
+ * the app's in-app theme setting keeps working as before. `.dark` goes back to being a class that **only distributes variables**.
+ * `lib/tokens-check.ts` (`tokens.test.ts`) guards that no class creates a container.
+ */
+@custom-variant dark (@media (prefers-color-scheme: dark));

package/dist/shared/analytics.d.ts

@@ -0,0 +1,71 @@
+//#region src/shared/analytics.d.ts
+export type LinePoint = {
+  /** The heading shown in the readout (a date, for example). */
+  x: string | number;
+  y: number;
+  /**
+   * The value used for the horizontal position (a continuous quantity such as Unix seconds).
+   *
+   * **Always set it when overlaying multiple series.** When omitted, points are spaced evenly by order,
+   * so when series with different intervals (a daily balance and irregularly spaced equity) are overlaid,
+   * the same horizontal position would point to different times.
+   */
+  t?: number;
+};
+/** One line of a multi-series line chart. */
+export type LineSeries = {
+  /** The React key and the identifier of the series. */
+  key: string;
+  /** The name shown in the legend. */
+  label: string;
+  points: LinePoint[];
+  /** The line color. A CSS color (a token reference such as `var(--chart-1)` is recommended). */
+  color: string;
+  /** Draw the line dashed (to tell a secondary series from the primary one). */
+  dashed?: boolean;
+};
+/** The line chart props for visual dimensions and the spoken summary (shared by web and native). */
+export type ChartCommonProps = {
+  height?: number;
+  /**
+   * A summary of the chart for screen readers (for example: "The balance rose from $1,000 on January 1 to $1,210 on the 7th"). When passed, it becomes the
+   * name of `role="img"`. **The graphic (svg) itself has no name**, so this is how the values reach users who cannot read them
+   * (screen reader and keyboard users). This is a shared package, so the wording is left to the consumer.
+   */
+  accessibilityLabel?: string;
+};
+/** A single-series line chart (`LineChart`). */
+export type LineChartSharedProps = {
+  data: LinePoint[];
+  color?: string;
+};
+/** A multi-series line chart (`MultiLineChart`). */
+export type MultiLineChartSharedProps = {
+  series: LineSeries[];
+  /** Formats the vertical axis ticks. Currency symbols and the like are decided by the consumer. */
+  formatValue?: (value: number) => string;
+  /** The text shown when every series is empty. */
+  emptyText?: string;
+};
+/** A single metric on a surface (`MetricCard`). */
+export type MetricCardSharedProps = {
+  label: string;
+  value: string;
+  subValue?: string;
+  /** The sign of the change. The value is colored state-success when positive and state-error when negative (token colors; they follow dark mode too). */
+  trend?: number;
+  className?: string;
+};
+/** A number whose color changes with its sign (`ColoredValue`). */
+export interface ColoredValueSharedProps<TValue> {
+  value: TValue;
+  format?: (value: TValue) => string;
+  isPositive?: (value: TValue) => boolean;
+  isNegative?: (value: TValue) => boolean;
+  /** The class for an increase. Defaults to `text-state-success` (a token; follows dark mode). */
+  positiveColor?: string;
+  /** The class for a decrease. Defaults to `text-state-error`. */
+  negativeColor?: string;
+  className?: string;
+}
+//#endregion

package/dist/shared/button.d.ts

@@ -0,0 +1,7 @@
+//#region src/shared/button.d.ts
+export declare const BUTTON_VARIANTS: readonly ["default", "destructive", "outline", "secondary", "ghost", "link", "plate", "<3"];
+/** `"<3"` is the Less Than Three brand color (pink fill). Meant for a confirming action, placed only once per screen */
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export declare const BUTTON_SIZES: readonly ["default", "xs", "sm", "lg", "xl", "icon", "icon-xs"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+//#endregion

package/dist/shared/button.js

@@ -0,0 +1,23 @@
+//#region src/shared/button.ts
+const BUTTON_VARIANTS = [
+	"default",
+	"destructive",
+	"outline",
+	"secondary",
+	"ghost",
+	"link",
+	"plate",
+	"<3"
+];
+const BUTTON_SIZES = [
+	"default",
+	"xs",
+	"sm",
+	"lg",
+	"xl",
+	"icon",
+	"icon-xs"
+];
+
+//#endregion
+export { BUTTON_SIZES, BUTTON_VARIANTS };