@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.120

package/src/slider/SliderThumb.tsx

@@ -0,0 +1,268 @@
+import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import {
+  PanResponder,
+  Platform,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PressableProps,
+  type ViewStyle,
+} from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { assignRef } from '../utils/assignRef';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useSliderContext } from './context';
+import type { InterfaceSliderThumbProps } from './types';
+import { getPointerCoords, useWebSliderDrag } from './useSliderPointer';
+import { clamp, getThumbTravel, percentToThumbOffset } from './utils';
+
+export interface SliderThumbProps extends InterfaceSliderThumbProps {}
+
+export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThumbProps>(
+  (
+    {
+      asChild,
+      style,
+      onLayout,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      onPressIn,
+      onPressOut,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      percent,
+      orientation,
+      isDisabled,
+      isDragging,
+      trackLayout,
+      thumbSize,
+      setValueFromRatio,
+      setIsDragging,
+      setIsHovered,
+      setIsFocused,
+      setThumbSize,
+      thumbRef,
+    } = useSliderContext();
+
+    const percentRef = useRef(percent);
+    percentRef.current = percent;
+
+    const dragStartRatio = useRef(0);
+    const lastRatioRef = useRef(percent / 100);
+
+    // The native PanResponder is created once (stable across renders) so an
+    // in-flight gesture is never handed a fresh internal `gestureState`
+    // mid-drag. In controlled mode `setValueFromRatio`/`trackLayout` change
+    // identity on every value update, so the handlers read the current values
+    // through refs instead of closing over them (which would force the
+    // `useMemo` to re-create the responder on every move and reset `dx`).
+    const orientationRef = useRef(orientation);
+    orientationRef.current = orientation;
+    const trackLayoutRef = useRef(trackLayout);
+    trackLayoutRef.current = trackLayout;
+    const thumbSizeRef = useRef(thumbSize);
+    thumbSizeRef.current = thumbSize;
+    const isDisabledRef = useRef(isDisabled);
+    isDisabledRef.current = isDisabled;
+    const setValueFromRatioRef = useRef(setValueFromRatio);
+    setValueFromRatioRef.current = setValueFromRatio;
+    const setIsDraggingRef = useRef(setIsDragging);
+    setIsDraggingRef.current = setIsDragging;
+
+    const { hoverProps, isHovered } = useHover();
+    const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps: pressableProps, isPressed } = usePress({ isDisabled }) as {
+      isPressed: boolean;
+      pressProps: Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    };
+
+    const { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging,
+      setValueFromRatio,
+      trackLayout,
+      orientation,
+      thumbSize,
+    });
+
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !isDisabledRef.current,
+          onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+          onPanResponderGrant: () => {
+            if (isDisabledRef.current) {
+              return;
+            }
+            setIsDraggingRef.current(true);
+            dragStartRatio.current = percentRef.current / 100;
+            lastRatioRef.current = dragStartRatio.current;
+          },
+          onPanResponderMove: (_event, gestureState) => {
+            const layout = trackLayoutRef.current;
+            if (!layout) {
+              return;
+            }
+            const isHorizontal = orientationRef.current === 'horizontal';
+            const trackSize = isHorizontal ? layout.width : layout.height;
+            const travel = getThumbTravel(trackSize, thumbSizeRef.current);
+            if (travel <= 0) {
+              return;
+            }
+            const delta = isHorizontal ? gestureState.dx : -gestureState.dy;
+            const nextRatio = clamp(dragStartRatio.current + delta / travel, 0, 1);
+            lastRatioRef.current = nextRatio;
+            setValueFromRatioRef.current(nextRatio);
+          },
+          onPanResponderRelease: () => {
+            setIsDraggingRef.current(false);
+            setValueFromRatioRef.current(lastRatioRef.current, true);
+          },
+          onPanResponderTerminate: () => {
+            setIsDraggingRef.current(false);
+            setValueFromRatioRef.current(lastRatioRef.current, true);
+          },
+        }),
+      [],
+    );
+
+    const thumbStyle = useMemo((): ViewStyle => {
+      const trackSize =
+        trackLayout == null
+          ? 0
+          : orientation === 'horizontal'
+            ? trackLayout.width
+            : trackLayout.height;
+      const offset = percentToThumbOffset(percent, trackSize, thumbSize);
+
+      if (orientation === 'vertical') {
+        return {
+          position: 'absolute',
+          left: '50%',
+          bottom: offset,
+          marginLeft: -thumbSize / 2,
+          zIndex: 2,
+        };
+      }
+
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: offset,
+        transform: [{ translateY: -thumbSize / 2 }],
+        zIndex: 2,
+      };
+    }, [orientation, percent, thumbSize, trackLayout]);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        const measured = orientation === 'horizontal' ? width : height;
+        if (measured > 0) {
+          setThumbSize(measured);
+        }
+        if (onLayout) {
+          onLayout(event);
+        }
+      },
+      [onLayout, orientation, setThumbSize],
+    );
+
+    const handlePointerDown = useCallback(
+      (event: GestureResponderEvent) => {
+        if (Platform.OS !== 'web' || isDisabled) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        startDrag(x, y, percentRef.current / 100);
+      },
+      [isDisabled, startDrag],
+    );
+
+    const isWeb = Platform.OS === 'web';
+
+    // Native drag is driven by PanResponder. Its `panHandlers` set the same
+    // responder props (`onResponderGrant/Move/Release`, etc.) that RN's
+    // `Pressable`/`Pressability` also set internally — and `Pressable` spreads
+    // its own handlers last, silently clobbering ours. So on native the thumb
+    // must be a plain `View` that carries `panHandlers` directly. Web keeps
+    // `Pressable` for its pointer-event, hover, and focus-ring behavior.
+    const Comp = asChild ? Slot : isWeb ? Pressable : View;
+
+    const setThumbRef = useCallback(
+      (node: ComponentRef<typeof Pressable> | null) => {
+        thumbRef.current = node;
+        assignRef(ref, node);
+      },
+      [ref, thumbRef],
+    );
+
+    const webInteractionProps: PressableProps = {
+      onPointerDown: handlePointerDown as unknown as PressableProps['onPointerDown'],
+      onHoverIn: composeEventHandlers(
+        onHoverIn,
+        composeEventHandlers(hoverProps.onHoverIn, () => setIsHovered(true)),
+      ),
+      onHoverOut: composeEventHandlers(
+        onHoverOut,
+        composeEventHandlers(hoverProps.onHoverOut, () => setIsHovered(false)),
+      ),
+      onPressIn: composeEventHandlers(onPressIn, pressableProps.onPressIn),
+      onPressOut: composeEventHandlers(onPressOut, pressableProps.onPressOut),
+      disabled: isDisabled,
+      tabIndex: -1,
+    };
+
+    return (
+      <Comp
+        ref={setThumbRef}
+        {...(props as PressableProps)}
+        {...(isWeb ? webInteractionProps : panResponder.panHandlers)}
+        onLayout={handleLayout}
+        onFocus={composeEventHandlers(
+          composeEventHandlers(onFocus as (...args: unknown[]) => unknown, focusProps.onFocus),
+          composeEventHandlers(focusRingProps.onFocus, () => setIsFocused(true)),
+        )}
+        onBlur={composeEventHandlers(
+          composeEventHandlers(onBlur as (...args: unknown[]) => unknown, focusProps.onBlur),
+          composeEventHandlers(focusRingProps.onBlur, () => setIsFocused(false)),
+        )}
+        style={[thumbStyle, style]}
+        accessibilityRole="none"
+        importantForAccessibility="no"
+        {...dataAttributes({
+          slot: 'slider-thumb',
+          hover: isHovered,
+          focus: isFocused,
+          focusVisible: isFocusVisible,
+          // On native there is no `Pressable`, so `usePress` never fires; the
+          // drag state stands in for "active" so the thumb still scales while
+          // the user is dragging (see `data-[active=true]:scale-105`).
+          active: isPressed || isDragging,
+          dragging: isDragging,
+          disabled: isDisabled,
+        })}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+SliderThumb.displayName = 'SliderThumb';

package/src/slider/context.tsx

@@ -0,0 +1,38 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import { createContext } from '@cdx-ui/utils';
+import type { SliderOrientation } from './types';
+
+export interface SliderTrackLayout {
+  readonly width: number;
+  readonly height: number;
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface SliderContextValue {
+  readonly value: number;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly percent: number;
+  readonly orientation: SliderOrientation;
+  readonly isDisabled: boolean;
+  readonly isDragging: boolean;
+  readonly isHovered: boolean;
+  readonly isFocused: boolean;
+  readonly trackLayout: SliderTrackLayout | null;
+  readonly thumbSize: number;
+  readonly setValue: (value: number, complete?: boolean) => void;
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+  readonly setTrackLayout: (layout: SliderTrackLayout) => void;
+  readonly setThumbSize: (size: number) => void;
+  readonly setIsDragging: (dragging: boolean) => void;
+  readonly setIsHovered: (hovered: boolean) => void;
+  readonly setIsFocused: (focused: boolean) => void;
+  readonly getValueLabel: () => string;
+  readonly thumbRef: RefObject<View | null>;
+}
+
+export const [SliderProvider, useSliderContext] =
+  createContext<SliderContextValue>('SliderContext');

package/src/slider/index.ts

@@ -0,0 +1,19 @@
+export type {
+  ISliderProps,
+  ISliderRailProps,
+  ISliderThumbProps,
+  SliderAccessibilityValue,
+  SliderOrientation,
+} from './types';
+export type { SliderContextValue, SliderTrackLayout } from './context';
+export { useSliderContext } from './context';
+export { SliderRoot, type SliderRootProps } from './SliderRoot';
+export { SliderRail, type SliderRailProps } from './SliderRail';
+export { SliderThumb, type SliderThumbProps } from './SliderThumb';
+export {
+  getMarkerPositionStyle,
+  getMarkerStepValues,
+  percentToFillExtent,
+  SLIDER_MARKER_SIZE,
+  valueToPercent,
+} from './utils';

package/src/slider/types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type SliderOrientation = 'horizontal' | 'vertical';
+
+export type SliderAccessibilityValue = NonNullable<ViewProps['accessibilityValue']>;
+
+export interface InterfaceSliderProps extends Omit<ViewProps, 'children' | 'accessibilityValue'> {
+  readonly value?: number;
+  readonly defaultValue?: number;
+  readonly onChange?: (value: number) => void;
+  readonly onChangeComplete?: (value: number) => void;
+  readonly min?: number;
+  readonly max?: number;
+  readonly step?: number;
+  readonly isDisabled?: boolean;
+  readonly orientation?: SliderOrientation;
+  /**
+   * Screen reader label when there is no visible label.
+   */
+  readonly accessibilityLabel?: string;
+  /**
+   * Screen reader value for the slider. Merged with derived `min`, `max`, `now`, and formatted
+   * `text` when fields are omitted. `text` overrides the numeric announcement when set.
+   */
+  readonly accessibilityValue?: SliderAccessibilityValue;
+  readonly children?: ReactNode;
+}
+
+export type ISliderProps = InterfaceSliderProps;
+
+export interface InterfaceSliderRailProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type ISliderRailProps = InterfaceSliderRailProps;
+
+export interface InterfaceSliderThumbProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type ISliderThumbProps = InterfaceSliderThumbProps;

package/src/slider/useSliderPointer.ts

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+import type { SliderTrackLayout } from './context';
+import type { SliderOrientation } from './types';
+import { clamp, getThumbTravel, pointerCoordToRatio, pointerCoordToVerticalRatio } from './utils';
+
+export function getPointerCoords(nativeEvent: {
+  pageX?: number;
+  pageY?: number;
+  clientX?: number;
+  clientY?: number;
+}): { x: number; y: number } {
+  if (Platform.OS === 'web' && nativeEvent.clientX != null && nativeEvent.clientY != null) {
+    return { x: nativeEvent.clientX, y: nativeEvent.clientY };
+  }
+
+  return {
+    x: nativeEvent.pageX ?? 0,
+    y: nativeEvent.pageY ?? 0,
+  };
+}
+
+export function getRatioFromPagePoint(
+  pageX: number,
+  pageY: number,
+  trackLayout: SliderTrackLayout | null,
+  orientation: SliderOrientation,
+  thumbSize: number,
+): number {
+  if (!trackLayout) {
+    return 0;
+  }
+
+  if (orientation === 'horizontal') {
+    return pointerCoordToRatio(pageX, trackLayout.x, trackLayout.width, thumbSize);
+  }
+
+  return pointerCoordToVerticalRatio(pageY, trackLayout.y, trackLayout.height, thumbSize);
+}
+
+interface WebDragContext {
+  readonly startPointer: number;
+  readonly startRatio: number;
+  readonly travel: number;
+}
+
+export function useWebSliderDrag({
+  isDisabled,
+  setIsDragging,
+  setValueFromRatio,
+  trackLayout,
+  orientation,
+  thumbSize,
+}: {
+  isDisabled: boolean;
+  setIsDragging: (dragging: boolean) => void;
+  setValueFromRatio: (ratio: number, complete?: boolean) => void;
+  trackLayout: SliderTrackLayout | null;
+  orientation: SliderOrientation;
+  thumbSize: number;
+}) {
+  const draggingRef = useRef(false);
+  const lastRatioRef = useRef(0);
+  const dragContextRef = useRef<WebDragContext | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+    };
+  }, []);
+
+  const endDrag = useCallback(() => {
+    if (!draggingRef.current) {
+      return;
+    }
+    draggingRef.current = false;
+    dragContextRef.current = null;
+    setIsDragging(false);
+    setValueFromRatio(lastRatioRef.current, true);
+  }, [setIsDragging, setValueFromRatio]);
+
+  const startDrag = useCallback(
+    (
+      pageX: number,
+      pageY: number,
+      anchorRatio?: number,
+      trackLayoutOverride?: SliderTrackLayout,
+    ) => {
+      if (isDisabled || Platform.OS !== 'web' || typeof window === 'undefined') {
+        return;
+      }
+
+      const layout = trackLayoutOverride ?? trackLayout;
+      if (!layout) {
+        return;
+      }
+
+      const trackSize = orientation === 'horizontal' ? layout.width : layout.height;
+      const travel = getThumbTravel(trackSize, thumbSize);
+      if (travel <= 0) {
+        return;
+      }
+
+      const startPointer = orientation === 'horizontal' ? pageX : pageY;
+      const startRatio =
+        anchorRatio != null
+          ? clamp(anchorRatio, 0, 1)
+          : getRatioFromPagePoint(pageX, pageY, layout, orientation, thumbSize);
+
+      lastRatioRef.current = startRatio;
+      draggingRef.current = true;
+      dragContextRef.current = { startPointer, startRatio, travel };
+      setIsDragging(true);
+      setValueFromRatio(startRatio);
+
+      const onMove = (event: PointerEvent) => {
+        if (!draggingRef.current || !dragContextRef.current) {
+          return;
+        }
+        event.preventDefault();
+        const pointer = orientation === 'horizontal' ? event.clientX : event.clientY;
+        const delta = pointer - dragContextRef.current.startPointer;
+        const deltaAlongTrack = orientation === 'horizontal' ? delta : -delta;
+        const nextRatio = clamp(
+          dragContextRef.current.startRatio + deltaAlongTrack / dragContextRef.current.travel,
+          0,
+          1,
+        );
+        lastRatioRef.current = nextRatio;
+        setValueFromRatio(nextRatio);
+      };
+
+      const onUp = () => {
+        cleanupRef.current = null;
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+        endDrag();
+      };
+
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onUp);
+      window.addEventListener('pointercancel', onUp);
+
+      cleanupRef.current = () => {
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+      };
+    },
+    [endDrag, isDisabled, orientation, setIsDragging, setValueFromRatio, thumbSize, trackLayout],
+  );
+
+  return { startDrag };
+}

