@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/chart-frame/ring-graphic.tsx

@@ -0,0 +1,100 @@
+import { create, props, type StyleXStyles } from "@stylexjs/stylex";
+import type { PointerEventHandler } from "react";
+import { conditions } from "../../styles/conditions.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { arcPath } from "./arc-path";
+import { type ChartSeriesTone, chartColors } from "./chart-colors";
+
+/** Optional hover wiring from `useChartHover`. */
+export interface RingGraphicHover {
+	fade: (id: string) => readonly (StyleXStyles | false)[];
+	markProps: (id: string) => {
+		onPointerLeave: PointerEventHandler;
+		onPointerMove: PointerEventHandler;
+	};
+}
+
+export interface RingGraphicRing {
+	/** The filled share of the track, from 0 to 1. */
+	fraction: number;
+	id: string;
+	tone: ChartSeriesTone;
+}
+
+// The track is the ring's own hue, quiet enough that the fill reads first.
+const TRACK_OPACITY = 0.18;
+
+const styles = create({
+	// The fill is a dash on the whole track, so a new value glides along it.
+	fill: {
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "stroke-dasharray, opacity",
+		transitionTimingFunction: easing.expoOut,
+	},
+	svg: { display: "block", flexShrink: 0, overflow: "visible" },
+});
+
+/**
+ * Concentric rounded arcs, outermost first, each over a track of the same
+ * hue. `sweep` is how much of the circle a full track covers, in turns.
+ */
+export function RingGraphic({
+	diameter,
+	gap,
+	hover,
+	rings,
+	stroke,
+	sweep = 1,
+}: {
+	diameter: number;
+	gap: number;
+	hover?: RingGraphicHover;
+	rings: readonly RingGraphicRing[];
+	stroke: number;
+	sweep?: number;
+}) {
+	const center = diameter / 2;
+	return (
+		<svg
+			aria-hidden="true"
+			height={diameter}
+			viewBox={`0 0 ${diameter} ${diameter}`}
+			width={diameter}
+			{...props(styles.svg)}
+		>
+			{rings.map(({ fraction, id, tone }, index) => {
+				const radius = center - stroke / 2 - index * (stroke + gap);
+				const color = chartColors[tone];
+				const fill = Math.min(Math.max(fraction, 0), 1) * sweep;
+				return (
+					<g
+						fill="none"
+						key={id}
+						strokeLinecap="round"
+						strokeWidth={stroke}
+						{...hover?.markProps(id)}
+						{...(hover ? props(...hover.fade(id)) : null)}
+					>
+						<path
+							d={arcPath(center, center, radius, 0, sweep)}
+							stroke={color}
+							strokeOpacity={TRACK_OPACITY}
+						/>
+						{/* An empty ring hides its fill: a round cap would leave a dot. */}
+						<path
+							d={arcPath(center, center, radius, 0, sweep)}
+							opacity={fill > 0 ? 1 : 0}
+							pathLength={sweep}
+							stroke={color}
+							strokeDasharray={`${fill} ${sweep + 1}`}
+							{...props(styles.fill)}
+						/>
+					</g>
+				);
+			})}
+		</svg>
+	);
+}

package/src/components/chart-legend/chart-legend.styles.ts

