@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,281 @@
+"use client";
+
+import { create, props } from "@stylexjs/stylex";
+import { defineChart } from "@tanstack/charts";
+import {
+	angleGrid,
+	focusGroupAngle,
+	polar,
+	radialArea,
+	radialGrid,
+	radialLine,
+} from "@tanstack/charts/polar";
+import type { ChartTooltipBodyRenderContext } from "@tanstack/charts/react/tooltip";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scalePoint } from "@tanstack/charts/scales/point";
+import { tooltip as tooltipFeature } from "@tanstack/charts/tooltip";
+import { curveLinearClosed } from "d3-shape";
+import type { ComponentPropsWithRef } from "react";
+import { useMemo } from "react";
+import type { Closed } from "../../closed";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { assertIdentity, assertNonNegative } from "../chart-frame/chart-assert";
+import { chartColors } from "../chart-frame/chart-colors";
+import { ChartFrame } from "../chart-frame/chart-frame";
+import { ChartLegend } from "../chart-legend/chart-legend";
+import { ChartTooltip } from "../chart-tooltip/chart-tooltip";
+
+export interface RadarChartAxis {
+	id: string;
+	label: string;
+}
+
+export interface RadarChartSeries {
+	id: string;
+	label: string;
+	/** One value per axis, in axis order. */
+	values: readonly number[];
+}
+
+export type RadarChartProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-description"?: string;
+	"aria-label": string;
+	/** Three to eight axes, clockwise from the top. */
+	axes: readonly RadarChartAxis[];
+	formatValue?: (value: number) => string;
+	/** Shows the series legend below the chart. Turn it off when a card header shows it. */
+	legend?: boolean;
+	locale?: string;
+	/** The value at the outer ring. Defaults to the largest value. */
+	max?: number;
+	/** Up to three series; any two can overlap, so only three hues stay distinct. */
+	series: readonly RadarChartSeries[];
+};
+
+interface RadarRow {
+	axis: string;
+	id: string;
+	series: string;
+	value: number;
+}
+
+const NAME = "RadarChart";
+const TONES = ["series1", "series2", "series3"] as const;
+const RINGS = [0.25, 0.5, 0.75, 1];
+
+const styles = create({
+	legend: { marginBlockStart: space["2"] },
+	root: { minWidth: 0 },
+});
+
+function seriesRows(
+	entry: RadarChartSeries,
+	axes: readonly RadarChartAxis[]
+): RadarRow[] {
+	const values: readonly number[] = entry.values;
+	if (!Array.isArray(values) || values.length !== axes.length) {
+		throw new RangeError(`${NAME} series need one value per axis.`);
+	}
+	return values.map((value, index) => {
+		assertNonNegative(NAME, value);
+		const axis = axes[index].id;
+		return { axis, id: `${entry.id}:${axis}`, series: entry.id, value };
+	});
+}
+
+function prepare(
+	axes: readonly RadarChartAxis[],
+	series: readonly RadarChartSeries[]
+) {
+	if (!Array.isArray(axes) || axes.length < 3 || axes.length > 8) {
+		throw new RangeError(`${NAME} needs three to eight axes.`);
+	}
+	if (!Array.isArray(series) || series.length === 0 || series.length > 3) {
+		throw new RangeError(`${NAME} needs one to three series.`);
+	}
+	const axisIds = new Set<string>();
+	for (const axis of axes) {
+		assertIdentity(NAME, axis, axisIds);
+	}
+	const seriesIds = new Set<string>();
+	return series.flatMap((entry) => {
+		assertIdentity(NAME, entry, seriesIds);
+		return seriesRows(entry, axes);
+	});
+}
+
+function renderTooltip(
+	context: ChartTooltipBodyRenderContext<RadarRow, string, number>,
+	axes: readonly RadarChartAxis[],
+	series: readonly RadarChartSeries[],
+	format: (value: number) => string
+) {
+	const point = context.primaryPoint ?? context.points[0];
+	if (!point) {
+		return null;
+	}
+	const values = new Map(
+		context.points.map(({ datum }) => [datum.series, datum.value])
+	);
+	return (
+		<ChartTooltip
+			items={series.flatMap(({ id, label }, index) =>
+				values.has(id)
+					? [
+							{
+								id,
+								label,
+								tone: TONES[index],
+								value: format(values.get(id) ?? 0),
+							},
+						]
+					: []
+			)}
+			label={axes.find(({ id }) => id === point.datum.axis)?.label}
+		/>
+	);
+}
+
+function assertOptions(ariaLabel: string, max: number | undefined) {
+	if (typeof ariaLabel !== "string" || !ariaLabel.trim()) {
+		throw new TypeError(`${NAME} requires a non-empty aria-label.`);
+	}
+	if (max !== undefined && !(Number.isFinite(max) && max > 0)) {
+		throw new RangeError(`${NAME} max must be positive.`);
+	}
+}
+
+/** Up to three profiles across three to eight measures on one scale. */
+export function RadarChart({
+	"aria-description": ariaDescription,
+	"aria-label": ariaLabel,
+	axes,
+	formatValue,
+	legend = true,
+	locale = "en-US",
+	max,
+	ref: forwardedRef,
+	series,
+	...rest
+}: RadarChartProps) {
+	assertOptions(ariaLabel, max);
+	for (const name of [
+		"aria-label",
+		"children",
+		"className",
+		"data-slot",
+		"role",
+		"style",
+	]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const rows = useMemo(() => prepare(axes, series), [axes, series]);
+	const format = useMemo(
+		() => formatValue ?? new Intl.NumberFormat(locale).format,
+		[formatValue, locale]
+	);
+	const outer = max ?? Math.max(1, ...rows.map(({ value }) => value));
+	const definition = useMemo(() => {
+		const labels = new Map(axes.map(({ id, label }) => [id, label]));
+		const tones = new Map(series.map(({ id }, index) => [id, TONES[index]]));
+		const toneOf = (row: RadarRow) =>
+			chartColors[tones.get(row.series) ?? "series1"];
+		const marks = series.flatMap(({ id }) => {
+			const own = rows.filter((row) => row.series === id);
+			return [
+				radialArea(own, {
+					angle: "axis",
+					curve: curveLinearClosed,
+					fill: toneOf,
+					fillOpacity: 0.16,
+					id: `radar-area-${id}`,
+					key: "id",
+					radius: "value",
+				}),
+				radialLine(own, {
+					angle: "axis",
+					curve: curveLinearClosed,
+					id: `radar-line-${id}`,
+					key: "id",
+					points: true,
+					radius: "value",
+					stroke: toneOf,
+					strokeWidth: 2,
+					z: "series",
+				}),
+			];
+		});
+		return defineChart(
+			{
+				marks: [
+					polar({
+						guides: [
+							radialGrid({
+								shape: "polygon",
+								stroke: colors.border,
+								strokeOpacity: 1,
+								values: RINGS.map((ring) => ring * outer),
+							}),
+							angleGrid({
+								format: (axis) => labels.get(String(axis)) ?? String(axis),
+								labels: true,
+								stroke: colors.border,
+								strokeOpacity: 1,
+							}),
+						],
+						marks,
+						radiusRatio: 0.72,
+						scales: {
+							angle: {
+								scale: scalePoint<string>().domain(axes.map(({ id }) => id)),
+								wrap: true,
+							},
+							radius: { scale: scaleLinear().domain([0, outer]) },
+						},
+					}),
+				],
+				scales: { x: null, y: null },
+			},
+			{ focus: focusGroupAngle, tooltip: tooltipFeature }
+		);
+	}, [axes, outer, rows, series]);
+	const renderTooltipBody = useMemo(
+		() => (context: ChartTooltipBodyRenderContext<RadarRow, string, number>) =>
+			renderTooltip(context, axes, series, format),
+		[axes, format, series]
+	);
+
+	return (
+		<div
+			{...rest}
+			data-slot="radar-chart"
+			ref={forwardedRef}
+			{...props(styles.root)}
+		>
+			<ChartFrame
+				aria-description={ariaDescription}
+				aria-label={ariaLabel}
+				definition={definition}
+				height={300}
+				renderTooltipBody={renderTooltipBody}
+				tabIndex={0}
+			/>
+			{legend && series.length > 1 ? (
+				<div {...props(styles.legend)}>
+					<ChartLegend
+						aria-label={`${ariaLabel} series`}
+						items={series.map(({ id, label }, index) => ({
+							id,
+							label,
+							tone: TONES[index],
+						}))}
+					/>
+				</div>
+			) : null}
+		</div>
+	);
+}

package/src/components/radial-bars/radial-bars.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { create, props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, useMemo } from "react";
+import type { Closed } from "../../closed";
+import { colors } from "../../styles/colors.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { typeRoles } from "../../styles/typography.styles";
+import { fontWeight } from "../../styles/typography.stylex";
+import {
+	assertAriaLabel,
+	assertIdentity,
+	assertNonNegative,
+} from "../chart-frame/chart-assert";
+import { type ChartSeriesTone, chartColors } from "../chart-frame/chart-colors";
+import { ChartHoverTooltip, useChartHover } from "../chart-frame/chart-hover";
+import { RingGraphic } from "../chart-frame/ring-graphic";
+
+export interface RadialBarsItem {
+	id: string;
+	label: string;
+	value: number;
+}
+
+export type RadialBarsProps = Omit<
+	Closed<ComponentPropsWithRef<"figure">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	formatValue?: (value: number) => string;
+	/** Up to six items, drawn largest outermost. */
+	items: readonly RadialBarsItem[];
+	locale?: string;
+};
+
+const NAME = "RadialBars";
+const TONES = [
+	"series1",
+	"series2",
+	"series3",
+	"series4",
+	"series5",
+	"series6",
+] as const satisfies readonly ChartSeriesTone[];
+const DIAMETER = 200;
+const GAP = 4;
+// The largest bar spans three quarters of a turn, which keeps outer rings from
+// exaggerating their values as much as a full circle would.
+const SWEEP = 0.75;
+
+const styles = create({
+	label: {
+		alignItems: "center",
+		color: colors.mutedContent,
+		display: "flex",
+		gap: space["2"],
+		minWidth: 0,
+	},
+	list: {
+		alignSelf: "stretch",
+		display: "grid",
+		gap: space["2"],
+		gridTemplateColumns: "repeat(auto-fit, minmax(7rem, 1fr))",
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	root: {
+		alignItems: "center",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		margin: 0,
+		minWidth: 0,
+	},
+	swatch: (backgroundColor: string) => ({
+		backgroundColor,
+		blockSize: "0.625rem",
+		borderRadius: 3,
+		flexShrink: 0,
+		inlineSize: "0.625rem",
+	}),
+	tile: {
+		backgroundColor: colors.surface,
+		borderRadius: shape.controlRadius,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		minWidth: 0,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+	},
+	value: {
+		color: colors.content,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+	},
+});
+
+function assertItems(items: readonly RadialBarsItem[]) {
+	if (
+		!Array.isArray(items) ||
+		items.length === 0 ||
+		items.length > TONES.length
+	) {
+		throw new RangeError(`${NAME} needs one to six items.`);
+	}
+	const ids = new Set<string>();
+	for (const item of items) {
+		assertIdentity(NAME, item, ids);
+		assertNonNegative(NAME, item.value);
+	}
+}
+
+/**
+ * Concentric bars around a center, one per item, largest outermost. Read the
+ * exact values in the tiles; arc length is a quick ranking, not a measure.
+ */
+export function RadialBars({
+	"aria-label": ariaLabel,
+	formatValue,
+	items,
+	locale = "en-US",
+	ref: forwardedRef,
+	...rest
+}: RadialBarsProps) {
+	assertAriaLabel(NAME, ariaLabel);
+	assertItems(items);
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const format = formatValue ?? new Intl.NumberFormat(locale).format;
+	// Tones follow input order, so sorting never repaints an item.
+	const ranked = items
+		.map((item, index) => ({ ...item, tone: TONES[index] }))
+		.sort((left, right) => right.value - left.value);
+	const max = ranked[0]?.value || 1;
+	const stroke = Math.min(16, (DIAMETER * 0.36) / ranked.length - GAP);
+	const hover = useChartHover();
+	const { fade, hostRef, hostStyle, linkProps, markProps } = hover;
+	// Hovering a bar shows its value; hovering a tile lights its bar.
+	const ringHover = useMemo(() => {
+		const tips = new Map(
+			ranked.map(({ id, label, tone, value }) => [
+				id,
+				{ items: [{ id, label, tone, value: format(value) }] },
+			])
+		);
+		return { fade, markProps: (id: string) => markProps(id, tips.get(id)) };
+	}, [fade, format, markProps, ranked]);
+
+	return (
+		<figure
+			{...rest}
+			aria-label={ariaLabel}
+			data-slot="radial-bars"
+			ref={forwardedRef}
+			{...props(styles.root, typeRoles.ui)}
+		>
+			<div ref={hostRef} {...props(hostStyle)}>
+				<RingGraphic
+					diameter={DIAMETER}
+					gap={GAP}
+					hover={ringHover}
+					rings={ranked.map(({ id, tone, value }) => ({
+						fraction: value / max,
+						id,
+						tone,
+					}))}
+					stroke={stroke}
+					sweep={SWEEP}
+				/>
+				<ChartHoverTooltip hover={hover.hover} />
+			</div>
+			<ul {...props(styles.list)}>
+				{items.map(({ id, label, value }, index) => (
+					<li
+						data-slot="radial-bars-item"
+						key={id}
+						{...linkProps(id)}
+						{...props(styles.tile, ...fade(id))}
+					>
+						<span {...props(styles.label)}>
+							<span
+								aria-hidden="true"
+								{...props(styles.swatch(chartColors[TONES[index]]))}
+							/>
+							{label}
+						</span>
+						<span {...props(styles.value)}>{format(value)}</span>
+					</li>
+				))}
+			</ul>
+		</figure>
+	);
+}

package/src/components/radio/radio-card.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Field as BaseField } from "@base-ui/react/field";
+import { props } from "@stylexjs/stylex";
+import { type ReactNode, useId } from "react";
+import { checkboxCardStyles } from "../checkbox/checkbox-card.styles";
+import { Field, FieldDescription, FieldError } from "../field/field";
+import { Radio, type RadioProps } from "./radio";
+
+type RadioCardControlProps<Value> = Pick<
+	RadioProps<Value>,
+	"aria-describedby" | "id" | "inputRef" | "readOnly" | "required" | "value"
+> & {
+	disabled?: boolean;
+	invalid?: boolean;
+	ref?: RadioProps<Value>["ref"];
+	size?: RadioProps<Value>["size"];
+};
+
+export type RadioCardProps<Value = unknown> = RadioCardControlProps<Value> & {
+	description?: ReactNode;
+	error?: ReactNode;
+	label: ReactNode;
+};
+
+export function RadioCard<Value = unknown>({
+	description,
+	disabled = false,
+	error,
+	invalid = false,
+	label,
+	...radioProps
+}: RadioCardProps<Value>) {
+	const labelId = useId();
+
+	return (
+		<Field disabled={disabled} invalid={invalid}>
+			<BaseField.Label {...props(checkboxCardStyles.label)}>
+				<Radio
+					{...radioProps}
+					aria-labelledby={labelId}
+					disabled={disabled}
+					invalid={invalid}
+				/>
+				<span {...props(checkboxCardStyles.content)}>
+					<span id={labelId}>{label}</span>
+					{description !== undefined && description !== null ? (
+						<FieldDescription render={<span />}>{description}</FieldDescription>
+					) : null}
+				</span>
+			</BaseField.Label>
+			{error !== undefined && error !== null ? (
+				<FieldError match>{error}</FieldError>
+			) : null}
+		</Field>
+	);
+}

