@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/number-field/number-field.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement } from "react";
+import { useCallback, useId } from "react";
+import { omitProps, protectRenderSlot } from "../../render-utils";
+import {
+	isBoundNumberField,
+	useBoundFieldContext,
+} from "../field/field-context";
+import { numberFieldStyles } from "./number-field.styles";
+import type {
+	NumberFieldDecrementProps,
+	NumberFieldGroupProps,
+	NumberFieldIncrementProps,
+	NumberFieldInputProps,
+	NumberFieldProps,
+	NumberFieldScrubAreaProps,
+} from "./number-field.types";
+import {
+	CursorHorizontalIcon,
+	CursorVerticalIcon,
+	MinusIcon,
+	NumberFieldContext,
+	PlusIcon,
+	useNumberFieldContext,
+} from "./number-field-context";
+
+const sizeStyles = {
+	default: numberFieldStyles.sizeDefault,
+	lg: numberFieldStyles.sizeLg,
+	sm: numberFieldStyles.sizeSm,
+};
+
+const inputSizeStyles = {
+	default: numberFieldStyles.inputDefault,
+	lg: numberFieldStyles.inputLg,
+	sm: numberFieldStyles.inputSm,
+};
+
+export function NumberField({
+	children,
+	id: idProp,
+	onValueChange: userOnValueChange,
+	ref: forwardedRef,
+	render,
+	size = "default",
+	...rest
+}: NumberFieldProps): ReactElement {
+	const boundContext = useBoundFieldContext();
+	const boundField = isBoundNumberField(boundContext) ? boundContext : null;
+	const generatedId = useId();
+	const inputId = idProp ?? `${generatedId}-input`;
+	const scrubLabelId = `${generatedId}-label`;
+
+	const handleBoundValueChange = useCallback<
+		NonNullable<BaseNumberField.Root.Props["onValueChange"]>
+	>(
+		(val, details) => {
+			userOnValueChange?.(val, details);
+			if (!details.isCanceled) {
+				boundField?.handleChange(val);
+			}
+		},
+		[boundField, userOnValueChange]
+	);
+
+	const nativeProps = omitProps(rest, ["className", "data-slot", "style"]);
+
+	return (
+		<NumberFieldContext.Provider
+			value={{ boundField, inputId, scrubLabelId, size }}
+		>
+			<BaseNumberField.Root
+				{...nativeProps}
+				{...(boundField
+					? {
+							name: boundField.name,
+							onValueChange: handleBoundValueChange,
+							value: boundField.state.value,
+						}
+					: { onValueChange: userOnValueChange })}
+				data-slot="number-field"
+				id={inputId}
+				ref={forwardedRef}
+				render={protectRenderSlot("number-field", render)}
+				{...props(numberFieldStyles.root)}
+			>
+				{children}
+			</BaseNumberField.Root>
+		</NumberFieldContext.Provider>
+	);
+}
+
+export function NumberFieldGroup({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: NumberFieldGroupProps): ReactElement {
+	const { size } = useNumberFieldContext();
+
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseNumberField.Group
+			{...rest}
+			data-slot="number-field-group"
+			ref={forwardedRef}
+			render={protectRenderSlot("number-field-group", render)}
+			{...props(numberFieldStyles.group, sizeStyles[size])}
+		>
+			{children}
+		</BaseNumberField.Group>
+	);
+}
+
+export function NumberFieldInput({
+	onBlur: userOnBlur,
+	ref: forwardedRef,
+	render,
+	...rest
+}: NumberFieldInputProps): ReactElement {
+	const { boundField, size } = useNumberFieldContext();
+
+	const handleBlur = useCallback<NonNullable<NumberFieldInputProps["onBlur"]>>(
+		(event) => {
+			boundField?.handleBlur();
+			userOnBlur?.(event);
+		},
+		[boundField, userOnBlur]
+	);
+
+	const nativeProps = omitProps(rest, ["className", "data-slot", "style"]);
+
+	return (
+		<BaseNumberField.Input
+			{...nativeProps}
+			data-size={size}
+			data-slot="number-field-input"
+			onBlur={handleBlur}
+			ref={forwardedRef}
+			render={protectRenderSlot("number-field-input", render)}
+			{...props(numberFieldStyles.input, inputSizeStyles[size])}
+		/>
+	);
+}
+
+export function NumberFieldIncrement({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: NumberFieldIncrementProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+	Reflect.deleteProperty(rest, "tabIndex");
+
+	return (
+		<BaseNumberField.Increment
+			{...rest}
+			data-slot="number-field-increment"
+			ref={forwardedRef}
+			render={protectRenderSlot("number-field-increment", render, {
+				tabIndex: -1,
+			})}
+			tabIndex={-1}
+			{...props(numberFieldStyles.stepper)}
+		>
+			{children ?? <PlusIcon />}
+		</BaseNumberField.Increment>
+	);
+}
+
+export function NumberFieldDecrement({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: NumberFieldDecrementProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+	Reflect.deleteProperty(rest, "tabIndex");
+
+	return (
+		<BaseNumberField.Decrement
+			{...rest}
+			data-slot="number-field-decrement"
+			ref={forwardedRef}
+			render={protectRenderSlot("number-field-decrement", render, {
+				tabIndex: -1,
+			})}
+			tabIndex={-1}
+			{...props(numberFieldStyles.stepper)}
+		>
+			{children ?? <MinusIcon />}
+		</BaseNumberField.Decrement>
+	);
+}
+
+export function NumberFieldScrubArea({
+	children,
+	label,
+	direction = "horizontal",
+	ref: forwardedRef,
+	render,
+	...rest
+}: NumberFieldScrubAreaProps): ReactElement {
+	const { inputId, scrubLabelId } = useNumberFieldContext();
+
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-direction");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseNumberField.ScrubArea
+			{...rest}
+			data-direction={direction}
+			data-slot="number-field-scrub-area"
+			direction={direction}
+			ref={forwardedRef}
+			render={protectRenderSlot("number-field-scrub-area", render, {
+				"data-direction": direction,
+			})}
+			{...props(
+				numberFieldStyles.scrubArea,
+				direction === "vertical" ? numberFieldStyles.scrubAreaVertical : null
+			)}
+		>
+			<label
+				data-slot="number-field-scrub-area-label"
+				htmlFor={inputId}
+				id={scrubLabelId}
+				{...props(numberFieldStyles.scrubLabel)}
+			>
+				{label ?? children}
+			</label>
+			<BaseNumberField.ScrubAreaCursor
+				data-slot="number-field-scrub-area-cursor"
+				{...props(numberFieldStyles.scrubAreaCursor)}
+			>
+				{direction === "vertical" ? (
+					<CursorVerticalIcon />
+				) : (
+					<CursorHorizontalIcon />
+				)}
+			</BaseNumberField.ScrubAreaCursor>
+		</BaseNumberField.ScrubArea>
+	);
+}
+
+export const NumberFieldPrimitive = BaseNumberField;
+
+export type {
+	NumberFieldDecrementProps,
+	NumberFieldGroupProps,
+	NumberFieldIncrementProps,
+	NumberFieldInputProps,
+	NumberFieldProps,
+	NumberFieldScrubAreaProps,
+	NumberFieldSize,
+} from "./number-field.types";

package/src/components/number-field/number-field.types.ts

@@ -0,0 +1,46 @@
+import type { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+type Closed<T> = Omit<T, "className" | "data-slot" | "style">;
+
+export type NumberFieldSize = "default" | "sm" | "lg";
+
+export type NumberFieldProps = Closed<NumberFieldPrimitive.Root.Props> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+	size?: NumberFieldSize;
+};
+
+export type NumberFieldGroupProps = Closed<NumberFieldPrimitive.Group.Props> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+export type NumberFieldInputProps = Closed<NumberFieldPrimitive.Input.Props> & {
+	ref?: ComponentPropsWithRef<"input">["ref"];
+};
+
+export type NumberFieldIncrementProps = Omit<
+	Closed<NumberFieldPrimitive.Increment.Props>,
+	"tabIndex"
+> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"button">["ref"];
+};
+
+export type NumberFieldDecrementProps = Omit<
+	Closed<NumberFieldPrimitive.Decrement.Props>,
+	"tabIndex"
+> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"button">["ref"];
+};
+
+export type NumberFieldScrubAreaProps = Omit<
+	Closed<NumberFieldPrimitive.ScrubArea.Props>,
+	"data-direction"
+> & {
+	children?: ReactNode;
+	label?: string;
+	ref?: ComponentPropsWithRef<"span">["ref"];
+};

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

