@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/score-gauge/score-gauge.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { arcPath } from "../chart-frame/arc-path";
+import {
+	assertAriaLabel,
+	assertIdentity,
+	assertNonNegative,
+	assertTone,
+} from "../chart-frame/chart-assert";
+import { type ChartSeriesTone, chartColors } from "../chart-frame/chart-colors";
+import { ChartHoverTooltip, useChartHover } from "../chart-frame/chart-hover";
+import type { RingGraphicHover } from "../chart-frame/ring-graphic";
+import { scoreGaugeStyles as styles } from "./score-gauge.styles";
+
+export interface ScoreGaugePart {
+	/** Supporting context after the label, such as "7h 50m". */
+	detail?: string;
+	id: string;
+	label: string;
+	/** The most this part can contribute; its arc spans this share of the ring. */
+	max: number;
+	tone?: ChartSeriesTone;
+	value: number;
+}
+
+export type ScoreGaugeProps = Omit<
+	Closed<ComponentPropsWithRef<"figure">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	locale?: string;
+	/** Up to six parts; the score is the sum of their values. */
+	parts: readonly ScoreGaugePart[];
+};
+
+const NAME = "ScoreGauge";
+const TONES = [
+	"series1",
+	"series2",
+	"series3",
+	"series4",
+	"series5",
+	"series6",
+] as const;
+const DIAMETER = 128;
+const STROKE = 14;
+// Surface gap between segments, in pixels, measured past the round caps.
+const GAP = 4;
+const TRACK_OPACITY = 0.18;
+
+function assertParts(parts: readonly ScoreGaugePart[]) {
+	if (
+		!Array.isArray(parts) ||
+		parts.length === 0 ||
+		parts.length > TONES.length
+	) {
+		throw new RangeError("ScoreGauge needs one to six parts.");
+	}
+	const ids = new Set<string>();
+	for (const part of parts) {
+		assertIdentity(NAME, part, ids);
+		assertNonNegative(NAME, part.value);
+		if (
+			!(Number.isFinite(part.max) && part.max > 0 && part.value <= part.max)
+		) {
+			throw new RangeError(
+				"ScoreGauge parts need a positive max of at least value."
+			);
+		}
+		assertTone(NAME, part.tone);
+	}
+}
+
+// Each part's arc in turns: its share of the total, less half a gap at each end.
+function partRanges(maxes: readonly number[], gapTurns: number) {
+	const total = maxes.reduce((sum, max) => sum + max, 0);
+	let start = 0;
+	return maxes.map((max) => {
+		const from = start + gapTurns / 2;
+		start += max / total;
+		return { from, to: Math.max(from, start - gapTurns / 2) };
+	});
+}
+
+function Segments({
+	hover,
+	parts,
+}: {
+	hover: RingGraphicHover;
+	parts: readonly (ScoreGaugePart & { tone: ChartSeriesTone })[];
+}) {
+	const center = DIAMETER / 2;
+	const radius = center - STROKE / 2;
+	// Round caps reach half a stroke past each end, so the gap includes them.
+	const gapTurns =
+		parts.length > 1 ? (GAP + STROKE) / (2 * Math.PI * radius) : 0;
+	const ranges = partRanges(
+		parts.map(({ max }) => max),
+		gapTurns
+	);
+	return (
+		<svg
+			aria-hidden="true"
+			height={DIAMETER}
+			viewBox={`0 0 ${DIAMETER} ${DIAMETER}`}
+			width={DIAMETER}
+			{...props(styles.svg)}
+		>
+			{parts.map(({ id, max, tone, value }, index) => {
+				const { from, to } = ranges[index];
+				const color = chartColors[tone];
+				return (
+					<g
+						fill="none"
+						key={id}
+						strokeLinecap="round"
+						strokeWidth={STROKE}
+						{...hover.markProps(id)}
+						{...props(...hover.fade(id))}
+					>
+						<path
+							d={arcPath(center, center, radius, from, to)}
+							stroke={color}
+							strokeOpacity={TRACK_OPACITY}
+						/>
+						{value > 0 ? (
+							<path
+								d={arcPath(
+									center,
+									center,
+									radius,
+									from,
+									from + (to - from) * (value / max)
+								)}
+								stroke={color}
+							/>
+						) : null}
+					</g>
+				);
+			})}
+		</svg>
+	);
+}
+
+/**
+ * A score built from parts: a segmented ring around the total, with each
+ * part's points below it.
+ */
+export function ScoreGauge({
+	"aria-label": ariaLabel,
+	locale = "en-US",
+	parts: inputParts,
+	ref: forwardedRef,
+	...rest
+}: ScoreGaugeProps) {
+	assertAriaLabel(NAME, ariaLabel);
+	assertParts(inputParts);
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const { format } = new Intl.NumberFormat(locale);
+	const parts = inputParts.map((part, index) => ({
+		...part,
+		tone: part.tone ?? TONES[index],
+	}));
+	const hover = useChartHover();
+	const { fade, hostRef, hostStyle, linkProps, markProps } = hover;
+	// Hovering a segment shows its points; hovering a row lights its segment.
+	const tips = new Map(
+		parts.map(({ id, label, max: partMax, tone, value }) => [
+			id,
+			{
+				items: [
+					{ id, label, tone, value: `${format(value)}/${format(partMax)}` },
+				],
+			},
+		])
+	);
+	const segmentHover = {
+		fade,
+		markProps: (id: string) => markProps(id, tips.get(id)),
+	};
+	const score = parts.reduce((sum, { value }) => sum + value, 0);
+	const max = parts.reduce((sum, part) => sum + part.max, 0);
+
+	return (
+		<figure
+			{...rest}
+			aria-label={ariaLabel}
+			data-slot="score-gauge"
+			ref={forwardedRef}
+			{...props(styles.root, typeRoles.ui)}
+		>
+			<div ref={hostRef} {...props(styles.figure, hostStyle)}>
+				<Segments hover={segmentHover} parts={parts} />
+				<span data-slot="score-gauge-score" {...props(styles.score)}>
+					<span {...props(typeRoles.title)}>{format(score)}</span>
+					<span {...props(styles.detail, typeRoles.caption)}>
+						of {format(max)}
+					</span>
+				</span>
+				<ChartHoverTooltip hover={hover.hover} />
+			</div>
+			<ul {...props(styles.list)}>
+				{parts.map(({ detail, id, label, max: partMax, tone, value }) => (
+					<li
+						data-slot="score-gauge-part"
+						key={id}
+						{...linkProps(id)}
+						{...props(styles.row, ...fade(id))}
+					>
+						<span {...props(styles.label)}>
+							<span
+								aria-hidden="true"
+								{...props(styles.swatch(chartColors[tone]))}
+							/>
+							<span>
+								{label}
+								{detail ? (
+									<span {...props(styles.detail)}>: {detail}</span>
+								) : null}
+							</span>
+						</span>
+						<span {...props(styles.value)}>
+							{format(value)}/{format(partMax)}
+						</span>
+					</li>
+				))}
+			</ul>
+		</figure>
+	);
+}

