@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/field/field.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { Field as BaseField } from "@base-ui/react/field";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { useCallback, useState } from "react";
+import { fieldStyles } from "./field.styles";
+import type { BoundField } from "./field-context";
+import {
+	BoundFieldProvider,
+	extractFirstErrorMessage,
+	useBoundFieldContext,
+} from "./field-context";
+
+type RootProps = ComponentPropsWithRef<typeof BaseField.Root>;
+type LabelProps = ComponentPropsWithRef<typeof BaseField.Label>;
+type ItemProps = ComponentPropsWithRef<typeof BaseField.Item>;
+type DescriptionProps = ComponentPropsWithRef<typeof BaseField.Description>;
+type ErrorProps = ComponentPropsWithRef<typeof BaseField.Error>;
+type ControlProps = ComponentPropsWithRef<typeof BaseField.Control>;
+
+type Closed<T> = Omit<T, "className" | "style">;
+
+type BaseFieldRootProps = Closed<RootProps>;
+
+type CompetingFieldProps =
+	| "dirty"
+	| "invalid"
+	| "name"
+	| "touched"
+	| "validate"
+	| "validationDebounceTime"
+	| "validationMode";
+
+export type BoundFieldProps = Omit<BaseFieldRootProps, CompetingFieldProps> & {
+	field: BoundField;
+	dirty?: never;
+	invalid?: never;
+	name?: never;
+	touched?: never;
+	validate?: never;
+	validationDebounceTime?: never;
+	validationMode?: never;
+};
+
+export type UnboundFieldProps = BaseFieldRootProps & {
+	field?: never;
+};
+
+export type FieldProps = BoundFieldProps | UnboundFieldProps;
+export type FieldLabelProps = Closed<LabelProps>;
+export type FieldItemProps = Closed<ItemProps>;
+export type FieldDescriptionProps = Closed<DescriptionProps>;
+export type FieldErrorProps = Closed<ErrorProps>;
+export type FieldControlProps = Omit<
+	Closed<ControlProps>,
+	"disabled" | "onPointerEnter" | "onPointerLeave" | "size"
+> & {
+	disabled?: boolean;
+	onPointerEnter?: ControlProps["onPointerEnter"];
+	onPointerLeave?: ControlProps["onPointerLeave"];
+	size?: "default" | "lg" | "sm";
+};
+
+export function Field(fieldProps: FieldProps) {
+	if (fieldProps.field !== undefined) {
+		const { field, children, ...rest } = fieldProps;
+		const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+		return (
+			<BoundFieldProvider value={field}>
+				<BaseField.Root
+					{...rest}
+					dirty={field.state.meta.isDirty}
+					invalid={isInvalid}
+					name={field.name}
+					touched={field.state.meta.isTouched}
+					{...props(fieldStyles.root)}
+				>
+					{children}
+				</BaseField.Root>
+			</BoundFieldProvider>
+		);
+	}
+
+	const { children, ...rest } = fieldProps;
+	return (
+		<BaseField.Root {...rest} {...props(fieldStyles.root)}>
+			{children}
+		</BaseField.Root>
+	);
+}
+
+export function FieldLabel({ children, ...rest }: FieldLabelProps) {
+	return (
+		<BaseField.Label {...rest} {...props(fieldStyles.label)}>
+			{children}
+		</BaseField.Label>
+	);
+}
+
+export function FieldItem({ children, ...rest }: FieldItemProps) {
+	return (
+		<BaseField.Item {...rest} {...props(fieldStyles.item)}>
+			{children}
+		</BaseField.Item>
+	);
+}
+
+export function FieldDescription({ children, ...rest }: FieldDescriptionProps) {
+	return (
+		<BaseField.Description {...rest} {...props(fieldStyles.description)}>
+			{children}
+		</BaseField.Description>
+	);
+}
+
+export function FieldError({ children, match, ...rest }: FieldErrorProps) {
+	const boundField = useBoundFieldContext();
+	const isBoundInvalid = boundField
+		? boundField.state.meta.isTouched && !boundField.state.meta.isValid
+		: undefined;
+
+	if (children !== undefined) {
+		return (
+			<BaseField.Error
+				{...rest}
+				match={match ?? isBoundInvalid}
+				{...props(fieldStyles.error)}
+			>
+				{children}
+			</BaseField.Error>
+		);
+	}
+
+	if (boundField !== null) {
+		const message = extractFirstErrorMessage(boundField.state.meta.errors);
+		return (
+			<BaseField.Error
+				{...rest}
+				match={match ?? isBoundInvalid}
+				{...props(fieldStyles.error)}
+			>
+				{message}
+			</BaseField.Error>
+		);
+	}
+
+	return (
+		<BaseField.Error {...rest} match={match} {...props(fieldStyles.error)}>
+			{children}
+		</BaseField.Error>
+	);
+}
+
+const controlSizeStyles = {
+	default: fieldStyles.sizeDefault,
+	lg: fieldStyles.sizeLg,
+	sm: fieldStyles.sizeSm,
+};
+
+export function FieldControl({
+	disabled = false,
+	readOnly = false,
+	ref: forwardedRef = undefined,
+	size = "default",
+	// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+	onPointerEnter = undefined,
+	// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+	onPointerLeave = undefined,
+	...rest
+}: FieldControlProps) {
+	const [isHovered, setIsHovered] = useState(false);
+	const handlePointerEnter = useCallback<
+		NonNullable<FieldControlProps["onPointerEnter"]>
+	>(
+		(event) => {
+			if (!(disabled || readOnly)) {
+				setIsHovered(true);
+			}
+			onPointerEnter?.(event);
+		},
+		[disabled, onPointerEnter, readOnly]
+	);
+	const handlePointerLeave = useCallback<
+		NonNullable<FieldControlProps["onPointerLeave"]>
+	>(
+		(event) => {
+			setIsHovered(false);
+			onPointerLeave?.(event);
+		},
+		[onPointerLeave]
+	);
+
+	return (
+		<BaseField.Control
+			{...rest}
+			data-hovered={isHovered ? "true" : undefined}
+			disabled={disabled}
+			onPointerEnter={handlePointerEnter}
+			onPointerLeave={handlePointerLeave}
+			readOnly={readOnly}
+			ref={forwardedRef}
+			{...props(fieldStyles.input, controlSizeStyles[size])}
+		/>
+	);
+}
+
+export type { FieldValidityProps } from "@base-ui/react/field";
+
+export function FieldValidity({ children }: BaseField.Validity.Props) {
+	return <BaseField.Validity>{children}</BaseField.Validity>;
+}

