@xaui/native 0.0.27 → 0.0.28

package/dist/chunk-HC2SSHNU.js

@@ -0,0 +1,368 @@
+import {
+  Portal,
+  useXUITheme
+} from "./chunk-LTKYHG5V.js";
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+import React from "react";
+import { Animated as Animated3, Pressable, View } from "react-native";
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated as Animated2, Dimensions, PanResponder } from "react-native";
+import { getSafeThemeColor } from "@xaui/core";
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+import { Animated, Easing } from "react-native";
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: Easing.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = Animated.parallel([
+    Animated.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = Animated.parallel([
+    Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = Animated.spring(translateY, {
+    ...SPRING_CONFIG,
+    toValue: targetTranslateY
+  });
+  animation.start();
+  return animation;
+};
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var DISMISS_VELOCITY_THRESHOLD = 0.5;
+var DISMISS_DISTANCE_FRACTION = 0.3;
+var SCREEN_HEIGHT = Dimensions.get("window").height;
+var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
+var useBottomSheetAnimation = ({
+  isOpen,
+  snapPoints,
+  initialSnapIndex,
+  enableSwipeToDismiss,
+  disableAnimation,
+  onClose,
+  onSnapChange
+}) => {
+  const [shouldRender, setShouldRender] = useState(false);
+  const currentSnapIndex = useRef(initialSnapIndex);
+  const animationRef = useRef(null);
+  const translateY = useRef(new Animated2.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = useRef(new Animated2.Value(0)).current;
+  const sortedSnapPoints = useMemo(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = useMemo(
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = useCallback(() => {
+    setShouldRender(true);
+    const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
+    currentSnapIndex.current = targetIndex;
+    if (disableAnimation) {
+      translateY.setValue(snapTranslateValues[targetIndex]);
+      backdropOpacity.setValue(1);
+      return;
+    }
+    translateY.setValue(SCREEN_HEIGHT);
+    backdropOpacity.setValue(0);
+    animationRef.current?.stop();
+    animationRef.current = runOpenAnimation(
+      translateY,
+      backdropOpacity,
+      snapTranslateValues[targetIndex]
+    );
+  }, [
+    initialSnapIndex,
+    sortedSnapPoints,
+    snapTranslateValues,
+    disableAnimation,
+    translateY,
+    backdropOpacity
+  ]);
+  const close = useCallback(() => {
+    if (disableAnimation) {
+      translateY.setValue(SCREEN_HEIGHT);
+      backdropOpacity.setValue(0);
+      setShouldRender(false);
+      onClose?.();
+      return;
+    }
+    animationRef.current?.stop();
+    animationRef.current = runCloseAnimation(
+      translateY,
+      backdropOpacity,
+      SCREEN_HEIGHT,
+      () => {
+        setShouldRender(false);
+        onClose?.();
+      }
+    );
+  }, [disableAnimation, translateY, backdropOpacity, onClose]);
+  const snapTo = useCallback(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
+      currentSnapIndex.current = clampedIndex;
+      onSnapChange?.(clampedIndex);
+      if (disableAnimation) {
+        translateY.setValue(snapTranslateValues[clampedIndex]);
+        return;
+      }
+      animationRef.current?.stop();
+      animationRef.current = runSnapAnimation(
+        translateY,
+        snapTranslateValues[clampedIndex]
+      );
+    },
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
+  );
+  useEffect(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
+      onPanResponderMove: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const newTranslateY = currentTranslate + gestureState.dy;
+        const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
+        const clamped = Math.max(maxExpanded, newTranslateY);
+        translateY.setValue(clamped);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const finalPosition = currentTranslate + gestureState.dy;
+        if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
+          close();
+          return;
+        }
+        if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
+          const nextIndex = Math.min(
+            currentSnapIndex.current + 1,
+            sortedSnapPoints.length - 1
+          );
+          snapTo(nextIndex);
+          return;
+        }
+        if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
+          const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
+          if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
+            close();
+            return;
+          }
+          snapTo(prevIndex);
+          return;
+        }
+        let closestIndex = 0;
+        let minDistance = Infinity;
+        snapTranslateValues.forEach((snapVal, index) => {
+          const distance = Math.abs(finalPosition - snapVal);
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = index;
+          }
+        });
+        snapTo(closestIndex);
+      }
+    }),
+    [
+      snapTranslateValues,
+      sortedSnapPoints,
+      enableSwipeToDismiss,
+      translateY,
+      close,
+      snapTo
+    ]
+  );
+  return {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    snapTo,
+    screenHeight: SCREEN_HEIGHT
+  };
+};
+var useBottomSheetStyles = (themeColor, radius) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = useMemo(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = useMemo(
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  sheet: {
+    overflow: "hidden"
+  },
+  handle: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10
+  },
+  handleIndicator: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var BottomSheet = ({
+  children,
+  isOpen,
+  snapPoints = [0.4, 0.9],
+  initialSnapIndex = 0,
+  themeColor = "default",
+  radius = "lg",
+  showBackdrop = true,
+  closeOnBackdropPress = true,
+  enableSwipeToDismiss = true,
+  showHandle = true,
+  disableAnimation = false,
+  style,
+  handleContent,
+  onClose,
+  onSnapChange
+}) => {
+  const {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    screenHeight
+  } = useBottomSheetAnimation({
+    isOpen,
+    snapPoints,
+    initialSnapIndex,
+    enableSwipeToDismiss,
+    disableAnimation,
+    onClose,
+    onSnapChange
+  });
+  const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
+    themeColor,
+    radius
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React.createElement(Animated3.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ React.createElement(
+    Animated3.View,
+    {
+      style: [
+        styles.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ React.createElement(View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: [
+            styles.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ React.createElement(View, { style: styles.content }, children)
+    )
+  ));
+};
+
+export {
+  BottomSheet
+};

package/dist/chunk-HSPTLUFA.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/core/index.ts
+var _theme = require('@xaui/core/theme');
+
+
+
+
+exports.defaultDarkTheme = _theme.defaultDarkTheme; exports.defaultTheme = _theme.defaultTheme;

package/dist/chunk-JEGEPGVU.js

@@ -0,0 +1,287 @@
+import {
+  ActivityIndicator
+} from "./chunk-F7WH4DMG.js";
+import {
+  useXUITheme
+} from "./chunk-LTKYHG5V.js";
+
+// src/components/fab/fab.tsx
+import React from "react";
+import { Pressable, Text, View, Animated as Animated2 } from "react-native";
+
+// src/components/fab/fab.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.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 } 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 = getSafeThemeColor(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 = getSafeThemeColor(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 } from "react-native";
+var runFabPressInAnimation = (animatedScale, animatedOpacity) => {
+  Animated.parallel([
+    Animated.spring(animatedScale, {
+      toValue: 0.92,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    Animated.timing(animatedOpacity, {
+      toValue: 0.85,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runFabPressOutAnimation = (animatedScale, animatedOpacity) => {
+  Animated.parallel([
+    Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    Animated.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 = React.useRef(new Animated2.Value(1)).current;
+  const animatedOpacity = React.useRef(new Animated2.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__ */ React.createElement(View, { style: [styles.container, customAppearance?.container] }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ React.createElement(
+      Animated2.View,
+      {
+        style: [
+          styles.fab,
+          fabDimensionStyles,
+          variantStyles,
+          isDisabled && styles.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.fab
+        ]
+      },
+      isLoading ? /* @__PURE__ */ React.createElement(
+        ActivityIndicator,
+        {
+          variant: "circular",
+          themeColor: variant === "solid" ? void 0 : themeColor,
+          color: variant === "solid" ? iconColor : void 0,
+          size: isExtended ? extendedSizeStyles.iconSize : sizeStyles.iconSize
+        }
+      ) : /* @__PURE__ */ React.createElement(View, { style: styles.contentContainer }, icon, isExtended && /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles.label,
+            {
+              fontSize: isExtended ? extendedSizeStyles.fontSize : sizeStyles.fontSize,
+              color: iconColor
+            }
+          ]
+        },
+        label
+      ))
+    )
+  ));
+};
+
+export {
+  Fab
+};