@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/slider/slider.styles.ts

@@ -0,0 +1,368 @@
+import { create } from "@stylexjs/stylex";
+import { colors } 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,
+	opacity,
+} 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";
+
+type SliderSize = "default" | "sm" | "lg";
+
+const thumbExtent: Record<SliderSize, string> = {
+	default: controlSize.xs,
+	lg: controlSize.sm,
+	sm: controlSize["2xs"],
+};
+
+function indicatorLeadingEdge(extent: string, range: boolean) {
+	return range
+		? `calc(-1 * (${extent} + ${space["1"]}))`
+		: `calc(-1 * ${space["1"]})`;
+}
+
+function tickInlineInset(value: boolean, characters: number, size: SliderSize) {
+	return value
+		? `max(1.75rem, calc((${characters}ch + ${space["3"]}) / 2))`
+		: `calc(${thumbExtent[size]} / 2)`;
+}
+
+export const sliderStyles = create({
+	control: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		cursor: {
+			":is([data-disabled])": "not-allowed",
+			default: "pointer",
+		},
+		display: "flex",
+		position: "relative",
+		touchAction: "none",
+		userSelect: "none",
+	},
+	controlDefaultHorizontal: {
+		paddingBlock: space["1"],
+	},
+	controlDefaultVertical: {
+		paddingInline: space["1"],
+	},
+	controlHorizontal: {
+		flexDirection: "row",
+		marginInline: space["1"],
+		width: `calc(100% - ${space["1"]})`,
+	},
+	controlLgHorizontal: {
+		paddingBlock: space["2"],
+	},
+	controlLgVertical: {
+		paddingInline: space["2"],
+	},
+	controlSmHorizontal: {
+		paddingBlock: space["1"],
+	},
+	controlSmVertical: {
+		paddingInline: space["1"],
+	},
+	controlVertical: {
+		flexDirection: "column",
+		height: `calc(100% - ${space["1"]})`,
+		justifyContent: "center",
+		marginBlock: space["1"],
+		width: "auto",
+	},
+	indicator: {
+		"::before": {
+			backgroundColor: {
+				":is([data-disabled])": colors.controlBorderStrong,
+				":is([data-invalid]):not([data-disabled])": colors.destructive,
+				// A solid accent fill, like a checked Switch or Checkbox.
+				default: colors.accent,
+			},
+			borderRadius: "inherit",
+			content: '""',
+			// Hidden at the minimum so the thumb sits in the plain track.
+			opacity: { ":is([data-empty])": 0, default: 1 },
+			pointerEvents: "none",
+			position: "absolute",
+		},
+		borderRadius: "inherit",
+		boxSizing: "border-box",
+		display: "block",
+		fontSize: fontSize["12"],
+		position: "absolute",
+	},
+	indicatorExtent: (
+		orientation: "horizontal" | "vertical",
+		extent: string,
+		range: boolean
+	) => ({
+		"::before": {
+			insetBlockEnd:
+				orientation === "vertical" ? indicatorLeadingEdge(extent, range) : 0,
+			insetBlockStart:
+				orientation === "vertical"
+					? `calc(-1 * (${extent} + ${space["1"]}))`
+					: 0,
+			insetInlineEnd:
+				orientation === "horizontal"
+					? `calc(-1 * (${extent} + ${space["1"]}))`
+					: 0,
+			insetInlineStart:
+				orientation === "horizontal" ? indicatorLeadingEdge(extent, range) : 0,
+		},
+	}),
+	label: {
+		color: colors.content,
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+	},
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		opacity: {
+			":is([data-disabled])": opacity.disabled,
+			default: 1,
+		},
+		position: "relative",
+		userSelect: "none",
+		width: "100%",
+	},
+	rootDisabled: {
+		opacity: opacity.disabled,
+	},
+	rootVertical: {
+		alignItems: "center",
+		height: "100%",
+		width: "auto",
+	},
+	thumb: {
+		"::before": {
+			content: "''",
+			height: "100%",
+			left: "50%",
+			minHeight: controlSize["2xs"],
+			minWidth: controlSize["2xs"],
+			position: "absolute",
+			top: "50%",
+			transform: "translate(-50%, -50%)",
+			width: "100%",
+		},
+		alignItems: "center",
+		animationDuration: {
+			":is(:focus-visible, :has(:focus-visible))": focusMotion.duration,
+		},
+		animationName: {
+			":is(:focus-visible, :has(:focus-visible))": focusMotion.ring,
+		},
+		backgroundColor: {
+			":is([data-disabled])": colors.controlBorderStrong,
+			[conditions.forcedColors]: "ButtonFace",
+			default: colors.controlThumb,
+		},
+		borderColor: {
+			":is([data-disabled])": colors.border,
+			":is([data-invalid]):not([data-disabled])": colors.destructive,
+			default: colors.border,
+		},
+		borderRadius: shape.controlRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: {
+			":active:not([data-disabled])": shadows.pressed,
+			":is([data-disabled])": "none",
+			// Base UI shares dragging across the range; focus identifies its active thumb.
+			"[data-dragging]:has(input:focus):not([data-disabled])": shadows.pressed,
+			"[data-slot='slider-thumb']:hover:not([data-disabled], :active):not([data-dragging]:has(input:focus))":
+				{
+					[conditions.canHover]: shadows.filledHover,
+				},
+			default: shadows.filledRest,
+		},
+		boxSizing: "border-box",
+		color: {
+			[conditions.forcedColors]: "ButtonText",
+			default: colors.controlThumbContent,
+		},
+		cursor: {
+			":is([data-disabled])": "not-allowed",
+			"[data-dragging]:has(input:focus):not([data-disabled])": "grabbing",
+			default: "grab",
+		},
+		display: "flex",
+		fontSize: fontSize["12"],
+		justifyContent: "center",
+		outlineColor: {
+			":is(:focus-visible, :has(:focus-visible))": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: "solid",
+		outlineWidth: {
+			":is(:focus-visible, :has(:focus-visible))": borderWidth.focus,
+			default: 0,
+		},
+		position: "absolute",
+		// Sinks a little while pressed or dragged; scale composes with the
+		// positioning transform Base UI sets inline.
+		scale: {
+			":active:not([data-disabled])": 0.9,
+			"[data-dragging]:has(input:focus):not([data-disabled])": 0.9,
+			[conditions.reducedMotion]: 1,
+			default: 1,
+		},
+		touchAction: "none",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty:
+			"background-color, border-color, box-shadow, outline-color, outline-width, outline-offset, scale",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+		zIndex: 2,
+	},
+
+	thumbDefault: { height: controlSize.xs, width: controlSize.xs },
+	thumbDisabled: { boxShadow: "none", cursor: "not-allowed" },
+	thumbLg: { height: controlSize.sm, width: controlSize.sm },
+	thumbSm: {
+		borderRadius: `calc(${shape.controlRadius} - ${space["1"]})`,
+		height: controlSize["2xs"],
+		width: controlSize["2xs"],
+	},
+	thumbValue: {
+		fontFamily: "inherit",
+		fontSize: fontSize["12"],
+		fontVariantNumeric: "tabular-nums",
+		lineHeight: lineHeight.none,
+		pointerEvents: "none",
+		whiteSpace: "nowrap",
+	},
+	thumbWithValue: (characters: number) => ({
+		width: `max(3.5rem, calc(${characters}ch + ${space["3"]}))`,
+	}),
+	tick: {
+		// On the accent fill a dot takes the light accent text color instead.
+		backgroundColor: {
+			"[data-filled]": colors.accentContent,
+			// Muted text is darker in light mode and lighter in dark mode.
+			default: colors.mutedContent,
+		},
+		borderRadius: "50%",
+		height: space["1"],
+		opacity: 0.5,
+		position: "absolute",
+		transform: "translate(-50%, -50%)",
+		width: space["1"],
+	},
+	tickInset: (
+		alignment: "edge" | "center" | "edge-client-only",
+		value: boolean,
+		characters: number,
+		size: SliderSize
+	) => ({
+		insetBlock: {
+			"[data-orientation='vertical'] > [data-slot='slider-ticks']": `calc(${thumbExtent[size]} / 2)`,
+			default: 0,
+		},
+		insetInline: {
+			"[data-orientation='vertical'] > [data-slot='slider-ticks']": 0,
+			default:
+				alignment === "center" ? 0 : tickInlineInset(value, characters, size),
+		},
+	}),
+	tickPosition: (orientation: "horizontal" | "vertical", position: number) => ({
+		left: {
+			":dir(rtl)": orientation === "horizontal" ? `${100 - position}%` : "50%",
+			default: orientation === "horizontal" ? `${position}%` : "50%",
+		},
+		top: orientation === "vertical" ? `${100 - position}%` : "50%",
+	}),
+	ticks: {
+		fontSize: fontSize["12"],
+		pointerEvents: "none",
+		position: "absolute",
+		zIndex: 1,
+	},
+	ticksHorizontal: { insetBlock: 0 },
+	ticksVertical: { insetInline: 0 },
+	track: {
+		"::before": {
+			backgroundColor: {
+				":is([data-disabled])": colors.controlSurfaceDisabled,
+				default: colors.secondary,
+			},
+			borderColor: {
+				":is([data-disabled])": "transparent",
+				":is([data-invalid]):not([data-disabled])": `color-mix(in oklch, ${colors.destructive} 62%, ${colors.controlSurface})`,
+				default: "transparent",
+			},
+			borderRadius: shape.controlRadiusLarge,
+			borderStyle: "solid",
+			borderWidth: borderWidth.thin,
+			boxShadow: shadows.recessedRest,
+			content: '""',
+			insetBlock: 0,
+			insetInline: `calc(-1 * ${space["1"]})`,
+			position: "absolute",
+		},
+		borderRadius: shape.controlRadiusLarge,
+		boxSizing: "border-box",
+		display: "block",
+		position: "relative",
+	},
+	trackDefaultHorizontal: {
+		height: controlSize.md,
+	},
+	trackDefaultVertical: {
+		width: controlSize.md,
+	},
+	trackHorizontal: {
+		width: "100%",
+	},
+	trackLgHorizontal: {
+		height: controlSize.lg,
+	},
+	trackLgVertical: {
+		width: controlSize.lg,
+	},
+	trackSmHorizontal: {
+		"::before": { borderRadius: shape.controlRadius },
+		borderRadius: shape.controlRadius,
+		height: controlSize.sm,
+	},
+	trackSmVertical: {
+		"::before": { borderRadius: shape.controlRadius },
+		borderRadius: shape.controlRadius,
+		width: controlSize.sm,
+	},
+	trackVertical: {
+		"::before": { insetBlock: `calc(-1 * ${space["1"]})`, insetInline: 0 },
+		height: "100%",
+		minHeight: "10rem",
+	},
+	// The `ui` role, so values line up with 14/20 field labels.
+	value: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontSizeAdjust: fonts.sizeAdjust,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+	},
+});

