@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,61 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.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, lineHeight } from "../../styles/typography.stylex";
+
+export const previewCardStyles = create({
+	popup: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderEndEndRadius: shape.floatingRadius,
+		borderEndStartRadius: shape.floatingRadius,
+		borderStartEndRadius: shape.floatingRadius,
+		borderStartStartRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: "1px",
+		boxShadow: shadows.floating,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		fontSize: fontSize["14"],
+		lineHeight: lineHeight["20"],
+		maxHeight: "var(--available-height)",
+		maxWidth: "min(var(--available-width), calc(100vw - 2rem))",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		outline: "none",
+		overflowWrap: "anywhere",
+		overflowY: "auto",
+		overscrollBehavior: "contain",
+		padding: space["6"],
+		transform: {
+			"[data-ending-style]": "scale(0.98)",
+			"[data-starting-style]": "scale(0.98)",
+			default: "none",
+		},
+		transformOrigin: "var(--transform-origin)",
+		transitionDuration: {
+			"[data-ending-style]": duration.overlayExit,
+			default: duration.overlayEnter,
+			[conditions.reducedMotion]: duration.instant,
+			"[data-instant]": duration.instant,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: easing.expoOut,
+		width: "20rem",
+	},
+	positioner: {
+		zIndex: 50,
+	},
+});

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

@@ -0,0 +1,94 @@
+"use client";
+
+import {
+	PreviewCard as BasePreviewCard,
+	type PreviewCardPopupProps as BasePreviewCardPopupProps,
+	type PreviewCardPortalProps as BasePreviewCardPortalProps,
+	type PreviewCardPositionerProps as BasePreviewCardPositionerProps,
+	type PreviewCardRootProps as BasePreviewCardRootProps,
+	type PreviewCardTriggerProps as BasePreviewCardTriggerProps,
+} from "@base-ui/react/preview-card";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { protectRenderSlot } from "../../render-utils";
+import { previewCardStyles } from "./preview-card.styles";
+
+type PreviewCardTriggerRef = ComponentPropsWithRef<
+	typeof BasePreviewCard.Trigger
+>["ref"];
+type PreviewCardPopupRef = ComponentPropsWithRef<
+	typeof BasePreviewCard.Popup
+>["ref"];
+
+export type PreviewCardProps<Payload = unknown> = Closed<
+	BasePreviewCardRootProps<Payload>
+>;
+
+export type PreviewCardTriggerProps<Payload = unknown> = Closed<
+	Omit<BasePreviewCardTriggerProps<Payload>, "ref"> & {
+		ref?: PreviewCardTriggerRef;
+	}
+>;
+
+export type PreviewCardPopupProps = Closed<
+	Omit<BasePreviewCardPopupProps, "ref"> & {
+		align?: BasePreviewCardPositionerProps["align"];
+		anchor?: BasePreviewCardPositionerProps["anchor"];
+		portalProps?: Closed<BasePreviewCardPortalProps>;
+		ref?: PreviewCardPopupRef;
+		sideOffset?: BasePreviewCardPositionerProps["sideOffset"];
+	}
+>;
+
+export const PreviewCard = BasePreviewCard.Root;
+
+export function PreviewCardTrigger<Payload = unknown>({
+	ref: forwardedRef = undefined,
+	render,
+	...rest
+}: PreviewCardTriggerProps<Payload>) {
+	return (
+		<BasePreviewCard.Trigger
+			{...rest}
+			data-slot="preview-card-trigger"
+			ref={forwardedRef}
+			render={protectRenderSlot("preview-card-trigger", render)}
+		/>
+	);
+}
+
+export function PreviewCardPopup({
+	align = "center",
+	anchor,
+	children,
+	render,
+	portalProps,
+	ref: forwardedRef = undefined,
+	sideOffset = 4,
+	...rest
+}: PreviewCardPopupProps) {
+	return (
+		<BasePreviewCard.Portal {...portalProps}>
+			<BasePreviewCard.Positioner
+				align={align}
+				anchor={anchor}
+				data-slot="preview-card-positioner"
+				sideOffset={sideOffset}
+				{...props(previewCardStyles.positioner)}
+			>
+				<BasePreviewCard.Popup
+					{...rest}
+					data-slot="preview-card-content"
+					ref={forwardedRef}
+					render={protectRenderSlot("preview-card-content", render)}
+					{...props(previewCardStyles.popup)}
+				>
+					{children}
+				</BasePreviewCard.Popup>
+			</BasePreviewCard.Positioner>
+		</BasePreviewCard.Portal>
+	);
+}
+
+export const PreviewCardPrimitive = BasePreviewCard;

