@cdx-ui/primitives 0.0.1-beta.16 → 0.0.1-beta.161

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/slot/index.tsx

@@ -0,0 +1,162 @@
+/* https://rn-primitives.vercel.app/slot */
+
+import * as React from 'react';
+import {
+  type PressableStateCallbackType,
+  type ImageStyle as RNImageStyle,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+} from 'react-native';
+
+export function Slot<T extends React.ElementType>(props: React.ComponentPropsWithRef<T>) {
+  const { children, ref: forwardedRef, ...restOfProps } = props;
+
+  if (!React.isValidElement(children)) {
+    console.log('Slot - Invalid asChild element', children);
+    return null;
+  }
+
+  if (isTextChildren(children)) {
+    console.log('Slot - Text children are not supported', children);
+    return null;
+  }
+
+  const childrenProps = (children.props as Record<string, any>) ?? {};
+
+  if (children.type === React.Fragment) {
+    return (
+      <>
+        {React.Children.toArray(childrenProps.children).map((child): any =>
+          React.isValidElement(child)
+            ? Slot({ ...restOfProps, ref: forwardedRef, children: child })
+            : child,
+        )}
+      </>
+    );
+  }
+
+  const { ref: childRef, ...childProps } = childrenProps;
+
+  return React.cloneElement(children, {
+    ...mergeProps(restOfProps, childProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef,
+  } as unknown as Partial<React.ComponentPropsWithRef<T>>);
+}
+
+Slot.displayName = 'Slot';
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+function setRef<T>(ref: React.Ref<T> | undefined, value: T | null): (() => void) | void {
+  if (typeof ref === 'function') {
+    const cleanup = ref(value);
+
+    if (typeof cleanup === 'function') {
+      return cleanup;
+    }
+
+    return;
+  }
+
+  if (ref != null) {
+    ref.current = value;
+    return () => {
+      ref.current = null;
+    };
+  }
+}
+
+function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
+  let cleanups: (() => void)[] = [];
+
+  return (node) => {
+    cleanups.forEach((cleanup) => cleanup());
+    cleanups = [];
+
+    if (node == null) {
+      refs.forEach((ref) => {
+        if (typeof ref === 'function') {
+          ref(null);
+        } else if (ref != null) {
+          ref.current = null;
+        }
+      });
+      return;
+    }
+
+    cleanups = refs
+      .map((ref) => setRef(ref, node))
+      .filter((cleanup): cleanup is () => void => cleanup != null);
+  };
+}
+
+type AnyProps = Record<string, any>;
+
+// TODO: Compare with mergeProps from @react-aria/utils
+function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+type PressableStyle = RNPressableProps['style'];
+type ImageStyle = StyleProp<RNImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+function combineStyles(slotStyle?: Style, childValue?: Style) {
+  if (typeof slotStyle === 'function' && typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return [slotStyle(state), childValue(state)];
+    };
+  }
+  if (typeof slotStyle === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return childValue ? [slotStyle(state), childValue] : slotStyle(state);
+    };
+  }
+  if (typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return slotStyle ? [slotStyle, childValue(state)] : childValue(state);
+    };
+  }
+
+  if (slotStyle && childValue) {
+    return [slotStyle, childValue];
+  }
+
+  return slotStyle ?? childValue;
+}
+
+export function isTextChildren(
+  children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode),
+) {
+  return Array.isArray(children)
+    ? children.every((child) => typeof child === 'string')
+    : typeof children === 'string';
+}

package/src/switch/index.ts

@@ -1,16 +1,7 @@
-import type React from 'react';
-import { createSwitchRoot } from './createSwitchRoot';
-import type { ISwitchComponentType } from './types';
-
-export type { ISwitchProps, ISwitchComponentType, IInterfaceSwitchProps } from './types';
-
-export function createSwitch<T, R = unknown>({
-  Root,
-}: {
-  Root: React.ComponentType<T>;
-}): ISwitchComponentType<T, R> {
-  const Switch = createSwitchRoot(Root);
-
-  Switch.displayName = 'Switch';
-  return Switch as ISwitchComponentType<T, R>;
-}
+export type {
+  ISwitchProps,
+  IInterfaceSwitchProps,
+  IUseSwitchReturn,
+  IUseSwitchState,
+} from './types';
+export { useSwitch } from './useSwitch';

package/src/switch/types.ts

@@ -1,4 +1,5 @@
-import type React from 'react';
+import type { RefObject } from 'react';
+import type { useHover } from '@react-native-aria/interactions';
 
 export interface IInterfaceSwitchProps {
   /**
@@ -22,21 +23,45 @@ export interface IInterfaceSwitchProps {
    */
   disabled?: boolean;
   /**
-   * If true, the checkbox will be initially checked.
+   * If true, the switch will be initially checked.
    */
   defaultValue?: boolean;
   /**
    * If true, set the switch to the invalid state.
    */
   isInvalid?: boolean;
-  /**
-   * If true, the switch will be hovered.
-   */
-  isHovered?: boolean;
 }
 
-export type ISwitchComponentType<T, R = unknown> = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<T & IInterfaceSwitchProps> & React.RefAttributes<R>
->;
-
 export type ISwitchProps = IInterfaceSwitchProps;
+
+export interface IUseSwitchState {
+  /** Resolved checked state (controlled value, falls back to internal toggle state). */
+  checked: boolean;
+  /** Resolved disabled state (prop, FormControl context, or `disabled` alias). */
+  isDisabled: boolean;
+  /** Resolved invalid state (prop or FormControl context). */
+  isInvalid: boolean;
+  /** True while a pointer is hovering the host element (web only). */
+  isHovered: boolean;
+  /** True when the host element has visible keyboard focus. */
+  isFocusVisible: boolean;
+}
+
+export interface IUseSwitchReturn extends IUseSwitchState {
+  /** Toggle the checked state. Pass to the host element's change/press handler. */
+  setChecked: (value: boolean) => void;
+  /** Hover interaction handlers from `@react-native-aria/interactions`. */
+  hoverProps: ReturnType<typeof useHover>['hoverProps'];
+  /**
+   * Focus-ring interaction handlers from `@react-native-aria/focus`.
+   *
+   * The native `useFocusRing` declares `focusProps: {}` in its types, but the
+   * runtime (and the web variant) emit `onFocus`/`onBlur`, so we widen the
+   * shape here for the styled-layer host to wire them safely.
+   */
+  focusProps: { onFocus?: () => void; onBlur?: () => void };
+  /** Platform-aware `data-*` attributes for interaction state (Standard 1). */
+  dataAttrs: Record<string, unknown>;
+  /** Ref to attach to the host element so the hover tracker can observe it. */
+  hostRef: RefObject<unknown>;
+}