@@ -0,0 +1,138 @@
+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 {
+	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 otpFieldStyles = create({
+	input: {
+		"::placeholder": { color: colors.mutedContent, opacity: 1 },
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		appearance: "none",
+		aspectRatio: 1,
+		backgroundColor: {
+			":hover": {
+				[conditions.canHover]: fieldColors.surface,
+			},
+			":is(:disabled, [data-disabled])": fieldColors.disabled,
+			":is(:read-only, [data-readonly]):not(:disabled):not([data-disabled])":
+				fieldColors.surface,
+			"[data-disabled]:hover": fieldColors.disabled,
+			"[data-readonly]:hover": fieldColors.surface,
+			default: fieldColors.surface,
+		},
+		borderColor: {
+			":is([aria-invalid='true'], [data-invalid]):not(:disabled):not([data-disabled])": `color-mix(in oklch, ${colors.destructive} 54%, ${fieldColors.surface})`,
+			"[data-slot='otp-field-input']:hover:not(:disabled, [data-disabled], [readonly], [data-readonly], [aria-invalid='true'], [data-invalid])":
+				{
+					[conditions.canHover]: colors.border,
+				},
+			default: "transparent",
+		},
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: {
+			":is(:disabled, [data-disabled])": "none",
+			default: shadows.recessedRest,
+		},
+		boxSizing: "border-box",
+		color: {
+			":is(:disabled, [data-disabled])": colors.mutedContent,
+			default: colors.content,
+		},
+		cursor: {
+			":is(:disabled, [data-disabled])": "not-allowed",
+			default: "text",
+		},
+		display: "block",
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		minWidth: controlSize["2xs"],
+		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["0"],
+		paddingInline: space["0"],
+		textAlign: "center",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty:
+			"background-color, border-color, box-shadow, color, outline-color, outline-offset",
+		transitionTimingFunction: easing.expoOut,
+	},
+	inputDefault: {
+		borderRadius: shape.controlRadiusLarge,
+		fontSize: fontSize["16"],
+		height: "auto",
+		width: controlSize.md,
+	},
+	inputLg: {
+		borderRadius: shape.controlRadiusLarge,
+		fontSize: fontSize["16"],
+		height: "auto",
+		width: controlSize.lg,
+	},
+	inputSm: {
+		borderRadius: shape.controlRadius,
+		fontSize: { [conditions.sm]: fontSize["14"], default: fontSize["16"] },
+		height: "auto",
+		width: controlSize.sm,
+	},
+	root: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "inline-flex",
+		gap: space["2"],
+		maxWidth: "100%",
+		minWidth: 0,
+		overflowX: "auto",
+		padding: `calc(${borderWidth.focus}px + ${focus.offset})`,
+		scrollPaddingInline: space["1"],
+	},
+	separator: {
+		alignItems: "center",
+		color: colors.secondaryContent,
+		display: "inline-flex",
+		fontSize: fontSize["16"],
+		justifyContent: "center",
+		lineHeight: lineHeight.none,
+		userSelect: "none",
+	},
+});

