react-native-system-ui 0.0.1 → 0.0.3

package/dist/es/components/slider/Slider.js

@@ -2,59 +2,16 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { useSlider, useSliderThumb } from '@react-native-aria/slider';
 import { isRTL } from '@react-native-aria/utils';
 import { useSliderState } from '@react-stately/slider';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { useSliderTokens } from './tokens';
-import { clamp, parseNumber } from '../../utils/number';
-import { isFiniteNumber, isFunction } from '../../utils/validate';
-const clampValue = (value, min, max) => {
-  if (!isFiniteNumber(value)) {
-    return min;
-  }
-  return clamp(value, min, max);
-};
-const isSameLayout = (a, b) => a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
-const normalizeValue = (value, range, min, max) => {
-  if (range) {
-    const raw = Array.isArray(value) ? value : isFiniteNumber(value) ? [min, value] : [min, min];
-    const first = clampValue(raw[0], min, max);
-    const second = clampValue(raw[1] ?? raw[0], min, max);
-    return first <= second ? [first, second] : [second, first];
-  }
-  const single = Array.isArray(value) ? value[0] : value;
-  return [clampValue(single, min, max)];
-};
-const toSliderValue = (values, range, fallback) => {
-  if (range) {
-    const start = values[0] ?? fallback;
-    const end = values[1] ?? start;
-    return [start, end];
-  }
-  return values[0] ?? fallback;
-};
-const createAccessibilityProps = inputProps => {
-  if (!inputProps) return {};
-  const {
-    role,
-    ['aria-value']: ariaValue,
-    accessibilityActions,
-    onAccessibilityAction,
-    disabled
-  } = inputProps;
-  return {
-    accessible: true,
-    accessibilityRole: role ?? 'adjustable',
-    accessibilityValue: ariaValue,
-    accessibilityActions,
-    onAccessibilityAction,
-    accessibilityState: {
-      disabled
-    }
-  };
-};
-const defaultNumberFormatter = typeof Intl !== 'undefined' && isFunction(Intl.NumberFormat) ? new Intl.NumberFormat() : {
-  format: val => String(val)
-};
+import { parseNumber } from '../../utils/number';
+import { isFunction, isFiniteNumber } from '../../utils/validate';
+import { useAriaPress } from '../../hooks';
+import { isSameLayout, normalizeValue, toSliderValue, createAccessibilityProps, defaultNumberFormatter } from './utils';
+const START_KEYS = ['onResponderGrant', 'onPanResponderGrant'];
+const MOVE_KEYS = ['onResponderMove', 'onPanResponderMove'];
+const END_KEYS = ['onResponderRelease', 'onResponderTerminate', 'onPanResponderRelease', 'onPanResponderTerminate'];
 const ThumbNode = /*#__PURE__*/React.memo(({
   index,
   orientation,
@@ -73,7 +30,7 @@ const ThumbNode = /*#__PURE__*/React.memo(({
   webGestureStyle,
   enhanceHandlers
 }) => {
-  const inputRef = React.useRef(null);
+  const inputRef = useRef(null);
   const {
     thumbProps,
     inputProps
@@ -84,38 +41,46 @@ const ThumbNode = /*#__PURE__*/React.memo(({
     isDisabled,
     orientation
   }, state, ariaReverse);
-  const handlers = enhanceHandlers(thumbProps, index) ?? thumbProps ?? {};
-  const axisKey = orientation === 'vertical' ? 'top' : 'left';
-  const crossAxisKey = orientation === 'vertical' ? 'left' : 'top';
-  const translate = -size / 2;
-  const thumbStyle = {
-    width: size,
-    height: size,
-    borderRadius: size / 2,
-    borderColor: activeColor,
-    [axisKey]: `${visualPercent}%`,
-    [crossAxisKey]: '50%',
-    transform: [{
-      translateX: translate
-    }, {
-      translateY: translate
-    }],
-    ...(content ? null : {
-      backgroundColor: thumbBackgroundColor,
-      elevation: thumbElevation
-    })
-  };
+  const rawThumbViewProps = thumbProps;
+  const handlers = enhanceHandlers(rawThumbViewProps, index) ?? rawThumbViewProps ?? {};
+  const translate = useMemo(() => -size / 2, [size]);
+  const thumbStyle = useMemo(() => {
+    const next = {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderColor: activeColor,
+      transform: [{
+        translateX: translate
+      }, {
+        translateY: translate
+      }]
+    };
+    if (orientation === 'vertical') {
+      next.top = `${visualPercent}%`;
+      next.left = '50%';
+    } else {
+      next.left = `${visualPercent}%`;
+      next.top = '50%';
+    }
+    if (!content) {
+      next.backgroundColor = thumbBackgroundColor;
+      next.elevation = thumbElevation;
+    }
+    return next;
+  }, [activeColor, content, orientation, size, thumbBackgroundColor, thumbElevation, translate, visualPercent]);
+  const indicatorStyle = useMemo(() => ({
+    width: indicatorSize,
+    height: indicatorSize,
+    borderRadius: indicatorSize / 2,
+    backgroundColor: indicatorColor
+  }), [indicatorColor, indicatorSize]);
   const accessibilityProps = createAccessibilityProps(inputProps);
   return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
     style: [content ? styles.thumbWrapper : styles.thumb, webGestureStyle, thumbStyle]
   }), content ?? /*#__PURE__*/React.createElement(View, {
-    style: {
-      width: indicatorSize,
-      height: indicatorSize,
-      borderRadius: indicatorSize / 2,
-      backgroundColor: indicatorColor
-    }
+    style: indicatorStyle
   }));
 });
 ThumbNode.displayName = 'ThumbNode';
@@ -154,7 +119,8 @@ export const Slider = props => {
   } = props;
   const tokens = useSliderTokens(tokensOverride);
   const orientation = vertical ? 'vertical' : 'horizontal';
-  const trackRef = React.useRef(null);
+  const trackRef = useRef(null);
+  const measureRafRef = useRef(null);
   const resolvedMin = parseNumber(min, 0);
   const resolvedMax = parseNumber(max, 100);
   const resolvedStepRaw = parseNumber(step, 1);
@@ -165,10 +131,16 @@ export const Slider = props => {
   const resolvedActiveColor = activeColor ?? tokens.colors.active;
   const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactive;
   const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
-  const normalized = React.useMemo(() => normalizeValue(valueProp, range, resolvedMin, resolvedMax), [valueProp, range, resolvedMin, resolvedMax]);
+  const normalized = useMemo(() => normalizeValue(valueProp, range, resolvedMin, resolvedMax), [valueProp, range, resolvedMin, resolvedMax]);
   const isControlled = valueProp !== undefined;
-  const formatOutput = values => toSliderValue(values, range, resolvedMin);
-  const state = useSliderState({
+  const formatOutput = useCallback(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
+  const handleStateChange = useCallback(values => {
+    onChange?.(formatOutput(values));
+  }, [formatOutput, onChange]);
+  const handleStateChangeEnd = useCallback(values => {
+    onChangeAfter?.(formatOutput(values));
+  }, [formatOutput, onChangeAfter]);
+  const sliderStateOptions = useMemo(() => ({
     minValue: resolvedMin,
     maxValue: resolvedMax,
     step: resolvedStep,
@@ -177,16 +149,17 @@ export const Slider = props => {
     orientation,
     value: isControlled ? normalized : undefined,
     defaultValue: !isControlled ? normalized : undefined,
-    onChange: values => onChange?.(formatOutput(values)),
-    onChangeEnd: values => onChangeAfter?.(formatOutput(values))
-  });
-  const [trackLayout, setTrackLayout] = React.useState({
+    onChange: handleStateChange,
+    onChangeEnd: handleStateChangeEnd
+  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
+  const state = useSliderState(sliderStateOptions);
+  const [trackLayout, setTrackLayout] = useState({
     width: 0,
     height: 0,
     x: 0,
     y: 0
   });
-  const handleTrackLayout = event => {
+  const handleTrackLayout = useCallback(event => {
     const {
       layout
     } = event.nativeEvent;
@@ -198,9 +171,11 @@ export const Slider = props => {
     };
     setTrackLayout(prev => isSameLayout(prev, next) ? prev : next);
     if (Platform.OS !== 'web' || typeof requestAnimationFrame === 'undefined') return;
-    requestAnimationFrame(() => {
+    if (measureRafRef.current != null) return;
+    measureRafRef.current = requestAnimationFrame(() => {
+      measureRafRef.current = null;
       const node = trackRef.current;
-      if (!node || !isFunction(node.measureInWindow)) return;
+      if (!node?.measureInWindow) return;
       node.measureInWindow((x, y, width, height) => {
         const measured = {
           width: Math.max(width, 1),
@@ -211,7 +186,15 @@ export const Slider = props => {
         setTrackLayout(prev => isSameLayout(prev, measured) ? prev : measured);
       });
     });
-  };
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') {
+        cancelAnimationFrame(measureRafRef.current);
+      }
+      measureRafRef.current = null;
+    };
+  }, []);
   const reverseX = orientation === 'horizontal' ? reverse || isRTL() : reverse;
   const ariaReverse = orientation === 'horizontal' ? reverseX : reverse;
   const {
@@ -221,19 +204,21 @@ export const Slider = props => {
     isDisabled: ariaDisabled,
     'aria-label': ariaLabel ?? 'Slider'
   }, state, trackLayout, ariaReverse);
+  const trackPressableProps = trackProps;
   const {
     style: trackAriaStyle,
     onLayout: trackAriaOnLayout,
     ...restTrackProps
-  } = trackProps;
-  const handleTrackPress = event => {
+  } = trackPressableProps;
+  const handleTrackPress = useCallback(event => {
     if (ariaDisabled) return;
     if (!state.values.every((_, i) => !state.isThumbDragging(i))) return;
-    const nativeEvent = event?.nativeEvent;
-    const locationX = nativeEvent?.locationX;
-    const locationY = nativeEvent?.locationY;
-    const pageX = nativeEvent?.pageX;
-    const pageY = nativeEvent?.pageY;
+    const {
+      locationX,
+      locationY,
+      pageX,
+      pageY
+    } = event.nativeEvent;
     const localX = isFiniteNumber(locationX) ? locationX : isFiniteNumber(pageX) ? pageX - (trackLayout.x ?? 0) : 0;
     const localY = isFiniteNumber(locationY) ? locationY : isFiniteNumber(pageY) ? pageY - (trackLayout.y ?? 0) : 0;
     const size = orientation === 'vertical' ? trackLayout.height : trackLayout.width;
@@ -244,45 +229,74 @@ export const Slider = props => {
     const closestThumb = state.values.reduce((best, v, i) => Math.abs(v - value) < Math.abs(state.values[best] - value) ? i : best, 0);
     if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {
       ;
-      event?.preventDefault?.();
+      event.preventDefault?.();
       state.setFocusedThumb(closestThumb);
       state.setThumbDragging(closestThumb, true);
       state.setThumbValue(closestThumb, value);
       state.setThumbDragging(closestThumb, false);
     }
-  };
+  }, [ariaDisabled, orientation, reverse, reverseX, state, trackLayout.height, trackLayout.width, trackLayout.x, trackLayout.y]);
+  const {
+    interactionProps: trackInteractionProps
+  } = useAriaPress({
+    disabled: ariaDisabled,
+    onPress: handleTrackPress,
+    extraProps: restTrackProps
+  });
   const currentValue = formatOutput(state.values);
-  const currentValueRef = React.useRef(currentValue);
+  const currentValueRef = useRef(currentValue);
   currentValueRef.current = currentValue;
-  const dragStartedRef = React.useRef([]);
-  const dragStartValueRef = React.useRef([]);
-  const moveRafIdRef = React.useRef([]);
-  const movePendingArgsRef = React.useRef([]);
-  const enhanceHandlers = React.useCallback((handlers, index) => {
+  const dragStartedRef = useRef([]);
+  const dragStartValueRef = useRef([]);
+  const moveRafIdRef = useRef([]);
+  const movePendingArgsRef = useRef([]);
+  const enhancedHandlersCacheRef = useRef(new WeakMap());
+  useEffect(() => {
+    enhancedHandlersCacheRef.current = new WeakMap();
+  }, [onDragStart, onDragEnd]);
+  useEffect(() => {
+    return () => {
+      const cancel = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : undefined;
+      if (!cancel) return;
+      for (const id of moveRafIdRef.current) {
+        if (id != null) cancel(id);
+      }
+      moveRafIdRef.current = [];
+      movePendingArgsRef.current = [];
+    };
+  }, []);
+  const enhanceHandlers = useCallback((handlers, index) => {
     if (!handlers) return handlers;
     if (!onDragStart && !onDragEnd) {
       return handlers;
     }
-    const startKeys = ['onResponderGrant', 'onPanResponderGrant'];
-    const moveKeys = ['onResponderMove', 'onPanResponderMove'];
-    const endKeys = ['onResponderRelease', 'onResponderTerminate', 'onPanResponderRelease', 'onPanResponderTerminate'];
-    const hasAny = startKeys.some(k => isFunction(handlers[k])) || moveKeys.some(k => isFunction(handlers[k])) || endKeys.some(k => isFunction(handlers[k]));
+    const cached = enhancedHandlersCacheRef.current.get(handlers);
+    const found = cached?.get(index);
+    if (found) return found;
+    const hasAny = START_KEYS.some(k => isFunction(handlers[k])) || MOVE_KEYS.some(k => isFunction(handlers[k])) || END_KEYS.some(k => isFunction(handlers[k]));
     if (!hasAny) return handlers;
     const wrapped = {
       ...handlers
     };
-    for (const key of moveKeys) {
+    const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : undefined;
+    const caf = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : undefined;
+    for (const key of MOVE_KEYS) {
       const original = wrapped[key];
       if (!isFunction(original)) continue;
+      const originalFn = original;
       wrapped[key] = (...args) => {
+        if (!raf) {
+          originalFn(...args);
+          return;
+        }
         movePendingArgsRef.current[index] = args;
         if (moveRafIdRef.current[index] != null) return;
-        moveRafIdRef.current[index] = requestAnimationFrame(() => {
+        moveRafIdRef.current[index] = raf(() => {
           moveRafIdRef.current[index] = null;
           const pending = movePendingArgsRef.current[index];
           if (!pending) return;
           movePendingArgsRef.current[index] = null;
-          original(...pending);
+          originalFn(...pending);
         });
       };
     }
@@ -290,7 +304,10 @@ export const Slider = props => {
       if (!callback) return;
       const original = wrapped[key];
       wrapped[key] = (...args) => {
-        original?.(...args);
+        if (isFunction(original)) {
+          ;
+          original(...args);
+        }
         callback(args[0]);
       };
     };
@@ -299,16 +316,19 @@ export const Slider = props => {
       const original = wrapped[key];
       wrapped[key] = (...args) => {
         callback(args[0]);
-        original?.(...args);
+        if (isFunction(original)) {
+          ;
+          original(...args);
+        }
       };
     };
-    for (const key of startKeys) {
+    for (const key of START_KEYS) {
       wrapAfter(key, () => {
         dragStartedRef.current[index] = false;
         dragStartValueRef.current[index] = currentValueRef.current;
       });
     }
-    for (const key of moveKeys) {
+    for (const key of MOVE_KEYS) {
       wrapBefore(key, event => {
         if (!dragStartedRef.current[index]) {
           dragStartedRef.current[index] = true;
@@ -323,86 +343,101 @@ export const Slider = props => {
         onDragEnd?.(event, currentValueRef.current);
       }
       const rafId = moveRafIdRef.current[index];
-      if (rafId != null) {
-        cancelAnimationFrame(rafId);
+      if (rafId != null && caf) {
+        caf(rafId);
         moveRafIdRef.current[index] = null;
       }
       movePendingArgsRef.current[index] = null;
     };
-    for (const key of endKeys) {
+    for (const key of END_KEYS) {
       wrapAfter(key, emitEnd);
     }
+    const map = cached ?? new Map();
+    map.set(index, wrapped);
+    if (!cached) {
+      enhancedHandlersCacheRef.current.set(handlers, map);
+    }
     return wrapped;
   }, [onDragStart, onDragEnd]);
   const values = state.values;
-  const thumbPercents = values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100);
-  const thumbVisualPercents = thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent);
-  const first = thumbVisualPercents[0] ?? 0;
-  const second = thumbVisualPercents[1] ?? first;
-  const activeRange = range && thumbVisualPercents.length > 1 ? {
-    offset: Math.min(first, second),
-    size: Math.max(first, second) - Math.min(first, second)
-  } : (orientation === 'horizontal' ? !reverseX : reverse) ? {
-    offset: 0,
-    size: first
-  } : {
-    offset: first,
-    size: 100 - first
-  };
-  const activeTrackStyle = {
-    ...(orientation === 'vertical' ? {
-      left: 0,
-      width: '100%'
+  const thumbPercents = useMemo(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
+  const thumbVisualPercents = useMemo(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
+  const activeRange = useMemo(() => {
+    const first = thumbVisualPercents[0] ?? 0;
+    const second = thumbVisualPercents[1] ?? first;
+    return range && thumbVisualPercents.length > 1 ? {
+      offset: Math.min(first, second),
+      size: Math.max(first, second) - Math.min(first, second)
+    } : (orientation === 'horizontal' ? !reverseX : reverse) ? {
+      offset: 0,
+      size: first
     } : {
-      top: 0,
-      height: '100%'
-    }),
-    [orientation === 'vertical' ? 'height' : 'width']: `${Math.max(activeRange.size, 0)}%`,
-    [orientation === 'vertical' ? 'top' : 'left']: `${Math.max(activeRange.offset, 0)}%`,
-    backgroundColor: resolvedActiveColor,
-    borderRadius: tokens.track.radius
-  };
-  const trackBaseStyle = orientation === 'vertical' ? [styles.trackVertical, {
+      offset: first,
+      size: 100 - first
+    };
+  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
+  const activeTrackStyle = useMemo(() => {
+    const next = {
+      backgroundColor: resolvedActiveColor,
+      borderRadius: tokens.track.radius
+    };
+    if (orientation === 'vertical') {
+      next.left = 0;
+      next.width = '100%';
+      next.height = `${Math.max(activeRange.size, 0)}%`;
+      next.top = `${Math.max(activeRange.offset, 0)}%`;
+    } else {
+      next.top = 0;
+      next.height = '100%';
+      next.width = `${Math.max(activeRange.size, 0)}%`;
+      next.left = `${Math.max(activeRange.offset, 0)}%`;
+    }
+    return next;
+  }, [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, tokens.track.radius]);
+  const trackBaseStyle = useMemo(() => orientation === 'vertical' ? [styles.trackVertical, {
     width: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor,
     alignSelf: 'center'
   }] : [styles.trackHorizontal, {
     height: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor
-  }];
+  }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
   const isButtonFunction = isFunction(button);
   const sharedThumb = isButtonFunction ? button({
     value: currentValue
   }) : button ?? thumb;
   const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
   const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
-  const resolveThumbContent = (index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb;
-  const webGestureStyle = Platform.OS === 'web' ? {
+  const resolveThumbContent = useCallback((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
+  const webGestureStyle = useMemo(() => Platform.OS === 'web' ? {
     touchAction: orientation === 'horizontal' ? 'pan-y' : 'none',
     userSelect: 'none'
-  } : undefined;
+  } : undefined, [orientation]);
+  const baseTrackPressableStyle = useMemo(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
+  const trackPressableStyleFn = useCallback(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
+  const trackPressableStyle = useMemo(() => trackAriaStyle && isFunction(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle], [baseTrackPressableStyle, trackAriaStyle, trackPressableStyleFn]);
+  const containerStyles = useMemo(() => [styles.container, {
+    paddingVertical: tokens.spacing.containerPaddingVertical
+  }, orientation === 'vertical' && [styles.verticalContainer, {
+    minHeight: tokens.layout.verticalMinHeight,
+    width: tokens.layout.verticalWidth
+  }], disabled && {
+    opacity: tokens.states.disabledOpacity
+  }, style], [disabled, orientation, style, tokens.layout.verticalMinHeight, tokens.layout.verticalWidth, tokens.spacing.containerPaddingVertical, tokens.states.disabledOpacity]);
   return /*#__PURE__*/React.createElement(View, _extends({
-    style: [styles.container, {
-      paddingVertical: tokens.spacing.containerPaddingVertical
-    }, orientation === 'vertical' && [styles.verticalContainer, {
-      minHeight: tokens.layout.verticalMinHeight,
-      width: tokens.layout.verticalWidth
-    }], disabled && {
-      opacity: tokens.states.disabledOpacity
-    }, style],
+    style: containerStyles,
     onLayout: containerOnLayout
   }, rest), /*#__PURE__*/React.createElement(View, {
     style: [styles.trackWrapper, orientation === 'vertical' && styles.trackWrapperVertical]
   }, /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: trackRef
-  }, restTrackProps, {
-    onPress: handleTrackPress,
+  }, trackInteractionProps, {
     disabled: ariaDisabled,
     onLayout: event => {
       handleTrackLayout(event);
       trackAriaOnLayout?.(event);
     },
-    style: [styles.trackPressable, orientation === 'vertical' && styles.trackPressableVertical, webGestureStyle, trackAriaStyle]
+    style: trackPressableStyle
   }), /*#__PURE__*/React.createElement(View, {
     style: [styles.trackBase, {
       borderRadius: tokens.track.radius

package/dist/es/components/slider/utils.js

@@ -0,0 +1,49 @@
+import { clamp, isFiniteNumber, isFunction } from '../../utils';
+export const clampValue = (value, min, max) => {
+  if (!isFiniteNumber(value)) {
+    return min;
+  }
+  return clamp(value, min, max);
+};
+export const isSameLayout = (a, b) => a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
+export const normalizeValue = (value, range, min, max) => {
+  if (range) {
+    const raw = Array.isArray(value) ? value : isFiniteNumber(value) ? [min, value] : [min, min];
+    const first = clampValue(raw[0], min, max);
+    const second = clampValue(raw[1] ?? raw[0], min, max);
+    return first <= second ? [first, second] : [second, first];
+  }
+  const single = Array.isArray(value) ? value[0] : value;
+  return [clampValue(single, min, max)];
+};
+export const toSliderValue = (values, range, fallback) => {
+  if (range) {
+    const start = values[0] ?? fallback;
+    const end = values[1] ?? start;
+    return [start, end];
+  }
+  return values[0] ?? fallback;
+};
+export const createAccessibilityProps = inputProps => {
+  if (!inputProps) return {};
+  const {
+    role,
+    ['aria-value']: ariaValue,
+    accessibilityActions,
+    onAccessibilityAction,
+    disabled
+  } = inputProps;
+  return {
+    accessible: true,
+    accessibilityRole: role ?? 'adjustable',
+    accessibilityValue: ariaValue,
+    accessibilityActions,
+    onAccessibilityAction,
+    accessibilityState: {
+      disabled
+    }
+  };
+};
+export const defaultNumberFormatter = typeof Intl !== 'undefined' && isFunction(Intl.NumberFormat) ? new Intl.NumberFormat() : {
+  format: val => String(val)
+};