@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/loading-indicator.tsx

@@ -0,0 +1,45 @@
+import { props, type StyleXStyles } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { spinnerStyles } from "./components/spinner/spinner.styles";
+
+// The ring clockwise from the top, so the bright head travels clockwise.
+const ringDots = [
+	{ cx: 12, cy: 3, style: spinnerStyles.loaderDot0 },
+	{ cx: 18.36, cy: 5.64, style: spinnerStyles.loaderDot1 },
+	{ cx: 21, cy: 12, style: spinnerStyles.loaderDot2 },
+	{ cx: 18.36, cy: 18.36, style: spinnerStyles.loaderDot3 },
+	{ cx: 12, cy: 21, style: spinnerStyles.loaderDot4 },
+	{ cx: 5.64, cy: 18.36, style: spinnerStyles.loaderDot5 },
+	{ cx: 3, cy: 12, style: spinnerStyles.loaderDot6 },
+	{ cx: 5.64, cy: 5.64, style: spinnerStyles.loaderDot7 },
+] as const;
+
+// Private shared glyph. Public components retain their own closed prop contracts.
+export function LoadingIndicator({
+	indicatorStyles,
+	ref,
+	...rest
+}: ComponentPropsWithRef<"svg"> & { indicatorStyles?: StyleXStyles }) {
+	return (
+		<svg
+			{...rest}
+			aria-label={rest["aria-label"]}
+			fill="currentColor"
+			ref={ref}
+			stroke="none"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props(spinnerStyles.base, indicatorStyles)}
+		>
+			{ringDots.map(({ cx, cy, style }) => (
+				<circle
+					cx={cx}
+					cy={cy}
+					key={`${cx}-${cy}`}
+					r={2.5}
+					{...props(spinnerStyles.loaderDot, style)}
+				/>
+			))}
+		</svg>
+	);
+}

package/src/motion.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { create, props, type StyleXStyles } from "@stylexjs/stylex";
+import {
+	AnimatePresence,
+	domAnimation,
+	LazyMotion,
+	MotionConfig,
+	m,
+} from "motion/react";
+import { Children, isValidElement, type ReactNode, type Ref } from "react";
+
+// Mizen's motion tokens for Motion, which takes numbers: duration.disclosure
+// (320ms) with easing.expoOut, or easing.spring for a little overshoot.
+const EXPO_OUT = [0.16, 1, 0.3, 1] as const;
+const SPRING = [0.34, 1.56, 0.64, 1] as const;
+const DISCLOSURE = 0.32;
+
+export const disclosure = { duration: DISCLOSURE, ease: EXPO_OUT } as const;
+
+const styles = create({
+	icon: { display: "inline-flex", minInlineSize: 0 },
+	// No display of its own: in a row's flex layout it acts as a block, so a
+	// long title still ends in an ellipsis.
+	text: { minInlineSize: 0 },
+});
+
+/** Loads Motion's DOM features and honors the reader's reduced motion. */
+export function MotionScope({ children }: { children: ReactNode }) {
+	return (
+		<LazyMotion features={domAnimation} strict>
+			<MotionConfig reducedMotion="user">{children}</MotionConfig>
+		</LazyMotion>
+	);
+}
+
+// Changes animate; mounting does not. A part that loads, or remounts when
+// a fold opens, shows its state at once.
+
+/** A status icon that settles in with a little overshoot when it changes. */
+export function Pop({
+	change,
+	children,
+	look,
+	ref,
+}: {
+	change: string;
+	children: ReactNode;
+	/** The part's own styles, so the animated element is the part itself. */
+	look?: StyleXStyles;
+	ref?: Ref<HTMLSpanElement>;
+}) {
+	return (
+		<AnimatePresence initial={false} mode="popLayout">
+			<m.span
+				animate={{ opacity: 1, scale: 1 }}
+				exit={{ opacity: 0, transition: { duration: 0.1 } }}
+				initial={{ opacity: 0, scale: 0.8 }}
+				key={change}
+				ref={ref}
+				transition={{ duration: DISCLOSURE, ease: SPRING }}
+				{...props(styles.icon, look)}
+			>
+				{children}
+			</m.span>
+		</AnimatePresence>
+	);
+}
+
+/** A title that rises 3px into place when it changes, such as Running to Ran. */
+export function Rise({
+	change,
+	children,
+	look,
+}: {
+	change: string;
+	children: ReactNode;
+	/** The part's own styles, so the animated element is the part itself. */
+	look?: StyleXStyles;
+}) {
+	return (
+		<AnimatePresence initial={false} mode="popLayout">
+			<m.span
+				animate={{ opacity: 1, y: 0 }}
+				exit={{ opacity: 0, transition: { duration: 0.1 } }}
+				initial={{ opacity: 0, y: 3 }}
+				key={change}
+				transition={disclosure}
+				{...props(styles.text, look)}
+			>
+				{children}
+			</m.span>
+		</AnimatePresence>
+	);
+}
+
+/**
+ * Grows in each child added after this list mounted, so the content below
+ * slides down instead of jumping. Children it starts with stay still. Each
+ * child needs a key.
+ */
+export function Arrivals({ children }: { children: ReactNode }) {
+	return (
+		<AnimatePresence initial={false}>
+			{Children.toArray(children).map((child) =>
+				isValidElement(child) ? (
+					<m.div
+						animate={{
+							height: "auto",
+							opacity: 1,
+							transitionEnd: { overflow: "visible" },
+						}}
+						exit={{ height: 0, opacity: 0, overflow: "hidden" }}
+						initial={{ height: 0, opacity: 0, overflow: "hidden" }}
+						key={child.key}
+						transition={disclosure}
+					>
+						{child}
+					</m.div>
+				) : null
+			)}
+		</AnimatePresence>
+	);
+}

