@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/badge/badge.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useRender } from "@base-ui/react/use-render";
+import { props } from "@stylexjs/stylex";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot } from "../../render-utils";
+import { badgeStyles } from "./badge.styles";
+
+export type BadgeVariant =
+	| "default"
+	| "destructive"
+	| "info"
+	| "outline"
+	| "secondary"
+	| "success"
+	| "warning"
+	| "brand";
+export type BadgeSize = "default" | "sm" | "lg";
+
+export type BadgeProps = Omit<
+	useRender.ComponentProps<"span">,
+	"className" | "data-slot" | "style"
+> & {
+	size?: BadgeSize;
+	variant?: BadgeVariant;
+};
+
+const variantStyles = {
+	brand: badgeStyles.brand,
+	default: badgeStyles.default,
+	destructive: badgeStyles.destructive,
+	info: badgeStyles.info,
+	outline: badgeStyles.outline,
+	secondary: badgeStyles.secondary,
+	success: badgeStyles.success,
+	warning: badgeStyles.warning,
+};
+
+const sizeStyles = {
+	default: badgeStyles.defaultSize,
+	lg: badgeStyles.lg,
+	sm: badgeStyles.sm,
+};
+
+export function Badge({
+	children,
+	ref: forwardedRef,
+	render,
+	size = "default",
+	variant = "default",
+	...rest
+}: BadgeProps) {
+	const normalizedRender = protectRenderSlot("badge", render);
+
+	return useRender({
+		defaultTagName: "span",
+		props: {
+			...rest,
+			children: controlLabel(children),
+			"data-slot": "badge",
+			...props(badgeStyles.base, variantStyles[variant], sizeStyles[size]),
+		},
+		ref: forwardedRef,
+		render: normalizedRender,
+	});
+}

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

@@ -0,0 +1,72 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { glyphSize } from "../../styles/dimensions.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight } from "../../styles/typography.stylex";
+
+export const barListStyles = create({
+	// The bar sits behind the label; its width is the row's share of the largest.
+	bar: (inlineSize: string, backgroundColor: string) => ({
+		backgroundColor,
+		borderRadius: shape.controlRadius,
+		inlineSize,
+		insetBlock: 0,
+		insetInlineStart: 0,
+		position: "absolute",
+	}),
+	header: {
+		color: colors.mutedContent,
+		display: "flex",
+		justifyContent: "space-between",
+		paddingInline: space["3"],
+	},
+	icon: {
+		color: colors.mutedContent,
+		display: "inline-flex",
+		flexShrink: 0,
+		height: { ":is(*) > svg": glyphSize.sm, default: "auto" },
+		width: { ":is(*) > svg": glyphSize.sm, default: "auto" },
+	},
+	item: {
+		alignItems: "center",
+		display: "flex",
+		gap: space["3"],
+		justifyContent: "space-between",
+		minBlockSize: "2rem",
+		paddingInline: space["3"],
+		position: "relative",
+	},
+	label: {
+		alignItems: "center",
+		color: colors.content,
+		display: "flex",
+		gap: space["2"],
+		minWidth: 0,
+		overflow: "hidden",
+		position: "relative",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		minWidth: 0,
+	},
+	value: {
+		color: colors.content,
+		flexShrink: 0,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+		position: "relative",
+	},
+});

