@xaui/native 0.0.23 → 0.0.25

package/dist/bottom-sheet/index.d.ts

@@ -1,3 +1,84 @@
-export { BottomSheet } from './bottom-sheet';
-export type { BottomSheetProps, BottomSheetSnapPoint, BottomSheetEvents, } from './bottom-sheet.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.js';
+
+type BottomSheetSnapPoint = number | string;
+type BottomSheetProps = {
+    /**
+     * Content to render inside the bottom sheet.
+     */
+    children: ReactNode;
+    /**
+     * Whether the bottom sheet is visible.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Snap points as fractions of screen height (0 to 1).
+     * First value is the initial collapsed height, subsequent values are expanded heights.
+     * @default [0.4, 0.9]
+     */
+    snapPoints?: [number, ...number[]];
+    /**
+     * Index of the initial snap point when the sheet opens.
+     * @default 0
+     */
+    initialSnapIndex?: number;
+    /**
+     * Theme color for the handle bar indicator.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Border radius of the top corners.
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Whether to show the backdrop overlay.
+     * @default true
+     */
+    showBackdrop?: boolean;
+    /**
+     * Whether to close the sheet when tapping the backdrop.
+     * @default true
+     */
+    closeOnBackdropPress?: boolean;
+    /**
+     * Whether the sheet can be dismissed by swiping down.
+     * @default true
+     */
+    enableSwipeToDismiss?: boolean;
+    /**
+     * Whether to show the drag handle indicator.
+     * @default true
+     */
+    showHandle?: boolean;
+    /**
+     * Disable all animations.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Custom style for the sheet container.
+     */
+    style?: ViewStyle;
+    /**
+     * Custom content to render as the handle.
+     */
+    handleContent?: ReactNode;
+} & BottomSheetEvents;
+type BottomSheetEvents = {
+    /**
+     * Called when the sheet is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Called when the snap point changes.
+     */
+    onSnapChange?: (index: number) => void;
+};
+
+declare const BottomSheet: React.FC<BottomSheetProps>;
+
+export { BottomSheet, type BottomSheetEvents, type BottomSheetProps, type BottomSheetSnapPoint };

package/dist/bottom-sheet/index.js

@@ -1,8 +1,367 @@
 import {
-  BottomSheet
-} from "../chunk-HC2SSHNU.js";
-import "../chunk-DXXNBF5P.js";
-import "../chunk-LTKYHG5V.js";
+  Portal,
+  useXUITheme
+} from "../chunk-URBEEDFX.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/bottom-tab-bar/index.cjs

@@ -464,7 +464,13 @@ var BottomTabBar = (props) => {
           {
             key: route.key,
             itemKey: route.key,
-            label: getRouteLabel(route, routeOptions, focused, labelColor, variant),
+            label: getRouteLabel(
+              route,
+              routeOptions,
+              focused,
+              labelColor,
+              variant
+            ),
             icon: routeOptions.tabBarIcon,
             isSelected: focused,
             showLabel: routeOptions.tabBarShowLabel ?? showLabel,
@@ -496,12 +502,7 @@ var BottomTabBar = (props) => {
       })
     );
   }
