@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/switch/index.js

@@ -1,358 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/switch/switch.tsx
-import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";
-import { Animated as Animated2, Pressable, Text, View } from "react-native";
-
-// src/components/switch/switch.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor } from "@xaui/core";
-var useSwitchColorScheme = (themeColor) => {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  return theme.colors[safeThemeColor];
-};
-var useSwitchSizeStyles = (variant, size) => {
-  const theme = useXUITheme();
-  const sizeStyles = useMemo(() => {
-    if (variant === "overlap") {
-      const sizes2 = {
-        sm: {
-          trackWidth: 40,
-          trackHeight: 16,
-          thumbSize: 22,
-          fontSize: theme.fontSizes.sm,
-          padding: 0
-        },
-        md: {
-          trackWidth: 48,
-          trackHeight: 18,
-          thumbSize: 26,
-          fontSize: theme.fontSizes.md,
-          padding: 0
-        },
-        lg: {
-          trackWidth: 56,
-          trackHeight: 20,
-          thumbSize: 30,
-          fontSize: theme.fontSizes.lg,
-          padding: 0
-        }
-      };
-      return sizes2[size];
-    }
-    const sizes = {
-      sm: {
-        trackWidth: 40,
-        trackHeight: 24,
-        thumbSize: 18,
-        fontSize: theme.fontSizes.sm,
-        padding: 3
-      },
-      md: {
-        trackWidth: 48,
-        trackHeight: 28,
-        thumbSize: 22,
-        fontSize: theme.fontSizes.md,
-        padding: 3
-      },
-      lg: {
-        trackWidth: 56,
-        trackHeight: 32,
-        thumbSize: 26,
-        fontSize: theme.fontSizes.lg,
-        padding: 3
-      }
-    };
-    return sizes[size];
-  }, [size, theme, variant]);
-  return sizeStyles;
-};
-var useSwitchRadiusStyles = (radius) => {
-  const theme = useXUITheme();
-  const radiusStyles = useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: radii[radius] };
-  }, [radius, theme]);
-  const thumbRadius = useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return radii[radius];
-  }, [radius, theme]);
-  return { radiusStyles, thumbRadius };
-};
-var useSwitchTrackStyles = ({
-  colorScheme,
-  isSelected,
-  variant,
-  sizeStyles,
-  radiusStyles
-}) => {
-  const theme = useXUITheme();
-  const trackStyles = useMemo(() => {
-    const backgroundColor = isSelected ? variant === "overlap" ? colorScheme.container : colorScheme.main : theme.colors.default.container;
-    return {
-      width: sizeStyles.trackWidth,
-      height: sizeStyles.trackHeight,
-      backgroundColor,
-      paddingHorizontal: sizeStyles.padding,
-      ...radiusStyles
-    };
-  }, [colorScheme, isSelected, radiusStyles, sizeStyles, theme, variant]);
-  return trackStyles;
-};
-var useSwitchThumbStyles = ({
-  colorScheme,
-  isSelected,
-  variant,
-  sizeStyles,
-  thumbRadius
-}) => {
-  const theme = useXUITheme();
-  const thumbStyles = useMemo(() => {
-    const baseStyle = {
-      width: sizeStyles.thumbSize,
-      height: sizeStyles.thumbSize,
-      borderRadius: thumbRadius,
-      backgroundColor: variant === "overlap" && isSelected ? colorScheme.main : theme.colors.background
-    };
-    if (variant !== "overlap") return baseStyle;
-    return {
-      ...baseStyle,
-      ...theme.shadows.sm
-    };
-  }, [colorScheme, isSelected, sizeStyles, theme, thumbRadius, variant]);
-  return thumbStyles;
-};
-var useSwitchContainerStyles = (labelAlignment) => {
-  const containerStyles = useMemo(() => {
-    const isJustified = labelAlignment === "justify-left" || labelAlignment === "justify-right";
-    return {
-      flexDirection: labelAlignment === "left" || labelAlignment === "justify-left" ? "row-reverse" : "row",
-      justifyContent: isJustified ? "space-between" : "flex-start"
-    };
-  }, [labelAlignment]);
-  return containerStyles;
-};
-
-// src/components/switch/switch.animation.ts
-import { Animated } from "react-native";
-var runThumbPositionAnimation = (thumbPosition, isSelected) => {
-  Animated.spring(thumbPosition, {
-    toValue: isSelected ? 1 : 0,
-    useNativeDriver: true,
-    damping: 15,
-    stiffness: 150
-  }).start();
-};
-var runSwitchPressInAnimation = (animatedScale, animatedThumbScale, isOverlap) => {
-  Animated.parallel([
-    Animated.spring(animatedScale, {
-      toValue: 0.95,
-      useNativeDriver: true
-    }),
-    Animated.spring(animatedThumbScale, {
-      toValue: isOverlap ? 1.1 : 1.2,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runSwitchPressOutAnimation = (animatedScale, animatedThumbScale) => {
-  Animated.parallel([
-    Animated.spring(animatedScale, {
-      toValue: 1,
-      useNativeDriver: true
-    }),
-    Animated.spring(animatedThumbScale, {
-      toValue: 1,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-
-// src/components/switch/switch.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  fullWidth: {
-    width: "100%"
-  },
-  track: {
-    justifyContent: "center",
-    position: "relative"
-  },
-  thumbContainer: {
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  thumb: {
-    position: "absolute",
-    left: 0
-  },
-  label: {
-    fontWeight: "400"
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  disabledText: {
-    opacity: 0.7
-  }
-});
-
-// src/components/switch/switch.tsx
-var Switch = ({
-  label,
-  labelAlignment = "right",
-  themeColor = "primary",
-  variant = "inside",
-  size = "md",
-  radius = "full",
-  fullWidth = false,
-  isSelected: isSelectedProp,
-  isDisabled = false,
-  labelStyle,
-  style,
-  onValueChange
-}) => {
-  const theme = useXUITheme();
-  const isControlled = typeof isSelectedProp === "boolean";
-  const [internalSelected, setInternalSelected] = useState(isSelectedProp ?? false);
-  const isSelected = isControlled ? isSelectedProp : internalSelected;
-  const scale = useRef(new Animated2.Value(1)).current;
-  const thumbPosition = useRef(new Animated2.Value(isSelected ? 1 : 0)).current;
-  const thumbScale = useRef(new Animated2.Value(1)).current;
-  const colorScheme = useSwitchColorScheme(themeColor);
-  const sizeStyles = useSwitchSizeStyles(variant, size);
-  const { radiusStyles, thumbRadius } = useSwitchRadiusStyles(radius);
-  const trackStyles = useSwitchTrackStyles({
-    colorScheme,
-    isSelected,
-    variant,
-    sizeStyles,
-    radiusStyles
-  });
-  const thumbStyles = useSwitchThumbStyles({
-    colorScheme,
-    isSelected,
-    variant,
-    sizeStyles,
-    thumbRadius
-  });
-  const containerStyles = useSwitchContainerStyles(labelAlignment);
-  const maxTranslateX = useMemo2(() => {
-    if (variant === "overlap") {
-      return sizeStyles.trackWidth - sizeStyles.thumbSize;
-    }
-    return sizeStyles.trackWidth - sizeStyles.thumbSize - sizeStyles.padding * 2;
-  }, [sizeStyles, variant]);
-  const translateX = useMemo2(
-    () => thumbPosition.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, maxTranslateX]
-    }),
-    [maxTranslateX, thumbPosition]
-  );
-  useEffect(() => {
-    runThumbPositionAnimation(thumbPosition, isSelected);
-  }, [isSelected, thumbPosition]);
-  const handlePress = () => {
-    if (isDisabled) return;
-    const nextValue = !isSelected;
-    onValueChange?.(nextValue);
-    if (!isControlled) {
-      setInternalSelected(nextValue);
-    }
-  };
-  const handlePressIn = () => {
-    if (isDisabled) return;
-    runSwitchPressInAnimation(scale, thumbScale, variant === "overlap");
-  };
-  const handlePressOut = () => {
-    if (isDisabled) return;
-    runSwitchPressOutAnimation(scale, thumbScale);
-  };
-  return /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled: isDisabled,
-      accessible: true,
-      accessibilityRole: "switch",
-      accessibilityLabel: label,
-      accessibilityState: {
-        disabled: isDisabled,
-        checked: isSelected
-      },
-      style: [
-        styles.container,
-        containerStyles,
-        fullWidth && styles.fullWidth,
-        isDisabled && styles.disabled,
-        style
-      ]
-    },
-    /* @__PURE__ */ React.createElement(
-      Animated2.View,
-      {
-        style: [
-          styles.track,
-          trackStyles,
-          {
-            transform: [{ scale }]
-          }
-        ]
-      },
-      /* @__PURE__ */ React.createElement(View, { style: styles.thumbContainer }, /* @__PURE__ */ React.createElement(
-        Animated2.View,
-        {
-          style: [
-            styles.thumb,
-            thumbStyles,
-            {
-              transform: [{ translateX }, { scale: thumbScale }]
-            }
-          ]
-        }
-      ))
-    ),
-    label && /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [
-          styles.label,
-          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
-          isDisabled && styles.disabledText,
-          labelStyle
-        ]
-      },
-      label
-    )
-  );
-};
-export {
-  Switch
-};