@cdx-ui/primitives 0.0.1-beta.99 → 0.1.0

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;
+    setValueFromRatio(lastRatioRef.current, true);
+    setIsDragging(false);
+  }, [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,257 @@
+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 arraysEqual(a: readonly number[], b: readonly number[]): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((value, index) => value === b[index]);
+}
+
+export function normalizeSliderValue(
+  input: number | readonly number[] | undefined,
+  min: number,
+  defaultScalar?: number,
+): number[] {
+  if (input == null) {
+    return [defaultScalar ?? min];
+  }
+  if (Array.isArray(input)) {
+    return [...input];
+  }
+  return [input as number];
+}
+
+export function denormalizeSliderValue(
+  values: readonly number[],
+  asArray: boolean,
+): number | number[] {
+  return asArray ? [...values] : values[0];
+}
+
+export function getClosestValueIndex(values: readonly number[], target: number): number {
+  if (values.length === 0) {
+    return 0;
+  }
+
+  let closestIndex = 0;
+  let closestDistance = Math.abs(values[0] - target);
+
+  for (let index = 1; index < values.length; index += 1) {
+    const distance = Math.abs(values[index] - target);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = index;
+    }
+  }
+
+  return closestIndex;
+}
+
+export function getFillExtent(
+  startPercent: number,
+  endPercent: number,
+  trackSize: number,
+  thumbSize: number,
+): { offset: number; length: number } {
+  if (trackSize <= 0) {
+    return { offset: 0, length: 0 };
+  }
+
+  const start = (clamp(startPercent, 0, 100) / 100) * trackSize;
+  const end = (clamp(endPercent, 0, 100) / 100) * trackSize;
+  const span = end - start;
+
+  if (span > 0) {
+    return { offset: start, length: span };
+  }
+
+  if (start <= 0) {
+    return { offset: 0, length: 0 };
+  }
+
+  const halfThumb = Math.max(thumbSize, 0) / 2;
+  const offset = clamp(start - halfThumb, 0, trackSize);
+  const endUnderThumb = clamp(start + halfThumb, 0, trackSize);
+
+  return { offset, length: endUnderThumb - offset };
+}
+
+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/tabs/Tab.tsx

@@ -0,0 +1,158 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { Platform, Pressable } from 'react-native';
+import { composeEventHandlers, mergeRefs } 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 { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { TabProvider, useTabsContext } from './context';
+import type { ITabProps } from './types';
+
+export interface TabProps extends Omit<ITabProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export const Tab = forwardRef<ComponentRef<typeof Pressable>, TabProps>(
+  (
+    {
+      asChild,
+      children,
+      value: tabValue,
+      disabled: disabledProp = false,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      value: selectedValue,
+      onValueChange,
+      disabled: contextDisabled,
+      listId,
+      registerTab,
+      unregisterTab,
+      focusedValue,
+      setFocusedValue,
+    } = useTabsContext();
+
+    const disabled = contextDisabled || !!disabledProp || !!isDisabledProp;
+    const selected = selectedValue === tabValue;
+
+    const nodeRef = useRef<ComponentRef<typeof Pressable> | null>(null);
+    const mergedRef = mergeRefs(ref, nodeRef);
+
+    useEffect(() => {
+      registerTab(tabValue, {
+        disabled,
+        node: nodeRef.current as { focus?: () => void } | null,
+      });
+      return () => unregisterTab(tabValue);
+    }, [tabValue, disabled, registerTab, unregisterTab]);
+
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: {
+        onFocus?: (...args: unknown[]) => unknown;
+        onBlur?: (...args: unknown[]) => unknown;
+      };
+    };
+    const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+    const { isFocused, focusProps } = useFocus();
+    const { isHovered, hoverProps } = useHover();
+
+    const handlePress = useCallback(() => {
+      if (!disabled) {
+        setFocusedValue(tabValue);
+        onValueChange(tabValue);
+      }
+    }, [disabled, tabValue, onValueChange, setFocusedValue]);
+
+    const interactionState = useMemo(
+      () => ({
+        hover: !!(isHoveredProp || isHovered),
+        focus: !!(isFocusedProp || isFocused),
+        active: !!(isActiveProp || isActive),
+        disabled: !!disabled,
+        focusVisible: !!(isFocusVisibleProp || isFocusVisible),
+        selected,
+      }),
+      [
+        isHoveredProp,
+        isHovered,
+        isFocusedProp,
+        isFocused,
+        isActiveProp,
+        isActive,
+        disabled,
+        isFocusVisibleProp,
+        isFocusVisible,
+        selected,
+      ],
+    );
+
+    const isRovingTabStop = (focusedValue ?? selectedValue) === tabValue;
+    const webProps = Platform.OS === 'web' ? { tabIndex: isRovingTabStop ? 0 : -1 } : {};
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <TabProvider value={interactionState}>
+        <Comp
+          ref={mergedRef}
+          role="tab"
+          id={`${listId}-tab-${tabValue}`}
+          aria-selected={selected}
+          aria-controls={`${listId}-panel-${tabValue}`}
+          aria-disabled={disabled}
+          disabled={disabled}
+          accessibilityState={{ selected, disabled }}
+          {...webProps}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: interactionState.hover,
+              focus: interactionState.focus,
+              active: interactionState.active,
+              disabled: interactionState.disabled,
+              focusVisible: interactionState.focusVisible,
+              state: selected ? 'active' : 'inactive',
+            }),
+          )}
+          onPress={composeEventHandlers(props?.onPress, handlePress)}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            props?.onFocus as (...args: unknown[]) => unknown,
+            focusProps.onFocus,
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            props?.onBlur as (...args: unknown[]) => unknown,
+            focusProps.onBlur,
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </TabProvider>
+    );
+  },
+);
+
+Tab.displayName = 'Tab';

