@xaui/native 0.0.13 → 0.0.14

package/dist/bottom-sheet/index.cjs

@@ -0,0 +1,470 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/bottom-sheet/index.ts
+var bottom_sheet_exports = {};
+__export(bottom_sheet_exports, {
+  BottomSheet: () => BottomSheet
+});
+module.exports = __toCommonJS(bottom_sheet_exports);
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = (0, import_react2.useContext)(PortalContext);
+  const keyRef = (0, import_react2.useRef)(`portal-${++portalId}`);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  (0, import_react2.useEffect)(() => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var import_react6 = require("react");
+var import_react_native5 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var import_core2 = require("@xaui/core");
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+var import_react_native4 = require("react-native");
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: import_react_native4.Easing.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = import_react_native4.Animated.parallel([
+    import_react_native4.Animated.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    import_react_native4.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = import_react_native4.Animated.parallel([
+    import_react_native4.Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    import_react_native4.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = import_react_native4.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_native5.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_react6.useState)(false);
+  const currentSnapIndex = (0, import_react6.useRef)(initialSnapIndex);
+  const animationRef = (0, import_react6.useRef)(null);
+  const translateY = (0, import_react6.useRef)(new import_react_native5.Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0)).current;
+  const sortedSnapPoints = (0, import_react6.useMemo)(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = (0, import_react6.useMemo)(
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = (0, import_react6.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_react6.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_react6.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_react6.useEffect)(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = (0, import_react6.useMemo)(
+    () => import_react_native5.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_core2.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = (0, import_react6.useMemo)(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = (0, import_react6.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_native6 = require("react-native");
+var styles = import_react_native6.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_react7.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native7.Animated.View,
+    {
+      style: [styles.backdrop, { opacity: backdropOpacity }]
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native7.Pressable,
+      {
+        style: styles.backdrop,
+        onPress: handleBackdropPress
+      }
+    )
+  ), /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native7.Animated.View,
+    {
+      style: [
+        styles.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native7.View,
+      {
+        style: [
+          styles.sheet,
+          { height: screenHeight },
+          sheetStyles,
+          style
+        ],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native7.View,
+        {
+          style: [
+            styles.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ import_react7.default.createElement(import_react_native7.View, { style: styles.content }, children)
+    )
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BottomSheet
+});

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

@@ -0,0 +1,84 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
+
+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.d.ts

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,7 @@
+import {
+  BottomSheet
+} from "../chunk-GAOI4KIV.js";
+import "../chunk-NBRASCX4.js";
+export {
+  BottomSheet
+};