react-native-system-ui 1.0.2 → 1.0.4

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

@@ -1,596 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { useSlider, useSliderThumb } from '@react-native-aria/slider';
-import { isRTL } from '@react-native-aria/utils';
-import { useSliderState } from '@react-stately/slider';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, Pressable, StyleSheet, View } from 'react-native';
-import { useSliderTokens } from './tokens';
-import { parseNumber } from '../../utils/number';
-import { createHairlineView } from '../../utils/hairline';
-import { clamp, renderTextOrNode } from '../../utils';
-import { isFunction, isFiniteNumber, isText } from '../../utils/validate';
-import { useAriaPress } from '../../hooks';
-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 = isFiniteNumber(raw[0]) ? clamp(raw[0], min, max) : min;
-    const second = isFiniteNumber(raw[1] ?? raw[0]) ? clamp(raw[1] ?? raw[0], min, max) : min;
-    return first <= second ? [first, second] : [second, first];
-  }
-  const single = Array.isArray(value) ? value[0] : value;
-  return [isFiniteNumber(single) ? clamp(single, min, max) : min];
-};
-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)
-};
-const START_KEYS = ['onResponderGrant', 'onPanResponderGrant'];
-const MOVE_KEYS = ['onResponderMove', 'onPanResponderMove'];
-const END_KEYS = ['onResponderRelease', 'onResponderTerminate', 'onPanResponderRelease', 'onPanResponderTerminate'];
-const useTrackLayout = () => {
-  const trackRef = useRef(null),
-    measureRafRef = useRef(null),
-    [trackLayout, setTrackLayout] = useState({
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0
-    });
-  const handleTrackLayout = useCallback(event => {
-    const {
-      layout
-    } = event.nativeEvent;
-    const next = {
-      width: Math.max(layout.width, 1),
-      height: Math.max(layout.height, 1),
-      x: layout.x ?? 0,
-      y: layout.y ?? 0
-    };
-    setTrackLayout(prev => isSameLayout(prev, next) ? prev : next);
-    if (Platform.OS !== 'web' || typeof requestAnimationFrame === 'undefined') return;
-    if (measureRafRef.current != null) return;
-    measureRafRef.current = requestAnimationFrame(() => {
-      measureRafRef.current = null;
-      const node = trackRef.current;
-      if (!node?.measureInWindow) return;
-      node.measureInWindow((x, y, width, height) => {
-        const measured = {
-          width: Math.max(width, 1),
-          height: Math.max(height, 1),
-          x,
-          y
-        };
-        setTrackLayout(prev => isSameLayout(prev, measured) ? prev : measured);
-      });
-    });
-  }, []);
-  useEffect(() => {
-    return () => {
-      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(measureRafRef.current);
-      measureRafRef.current = null;
-    };
-  }, []);
-  return {
-    trackRef,
-    trackLayout,
-    handleTrackLayout
-  };
-};
-const ThumbNode = /*#__PURE__*/React.memo(({
-  index,
-  orientation,
-  ariaReverse,
-  trackLayout,
-  isDisabled,
-  state,
-  size,
-  activeColor,
-  content,
-  visualPercent,
-  thumbBackgroundColor,
-  thumbElevation,
-  indicatorSize,
-  indicatorColor,
-  webGestureStyle,
-  enhanceHandlers
-}) => {
-  const inputRef = useRef(null);
-  const {
-    thumbProps,
-    inputProps
-  } = useSliderThumb({
-    index,
-    trackLayout,
-    inputRef,
-    isDisabled,
-    orientation
-  }, state, ariaReverse);
-  const rawThumbViewProps = thumbProps;
-  const handlers = enhanceHandlers(rawThumbViewProps, index) ?? rawThumbViewProps ?? {};
-  const translate = -size / 2;
-  const thumbStyle = {
-    width: size,
-    height: size,
-    borderRadius: size / 2,
-    borderColor: activeColor,
-    transform: [{
-      translateX: translate
-    }, {
-      translateY: translate
-    }],
-    ...(orientation === 'vertical' ? {
-      top: `${visualPercent}%`,
-      left: '50%'
-    } : {
-      left: `${visualPercent}%`,
-      top: '50%'
-    }),
-    ...(!content ? {
-      backgroundColor: thumbBackgroundColor,
-      elevation: thumbElevation
-    } : {})
-  };
-  const indicatorStyle = {
-    width: indicatorSize,
-    height: indicatorSize,
-    borderRadius: indicatorSize / 2,
-    backgroundColor: indicatorColor
-  };
-  const accessibilityProps = createAccessibilityProps(inputProps);
-  return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
-    pointerEvents: isDisabled ? 'none' : 'auto',
-    style: [content ? S.thw : S.t, webGestureStyle, thumbStyle]
-  }), content != null ? isText(content) ? renderTextOrNode(content, []) : content : /*#__PURE__*/React.createElement(View, {
-    style: indicatorStyle
-  }), !content && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'all',
-      color: activeColor,
-      borderRadius: size / 2
-    })
-  }));
-});
-ThumbNode.displayName = 'ThumbNode';
-const SliderImpl = props => {
-  const {
-    value: valueProp,
-    min = 0,
-    max = 100,
-    step = 1,
-    range = false,
-    vertical = false,
-    reverse = false,
-    disabled = false,
-    readOnly = false,
-    activeColor,
-    inactiveColor,
-    barHeight,
-    trackHeight,
-    buttonSize,
-    thumbSize,
-    tokensOverride,
-    button,
-    leftButton,
-    rightButton,
-    thumb,
-    leftThumb,
-    rightThumb,
-    ariaLabel,
-    onChange,
-    onChangeAfter,
-    onDragStart,
-    onDragEnd,
-    style,
-    onLayout: containerOnLayout,
-    ...rest
-  } = props;
-  const tokens = useSliderTokens(tokensOverride);
-  const orientation = vertical ? 'vertical' : 'horizontal';
-  const {
-    trackRef,
-    trackLayout,
-    handleTrackLayout
-  } = useTrackLayout();
-  const resolvedMin = parseNumber(min, 0),
-    resolvedMax = parseNumber(max, 100),
-    resolvedStepRaw = parseNumber(step, 1),
-    resolvedStep = resolvedStepRaw > 0 ? resolvedStepRaw : 1;
-  const resolvedTrackHeight = Math.max(0, parseNumber(barHeight ?? trackHeight, tokens.track.height));
-  const resolvedThumbSize = Math.max(0, parseNumber(buttonSize ?? thumbSize, tokens.thumb.size));
-  const ariaDisabled = disabled || readOnly;
-  const resolvedActiveColor = activeColor ?? tokens.colors.active;
-  const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactive;
-  const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
-  const normalized = normalizeValue(valueProp, range, resolvedMin, resolvedMax);
-  const isControlled = valueProp !== undefined;
-  const onChangeRef = useRef(onChange),
-    onChangeAfterRef = useRef(onChangeAfter),
-    onDragStartRef = useRef(onDragStart),
-    onDragEndRef = useRef(onDragEnd);
-  onChangeRef.current = onChange;
-  onChangeAfterRef.current = onChangeAfter;
-  onDragStartRef.current = onDragStart;
-  onDragEndRef.current = onDragEnd;
-  const formatOutput = useCallback(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
-  const onStateChange = useCallback(values => {
-    onChangeRef.current?.(formatOutput(values));
-  }, [formatOutput]);
-  const onStateChangeEnd = useCallback(values => {
-    onChangeAfterRef.current?.(formatOutput(values));
-  }, [formatOutput]);
-  const sliderStateOptions = useMemo(() => ({
-    minValue: resolvedMin,
-    maxValue: resolvedMax,
-    step: resolvedStep,
-    isDisabled: ariaDisabled,
-    numberFormatter: defaultNumberFormatter,
-    orientation,
-    value: isControlled ? normalized : undefined,
-    defaultValue: !isControlled ? normalized : undefined,
-    onChange: onStateChange,
-    onChangeEnd: onStateChangeEnd
-  }), [ariaDisabled, onStateChange, onStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
-  const state = useSliderState(sliderStateOptions);
-  const resolvedReverseX = orientation === 'horizontal' ? reverse || isRTL() : reverse;
-  const ariaReverse = orientation === 'horizontal' ? resolvedReverseX : reverse;
-  const {
-    trackProps
-  } = useSlider({
-    orientation,
-    isDisabled: ariaDisabled,
-    'aria-label': ariaLabel ?? 'Slider'
-  }, state, trackLayout, ariaReverse);
-  const trackPressableProps = trackProps;
-  const {
-    style: trackAriaStyle,
-    onLayout: trackAriaOnLayout,
-    ...remainingTrackProps
-  } = trackPressableProps;
-  const onCombinedTrackLayout = useCallback(event => {
-    handleTrackLayout(event);
-    trackAriaOnLayout?.(event);
-  }, [handleTrackLayout, trackAriaOnLayout]);
-  const onTrack = useCallback(event => {
-    if (ariaDisabled) return;
-    if (!state.values.every((_, i) => !state.isThumbDragging(i))) return;
-    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;
-    const local = orientation === 'vertical' ? localY : localX;
-    const raw = local / Math.max(size, 1);
-    const percent = orientation === 'vertical' ? reverse ? raw : 1 - raw : resolvedReverseX ? 1 - raw : raw;
-    const value = state.getPercentValue(Math.min(1, Math.max(0, percent)));
-    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?.();
-      state.setFocusedThumb(closestThumb);
-      state.setThumbDragging(closestThumb, true);
-      state.setThumbValue(closestThumb, value);
-      state.setThumbDragging(closestThumb, false);
-    }
-  }, [ariaDisabled, orientation, reverse, resolvedReverseX, state, trackLayout.height, trackLayout.width, trackLayout.x, trackLayout.y]);
-  const {
-    interactionProps: trackInteractionProps
-  } = useAriaPress({
-    disabled: ariaDisabled,
-    onPress: onTrack,
-    extraProps: remainingTrackProps
-  });
-  const currentValue = formatOutput(state.values);
-  const currentValueRef = useRef(currentValue),
-    dragStartRef = useRef([]),
-    dragStartValueRef = useRef([]),
-    moveRafIdRef = useRef([]),
-    movePendingArgsRef = useRef([]),
-    enhanceHandlersCacheRef = useRef(new WeakMap());
-  currentValueRef.current = currentValue;
-  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 (!onDragStartRef.current && !onDragEndRef.current) return handlers;
-    const cached = enhanceHandlersCacheRef.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
-    };
-    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] = raf(() => {
-          moveRafIdRef.current[index] = null;
-          const pending = movePendingArgsRef.current[index];
-          if (!pending) return;
-          movePendingArgsRef.current[index] = null;
-          originalFn(...pending);
-        });
-      };
-    }
-    const wrapAfter = (key, callback) => {
-      if (!callback) return;
-      const original = wrapped[key];
-      wrapped[key] = (...args) => {
-        if (isFunction(original)) {
-          ;
-          original(...args);
-        }
-        callback(args[0]);
-      };
-    };
-    const wrapBefore = (key, callback) => {
-      if (!callback) return;
-      const original = wrapped[key];
-      wrapped[key] = (...args) => {
-        callback(args[0]);
-        if (isFunction(original)) {
-          ;
-          original(...args);
-        }
-      };
-    };
-    for (const key of START_KEYS) {
-      wrapAfter(key, () => {
-        dragStartRef.current[index] = false;
-        dragStartValueRef.current[index] = currentValueRef.current;
-      });
-    }
-    for (const key of MOVE_KEYS) {
-      wrapBefore(key, event => {
-        if (!dragStartRef.current[index]) {
-          dragStartRef.current[index] = true;
-          onDragStartRef.current?.(event, dragStartValueRef.current[index] ?? currentValueRef.current);
-        }
-      });
-    }
-    const emitEnd = event => {
-      if (dragStartRef.current[index]) {
-        dragStartRef.current[index] = false;
-        dragStartValueRef.current[index] = undefined;
-        onDragEndRef.current?.(event, currentValueRef.current);
-      }
-      const rafId = moveRafIdRef.current[index];
-      if (rafId != null && caf) {
-        caf(rafId);
-        moveRafIdRef.current[index] = null;
-      }
-      movePendingArgsRef.current[index] = null;
-    };
-    for (const key of END_KEYS) {
-      wrapAfter(key, emitEnd);
-    }
-    const map = cached ?? new Map();
-    map.set(index, wrapped);
-    if (!cached) {
-      enhanceHandlersCacheRef.current.set(handlers, map);
-    }
-    return wrapped;
-  }, []);
-  const values = state.values;
-  const thumbPercent = useMemo(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
-  const thumbVisualPercent = useMemo(() => thumbPercent.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : resolvedReverseX ? 100 - percent : percent), [orientation, reverse, resolvedReverseX, thumbPercent]);
-  const activeRange = useMemo(() => {
-    const first = thumbVisualPercent[0] ?? 0,
-      second = thumbVisualPercent[1] ?? first;
-    return range && thumbVisualPercent.length > 1 ? {
-      offset: Math.min(first, second),
-      size: Math.max(first, second) - Math.min(first, second)
-    } : (orientation === 'horizontal' ? !resolvedReverseX : reverse) ? {
-      offset: 0,
-      size: first
-    } : {
-      offset: first,
-      size: 100 - first
-    };
-  }, [orientation, range, reverse, resolvedReverseX, thumbVisualPercent]);
-  const {
-    track: {
-      radius: trackRadius
-    }
-  } = tokens;
-  const activeTrackStyle = useMemo(() => ({
-    backgroundColor: resolvedActiveColor,
-    borderRadius: trackRadius,
-    ...(orientation === 'vertical' ? {
-      left: 0,
-      width: '100%',
-      height: `${Math.max(activeRange.size, 0)}%`,
-      top: `${Math.max(activeRange.offset, 0)}%`
-    } : {
-      top: 0,
-      height: '100%',
-      width: `${Math.max(activeRange.size, 0)}%`,
-      left: `${Math.max(activeRange.offset, 0)}%`
-    })
-  }), [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, trackRadius]);
-  const trackBackgroundStyle = useMemo(() => orientation === 'vertical' ? [S.tv, {
-    width: resolvedTrackHeight,
-    backgroundColor: resolvedInactiveColor,
-    alignSelf: 'center'
-  }] : [S.th, {
-    height: resolvedTrackHeight,
-    backgroundColor: resolvedInactiveColor
-  }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
-  const isButtonFunction = isFunction(button);
-  const selectedThumb = isButtonFunction ? button({
-    value: currentValue
-  }) : button ?? thumb;
-  const leftThumbContent = leftButton ?? leftThumb ?? selectedThumb;
-  const rightThumbContent = rightButton ?? rightThumb ?? selectedThumb;
-  const resolveThumbContent = useCallback((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : selectedThumb, [leftThumbContent, rightThumbContent, selectedThumb]);
-  const webGestureStyle = Platform.OS === 'web' ? {
-    touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
-    userSelect: 'none'
-  } : undefined;
-  const baseTrackPressableStyle = [S.tp, orientation === 'vertical' ? S.tpv : null, webGestureStyle];
-  const trackPressableStyleFn = useCallback(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
-  const trackPressableStyle = trackAriaStyle && isFunction(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle];
-  const {
-    spacing: {
-      containerPaddingVertical
-    },
-    layout: {
-      verticalMinHeight,
-      verticalWidth
-    },
-    states: {
-      disabledOpacity
-    }
-  } = tokens;
-  const containerStyle = [S.c, {
-    paddingVertical: containerPaddingVertical
-  }, orientation === 'vertical' && [S.vc, {
-    minHeight: verticalMinHeight,
-    width: verticalWidth
-  }], disabled && {
-    opacity: disabledOpacity
-  }, style];
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: containerStyle,
-    onLayout: containerOnLayout
-  }, rest), /*#__PURE__*/React.createElement(View, {
-    style: [S.tw, orientation === 'vertical' && S.twv]
-  }, /*#__PURE__*/React.createElement(Pressable, _extends({
-    ref: trackRef
-  }, trackInteractionProps, {
-    disabled: ariaDisabled,
-    onLayout: onCombinedTrackLayout,
-    style: trackPressableStyle
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [S.tb, {
-      borderRadius: trackRadius
-    }, ...trackBackgroundStyle]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [S.a, activeTrackStyle]
-  }))), values.map((_, index) => /*#__PURE__*/React.createElement(ThumbNode, {
-    key: `thumb-${index}`,
-    index: index,
-    orientation: orientation,
-    ariaReverse: ariaReverse,
-    trackLayout: trackLayout,
-    isDisabled: ariaDisabled,
-    state: state,
-    size: resolvedThumbSize,
-    activeColor: resolvedActiveColor,
-    content: resolveThumbContent(index, values.length),
-    visualPercent: thumbVisualPercent[index] ?? 0,
-    thumbBackgroundColor: tokens.colors.thumbBackground,
-    thumbElevation: tokens.thumb.elevation,
-    indicatorSize: tokens.thumb.indicatorSize,
-    indicatorColor: tokens.colors.thumbIndicator,
-    webGestureStyle: webGestureStyle,
-    enhanceHandlers: enhanceHandlers
-  }))));
-};
-const S = StyleSheet.create({
-  c: {
-    position: 'relative',
-    justifyContent: 'center',
-    width: '100%'
-  },
-  vc: {
-    height: '100%',
-    alignItems: 'center',
-    paddingVertical: 0
-  },
-  tw: {
-    width: '100%',
-    justifyContent: 'center',
-    position: 'relative'
-  },
-  twv: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%'
-  },
-  tp: {
-    width: '100%',
-    justifyContent: 'center'
-  },
-  tpv: {
-    flex: 1,
-    alignItems: 'center'
-  },
-  tb: {
-    overflow: 'hidden',
-    position: 'relative'
-  },
-  th: {
-    width: '100%'
-  },
-  tv: {
-    height: '100%'
-  },
-  a: {
-    position: 'absolute'
-  },
-  t: {
-    position: 'absolute',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  thw: {
-    position: 'absolute',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export const Slider = /*#__PURE__*/React.memo(SliderImpl);
-export default Slider;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}import{useSlider,useSliderThumb}from"@react-native-aria/slider";import{isRTL}from"@react-native-aria/utils";import{useSliderState}from"@react-stately/slider";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,View}from"react-native";import{useSliderTokens}from"./tokens";import{parseNumber}from"../../utils/number";import{createHairlineView}from"../../utils/hairline";import{clamp,renderTextOrNode}from"../../utils";import{isFunction,isFiniteNumber,isText}from"../../utils/validate";import{useAriaPress}from"../../hooks";const isSameLayout=(e,t)=>e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y,normalizeValue=(e,t,r,n)=>{if(t){const t=Array.isArray(e)?e:isFiniteNumber(e)?[r,e]:[r,r],i=isFiniteNumber(t[0])?clamp(t[0],r,n):r,a=isFiniteNumber(t[1]??t[0])?clamp(t[1]??t[0],r,n):r;return i<=a?[i,a]:[a,i]}const i=Array.isArray(e)?e[0]:e;return[isFiniteNumber(i)?clamp(i,r,n):r]},toSliderValue=(e,t,r)=>{if(t){const t=e[0]??r;return[t,e[1]??t]}return e[0]??r},createAccessibilityProps=e=>{if(!e)return{};const{role:t,"aria-value":r,accessibilityActions:n,onAccessibilityAction:i,disabled:a}=e;return{accessible:!0,accessibilityRole:t??"adjustable",accessibilityValue:r,accessibilityActions:n,onAccessibilityAction:i,accessibilityState:{disabled:a}}},defaultNumberFormatter="undefined"!=typeof Intl&&isFunction(Intl.NumberFormat)?new Intl.NumberFormat:{format:e=>String(e)},START_KEYS=["onResponderGrant","onPanResponderGrant"],MOVE_KEYS=["onResponderMove","onPanResponderMove"],END_KEYS=["onResponderRelease","onResponderTerminate","onPanResponderRelease","onPanResponderTerminate"],useTrackLayout=()=>{const e=useRef(null),t=useRef(null),[r,n]=useState({width:0,height:0,x:0,y:0}),i=useCallback(r=>{const{layout:i}=r.nativeEvent,a={width:Math.max(i.width,1),height:Math.max(i.height,1),x:i.x??0,y:i.y??0};n(e=>isSameLayout(e,a)?e:a),"web"===Platform.OS&&"undefined"!=typeof requestAnimationFrame&&null==t.current&&(t.current=requestAnimationFrame(()=>{t.current=null;const r=e.current;r?.measureInWindow&&r.measureInWindow((e,t,r,i)=>{const a={width:Math.max(r,1),height:Math.max(i,1),x:e,y:t};n(e=>isSameLayout(e,a)?e:a)})}))},[]);return useEffect(()=>()=>{null!=t.current&&"function"==typeof cancelAnimationFrame&&cancelAnimationFrame(t.current),t.current=null},[]),{trackRef:e,trackLayout:r,handleTrackLayout:i}},ThumbNode=React.memo(({index:e,orientation:t,ariaReverse:r,trackLayout:n,isDisabled:i,state:a,size:o,activeColor:s,content:u,visualPercent:c,thumbBackgroundColor:l,thumbElevation:m,indicatorSize:d,indicatorColor:h,webGestureStyle:b,enhanceHandlers:f})=>{const p=useRef(null),{thumbProps:v,inputProps:y}=useSliderThumb({index:e,trackLayout:n,inputRef:p,isDisabled:i,orientation:t},a,r),g=v,R=f(g,e)??g??{},w=-o/2,x={width:o,height:o,borderRadius:o/2,borderColor:s,transform:[{translateX:w},{translateY:w}],..."vertical"===t?{top:`${c}%`,left:"50%"}:{left:`${c}%`,top:"50%"},...u?{}:{backgroundColor:l,elevation:m}},k={width:d,height:d,borderRadius:d/2,backgroundColor:h},E=createAccessibilityProps(y);return React.createElement(View,_extends({},R,E,{pointerEvents:i?"none":"auto",style:[u?S.thw:S.t,b,x]}),null!=u?isText(u)?renderTextOrNode(u,[]):u:React.createElement(View,{style:k}),!u&&React.createElement(View,{style:createHairlineView({position:"all",color:s,borderRadius:o/2})}))});ThumbNode.displayName="ThumbNode";const SliderImpl=e=>{const{value:t,min:r=0,max:n=100,step:i=1,range:a=!1,vertical:o=!1,reverse:s=!1,disabled:u=!1,readOnly:c=!1,activeColor:l,inactiveColor:m,barHeight:d,trackHeight:h,buttonSize:b,thumbSize:f,tokensOverride:p,button:v,leftButton:y,rightButton:g,thumb:R,leftThumb:w,rightThumb:x,ariaLabel:k,onChange:E,onChangeAfter:F,onDragStart:M,onDragEnd:C,style:T,onLayout:A,...N}=e,V=useSliderTokens(p),P=o?"vertical":"horizontal",{trackRef:z,trackLayout:L,handleTrackLayout:_}=useTrackLayout(),D=parseNumber(r,0),O=parseNumber(n,100),I=parseNumber(i,1),Y=I>0?I:1,K=Math.max(0,parseNumber(d??h,V.track.height)),j=Math.max(0,parseNumber(b??f,V.thumb.size)),H=u||c,$=l??V.colors.active,B=m??V.colors.inactive,q=Math.max(O-D,1e-5),G=normalizeValue(t,a,D,O),W=void 0!==t,X=useRef(E),J=useRef(F),Q=useRef(M),U=useRef(C);X.current=E,J.current=F,Q.current=M,U.current=C;const Z=useCallback(e=>toSliderValue(e,a,D),[a,D]),ee=useCallback(e=>{X.current?.(Z(e))},[Z]),te=useCallback(e=>{J.current?.(Z(e))},[Z]),re=useMemo(()=>({minValue:D,maxValue:O,step:Y,isDisabled:H,numberFormatter:defaultNumberFormatter,orientation:P,value:W?G:void 0,defaultValue:W?void 0:G,onChange:ee,onChangeEnd:te}),[H,ee,te,W,G,P,O,D,Y]),ne=useSliderState(re),ie="horizontal"===P?s||isRTL():s,ae="horizontal"===P?ie:s,{trackProps:oe}=useSlider({orientation:P,isDisabled:H,"aria-label":k??"Slider"},ne,L,ae),se=oe,{style:ue,onLayout:ce,...le}=se,me=useCallback(e=>{_(e),ce?.(e)},[_,ce]),de=useCallback(e=>{if(H)return;if(!ne.values.every((e,t)=>!ne.isThumbDragging(t)))return;const{locationX:t,locationY:r,pageX:n,pageY:i}=e.nativeEvent,a=isFiniteNumber(t)?t:isFiniteNumber(n)?n-(L.x??0):0,o=isFiniteNumber(r)?r:isFiniteNumber(i)?i-(L.y??0):0,u="vertical"===P?L.height:L.width,c=("vertical"===P?o:a)/Math.max(u,1),l="vertical"===P?s?c:1-c:ie?1-c:c,m=ne.getPercentValue(Math.min(1,Math.max(0,l))),d=ne.values.reduce((e,t,r)=>Math.abs(t-m)<Math.abs(ne.values[e]-m)?r:e,0);d>=0&&ne.isThumbEditable(d)&&(e.preventDefault?.(),ne.setFocusedThumb(d),ne.setThumbDragging(d,!0),ne.setThumbValue(d,m),ne.setThumbDragging(d,!1))},[H,P,s,ie,ne,L.height,L.width,L.x,L.y]),{interactionProps:he}=useAriaPress({disabled:H,onPress:de,extraProps:le}),be=Z(ne.values),fe=useRef(be),pe=useRef([]),ve=useRef([]),ye=useRef([]),ge=useRef([]),Se=useRef(new WeakMap);fe.current=be,useEffect(()=>()=>{const e="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;if(e){for(const t of ye.current)null!=t&&e(t);ye.current=[],ge.current=[]}},[]);const Re=useCallback((e,t)=>{if(!e)return e;if(!Q.current&&!U.current)return e;const r=Se.current.get(e),n=r?.get(t);if(n)return n;if(!(START_KEYS.some(t=>isFunction(e[t]))||MOVE_KEYS.some(t=>isFunction(e[t]))||END_KEYS.some(t=>isFunction(e[t]))))return e;const i={...e},a="function"==typeof requestAnimationFrame?requestAnimationFrame:void 0,o="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;for(const e of MOVE_KEYS){const r=i[e];if(!isFunction(r))continue;const n=r;i[e]=(...e)=>{a?(ge.current[t]=e,null==ye.current[t]&&(ye.current[t]=a(()=>{ye.current[t]=null;const e=ge.current[t];e&&(ge.current[t]=null,n(...e))}))):n(...e)}}const s=(e,t)=>{if(!t)return;const r=i[e];i[e]=(...e)=>{isFunction(r)&&r(...e),t(e[0])}},u=(e,t)=>{if(!t)return;const r=i[e];i[e]=(...e)=>{t(e[0]),isFunction(r)&&r(...e)}};for(const e of START_KEYS)s(e,()=>{pe.current[t]=!1,ve.current[t]=fe.current});for(const e of MOVE_KEYS)u(e,e=>{pe.current[t]||(pe.current[t]=!0,Q.current?.(e,ve.current[t]??fe.current))});const c=e=>{pe.current[t]&&(pe.current[t]=!1,ve.current[t]=void 0,U.current?.(e,fe.current));const r=ye.current[t];null!=r&&o&&(o(r),ye.current[t]=null),ge.current[t]=null};for(const e of END_KEYS)s(e,c);const l=r??new Map;return l.set(t,i),r||Se.current.set(e,l),i},[]),we=ne.values,xe=useMemo(()=>we.map(e=>((e??D)-D)/q*100),[D,q,we]),ke=useMemo(()=>xe.map(e=>"vertical"===P?s?e:100-e:ie?100-e:e),[P,s,ie,xe]),Ee=useMemo(()=>{const e=ke[0]??0,t=ke[1]??e;return a&&ke.length>1?{offset:Math.min(e,t),size:Math.max(e,t)-Math.min(e,t)}:("horizontal"===P?!ie:s)?{offset:0,size:e}:{offset:e,size:100-e}},[P,a,s,ie,ke]),{track:{radius:Fe}}=V,Me=useMemo(()=>({backgroundColor:$,borderRadius:Fe,..."vertical"===P?{left:0,width:"100%",height:`${Math.max(Ee.size,0)}%`,top:`${Math.max(Ee.offset,0)}%`}:{top:0,height:"100%",width:`${Math.max(Ee.size,0)}%`,left:`${Math.max(Ee.offset,0)}%`}}),[Ee.offset,Ee.size,P,$,Fe]),Ce=useMemo(()=>"vertical"===P?[S.tv,{width:K,backgroundColor:B,alignSelf:"center"}]:[S.th,{height:K,backgroundColor:B}],[P,B,K]),Te=isFunction(v)?v({value:be}):v??R,Ae=y??w??Te,Ne=g??x??Te,Ve=useCallback((e,t)=>t>1?0===e?Ae:Ne:Te,[Ae,Ne,Te]),Pe="web"===Platform.OS?{touchAction:"horizontal"===P?"pan-y":"pan-x",userSelect:"none"}:void 0,ze=[S.tp,"vertical"===P?S.tpv:null,Pe],Le=useCallback(e=>[ze,ue(e)],[ze,ue]),_e=ue&&isFunction(ue)?Le:[ze,ue],{spacing:{containerPaddingVertical:De},layout:{verticalMinHeight:Oe,verticalWidth:Ie},states:{disabledOpacity:Ye}}=V,Ke=[S.c,{paddingVertical:De},"vertical"===P&&[S.vc,{minHeight:Oe,width:Ie}],u&&{opacity:Ye},T];return React.createElement(View,_extends({style:Ke,onLayout:A},N),React.createElement(View,{style:[S.tw,"vertical"===P&&S.twv]},React.createElement(Pressable,_extends({ref:z},he,{disabled:H,onLayout:me,style:_e}),React.createElement(View,{style:[S.tb,{borderRadius:Fe},...Ce]},React.createElement(View,{style:[S.a,Me]}))),we.map((e,t)=>React.createElement(ThumbNode,{key:`thumb-${t}`,index:t,orientation:P,ariaReverse:ae,trackLayout:L,isDisabled:H,state:ne,size:j,activeColor:$,content:Ve(t,we.length),visualPercent:ke[t]??0,thumbBackgroundColor:V.colors.thumbBackground,thumbElevation:V.thumb.elevation,indicatorSize:V.thumb.indicatorSize,indicatorColor:V.colors.thumbIndicator,webGestureStyle:Pe,enhanceHandlers:Re}))))},S=StyleSheet.create({c:{position:"relative",justifyContent:"center",width:"100%"},vc:{height:"100%",alignItems:"center",paddingVertical:0},tw:{width:"100%",justifyContent:"center",position:"relative"},twv:{flex:1,justifyContent:"center",alignItems:"center",width:"100%"},tp:{width:"100%",justifyContent:"center"},tpv:{flex:1,alignItems:"center"},tb:{overflow:"hidden",position:"relative"},th:{width:"100%"},tv:{height:"100%"},a:{position:"absolute"},t:{position:"absolute",alignItems:"center",justifyContent:"center"},thw:{position:"absolute",alignItems:"center",justifyContent:"center"}});export const Slider=React.memo(SliderImpl);export default Slider;

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

@@ -1,2 +1 @@
-import { Slider } from './Slider';
-export default Slider;
+import{Slider}from"./Slider";export default Slider;

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

@@ -1,31 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createSliderTokens = foundations => {
-  return {
-    track: {
-      height: 2,
-      radius: foundations.radii.pill
-    },
-    thumb: {
-      size: foundations.spacing.lg + foundations.spacing.sm,
-      indicatorSize: foundations.spacing.sm,
-      elevation: 1
-    },
-    colors: {
-      active: foundations.palette.primary[500],
-      inactive: foundations.palette.default[300],
-      thumbBackground: '#ffffff',
-      thumbIndicator: '#ffffff'
-    },
-    spacing: {
-      containerPaddingVertical: foundations.spacing.md
-    },
-    layout: {
-      verticalMinHeight: 150,
-      verticalWidth: 40
-    },
-    states: {
-      disabledOpacity: foundations.opacity.disabled
-    }
-  };
-};
-export const useSliderTokens = createComponentTokensHook('slider', createSliderTokens);
+import{createComponentTokensHook}from"../../design-system";const createSliderTokens=e=>({track:{height:2,radius:e.radii.pill},thumb:{size:e.spacing.lg+e.spacing.sm,indicatorSize:e.spacing.sm,elevation:1},colors:{active:e.palette.primary[500],inactive:e.palette.default[300],thumbBackground:"#ffffff",thumbIndicator:"#ffffff"},spacing:{containerPaddingVertical:e.spacing.md},layout:{verticalMinHeight:150,verticalWidth:40},states:{disabledOpacity:e.opacity.disabled}});export const useSliderTokens=createComponentTokensHook("slider",createSliderTokens);