@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/Slider/Slider.js

@@ -0,0 +1,502 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Slider = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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;
+  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 = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    tone = 'primary',
+    size = 'md',
+    showLabel = false,
+    formatLabel = defaultFormatLabel,
+    accessibilityLabel,
+    haptic,
+    style,
+    containerStyle,
+    trackStyle,
+    fillStyle,
+    thumbStyle,
+    labelStyle,
+    thumbPressScale,
+    labelShowDuration,
+    labelOpacity: labelOpacityProp,
+    testID
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const sliderTheme = theme.components.slider;
+  const sliderSizeTheme = sliderTheme?.[size];
+  const sizeCfg = (0, _react.useMemo)(() => ({
+    trackHeight: sliderSizeTheme?.trackHeight ?? SIZE_MAP[size].trackHeight,
+    thumbDiameter: sliderSizeTheme?.thumbDiameter ?? SIZE_MAP[size].thumbDiameter
+  }), [sliderSizeTheme, size]);
+  const thumbPressAnimationEnabled = sliderTheme?.thumbPressAnimation ?? false;
+  const resolvedPressScale = thumbPressScale ?? sliderTheme?.thumbPressScale ?? 1.1;
+  const resolvedLabelDuration = labelShowDuration ?? sliderTheme?.labelShowDuration ?? theme.motion.duration.fast;
+  const resolvedLabelOpacity = labelOpacityProp ?? sliderTheme?.labelOpacity ?? 1;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
+  const springCfg = (0, _react.useMemo)(() => ({
+    damping: theme.motion.spring.snappy.damping,
+    stiffness: theme.motion.spring.snappy.stiffness,
+    mass: theme.motion.spring.snappy.mass
+  }), [theme.motion.spring.snappy]);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
+  const isRange = props.range === true;
+  const [currentValue, setCurrentValue] = (0, _index.useControllableState)({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
+    onChange: props.onChange
+  });
+
+  // ───────── Shared values (UI thread) ─────────
+  // lowX/highX: thumb px positions. lowVal/highVal: their snapped numeric values
+  // (mirrored on the UI thread so worklets can clamp the range + detect changes).
+  const lowX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const highX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lowVal = (0, _reactNativeReanimated.useSharedValue)(isRange ? currentValue[0] : currentValue);
+  const highVal = (0, _reactNativeReanimated.useSharedValue)(isRange ? currentValue[1] : currentValue);
+  const dragStartX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const trackW = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lowScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const highScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const lowLabelOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
+  const highLabelOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
+
+  // Float-drift guard precision for step snapping (e.g. step 0.1 -> precision 10).
+  const precision = (0, _react.useMemo)(() => {
+    const decimals = String(step).split('.')[1]?.length ?? 0;
+    return Math.pow(10, decimals);
+  }, [step]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(lowX);
+      (0, _reactNativeReanimated.cancelAnimation)(highX);
+      (0, _reactNativeReanimated.cancelAnimation)(lowScale);
+      (0, _reactNativeReanimated.cancelAnimation)(highScale);
+      (0, _reactNativeReanimated.cancelAnimation)(lowLabelOpacity);
+      (0, _reactNativeReanimated.cancelAnimation)(highLabelOpacity);
+    };
+  }, [lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
+  const valueToPx = (0, _react.useCallback)((value, width) => {
+    if (max === min || width <= 0) {
+      return 0;
+    }
+    return (value - min) / (max - min) * width;
+  }, [min, max]);
+  const pxToValue = (0, _react.useCallback)((px, width) => {
+    if (width <= 0) {
+      return min;
+    }
+    const ratio = clamp(px / width, 0, 1);
+    return snapToStep(min + ratio * (max - min), min, max, step);
+  }, [min, max, step]);
+
+  // Sync external value -> shared values (controlled updates, value prop changes).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `JSON.stringify(currentValue)` is the dependency by design (value equality for the tuple); adding `currentValue` itself would re-run on every new array identity and defeat it
+  (0, _react.useEffect)(() => {
+    if (trackWidth <= 0) {
+      return;
+    }
+    if (isRange) {
+      const [v0, v1] = currentValue;
+      const lo = Math.min(v0, v1);
+      const hi = Math.max(v0, v1);
+      lowVal.value = lo;
+      highVal.value = hi;
+      lowX.value = valueToPx(lo, trackWidth);
+      highX.value = valueToPx(hi, trackWidth);
+    } else {
+      const v = currentValue;
+      lowVal.value = v;
+      highVal.value = v;
+      lowX.value = valueToPx(v, trackWidth);
+    }
+  }, [JSON.stringify(currentValue), trackWidth, isRange, valueToPx]);
+  const onTrackLayout = (0, _react.useCallback)(e => {
+    const w = e.nativeEvent.layout.width;
+    trackW.value = w;
+    setTrackWidth(w);
+  }, [trackW]);
+  const fireChange = (0, _react.useCallback)((lo, hi) => {
+    setCurrentValue(isRange ? [lo, hi] : lo);
+  }, [isRange, setCurrentValue]);
+  const fireHaptic = (0, _react.useCallback)(() => {
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+  }, [haptic]);
+
+  // ───────── Pan gesture per thumb (UI thread) ─────────
+  const buildPan = (0, _react.useCallback)(which => {
+    const xSV = which === 'low' ? lowX : highX;
+    const valSV = which === 'low' ? lowVal : highVal;
+    const otherSV = which === 'low' ? highVal : lowVal;
+    const scaleSV = which === 'low' ? lowScale : highScale;
+    const labelSV = which === 'low' ? lowLabelOpacity : highLabelOpacity;
+    const isLow = which === 'low';
+    const _min = min;
+    const _max = max;
+    const _step = step;
+    const _precision = precision;
+    const _range = isRange;
+    const _pressScale = resolvedPressScale;
+    const _pressAnim = thumbPressAnimationEnabled;
+    const _showLabel = showLabel;
+    const _labelOpacity = resolvedLabelOpacity;
+    const _labelDur = resolvedLabelDuration;
+    const _spring = springCfg;
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled).minDistance(0).onStart(() => {
+      'worklet';
+
+      dragStartX.value = xSV.value;
+      if (_pressAnim) {
+        scaleSV.value = (0, _reactNativeReanimated.withSpring)(_pressScale, _spring);
+      }
+      if (_showLabel) {
+        labelSV.value = (0, _reactNativeReanimated.withTiming)(_labelOpacity, {
+          duration: _labelDur,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+        });
+      }
+      (0, _reactNativeReanimated.runOnJS)(fireHaptic)();
+    }).onUpdate(event => {
+      'worklet';
+
+      if (trackW.value <= 0) {
+        return;
+      }
+      const px = Math.min(Math.max(dragStartX.value + event.translationX, 0), trackW.value);
+      const ratio = px / trackW.value;
+      let v = _min + ratio * (_max - _min);
+      if (_step > 0) {
+        v = Math.round((v - _min) / _step) * _step + _min;
+        v = Math.round(v * _precision) / _precision;
+      }
+      v = Math.min(Math.max(v, _min), _max);
+      if (_range) {
+        if (isLow && v > otherSV.value) {
+          v = otherSV.value;
+        }
+        if (!isLow && v < otherSV.value) {
+          v = otherSV.value;
+        }
+      }
+      // Thumb sits at the snapped value's position.
+      xSV.value = _max === _min ? 0 : (v - _min) / (_max - _min) * trackW.value;
+      if (v !== valSV.value) {
+        valSV.value = v;
+        (0, _reactNativeReanimated.runOnJS)(fireHaptic)();
+        (0, _reactNativeReanimated.runOnJS)(fireChange)(lowVal.value, highVal.value);
+      }
+    }).onEnd(() => {
+      'worklet';
+
+      if (_pressAnim) {
+        scaleSV.value = (0, _reactNativeReanimated.withSpring)(1, _spring);
+      }
+      if (_showLabel) {
+        labelSV.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: _labelDur,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+        });
+      }
+    });
+  }, [disabled, min, max, step, precision, isRange, resolvedPressScale, thumbPressAnimationEnabled, showLabel, resolvedLabelOpacity, resolvedLabelDuration, springCfg, fireChange, fireHaptic, lowX, highX, lowVal, highVal, lowScale, highScale, lowLabelOpacity, highLabelOpacity, dragStartX, trackW]);
+  const lowPan = (0, _react.useMemo)(() => buildPan('low'), [buildPan]);
+  const highPan = (0, _react.useMemo)(() => buildPan('high'), [buildPan]);
+
+  // Tap on track jumps to position (single mode only).
+  const handleTrackPress = (0, _react.useCallback)(e => {
+    if (disabled || isRange || trackWidth <= 0) {
+      return;
+    }
+    const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
+    const next = pxToValue(px, trackWidth);
+    if (next !== lowVal.value) {
+      fireHaptic();
+      lowVal.value = next;
+      lowX.value = (0, _reactNativeReanimated.withTiming)(valueToPx(next, trackWidth), {
+        duration: theme.motion.duration.fast,
+        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+      });
+      fireChange(next, next);
+    }
+  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, fireHaptic, lowX, lowVal, theme.motion.duration.fast]);
+
+  // Accessibility actions: increment / decrement.
+  const handleAccessibilityAction = (0, _react.useCallback)(event => {
+    if (disabled) {
+      return;
+    }
+    const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
+    if (isRange) {
+      const nextLow = clamp(lowVal.value + delta, min, highVal.value);
+      if (nextLow !== lowVal.value) {
+        lowVal.value = nextLow;
+        lowX.value = valueToPx(nextLow, trackWidth);
+        fireHaptic();
+        fireChange(nextLow, highVal.value);
+      }
+    } else {
+      const next = clamp(lowVal.value + delta, min, max);
+      if (next !== lowVal.value) {
+        lowVal.value = next;
+        lowX.value = valueToPx(next, trackWidth);
+        fireHaptic();
+        fireChange(next, next);
+      }
+    }
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
+  const thumbRadius = sizeCfg.thumbDiameter / 2;
+
+  // ───────── Animated styles ─────────
+  const fillAnimStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => isRange ? {
+    left: lowX.value,
+    width: Math.max(0, highX.value - lowX.value)
+  } : {
+    left: 0,
+    width: lowX.value
+  });
+  const lowThumbStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: lowX.value - thumbRadius
+    }, {
+      scale: lowScale.value
+    }]
+  }));
+  const highThumbStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: highX.value - thumbRadius
+    }, {
+      scale: highScale.value
+    }]
+  }));
+  const lowLabelStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: lowLabelOpacity.value
+  }));
+  const highLabelStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: highLabelOpacity.value
+  }));
+
+  // Display values (from committed state) for labels + a11y.
+  const lowDisplayValue = isRange ? Math.min(...currentValue) : currentValue;
+  const highDisplayValue = isRange ? Math.max(...currentValue) : currentValue;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    style: [styles.container, containerStyle, style],
+    testID: testID,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    accessibilityValue: isRange ? {
+      min,
+      max,
+      now: lowDisplayValue,
+      text: `${lowDisplayValue} to ${highDisplayValue}`
+    } : {
+      min,
+      max,
+      now: lowDisplayValue
+    },
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: handleAccessibilityAction,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: handleTrackPress,
+      disabled: disabled || isRange,
+      style: styles.trackTouch,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.trackWrap,
+        onLayout: onTrackLayout,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.track, {
+            backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
+          }, trackStyle]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+          style: [styles.fill, {
+            backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
+            opacity: disabled ? 0.55 : 1
+          }, fillStyle, fillAnimStyle]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: lowPan,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+            style: [styles.thumb, {
+              width: sizeCfg.thumbDiameter,
+              height: sizeCfg.thumbDiameter,
+              borderRadius: thumbRadius,
+              backgroundColor: theme.colors.background.elevated,
+              borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+              opacity: disabled ? 0.55 : 1
+            }, thumbStyle, lowThumbStyle],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, lowLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(lowDisplayValue)
+              })
+            }) : null
+          })
+        }), isRange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: highPan,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+            style: [styles.thumb, {
+              width: sizeCfg.thumbDiameter,
+              height: sizeCfg.thumbDiameter,
+              borderRadius: thumbRadius,
+              backgroundColor: theme.colors.background.elevated,
+              borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+              opacity: disabled ? 0.55 : 1
+            }, thumbStyle, highThumbStyle],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, highLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(highDisplayValue)
+              })
+            }) : null
+          })
+        }) : null]
+      })
+    })
+  });
+});
+Slider.displayName = 'Slider';
+const buildStyles = (theme, sizeCfg) => {
+  const thumbShadow = theme.shadows.md;
+  const verticalPad = sizeCfg.thumbDiameter / 2 + 4;
+  return _reactNative.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',
+      ..._reactNative.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
+    }
+  });
+};
+var _default = exports.default = Slider;
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () {
+    return _Slider.Slider;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Slider.default;
+  }
+});
+var _Slider = _interopRequireWildcard(require("./Slider.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map