package/src/components/otp-field/otp-field.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import { createContext, useCallback, useContext } from "react";
+import { omitProps, protectRenderSlot } from "../../render-utils";
+import {
+	isBoundStringField,
+	useBoundFieldContext,
+} from "../field/field-context";
+import { otpFieldStyles } from "./otp-field.styles";
+
+export type Closed<T> = Omit<T, "className" | "data-slot" | "style">;
+
+export type OTPFieldSize = "default" | "sm" | "lg";
+
+export type OTPFieldProps = Closed<BaseOTPField.Root.Props> & {
+	children?: ReactNode;
+	length: number;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+	size?: OTPFieldSize;
+};
+
+export type OTPFieldInputProps = Closed<BaseOTPField.Input.Props> & {
+	ref?: ComponentPropsWithRef<"input">["ref"];
+};
+
+export type OTPFieldSeparatorProps = Closed<BaseOTPField.Separator.Props> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+interface OTPFieldContextValue {
+	readonly size: OTPFieldSize;
+}
+
+const OTPFieldContext = createContext<OTPFieldContextValue>({
+	size: "default",
+});
+
+function renderDefaultSlots(length: number): readonly ReactElement[] {
+	const slots: ReactElement[] = [];
+	for (let index = 0; index < length; index += 1) {
+		slots.push(<OTPFieldInput key={`otp-field-input-${index}`} />);
+	}
+	return slots;
+}
+
+export function OTPField({
+	children,
+	length,
+	onBlur: userOnBlur,
+	onValueChange: userOnValueChange,
+	ref: forwardedRef,
+	render,
+	size = "default",
+	...rest
+}: OTPFieldProps): ReactElement {
+	const boundContext = useBoundFieldContext();
+	const boundField = isBoundStringField(boundContext) ? boundContext : null;
+
+	const handleBoundBlur = useCallback<
+		NonNullable<BaseOTPField.Root.Props["onBlur"]>
+	>(
+		(event) => {
+			userOnBlur?.(event);
+			if (
+				!(
+					event.relatedTarget instanceof Node &&
+					event.currentTarget.contains(event.relatedTarget)
+				)
+			) {
+				boundField?.handleBlur();
+			}
+		},
+		[boundField, userOnBlur]
+	);
+
+	const handleBoundValueChange = useCallback<
+		NonNullable<BaseOTPField.Root.Props["onValueChange"]>
+	>(
+		(val, details) => {
+			userOnValueChange?.(val, details);
+			if (!details.isCanceled) {
+				boundField?.handleChange(val);
+			}
+		},
+		[boundField, userOnValueChange]
+	);
+
+	const nativeProps = omitProps(rest, ["className", "data-slot", "style"]);
+	const content =
+		children === undefined ? renderDefaultSlots(length) : children;
+
+	return (
+		<OTPFieldContext.Provider value={{ size }}>
+			<BaseOTPField.Root
+				{...nativeProps}
+				{...(boundField
+					? {
+							name: boundField.name,
+							onBlur: handleBoundBlur,
+							onValueChange: handleBoundValueChange,
+							value: boundField.state.value,
+						}
+					: { onBlur: userOnBlur, onValueChange: userOnValueChange })}
+				data-size={size}
+				data-slot="otp-field"
+				length={length}
+				ref={forwardedRef}
+				render={protectRenderSlot("otp-field", render, { "data-size": size })}
+				{...props(otpFieldStyles.root)}
+			>
+				{content}
+			</BaseOTPField.Root>
+		</OTPFieldContext.Provider>
+	);
+}
+
+const inputSizeStyles = {
+	default: otpFieldStyles.inputDefault,
+	lg: otpFieldStyles.inputLg,
+	sm: otpFieldStyles.inputSm,
+};
+
+export function OTPFieldInput({
+	ref: forwardedRef,
+	render,
+	...rest
+}: OTPFieldInputProps): ReactElement {
+	const { size } = useContext(OTPFieldContext);
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseOTPField.Input
+			{...rest}
+			data-size={size}
+			data-slot="otp-field-input"
+			ref={forwardedRef}
+			render={protectRenderSlot("otp-field-input", render, {
+				"data-size": size,
+			})}
+			{...props(otpFieldStyles.input, inputSizeStyles[size])}
+		/>
+	);
+}
+
+export function OTPFieldSeparator({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: OTPFieldSeparatorProps): ReactElement {
+	Reflect.deleteProperty(rest, "className");
+	Reflect.deleteProperty(rest, "data-slot");
+	Reflect.deleteProperty(rest, "style");
+
+	return (
+		<BaseOTPField.Separator
+			{...rest}
+			data-slot="otp-field-separator"
+			ref={forwardedRef}
+			render={protectRenderSlot("otp-field-separator", render)}
+			{...props(otpFieldStyles.separator)}
+		>
+			{children}
+		</BaseOTPField.Separator>
+	);
+}
+
+export const OTPFieldPrimitive = BaseOTPField;

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

@@ -0,0 +1,25 @@
+import { create } from "@stylexjs/stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const overflowListStyles = create({
+	items: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		listStyleType: "none",
+		margin: 0,
+		minWidth: 0,
+		paddingInlineStart: 0,
+	},
+	menu: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		listStyleType: "none",
+		margin: 0,
+		minWidth: 0,
+		paddingInlineStart: 0,
+	},
+	triggerItem: { fontVariantNumeric: "tabular-nums" },
+});