@xaui/native 0.0.21 → 0.0.23

package/dist/slider/index.js

@@ -0,0 +1,576 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/slider/slider.tsx
+import React, { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import {
+  Animated as Animated2,
+  PanResponder,
+  Text,
+  View
+} from "react-native";
+
+// src/components/slider/slider.animation.ts
+import { Animated } from "react-native";
+var runSliderThumbPressInAnimation = (scale) => {
+  Animated.spring(scale, {
+    toValue: 1.08,
+    friction: 6,
+    tension: 120,
+    useNativeDriver: false
+  }).start();
+};
+var runSliderThumbPressOutAnimation = (scale) => {
+  Animated.spring(scale, {
+    toValue: 1,
+    friction: 6,
+    tension: 120,
+    useNativeDriver: false
+  }).start();
+};
+
+// src/components/slider/slider.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
+function useSliderSizeStyles(size) {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    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 = useXUITheme();
+  const safeColor = getSafeThemeColor(color);
+  const palette = theme.colors[safeColor];
+  const fillColor = withPaletteNumber(palette.main, 400);
+  return useMemo(() => {
+    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
+import { StyleSheet } from "react-native";
+var styles = 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] = useState(
+    getInitialValue({
+      value: controlledValue,
+      defaultValue,
+      minValue,
+      maxValue
+    })
+  );
+  const [measuredTrackLength, setMeasuredTrackLength] = useState(
+    trackLength && trackLength > 0 ? trackLength : 0
+  );
+  const currentValue = isControlled ? clamp(controlledValue, minValue, maxValue) : internalValue;
+  const sizeStyles = useSliderSizeStyles(size);
+  const colorStyles = useSliderColorStyles(color, isDisabled);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const theme = useXUITheme();
+  const thumbScale = useRef(new Animated2.Value(1)).current;
+  const initialTouchTrackPosition = useRef(0);
+  const animatedTrackPosition = useRef(new Animated2.Value(0)).current;
+  const isDragging = useRef(false);
+  const currentValueRef = useRef(currentValue);
+  currentValueRef.current = currentValue;
+  const onChangeEndRef = useRef(onChangeEnd);
+  onChangeEndRef.current = onChangeEnd;
+  const thumbOverlapInset = Math.max(
+    0,
+    (sizeStyles.thumbSize - sizeStyles.trackThickness) / 2
+  );
+  const formattedValue = useMemo2(() => {
+    try {
+      return new Intl.NumberFormat(void 0, formatOptions).format(currentValue);
+    } catch {
+      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;
+  useEffect(() => {
+    if (!isDragging.current && effectiveTrackLength > 0) {
+      animatedTrackPosition.setValue(
+        clamp(thumbCenterPosition, 0, effectiveTrackLength)
+      );
+    }
+  }, [thumbCenterPosition, effectiveTrackLength, animatedTrackPosition]);
+  const animatedFillSize = useMemo2(() => {
+    const safeLength = Math.max(effectiveTrackLength, 1);
+    return animatedTrackPosition.interpolate({
+      inputRange: [0, safeLength],
+      outputRange: [0, safeLength],
+      extrapolate: "clamp"
+    });
+  }, [animatedTrackPosition, effectiveTrackLength]);
+  const animatedThumbOffset = useMemo2(() => {
+    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 = useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  const setValueFromPosition = useCallback(
+    (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 = useMemo2(
+    () => 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)
+        );
+        onChangeEndRef.current?.(nextValue);
+      },
+      onPanResponderTerminate: () => {
+        isDragging.current = false;
+        runSliderThumbPressOutAnimation(thumbScale);
+        const val = currentValueRef.current;
+        const pct = valueToPercent(val, minValue, maxValue);
+        animatedTrackPosition.setValue(getPixelPosition(pct, effectiveTrackLength));
+        onChangeEndRef.current?.(val);
+      }
+    }),
+    [
+      animatedTrackPosition,
+      effectiveTrackLength,
+      isInteractive,
+      minValue,
+      maxValue,
+      orientation,
+      setValueFromPosition,
+      thumbScale,
+      thumbOverlapInset
+    ]
+  );
+  const handleTrackLayout = useCallback(
+    (event) => {
+      if (trackLength && trackLength > 0) return;
+      const nextLength = orientation === "vertical" ? event.nativeEvent.layout.height : event.nativeEvent.layout.width;
+      setMeasuredTrackLength(nextLength);
+    },
+    [orientation, trackLength]
+  );
+  const steps = useMemo2(() => {
+    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__ */ React.createElement(View, { style: [styles.container, customAppearance?.container] }, (label !== void 0 || showValueLabel) && /* @__PURE__ */ React.createElement(View, { style: [styles.header, customAppearance?.header] }, label !== void 0 ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.label,
+        { color: colorStyles.labelColor, fontSize: sizeStyles.fontSize },
+        customAppearance?.label
+      ]
+    },
+    label
+  ) : /* @__PURE__ */ React.createElement(View, null), showValueLabel && /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.value,
+        { color: colorStyles.valueColor, fontSize: sizeStyles.fontSize },
+        customAppearance?.value
+      ]
+    },
+    formattedValue
+  )), /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        orientation === "vertical" ? styles.verticalRow : styles.row,
+        (isDisabled || isReadOnly) && styles.disabled
+      ]
+    },
+    startContent,
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        ...panResponder.panHandlers,
+        style: [
+          styles.trackContainer,
+          orientation === "vertical" && styles.verticalTrackContainer,
+          {
+            padding: thumbOverlapInset
+          },
+          trackContainerLengthStyle,
+          customAppearance?.trackContainer
+        ]
+      },
+      /* @__PURE__ */ React.createElement(
+        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%"
+            },
+            customAppearance?.track
+          ]
+        },
+        /* @__PURE__ */ React.createElement(
+          Animated2.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}%`
+              },
+              customAppearance?.fill
+            ]
+          }
+        ),
+        showSteps && steps.map((stepValue) => {
+          const percent = valueToPercent(stepValue, minValue, maxValue);
+          const isActive = stepValue <= currentValue;
+          return /* @__PURE__ */ React.createElement(
+            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
+                },
+                customAppearance?.step,
+                isActive && customAppearance?.activeStep
+              ]
+            }
+          );
+        })
+      ),
+      /* @__PURE__ */ React.createElement(
+        Animated2.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 }]
+            },
+            customAppearance?.thumb
+          ]
+        }
+      ),
+      marks?.map((mark) => {
+        const percent = valueToPercent(mark.value, minValue, maxValue);
+        return /* @__PURE__ */ React.createElement(
+          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
+              },
+              customAppearance?.mark
+            ]
+          },
+          /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              style: [
+                styles.markLabel,
+                { color: colorStyles.markColor },
+                customAppearance?.markLabel
+              ]
+            },
+            renderMarkLabel(mark)
+          )
+        );
+      })
+    ),
+    endContent
+  ));
+};
+export {
+  Slider
+};