package/src/components/progress/progress.styles.ts

@@ -0,0 +1,82 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+const indeterminateProgress = keyframes({
+	"0%": {
+		transform: "translateX(-100%)",
+	},
+	"100%": {
+		transform: "translateX(250%)",
+	},
+});
+
+export const progressStyles = create({
+	indicator: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "1.5s",
+		},
+		animationIterationCount: "infinite",
+		animationName: {
+			"[data-indeterminate]": {
+				[conditions.reducedMotion]: "none",
+				default: indeterminateProgress,
+			},
+			default: "none",
+		},
+		animationTimingFunction: easing.easeInOut,
+		backgroundColor: colors.accent,
+		borderRadius: "9999px",
+		boxSizing: "border-box",
+		display: "block",
+		height: "inherit",
+		// The fill glides between values instead of stepping.
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "width",
+		transitionTimingFunction: easing.expoOut,
+		width: {
+			"[data-indeterminate]": "50%",
+			default: "0%",
+		},
+	},
+	label: {
+		color: colors.content,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.medium,
+		lineHeight: lineHeight["20"],
+	},
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		width: "100%",
+	},
+	track: {
+		backgroundColor: colors.border,
+		borderRadius: "9999px",
+		boxSizing: "border-box",
+		display: "block",
+		height: "0.375rem",
+		overflow: "hidden",
+		width: "100%",
+	},
+	value: {
+		color: colors.content,
+		fontSize: fontSize["14"],
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+	},
+});