package/src/components/fieldset/fieldset.styles.ts

@@ -0,0 +1,28 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import {
+	fontSize,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const fieldsetStyles = create({
+	// Subheading role.
+	legend: {
+		color: colors.content,
+		fontSize: fontSize["16"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.subheading,
+		lineHeight: lineHeight["24"],
+	},
+	root: {
+		borderStyle: "none",
+		borderWidth: 0,
+		margin: 0,
+		minWidth: 0,
+		padding: 0,
+	},
+});

package/src/components/fieldset/fieldset.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { protectRenderSlot } from "../../render-utils";
+import { fieldsetStyles } from "./fieldset.styles";
+
+type BaseFieldsetRootProps = ComponentPropsWithRef<typeof BaseFieldset.Root>;
+type BaseFieldsetLegendProps = ComponentPropsWithRef<
+	typeof BaseFieldset.Legend
+>;
+
+export type FieldsetProps = Omit<
+	BaseFieldsetRootProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseFieldsetRootProps["ref"];
+};
+
+export type FieldsetLegendProps = Omit<
+	BaseFieldsetLegendProps,
+	"className" | "data-slot" | "style"
+> & {
+	ref?: BaseFieldsetLegendProps["ref"];
+};
+
+export function Fieldset({
+	ref: forwardedRef,
+	render,
+	...rest
+}: FieldsetProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseFieldset.Root
+			{...rest}
+			data-slot="fieldset"
+			ref={forwardedRef}
+			render={protectRenderSlot("fieldset", render)}
+			{...props(fieldsetStyles.root)}
+		/>
+	);
+}
+
+export function FieldsetLegend({
+	ref: forwardedRef,
+	render,
+	...rest
+}: FieldsetLegendProps) {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseFieldset.Legend
+			{...rest}
+			data-slot="fieldset-legend"
+			ref={forwardedRef}
+			render={protectRenderSlot("fieldset-legend", render)}
+			{...props(fieldsetStyles.legend)}
+		/>
+	);
+}
+
+export const FieldsetPrimitive = BaseFieldset;

package/src/components/file-upload/file-upload-context.tsx

