@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/slider/index.cjs

@@ -1,576 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/slider/slider.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-
-
-
-
-
-var _reactnative = require('react-native');
-
-// src/components/slider/slider.animation.ts
-
-var runSliderThumbPressInAnimation = (scale) => {
-  _reactnative.Animated.spring(scale, {
-    toValue: 1.08,
-    friction: 6,
-    tension: 120,
-    useNativeDriver: false
-  }).start();
-};
-var runSliderThumbPressOutAnimation = (scale) => {
-  _reactnative.Animated.spring(scale, {
-    toValue: 1,
-    friction: 6,
-    tension: 120,
-    useNativeDriver: false
-  }).start();
-};
-
-// src/components/slider/slider.hook.ts
-
-var _core = require('@xaui/core');
-function useSliderSizeStyles(size) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    const sizes = {
-      xs: {
-        trackThickness: 4,
-        thumbSize: 14,
-        stepDotSize: 4,
-        markOffset: 12,
-        fontSize: theme.fontSizes.xs
-      },
-      sm: {
-        trackThickness: 6,
-        thumbSize: 16,
-        stepDotSize: 5,
-        markOffset: 14,
-        fontSize: theme.fontSizes.sm
-      },
-      md: {
-        trackThickness: 8,
-        thumbSize: 20,
-        stepDotSize: 6,
-        markOffset: 16,
-        fontSize: theme.fontSizes.md
-      },
-      lg: {
-        trackThickness: 10,
-        thumbSize: 24,
-        stepDotSize: 7,
-        markOffset: 18,
-        fontSize: theme.fontSizes.lg
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-}
-function useSliderColorStyles(color, isDisabled) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeColor = _core.getSafeThemeColor.call(void 0, color);
-  const palette = theme.colors[safeColor];
-  const fillColor = _core.withPaletteNumber.call(void 0, palette.main, 400);
-  return _react.useMemo.call(void 0, () => {
-    if (isDisabled) {
-      return {
-        trackColor: `${theme.colors.default.main}30`,
-        fillColor: `${theme.colors.default.main}55`,
-        thumbColor: `${theme.colors.default.main}85`,
-        valueColor: `${theme.colors.foreground}85`,
-        labelColor: `${theme.colors.foreground}85`,
-        stepColor: `${theme.colors.default.main}50`,
-        activeStepColor: `${theme.colors.default.main}75`,
-        markColor: `${theme.colors.foreground}80`
-      };
-    }
-    return {
-      trackColor: `${palette.main}28`,
-      fillColor,
-      thumbColor: fillColor,
-      valueColor: theme.colors.foreground,
-      labelColor: theme.colors.foreground,
-      stepColor: `${palette.main}40`,
-      activeStepColor: fillColor,
-      markColor: `${theme.colors.foreground}90`
-    };
-  }, [fillColor, isDisabled, palette.main, theme.colors]);
-}
-
-// src/components/slider/slider.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    width: "100%"
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 10
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    width: "100%"
-  },
-  verticalRow: {
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10
-  },
-  trackContainer: {
-    flex: 1,
-    justifyContent: "center",
-    position: "relative"
-  },
-  verticalTrackContainer: {
-    height: 220,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  track: {
-    width: "100%",
-    overflow: "hidden"
-  },
-  verticalTrack: {
-    width: 8,
-    height: "100%"
-  },
-  fill: {
-    position: "absolute",
-    left: 0,
-    top: 0
-  },
-  verticalFill: {
-    left: 0,
-    bottom: 0,
-    top: void 0
-  },
-  thumb: {
-    position: "absolute",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  mark: {
-    position: "absolute",
-    alignItems: "center"
-  },
-  stepDot: {
-    position: "absolute",
-    borderRadius: 999
-  },
-  disabled: {
-    opacity: 0.55
-  },
-  label: {
-    fontWeight: "600"
-  },
-  value: {
-    fontWeight: "500"
-  },
-  markLabel: {
-    marginTop: 6,
-    fontSize: 12
-  }
-});
-
-// src/components/slider/slider.tsx
-var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-var roundToStep = (value, min, step) => {
-  const safeStep = step <= 0 ? 1 : step;
-  return Math.round((value - min) / safeStep) * safeStep + min;
-};
-var valueToPercent = (value, min, max) => {
-  const range = max - min;
-  if (range <= 0) return 0;
-  return (value - min) / range * 100;
-};
-var percentToValue = (percent, min, max, step) => {
-  const raw = min + (max - min) * percent / 100;
-  return clamp(roundToStep(raw, min, step), min, max);
-};
-var getInitialValue = ({
-  value,
-  defaultValue,
-  minValue,
-  maxValue
-}) => {
-  if (value !== void 0) return clamp(value, minValue, maxValue);
-  if (defaultValue !== void 0) return clamp(defaultValue, minValue, maxValue);
-  return minValue;
-};
-var getRelativePosition = (location, trackLength, orientation) => {
-  if (trackLength <= 0) return 0;
-  const ratio = clamp(location / trackLength, 0, 1);
-  return orientation === "vertical" ? (1 - ratio) * 100 : ratio * 100;
-};
-var renderMarkLabel = (mark) => {
-  if (mark.label === void 0) return null;
-  return mark.label;
-};
-var getPixelPosition = (percent, length) => {
-  if (length <= 0) return 0;
-  return clamp(percent, 0, 100) / 100 * length;
-};
-var Slider = ({
-  value: controlledValue,
-  defaultValue,
-  minValue = 0,
-  maxValue = 100,
-  step = 1,
-  label,
-  showValueLabel = false,
-  formatOptions,
-  marks,
-  showSteps = false,
-  orientation = "horizontal",
-  size = "md",
-  color = "primary",
-  radius = "full",
-  startContent,
-  endContent,
-  isDisabled = false,
-  isReadOnly = false,
-  trackLength,
-  onChange,
-  onChangeEnd,
-  customAppearance
-}) => {
-  const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = _react.useState.call(void 0, 
-    getInitialValue({
-      value: controlledValue,
-      defaultValue,
-      minValue,
-      maxValue
-    })
-  );
-  const [measuredTrackLength, setMeasuredTrackLength] = _react.useState.call(void 0, 
-    trackLength && trackLength > 0 ? trackLength : 0
-  );
-  const currentValue = isControlled ? clamp(controlledValue, minValue, maxValue) : internalValue;
-  const sizeStyles = useSliderSizeStyles(size);
-  const colorStyles = useSliderColorStyles(color, isDisabled);
-  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const thumbScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(1)).current;
-  const initialTouchTrackPosition = _react.useRef.call(void 0, 0);
-  const animatedTrackPosition = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const isDragging = _react.useRef.call(void 0, false);
-  const currentValueRef = _react.useRef.call(void 0, currentValue);
-  currentValueRef.current = currentValue;
-  const onChangeEndRef = _react.useRef.call(void 0, onChangeEnd);
-  onChangeEndRef.current = onChangeEnd;
-  const thumbOverlapInset = Math.max(
-    0,
-    (sizeStyles.thumbSize - sizeStyles.trackThickness) / 2
-  );
-  const formattedValue = _react.useMemo.call(void 0, () => {
-    try {
-      return new Intl.NumberFormat(void 0, formatOptions).format(currentValue);
-    } catch (e) {
-      return String(currentValue);
-    }
-  }, [currentValue, formatOptions]);
-  const activePercent = valueToPercent(currentValue, minValue, maxValue);
-  const effectiveTrackLength = trackLength && trackLength > 0 ? trackLength : measuredTrackLength;
-  const thumbCenterPosition = getPixelPosition(activePercent, effectiveTrackLength);
-  const trackContainerLengthStyle = orientation === "vertical" ? {
-    height: (trackLength && trackLength > 0 ? trackLength : 220) + thumbOverlapInset * 2
-  } : trackLength && trackLength > 0 ? { width: trackLength + thumbOverlapInset * 2 } : null;
-  _react.useEffect.call(void 0, () => {
-    if (!isDragging.current && effectiveTrackLength > 0) {
-      animatedTrackPosition.setValue(
-        clamp(thumbCenterPosition, 0, effectiveTrackLength)
-      );
-    }
-  }, [thumbCenterPosition, effectiveTrackLength, animatedTrackPosition]);
-  const animatedFillSize = _react.useMemo.call(void 0, () => {
-    const safeLength = Math.max(effectiveTrackLength, 1);
-    return animatedTrackPosition.interpolate({
-      inputRange: [0, safeLength],
-      outputRange: [0, safeLength],
-      extrapolate: "clamp"
-    });
-  }, [animatedTrackPosition, effectiveTrackLength]);
-  const animatedThumbOffset = _react.useMemo.call(void 0, () => {
-    const base = thumbOverlapInset - sizeStyles.thumbSize / 2;
-    const safeLength = Math.max(effectiveTrackLength, 1);
-    return animatedTrackPosition.interpolate({
-      inputRange: [0, safeLength],
-      outputRange: [base, safeLength + base],
-      extrapolate: "clamp"
-    });
-  }, [
-    animatedTrackPosition,
-    effectiveTrackLength,
-    thumbOverlapInset,
-    sizeStyles.thumbSize
-  ]);
-  const setValue = _react.useCallback.call(void 0, 
-    (nextValue) => {
-      if (!isControlled) {
-        setInternalValue(nextValue);
-      }
-      _optionalChain([onChange, 'optionalCall', _2 => _2(nextValue)]);
-    },
-    [isControlled, onChange]
-  );
-  const setValueFromPosition = _react.useCallback.call(void 0, 
-    (position) => {
-      const nextPercent = getRelativePosition(
-        position,
-        effectiveTrackLength,
-        orientation
-      );
-      const nextValue = percentToValue(nextPercent, minValue, maxValue, step);
-      setValue(nextValue);
-      return nextValue;
-    },
-    [effectiveTrackLength, maxValue, minValue, orientation, setValue, step]
-  );
-  const isInteractive = !isDisabled && !isReadOnly;
-  const panResponder = _react.useMemo.call(void 0, 
-    () => _reactnative.PanResponder.create({
-      onStartShouldSetPanResponder: () => isInteractive,
-      onMoveShouldSetPanResponder: (_evt, gs) => {
-        if (!isInteractive) return false;
-        return orientation === "horizontal" ? Math.abs(gs.dx) >= Math.abs(gs.dy) : Math.abs(gs.dy) >= Math.abs(gs.dx);
-      },
-      onPanResponderTerminationRequest: () => !isDragging.current,
-      onPanResponderGrant: (event) => {
-        if (!isInteractive) return;
-        isDragging.current = true;
-        runSliderThumbPressInAnimation(thumbScale);
-        const point = orientation === "vertical" ? event.nativeEvent.locationY : event.nativeEvent.locationX;
-        const rawPosition = point - thumbOverlapInset;
-        initialTouchTrackPosition.current = rawPosition;
-        const clamped = clamp(rawPosition, 0, effectiveTrackLength);
-        animatedTrackPosition.setValue(
-          orientation === "vertical" ? effectiveTrackLength - clamped : clamped
-        );
-        setValueFromPosition(rawPosition);
-      },
-      onPanResponderMove: (_event, gestureState) => {
-        if (!isInteractive) return;
-        const delta = orientation === "vertical" ? gestureState.dy : gestureState.dx;
-        const rawPosition = initialTouchTrackPosition.current + delta;
-        const clamped = clamp(rawPosition, 0, effectiveTrackLength);
-        animatedTrackPosition.setValue(
-          orientation === "vertical" ? effectiveTrackLength - clamped : clamped
-        );
-        setValueFromPosition(rawPosition);
-      },
-      onPanResponderRelease: (_event, gestureState) => {
-        isDragging.current = false;
-        runSliderThumbPressOutAnimation(thumbScale);
-        if (!isInteractive) return;
-        const delta = orientation === "vertical" ? gestureState.dy : gestureState.dx;
-        const nextValue = setValueFromPosition(
-          initialTouchTrackPosition.current + delta
-        );
-        const snappedPercent = valueToPercent(nextValue, minValue, maxValue);
-        animatedTrackPosition.setValue(
-          getPixelPosition(snappedPercent, effectiveTrackLength)
-        );
-        _optionalChain([onChangeEndRef, 'access', _3 => _3.current, 'optionalCall', _4 => _4(nextValue)]);
-      },
-      onPanResponderTerminate: () => {
-        isDragging.current = false;
-        runSliderThumbPressOutAnimation(thumbScale);
-        const val = currentValueRef.current;
-        const pct = valueToPercent(val, minValue, maxValue);
-        animatedTrackPosition.setValue(getPixelPosition(pct, effectiveTrackLength));
-        _optionalChain([onChangeEndRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(val)]);
-      }
-    }),
-    [
-      animatedTrackPosition,
-      effectiveTrackLength,
-      isInteractive,
-      minValue,
-      maxValue,
-      orientation,
-      setValueFromPosition,
-      thumbScale,
-      thumbOverlapInset
-    ]
-  );
-  const handleTrackLayout = _react.useCallback.call(void 0, 
-    (event) => {
-      if (trackLength && trackLength > 0) return;
-      const nextLength = orientation === "vertical" ? event.nativeEvent.layout.height : event.nativeEvent.layout.width;
-      setMeasuredTrackLength(nextLength);
-    },
-    [orientation, trackLength]
-  );
-  const steps = _react.useMemo.call(void 0, () => {
-    if (!showSteps || step <= 0 || maxValue <= minValue) return [];
-    const count = Math.floor((maxValue - minValue) / step);
-    if (count > 200) return [];
-    return Array.from({ length: count + 1 }, (_, index) => minValue + index * step);
-  }, [maxValue, minValue, showSteps, step]);
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.container])] }, (label !== void 0 || showValueLabel) && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.header, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.header])] }, label !== void 0 ? /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Text,
-    {
-      style: [
-        styles.label,
-        { color: colorStyles.labelColor, fontSize: sizeStyles.fontSize },
-        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.label])
-      ]
-    },
-    label
-  ) : /* @__PURE__ */ _react2.default.createElement(_reactnative.View, null), showValueLabel && /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Text,
-    {
-      style: [
-        styles.value,
-        { color: colorStyles.valueColor, fontSize: sizeStyles.fontSize },
-        _optionalChain([customAppearance, 'optionalAccess', _10 => _10.value])
-      ]
-    },
-    formattedValue
-  )), /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        orientation === "vertical" ? styles.verticalRow : styles.row,
-        (isDisabled || isReadOnly) && styles.disabled
-      ]
-    },
-    startContent,
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        ...panResponder.panHandlers,
-        style: [
-          styles.trackContainer,
-          orientation === "vertical" && styles.verticalTrackContainer,
-          {
-            padding: thumbOverlapInset
-          },
-          trackContainerLengthStyle,
-          _optionalChain([customAppearance, 'optionalAccess', _11 => _11.trackContainer])
-        ]
-      },
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.View,
-        {
-          onLayout: handleTrackLayout,
-          style: [
-            styles.track,
-            orientation === "vertical" && styles.verticalTrack,
-            {
-              borderRadius: radiusStyles.borderRadius,
-              backgroundColor: colorStyles.trackColor,
-              height: orientation === "vertical" ? "100%" : sizeStyles.trackThickness,
-              width: orientation === "vertical" ? sizeStyles.trackThickness : "100%"
-            },
-            _optionalChain([customAppearance, 'optionalAccess', _12 => _12.track])
-          ]
-        },
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Animated.View,
-          {
-            style: [
-              styles.fill,
-              orientation === "vertical" && styles.verticalFill,
-              {
-                backgroundColor: colorStyles.fillColor,
-                height: orientation === "vertical" ? effectiveTrackLength > 0 ? animatedFillSize : `${activePercent}%` : sizeStyles.trackThickness,
-                width: orientation === "vertical" ? sizeStyles.trackThickness : effectiveTrackLength > 0 ? animatedFillSize : `${activePercent}%`
-              },
-              _optionalChain([customAppearance, 'optionalAccess', _13 => _13.fill])
-            ]
-          }
-        ),
-        showSteps && steps.map((stepValue) => {
-          const percent = valueToPercent(stepValue, minValue, maxValue);
-          const isActive = stepValue <= currentValue;
-          return /* @__PURE__ */ _react2.default.createElement(
-            _reactnative.View,
-            {
-              key: `step-${stepValue}`,
-              style: [
-                styles.stepDot,
-                {
-                  width: sizeStyles.stepDotSize,
-                  height: sizeStyles.stepDotSize,
-                  backgroundColor: isActive ? colorStyles.activeStepColor : colorStyles.stepColor,
-                  left: orientation === "vertical" ? (sizeStyles.trackThickness - sizeStyles.stepDotSize) / 2 : getPixelPosition(percent, effectiveTrackLength) - sizeStyles.stepDotSize / 2,
-                  bottom: orientation === "vertical" ? getPixelPosition(percent, effectiveTrackLength) - sizeStyles.stepDotSize / 2 : (sizeStyles.trackThickness - sizeStyles.stepDotSize) / 2
-                },
-                _optionalChain([customAppearance, 'optionalAccess', _14 => _14.step]),
-                isActive && _optionalChain([customAppearance, 'optionalAccess', _15 => _15.activeStep])
-              ]
-            }
-          );
-        })
-      ),
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          pointerEvents: "none",
-          style: [
-            styles.thumb,
-            {
-              width: sizeStyles.thumbSize,
-              height: sizeStyles.thumbSize,
-              borderRadius: sizeStyles.thumbSize / 2,
-              left: orientation === "vertical" ? 0 : animatedThumbOffset,
-              top: orientation === "vertical" ? void 0 : 0,
-              bottom: orientation === "vertical" ? animatedThumbOffset : void 0,
-              backgroundColor: theme.colors.background,
-              borderWidth: 2,
-              borderColor: colorStyles.fillColor,
-              ...theme.shadows.md,
-              transform: [{ scale: thumbScale }]
-            },
-            _optionalChain([customAppearance, 'optionalAccess', _16 => _16.thumb])
-          ]
-        }
-      ),
-      _optionalChain([marks, 'optionalAccess', _17 => _17.map, 'call', _18 => _18((mark) => {
-        const percent = valueToPercent(mark.value, minValue, maxValue);
-        return /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.View,
-          {
-            key: `mark-${mark.value}`,
-            style: [
-              styles.mark,
-              {
-                left: orientation === "vertical" ? thumbOverlapInset + sizeStyles.trackThickness + 8 : thumbOverlapInset + getPixelPosition(percent, effectiveTrackLength) - 10,
-                top: orientation === "vertical" ? void 0 : thumbOverlapInset + sizeStyles.trackThickness,
-                bottom: orientation === "vertical" ? thumbOverlapInset + getPixelPosition(percent, effectiveTrackLength) - 8 : void 0
-              },
-              _optionalChain([customAppearance, 'optionalAccess', _19 => _19.mark])
-            ]
-          },
-          /* @__PURE__ */ _react2.default.createElement(
-            _reactnative.Text,
-            {
-              style: [
-                styles.markLabel,
-                { color: colorStyles.markColor },
-                _optionalChain([customAppearance, 'optionalAccess', _20 => _20.markLabel])
-              ]
-            },
-            renderMarkLabel(mark)
-          )
-        );
-      })])
-    ),
-    endContent
-  ));
-};
-
-
-exports.Slider = Slider;