@xaui/native 0.0.21 → 0.0.24

package/dist/checkbox/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-GHCVNQET.js";
 
 // src/components/checkbox/checkbox.tsx
 import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";

package/dist/chip/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-URBEEDFX.js";
 
 // src/components/chip/chip.tsx
 import React from "react";

package/dist/chunk-3XSXTM3G.js

@@ -0,0 +1,661 @@
+import {
+  useXUITheme
+} from "./chunk-I4V5Y5GD.js";
+
+// src/components/fab/fab.tsx
+import React4 from "react";
+import { Pressable, Text, View as View4, Animated as Animated4 } from "react-native";
+
+// src/components/indicator/indicator.tsx
+import React3 from "react";
+import { View as View3 } from "react-native";
+
+// src/components/indicator/circular-activity-indicator.tsx
+import React, { useEffect, useRef } from "react";
+import { Animated, Easing, Platform, View } from "react-native";
+
+// src/components/indicator/indicator.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  container: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%",
+    justifyContent: "center"
+  },
+  layer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  track: {
+    width: "100%",
+    overflow: "hidden"
+  },
+  progress: {
+    height: "100%"
+  }
+});
+
+// src/components/indicator/circular-activity-indicator.tsx
+import { getSafeThemeColor } from "@xaui/core";
+var DURATION = 1800;
+var CircularActivityIndicator = ({
+  size = 40,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  disableAnimation = false,
+  showTrack = true
+}) => {
+  const theme = useXUITheme();
+  const { current: timer } = useRef(new Animated.Value(0));
+  const rotation = useRef(void 0);
+  const startRotation = React.useCallback(() => {
+    if (rotation.current) {
+      timer.setValue(0);
+      Animated.loop(rotation.current).start();
+    }
+  }, [timer]);
+  const stopRotation = () => {
+    if (rotation.current) rotation.current.stop();
+  };
+  useEffect(() => {
+    if (rotation.current === void 0) {
+      rotation.current = Animated.timing(timer, {
+        duration: DURATION,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== "web",
+        toValue: 1
+      });
+    }
+    if (!disableAnimation) startRotation();
+    else stopRotation();
+  }, [disableAnimation, startRotation, timer]);
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const mainColor = color || colorScheme.main;
+  const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
+  const strokeWidth = size * 0.1;
+  const frames = 60 * DURATION / 1e3;
+  const easing = Easing.bezier(0.4, 0, 0.7, 1);
+  const containerStyle = {
+    width: size,
+    height: size / 2,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, { width: size, height: size }] }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: strokeWidth,
+        borderColor: trackColor
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: {
+        width: size,
+        height: size,
+        position: "absolute"
+      }
+    },
+    [0, 1].map((index) => {
+      const inputRange = Array.from(
+        new Array(frames),
+        (_, frameIndex) => frameIndex / (frames - 1)
+      );
+      const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+        let progress = 2 * frameIndex / (frames - 1);
+        const rotationValue = index ? +(360 - 15) : -(180 - 15);
+        if (progress > 1) {
+          progress = 2 - progress;
+        }
+        const direction = index ? -1 : 1;
+        return `${direction * (180 - 30) * easing(progress) + rotationValue}deg`;
+      });
+      const layerStyle = {
+        width: size,
+        height: size,
+        transform: [
+          {
+            rotate: timer.interpolate({
+              inputRange: [0, 1],
+              outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`]
+            })
+          }
+        ]
+      };
+      const viewportStyle = {
+        width: size,
+        height: size,
+        transform: [
+          { translateY: index ? -size / 2 : 0 },
+          {
+            rotate: timer.interpolate({ inputRange, outputRange })
+          }
+        ]
+      };
+      const offsetStyle = index ? { top: size / 2 } : null;
+      const lineStyle = {
+        width: size,
+        height: size,
+        borderColor: mainColor,
+        borderWidth: strokeWidth,
+        borderRadius: size / 2
+      };
+      return /* @__PURE__ */ React.createElement(Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ React.createElement(Animated.View, { style: layerStyle }, /* @__PURE__ */ React.createElement(
+        Animated.View,
+        {
+          style: [containerStyle, offsetStyle],
+          collapsable: false
+        },
+        /* @__PURE__ */ React.createElement(Animated.View, { style: viewportStyle }, /* @__PURE__ */ React.createElement(Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ React.createElement(Animated.View, { style: lineStyle })))
+      )));
+    })
+  ));
+};
+
+// src/components/indicator/linear-activity-indicator.tsx
+import React2 from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import Animated2, { useAnimatedStyle } from "react-native-reanimated";
+
+// src/components/indicator/indicator.hook.ts
+import { useEffect as useEffect2 } from "react";
+import {
+  Easing as Easing2,
+  cancelAnimation,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming
+} from "react-native-reanimated";
+var useLinearActivityIndicatorAnimation = (disableAnimation) => {
+  const primaryTranslateX = useSharedValue(0);
+  const primaryScaleX = useSharedValue(0.08);
+  const secondaryTranslateX = useSharedValue(0);
+  const secondaryScaleX = useSharedValue(0.08);
+  useEffect2(() => {
+    if (disableAnimation) {
+      cancelAnimation(primaryTranslateX);
+      cancelAnimation(primaryScaleX);
+      cancelAnimation(secondaryTranslateX);
+      cancelAnimation(secondaryScaleX);
+      return;
+    }
+    primaryTranslateX.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 0 }),
+        withTiming(0, { duration: 400, easing: Easing2.linear }),
+        withTiming(0.836714, {
+          duration: 783,
+          easing: Easing2.bezier(0.5, 0, 0.701732, 0.495819)
+        }),
+        withTiming(2.00611, {
+          duration: 817,
+          easing: Easing2.bezier(0.302435, 0.381352, 0.55, 0.956352)
+        })
+      ),
+      -1,
+      false
+    );
+    primaryScaleX.value = withRepeat(
+      withSequence(
+        withTiming(0.08, { duration: 0 }),
+        withTiming(0.08, { duration: 733, easing: Easing2.linear }),
+        withTiming(0.661479, {
+          duration: 650,
+          easing: Easing2.bezier(0.334731, 0.12482, 0.785844, 1)
+        }),
+        withTiming(0.08, {
+          duration: 617,
+          easing: Easing2.bezier(0.06, 0.11, 0.6, 1)
+        })
+      ),
+      -1,
+      false
+    );
+    secondaryTranslateX.value = withRepeat(
+      withSequence(
+        withTiming(0, { duration: 0 }),
+        withTiming(0.376519, {
+          duration: 500,
+          easing: Easing2.bezier(0.15, 0, 0.515058, 0.409685)
+        }),
+        withTiming(0.843862, {
+          duration: 467,
+          easing: Easing2.bezier(0.31033, 0.284058, 0.8, 0.733712)
+        }),
+        withTiming(1.60278, {
+          duration: 1033,
+          easing: Easing2.bezier(0.4, 0.627035, 0.6, 0.902026)
+        })
+      ),
+      -1,
+      false
+    );
+    secondaryScaleX.value = withRepeat(
+      withSequence(
+        withTiming(0.08, { duration: 0 }),
+        withTiming(0.457104, {
+          duration: 383,
+          easing: Easing2.bezier(0.205028, 0.057051, 0.57661, 0.453971)
+        }),
+        withTiming(0.72796, {
+          duration: 500,
+          easing: Easing2.bezier(0.152313, 0.196432, 0.648374, 1.00432)
+        }),
+        withTiming(0.08, {
+          duration: 1117,
+          easing: Easing2.bezier(0.257759, -3163e-6, 0.211762, 1.38179)
+        })
+      ),
+      -1,
+      false
+    );
+    return () => {
+      cancelAnimation(primaryTranslateX);
+      cancelAnimation(primaryScaleX);
+      cancelAnimation(secondaryTranslateX);
+      cancelAnimation(secondaryScaleX);
+    };
+  }, [disableAnimation]);
+  return {
+    primaryTranslateX,
+    primaryScaleX,
+    secondaryTranslateX,
+    secondaryScaleX
+  };
+};
+
+// src/components/indicator/linear-activity-indicator.tsx
+var LinearActivityIndicator = ({
+  size = 4,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  disableAnimation = false,
+  borderRadius = 0,
+  showTrack = true
+}) => {
+  const theme = useXUITheme();
+  const { primaryTranslateX, primaryScaleX, secondaryTranslateX, secondaryScaleX } = useLinearActivityIndicatorAnimation(disableAnimation);
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color || colorScheme.main;
+  const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
+  const barStyle = {
+    ...StyleSheet2.absoluteFillObject,
+    backgroundColor: mainColor,
+    borderRadius
+  };
+  const primaryStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: `${(primaryTranslateX.value - 1.45167) * 100}%` },
+      { scaleX: primaryScaleX.value }
+    ]
+  }));
+  const secondaryStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: `${(secondaryTranslateX.value - 0.548889) * 100}%` },
+      { scaleX: secondaryScaleX.value }
+    ]
+  }));
+  return /* @__PURE__ */ React2.createElement(
+    View2,
+    {
+      style: {
+        height: size,
+        width: "100%",
+        borderRadius,
+        backgroundColor: trackColor,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(Animated2.View, { style: [barStyle, primaryStyle] }),
+    /* @__PURE__ */ React2.createElement(Animated2.View, { style: [barStyle, secondaryStyle] })
+  );
+};
+
+// src/components/indicator/indicator.tsx
+var ActivityIndicator = (props) => {
+  const {
+    variant = "circular",
+    themeColor = "primary",
+    color,
+    backgroundColor,
+    size,
+    disableAnimation = false,
+    borderRadius,
+    showTrack
+  } = props;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = backgroundColor ?? (showTrack ? colorScheme.background : "transparent");
+  if (variant === "circular") {
+    const circleSize = size ?? 40;
+    return /* @__PURE__ */ React3.createElement(
+      View3,
+      {
+        style: [styles.container, { width: circleSize, height: circleSize }],
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: "Loading"
+      },
+      /* @__PURE__ */ React3.createElement(
+        CircularActivityIndicator,
+        {
+          size: circleSize,
+          themeColor,
+          color: mainColor,
+          backgroundColor: trackColor,
+          disableAnimation
+        }
+      )
+    );
+  }
+  const linearSize = size ?? 4;
+  return /* @__PURE__ */ React3.createElement(
+    View3,
+    {
+      style: styles.container,
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: "Loading"
+    },
+    /* @__PURE__ */ React3.createElement(
+      LinearActivityIndicator,
+      {
+        size: linearSize,
+        themeColor,
+        color: mainColor,
+        backgroundColor: trackColor,
+        disableAnimation,
+        borderRadius,
+        showTrack
+      }
+    )
+  );
+};
+
+// src/components/fab/fab.style.ts
+import { StyleSheet as StyleSheet3 } from "react-native";
+var styles2 = StyleSheet3.create({
+  container: {
+    alignSelf: "flex-start"
+  },
+  fab: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  contentContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12
+  },
+  label: {
+    fontWeight: "500"
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/fab/fab.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
+function useFabSizeStyles(size) {
+  const theme = useXUITheme();
+  const sizeStyles = useMemo(() => {
+    const sizes = {
+      sm: {
+        width: 40,
+        height: 40,
+        borderRadius: theme.borderRadius.lg,
+        iconSize: 24,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        width: 56,
+        height: 56,
+        borderRadius: theme.borderRadius.xl,
+        iconSize: 24,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        width: 96,
+        height: 96,
+        borderRadius: theme.borderRadius["2xl"],
+        iconSize: 36,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  const extendedSizeStyles = useMemo(() => {
+    const sizes = {
+      sm: {
+        height: 40,
+        borderRadius: theme.borderRadius.lg,
+        paddingHorizontal: theme.spacing.md,
+        iconSize: 20,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        height: 56,
+        borderRadius: theme.borderRadius.xl,
+        paddingHorizontal: theme.spacing.lg,
+        iconSize: 24,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        height: 80,
+        borderRadius: theme.borderRadius["2xl"],
+        paddingHorizontal: theme.spacing.xl,
+        iconSize: 28,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  return { sizeStyles, extendedSizeStyles };
+}
+function useFabVariantStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor2(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = useMemo(() => {
+    const variantMap = {
+      solid: {
+        backgroundColor: colorScheme.main,
+        borderWidth: 0
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor: colorScheme.main
+      }
+    };
+    const baseStyle = variantMap[variant];
+    const shouldApplyElevation = variant !== "outlined";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      ...shouldApplyElevation ? shadowStyles : {},
+      ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
+    };
+  }, [variant, colorScheme, theme, elevation]);
+  return variantStyles;
+}
+function useFabIconColor(themeColor, variant) {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor2(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const iconColor = useMemo(() => {
+    if (variant === "solid") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return { iconColor };
+}
+function useFabRadiusValue(radius, fallback) {
+  const theme = useXUITheme();
+  return useMemo(() => {
+    if (!radius) return fallback;
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return radiusMap[radius];
+  }, [fallback, radius, theme]);
+}
+
+// src/components/fab/fab.animation.ts
+import { Animated as Animated3 } from "react-native";
+var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
+  Animated3.parallel([
+    Animated3.spring(animatedScale, {
+      toValue: 0.92,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    Animated3.timing(animatedOpacity, {
+      toValue: 0.85,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
+  Animated3.parallel([
+    Animated3.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    Animated3.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/fab/fab.tsx
+var Fab = ({
+  icon,
+  label,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius,
+  isDisabled = false,
+  isLoading = false,
+  elevation = 0,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = React4.useRef(new Animated4.Value(1)).current;
+  const animatedOpacity = React4.useRef(new Animated4.Value(1)).current;
+  const { sizeStyles, extendedSizeStyles } = useFabSizeStyles(size);
+  const variantStyles = useFabVariantStyles(themeColor, variant, elevation);
+  const { iconColor } = useFabIconColor(themeColor, variant);
+  const isExtended = !!label;
+  const resolvedRadius = useFabRadiusValue(
+    radius,
+    isExtended ? extendedSizeStyles.borderRadius : sizeStyles.borderRadius
+  );
+  const handlePressIn = (event) => {
+    if (!isDisabled && !isLoading) {
+      runFabPressInAnimation(animatedScale, animatedOpacity);
+    }
+    onPressIn?.(event);
+  };
+  const handlePressOut = (event) => {
+    if (!isDisabled && !isLoading) {
+      runFabPressOutAnimation(animatedScale, animatedOpacity);
+    }
+    onPressOut?.(event);
+  };
+  const fabDimensionStyles = isExtended ? {
+    height: extendedSizeStyles.height,
+    borderRadius: resolvedRadius,
+    paddingHorizontal: extendedSizeStyles.paddingHorizontal
+  } : {
+    width: sizeStyles.width,
+    height: sizeStyles.height,
+    borderRadius: resolvedRadius
+  };
+  return /* @__PURE__ */ React4.createElement(View4, { style: [styles2.container, customAppearance?.container] }, /* @__PURE__ */ React4.createElement(
+    Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ React4.createElement(
+      Animated4.View,
+      {
+        style: [
+          styles2.fab,
+          fabDimensionStyles,
+          variantStyles,
+          isDisabled && styles2.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.fab
+        ]
+      },
+      isLoading ? /* @__PURE__ */ React4.createElement(
+        ActivityIndicator,
+        {
+          variant: "circular",
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? iconColor : void 0,
+          size: isExtended ? extendedSizeStyles.iconSize : sizeStyles.iconSize
+        }
+      ) : /* @__PURE__ */ React4.createElement(View4, { style: styles2.contentContainer }, icon, isExtended && /* @__PURE__ */ React4.createElement(
+        Text,
+        {
+          style: [
+            styles2.label,
+            {
+              fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
+              color: iconColor
+            }
+          ]
+        },
+        label
+      ))
+    )
+  ));
+};
+
+export {
+  Fab
+};