package/src/components/slider/slider.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import type { SliderRoot as BaseSliderRoot } from "@base-ui/react/slider";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { props } from "@stylexjs/stylex";
+import type { ReactElement, ReactNode } from "react";
+import { Children, Fragment, isValidElement, useCallback } from "react";
+import { protectRenderSlot } from "../../render-utils";
+import type { BoundField, BoundNumberField } from "../field/field-context";
+import {
+	isBoundNumberField,
+	useBoundFieldContext,
+} from "../field/field-context";
+import { sliderStyles } from "./slider.styles";
+import type {
+	SliderLabelProps,
+	SliderProps,
+	SliderValueProps,
+} from "./slider.types";
+import {
+	SliderControl as ContextSliderControl,
+	SliderIndicator as ContextSliderIndicator,
+	SliderThumb as ContextSliderThumb,
+	SliderTrack as ContextSliderTrack,
+	SliderContext,
+	useSliderContext,
+} from "./slider-context";
+import { renderDefaultAnatomy } from "./slider-default-anatomy";
+import { stripForbidden } from "./slider-slot";
+
+function hasSliderControl(children: ReactNode): boolean {
+	return Children.toArray(children).some((child) => {
+		if (!isValidElement<{ children?: ReactNode }>(child)) {
+			return false;
+		}
+		return (
+			child.type === ContextSliderControl ||
+			(child.type === Fragment && hasSliderControl(child.props.children))
+		);
+	});
+}
+
+function getSliderOptions({
+	value,
+	defaultValue,
+	min = 0,
+	max = 100,
+	step = 1,
+	ticks = false,
+	thumbValue = false,
+	thumbAlignment = "edge",
+	locale = "en-US",
+	format,
+}: SliderProps<number | readonly number[]>) {
+	const formatter = new Intl.NumberFormat(locale, format);
+	return {
+		locale,
+		max,
+		min,
+		range: Array.isArray(value ?? defaultValue),
+		step,
+		thumbAlignment,
+		thumbValue,
+		ticks,
+		valueCharacters: Math.max(
+			formatter.format(min).length,
+			formatter.format(max).length
+		),
+	};
+}
+
+function resolveBoundField(
+	context: BoundField | null,
+	value: unknown,
+	defaultValue: unknown
+): BoundNumberField | null {
+	const activeValue = value === undefined ? defaultValue : value;
+	if (Array.isArray(activeValue)) {
+		return null;
+	}
+	return isBoundNumberField(context) ? context : null;
+}
+
+function getSliderRootStyles(
+	orientation: "horizontal" | "vertical",
+	disabled?: boolean
+) {
+	return [
+		sliderStyles.root,
+		orientation === "vertical" ? sliderStyles.rootVertical : null,
+		disabled ? sliderStyles.rootDisabled : null,
+	];
+}
+
+function useSliderBinding(
+	boundField: BoundNumberField | null,
+	min: number,
+	userOnValueChange?: SliderProps<number | readonly number[]>["onValueChange"],
+	userOnBlur?: SliderProps["onBlur"]
+) {
+	const handleValueChange = useCallback(
+		(
+			val: number | readonly number[],
+			details: BaseSliderRoot.ChangeEventDetails
+		) => {
+			userOnValueChange?.(val, details);
+			if (!details.isCanceled && typeof val === "number") {
+				boundField?.handleChange(val);
+			}
+		},
+		[boundField, userOnValueChange]
+	);
+
+	const handleBlur = useCallback<NonNullable<SliderProps["onBlur"]>>(
+		(event) => {
+			userOnBlur?.(event);
+			if (boundField) {
+				const next = event.relatedTarget;
+				if (!(next instanceof Node && event.currentTarget.contains(next))) {
+					boundField.handleBlur();
+				}
+			}
+		},
+		[boundField, userOnBlur]
+	);
+
+	if (!boundField) {
+		return { boundProps: undefined, onBlur: userOnBlur };
+	}
+
+	return {
+		boundProps: {
+			name: boundField.name,
+			onValueChange: handleValueChange,
+			value: boundField.state.value ?? min,
+		},
+		onBlur: handleBlur,
+	};
+}
+
+export function Slider<Value extends readonly number[]>(
+	props: SliderProps<Value>
+): ReactElement;
+export function Slider<Value extends number = number>(
+	props: SliderProps<Value>
+): ReactElement;
+export function Slider(
+	props: SliderProps<number | readonly number[]>
+): ReactElement;
+export function Slider(
+	allProps: SliderProps<number | readonly number[]>
+): ReactElement {
+	const {
+		children,
+		disabled,
+		getAriaLabel,
+		invalid = false,
+		orientation = "horizontal",
+		ref: forwardedRef,
+		render,
+		size = "default",
+		...rest
+	} = allProps;
+
+	const options = getSliderOptions(allProps);
+	Reflect.deleteProperty(rest, "ticks");
+	Reflect.deleteProperty(rest, "thumbValue");
+	const { min, max, thumbAlignment, locale } = options;
+
+	const boundField = resolveBoundField(
+		useBoundFieldContext(),
+		rest.value,
+		rest.defaultValue
+	);
+	const { boundProps, onBlur } = useSliderBinding(
+		boundField,
+		min,
+		rest.onValueChange,
+		rest.onBlur
+	);
+
+	stripForbidden(rest);
+
+	const content = hasSliderControl(children) ? (
+		children
+	) : (
+		<>
+			{children}
+			{renderDefaultAnatomy(rest.value, rest.defaultValue, rest["aria-label"])}
+		</>
+	);
+
+	return (
+		<SliderContext.Provider
+			value={{
+				disabled,
+				getAriaLabel,
+				invalid,
+				orientation,
+				size,
+				...options,
+			}}
+		>
+			<BaseSlider.Root
+				{...rest}
+				{...boundProps}
+				{...(invalid ? { "aria-invalid": true, "data-invalid": "" } : {})}
+				{...(disabled ? { "data-disabled": "" } : {})}
+				data-orientation={orientation}
+				data-size={size}
+				data-slot="slider"
+				disabled={disabled}
+				locale={locale}
+				max={max}
+				min={min}
+				onBlur={onBlur}
+				orientation={orientation}
+				ref={forwardedRef}
+				render={protectRenderSlot("slider", render, {
+					...(disabled ? { "data-disabled": "" } : {}),
+					...(invalid ? { "data-invalid": "" } : {}),
+					"data-orientation": orientation,
+					"data-size": size,
+				})}
+				thumbAlignment={thumbAlignment}
+				{...props(getSliderRootStyles(orientation, disabled))}
+			>
+				{content}
+			</BaseSlider.Root>
+		</SliderContext.Provider>
+	);
+}
+
+export function SliderLabel({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: SliderLabelProps): ReactElement {
+	const { orientation, size } = useSliderContext();
+	stripForbidden(rest);
+
+	return (
+		<BaseSlider.Label
+			{...rest}
+			data-orientation={orientation}
+			data-size={size}
+			data-slot="slider-label"
+			ref={forwardedRef}
+			render={protectRenderSlot("slider-label", render, {
+				"data-orientation": orientation,
+				"data-size": size,
+			})}
+			{...props(sliderStyles.label)}
+		>
+			{children}
+		</BaseSlider.Label>
+	);
+}
+
+export function SliderValue({
+	children,
+	ref: forwardedRef,
+	render,
+	...rest
+}: SliderValueProps): ReactElement {
+	const { orientation, size } = useSliderContext();
+	stripForbidden(rest);
+
+	return (
+		<BaseSlider.Value
+			{...rest}
+			data-orientation={orientation}
+			data-size={size}
+			data-slot="slider-value"
+			ref={forwardedRef}
+			render={protectRenderSlot("slider-value", render, {
+				"data-orientation": orientation,
+				"data-size": size,
+			})}
+			{...props(sliderStyles.value)}
+		>
+			{children}
+		</BaseSlider.Value>
+	);
+}
+
+export const SliderControl = ContextSliderControl;
+export const SliderIndicator = ContextSliderIndicator;
+export const SliderThumb = ContextSliderThumb;
+export const SliderTrack = ContextSliderTrack;
+export const SliderPrimitive = BaseSlider;
+
+export type {
+	SliderControlProps,
+	SliderIndicatorProps,
+	SliderLabelProps,
+	SliderProps,
+	SliderSize,
+	SliderThumbProps,
+	SliderTrackProps,
+	SliderValueProps,
+} from "./slider.types";