package/src/components/radio/radio.styles.ts

@@ -0,0 +1,57 @@
+import { create } from "@stylexjs/stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { scale } from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+
+export const radioStyles = create({
+	indicator: {
+		backgroundColor: "currentColor",
+		borderRadius: "9999px",
+		display: "block",
+		height: "0.5rem",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		pointerEvents: "none",
+		transform: {
+			"[data-ending-style]": "scale(0)",
+			"[data-starting-style]": "scale(0)",
+			default: "scale(1)",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: {
+			"[data-ending-style]": easing.easeOut,
+			default: easing.spring,
+		},
+		width: "0.5rem",
+	},
+	root: {
+		borderEndEndRadius: "9999px",
+		borderEndStartRadius: "9999px",
+		borderStartEndRadius: "9999px",
+		borderStartStartRadius: "9999px",
+		transform: {
+			[conditions.reducedMotion]: "none",
+			":active:not([data-disabled]):not([data-readonly])": `scale(${scale.pressed})`,
+			default: "none",
+		},
+	},
+	sizeDefault: {
+		height: "1.125rem",
+		width: "1.125rem",
+	},
+	sizeLg: {
+		height: "1.25rem",
+		width: "1.25rem",
+	},
+	sizeSm: {
+		height: "1rem",
+		width: "1rem",
+	},
+});

package/src/components/radio/radio.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Radio as BaseRadio, type RadioRootProps } from "@base-ui/react/radio";
+import { props } from "@stylexjs/stylex";
+import { checkboxStyles } from "../checkbox/checkbox.styles";
+import { radioStyles } from "./radio.styles";
+
+export type RadioSize = "default" | "lg" | "sm";
+
+export type RadioProps<Value = unknown> = Omit<
+	RadioRootProps<Value>,
+	| "children"
+	| "className"
+	| "disabled"
+	| "nativeButton"
+	| "ref"
+	| "render"
+	| "style"
+> & {
+	disabled?: boolean;
+	invalid?: boolean;
+	ref?: RadioRootProps<Value>["ref"];
+	size?: RadioSize;
+};
+
+const sizeStyles = {
+	default: radioStyles.sizeDefault,
+	lg: radioStyles.sizeLg,
+	sm: radioStyles.sizeSm,
+};
+
+export function Radio<Value = unknown>({
+	disabled = false,
+	invalid = false,
+	readOnly = false,
+	ref: forwardedRef = undefined,
+	size = "default",
+	...rest
+}: RadioProps<Value>) {
+	return (
+		<BaseRadio.Root
+			{...rest}
+			aria-invalid={invalid || undefined}
+			data-slot="radio"
+			disabled={disabled}
+			readOnly={readOnly}
+			ref={forwardedRef}
+			{...props(
+				checkboxStyles.base,
+				checkboxStyles.forcedColorsSelected,
+				radioStyles.root,
+				sizeStyles[size]
+			)}
+		>
+			<BaseRadio.Indicator
+				data-slot="radio-indicator"
+				{...props(radioStyles.indicator)}
+			/>
+		</BaseRadio.Root>
+	);
+}

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {
+	RadioGroup as BaseRadioGroup,
+	type RadioGroupProps as BaseRadioGroupProps,
+} from "@base-ui/react/radio-group";
+import { props } from "@stylexjs/stylex";
+import { checkboxGroupStyles } from "../checkbox-group/checkbox-group.styles";
+
+export type RadioGroupProps<Value = unknown> = Omit<
+	BaseRadioGroupProps<Value>,
+	"className" | "render" | "style"
+>;
+
+export function RadioGroup<Value = unknown>({
+	children,
+	ref: forwardedRef = undefined,
+	...rest
+}: RadioGroupProps<Value>) {
+	return (
+		<BaseRadioGroup
+			{...rest}
+			ref={forwardedRef}
+			{...props(checkboxGroupStyles.root)}
+		>
+			{children}
+		</BaseRadioGroup>
+	);
+}