package/src/tabs/TabPanel.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type ComponentRef, type ReactNode } from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useTabsContext } from './context';
+import type { ITabPanelProps } from './types';
+
+export interface TabPanelProps extends Omit<ITabPanelProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export const TabPanel = forwardRef<ComponentRef<typeof View>, TabPanelProps>(
+  ({ asChild, children, value: panelValue, unmountWhenInactive = false, style, ...props }, ref) => {
+    const { value: selectedValue, listId } = useTabsContext();
+    const selected = selectedValue === panelValue;
+
+    if (!selected && unmountWhenInactive) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    const hideFromAccessibility = selected
+      ? null
+      : {
+          accessibilityElementsHidden: true as const,
+          importantForAccessibility: 'no-hide-descendants' as const,
+          'aria-hidden': true as const,
+        };
+
+    return (
+      <Comp
+        ref={ref}
+        role="tabpanel"
+        id={`${listId}-panel-${panelValue}`}
+        aria-labelledby={`${listId}-tab-${panelValue}`}
+        style={[!selected ? { display: 'none' } : null, style]}
+        {...props}
+        {...hideFromAccessibility}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'tabs-panel', state: selected ? 'active' : 'inactive' }),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TabPanel.displayName = 'TabPanel';

package/src/tabs/TabsList.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useTabsContext } from './context';
+import type { ITabsListProps } from './types';
+import { useTabsNavigation } from './useTabsNavigation';
+
+export interface TabsListProps extends ITabsListProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const {
+      value,
+      onValueChange,
+      activationMode,
+      orientation,
+      getTabs,
+      focusedValue,
+      setFocusedValue,
+    } = useTabsContext();
+
+    const { handleKeyDown } = useTabsNavigation({
+      getTabs,
+      focusedValue,
+      setFocusedValue,
+      value,
+      onValueChange,
+      activationMode,
+      orientation,
+    });
+
+    const webProps =
+      Platform.OS === 'web'
+        ? {
+            onKeyDown: composeEventHandlers(
+              (props as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+              handleKeyDown,
+            ),
+          }
+        : {};
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        role="tablist"
+        aria-orientation={orientation}
+        {...props}
+        {...webProps}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tabs-list', orientation }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TabsList.displayName = 'TabsList';