@@ -0,0 +1,191 @@
+import type { ChangeEvent, FocusEvent, RefCallback, RefObject } from "react";
+import { createContext, use } from "react";
+
+export function syncInputFiles(
+	input: HTMLInputElement | null,
+	files: readonly File[]
+): void {
+	if (!input) {
+		return;
+	}
+	if (files.length === 0) {
+		input.value = "";
+		if (typeof DataTransfer !== "undefined") {
+			input.files = new DataTransfer().files;
+		}
+		return;
+	}
+	if (typeof DataTransfer === "undefined") {
+		return;
+	}
+	const dataTransfer = new DataTransfer();
+	for (const file of files) {
+		dataTransfer.items.add(file);
+	}
+	if (Object.hasOwn(input, "files")) {
+		Reflect.deleteProperty(input, "files");
+	}
+	input.files = dataTransfer.files;
+}
+
+export function stripForbidden<T extends object>(
+	target: T,
+	extraKeys: readonly string[] = []
+): T {
+	const clone = { ...target };
+	Reflect.deleteProperty(clone, "className");
+	Reflect.deleteProperty(clone, "data-slot");
+	Reflect.deleteProperty(clone, "style");
+	for (const key of extraKeys) {
+		Reflect.deleteProperty(clone, key);
+	}
+	return clone;
+}
+
+export function restoreFocusAfterRemoval(
+	root: HTMLElement | null,
+	removeIndex: number,
+	fallbackTrigger: HTMLElement | null
+): void {
+	if (!root) {
+		return;
+	}
+	const buttons = root.querySelectorAll<HTMLButtonElement>(
+		'[data-slot="file-upload-item-remove"]'
+	);
+	if (buttons[removeIndex]) {
+		buttons[removeIndex]?.focus();
+	} else if (removeIndex > 0 && buttons[removeIndex - 1]) {
+		buttons[removeIndex - 1]?.focus();
+	} else {
+		fallbackTrigger?.focus();
+	}
+}
+
+export function attachFormResetListener(
+	node: HTMLInputElement,
+	onReset: () => void
+): (() => void) | undefined {
+	let currentForm = node.form;
+	let isActive = true;
+
+	const handleReset = (event: Event) => {
+		const target = event.currentTarget;
+		queueMicrotask(() => {
+			if (!isActive || event.defaultPrevented || node.form !== target) {
+				return;
+			}
+			onReset();
+		});
+	};
+
+	currentForm?.addEventListener("reset", handleReset);
+
+	const syncOwner = () => {
+		const nextForm = node.form;
+		if (nextForm === currentForm) {
+			return;
+		}
+		currentForm?.removeEventListener("reset", handleReset);
+		currentForm = nextForm;
+		currentForm?.addEventListener("reset", handleReset);
+	};
+
+	const observer =
+		typeof MutationObserver === "undefined"
+			? null
+			: new MutationObserver(syncOwner);
+	observer?.observe(node, { attributeFilter: ["form"], attributes: true });
+
+	if (!(currentForm || observer)) {
+		return;
+	}
+
+	return () => {
+		isActive = false;
+		observer?.disconnect();
+		currentForm?.removeEventListener("reset", handleReset);
+	};
+}
+
+export function computeNextFiles(
+	committed: readonly File[],
+	accepted: readonly File[],
+	maxFiles: number
+): File[] {
+	if (maxFiles === 1) {
+		const last = accepted.at(-1);
+		return last ? [last] : [...committed];
+	}
+	return [...committed, ...accepted];
+}
+
+export interface ChangeDetailsControls {
+	cancel: () => void;
+	readonly isCanceled: boolean;
+}
+
+export function createChangeDetails<T extends object>(
+	data: T
+): T & ChangeDetailsControls {
+	let canceled = false;
+	return {
+		...data,
+		cancel: () => {
+			canceled = true;
+		},
+		get isCanceled(): boolean {
+			return canceled;
+		},
+	};
+}
+
+export interface FileUploadContextValue {
+	accept?: string;
+	disabled: boolean;
+	files: readonly File[];
+	handleDropFiles: (files: readonly File[]) => void;
+	handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputRef: RefObject<HTMLInputElement | null>;
+	maxFiles: number;
+	name?: string;
+	onBlur?: (event: FocusEvent<HTMLElement>) => void;
+	openPicker: () => void;
+	removeFile: (index: number, expectedFile?: File) => void;
+	rootRef: RefObject<HTMLDivElement | null>;
+	setInputCallbackRef: RefCallback<HTMLInputElement>;
+	triggerRef: RefObject<HTMLButtonElement | null>;
+}
+
+export const FileUploadContext = createContext<FileUploadContextValue | null>(
+	null
+);
+
+export function useFileUploadContext(): FileUploadContextValue {
+	const context = use(FileUploadContext);
+	if (!context) {
+		throw new Error(
+			"FileUpload compound components must be rendered inside a <FileUpload> provider."
+		);
+	}
+	return context;
+}
+
+export interface FileUploadItemContextValue {
+	file: File;
+	index: number;
+	layout?: "row" | "tile" | "upload";
+}
+
+export const FileUploadItemContext =
+	createContext<FileUploadItemContextValue | null>(null);
+
+export function useFileUploadItemContext(): FileUploadItemContextValue {
+	const context = use(FileUploadItemContext);
+	if (!context) {
+		throw new Error(
+			"FileUploadItem compound components must be rendered inside a <FileUploadItem> provider."
+		);
+	}
+	return context;
+}