@xaui/native 0.0.6 → 0.0.8

package/dist/switch/index.js

@@ -0,0 +1,357 @@
+import {
+  useXUITheme
+} from "../chunk-ORMNMNOK.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.background : colorScheme.main : theme.colors.default.background;
+    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
+};