@@ -0,0 +1,80 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight } from "../../styles/typography.stylex";
+
+export const chartLegendSwatches = create({
+	muted: { backgroundColor: colors.chartReference },
+	series1: { backgroundColor: colors.chartSeries1 },
+	series2: { backgroundColor: colors.chartSeries2 },
+	series3: { backgroundColor: colors.chartSeries3 },
+	series4: { backgroundColor: colors.chartSeries4 },
+	series5: { backgroundColor: colors.chartSeries5 },
+	series6: { backgroundColor: colors.chartSeries6 },
+});
+
+export const chartLegendStyles = create({
+	item: {
+		alignItems: "center",
+		display: "flex",
+		gap: space["2"],
+		maxInlineSize: "100%",
+		minWidth: 0,
+	},
+	list: {
+		columnGap: space["3"],
+		display: "flex",
+		flexWrap: "wrap",
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+		rowGap: space["2"],
+	},
+	name: {
+		alignItems: "center",
+		display: "flex",
+		gap: space["2"],
+		minWidth: 0,
+	},
+	// Labels are quiet so the swatches and values carry the legend.
+	root: {
+		color: colors.mutedContent,
+		fontWeight: fontWeight.medium,
+		minWidth: 0,
+	},
+	swatch: {
+		blockSize: 6,
+		borderRadius: "999px",
+		flexShrink: 0,
+		inlineSize: 6,
+	},
+	// A value tile on the surface inside a workarea card; its corners nest
+	// inside the card's 16px corners.
+	tile: {
+		backgroundColor: colors.surface,
+		borderRadius: `calc(${shape.controlRadiusLarge} - ${space["2"]})`,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		minWidth: 0,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+	},
+	tileSwatch: { blockSize: 12, borderRadius: 4, inlineSize: 12 },
+	tiles: {
+		display: "grid",
+		gap: space["2"],
+		gridTemplateColumns: "repeat(auto-fit, minmax(7rem, 1fr))",
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	tileValue: { marginInlineStart: 0 },
+	value: {
+		color: colors.content,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+		marginInlineStart: space["1"],
+	},
+});

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

@@ -0,0 +1,107 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { controlLabel } from "../../control-label";
+import { typeRoles } from "../../styles/typography.styles";
+import type { ChartSeriesTone } from "../chart-frame/chart-colors";
+import { chartLegendStyles, chartLegendSwatches } from "./chart-legend.styles";
+
+export interface ChartLegendItem {
+	id: string;
+	label: ReactNode;
+	tone: ChartSeriesTone;
+	/** A total or current value shown after the label, such as "50,500". */
+	value?: ReactNode;
+}
+
+export type ChartLegendProps = Omit<
+	Closed<ComponentPropsWithRef<"ul">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	items: readonly ChartLegendItem[];
+	/** tiles shows each item as a tile with its value below the label. */
+	variant?: ChartLegendVariant;
+};
+
+export type ChartLegendVariant = "inline" | "tiles";
+
+function protectProps(attributes: Record<string, unknown>) {
+	for (const name of [
+		"aria-label",
+		"children",
+		"className",
+		"data-slot",
+		"role",
+		"style",
+	]) {
+		Reflect.deleteProperty(attributes, name);
+	}
+}
+
+function assertUniqueIds(items: readonly ChartLegendItem[]) {
+	if (new Set(items.map(({ id }) => id)).size !== items.length) {
+		throw new TypeError("ChartLegend item ids must be unique.");
+	}
+}
+
+export function ChartLegend({
+	"aria-label": ariaLabel,
+	items,
+	ref: forwardedRef,
+	variant = "inline",
+	...rest
+}: ChartLegendProps) {
+	if (typeof ariaLabel !== "string" || !ariaLabel.trim()) {
+		throw new TypeError("ChartLegend requires a non-empty aria-label.");
+	}
+	protectProps(rest);
+	assertUniqueIds(items);
+	const tiles = variant === "tiles";
+
+	return (
+		<ul
+			{...rest}
+			aria-label={ariaLabel}
+			data-slot="chart-legend"
+			ref={forwardedRef}
+			{...props(
+				chartLegendStyles.root,
+				tiles ? chartLegendStyles.tiles : chartLegendStyles.list,
+				typeRoles.ui
+			)}
+		>
+			{items.map(({ id, label, tone, value }) => (
+				<li
+					data-slot="chart-legend-item"
+					key={id}
+					{...props(tiles ? chartLegendStyles.tile : chartLegendStyles.item)}
+				>
+					<span {...props(chartLegendStyles.name)}>
+						<span
+							aria-hidden="true"
+							data-slot="chart-legend-swatch"
+							{...props(
+								chartLegendStyles.swatch,
+								tiles && chartLegendStyles.tileSwatch,
+								chartLegendSwatches[tone]
+							)}
+						/>
+						{controlLabel(label)}
+					</span>
+					{value === undefined ? null : (
+						<span
+							data-slot="chart-legend-value"
+							{...props(
+								chartLegendStyles.value,
+								tiles && chartLegendStyles.tileValue
+							)}
+						>
+							{value}
+						</span>
+					)}
+				</li>
+			))}
+		</ul>
+	);
+}