package/src/slider/utils.ts

@@ -0,0 +1,181 @@
+import type { ViewStyle } from 'react-native';
+import type { SliderTrackLayout } from './context';
+import type { SliderOrientation } from './types';
+
+type PercentString = `${number}%`;
+
+function toPercentDimension(percent: number): PercentString {
+  return `${String(percent)}%` as PercentString;
+}
+
+export const SLIDER_MARKER_SIZE = 3;
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function getThumbTravel(trackSize: number, _thumbSize: number): number {
+  return Math.max(trackSize, 0);
+}
+
+/** Thumb leading-edge offset along the track axis (center-based). */
+export function percentToThumbOffset(
+  percent: number,
+  trackSize: number,
+  thumbSize: number,
+): number {
+  if (trackSize <= 0) return 0;
+  return (clamp(percent, 0, 100) / 100) * trackSize - thumbSize / 2;
+}
+
+/** Filled track extent to the thumb center. */
+export function percentToFillExtent(
+  percent: number,
+  trackSize: number,
+  _thumbSize: number,
+): number {
+  if (trackSize <= 0) return 0;
+  return (clamp(percent, 0, 100) / 100) * trackSize;
+}
+
+/** Map a pointer coordinate on the track axis to a 0–1 ratio. */
+export function pointerCoordToRatio(
+  pointerCoord: number,
+  trackStart: number,
+  trackSize: number,
+  _thumbSize: number,
+): number {
+  if (trackSize <= 0) {
+    return 0;
+  }
+  return clamp((pointerCoord - trackStart) / trackSize, 0, 1);
+}
+
+/** Vertical slider: bottom = min (0), top = max (1). */
+export function pointerCoordToVerticalRatio(
+  pointerCoord: number,
+  trackStart: number,
+  trackSize: number,
+  _thumbSize: number,
+): number {
+  if (trackSize <= 0) {
+    return 0;
+  }
+  return clamp((trackStart + trackSize - pointerCoord) / trackSize, 0, 1);
+}
+
+export function snapToStep(value: number, min: number, max: number, step: number): number {
+  if (step <= 0) {
+    return clamp(value, min, max);
+  }
+  const stepped = min + Math.round((value - min) / step) * step;
+  return clamp(stepped, min, max);
+}
+
+export function valueToPercent(value: number, min: number, max: number): number {
+  if (max <= min) {
+    return 0;
+  }
+  return ((clamp(value, min, max) - min) / (max - min)) * 100;
+}
+
+export function percentToValue(percent: number, min: number, max: number, step: number): number {
+  const ratio = clamp(percent, 0, 100) / 100;
+  return snapToStep(min + ratio * (max - min), min, max, step);
+}
+
+export function formatSliderValue(value: number): string {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
+export function getMarkerStepValues(min: number, max: number, step: number): number[] {
+  if (step <= 0 || max <= min) {
+    return [];
+  }
+
+  const decimals = getDecimalPlaces(step);
+  const stepCount = Math.floor((max - min) / step);
+  const values = Array.from({ length: stepCount + 1 }, (_, index) =>
+    roundTo(min + index * step, decimals),
+  );
+  if (values[values.length - 1] < max) {
+    values.push(max);
+  }
+  return values;
+}
+
+function getDecimalPlaces(n: number): number {
+  const str = String(n);
+  const dotIndex = str.indexOf('.');
+  return dotIndex === -1 ? 0 : str.length - dotIndex - 1;
+}
+
+function roundTo(value: number, decimals: number): number {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+
+/** Marker leading-edge offset (center-aligned to the thumb coordinate system). */
+export function percentToMarkerCenterOffset(
+  percent: number,
+  trackSize: number,
+  markerSize = SLIDER_MARKER_SIZE,
+): number {
+  if (trackSize <= 0) return 0;
+  return (clamp(percent, 0, 100) / 100) * trackSize - markerSize / 2;
+}
+
+export function getMarkerPositionStyle(
+  percent: number,
+  orientation: SliderOrientation,
+  trackLayout: SliderTrackLayout | null,
+  _thumbSize: number,
+  markerSize = SLIDER_MARKER_SIZE,
+): ViewStyle {
+  const trackSize =
+    trackLayout == null ? 0 : orientation === 'horizontal' ? trackLayout.width : trackLayout.height;
+
+  if (trackSize > 0) {
+    const offset = percentToMarkerCenterOffset(percent, trackSize, markerSize);
+    if (orientation === 'vertical') {
+      return {
+        position: 'absolute',
+        left: '50%',
+        bottom: offset,
+        width: markerSize,
+        height: markerSize,
+        marginLeft: -markerSize / 2,
+      };
+    }
+    return {
+      position: 'absolute',
+      top: '50%',
+      left: offset,
+      width: markerSize,
+      height: markerSize,
+      marginTop: -markerSize / 2,
+    };
+  }
+
+  if (orientation === 'vertical') {
+    return {
+      position: 'absolute',
+      left: '50%',
+      bottom: toPercentDimension(percent),
+      width: markerSize,
+      height: markerSize,
+      marginLeft: -markerSize / 2,
+      transform: [{ translateY: markerSize / 2 }],
+    };
+  }
+
+  return {
+    position: 'absolute',
+    top: '50%',
+    left: toPercentDimension(percent),
+    width: markerSize,
+    height: markerSize,
+    marginTop: -markerSize / 2,
+    transform: [{ translateX: -markerSize / 2 }],
+  };
+}