@octanejs/base-ui 0.1.50 → 0.1.51

package/src/slider/thumb/SliderThumb.tsrx

@@ -0,0 +1,567 @@
+'use client';
+import * as React from 'octane';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { useMergedRefs } from '@octanejs/base-ui-utils/useMergedRefs';
+import { visuallyHidden } from '@octanejs/base-ui-utils/visuallyHidden';
+import { ownerWindow } from '@octanejs/base-ui-utils/owner';
+import { script as prehydrationScript } from '#prehydration/slider/thumb';
+import { clamp } from '@octanejs/base-ui-utils/clamp';
+import { formatNumber } from '@octanejs/base-ui-utils/formatNumber';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { mergeProps } from '../../merge-props';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+import { useIsHydrating } from '../../utils/useIsHydrating';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { valueToPercent } from '../../utils/valueToPercent';
+import {
+	ARROW_DOWN,
+	ARROW_UP,
+	ARROW_RIGHT,
+	ARROW_LEFT,
+	HOME,
+	END,
+	COMPOSITE_KEYS,
+	PAGE_UP,
+	PAGE_DOWN,
+} from '../../internals/composite/composite';
+import { useCompositeListItem } from '../../internals/composite/list/useCompositeListItem';
+import { useDirection } from '../../internals/direction-context/DirectionContext.tsrx';
+import { PrehydrationScript } from '../../internals/PrehydrationScript.tsrx';
+import { useFieldRootContext } from '../../internals/field-root-context/FieldRootContext';
+import { contains } from '../../floating-ui-react/utils';
+import { matchesFocusVisible } from '../../floating-ui-react/utils/element';
+import { useLabelableId } from '../../internals/labelable-provider/useLabelableId';
+import { getMidpoint } from '../utils/getMidpoint';
+import { getSliderValue } from '../utils/getSliderValue';
+import { getDecimalPrecision, roundValueToStep } from '../utils/roundValueToStep';
+import type { SliderRootState } from '../root/SliderRoot.tsrx';
+import { useSliderRootContext } from '../root/SliderRootContext';
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping';
+import * as SliderThumbDataAttributes from './SliderThumbDataAttributes';
+
+const ALL_KEYS = new Set([...COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN]);
+
+function getDefaultAriaValueText(
+	values: readonly number[],
+	index: number,
+	format: Intl.NumberFormatOptions | undefined,
+	locale: Intl.LocalesArgument | undefined,
+): string | undefined {
+	if (index < 0) {
+		return undefined;
+	}
+
+	if (values.length === 2) {
+		return `${formatNumber(values[index], locale, format)} ${index === 0 ? 'start' : 'end'} range`;
+	}
+
+	return format ? formatNumber(values[index], locale, format) : undefined;
+}
+
+function getNewValue(
+	thumbValue: number,
+	increment: number,
+	direction: number,
+	min: number,
+	max: number,
+): number {
+	const value = thumbValue + increment * direction;
+	const roundedValue = Number(
+		value.toFixed(
+			Math.max(
+				getDecimalPrecision(thumbValue),
+				getDecimalPrecision(increment),
+				getDecimalPrecision(min),
+			),
+		),
+	);
+	return clamp(roundedValue, min, max);
+}
+
+/**
+ * The draggable part of the slider at the tip of the indicator.
+ * Renders a `<div>` element and a nested `<input type="range">`.
+ *
+ * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
+ */
+export const SliderThumb = function SliderThumb(
+	componentPropsWithRef: React.PropsWithoutRef<SliderThumb.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		render,
+		children: childrenProp,
+		className,
+		'aria-describedby': ariaDescribedByProp,
+		'aria-label': ariaLabelProp,
+		'aria-labelledby': ariaLabelledByProp,
+		'aria-valuetext': ariaValueTextProp,
+		disabled: disabledProp = false,
+		getAriaLabel: getAriaLabelProp,
+		getAriaValueText: getAriaValueTextProp,
+		id: idProp,
+		index: indexProp,
+		inputRef: inputRefProp,
+		onBlur: onBlurProp,
+		onFocus: onFocusProp,
+		onKeyDown: onKeyDownProp,
+		tabIndex: tabIndexProp,
+		style,
+		...elementProps
+	} = componentProps;
+
+	const id = useBaseUiId(idProp);
+
+	const {
+		active: activeIndex,
+		lastUsedThumbIndex,
+		controlRef,
+		disabled: contextDisabled,
+		validation,
+		format,
+		handleInputChange,
+		inset,
+		labelId,
+		largeStep,
+		locale,
+		max,
+		min,
+		minStepsBetweenValues,
+		form,
+		name,
+		orientation,
+		pressedThumbCenterOffsetRef,
+		pressedThumbIndexRef,
+		renderBeforeHydration,
+		setActive,
+		setIndicatorPosition,
+		state,
+		step,
+		thumbRefs,
+		values: sliderValues,
+	} = useSliderRootContext();
+
+	const direction = useDirection();
+
+	const disabled = disabledProp || contextDisabled;
+	const range = sliderValues.length > 1;
+	const vertical = orientation === 'vertical';
+	const rtl = direction === 'rtl';
+
+	const { setTouched, setFocused, validationMode } = useFieldRootContext();
+
+	const thumbRef = React.useRef<HTMLElement | null>(null);
+	const inputRef = React.useRef<HTMLInputElement | null>(null);
+	const restoringFocusVisibleRef = React.useRef(false);
+
+	// Attached to the `input` (not the thumb wrapper) so `event.currentTarget` is the
+	// input, matching `onKeyDown`. The synthetic blur/focus dispatched while restoring
+	// `:focus-visible` is internal and must not be forwarded to the user's handlers.
+	const handleFocusProp = useStableCallback((event: React.FocusEvent<HTMLInputElement>) => {
+		if (restoringFocusVisibleRef.current) {
+			return;
+		}
+		onFocusProp?.(event);
+	});
+
+	const handleBlurProp = useStableCallback((event: React.FocusEvent<HTMLInputElement>) => {
+		if (restoringFocusVisibleRef.current) {
+			return;
+		}
+		onBlurProp?.(event);
+	});
+
+	const defaultInputId = useBaseUiId();
+	const labelableId = useLabelableId();
+	const inputId = range ? defaultInputId : labelableId;
+
+	const thumbMetadata = React.useMemo(
+		() => ({
+			inputId,
+		}),
+		[inputId],
+	);
+
+	const { ref: listItemRef, index: compositeIndex } = useCompositeListItem<ThumbMetadata>({
+		metadata: thumbMetadata,
+	});
+
+	const index = !range ? 0 : (indexProp ?? compositeIndex);
+	const last = index === sliderValues.length - 1;
+	const thumbValue = sliderValues[index];
+	const thumbValuePercent = valueToPercent(thumbValue, min, max);
+
+	const [positionPercent, setPositionPercent] = React.useState<number | undefined>();
+	const isHydrating = useIsHydrating();
+
+	const safeLastUsedThumbIndex =
+		lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
+
+	const getInsetPosition = useStableCallback(() => {
+		const control = controlRef.current;
+		const thumb = thumbRef.current;
+		if (!control || !thumb) {
+			return;
+		}
+
+		const thumbRect = thumb.getBoundingClientRect();
+		const controlRect = control.getBoundingClientRect();
+
+		const side = vertical ? 'height' : 'width';
+		// the total travel distance adjusted to account for the thumb size
+		const controlSize = controlRect[side] - thumbRect[side];
+		// px distance from the starting edge (inline-start or bottom) to the thumb center
+		const thumbOffsetFromControlEdge =
+			thumbRect[side] / 2 + (controlSize * thumbValuePercent) / 100;
+		const nextPositionPercent = (thumbOffsetFromControlEdge / controlRect[side]) * 100;
+		const nextInsetPosition = Number.isFinite(nextPositionPercent)
+			? nextPositionPercent
+			: undefined;
+
+		setPositionPercent(nextInsetPosition);
+
+		if (index === 0) {
+			setIndicatorPosition((prevPosition) => [nextInsetPosition, prevPosition[1]]);
+		} else if (last) {
+			setIndicatorPosition((prevPosition) => [prevPosition[0], nextInsetPosition]);
+		}
+	});
+
+	useIsoLayoutEffect(() => {
+		if (inset) {
+			queueMicrotask(getInsetPosition);
+		}
+	}, [getInsetPosition, inset]);
+
+	useIsoLayoutEffect(() => {
+		if (inset) {
+			getInsetPosition();
+		}
+	}, [getInsetPosition, inset, thumbValuePercent]);
+
+	useIsoLayoutEffect(() => {
+		if (!inset) {
+			return undefined;
+		}
+
+		const control = controlRef.current;
+		const thumb = thumbRef.current;
+
+		if (!control || !thumb) {
+			return undefined;
+		}
+
+		const ResizeObserverCtor = ownerWindow(control).ResizeObserver;
+		if (typeof ResizeObserverCtor !== 'function') {
+			return undefined;
+		}
+
+		const resizeObserver = new ResizeObserverCtor(getInsetPosition);
+
+		resizeObserver.observe(control);
+		resizeObserver.observe(thumb);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [controlRef, getInsetPosition, inset]);
+
+	const startEdge = vertical ? 'bottom' : 'insetInlineStart';
+	const crossOffsetProperty = vertical ? 'left' : 'top';
+
+	let zIndex: number | undefined;
+	if (range) {
+		if (activeIndex === index) {
+			zIndex = 2;
+		} else if (safeLastUsedThumbIndex === index) {
+			zIndex = 1;
+		}
+	} else if (activeIndex === index) {
+		zIndex = 1;
+	}
+
+	let thumbStyle: React.CSSProperties;
+	if (!inset && !Number.isFinite(thumbValuePercent)) {
+		thumbStyle = visuallyHidden;
+	} else {
+		thumbStyle = {
+			position: 'absolute',
+			[startEdge]: inset ? 'var(--position)' : `${thumbValuePercent}%`,
+			[crossOffsetProperty]: '50%',
+			translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+			zIndex,
+			...(inset && {
+				['--position' as string]: `${positionPercent ?? 0}%`,
+				visibility:
+					(renderBeforeHydration && isHydrating) || positionPercent === undefined
+						? ('hidden' as const)
+						: undefined,
+			}),
+		};
+	}
+
+	let cssWritingMode: React.CSSProperties['writingMode'];
+	if (vertical) {
+		cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
+	}
+
+	const ariaLabel =
+		typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : ariaLabelProp;
+
+	const inputProps = mergeProps<'input'>(
+		{
+			'aria-label': ariaLabel,
+			'aria-labelledby': ariaLabelledByProp ?? (ariaLabel == null ? labelId : undefined),
+			'aria-describedby': ariaDescribedByProp,
+			'aria-orientation': orientation,
+			'aria-valuenow': thumbValue,
+			'aria-valuetext':
+				typeof getAriaValueTextProp === 'function'
+					? getAriaValueTextProp(formatNumber(thumbValue, locale, format), thumbValue, index)
+					: (ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, format, locale)),
+			disabled,
+			form,
+			id: inputId,
+			max,
+			min,
+			name,
+			onChange(event) {
+				handleInputChange(event.currentTarget.valueAsNumber, index, event);
+			},
+			onFocus(event) {
+				const isRestoringFocusVisible = restoringFocusVisibleRef.current;
+				restoringFocusVisibleRef.current = false;
+				setActive(index);
+				setFocused(true);
+
+				if (isRestoringFocusVisible) {
+					event.stopPropagation();
+				}
+			},
+			onBlur(event) {
+				if (restoringFocusVisibleRef.current) {
+					event.stopPropagation();
+					return;
+				}
+
+				setActive(-1);
+
+				// Keep field-level blur logic from running while focus moves to another thumb
+				// of the same slider, so validation doesn't commit mid-interaction.
+				if (thumbRefs.current.some((thumb) => contains(thumb, event.relatedTarget))) {
+					return;
+				}
+
+				setTouched(true);
+				setFocused(false);
+
+				if (validationMode === 'onBlur') {
+					validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
+				}
+			},
+			onKeyDown(event: React.KeyboardEvent) {
+				if (event.defaultPrevented) {
+					return;
+				}
+
+				if (!ALL_KEYS.has(event.key)) {
+					return;
+				}
+
+				if (COMPOSITE_KEYS.has(event.key)) {
+					event.stopPropagation();
+				}
+
+				let newValue = null;
+				let direction = 0;
+				let increment = event.shiftKey ? largeStep : step;
+				const roundedValue = roundValueToStep(thumbValue, step, min);
+				switch (event.key) {
+					case ARROW_UP:
+						direction = 1;
+						break;
+					case ARROW_RIGHT:
+						direction = rtl ? -1 : 1;
+						break;
+					case ARROW_DOWN:
+						direction = -1;
+						break;
+					case ARROW_LEFT:
+						direction = rtl ? 1 : -1;
+						break;
+					case PAGE_UP:
+						increment = largeStep;
+						direction = 1;
+						break;
+					case PAGE_DOWN:
+						increment = largeStep;
+						direction = -1;
+						break;
+					case END:
+						newValue =
+							range && Number.isFinite(sliderValues[index + 1])
+								? sliderValues[index + 1] - step * minStepsBetweenValues
+								: max;
+						break;
+					case HOME:
+						newValue =
+							range && Number.isFinite(sliderValues[index - 1])
+								? sliderValues[index - 1] + step * minStepsBetweenValues
+								: min;
+						break;
+					default:
+						break;
+				}
+
+				if (direction !== 0) {
+					newValue = getNewValue(roundedValue, increment, direction, min, max);
+				}
+
+				if (newValue !== null) {
+					const input = event.currentTarget as HTMLInputElement;
+
+					if (!matchesFocusVisible(input)) {
+						restoringFocusVisibleRef.current = true;
+						input.blur();
+						input.focus({
+							preventScroll: true,
+							// Show `:focus-visible` after keyboard interaction, even if the
+							// thumb was previously focused by a pointer.
+							focusVisible: true,
+						} as FocusOptions & { focusVisible?: boolean });
+					}
+
+					handleInputChange(newValue, index, event);
+					event.preventDefault();
+				}
+			},
+			step,
+			style: {
+				...visuallyHidden,
+				// So that VoiceOver's focus indicator matches the thumb's dimensions
+				width: '100%',
+				height: '100%',
+				writingMode: cssWritingMode,
+			},
+			tabIndex: tabIndexProp,
+			type: 'range',
+			value: thumbValue ?? '',
+		},
+		(props) => validation.getValidationProps(disabled, props),
+		{ onFocus: handleFocusProp, onBlur: handleBlurProp, onKeyDown: onKeyDownProp },
+	);
+
+	const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
+
+	const element = useRenderElement('div', componentProps, {
+		state,
+		ref: [forwardedRef, listItemRef, thumbRef],
+		props: [
+			{
+				[SliderThumbDataAttributes.index as string]: index,
+				children: (
+					<React.Fragment>
+						{childrenProp}
+						<input ref={mergedInputRef} {...inputProps} suppressHydrationWarning />
+						{/* Rendered with the last thumb to ensure all preceding thumbs are already in the DOM. */}
+						{inset && last && renderBeforeHydration && (
+							<PrehydrationScript script={prehydrationScript} />
+						)}
+					</React.Fragment>
+				),
+				id,
+				onPointerDown(event) {
+					// Keep disabled thumbs from writing transient pointer state.
+					if (disabled) {
+						return;
+					}
+
+					pressedThumbIndexRef.current = index;
+					const midpoint = getMidpoint(event.currentTarget, vertical);
+					pressedThumbCenterOffsetRef.current =
+						(vertical ? event.clientY : event.clientX) - midpoint;
+				},
+				style: thumbStyle,
+				suppressHydrationWarning: renderBeforeHydration || undefined,
+			},
+			elementProps,
+		],
+		stateAttributesMapping: sliderStateAttributesMapping,
+	});
+
+	return element;
+};
+
+export interface ThumbMetadata {
+	inputId: string | undefined;
+}
+
+export interface SliderThumbState extends SliderRootState {}
+
+export interface SliderThumbProps extends Omit<
+	BaseUIComponentProps<'div', SliderThumbState>,
+	'onBlur' | 'onFocus' | 'onKeyDown'
+> {
+	/**
+	 * Whether the thumb should ignore user interaction.
+	 * @default false
+	 */
+	disabled?: boolean | undefined;
+	/**
+	 * A string value forwarded to the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
+	 * Ignored when `getAriaValueText` is provided.
+	 */
+	'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
+	/**
+	 * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
+	 */
+	getAriaLabel?: ((index: number) => string) | null | undefined;
+	/**
+	 * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
+	 * This is important for screen reader users.
+	 */
+	getAriaValueText?:
+		((formattedValue: string, value: number, index: number) => string) | null | undefined;
+	/**
+	 * The index of the thumb which corresponds to the index of its value in the
+	 * `value` or `defaultValue` array.
+	 * This prop is required to support server-side rendering for range sliders
+	 * with multiple thumbs.
+	 * @example
+	 * ```tsx
+	 * <Slider.Root value={[10, 20]}>
+	 *   <Slider.Thumb index={0} />
+	 *   <Slider.Thumb index={1} />
+	 * </Slider.Root>
+	 * ```
+	 */
+	index?: number | undefined;
+	/**
+	 * A ref to access the nested input element.
+	 */
+	inputRef?: React.Ref<HTMLInputElement> | undefined;
+	/**
+	 * A blur handler forwarded to the `input`.
+	 */
+	onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
+	/**
+	 * A focus handler forwarded to the `input`.
+	 */
+	onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
+	/**
+	 * A keydown handler forwarded to the `input`.
+	 */
+	onKeyDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+	/**
+	 * Optional tab index attribute forwarded to the `input`.
+	 */
+	tabIndex?: number | undefined;
+}
+
+export namespace SliderThumb {
+	export type State = SliderThumbState;
+	export type Props = SliderThumbProps;
+}