package/src/ref-utils.ts

@@ -0,0 +1,27 @@
+import type { Ref } from "react";
+
+export function assignRef<T>(
+	ref: Ref<T> | undefined,
+	value: T | null
+): (() => void) | undefined {
+	if (!ref) {
+		return undefined;
+	}
+	if (typeof ref === "function") {
+		const cleanup = ref(value);
+		if (typeof cleanup === "function") {
+			return cleanup;
+		}
+		return value
+			? () => {
+					ref(null);
+				}
+			: undefined;
+	}
+	ref.current = value;
+	return value
+		? () => {
+				ref.current = null;
+			}
+		: undefined;
+}

package/src/render-utils.ts

@@ -0,0 +1,35 @@
+import type { ComponentRenderFn } from "@base-ui/react";
+import type { ReactElement } from "react";
+import { cloneElement, isValidElement } from "react";
+
+export function protectRenderSlot<Props extends object, State>(
+	slot: string,
+	render: ReactElement | ComponentRenderFn<Props, State> | undefined,
+	extraProps?: Record<string, unknown>
+): ReactElement | ComponentRenderFn<Props, State> | undefined {
+	const slotProps = { "data-slot": slot, ...extraProps };
+	if (typeof render === "function") {
+		return (renderProps: Props, state: State) => {
+			const element = render(renderProps, state);
+			return isValidElement(element)
+				? cloneElement(element, slotProps)
+				: element;
+		};
+	}
+	return render && isValidElement(render)
+		? cloneElement(render, slotProps)
+		: render;
+}
+
+// A copy of props without the given keys. Props are never mutated, so
+// callbacks that captured them stay valid.
+export function omitProps<T extends object>(
+	source: T,
+	keys: readonly string[]
+): T {
+	const copy = { ...source };
+	for (const key of keys) {
+		Reflect.deleteProperty(copy, key);
+	}
+	return copy;
+}

package/src/styles/application-structure.stylex.ts

@@ -0,0 +1,5 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+export const applicationStructure = defineConsts({
+	wideShell: "@container mizen-app-shell (min-width: 48rem)",
+});

package/src/styles/colors.stylex.ts

