@mizen-labs/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,199 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { colors, fieldColors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+	opacity,
+	scale,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+
+// The mark draws on along its stroke; pathLength="1" makes one unit the
+// whole path.
+const draw = keyframes({
+	from: { strokeDashoffset: 1 },
+	to: { strokeDashoffset: 0 },
+});
+
+export const checkboxStyles = create({
+	base: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		appearance: "none",
+		backgroundColor: {
+			"[data-checked]": colors.accent,
+			"[data-checked]:not([data-disabled], [data-readonly]):hover": {
+				[conditions.canHover]: `color-mix(in oklch, ${colors.accent} 94%, white)`,
+			},
+			"[data-disabled]": fieldColors.disabled,
+			"[data-disabled][data-checked]": colors.accent,
+			"[data-disabled][data-indeterminate]": colors.accent,
+			"[data-indeterminate]": colors.accent,
+			"[data-indeterminate]:not([data-disabled], [data-readonly]):hover": {
+				[conditions.canHover]: `color-mix(in oklch, ${colors.accent} 94%, white)`,
+			},
+			default: colors.surface,
+		},
+		borderColor: {
+			":is([aria-invalid='true'], [data-invalid]):not([data-disabled])":
+				colors.destructive,
+			"[aria-invalid='true'][data-checked]:not([data-disabled])":
+				colors.destructive,
+			"[aria-invalid='true'][data-indeterminate]:not([data-disabled])":
+				colors.destructive,
+			"[data-checked]:not([data-disabled])": colors.accent,
+			"[data-disabled]": "transparent",
+			"[data-indeterminate]:not([data-disabled])": colors.accent,
+			"[data-invalid][data-checked]:not([data-disabled])": colors.destructive,
+			"[data-invalid][data-indeterminate]:not([data-disabled])":
+				colors.destructive,
+			// Flat controls show hover on the border instead of a shadow.
+			"[data-unchecked]:not([data-indeterminate], [data-disabled], [data-readonly], [aria-invalid='true'], [data-invalid]):hover":
+				{
+					[conditions.canHover]: colors.content,
+				},
+			default: colors.controlBorderStrong,
+		},
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		// Flat: only an invalid control carries a ring.
+		boxShadow: {
+			":is([aria-invalid='true'], [data-invalid]):not([data-disabled])": `0 0 0 1px color-mix(in oklch, ${colors.destructive} 12%, transparent)`,
+			default: "none",
+		},
+		boxSizing: "border-box",
+		color: colors.accentContent,
+		cursor: {
+			"[data-disabled]": "not-allowed",
+			"[data-readonly]:not([data-disabled])": "default",
+			default: "pointer",
+		},
+		display: "inline-flex",
+		flexShrink: 0,
+		justifyContent: "center",
+		lineHeight: 0,
+		opacity: { "[data-disabled]": opacity.disabled, default: 1 },
+		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",
+		transform: {
+			[conditions.reducedMotion]: {
+				":active:not([data-disabled]):not([data-readonly])": "translateY(-1px)",
+				default: "translateY(-1px)",
+			},
+			":active:not([data-disabled]):not([data-readonly])": `translateY(-1px) scale(${scale.pressed})`,
+			default: "translateY(-1px)",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty:
+			"background-color, border-color, box-shadow, color, outline-color, outline-offset, transform",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+		verticalAlign: "middle",
+	},
+	// Only a mark that appears on a check draws on; one that is checked when
+	// it first renders is already drawn.
+	draw: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "200ms",
+		},
+		animationFillMode: "both",
+		animationName: draw,
+		animationTimingFunction: easing.easeOut,
+	},
+	forcedColorsSelected: {
+		"[data-checked]": {
+			backgroundColor: { [conditions.forcedColors]: "Highlight" },
+			borderColor: { [conditions.forcedColors]: "Highlight" },
+			color: { [conditions.forcedColors]: "HighlightText" },
+		},
+		"[data-indeterminate]": {
+			backgroundColor: { [conditions.forcedColors]: "Highlight" },
+			borderColor: { [conditions.forcedColors]: "Highlight" },
+			color: { [conditions.forcedColors]: "HighlightText" },
+		},
+	},
+	icon: {
+		display: "block",
+		height: "100%",
+		overflow: "visible",
+		width: "100%",
+	},
+	indicator: {
+		alignItems: "center",
+		display: "inline-flex",
+		height: "100%",
+		justifyContent: "center",
+		lineHeight: 0,
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		pointerEvents: "none",
+		transform: {
+			"[data-ending-style]": "rotate(-8deg) scale(0.78)",
+			"[data-starting-style]": "rotate(-8deg) scale(0.78)",
+			default: "rotate(0deg) scale(1)",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: easing.spring,
+		width: "100%",
+	},
+	mark: {
+		strokeDasharray: 1,
+		strokeWidth: 2,
+	},
+	sizeDefault: {
+		borderEndEndRadius: shape.checkboxRadius,
+		borderEndStartRadius: shape.checkboxRadius,
+		borderStartEndRadius: shape.checkboxRadius,
+		borderStartStartRadius: shape.checkboxRadius,
+		height: "1.125rem",
+		width: "1.125rem",
+	},
+	sizeLg: {
+		borderEndEndRadius: shape.checkboxRadius,
+		borderEndStartRadius: shape.checkboxRadius,
+		borderStartEndRadius: shape.checkboxRadius,
+		borderStartStartRadius: shape.checkboxRadius,
+		height: "1.25rem",
+		width: "1.25rem",
+	},
+	sizeSm: {
+		borderEndEndRadius: shape.checkboxRadius,
+		borderEndStartRadius: shape.checkboxRadius,
+		borderStartEndRadius: shape.checkboxRadius,
+		borderStartStartRadius: shape.checkboxRadius,
+		height: "1rem",
+		width: "1rem",
+	},
+});

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { CheckboxIndicatorState } from "@base-ui/react/checkbox";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, useCallback, useState } from "react";
+import { checkboxStyles } from "./checkbox.styles";
+
+type BaseCheckboxProps = ComponentPropsWithRef<typeof BaseCheckbox.Root>;
+
+export type CheckboxSize = "default" | "lg" | "sm";
+
+export type CheckboxProps = Omit<
+	BaseCheckboxProps,
+	| "className"
+	| "children"
+	| "disabled"
+	| "nativeButton"
+	| "parent"
+	| "ref"
+	| "render"
+	| "style"
+> & {
+	disabled?: boolean;
+	invalid?: boolean;
+	parent?: boolean;
+	ref?: BaseCheckboxProps["ref"];
+	size?: CheckboxSize;
+};
+
+const sizeStyles = {
+	default: checkboxStyles.sizeDefault,
+	lg: checkboxStyles.sizeLg,
+	sm: checkboxStyles.sizeSm,
+};
+
+// The marks are drawn here rather than taken from the icon pack: they are
+// part of the control, and pathLength="1" lets the stroke draw on exactly.
+// The stroke draws only when a check makes the mark appear, and once: a
+// mark that mounts checked, or shows again after being hidden, stays still.
+function CheckboxMark({ state }: { state: CheckboxIndicatorState }) {
+	const [drawing, setDrawing] = useState(state.transitionStatus === "starting");
+	const settle = useCallback(() => setDrawing(false), []);
+	return (
+		<svg
+			aria-hidden="true"
+			fill="none"
+			focusable="false"
+			viewBox="0 0 16 16"
+			{...props(checkboxStyles.icon)}
+		>
+			<path
+				d={state.indeterminate ? "M4 8h8" : "M3.5 8.5l3 3l6 -6.5"}
+				onAnimationEnd={settle}
+				pathLength={1}
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				{...props(checkboxStyles.mark, drawing && checkboxStyles.draw)}
+			/>
+		</svg>
+	);
+}
+
+function renderIndicator(
+	indicatorProps: ComponentPropsWithRef<"span">,
+	state: CheckboxIndicatorState
+) {
+	return (
+		<span {...indicatorProps} {...props(checkboxStyles.indicator)}>
+			<CheckboxMark state={state} />
+		</span>
+	);
+}
+
+export function Checkbox({
+	disabled = false,
+	indeterminate,
+	invalid = false,
+	parent = false,
+	readOnly = false,
+	ref: forwardedRef = undefined,
+	size = "default",
+	...rest
+}: CheckboxProps) {
+	return (
+		<BaseCheckbox.Root
+			{...rest}
+			aria-invalid={invalid || undefined}
+			disabled={disabled}
+			indeterminate={indeterminate}
+			parent={parent}
+			readOnly={readOnly}
+			ref={forwardedRef}
+			{...props(
+				checkboxStyles.base,
+				checkboxStyles.forcedColorsSelected,
+				sizeStyles[size]
+			)}
+		>
+			<BaseCheckbox.Indicator render={renderIndicator} />
+		</BaseCheckbox.Root>
+	);
+}

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