package/src/components/scroll-area/scroll-area.styles.ts

@@ -0,0 +1,174 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+// A 6px thumb with 2px of padding on each side.
+const scrollbarSize = "0.625rem";
+
+export const scrollAreaStyles = create({
+	content: {
+		boxSizing: "border-box",
+	},
+	contentFill: {
+		height: "100%",
+		width: "100%",
+	},
+	corner: {
+		backgroundColor: "transparent",
+	},
+	// A flex column, so the viewport shrinks to the root's used height even
+	// when the root's own height comes only from a parent's max-height, as in
+	// a menu or a combobox popup. A percentage height cannot do that.
+	root: {
+		borderRadius: "inherit",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		minHeight: 0,
+		minWidth: 0,
+		position: "relative",
+		width: "100%",
+	},
+	rootFadeFocus: {
+		animationDuration: {
+			":has(> [data-slot=scroll-area-viewport]:focus-visible)":
+				focusMotion.duration,
+		},
+		animationName: {
+			":has(> [data-slot=scroll-area-viewport]:focus-visible)":
+				focusMotion.ring,
+		},
+		outlineColor: {
+			":has(> [data-slot=scroll-area-viewport]:focus-visible)":
+				colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: "solid",
+		outlineWidth: borderWidth.focus,
+	},
+	scrollbar: {
+		boxSizing: "border-box",
+		display: "flex",
+		margin: space.px,
+		opacity: {
+			":active": 1,
+			":has(:active)": 1,
+			":is([data-hovering])": 1,
+			":is([data-scrolling])": 1,
+			":is([data-slot=scroll-area]:focus-within *)": 1,
+			default: 0,
+		},
+		padding: space.px,
+		transitionDelay: {
+			":active": "0ms",
+			":has(:active)": "0ms",
+			":is([data-hovering])": "0ms",
+			":is([data-scrolling])": "0ms",
+			":is([data-slot=scroll-area]:focus-within *)": "0ms",
+			default: "300ms",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity",
+		transitionTimingFunction: easing.expoOut,
+	},
+	scrollbarHorizontal: {
+		flexDirection: "column",
+		height: scrollbarSize,
+	},
+	scrollbarVertical: {
+		width: scrollbarSize,
+	},
+	thumb: {
+		backgroundColor: {
+			":active": colors.mutedContent,
+			":hover": { [conditions.canHover]: colors.mutedContent },
+			default: colors.controlBorderStrong,
+		},
+		borderRadius: shape.controlRadius,
+		height: "100%",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	// Positioned, so absolutely placed content inside, such as visually
+	// hidden text, scrolls and clips with it instead of stretching the page.
+	viewport: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		borderRadius: "inherit",
+		boxSizing: "border-box",
+		flexGrow: 1,
+		height: "100%",
+		minHeight: 0,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: {
+			":focus-visible": focus.offset,
+			default: focus.offset,
+		},
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: {
+			":focus-visible": borderWidth.focus,
+			default: borderWidth.focus,
+		},
+		position: "relative",
+		width: "100%",
+	},
+	viewportFade: {
+		maskComposite: "intersect",
+		maskImage:
+			"linear-gradient(to right, transparent, black min(1.5rem, var(--scroll-area-overflow-x-start, 0px)), black calc(100% - min(1.5rem, var(--scroll-area-overflow-x-end, 0px))), transparent), linear-gradient(to bottom, transparent, black min(1.5rem, var(--scroll-area-overflow-y-start, 0px)), black calc(100% - min(1.5rem, var(--scroll-area-overflow-y-end, 0px))), transparent)",
+		outlineWidth: 0,
+	},
+	viewportGutter: {
+		paddingBottom: {
+			":is([data-has-overflow-x] *)": space["4"],
+			"[data-has-overflow-x]": space["4"],
+			default: space["0"],
+		},
+		paddingInlineEnd: {
+			":is([data-has-overflow-y] *)": space["4"],
+			"[data-has-overflow-y]": space["4"],
+			default: space["0"],
+		},
+	},
+	viewportOverscrollContain: {
+		overscrollBehaviorX: {
+			":is([data-has-overflow-x] *)": "contain",
+			"[data-has-overflow-x]": "contain",
+			default: "auto",
+		},
+		overscrollBehaviorY: {
+			":is([data-has-overflow-y] *)": "contain",
+			"[data-has-overflow-y]": "contain",
+			default: "auto",
+		},
+	},
+});

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import type {
+	ScrollAreaRootProps as BaseScrollAreaRootProps,
+	ScrollAreaScrollbarProps as BaseScrollAreaScrollbarProps,
+} from "@base-ui/react/scroll-area";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { protectRenderSlot } from "../../render-utils";
+import { scrollAreaStyles } from "./scroll-area.styles";
+
+type BaseRootProps = ComponentPropsWithRef<typeof BaseScrollArea.Root>;
+type BaseScrollbarProps = ComponentPropsWithRef<
+	typeof BaseScrollArea.Scrollbar
+>;
+
+export type ScrollAreaProps = Omit<
+	BaseScrollAreaRootProps,
+	"className" | "data-slot" | "style"
+> & {
+	clampContentMinWidth?: boolean;
+	fill?: boolean;
+	overscrollContain?: boolean;
+	ref?: BaseRootProps["ref"];
+	scrollFade?: boolean;
+	scrollbarGutter?: boolean;
+};
+
+export type ScrollAreaViewportProps = Omit<
+	ComponentPropsWithRef<typeof BaseScrollArea.Viewport>,
+	"className" | "data-slot" | "style"
+>;
+export type ScrollAreaThumbProps = Omit<
+	ComponentPropsWithRef<typeof BaseScrollArea.Thumb>,
+	"className" | "data-slot" | "style"
+>;
+export type ScrollAreaCornerProps = Omit<
+	ComponentPropsWithRef<typeof BaseScrollArea.Corner>,
+	"className" | "data-slot" | "style"
+>;
+
+export type ScrollAreaScrollbarProps = Omit<
+	BaseScrollAreaScrollbarProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseScrollbarProps["ref"];
+};
+
+function getViewportProps(
+	scrollFade?: boolean,
+	scrollbarGutter?: boolean,
+	overscrollContain?: boolean
+) {
+	return props(
+		scrollAreaStyles.viewport,
+		scrollFade ? scrollAreaStyles.viewportFade : null,
+		scrollbarGutter ? scrollAreaStyles.viewportGutter : null,
+		overscrollContain ? scrollAreaStyles.viewportOverscrollContain : null
+	);
+}
+
+function getContentProps(clampContentMinWidth?: boolean, fill?: boolean) {
+	const contentProps = props(
+		scrollAreaStyles.content,
+		fill ? scrollAreaStyles.contentFill : null
+	);
+	return {
+		...contentProps,
+		style: clampContentMinWidth
+			? { ...contentProps.style, minWidth: 0 }
+			: contentProps.style,
+	};
+}
+
+export function ScrollAreaScrollbar({
+	children,
+	orientation = "vertical",
+	ref: forwardedRef,
+	render,
+	...rest
+}: ScrollAreaScrollbarProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseScrollArea.Scrollbar
+			{...rest}
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			ref={forwardedRef}
+			render={protectRenderSlot("scroll-area-scrollbar", render)}
+			{...props(
+				scrollAreaStyles.scrollbar,
+				orientation === "horizontal"
+					? scrollAreaStyles.scrollbarHorizontal
+					: scrollAreaStyles.scrollbarVertical
+			)}
+		>
+			{children ?? <ScrollAreaThumb />}
+		</BaseScrollArea.Scrollbar>
+	);
+}
+
+export function ScrollAreaViewport({
+	render,
+	...rest
+}: ScrollAreaViewportProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+	return (
+		<BaseScrollArea.Viewport
+			{...rest}
+			data-slot="scroll-area-viewport"
+			render={protectRenderSlot("scroll-area-viewport", render)}
+			{...props(scrollAreaStyles.viewport)}
+		/>
+	);
+}
+
+export function ScrollAreaThumb({ render, ...rest }: ScrollAreaThumbProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+	return (
+		<BaseScrollArea.Thumb
+			{...rest}
+			data-slot="scroll-area-thumb"
+			render={protectRenderSlot("scroll-area-thumb", render)}
+			{...props(scrollAreaStyles.thumb)}
+		/>
+	);
+}
+
+export function ScrollAreaCorner({ render, ...rest }: ScrollAreaCornerProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+	return (
+		<BaseScrollArea.Corner
+			{...rest}
+			data-slot="scroll-area-corner"
+			render={protectRenderSlot("scroll-area-corner", render)}
+			{...props(scrollAreaStyles.corner)}
+		/>
+	);
+}
+
+export function ScrollArea({
+	children,
+	clampContentMinWidth = true,
+	fill = false,
+	overscrollContain = false,
+	ref: forwardedRef,
+	render,
+	scrollFade = false,
+	scrollbarGutter = false,
+	...rest
+}: ScrollAreaProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	const viewportProps = getViewportProps(
+		scrollFade,
+		scrollbarGutter,
+		overscrollContain
+	);
+	const contentProps = getContentProps(clampContentMinWidth, fill);
+
+	return (
+		<BaseScrollArea.Root
+			{...rest}
+			data-slot="scroll-area"
+			ref={forwardedRef}
+			render={protectRenderSlot("scroll-area", render)}
+			{...props(
+				scrollAreaStyles.root,
+				scrollFade && scrollAreaStyles.rootFadeFocus
+			)}
+		>
+			<BaseScrollArea.Viewport
+				data-slot="scroll-area-viewport"
+				{...viewportProps}
+			>
+				<BaseScrollArea.Content
+					data-slot="scroll-area-content"
+					{...contentProps}
+				>
+					{children}
+				</BaseScrollArea.Content>
+			</BaseScrollArea.Viewport>
+			<ScrollAreaScrollbar orientation="vertical" />
+			<ScrollAreaScrollbar orientation="horizontal" />
+			<ScrollAreaCorner />
+		</BaseScrollArea.Root>
+	);
+}
+
+export const ScrollAreaPrimitive = BaseScrollArea;

package/src/components/section/section.styles.ts

@@ -0,0 +1,11 @@
+import { create } from "@stylexjs/stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const sectionStyles = create({
+	base: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		minWidth: 0,
+	},
+});

package/src/components/section/section.tsx

@@ -0,0 +1,29 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { sectionStyles } from "./section.styles";
+
+type NativeSectionProps = ComponentPropsWithRef<"section">;
+
+export type SectionProps = Omit<
+	NativeSectionProps,
+	"className" | "role" | "style"
+>;
+
+export function Section({
+	children,
+	ref: forwardedRef,
+	...rest
+}: SectionProps) {
+	Reflect.deleteProperty(rest, "role");
+
+	return (
+		<section
+			{...rest}
+			data-slot="section"
+			ref={forwardedRef}
+			{...props(sectionStyles.base)}
+		>
+			{children}
+		</section>
+	);
+}