@@ -0,0 +1,64 @@
+import { defineVars } from "@stylexjs/stylex";
+
+export const colors = defineVars({
+	accent: "oklch(0.42 0.17 0)",
+	accentContent: "oklch(1 0 0)",
+	backdrop: "oklch(0 0 0)",
+	border: "rgb(15 13 10 / 0.06)",
+	brandBackground: "oklch(0.96 0.035 315)",
+	brandForeground: "oklch(0.42 0.17 0)",
+	// Reference series such as last year: quieter than the palette, 3:1 on the workarea.
+	chartReference: "oklch(0.62 0.015 285)",
+	// Categorical chart hues, violet first, in a fixed order validated for
+	// colorblind separation (adjacent ΔE ≥ 13.5) and 3:1 against the workarea.
+	// Reorder or retune only by re-running the validation.
+	chartSeries1: "oklch(0.66 0.21 300)",
+	chartSeries2: "oklch(0.65 0.135 75)",
+	chartSeries3: "oklch(0.66 0.22 352)",
+	chartSeries4: "oklch(0.63 0.175 132)",
+	chartSeries5: "oklch(0.645 0.19 255)",
+	chartSeries6: "oklch(0.63 0.13 165)",
+	content: "oklch(0.204627 0 0)",
+	controlBorderStrong: "oklch(0.62 0.015 285)",
+	controlSurface: "oklch(0.94 0.003 285)",
+	controlSurfaceDisabled: "oklch(0.97 0.003 285)",
+	controlSurfaceHover: "oklch(0.925 0.003 285)",
+	controlThumb: "oklch(1 0 0)",
+	controlThumbContent: "oklch(0.50 0.015 285)",
+	destructive: "oklch(58% 0.237 25.331)",
+	destructiveContent: "oklch(1 0 0)",
+	destructiveSubtle: "oklch(97% 0.02 25.331)",
+	// Error text at 12–14px, unlike the destructive fill used for actions and
+	// borders: APCA Lc ≥ 75 in light; the dark theme trades to Lc 70 for hue.
+	destructiveText: "oklch(0.49 0.19 25)",
+	floatingHighlight: "oklch(0.95 0.004 285)",
+	floatingSurface: "oklch(1 0 0)",
+	// 60% keeps the ring at 3:1 against surface and workarea (WCAG 1.4.11).
+	focusRing: "oklch(0.42 0.17 0 / 0.6)",
+	info: "oklch(0.91 0.04 240)",
+	infoContent: "oklch(0.26 0.06 245)",
+	// Secondary text at 12–16px and placeholders: APCA Lc ≥ 75 on surface and
+	// workarea in light, about 70 in dark (kept below content so placeholders
+	// stay distinct from values).
+	mutedContent: "oklch(0.46 0.015 285)",
+	primary: "oklch(0.204627 0 0)",
+	primaryContent: "oklch(1 0 0)",
+	secondary: "oklch(0.966956 0.004 315)",
+	secondaryContent: "oklch(0.204627 0 0)",
+	success: "oklch(0.90 0.06 145)",
+	successContent: "oklch(0.25 0.06 145)",
+	// Status marks such as dots: 3:1 against surface and workarea (WCAG 1.4.11).
+	successSolid: "oklch(0.60 0.16 148)",
+	surface: "oklch(1 0 0)",
+	switchTrackChecked: "oklch(0.42 0.17 0)",
+	warning: "oklch(0.92 0.06 85)",
+	warningContent: "oklch(0.25 0.05 85)",
+	warningSolid: "oklch(0.63 0.15 70)",
+	workarea: "oklch(0.975 0.003 285)",
+	workareaControlSurface: "oklch(0.94 0.003 285)",
+});
+
+export const fieldColors = defineVars({
+	disabled: colors.controlSurfaceDisabled,
+	surface: colors.controlSurface,
+});

package/src/styles/conditions.stylex.ts