package/src/slider/thumb/SliderThumbDataAttributes.ts

@@ -0,0 +1,37 @@
+/**
+ * Indicates the index of the thumb in range sliders.
+ */
+export const index = 'data-index';
+/**
+ * Present while the user is dragging.
+ */
+export const dragging = 'data-dragging';
+/**
+ * Indicates the orientation of the slider.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';
+/**
+ * Present when the slider is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the slider is in a valid state (when wrapped in Field.Root).
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the slider is in an invalid state (when wrapped in Field.Root).
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the slider has been touched (when wrapped in Field.Root).
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the slider's value has changed (when wrapped in Field.Root).
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the slider is focused (when wrapped in Field.Root).
+ */
+export const focused = 'data-focused';

package/src/slider/thumb/prehydrationScript.min.ts

@@ -0,0 +1,5 @@
+// This file is autogenerated. Do not edit it directly.
+// To update it, modify the corresponding source file and run `pnpm inline-scripts`.
+
+// prettier-ignore
+export const script = '!function(){const t=document.currentScript?.parentElement;if(!t)return;const e=t.closest("[data-base-ui-slider-control]");if(!e)return;const r=e.querySelector("[data-base-ui-slider-indicator]"),i=e.getBoundingClientRect(),n="vertical"===e.getAttribute("data-orientation")?"height":"width",o=e.querySelectorAll(\'input[type="range"]\'),l=o.length>1,s=o.length-1;let a=null,u=null;for(let t=0;t<o.length;t+=1){const e=o[t],y=parseFloat(e.getAttribute("value")??"");if(Number.isNaN(y))return;const c=e.parentElement;if(!c)return;const p=parseFloat(e.getAttribute("max")??"100"),g=parseFloat(e.getAttribute("min")??"0"),b=c?.getBoundingClientRect(),d=i[n]-b[n],m=100*(y-g)/(p-g),v=(b[n]/2+d*m/100)/i[n]*100;c.style.setProperty("--position",`${v}%`),Number.isFinite(v)&&(c.style.removeProperty("visibility"),r&&(0===t?(a=v,r.style.setProperty("--start-position",`${v}%`),l||r.style.removeProperty("visibility")):t===s&&(u=v-(a??0),r.style.setProperty("--end-position",`${v}%`),r.style.setProperty("--relative-size",`${u}%`),r.style.removeProperty("visibility"))))}}();';