package/src/components/progress/progress.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { protectRenderSlot } from "../../render-utils";
+import { progressStyles } from "./progress.styles";
+
+type BaseProgressRootProps = ComponentPropsWithRef<typeof BaseProgress.Root>;
+type BaseProgressTrackProps = ComponentPropsWithRef<typeof BaseProgress.Track>;
+type BaseProgressIndicatorProps = ComponentPropsWithRef<
+	typeof BaseProgress.Indicator
+>;
+type BaseProgressLabelProps = ComponentPropsWithRef<typeof BaseProgress.Label>;
+type BaseProgressValueProps = ComponentPropsWithRef<typeof BaseProgress.Value>;
+
+export type ProgressProps = Omit<
+	BaseProgressRootProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseProgressRootProps["ref"];
+};
+
+export type ProgressTrackProps = Omit<
+	BaseProgressTrackProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseProgressTrackProps["ref"];
+};
+
+export type ProgressIndicatorProps = Omit<
+	BaseProgressIndicatorProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseProgressIndicatorProps["ref"];
+};
+
+export type ProgressLabelProps = Omit<
+	BaseProgressLabelProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseProgressLabelProps["ref"];
+};
+
+export type ProgressValueProps = Omit<
+	BaseProgressValueProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseProgressValueProps["ref"];
+};
+
+export function Progress({
+	children,
+	locale = "en",
+	ref: forwardedRef,
+	render,
+	...rest
+}: ProgressProps) {
+	return (
+		<BaseProgress.Root
+			locale={locale}
+			{...rest}
+			data-slot="progress"
+			ref={forwardedRef}
+			render={protectRenderSlot("progress", render)}
+			{...props(progressStyles.root)}
+		>
+			{children ? (
+				children
+			) : (
+				<ProgressTrack>
+					<ProgressIndicator />
+				</ProgressTrack>
+			)}
+		</BaseProgress.Root>
+	);
+}
+
+export function ProgressTrack({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ProgressTrackProps) {
+	return (
+		<BaseProgress.Track
+			{...rest}
+			data-slot="progress-track"
+			ref={forwardedRef}
+			render={protectRenderSlot("progress-track", render)}
+			{...props(progressStyles.track)}
+		>
+			{children}
+		</BaseProgress.Track>
+	);
+}
+
+export function ProgressIndicator({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ProgressIndicatorProps) {
+	return (
+		<BaseProgress.Indicator
+			{...rest}
+			data-slot="progress-indicator"
+			ref={forwardedRef}
+			render={protectRenderSlot("progress-indicator", render)}
+			{...props(progressStyles.indicator)}
+		>
+			{children}
+		</BaseProgress.Indicator>
+	);
+}
+
+export function ProgressLabel({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ProgressLabelProps) {
+	return (
+		<BaseProgress.Label
+			{...rest}
+			data-slot="progress-label"
+			ref={forwardedRef}
+			render={protectRenderSlot("progress-label", render)}
+			{...props(progressStyles.label)}
+		>
+			{children}
+		</BaseProgress.Label>
+	);
+}
+
+export function ProgressValue({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: ProgressValueProps) {
+	return (
+		<BaseProgress.Value
+			{...rest}
+			data-slot="progress-value"
+			ref={forwardedRef}
+			render={protectRenderSlot("progress-value", render)}
+			{...props(progressStyles.value)}
+		>
+			{children}
+		</BaseProgress.Value>
+	);
+}

package/src/components/progress-rings/progress-rings.styles.ts

@@ -0,0 +1,65 @@
+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 progressRingsStyles = create({
+	compact: {
+		display: "inline-flex",
+	},
+	label: {
+		alignItems: "center",
+		color: colors.mutedContent,
+		display: "flex",
+		gap: space["2"],
+		minWidth: 0,
+	},
+	list: {
+		display: "grid",
+		gap: space["2"],
+		gridTemplateColumns: "repeat(auto-fit, minmax(7rem, 1fr))",
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	// A figure, so the browser margin is reset.
+	root: {
+		alignItems: "center",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		margin: 0,
+		minWidth: 0,
+	},
+	share: {
+		color: colors.mutedContent,
+		fontVariantNumeric: "tabular-nums",
+		marginInlineStart: space["1"],
+	},
+	swatch: (backgroundColor: string) => ({
+		backgroundColor,
+		blockSize: "0.625rem",
+		borderRadius: 3,
+		flexShrink: 0,
+		inlineSize: "0.625rem",
+	}),
+	// Value tiles sit on the surface inside a workarea card.
+	tile: {
+		alignSelf: "stretch",
+		backgroundColor: colors.surface,
+		borderRadius: shape.controlRadius,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		minWidth: 0,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+	},
+	tiles: { alignSelf: "stretch" },
+	value: {
+		color: colors.content,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+	},
+});

package/src/components/progress-rings/progress-rings.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+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 { RingGraphic } from "../chart-frame/ring-graphic";
+import { visuallyHiddenStyles } from "../visually-hidden/visually-hidden.styles";
+import { progressRingsStyles as styles } from "./progress-rings.styles";
+
+export interface ProgressRing {
+	/** Shown instead of the formatted value, such as "1h 45m". */
+	display?: string;
+	goal: number;
+	id: string;
+	label: string;
+	/** Defaults to the ring's position in the palette order. */
+	tone?: ChartSeriesTone;
+	value: number;
+}
+
+export type ProgressRingsSize = "md" | "sm";
+
+export type ProgressRingsProps = Omit<
+	Closed<ComponentPropsWithRef<"figure">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	formatValue?: (value: number) => string;
+	locale?: string;
+	/** Up to three rings, outermost first. */
+	rings: readonly ProgressRing[];
+	/** sm is a 32px glyph for dense grids such as a calendar; it shows no tiles. */
+	size?: ProgressRingsSize;
+};
+
+const NAME = "ProgressRings";
+const TONES = ["series1", "series2", "series3"] as const;
+const GEOMETRY = {
+	md: { diameter: 176, gap: 4, stroke: 16 },
+	sm: { diameter: 32, gap: 1, stroke: 3 },
+} as const;
+
+function assertRings(rings: readonly ProgressRing[]) {
+	if (!Array.isArray(rings) || rings.length === 0 || rings.length > 3) {
+		throw new RangeError("ProgressRings needs one to three rings.");
+	}
+	const ids = new Set<string>();
+	for (const ring of rings) {
+		assertIdentity(NAME, ring, ids);
+		assertNonNegative(NAME, ring.value);
+		if (!(Number.isFinite(ring.goal) && ring.goal > 0)) {
+			throw new RangeError("ProgressRings goals must be positive.");
+		}
+		assertTone(NAME, ring.tone);
+	}
+}
+
+/** Up to three concentric rings, each showing progress toward its own goal. */
+export function ProgressRings({
+	"aria-label": ariaLabel,
+	formatValue,
+	locale = "en-US",
+	ref: forwardedRef,
+	rings: inputRings,
+	size = "md",
+	...rest
+}: ProgressRingsProps) {
+	assertAriaLabel(NAME, ariaLabel);
+	assertRings(inputRings);
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const format = formatValue ?? new Intl.NumberFormat(locale).format;
+	const percent = new Intl.NumberFormat(locale, { style: "percent" });
+	const rings = inputRings.map((ring, index) => ({
+		...ring,
+		tone: ring.tone ?? TONES[index],
+	}));
+	const compact = size === "sm";
+	const hover = useChartHover();
+	const { fade, hostRef, hostStyle, linkProps, markProps } = hover;
+	// Hovering a ring shows its value and progress; hovering a tile lights its ring.
+	const tips = new Map(
+		rings.map(({ display, goal, id, label, tone, value }) => [
+			id,
+			{
+				items: [
+					{
+						id,
+						label,
+						tone,
+						value: `${display ?? format(value)} · ${percent.format(value / goal)}`,
+					},
+				],
+			},
+		])
+	);
+	const ringHover = {
+		fade,
+		markProps: (id: string) => markProps(id, tips.get(id)),
+	};
+
+	return (
+		<figure
+			{...rest}
+			aria-label={ariaLabel}
+			data-slot="progress-rings"
+			ref={forwardedRef}
+			{...props(styles.root, compact && styles.compact, typeRoles.ui)}
+		>
+			<ul
+				{...props(
+					styles.list,
+					compact ? visuallyHiddenStyles.root : styles.tiles
+				)}
+			>
+				{rings.map(({ display, goal, id, label, tone, value }) => (
+					<li
+						data-slot="progress-rings-item"
+						key={id}
+						{...linkProps(id)}
+						{...props(styles.tile, ...fade(id))}
+					>
+						<span {...props(styles.label)}>
+							<span
+								aria-hidden="true"
+								{...props(styles.swatch(chartColors[tone]))}
+							/>
+							{label}
+						</span>
+						<span>
+							<span {...props(styles.value)}>{display ?? format(value)}</span>
+							<span {...props(styles.share, typeRoles.caption)}>
+								{percent.format(value / goal)}
+							</span>
+						</span>
+					</li>
+				))}
+			</ul>
+			<div ref={hostRef} {...props(hostStyle)}>
+				<RingGraphic
+					{...GEOMETRY[size]}
+					hover={ringHover}
+					rings={rings.map(({ goal, id, tone, value }) => ({
+						fraction: value / goal,
+						id,
+						tone,
+					}))}
+				/>
+				<ChartHoverTooltip hover={hover.hover} />
+			</div>
+		</figure>
+	);
+}

package/src/components/property-list/property-list.styles.ts

@@ -0,0 +1,49 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const propertyListStyles = create({
+	item: {
+		alignItems: "baseline",
+		display: "grid",
+		gap: space["3"],
+		gridColumnEnd: "-1",
+		gridColumnStart: "1",
+		gridTemplateColumns: "subgrid",
+		minWidth: 0,
+	},
+	label: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+		margin: 0,
+		minWidth: 0,
+		overflowWrap: "break-word",
+	},
+	root: {
+		display: "grid",
+		gap: space["2"],
+		gridTemplateColumns: {
+			[conditions.sm]: "fit-content(8rem) minmax(0, 1fr)",
+			default: "minmax(0, 1fr)",
+		},
+		margin: 0,
+	},
+	value: {
+		color: colors.content,
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		margin: 0,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+		textAlign: "start",
+	},
+});