@@ -0,0 +1,10 @@
+import { defineConsts } from "@stylexjs/stylex";
+export const conditions = defineConsts({
+	canHover: "@media (hover: hover)",
+	forcedColors: "@media (forced-colors: active)",
+	lg: "@media (min-width: 64rem)",
+	md: "@media (min-width: 48rem)",
+	moreContrast: "@media (prefers-contrast: more)",
+	reducedMotion: "@media (prefers-reduced-motion: reduce)",
+	sm: "@media (min-width: 40rem)",
+});

package/src/styles/dimensions.stylex.ts

@@ -0,0 +1,17 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+export const controlSize = defineConsts({
+	"2xs": "1.5rem",
+	lg: "2.5rem",
+	md: "2.25rem",
+	sm: "2rem",
+	xl: "2.75rem",
+	xs: "1.75rem",
+});
+
+export const glyphSize = defineConsts({
+	lg: "1.25rem",
+	md: "1.125rem",
+	sm: "1rem",
+	xs: "0.875rem",
+});

package/src/styles/floating-item-colors.stylex.ts

@@ -0,0 +1,22 @@
+import { defineVars } from "@stylexjs/stylex";
+import { colors } from "./colors.stylex";
+import { conditions } from "./conditions.stylex";
+
+export const floatingItemColors = defineVars({
+	destructiveHighlightBackground: {
+		[conditions.forcedColors]: "Highlight",
+		default: colors.destructiveSubtle,
+	},
+	destructiveHighlightForeground: {
+		[conditions.forcedColors]: "HighlightText",
+		default: colors.destructive,
+	},
+	highlightBackground: {
+		[conditions.forcedColors]: "Highlight",
+		default: colors.floatingHighlight,
+	},
+	highlightForeground: {
+		[conditions.forcedColors]: "HighlightText",
+		default: colors.content,
+	},
+});

package/src/styles/fonts.stylex.ts

@@ -0,0 +1,9 @@
+import { defineVars } from "@stylexjs/stylex";
+
+export const fonts = defineVars({
+	mono: 'ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace',
+	sans: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+	// Type roles normalize x-height with font-size-adjust so a role keeps its
+	// optical size in any family. Set "none" or "from-font" to opt out.
+	sizeAdjust: "0.5",
+});

package/src/styles/interaction.stylex.ts

@@ -0,0 +1,34 @@
+import { defineConsts, defineVars, keyframes } from "@stylexjs/stylex";
+import { conditions } from "./conditions.stylex";
+
+export const borderWidth = defineConsts({ focus: 3, thin: 1 });
+export const focus = defineConsts({ offset: "0px" });
+// The focus ring fades in at full width; outline widths snap to device
+// pixels, so growing them steps. Pair `animationName: focusMotion.ring` with
+// `animationDuration: focusMotion.duration`.
+export const focusMotion = defineVars({
+	duration: {
+		[conditions.reducedMotion]: "0s",
+		default: "200ms",
+	},
+	ring: keyframes({
+		from: {
+			animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+			outlineColor: "transparent",
+		},
+	}),
+});
+export const focusOutline = defineVars({
+	restingOutlineStyle: {
+		[conditions.forcedColors]: "none",
+		default: "solid",
+	},
+});
+export const forcedColorAdjust = defineVars({
+	selectedState: {
+		[conditions.forcedColors]: "none",
+		default: "auto",
+	},
+});
+export const opacity = defineConsts({ disabled: 0.55 });
+export const scale = defineConsts({ pressed: 0.98 });

package/src/styles/motion.stylex.ts

@@ -0,0 +1,28 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+export const easing = defineConsts({
+	back: "cubic-bezier(0.34, 1.4, 0.64, 1)",
+	easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+	easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+	easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+	expoOut: "cubic-bezier(0.16, 1, 0.3, 1)",
+	linear: "linear",
+	spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+});
+
+export const duration = defineConsts({
+	disclosure: "320ms",
+	fast: "140ms",
+	instant: "0ms",
+	overlayEnter: "280ms",
+	overlayExit: "200ms",
+	press: "100ms",
+});
+
+// Press surfaces (Button, Toggle): edges, colors, and shadows ease out together;
+// the surface returns a little slower than colors. Lists follow `property`.
+export const pressSurface = defineConsts({
+	property: "inset, background-color, border-color, box-shadow, opacity",
+	restDuration: "200ms, 140ms, 140ms, 140ms, 140ms",
+	restEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+});

