@xaui/native 0.0.13 → 0.0.14

package/dist/index.cjs

@@ -37,6 +37,7 @@ __export(src_exports, {
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
+  BottomSheet: () => BottomSheet,
   DatePicker: () => DatePicker,
   Divider: () => Divider,
   Typography: () => Typography
@@ -1441,7 +1442,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
     }
-    const styles12 = {
+    const styles13 = {
       outlined: {
         backgroundColor: "transparent",
         borderWidth: theme.borderWidth.md,
@@ -1466,7 +1467,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
         borderColor
       }
     };
-    return styles12[variant];
+    return styles13[variant];
   }, [variant, theme, colorScheme, isInvalid, themeColor]);
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
@@ -4133,7 +4134,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       };
     }
-    const styles12 = {
+    const styles13 = {
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -4185,7 +4186,7 @@ var useTypographyVariantStyles = (variant) => {
         fontWeight: theme.fontWeights.normal
       }
     };
-    return styles12[variant];
+    return styles13[variant];
   }, [theme, variant]);
   return variantStyles;
 };
@@ -4224,6 +4225,377 @@ var Typography = ({
     children
   );
 };
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var import_react44 = __toESM(require("react"), 1);
+var import_react_native41 = require("react-native");
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var import_react43 = require("react");
+var import_react_native39 = require("react-native");
+var import_core32 = require("@xaui/core");
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+var import_react_native38 = require("react-native");
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: import_react_native38.Easing.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = import_react_native38.Animated.parallel([
+    import_react_native38.Animated.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    import_react_native38.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = import_react_native38.Animated.parallel([
+    import_react_native38.Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    import_react_native38.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = import_react_native38.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 = import_react_native39.Dimensions.get("window").height;
+var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
+var useBottomSheetAnimation = ({
+  isOpen,
+  snapPoints,
+  initialSnapIndex,
+  enableSwipeToDismiss,
+  disableAnimation,
+  onClose,
+  onSnapChange
+}) => {
+  const [shouldRender, setShouldRender] = (0, import_react43.useState)(false);
+  const currentSnapIndex = (0, import_react43.useRef)(initialSnapIndex);
+  const animationRef = (0, import_react43.useRef)(null);
+  const translateY = (0, import_react43.useRef)(new import_react_native39.Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = (0, import_react43.useRef)(new import_react_native39.Animated.Value(0)).current;
+  const sortedSnapPoints = (0, import_react43.useMemo)(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = (0, import_react43.useMemo)(
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = (0, import_react43.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 = (0, import_react43.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 = (0, import_react43.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]
+  );
+  (0, import_react43.useEffect)(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = (0, import_react43.useMemo)(
+    () => import_react_native39.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 = (0, import_core32.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = (0, import_react43.useMemo)(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = (0, import_react43.useMemo)(
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+var import_react_native40 = require("react-native");
+var styles12 = import_react_native40.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__ */ import_react44.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react44.default.createElement(
+    import_react_native41.Animated.View,
+    {
+      style: [styles12.backdrop, { opacity: backdropOpacity }]
+    },
+    /* @__PURE__ */ import_react44.default.createElement(
+      import_react_native41.Pressable,
+      {
+        style: styles12.backdrop,
+        onPress: handleBackdropPress
+      }
+    )
+  ), /* @__PURE__ */ import_react44.default.createElement(
+    import_react_native41.Animated.View,
+    {
+      style: [
+        styles12.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react44.default.createElement(
+      import_react_native41.View,
+      {
+        style: [
+          styles12.sheet,
+          { height: screenHeight },
+          sheetStyles,
+          style
+        ],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ import_react44.default.createElement(import_react_native41.View, { style: styles12.handle }, handleContent ?? /* @__PURE__ */ import_react44.default.createElement(
+        import_react_native41.View,
+        {
+          style: [
+            styles12.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ import_react44.default.createElement(import_react_native41.View, { style: styles12.content }, children)
+    )
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActivityIndicator,
@@ -4233,6 +4605,7 @@ var Typography = ({
   Avatar,
   AvatarGroup,
   Badge,
+  BottomSheet,
   DatePicker,
   Divider,
   Typography

package/dist/index.d.cts

@@ -6,6 +6,7 @@ export { Alert } from './alert/index.cjs';
 export { Autocomplete, AutocompleteItem } from './autocomplete/index.cjs';
 export { DatePicker } from './datepicker/index.cjs';
 export { Typography } from './typography/index.cjs';
+export { BottomSheet } from './bottom-sheet/index.cjs';
 import 'react';
 import './index-BOw6tbkc.cjs';
 import 'react-native';

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { Alert } from './alert/index.js';
 export { Autocomplete, AutocompleteItem } from './autocomplete/index.js';
 export { DatePicker } from './datepicker/index.js';
 export { Typography } from './typography/index.js';
+export { BottomSheet } from './bottom-sheet/index.js';
 import 'react';
 import './index-BOw6tbkc.js';
 import 'react-native';

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  BottomSheet
+} from "./chunk-GAOI4KIV.js";
 import {
   Avatar,
   AvatarGroup
@@ -34,6 +37,7 @@ export {
   Avatar,
   AvatarGroup,
   Badge,
+  BottomSheet,
   DatePicker,
   Divider,
   Typography

package/dist/menu/index.cjs

@@ -251,7 +251,7 @@ var Menu = ({
             {
               top: isMeasured ? menuPosition.top : -9999,
               left: isMeasured ? menuPosition.left : -9999,
-              backgroundColor: theme.colors.background,
+              backgroundColor: theme.mode === "dark" ? theme.colors.default.background : theme.colors.background,
               borderRadius: theme.borderRadius.md,
               opacity: isMeasured ? opacity : 0,
               transform: [{ scale }],

package/dist/menu/index.js

@@ -4,13 +4,7 @@ import {
 
 // src/components/menu/menu.tsx
 import React from "react";
-import {
-  Animated as Animated2,
-  Modal,
-  Pressable,
-  ScrollView,
-  View
-} from "react-native";
+import { Animated as Animated2, Modal, Pressable, ScrollView, View } from "react-native";
 
 // src/components/menu/menu.style.ts
 import { StyleSheet } from "react-native";
@@ -185,7 +179,7 @@ var Menu = ({
             {
               top: isMeasured ? menuPosition.top : -9999,
               left: isMeasured ? menuPosition.left : -9999,
-              backgroundColor: theme.colors.background,
+              backgroundColor: theme.mode === "dark" ? theme.colors.default.background : theme.colors.background,
               borderRadius: theme.borderRadius.md,
               opacity: isMeasured ? opacity : 0,
               transform: [{ scale }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -102,6 +102,11 @@
       "import": "./dist/view/index.js",
       "require": "./dist/view/index.js"
     },
+    "./bottom-sheet": {
+      "types": "./dist/bottom-sheet/index.d.ts",
+      "import": "./dist/bottom-sheet/index.js",
+      "require": "./dist/bottom-sheet/index.js"
+    },
     "./menu": {
       "types": "./dist/menu/index.d.ts",
       "import": "./dist/menu/index.js",
@@ -119,7 +124,7 @@
   },
   "dependencies": {
     "@xaui/core": "0.1.7",
-    "@xaui/icons": "0.0.2"
+    "@xaui/icons": "0.0.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",