@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/empty/empty.tsx

@@ -0,0 +1,175 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { emptyStyles } from "./empty.styles";
+
+export type EmptyMediaVariant = "default" | "icon";
+
+export type EmptyProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type EmptyHeaderProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type EmptyMediaProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "data-variant" | "style"
+> & {
+	variant?: EmptyMediaVariant;
+};
+
+export type EmptyTitleProps = Omit<
+	ComponentPropsWithRef<"h3">,
+	"className" | "data-slot" | "style"
+> & {
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+export type EmptyDescriptionProps = Omit<
+	ComponentPropsWithRef<"p">,
+	"className" | "data-slot" | "style"
+>;
+
+export type EmptyContentProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+const headingElements = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6",
+} as const;
+
+export function Empty({ children, ref: forwardedRef, ...rest }: EmptyProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="empty"
+			ref={forwardedRef}
+			{...props(emptyStyles.root)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function EmptyHeader({
+	children,
+	ref: forwardedRef,
+	...rest
+}: EmptyHeaderProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="empty-header"
+			ref={forwardedRef}
+			{...props(emptyStyles.header)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function EmptyMedia({
+	"aria-hidden": ariaHidden = true,
+	children,
+	ref: forwardedRef,
+	variant = "default",
+	...rest
+}: EmptyMediaProps) {
+	return (
+		<div
+			{...rest}
+			aria-hidden={ariaHidden}
+			data-slot="empty-media"
+			data-variant={variant}
+			ref={forwardedRef}
+			{...props(emptyStyles.media)}
+		>
+			{variant === "icon" ? (
+				<>
+					<div
+						aria-hidden="true"
+						{...props(
+							emptyStyles.mediaCard,
+							emptyStyles.mediaBackCard,
+							emptyStyles.mediaBackCardLeft
+						)}
+					/>
+					<div
+						aria-hidden="true"
+						{...props(
+							emptyStyles.mediaCard,
+							emptyStyles.mediaBackCard,
+							emptyStyles.mediaBackCardRight
+						)}
+					/>
+					<div {...props(emptyStyles.mediaCard)}>{children}</div>
+				</>
+			) : (
+				children
+			)}
+		</div>
+	);
+}
+
+export function EmptyTitle({
+	children,
+	level = 3,
+	ref: forwardedRef,
+	...rest
+}: EmptyTitleProps) {
+	const Component = headingElements[level];
+
+	return (
+		<Component
+			{...rest}
+			data-slot="empty-title"
+			ref={forwardedRef}
+			{...props(emptyStyles.title)}
+		>
+			{children}
+		</Component>
+	);
+}
+
+export function EmptyDescription({
+	children,
+	ref: forwardedRef,
+	...rest
+}: EmptyDescriptionProps) {
+	return (
+		<p
+			{...rest}
+			data-slot="empty-description"
+			ref={forwardedRef}
+			{...props(emptyStyles.description)}
+		>
+			{children}
+		</p>
+	);
+}
+
+export function EmptyContent({
+	children,
+	ref: forwardedRef,
+	...rest
+}: EmptyContentProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="empty-content"
+			ref={forwardedRef}
+			{...props(emptyStyles.content)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/error-state/error-state.styles.ts

@@ -0,0 +1,97 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const errorStateStyles = create({
+	content: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		maxWidth: "24rem",
+		minWidth: 0,
+		textWrap: "balance",
+		width: "100%",
+	},
+	description: {
+		boxSizing: "border-box",
+		color: colors.secondaryContent,
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		marginBlock: 0,
+		minWidth: 0,
+		textWrap: "pretty",
+	},
+	header: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		maxWidth: "24rem",
+		minWidth: 0,
+		textAlign: "center",
+		width: "100%",
+	},
+	media: {
+		alignItems: "center",
+		backgroundColor: colors.destructiveSubtle,
+		borderColor: colors.destructive,
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.outlineRest,
+		boxSizing: "border-box",
+		color: colors.destructive,
+		display: "flex",
+		flexShrink: 0,
+		height: controlSize.md,
+		justifyContent: "center",
+		marginBlockEnd: space["6"],
+		position: "relative",
+		width: controlSize.md,
+	},
+	root: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["6"],
+		justifyContent: "center",
+		minWidth: 0,
+		paddingBlock: {
+			default: space["6"],
+			[conditions.sm]: space["8"],
+		},
+		paddingInline: {
+			default: space["4"],
+			[conditions.sm]: space["5"],
+		},
+		textAlign: "center",
+		width: "100%",
+	},
+	title: {
+		boxSizing: "border-box",
+		color: colors.content,
+		fontSize: fontSize["20"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.heading,
+		lineHeight: lineHeight["28"],
+		marginBlock: 0,
+		marginBlockEnd: space["1"],
+		minWidth: 0,
+		textWrap: "balance",
+	},
+});

package/src/components/error-state/error-state.tsx

@@ -0,0 +1,151 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { errorStateStyles } from "./error-state.styles";
+
+export type ErrorStateProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type ErrorStateHeaderProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type ErrorStateMediaProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+export type ErrorStateTitleProps = Omit<
+	ComponentPropsWithRef<"h3">,
+	"className" | "data-slot" | "style"
+> & {
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+export type ErrorStateDescriptionProps = Omit<
+	ComponentPropsWithRef<"p">,
+	"className" | "data-slot" | "style"
+>;
+
+export type ErrorStateContentProps = Omit<
+	ComponentPropsWithRef<"div">,
+	"className" | "data-slot" | "style"
+>;
+
+const headingElements = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6",
+} as const;
+
+export function ErrorState({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ErrorStateProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="error-state"
+			ref={forwardedRef}
+			{...props(errorStateStyles.root)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function ErrorStateHeader({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ErrorStateHeaderProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="error-state-header"
+			ref={forwardedRef}
+			{...props(errorStateStyles.header)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function ErrorStateMedia({
+	"aria-hidden": ariaHidden = true,
+	children,
+	ref: forwardedRef,
+	...rest
+}: ErrorStateMediaProps) {
+	return (
+		<div
+			{...rest}
+			aria-hidden={ariaHidden}
+			data-slot="error-state-media"
+			ref={forwardedRef}
+			{...props(errorStateStyles.media)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function ErrorStateTitle({
+	children,
+	level = 3,
+	ref: forwardedRef,
+	...rest
+}: ErrorStateTitleProps) {
+	const Component = headingElements[level];
+
+	return (
+		<Component
+			{...rest}
+			data-slot="error-state-title"
+			ref={forwardedRef}
+			{...props(errorStateStyles.title)}
+		>
+			{children}
+		</Component>
+	);
+}
+
+export function ErrorStateDescription({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ErrorStateDescriptionProps) {
+	return (
+		<p
+			{...rest}
+			data-slot="error-state-description"
+			ref={forwardedRef}
+			{...props(errorStateStyles.description)}
+		>
+			{children}
+		</p>
+	);
+}
+
+export function ErrorStateContent({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ErrorStateContentProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="error-state-content"
+			ref={forwardedRef}
+			{...props(errorStateStyles.content)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/field/field-context.ts

@@ -0,0 +1,83 @@
+import { createContext, useContext } from "react";
+
+interface BoundFieldMeta {
+	readonly errors: readonly unknown[];
+	readonly isDirty: boolean;
+	readonly isTouched: boolean;
+	readonly isValid: boolean;
+}
+
+interface BoundStringFieldState {
+	readonly meta: BoundFieldMeta;
+	readonly value: string;
+}
+
+interface BoundNumberFieldState {
+	readonly meta: BoundFieldMeta;
+	readonly value: number | null;
+}
+
+export interface BoundStringField {
+	readonly handleBlur: () => void;
+	readonly handleChange: (updater: string | ((prev: string) => string)) => void;
+	readonly name: string;
+	readonly state: BoundStringFieldState;
+}
+
+export interface BoundNumberField {
+	readonly handleBlur: () => void;
+	readonly handleChange: (
+		updater: number | null | ((prev: number | null) => number | null)
+	) => void;
+	readonly name: string;
+	readonly state: BoundNumberFieldState;
+}
+
+export type BoundField = BoundStringField | BoundNumberField;
+
+const BoundFieldContext = createContext<BoundField | null>(null);
+
+export function useBoundFieldContext(): BoundField | null {
+	return useContext(BoundFieldContext);
+}
+
+export const BoundFieldProvider = BoundFieldContext.Provider;
+
+export function isBoundStringField(
+	field: BoundField | null | undefined
+): field is BoundStringField {
+	return typeof field?.state.value === "string";
+}
+
+export function isBoundNumberField(
+	field: BoundField | null | undefined
+): field is BoundNumberField {
+	return (
+		field !== null &&
+		field !== undefined &&
+		(field.state.value === null || typeof field.state.value === "number")
+	);
+}
+
+export function extractFirstErrorMessage(
+	errors: readonly unknown[]
+): string | undefined {
+	for (const error of errors) {
+		if (typeof error === "string") {
+			return error;
+		}
+		if (Array.isArray(error)) {
+			const nested = extractFirstErrorMessage(error);
+			if (nested !== undefined) {
+				return nested;
+			}
+		}
+		if (typeof error === "object" && error !== null && "message" in error) {
+			const { message } = error;
+			if (typeof message === "string") {
+				return message;
+			}
+		}
+	}
+	return undefined;
+}

package/src/components/field/field.styles.ts

@@ -0,0 +1,141 @@
+import { create } from "@stylexjs/stylex";
+import { colors, fieldColors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } from "../../styles/dimensions.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.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,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const fieldStyles = create({
+	// ui role in muted ink.
+	description: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		lineHeight: lineHeight["20"],
+		marginBlock: space["0"],
+		textWrap: "pretty",
+	},
+	error: {
+		color: colors.destructiveText,
+		fontSize: fontSize["14"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		lineHeight: lineHeight["20"],
+		marginBlock: space["0"],
+		textWrap: "pretty",
+	},
+	input: {
+		"::placeholder": { color: colors.mutedContent, opacity: 1 },
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		appearance: "none",
+		backgroundColor: {
+			":disabled": fieldColors.disabled,
+			default: fieldColors.surface,
+		},
+		borderColor: {
+			":is([aria-invalid='true'], [data-invalid]):not(:disabled)": `color-mix(in oklch, ${colors.destructive} 54%, ${fieldColors.surface})`,
+			"[data-hovered='true']:not(:disabled, [readonly], [data-readonly], [aria-invalid='true'], [data-invalid])":
+				{
+					[conditions.canHover]: colors.border,
+				},
+			"[data-slot='combobox-input']:hover:not(:disabled, [readonly], [data-readonly], [aria-invalid='true'], [data-invalid])":
+				{
+					[conditions.canHover]: colors.border,
+				},
+			default: "transparent",
+		},
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: { ":disabled": "none", default: shadows.recessedRest },
+		boxSizing: "border-box",
+		color: { ":disabled": colors.mutedContent, default: colors.content },
+		cursor: { ":disabled": "not-allowed", default: "text" },
+		display: "block",
+		fontFamily: "inherit",
+		// Control role: values stay 16/24 at every width.
+		fontSize: fontSize["16"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		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: {
+			":focus-visible": borderWidth.focus,
+			default: borderWidth.focus,
+		},
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty:
+			"background-color, border-color, box-shadow, color, outline-color, outline-offset",
+		transitionTimingFunction: easing.expoOut,
+		width: "100%",
+	},
+	item: { display: "flex", flexDirection: "column", gap: space["1"] },
+	// Label role: 14/20 medium. Its 4px margin plus the 4px root gap gives 8px
+	// to the control; descriptions and errors sit 4px below it.
+	label: {
+		alignItems: "center",
+		color: colors.content,
+		display: "inline-flex",
+		fontSize: fontSize["14"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontWeight: fontWeight.medium,
+		gap: space["2"],
+		lineHeight: lineHeight["20"],
+		marginBlockEnd: space["1"],
+	},
+	root: { display: "flex", flexDirection: "column", gap: space["1"] },
+	sizeDefault: {
+		borderEndEndRadius: shape.controlRadiusLarge,
+		borderEndStartRadius: shape.controlRadiusLarge,
+		borderStartEndRadius: shape.controlRadiusLarge,
+		borderStartStartRadius: shape.controlRadiusLarge,
+		height: controlSize.md,
+	},
+	sizeLg: {
+		borderEndEndRadius: shape.controlRadiusLarge,
+		borderEndStartRadius: shape.controlRadiusLarge,
+		borderStartEndRadius: shape.controlRadiusLarge,
+		borderStartStartRadius: shape.controlRadiusLarge,
+		fontSize: fontSize["16"],
+		height: controlSize.lg,
+	},
+	sizeSm: {
+		borderEndEndRadius: shape.controlRadius,
+		borderEndStartRadius: shape.controlRadius,
+		borderStartEndRadius: shape.controlRadius,
+		borderStartStartRadius: shape.controlRadius,
+		fontSize: { [conditions.sm]: fontSize["14"], default: fontSize["16"] },
+		height: controlSize.sm,
+	},
+});