package/src/components/chart-tooltip/chart-tooltip.styles.ts

@@ -0,0 +1,71 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight } from "../../styles/typography.stylex";
+
+export const chartTooltipSwatches = create({
+	muted: { backgroundColor: colors.chartReference },
+	series1: { backgroundColor: colors.chartSeries1 },
+	series2: { backgroundColor: colors.chartSeries2 },
+	series3: { backgroundColor: colors.chartSeries3 },
+	series4: { backgroundColor: colors.chartSeries4 },
+	series5: { backgroundColor: colors.chartSeries5 },
+	series6: { backgroundColor: colors.chartSeries6 },
+});
+
+export const chartTooltipStyles = create({
+	label: {
+		fontWeight: fontWeight.semibold,
+		margin: 0,
+	},
+	root: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: 1,
+		boxShadow: shadows.floating,
+		color: colors.content,
+		display: "grid",
+		gap: space["2"],
+		minWidth: 0,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+	},
+	row: {
+		alignItems: "baseline",
+		display: "grid",
+		gap: space["3"],
+		gridTemplateColumns: "minmax(0, 1fr) auto",
+	},
+	rows: {
+		display: "grid",
+		gap: space["1"],
+		margin: 0,
+	},
+	swatch: {
+		blockSize: 6,
+		borderRadius: "50%",
+		flexShrink: 0,
+		inlineSize: 6,
+	},
+	term: {
+		alignItems: "center",
+		color: colors.secondaryContent,
+		display: "flex",
+		gap: space["1"],
+		minWidth: 0,
+	},
+	value: {
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+		margin: 0,
+		textAlign: "end",
+	},
+});

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

@@ -0,0 +1,94 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import type { ChartSeriesTone } from "../chart-frame/chart-colors";
+import {
+	chartTooltipStyles,
+	chartTooltipSwatches,
+} from "./chart-tooltip.styles";
+
+export interface ChartTooltipItem {
+	id: string;
+	label: ReactNode;
+	tone: ChartSeriesTone;
+	value: ReactNode;
+}
+
+export type ChartTooltipProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "data-slot" | "role"
+> & {
+	items: readonly ChartTooltipItem[];
+	label?: ReactNode;
+};
+
+function protectProps(attributes: Record<string, unknown>) {
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(attributes, name);
+	}
+}
+
+function assertUniqueIds(items: readonly ChartTooltipItem[]) {
+	if (new Set(items.map(({ id }) => id)).size !== items.length) {
+		throw new TypeError("ChartTooltip item ids must be unique.");
+	}
+}
+
+export function ChartTooltip({
+	items,
+	label,
+	ref: forwardedRef,
+	...rest
+}: ChartTooltipProps) {
+	protectProps(rest);
+	if (items.length === 0) {
+		return null;
+	}
+	assertUniqueIds(items);
+
+	return (
+		<div
+			{...rest}
+			data-slot="chart-tooltip"
+			ref={forwardedRef}
+			{...props(chartTooltipStyles.root, typeRoles.ui)}
+		>
+			{label === null || label === undefined ? null : (
+				<p data-slot="chart-tooltip-label" {...props(chartTooltipStyles.label)}>
+					{label}
+				</p>
+			)}
+			<dl data-slot="chart-tooltip-rows" {...props(chartTooltipStyles.rows)}>
+				{items.map(({ id, label: itemLabel, tone, value }) => (
+					<div
+						data-slot="chart-tooltip-row"
+						key={id}
+						{...props(chartTooltipStyles.row)}
+					>
+						<dt
+							data-slot="chart-tooltip-term"
+							{...props(chartTooltipStyles.term)}
+						>
+							<span
+								aria-hidden="true"
+								data-slot="chart-tooltip-swatch"
+								{...props(
+									chartTooltipStyles.swatch,
+									chartTooltipSwatches[tone]
+								)}
+							/>
+							{itemLabel}
+						</dt>
+						<dd
+							data-slot="chart-tooltip-value"
+							{...props(chartTooltipStyles.value)}
+						>
+							{value}
+						</dd>
+					</div>
+				))}
+			</dl>
+		</div>
+	);
+}