package/src/slider/track/SliderTrack.tsrx

@@ -0,0 +1,49 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { useSliderRootContext } from '../root/SliderRootContext';
+import type { SliderRootState } from '../root/SliderRoot.tsrx';
+import { sliderStateAttributesMapping } from '../root/stateAttributesMapping';
+
+/**
+ * Contains the slider indicator and represents the entire range of the slider.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
+ */
+export const SliderTrack = function SliderTrack(
+	componentPropsWithRef: React.PropsWithoutRef<SliderTrack.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, ...elementProps } = componentProps;
+
+	const { state } = useSliderRootContext();
+
+	const element = useRenderElement('div', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: [
+			{
+				style: {
+					position: 'relative',
+				},
+			},
+			elementProps,
+		],
+		stateAttributesMapping: sliderStateAttributesMapping,
+	});
+
+	return element;
+};
+
+export interface SliderTrackState extends SliderRootState {}
+
+export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderTrackState> {}
+
+export namespace SliderTrack {
+	export type State = SliderTrackState;
+	export type Props = SliderTrackProps;
+}

package/src/slider/track/SliderTrackDataAttributes.ts

@@ -0,0 +1,33 @@
+/**
+ * Present while the user is dragging.
+ */
+export const dragging = 'data-dragging';
+/**
+ * Indicates the orientation of the slider.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';
+/**
+ * Present when the slider is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the slider is in a valid state (when wrapped in Field.Root).
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the slider is in an invalid state (when wrapped in Field.Root).
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the slider has been touched (when wrapped in Field.Root).
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the slider's value has changed (when wrapped in Field.Root).
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the slider is focused (when wrapped in Field.Root).
+ */
+export const focused = 'data-focused';

package/src/slider/utils/asc.ts

@@ -0,0 +1,3 @@
+export function asc(a: number, b: number) {
+	return a - b;
+}

package/src/slider/utils/getMidpoint.ts

@@ -0,0 +1,4 @@
+export function getMidpoint(element: HTMLElement, vertical: boolean): number {
+	const rect = element.getBoundingClientRect();
+	return vertical ? (rect.top + rect.bottom) / 2 : (rect.left + rect.right) / 2;
+}