package/src/styles/overlay-layers.styles.ts

@@ -0,0 +1,26 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "./colors.stylex";
+import { conditions } from "./conditions.stylex";
+
+export const overlayLayerStyles = create({
+	backdrop: {
+		backdropFilter: {
+			[conditions.forcedColors]: "none",
+			"@media (prefers-reduced-transparency: reduce)": "none",
+			default: "blur(4px)",
+		},
+		backgroundColor: `color-mix(in srgb, ${colors.backdrop} 42%, transparent)`,
+		zIndex: 0,
+	},
+	modalPortal: {
+		height: 0,
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		isolation: "isolate",
+		overflow: "visible",
+		position: "fixed",
+		width: 0,
+		zIndex: 50,
+	},
+	modalViewport: { zIndex: 1 },
+});

package/src/styles/palette.stylex.ts

@@ -0,0 +1,28 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+export const palette = defineConsts({
+	amber300: "oklch(0.74 0.11 88)",
+	amber500: "oklch(0.63 0.12 88)",
+	amber700: "oklch(0.53 0.1 88)",
+	blue300: "oklch(0.74 0.12 250)",
+	blue500: "oklch(0.63 0.14 250)",
+	blue700: "oklch(0.54 0.14 250)",
+	green300: "oklch(0.74 0.12 150)",
+	green500: "oklch(0.63 0.14 150)",
+	green700: "oklch(0.54 0.12 150)",
+	orange300: "oklch(0.74 0.14 32)",
+	orange500: "oklch(0.63 0.155 32)",
+	orange700: "oklch(0.56 0.17 32)",
+	pink300: "oklch(0.74 0.14 325)",
+	pink500: "oklch(0.63 0.16 325)",
+	pink700: "oklch(0.56 0.18 325)",
+	rose300: "oklch(0.74 0.12 0)",
+	rose500: "oklch(0.63 0.145 0)",
+	rose700: "oklch(0.48 0.17 0)",
+	teal300: "oklch(0.74 0.11 200)",
+	teal500: "oklch(0.63 0.08 200)",
+	teal700: "oklch(0.56 0.08 200)",
+	violet300: "oklch(0.74 0.13 285)",
+	violet500: "oklch(0.63 0.155 285)",
+	violet700: "oklch(0.54 0.18 285)",
+});

package/src/styles/shadows.stylex.ts

@@ -0,0 +1,14 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+export const shadows = defineConsts({
+	filledHover: "0 1px 2px oklch(0 0 0 / 0.12), 0 2px 4px oklch(0 0 0 / 0.08)",
+	filledRest: "0 1px 2px oklch(0 0 0 / 0.06)",
+	// A hairline plus a soft drop: popups lift off white surfaces.
+	floating:
+		"0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px -6px oklch(0 0 0 / 0.12)",
+	outlineHover: "0 1px 2px oklch(0 0 0 / 0.10), 0 2px 4px oklch(0 0 0 / 0.06)",
+	outlineRest: "0 1px 2px oklch(0 0 0 / 0.06)",
+	pressed: "inset 0 1px 2px oklch(0 0 0 / 0.16)",
+	recessedRest: "inset 0 1px 2px oklch(0 0 0 / 0.06)",
+	surface: "0 1px 2px oklch(0 0 0 / 0.06)",
+});

package/src/styles/shape.stylex.ts

@@ -0,0 +1,11 @@
+import { defineVars } from "@stylexjs/stylex";
+export const shape = defineVars({
+	checkboxRadius: "0.25rem",
+	controlRadius: "0.75rem",
+	controlRadiusLarge: "1rem",
+	floatingRadius: "1.5rem",
+	// Inline marks inside text, such as Code: small enough to stay rectangular.
+	inlineRadius: "0.375rem",
+	surfaceRadius: "1.75rem",
+	surfaceRadiusLarge: "2rem",
+});