@@ -0,0 +1,11 @@
+import { create } from "@stylexjs/stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const checkboxGroupStyles = create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		width: "100%",
+	},
+});

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { checkboxGroupStyles } from "./checkbox-group.styles";
+
+type BaseCheckboxGroupProps = ComponentPropsWithRef<typeof BaseCheckboxGroup>;
+
+export type CheckboxGroupProps = Omit<
+	BaseCheckboxGroupProps,
+	"className" | "render" | "style"
+>;
+
+export function CheckboxGroup({
+	children,
+	ref: forwardedRef = undefined,
+	...rest
+}: CheckboxGroupProps) {
+	return (
+		<BaseCheckboxGroup
+			{...rest}
+			ref={forwardedRef}
+			{...props(checkboxGroupStyles.root)}
+		>
+			{children}
+		</BaseCheckboxGroup>
+	);
+}

package/src/components/citation/citation.styles.ts

@@ -0,0 +1,7 @@
+import { create } from "@stylexjs/stylex";
+
+export const citationStyles = create({
+	root: {
+		fontStyle: "italic",
+	},
+});

package/src/components/citation/citation.tsx

@@ -0,0 +1,30 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { citationStyles } from "./citation.styles";
+
+export type CitationProps = Omit<
+	Closed<ComponentPropsWithRef<"cite">>,
+	"children" | "data-slot" | "role"
+> & { children: ReactNode };
+
+export function Citation({
+	children,
+	ref: forwardedRef,
+	...rest
+}: CitationProps) {
+	for (const prop of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+
+	return (
+		<cite
+			{...rest}
+			data-slot="citation"
+			ref={forwardedRef}
+			{...props(citationStyles.root)}
+		>
+			{children}
+		</cite>
+	);
+}

package/src/components/code/code.styles.ts

@@ -0,0 +1,22 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+// Inline code follows the surrounding text: em size with matched x-height,
+// and the parent's line height so it never stretches the line box.
+export const codeStyles = create({
+	base: {
+		backgroundColor: colors.controlSurface,
+		borderRadius: shape.inlineRadius,
+		color: colors.content,
+		fontFamily: fonts.mono,
+		// eslint-disable-next-line no-restricted-syntax -- inline code scales with its surrounding role.
+		fontSize: "0.9em",
+		fontSizeAdjust: fonts.sizeAdjust,
+		lineHeight: "inherit",
+		overflowWrap: "anywhere",
+		paddingInline: space["1"],
+	},
+});

package/src/components/code/code.tsx

@@ -0,0 +1,22 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { codeStyles } from "./code.styles";
+
+type NativeCodeProps = ComponentPropsWithRef<"code">;
+
+export type CodeProps = Omit<NativeCodeProps, "className" | "role" | "style">;
+
+export function Code({ children, ref: forwardedRef, ...rest }: CodeProps) {
+	Reflect.deleteProperty(rest, "role");
+
+	return (
+		<code
+			{...rest}
+			data-slot="code"
+			ref={forwardedRef}
+			{...props(codeStyles.base)}
+		>
+			{children}
+		</code>
+	);
+}

package/src/components/code-block/code-block-copy.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { useCallback } from "react";
+import { IconCheck, IconCopy } from "../../icons";
+import { typeRoles } from "../../styles/typography.styles";
+import {
+	type CopyStatus,
+	useCopyToClipboard,
+} from "../../use-copy-to-clipboard";
+import type { ButtonProps } from "../button/button";
+import { Button } from "../button/button";
+import { visuallyHiddenStyles } from "../visually-hidden/visually-hidden.styles";
+import { codeBlockStyles } from "./code-block.styles";
+
+export interface CodeBlockCopyProps {
+	code: string;
+	ref?: ButtonProps["ref"];
+}
+
+const statusMessages: Record<CopyStatus, string | null> = {
+	copied: "Copied",
+	failed: "Could not copy. Select the code to copy it.",
+	idle: null,
+};
+
+export function CodeBlockCopy({ code, ref: forwardedRef }: CodeBlockCopyProps) {
+	const { copy, status } = useCopyToClipboard();
+	const copyCode = useCallback(() => copy(code), [code, copy]);
+
+	return (
+		<span data-slot="code-block-copy" {...props(codeBlockStyles.copyControl)}>
+			<Button
+				aria-label="Copy code"
+				onClick={copyCode}
+				ref={forwardedRef}
+				size="icon-xs"
+				title="Copy code"
+				type="button"
+				variant="ghost"
+			>
+				{status === "copied" ? (
+					<IconCheck aria-hidden="true" size="1em" />
+				) : (
+					<IconCopy aria-hidden="true" size="1em" />
+				)}
+			</Button>
+			<span
+				aria-live="polite"
+				data-slot="code-block-copy-status"
+				role="status"
+				{...props(
+					codeBlockStyles.copyStatus,
+					typeRoles.ui,
+					status !== "failed" && visuallyHiddenStyles.root
+				)}
+			>
+				{statusMessages[status]}
+			</span>
+		</span>
+	);
+}

package/src/components/code-block/code-block-highlight.tsx

@@ -0,0 +1,69 @@
+// biome-ignore-all lint/performance/noNamespaceImport: each sugar-high language module is one whole set of parse options, so nothing is left to shake.
+// biome-ignore-all lint/suspicious/noArrayIndexKey: Immutable source positions identify syntax tokens.
+import { props, type StyleXStyles } from "@stylexjs/stylex";
+import { Fragment } from "react";
+import { type ParseOptions, parse, type TokenType } from "sugar-high/core";
+import * as css from "sugar-high/lang/css";
+import * as diff from "sugar-high/lang/diff";
+import * as html from "sugar-high/lang/html";
+import * as javascript from "sugar-high/lang/javascript";
+import * as json from "sugar-high/lang/json";
+import * as markdown from "sugar-high/lang/markdown";
+import * as python from "sugar-high/lang/python";
+import * as shell from "sugar-high/lang/shell";
+import * as sql from "sugar-high/lang/sql";
+import * as typescript from "sugar-high/lang/typescript";
+import * as yaml from "sugar-high/lang/yaml";
+import { codeBlockStyles } from "./code-block.styles";
+
+// Each sugar-high language module is a set of parse options. TypeScript also
+// covers TSX, and JavaScript covers JSX.
+const languages = {
+	css,
+	diff,
+	html,
+	javascript,
+	json,
+	markdown,
+	python,
+	shell,
+	sql,
+	typescript,
+	yaml,
+};
+
+export type CodeBlockLanguage = keyof typeof languages;
+
+const tokenStyles: Partial<Record<TokenType, StyleXStyles>> = {
+	class: codeBlockStyles.syntaxEntity,
+	comment: codeBlockStyles.syntaxComment,
+	entity: codeBlockStyles.syntaxEntity,
+	keyword: codeBlockStyles.syntaxKeyword,
+	property: codeBlockStyles.syntaxProperty,
+	string: codeBlockStyles.syntaxString,
+};
+
+/** Tokenizes code synchronously, so server-rendered code arrives colored. */
+export function HighlightedCode({
+	code,
+	language,
+}: {
+	code: string;
+	language: CodeBlockLanguage;
+}) {
+	// The modules are parse options at runtime; the JS tokenizer's published
+	// type is narrower than ParseOptions["tokenize"], so it needs the cast.
+	const { lines } = parse(code, languages[language] as ParseOptions);
+	// A trailing newline would add an empty last line.
+	const lineCount = lines.length - Number(code.endsWith("\n"));
+	return lines.slice(0, lineCount).map((line) => (
+		<Fragment key={line.index}>
+			{line.tokens.map((token, index) => (
+				<span key={index} {...props(tokenStyles[token.type])}>
+					{token.value}
+				</span>
+			))}
+			{line.index < lineCount - 1 ? "\n" : null}
+		</Fragment>
+	));
+}

package/src/components/code-block/code-block.styles.ts

@@ -0,0 +1,129 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontSize, lineHeight } from "../../styles/typography.stylex";
+
+const FLOATING = ":is([data-slot='code-block'] > *)";
+
+// Syntax colors take the chart hues mixed toward the text color, so each stays
+// recognizable and still reads at 4.5:1 on the code surface in both themes.
+const syntax = (hue: string) => ({
+	color: `color-mix(in oklch, ${hue} 62%, ${colors.content})`,
+});
+
+export const codeBlockStyles = create({
+	code: { font: "inherit" },
+	content: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		// The focus ring follows the frame's inner corner.
+		borderRadius: `calc(${shape.controlRadiusLarge} - ${borderWidth.thin}px)`,
+		boxSizing: "border-box",
+		color: colors.content,
+		// The size adjustment that pairs Mono with the UI font shrinks it, so
+		fontSize: fontSize["14"],
+		lineHeight: lineHeight["20"],
+		margin: 0,
+		maxInlineSize: "100%",
+		minWidth: 0,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: {
+			":focus-visible": focus.offset,
+			default: focus.offset,
+		},
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		// Standalone code scrolls itself; inside a ScrollArea it lets the area
+		// scroll, so only one styled scrollbar shows.
+		overflowX: {
+			":is([data-slot='scroll-area-content'] > *)": "visible",
+			default: "auto",
+		},
+		overscrollBehaviorInline: "contain",
+		paddingBlock: space["3"],
+		paddingInline: space["4"],
+		tabSize: 2,
+		whiteSpace: "pre",
+	},
+	// Without a header, Copy floats in the corner over a patch of surface, so
+	// code scrolling beneath it stays out of sight.
+	copyControl: {
+		alignItems: "center",
+		backgroundColor: { [FLOATING]: colors.surface, default: "transparent" },
+		borderRadius: { [FLOATING]: shape.controlRadius, default: 0 },
+		// The ring fills the 8px gap to the frame so no code shows around Copy.
+		// With the 28px button, gap, button, and gap fill a one-line row's 44px,
+		// so the ring stops at the frame's inner edge.
+		boxShadow: {
+			[FLOATING]: `0 0 0 ${space["2"]} ${colors.surface}`,
+			default: "none",
+		},
+		display: "inline-flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		insetBlockStart: { [FLOATING]: space["2"], default: "auto" },
+		insetInlineEnd: { [FLOATING]: space["2"], default: "auto" },
+		minWidth: 0,
+		position: { [FLOATING]: "absolute", default: "static" },
+		// Above the scrolling body, which comes later in the figure.
+		zIndex: { [FLOATING]: 1, default: "auto" },
+	},
+	copyStatus: {
+		color: colors.mutedContent,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+	header: {
+		alignItems: "center",
+		borderBlockEndColor: colors.border,
+		borderBlockEndStyle: "solid",
+		borderBlockEndWidth: borderWidth.thin,
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		justifyContent: "space-between",
+		minWidth: 0,
+		paddingBlock: space["1"],
+		paddingInline: space["4"],
+	},
+	root: {
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		borderRadius: shape.controlRadiusLarge,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		color: colors.content,
+		margin: 0,
+		minWidth: 0,
+		position: "relative",
+	},
+	syntaxComment: { color: colors.mutedContent },
+	syntaxEntity: syntax(colors.chartSeries6),
+	syntaxKeyword: syntax(colors.chartSeries1),
+	syntaxProperty: syntax(colors.chartSeries5),
+	syntaxString: syntax(colors.chartSeries3),
+	title: {
+		color: colors.mutedContent,
+		fontFamily: fonts.mono,
+		minWidth: 0,
+		overflowWrap: "anywhere",
+	},
+});