package/src/components/bar-list/bar-list.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+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, chartColors } from "../chart-frame/chart-colors";
+import { useChartHover } from "../chart-frame/chart-hover";
+import { barListStyles } from "./bar-list.styles";
+
+export interface BarListItem {
+	/** A decorative glyph before the label, such as a device icon. */
+	icon?: ReactNode;
+	id: string;
+	label: string;
+	value: number;
+}
+
+export type BarListProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	formatValue?: (value: number) => string;
+	items: readonly BarListItem[];
+	locale?: string;
+	/** One hue for every bar. By default each item takes its palette color. */
+	tone?: ChartSeriesTone;
+	/** A column caption above the values, such as "Visitors". */
+	valueLabel?: string;
+};
+
+// Tinted enough to read as a bar, light enough to keep the label legible on it.
+const TINT = "20%";
+const PALETTE = [
+	"series1",
+	"series2",
+	"series3",
+	"series4",
+	"series5",
+	"series6",
+] as const satisfies readonly ChartSeriesTone[];
+
+// Items take palette colors in input order, so sorting never repaints one; past
+// six, they fold into the neutral reference tone instead of cycling.
+function toneAt(
+	index: number,
+	tone: ChartSeriesTone | undefined
+): ChartSeriesTone {
+	return tone ?? PALETTE[index] ?? "muted";
+}
+
+function tintOf(tone: ChartSeriesTone) {
+	return `color-mix(in oklch, ${chartColors[tone]} ${TINT}, transparent)`;
+}
+
+function assertItems(items: readonly BarListItem[]) {
+	if (!Array.isArray(items)) {
+		throw new TypeError("BarList items must be an array.");
+	}
+	const ids = new Set<string>();
+	for (const { id, label, value } of items) {
+		if (typeof id !== "string" || !id.trim() || typeof label !== "string") {
+			throw new TypeError("BarList items require non-empty ids and labels.");
+		}
+		if (ids.has(id)) {
+			throw new RangeError("BarList item ids must be unique.");
+		}
+		if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+			throw new RangeError("BarList values must be finite and not negative.");
+		}
+		ids.add(id);
+	}
+}
+
+function assertOptions(ariaLabel: string, tone: ChartSeriesTone | undefined) {
+	if (typeof ariaLabel !== "string" || !ariaLabel.trim()) {
+		throw new TypeError("BarList requires a non-empty aria-label.");
+	}
+	if (tone !== undefined && !Object.hasOwn(chartColors, tone)) {
+		throw new RangeError("BarList tone is not a supported chart series tone.");
+	}
+}
+
+/** Ranked rows whose background bar shows each value against the largest. */
+export function BarList({
+	"aria-label": ariaLabel,
+	formatValue,
+	items,
+	locale = "en-US",
+	ref: forwardedRef,
+	tone,
+	valueLabel,
+	...rest
+}: BarListProps) {
+	assertOptions(ariaLabel, tone);
+	assertItems(items);
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const format = formatValue ?? new Intl.NumberFormat(locale).format;
+	const { fade, linkProps } = useChartHover();
+	const ranked = items
+		.map((item, index) => ({ ...item, tone: toneAt(index, tone) }))
+		.sort((left, right) => right.value - left.value);
+	const max = ranked[0]?.value || 1;
+
+	return (
+		<div
+			{...rest}
+			data-slot="bar-list"
+			ref={forwardedRef}
+			{...props(barListStyles.root, typeRoles.ui)}
+		>
+			{valueLabel ? (
+				<div
+					aria-hidden="true"
+					data-slot="bar-list-header"
+					{...props(barListStyles.header, typeRoles.caption)}
+				>
+					<span />
+					<span>{valueLabel}</span>
+				</div>
+			) : null}
+			<ul aria-label={ariaLabel} {...props(barListStyles.list)}>
+				{ranked.map(({ icon, id, label, tone: itemTone, value }) => (
+					<li
+						data-slot="bar-list-item"
+						key={id}
+						{...linkProps(id)}
+						{...props(barListStyles.item)}
+					>
+						<span
+							aria-hidden="true"
+							data-slot="bar-list-bar"
+							{...props(
+								...fade(id),
+								barListStyles.bar(`${(value / max) * 100}%`, tintOf(itemTone))
+							)}
+						/>
+						<span data-slot="bar-list-label" {...props(barListStyles.label)}>
+							{icon ? (
+								<span aria-hidden="true" {...props(barListStyles.icon)}>
+									{icon}
+								</span>
+							) : null}
+							{label}
+						</span>
+						<span data-slot="bar-list-value" {...props(barListStyles.value)}>
+							{format(value)}
+						</span>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}

package/src/components/blockquote/blockquote.styles.ts

@@ -0,0 +1,26 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const blockquoteStyles = create({
+	attribution: {
+		color: colors.mutedContent,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+	content: {
+		borderInlineStartColor: colors.border,
+		borderInlineStartStyle: "solid",
+		borderInlineStartWidth: 2,
+		margin: 0,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+		paddingInlineStart: space["3"],
+	},
+	root: {
+		display: "grid",
+		gap: space["3"],
+		margin: 0,
+		minWidth: 0,
+	},
+});

package/src/components/blockquote/blockquote.tsx

@@ -0,0 +1,75 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { blockquoteStyles } from "./blockquote.styles";
+
+type Part<T> = Omit<Closed<T>, "children" | "data-slot" | "role"> & {
+	children: ReactNode;
+};
+
+export type BlockquoteProps = Part<ComponentPropsWithRef<"figure">>;
+export type BlockquoteContentProps = Part<ComponentPropsWithRef<"blockquote">>;
+export type BlockquoteAttributionProps = Part<
+	ComponentPropsWithRef<"figcaption">
+>;
+
+function stripReservedProps(attributes: Record<string, unknown>) {
+	for (const prop of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(attributes, prop);
+	}
+}
+
+export function Blockquote({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BlockquoteProps) {
+	stripReservedProps(rest);
+	return (
+		<figure
+			{...rest}
+			data-slot="blockquote"
+			ref={forwardedRef}
+			{...props(blockquoteStyles.root, typeRoles.body)}
+		>
+			{children}
+		</figure>
+	);
+}
+
+export function BlockquoteContent({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BlockquoteContentProps) {
+	stripReservedProps(rest);
+	return (
+		<blockquote
+			{...rest}
+			data-slot="blockquote-content"
+			ref={forwardedRef}
+			{...props(blockquoteStyles.content, typeRoles.body)}
+		>
+			{children}
+		</blockquote>
+	);
+}
+
+export function BlockquoteAttribution({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BlockquoteAttributionProps) {
+	stripReservedProps(rest);
+	return (
+		<figcaption
+			{...rest}
+			data-slot="blockquote-attribution"
+			ref={forwardedRef}
+			{...props(blockquoteStyles.attribution, typeRoles.body)}
+		>
+			{children}
+		</figcaption>
+	);
+}

package/src/components/breadcrumb/breadcrumb-link.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { props } from "@stylexjs/stylex";
+import type { Closed } from "../../closed";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot } from "../../render-utils";
+import { breadcrumbStyles } from "./breadcrumb.styles";
+
+export type BreadcrumbLinkProps = Closed<useRender.ComponentProps<"a">>;
+
+export function BreadcrumbLink({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: BreadcrumbLinkProps) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps(
+			props(breadcrumbStyles.link, breadcrumbStyles.iconContent),
+			rest,
+			{
+				children: controlLabel(children),
+				"data-slot": "breadcrumb-link",
+			}
+		),
+		ref: forwardedRef,
+		render: protectRenderSlot("breadcrumb-link", render),
+	});
+}

package/src/components/breadcrumb/breadcrumb.styles.ts

@@ -0,0 +1,114 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+} from "../../styles/interaction.stylex";
+import { duration } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const breadcrumbStyles = create({
+	ellipsis: {
+		alignItems: "center",
+		display: "inline-flex",
+		fontSize: fontSize["12"],
+		justifyContent: "center",
+		lineHeight: lineHeight.none,
+		userSelect: "none",
+	},
+	iconContent: {
+		flexShrink: { ":is(*) > svg": 0 },
+		height: { ":is(*) > svg": "1rem" },
+		width: { ":is(*) > svg": "1rem" },
+	},
+	item: {
+		alignItems: "center",
+		display: "inline-flex",
+		gap: space["1"],
+		minWidth: 0,
+	},
+	link: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		borderRadius: `calc(${shape.controlRadius} / 3)`,
+		color: {
+			[conditions.canHover]: { ":hover": colors.content },
+			default: "inherit",
+		},
+		display: "inline-flex",
+		gap: space["1"],
+		minWidth: 0,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: "solid",
+		outlineWidth: {
+			":focus-visible": borderWidth.focus,
+			default: 0,
+		},
+		overflowWrap: "anywhere",
+		textDecoration: "none",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "color",
+	},
+	list: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		listStyle: "none",
+		margin: 0,
+		minWidth: 0,
+		padding: 0,
+	},
+	page: {
+		alignItems: "center",
+		color: colors.content,
+		display: "inline-flex",
+		fontWeight: fontWeight.regular,
+		gap: space["1"],
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+	root: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		lineHeight: lineHeight["20"],
+	},
+	separator: {
+		alignItems: "center",
+		color: colors.mutedContent,
+		display: "inline-flex",
+		flex: "none",
+		fontSize: fontSize["14"],
+		justifyContent: "center",
+		userSelect: "none",
+	},
+	separatorIcon: {
+		height: "1rem",
+		transform: {
+			":dir(rtl)": "scaleX(-1)",
+			":is([dir='rtl'] *):not(:is([dir='ltr'] *))": "scaleX(-1)",
+			default: "none",
+		},
+		width: "1rem",
+	},
+});

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,137 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { controlLabel } from "../../control-label";
+import { IconChevronRight, IconDots } from "../../icons";
+import { breadcrumbStyles } from "./breadcrumb.styles";
+
+export type { BreadcrumbLinkProps } from "./breadcrumb-link";
+// biome-ignore lint/performance/noBarrelFile: Keep the link API beside the native breadcrumb anatomy.
+export { BreadcrumbLink } from "./breadcrumb-link";
+
+export type BreadcrumbProps = Closed<ComponentPropsWithRef<"nav">>;
+export type BreadcrumbListProps = Closed<ComponentPropsWithRef<"ol">>;
+export type BreadcrumbItemProps = Closed<ComponentPropsWithRef<"li">>;
+export type BreadcrumbPageProps = Closed<ComponentPropsWithRef<"span">>;
+export type BreadcrumbSeparatorProps = Closed<ComponentPropsWithRef<"li">>;
+export type BreadcrumbEllipsisProps = Closed<ComponentPropsWithRef<"span">>;
+
+function ChevronIcon() {
+	return (
+		<IconChevronRight
+			aria-hidden="true"
+			focusable="false"
+			{...props(breadcrumbStyles.separatorIcon)}
+			size="1em"
+		/>
+	);
+}
+
+export function Breadcrumb({
+	"aria-label": ariaLabel = "breadcrumb",
+	children,
+	ref: forwardedRef,
+	...rest
+}: BreadcrumbProps) {
+	return (
+		<nav
+			{...rest}
+			aria-label={ariaLabel}
+			data-slot="breadcrumb"
+			ref={forwardedRef}
+			{...props(breadcrumbStyles.root)}
+		>
+			{children}
+		</nav>
+	);
+}
+
+export function BreadcrumbList({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BreadcrumbListProps) {
+	return (
+		<ol
+			{...rest}
+			data-slot="breadcrumb-list"
+			ref={forwardedRef}
+			{...props(breadcrumbStyles.list)}
+		>
+			{children}
+		</ol>
+	);
+}
+
+export function BreadcrumbItem({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BreadcrumbItemProps) {
+	return (
+		<li
+			{...rest}
+			data-slot="breadcrumb-item"
+			ref={forwardedRef}
+			{...props(breadcrumbStyles.item, breadcrumbStyles.iconContent)}
+		>
+			{children}
+		</li>
+	);
+}
+
+export function BreadcrumbPage({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BreadcrumbPageProps) {
+	return (
+		<span
+			aria-current="page"
+			{...rest}
+			data-slot="breadcrumb-page"
+			ref={forwardedRef}
+			{...props(breadcrumbStyles.page, breadcrumbStyles.iconContent)}
+		>
+			{controlLabel(children)}
+		</span>
+	);
+}
+
+export function BreadcrumbSeparator({
+	children,
+	ref: forwardedRef,
+	...rest
+}: BreadcrumbSeparatorProps) {
+	return (
+		<li
+			aria-hidden="true"
+			role="presentation"
+			{...rest}
+			data-slot="breadcrumb-separator"
+			ref={forwardedRef}
+			{...props(breadcrumbStyles.separator, breadcrumbStyles.iconContent)}
+		>
+			{children ?? <ChevronIcon />}
+		</li>
+	);
+}
+
+export function BreadcrumbEllipsis({
+	children: _children,
+	ref: forwardedRef,
+	...rest
+}: BreadcrumbEllipsisProps) {
+	return (
+		<span
+			aria-hidden="true"
+			role="presentation"
+			{...rest}
+			data-slot="breadcrumb-ellipsis"
+			ref={forwardedRef}
+			{...props(breadcrumbStyles.ellipsis)}
+		>
+			<IconDots aria-hidden="true" focusable="false" size={16} />
+		</span>
+	);
+}

package/src/components/button/button-colors.stylex.ts

@@ -0,0 +1,7 @@
+import { defineVars } from "@stylexjs/stylex";
+
+// The brand fill darkens toward this shade on hover and press. Selected
+// states that map the fill to a system color override it to keep it solid.
+export const buttonColors = defineVars({
+	brandShade: "black",
+});

package/src/components/button/button.css

@@ -0,0 +1,16 @@
+:is([data-slot="button"], [data-slot="toolbar-button"])
+	> svg:not([data-slot="button-loading-indicator"]) {
+	flex-shrink: 0;
+	width: 1em;
+	height: 1em;
+}
+
+:is([data-slot="button"], [data-slot="toolbar-button"])[data-loading]
+	> :not([data-slot="button-loading-indicator"]) {
+	opacity: 0;
+}
+
+/* A toolbar scrolls instead of squeezing its buttons onto two lines. */
+[data-slot="toolbar-button"] {
+	flex-shrink: 0;
+}