-  const {
-    children,
-    selectedKey,
-    defaultSelectedKey,
-    onSelectionChange
-  } = props;
+  const { children, selectedKey, defaultSelectedKey, onSelectionChange } = props;
   const firstItemKey = import_react9.default.useMemo(() => {
     const child = import_react9.default.Children.toArray(children)[0];
     if (import_react9.default.isValidElement(child)) {

package/dist/{components/bottom-tab-bar/bottom-tab-bar.type.d.mts → bottom-tab-bar/index.d.cts}

@@ -1,25 +1,26 @@
-import type { ReactNode } from 'react';
-import type { GestureResponderEvent, Insets, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { ThemeColor } from '../../types';
-export type BottomTabBarSize = 'sm' | 'md' | 'lg';
-export type BottomTabBarVariant = 'stacked' | 'inline' | 'icon-only';
-export type BottomTabBarIconRenderParams = {
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, Insets, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type BottomTabBarSize = 'sm' | 'md' | 'lg';
+type BottomTabBarVariant = 'stacked' | 'inline' | 'icon-only';
+type BottomTabBarIconRenderParams = {
     focused: boolean;
     color: string;
     size: number;
 };
-export type BottomTabBarItemLabelRenderParams = {
+type BottomTabBarItemLabelRenderParams = {
     focused: boolean;
     color: string;
     children: string;
     position: 'below-icon' | 'beside-icon';
 };
-export type BottomTabBarItemCustomAppearance = {
+type BottomTabBarItemCustomAppearance = {
     container?: StyleProp<ViewStyle>;
     indicator?: StyleProp<ViewStyle>;
     label?: StyleProp<TextStyle>;
 };
-export type BottomTabBarItemProps = {
+type BottomTabBarItemProps = {
     /**
      * Unique key for this tab item.
      */
@@ -90,16 +91,16 @@ export type BottomTabBarItemProps = {
      */
     testID?: string;
 };
-export type ExpoRouterTabRoute = {
+type ExpoRouterTabRoute = {
     key: string;
     name: string;
     params?: Record<string, unknown>;
 };
-export type ExpoRouterTabState = {
+type ExpoRouterTabState = {
     index: number;
     routes: ExpoRouterTabRoute[];
 };
-export type ExpoRouterTabDescriptorOptions = {
+type ExpoRouterTabDescriptorOptions = {
     title?: string;
     tabBarLabel?: string | ((props: BottomTabBarItemLabelRenderParams) => ReactNode);
     tabBarIcon?: (props: BottomTabBarIconRenderParams) => ReactNode;
@@ -113,11 +114,11 @@ export type ExpoRouterTabDescriptorOptions = {
     tabBarStyle?: StyleProp<ViewStyle>;
     href?: string | null;
 };
-export type ExpoRouterTabDescriptor = {
+type ExpoRouterTabDescriptor = {
     options: ExpoRouterTabDescriptorOptions;
 };
-export type ExpoRouterTabDescriptors = Record<string, ExpoRouterTabDescriptor>;
-export type ExpoRouterTabNavigation = {
+type ExpoRouterTabDescriptors = Record<string, ExpoRouterTabDescriptor>;
+type ExpoRouterTabNavigation = {
     emit: (options: {
         type: 'tabPress' | 'tabLongPress';
         target?: string;
@@ -127,7 +128,7 @@ export type ExpoRouterTabNavigation = {
     };
     navigate: (name: string, params?: Record<string, unknown>) => void;
 };
-export type ExpoRouterBottomTabBarCompatibleProps = {
+type ExpoRouterBottomTabBarCompatibleProps = {
     state: ExpoRouterTabState;
     descriptors: ExpoRouterTabDescriptors;
     navigation: ExpoRouterTabNavigation;
@@ -186,7 +187,7 @@ type BottomTabBarBaseProps = {
         container?: StyleProp<ViewStyle>;
     };
 };
-export type BottomTabBarComposableProps = BottomTabBarBaseProps & {
+type BottomTabBarComposableProps = BottomTabBarBaseProps & {
     children: ReactNode;
     /**
      * Controlled selected item key.
@@ -201,6 +202,10 @@ export type BottomTabBarComposableProps = BottomTabBarBaseProps & {
      */
     onSelectionChange?: (key: string) => void;
 };
-export type BottomTabBarProps = BottomTabBarComposableProps | (BottomTabBarBaseProps & ExpoRouterBottomTabBarCompatibleProps);
-export {};
-//# sourceMappingURL=bottom-tab-bar.type.d.ts.map
+type BottomTabBarProps = BottomTabBarComposableProps | (BottomTabBarBaseProps & ExpoRouterBottomTabBarCompatibleProps);
+
+declare const BottomTabBar: React.FC<BottomTabBarProps>;
+
+declare const BottomTabBarItem: React.FC<BottomTabBarItemProps>;
+
+export { BottomTabBar, type BottomTabBarComposableProps, type BottomTabBarIconRenderParams, BottomTabBarItem, type BottomTabBarItemCustomAppearance, type BottomTabBarItemLabelRenderParams, type BottomTabBarItemProps, type BottomTabBarProps, type BottomTabBarSize, type BottomTabBarVariant, type ExpoRouterBottomTabBarCompatibleProps, type ExpoRouterTabDescriptor, type ExpoRouterTabDescriptorOptions, type ExpoRouterTabDescriptors, type ExpoRouterTabNavigation, type ExpoRouterTabRoute, type ExpoRouterTabState };