@webority-technologies/mobile 0.0.1

package/lib/module/components/Slider/Slider.js

@@ -0,0 +1,439 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SIZE_MAP = {
+  sm: {
+    trackHeight: 4,
+    thumbDiameter: 24
+  },
+  md: {
+    trackHeight: 6,
+    thumbDiameter: 28
+  },
+  lg: {
+    trackHeight: 8,
+    thumbDiameter: 32
+  }
+};
+const TONE_TO_COLOR_KEY = {
+  primary: 'primary',
+  success: 'success',
+  warning: 'warning',
+  error: 'error'
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const snapToStep = (value, min, max, step) => {
+  if (step <= 0) return clamp(value, min, max);
+  const stepped = Math.round((value - min) / step) * step + min;
+  // Guard against floating-point drift.
+  const decimals = String(step).split('.')[1]?.length ?? 0;
+  const fixed = decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped;
+  return clamp(fixed, min, max);
+};
+const defaultFormatLabel = value => String(value);
+const Slider = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    tone = 'primary',
+    size = 'md',
+    showLabel = false,
+    formatLabel = defaultFormatLabel,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sizeCfg = SIZE_MAP[size];
+  const styles = useMemo(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
+
+  // Track layout (width + x offset within container)
+  const [trackWidth, setTrackWidth] = useState(0);
+  const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
+  const isRange = props.range === true;
+
+  // Current value is mirrored in refs so PanResponder closures get fresh values.
+  const lowRef = useRef(isRange ? props.value[0] : props.value);
+  const highRef = useRef(isRange ? props.value[1] : props.value);
+  const lastReportedLow = useRef(lowRef.current);
+  const lastReportedHigh = useRef(highRef.current);
+
+  // Animated x positions (px) for thumbs.
+  const lowX = useRef(new Animated.Value(0)).current;
+  const highX = useRef(new Animated.Value(0)).current;
+
+  // Press / drag scale animations.
+  const lowScale = useRef(new Animated.Value(1)).current;
+  const highScale = useRef(new Animated.Value(1)).current;
+
+  // Label opacity per thumb.
+  const lowLabelOpacity = useRef(new Animated.Value(0)).current;
+  const highLabelOpacity = useRef(new Animated.Value(0)).current;
+
+  // Track which thumb is actively dragging (to anchor gesture math).
+  const dragOffsetRef = useRef(0);
+
+  // Derived helper: convert value -> px on track.
+  const valueToPx = useCallback((value, width) => {
+    if (max === min || width <= 0) return 0;
+    const ratio = (value - min) / (max - min);
+    return ratio * width;
+  }, [min, max]);
+
+  // Derived helper: convert px -> snapped value.
+  const pxToValue = useCallback((px, width) => {
+    if (width <= 0) return min;
+    const ratio = clamp(px / width, 0, 1);
+    const raw = min + ratio * (max - min);
+    return snapToStep(raw, min, max, step);
+  }, [min, max, step]);
+
+  // Sync external value -> animated values.
+  useEffect(() => {
+    if (trackWidth <= 0) return;
+    if (isRange) {
+      const [v0, v1] = props.value;
+      const lo = Math.min(v0, v1);
+      const hi = Math.max(v0, v1);
+      lowRef.current = lo;
+      highRef.current = hi;
+      lastReportedLow.current = lo;
+      lastReportedHigh.current = hi;
+      lowX.setValue(valueToPx(lo, trackWidth));
+      highX.setValue(valueToPx(hi, trackWidth));
+    } else {
+      const v = props.value;
+      lowRef.current = v;
+      highRef.current = v;
+      lastReportedLow.current = v;
+      lowX.setValue(valueToPx(v, trackWidth));
+    }
+    // We intentionally listen to props.value across both shapes via JSON; ESLint is fine.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(props.value), trackWidth, isRange, valueToPx]);
+  const onTrackLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setTrackWidth(w);
+    // Initialize positions immediately.
+    if (isRange) {
+      const [v0, v1] = props.value;
+      const lo = Math.min(v0, v1);
+      const hi = Math.max(v0, v1);
+      lowX.setValue(valueToPx(lo, w));
+      highX.setValue(valueToPx(hi, w));
+    } else {
+      lowX.setValue(valueToPx(props.value, w));
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isRange, valueToPx]);
+  const fireChange = useCallback((lo, hi) => {
+    if (isRange) {
+      props.onChange([lo, hi]);
+    } else {
+      props.onChange(lo);
+    }
+  }, [isRange, props]);
+  const animateThumbPress = useCallback((target, opacity, pressed) => {
+    Animated.spring(target, {
+      toValue: pressed ? 1.1 : 1,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    }).start();
+    if (showLabel) {
+      Animated.timing(opacity, {
+        toValue: pressed ? 1 : 0,
+        duration: theme.motion.duration.fast,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      }).start();
+    }
+  }, [showLabel, theme.motion]);
+
+  // Build PanResponder for a thumb.
+  const buildResponder = useCallback(which => {
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: () => {
+        dragOffsetRef.current = which === 'low' ? valueToPx(lowRef.current, trackWidth) : valueToPx(highRef.current, trackWidth);
+        animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, true);
+        triggerHaptic('selection');
+      },
+      onPanResponderMove: (_evt, gesture) => {
+        if (trackWidth <= 0) return;
+        const nextPx = clamp(dragOffsetRef.current + gesture.dx, 0, trackWidth);
+        let nextValue = pxToValue(nextPx, trackWidth);
+        if (which === 'low') {
+          if (isRange && nextValue > highRef.current) nextValue = highRef.current;
+          if (nextValue !== lastReportedLow.current) {
+            triggerHaptic('selection');
+            lastReportedLow.current = nextValue;
+          }
+          lowRef.current = nextValue;
+          lowX.setValue(valueToPx(nextValue, trackWidth));
+          fireChange(nextValue, highRef.current);
+        } else {
+          if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
+          if (nextValue !== lastReportedHigh.current) {
+            triggerHaptic('selection');
+            lastReportedHigh.current = nextValue;
+          }
+          highRef.current = nextValue;
+          highX.setValue(valueToPx(nextValue, trackWidth));
+          fireChange(lowRef.current, nextValue);
+        }
+      },
+      onPanResponderRelease: () => {
+        animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, false);
+      },
+      onPanResponderTerminate: () => {
+        animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, false);
+      }
+    });
+  }, [disabled, trackWidth, isRange, valueToPx, pxToValue, fireChange, animateThumbPress, lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
+
+  // Re-create responders when deps change so closures stay current.
+  const lowResponder = useMemo(() => buildResponder('low'), [buildResponder]);
+  const highResponder = useMemo(() => buildResponder('high'), [buildResponder]);
+
+  // Tap on track jumps to position (single mode only).
+  const handleTrackPress = useCallback(e => {
+    if (disabled || isRange || trackWidth <= 0) return;
+    const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
+    const next = pxToValue(px, trackWidth);
+    if (next !== lowRef.current) {
+      triggerHaptic('selection');
+      lowRef.current = next;
+      lastReportedLow.current = next;
+      Animated.timing(lowX, {
+        toValue: valueToPx(next, trackWidth),
+        duration: theme.motion.duration.fast,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false
+      }).start();
+      fireChange(next, next);
+    }
+  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, lowX, theme.motion.duration.fast]);
+
+  // Accessibility actions: increment / decrement
+  const handleAccessibilityAction = useCallback(event => {
+    if (disabled) return;
+    const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+    if (isRange) {
+      const nextLow = clamp(lowRef.current + delta, min, highRef.current);
+      if (nextLow !== lowRef.current) {
+        lowRef.current = nextLow;
+        lastReportedLow.current = nextLow;
+        lowX.setValue(valueToPx(nextLow, trackWidth));
+        triggerHaptic('selection');
+        fireChange(nextLow, highRef.current);
+      }
+    } else {
+      const next = clamp(lowRef.current + delta, min, max);
+      if (next !== lowRef.current) {
+        lowRef.current = next;
+        lastReportedLow.current = next;
+        lowX.setValue(valueToPx(next, trackWidth));
+        triggerHaptic('selection');
+        fireChange(next, next);
+      }
+    }
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange]);
+
+  // Computed values for fill bar.
+  const fillLeft = isRange ? lowX : new Animated.Value(0);
+  const fillWidth = isRange ? Animated.subtract(highX, lowX) : lowX;
+  const thumbRadius = sizeCfg.thumbDiameter / 2;
+
+  // Display values for labels.
+  const lowDisplayValue = isRange ? lowRef.current : lowRef.current;
+  const highDisplayValue = highRef.current;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, style],
+    testID: testID,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    accessibilityValue: {
+      min,
+      max,
+      now: isRange ? lowDisplayValue : lowDisplayValue
+    },
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: handleAccessibilityAction,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      onPress: handleTrackPress,
+      disabled: disabled || isRange,
+      style: styles.trackTouch,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.trackWrap,
+        onLayout: onTrackLayout,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.track, {
+            backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
+          }]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.fill, {
+            left: fillLeft,
+            width: fillWidth,
+            backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
+            opacity: disabled ? 0.6 : 1
+          }]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          ...lowResponder.panHandlers,
+          style: [styles.thumb, {
+            width: sizeCfg.thumbDiameter,
+            height: sizeCfg.thumbDiameter,
+            borderRadius: thumbRadius,
+            backgroundColor: theme.colors.background.elevated,
+            borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+            transform: [{
+              translateX: Animated.subtract(lowX, new Animated.Value(thumbRadius))
+            }, {
+              scale: lowScale
+            }],
+            opacity: disabled ? 0.6 : 1
+          }],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: showLabel ? /*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.bubble, {
+              opacity: lowLabelOpacity,
+              backgroundColor: fillColor
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.bubbleText,
+              children: formatLabel(lowDisplayValue)
+            })
+          }) : null
+        }), isRange ? /*#__PURE__*/_jsx(Animated.View, {
+          ...highResponder.panHandlers,
+          style: [styles.thumb, {
+            width: sizeCfg.thumbDiameter,
+            height: sizeCfg.thumbDiameter,
+            borderRadius: thumbRadius,
+            backgroundColor: theme.colors.background.elevated,
+            borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+            transform: [{
+              translateX: Animated.subtract(highX, new Animated.Value(thumbRadius))
+            }, {
+              scale: highScale
+            }],
+            opacity: disabled ? 0.6 : 1
+          }],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: showLabel ? /*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.bubble, {
+              opacity: highLabelOpacity,
+              backgroundColor: fillColor
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.bubbleText,
+              children: formatLabel(highDisplayValue)
+            })
+          }) : null
+        }) : null]
+      })
+    })
+  });
+});
+Slider.displayName = 'Slider';
+const buildStyles = (theme, sizeCfg) => {
+  const thumbShadow = theme.shadows.md;
+  const verticalPad = sizeCfg.thumbDiameter / 2 + 4;
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      paddingVertical: verticalPad,
+      justifyContent: 'center'
+    },
+    trackTouch: {
+      width: '100%',
+      justifyContent: 'center'
+    },
+    trackWrap: {
+      width: '100%',
+      height: sizeCfg.thumbDiameter,
+      justifyContent: 'center'
+    },
+    track: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      height: sizeCfg.trackHeight,
+      borderRadius: theme.radius.full,
+      top: (sizeCfg.thumbDiameter - sizeCfg.trackHeight) / 2
+    },
+    fill: {
+      position: 'absolute',
+      height: sizeCfg.trackHeight,
+      borderRadius: theme.radius.full,
+      top: (sizeCfg.thumbDiameter - sizeCfg.trackHeight) / 2
+    },
+    thumb: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderWidth: 2,
+      shadowColor: thumbShadow.shadowColor,
+      shadowOffset: thumbShadow.shadowOffset,
+      shadowOpacity: thumbShadow.shadowOpacity,
+      shadowRadius: thumbShadow.shadowRadius,
+      elevation: thumbShadow.elevation,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    bubble: {
+      position: 'absolute',
+      bottom: sizeCfg.thumbDiameter + 6,
+      paddingHorizontal: theme.spacing.sm,
+      paddingVertical: theme.spacing.xxs,
+      borderRadius: theme.radius.md,
+      minWidth: 36,
+      alignItems: 'center',
+      justifyContent: 'center',
+      // A subtle shadow for elevation.
+      ...Platform.select({
+        ios: {
+          shadowColor: theme.shadows.sm.shadowColor,
+          shadowOffset: theme.shadows.sm.shadowOffset,
+          shadowOpacity: theme.shadows.sm.shadowOpacity,
+          shadowRadius: theme.shadows.sm.shadowRadius
+        },
+        android: {
+          elevation: theme.shadows.sm.elevation
+        },
+        default: {}
+      })
+    },
+    bubbleText: {
+      color: theme.colors.text.inverse,
+      fontSize: theme.typography.fontSize.xs,
+      fontWeight: theme.typography.fontWeight.semibold
+    }
+  });
+};
+export { Slider };
+export default Slider;
+//# sourceMappingURL=Slider.js.map

package/lib/module/components/Slider/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Slider, default } from "./Slider.js";
+//# sourceMappingURL=index.js.map