package/src/components/checkbox/checkbox-card.styles.ts

@@ -0,0 +1,75 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const checkboxCardStyles = create({
+	content: {
+		display: "flex",
+		flexBasis: "0%",
+		flexDirection: "column",
+		flexGrow: 1,
+		flexShrink: 1,
+		gap: space["1"],
+		minWidth: 0,
+	},
+	label: {
+		alignItems: "flex-start",
+		backgroundColor: {
+			":has([data-checked], [data-indeterminate]):not(:has([data-disabled]))":
+				colors.brandBackground,
+			":has([data-disabled])": colors.controlSurfaceDisabled,
+			":has([data-disabled]):hover": colors.controlSurfaceDisabled,
+			":has([data-readonly]):not(:has([data-disabled], [data-checked], [data-indeterminate])):hover":
+				colors.controlSurface,
+			":hover": { [conditions.canHover]: colors.controlSurfaceHover },
+			default: colors.controlSurface,
+		},
+		borderColor: {
+			":has([aria-invalid='true'], [data-invalid]):not(:has([data-disabled]))":
+				colors.destructive,
+			":has([data-checked], [data-indeterminate]):not(:has([data-disabled], [aria-invalid='true'], [data-invalid]))":
+				colors.brandForeground,
+			":has([data-disabled])": "transparent",
+			default: colors.border,
+		},
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: {
+			":has([data-disabled], [data-readonly]):hover": shadows.outlineRest,
+			":hover": { [conditions.canHover]: shadows.outlineHover },
+			default: shadows.outlineRest,
+		},
+		boxSizing: "border-box",
+		color: colors.content,
+		cursor: {
+			":has([data-disabled])": "not-allowed",
+			":has([data-readonly]):not(:has([data-disabled]))": "default",
+			default: "pointer",
+		},
+		display: "flex",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.medium,
+		gap: space["2"],
+		lineHeight: lineHeight["24"],
+		paddingBlock: space["3"],
+		paddingInline: space["3"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, border-color, box-shadow",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+});

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { Field as BaseField } from "@base-ui/react/field";
+import { props } from "@stylexjs/stylex";
+import { type ReactNode, useId } from "react";
+import { Field, FieldDescription, FieldError } from "../field/field";
+import { Checkbox, type CheckboxProps } from "./checkbox";
+import { checkboxCardStyles } from "./checkbox-card.styles";
+
+type CheckboxCardControlProps = Pick<
+	CheckboxProps,
+	| "aria-describedby"
+	| "checked"
+	| "defaultChecked"
+	| "form"
+	| "id"
+	| "indeterminate"
+	| "inputRef"
+	| "onCheckedChange"
+	| "readOnly"
+	| "required"
+	| "value"
+	| "uncheckedValue"
+> & {
+	disabled?: boolean;
+	invalid?: boolean;
+	name?: CheckboxProps["name"];
+	ref?: CheckboxProps["ref"];
+	size?: CheckboxProps["size"];
+};
+
+export type CheckboxCardProps = CheckboxCardControlProps & {
+	description?: ReactNode;
+	error?: ReactNode;
+	label: ReactNode;
+};
+
+export function CheckboxCard({
+	description,
+	disabled = false,
+	error,
+	invalid = false,
+	label,
+	name,
+	...checkboxProps
+}: CheckboxCardProps) {
+	const labelId = useId();
+
+	return (
+		<Field disabled={disabled} invalid={invalid} name={name}>
+			<BaseField.Label {...props(checkboxCardStyles.label)}>
+				<Checkbox
+					{...checkboxProps}
+					aria-labelledby={labelId}
+					disabled={disabled}
+					invalid={invalid}
+					name={name}
+				/>
+				<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>
+	);
+}