package/src/styles/spacing.stylex.ts

@@ -0,0 +1,18 @@
+import { defineConsts } from "@stylexjs/stylex";
+
+// Numeric keys follow the 4px grid: step × 4 = px. `px` (2px) is reserved for
+// optical corrections.
+export const space = defineConsts({
+	"0": "0",
+	"1": "0.25rem",
+	"2": "0.5rem",
+	"3": "0.75rem",
+	"4": "1rem",
+	"5": "1.25rem",
+	"6": "1.5rem",
+	"8": "2rem",
+	"10": "2.5rem",
+	"12": "3rem",
+	"16": "4rem",
+	px: "0.125rem",
+});

package/src/styles/themes.ts

@@ -0,0 +1,57 @@
+import { createTheme } from "@stylexjs/stylex";
+import { colors, fieldColors } from "./colors.stylex";
+
+const darkColorTheme = createTheme(colors, {
+	accent: "oklch(0.56 0.14 0)",
+	accentContent: "oklch(1 0 0)",
+	backdrop: "oklch(0 0 0)",
+	border: "oklch(1 0 0 / 0.10)",
+	brandBackground: "oklch(0.235 0.045 325)",
+	brandForeground: "oklch(0.9 0.055 315)",
+	// Reference series such as last year: quieter than the palette, 3:1 on the workarea.
+	chartReference: "oklch(0.55 0.015 315)",
+	// Same hue order at the dark band (L 0.64); all clear 3:1 on the dark workarea.
+	chartSeries1: "oklch(0.64 0.22 300)",
+	chartSeries2: "oklch(0.64 0.135 75)",
+	chartSeries3: "oklch(0.64 0.22 352)",
+	chartSeries4: "oklch(0.64 0.175 132)",
+	chartSeries5: "oklch(0.64 0.195 255)",
+	chartSeries6: "oklch(0.64 0.13 165)",
+	content: "oklch(0.93 0.006 285)",
+	controlBorderStrong: "oklch(0.55 0.015 315)",
+	controlSurface: "oklch(0.265 0.008 285)",
+	controlSurfaceDisabled: "oklch(0.225 0.008 285)",
+	controlSurfaceHover: "oklch(0.285 0.008 285)",
+	controlThumb: "oklch(1 0 0)",
+	destructive: "oklch(0.70 0.18 25)",
+	destructiveContent: "oklch(0.18 0.006 285)",
+	destructiveSubtle: "oklch(0.27 0.07 25)",
+	destructiveText: "oklch(0.83 0.094 25)",
+	floatingHighlight: "oklch(0.32 0.008 285)",
+	floatingSurface: "oklch(0.245 0.008 285)",
+	focusRing: "oklch(0.72 0.13 0 / 0.6)",
+	info: "oklch(0.32 0.06 240)",
+	infoContent: "oklch(0.93 0.03 240)",
+	mutedContent: "oklch(0.82 0.012 315)",
+	primary: "oklch(0.91 0.006 285)",
+	primaryContent: "oklch(0.18 0.006 285)",
+	secondary: "oklch(0.24 0.01 315)",
+	secondaryContent: "oklch(0.93 0.006 285)",
+	success: "oklch(0.34 0.06 145)",
+	successContent: "oklch(0.93 0.03 145)",
+	successSolid: "oklch(0.72 0.16 148)",
+	surface: "oklch(0.18 0.006 285)",
+	switchTrackChecked: "oklch(0.56 0.14 0)",
+	warning: "oklch(0.36 0.06 85)",
+	warningContent: "oklch(0.95 0.03 85)",
+	warningSolid: "oklch(0.80 0.14 75)",
+	workarea: "oklch(0.205 0.008 285)",
+	workareaControlSurface: "oklch(0.265 0.008 285)",
+});
+
+const darkFieldTheme = createTheme(fieldColors, {
+	disabled: colors.controlSurfaceDisabled,
+	surface: colors.controlSurface,
+});
+
+export const darkTheme = [darkColorTheme, darkFieldTheme] as const;