@cdx-ui/primitives 0.0.1-beta.114 → 0.0.1-beta.116

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 }],
+  };
+}

package/src/utils/assignRef.ts

@@ -0,0 +1,11 @@
+import type { ForwardedRef } from 'react';
+
+export function assignRef<T>(ref: ForwardedRef<T>, value: T | null) {
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}

package/src/utils/createPortal.ts

@@ -10,8 +10,10 @@ type CreatePortalFn = (children: React.ReactNode, container: Element) => React.R
  * `react-dom`, which would cause a build error on native platforms.
  */
 export const createPortalFn: CreatePortalFn | undefined = (() => {
-  if (Platform.OS !== 'web') return undefined;
   try {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     return (require('react-dom') as { createPortal: CreatePortalFn }).createPortal;
   } catch {