@unif/react-native-design 0.5.1 → 0.7.0

package/src/components/ui/Toast/ToastHost.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
   cancelAnimation,
   runOnJS,
@@ -7,7 +8,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { useColors, useThemedStyles, motion } from '../../../theme';
+import { useColors, useThemedStyles, motion, space } from '../../../theme';
 import { dotColorFor, makeStyles } from './styles';
 import { _subs } from './toast';
 import type { Subscriber, ToastEntry, ToastHostProps } from './types';
@@ -15,12 +16,16 @@ import type { Subscriber, ToastEntry, ToastHostProps } from './types';
 /**
  * 在根附近挂一次。监听 toast() 调用并渲染当前 toast。
  * 同一时间只显示一条 —— 新的会替换旧的。
+ *
+ * 位置由 `entry.position`('top' / 'bottom' / 'center')决定,top/bottom 自动避让
+ * safe-area;进入动画方向随位置(top 从上滑、bottom/center 从下滑)。
  */
 export function ToastHost({
   testID,
 }: ToastHostProps = {}): React.JSX.Element | null {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
+  const insets = useSafeAreaInsets();
   const [entry, setEntry] = useState<ToastEntry | null>(null);
   const op = useSharedValue(0);
   const ty = useSharedValue(8);
@@ -39,14 +44,18 @@ export function ToastHost({
 
   useEffect(() => {
     if (!entry) return;
+    // 进入方向:top 从上(-8)滑入,bottom / center 从下(8)滑入
+    const from = entry.position === 'top' ? -8 : 8;
     cancelAnimation(op);
     cancelAnimation(ty);
+    op.value = 0;
+    ty.value = from;
     op.value = withTiming(1, { duration: motion.base });
     ty.value = withTiming(0, { duration: motion.base });
 
     dismissTimer.current = setTimeout(() => {
       op.value = withTiming(0, { duration: motion.base });
-      ty.value = withTiming(8, { duration: motion.base }, (finished) => {
+      ty.value = withTiming(from, { duration: motion.base }, (finished) => {
         if (finished) runOnJS(setEntry)(null);
       });
     }, entry.duration);
@@ -65,10 +74,18 @@ export function ToastHost({
 
   if (!entry) return null;
 
+  // 位置:top=顶部(safe-area + 间距)/ center=屏幕居中 / bottom=底部(默认)
+  const posStyle =
+    entry.position === 'top'
+      ? { top: insets.top + space[10] }
+      : entry.position === 'center'
+        ? { top: 0, bottom: 0, justifyContent: 'center' as const }
+        : { bottom: insets.bottom + space[10] };
+
   const dotColor = dotColorFor(entry.kind, c);
 
   return (
-    <View style={styles.host} pointerEvents="none" testID={testID}>
+    <View style={[styles.host, posStyle]} pointerEvents="none" testID={testID}>
       <Animated.View style={[styles.toast, animatedStyle]}>
         {dotColor ? (
           <View style={[styles.dot, { backgroundColor: dotColor }]} />

package/src/components/ui/Toast/index.ts

@@ -5,4 +5,5 @@ export type {
   ToastHostProps,
   ToastInput,
   ToastKind,
+  ToastPosition,
 } from './types';

package/src/components/ui/Toast/styles.ts

@@ -6,10 +6,10 @@ import type { ToastKind } from './types';
 export const makeStyles = (c: ColorTokens) =>
   StyleSheet.create({
     host: {
+      // 定位(top/bottom/center)由 ToastHost 按 entry.position 注入,这里只留通用
       position: 'absolute',
       left: 0,
       right: 0,
-      bottom: space[10],
       alignItems: 'center',
       // zIndex: toast 浮层 —— 盖在 Screen 内容之上(navigator / overlay 之下)。
       // 同级兄弟节点无 z 顺序需求,但作为 absolute 浮岛对其他屏内 absolute 节点

package/src/components/ui/Toast/toast.ts

@@ -11,12 +11,13 @@ export const _subs = new Set<Subscriber>();
 function emit(input: ToastInput, kind: ToastKind = 'info') {
   const entry: ToastEntry =
     typeof input === 'string'
-      ? { id: ++_id, message: input, kind, duration: 3000 }
+      ? { id: ++_id, message: input, kind, duration: 3000, position: 'bottom' }
       : {
           id: ++_id,
           message: input.message,
           kind: input.kind ?? kind,
           duration: input.duration ?? 3000,
+          position: input.position ?? 'bottom',
         };
   _subs.forEach((s) => s(entry));
 }

package/src/components/ui/Toast/types.ts

@@ -1,10 +1,13 @@
 /** Toast 类型：info=灰点 / success=绿点 / error=红点 */
 export type ToastKind = 'info' | 'success' | 'error';
 
+/** Toast 显示位置：top=顶部 / bottom=底部(默认) / center=屏幕居中 */
+export type ToastPosition = 'top' | 'bottom' | 'center';
+
 /**
  * `toast(...)` 调用入参：
- * - 字符串简写：默认 info kind 跟 2200ms duration
- * - 对象形式：可指定 kind 跟 duration
+ * - 字符串简写：默认 info kind、bottom 位置、3000ms duration
+ * - 对象形式：可指定 kind / duration / position
  */
 export type ToastInput =
   | string
@@ -13,8 +16,10 @@ export type ToastInput =
       message: string;
       /** Toast 类型，默认 'info' */
       kind?: ToastKind;
-      /** 自动消失毫秒数，默认 2200 */
+      /** 自动消失毫秒数，默认 3000 */
       duration?: number;
+      /** 显示位置，默认 'bottom' */
+      position?: ToastPosition;
     };
 
 export type ToastEntry = {
@@ -26,6 +31,8 @@ export type ToastEntry = {
   kind: ToastKind;
   /** 显示毫秒数 */
   duration: number;
+  /** 显示位置 */
+  position: ToastPosition;
 };
 
 /** Toast 订阅者函数签名（ToastHost 内部用） */

package/src/components/ui/index.ts

@@ -1,7 +1,5 @@
 export { Avatar } from './Avatar';
 export type { AvatarProps, AvatarSize, AvatarVariant } from './Avatar';
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
 export { BlurLayer } from './BlurLayer';
 export type { BlurLayerProps } from './BlurLayer';
 export { Button } from './Button';
@@ -80,4 +78,5 @@ export type {
   ToastHostProps,
   ToastInput,
   ToastKind,
+  ToastPosition,
 } from './Toast';

package/lib/module/components/ui/BottomSheet/BottomSheet.js

@@ -1,104 +0,0 @@
-"use strict";
-
-import React, { useCallback, useMemo } from 'react';
-import { View } from 'react-native';
-import GorhomBottomSheet, { BottomSheetBackdrop, BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useThemedStyles } from "../../../theme/index.js";
-import { BlurLayer } from "../BlurLayer/index.js";
-import { makeStyles } from "./styles.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/** 底部 sheet —— @gorhom/bottom-sheet 的薄壳层。
- *
- *  适合 navigation `presentation: 'transparentModal'` 屏内 root 用法:mount 时
- *  默认 animateOnMount=true 从 -1 动画到 index=0,goBack() 自然关闭。
- *  state-driven sheet 应用 @gorhom 原生 `<BottomSheetModal>`,本 wrapper 不覆盖。
- *
- *  - `snapPoints` 必传(`['50%']` / `['50%', '90%']` 等)
- *  - `backdrop` 三档:`'scrim'` / `'blur'`(BlurLayer)/ `'none'` */
-// 默认 30% / 60% / 95%,模块顶层 const 引用稳定。
-const DEFAULT_SNAP_POINTS = ['30%', '60%', '95%'];
-export function BottomSheet({
-  snapPoints = DEFAULT_SNAP_POINTS,
-  children,
-  sheetStyle,
-  backdrop = 'scrim',
-  grabber = true,
-  onClose,
-  testID
-}) {
-  const styles = useThemedStyles(makeStyles);
-
-  /** BlurView backdrop —— 复用 @gorhom BottomSheetBackdrop 的手势 + animatedIndex
-   *  插值,opacity=1 + bg=transparent 让 backdrop 本身不画 scrim,只画 BlurLayer。
-   *  tap-to-close + opacity 淡入 / pointer-events disable 全部继承自 @gorhom 内核。
-   *
-   *  useCallback + styles dep 保引用稳定(主题切换时才重建),避免每次渲染新引用让
-   *  @gorhom 内部 memo 失效 / remount backdrop 树。 */
-  const BlurBackdrop = useCallback(props => /*#__PURE__*/_jsx(BottomSheetBackdrop, {
-    ...props,
-    appearsOnIndex: 0,
-    disappearsOnIndex: -1,
-    opacity: 1,
-    style: [props.style, styles.backdropTransparent],
-    children: /*#__PURE__*/_jsx(BlurLayer, {
-      intensity: "strong"
-    })
-  }), [styles.backdropTransparent]);
-
-  /** Scrim backdrop —— 走 c.scrim token(亮 rgba(0,0,0,0.5) / 暗 0.7),opacity=1
-   *  让 @gorhom 只跑透明度淡入动画,scrim 实色由 token 决定 → 暗色自动加深。 */
-  const ScrimBackdrop = useCallback(props => /*#__PURE__*/_jsx(BottomSheetBackdrop, {
-    ...props,
-    appearsOnIndex: 0,
-    disappearsOnIndex: -1,
-    opacity: 1,
-    style: [props.style, styles.scrimBackdrop]
-  }), [styles.scrimBackdrop]);
-  const renderBackdrop = useMemo(() => {
-    switch (backdrop) {
-      case 'none':
-        return undefined;
-      case 'blur':
-        return BlurBackdrop;
-      case 'scrim':
-        return ScrimBackdrop;
-    }
-  }, [backdrop, BlurBackdrop, ScrimBackdrop]);
-
-  // @gorhom onChange:index === -1 即关闭。配合 transparentModal route 必传
-  // caller 的 onClose → navigation.goBack(),否则路由 stack 不 pop,native overlay 继续吞触摸。
-  const onChange = index => {
-    if (index === -1) onClose?.();
-  };
-  return /*#__PURE__*/_jsx(GestureHandlerRootView, {
-    style: styles.root,
-    children: /*#__PURE__*/_jsx(GorhomBottomSheet, {
-      snapPoints: snapPoints,
-      index: 0,
-      backdropComponent: renderBackdrop,
-      handleComponent: grabber ? undefined : null,
-      backgroundStyle: styles.sheet,
-      onChange: onChange
-      // enableDynamicSizing=false 关键 —— @gorhom v5 默认 true 会让 sheet 跟内容
-      // 自动撑高忽略 snapPoints max,设 false 强制按 snapPoints 锁高度(gorhom#1783 / #918)
-      ,
-      enableDynamicSizing: false,
-      enableOverDrag: false
-      // @gorhom 默认 false:user 下拉到底部 snap 后不会关闭 sheet,只是 bounce
-      // (BottomSheetScrollView 在 scrollOffset=0 时下拉看着像下拉刷新效果)。
-      // 设 true 后超过最低 snap 阈值直接 dismiss → 走 onChange(-1) → onClose。
-      ,
-      enablePanDownToClose: true,
-      children: /*#__PURE__*/_jsx(BottomSheetScrollView, {
-        testID: testID,
-        showsVerticalScrollIndicator: false,
-        children: /*#__PURE__*/_jsx(View, {
-          style: sheetStyle,
-          children: children
-        })
-      })
-    })
-  });
-}
-//# sourceMappingURL=BottomSheet.js.map

package/lib/module/components/ui/BottomSheet/BottomSheet.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useCallback","useMemo","View","GorhomBottomSheet","BottomSheetBackdrop","BottomSheetScrollView","GestureHandlerRootView","useThemedStyles","BlurLayer","makeStyles","jsx","_jsx","DEFAULT_SNAP_POINTS","BottomSheet","snapPoints","children","sheetStyle","backdrop","grabber","onClose","testID","styles","BlurBackdrop","props","appearsOnIndex","disappearsOnIndex","opacity","style","backdropTransparent","intensity","ScrimBackdrop","scrimBackdrop","renderBackdrop","undefined","onChange","index","root","backdropComponent","handleComponent","backgroundStyle","sheet","enableDynamicSizing","enableOverDrag","enablePanDownToClose","showsVerticalScrollIndicator"],"sourceRoot":"../../../../../src","sources":["components/ui/BottomSheet/BottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/BottomSheet/index.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export { BottomSheet } from "./BottomSheet.js";
-//# sourceMappingURL=index.js.map

package/lib/module/components/ui/BottomSheet/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BottomSheet"],"sourceRoot":"../../../../../src","sources":["components/ui/BottomSheet/index.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,kBAAe","ignoreList":[]}

package/lib/module/components/ui/BottomSheet/styles.js

@@ -1,26 +0,0 @@
-"use strict";
-
-import { StyleSheet } from 'react-native';
-import { space } from "../../../theme/index.js";
-/** @gorhom 接管动画 / handle / scrim,这里只控 root flex + sheet bg + 顶部圆角 24
- *  + scrim/blur backdrop 背景色(走 c.scrim token,亮 rgba(0,0,0,0.5) / 暗 0.7)。 */
-export const makeStyles = c => StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  sheet: {
-    backgroundColor: c.surface,
-    borderTopLeftRadius: space['9'],
-    borderTopRightRadius: space['9']
-  },
-  /** Scrim backdrop:c.scrim token,亮暗自动切换(亮 0.5 / 暗 0.7 alpha)。
-   *  与 @gorhom 默认 backgroundColor:'black' + opacity 0.5 等价但走 token。 */
-  scrimBackdrop: {
-    backgroundColor: c.scrim
-  },
-  /** Blur backdrop:bg 透明,由 BlurLayer child 接管视觉。 */
-  backdropTransparent: {
-    backgroundColor: 'transparent'
-  }
-});
-//# sourceMappingURL=styles.js.map

package/lib/module/components/ui/BottomSheet/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["StyleSheet","space","makeStyles","c","create","root","flex","sheet","backgroundColor","surface","borderTopLeftRadius","borderTopRightRadius","scrimBackdrop","scrim","backdropTransparent"],"sourceRoot":"../../../../../src","sources":["components/ui/BottomSheet/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,KAAK,QAAQ,yBAAgB;AAGtC;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,CAAc,IACvCH,UAAU,CAACI,MAAM,CAAC;EAChBC,IAAI,EAAE;IAAEC,IAAI,EAAE;EAAE,CAAC;EACjBC,KAAK,EAAE;IACLC,eAAe,EAAEL,CAAC,CAACM,OAAO;IAC1BC,mBAAmB,EAAET,KAAK,CAAC,GAAG,CAAC;IAC/BU,oBAAoB,EAAEV,KAAK,CAAC,GAAG;EACjC,CAAC;EACD;AACJ;EACIW,aAAa,EAAE;IAAEJ,eAAe,EAAEL,CAAC,CAACU;EAAM,CAAC;EAC3C;EACAC,mBAAmB,EAAE;IAAEN,eAAe,EAAE;EAAc;AACxD,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/ui/BottomSheet/types.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export {};
-//# sourceMappingURL=types.js.map

package/lib/module/components/ui/BottomSheet/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/ui/BottomSheet/types.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/src/components/ui/BottomSheet/BottomSheet.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { BottomSheetProps } from './types';
-export declare function BottomSheet({ snapPoints, children, sheetStyle, backdrop, grabber, onClose, testID, }: BottomSheetProps): React.JSX.Element;
-//# sourceMappingURL=BottomSheet.d.ts.map

package/lib/typescript/src/components/ui/BottomSheet/BottomSheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAWpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAahD,wBAAgB,WAAW,CAAC,EAC1B,UAAgC,EAChC,QAAQ,EACR,UAAU,EACV,QAAkB,EAClB,OAAc,EACd,OAAO,EACP,MAAM,GACP,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoFtC"}

package/lib/typescript/src/components/ui/BottomSheet/index.d.ts

@@ -1,3 +0,0 @@
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/ui/BottomSheet/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BottomSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/src/components/ui/BottomSheet/styles.d.ts

@@ -1,23 +0,0 @@
-import type { ColorTokens } from '../../../theme';
-/** @gorhom 接管动画 / handle / scrim,这里只控 root flex + sheet bg + 顶部圆角 24
- *  + scrim/blur backdrop 背景色(走 c.scrim token,亮 rgba(0,0,0,0.5) / 暗 0.7)。 */
-export declare const makeStyles: (c: ColorTokens) => Readonly<{
-    root: {
-        flex: number;
-    };
-    sheet: {
-        backgroundColor: string;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-    };
-    /** Scrim backdrop:c.scrim token,亮暗自动切换(亮 0.5 / 暗 0.7 alpha)。
-     *  与 @gorhom 默认 backgroundColor:'black' + opacity 0.5 等价但走 token。 */
-    scrimBackdrop: {
-        backgroundColor: string;
-    };
-    /** Blur backdrop:bg 透明,由 BlurLayer child 接管视觉。 */
-    backdropTransparent: {
-        backgroundColor: string;
-    };
-}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/ui/BottomSheet/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BottomSheet/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;4EAC4E;AAC5E,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;IAQrC;yEACqE;;;;IAErE,kDAAkD;;;;EAElD,CAAC"}

package/lib/typescript/src/components/ui/BottomSheet/types.d.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-export type BottomSheetProps = {
-    /** snap points,默认 `['30%', '60%', '95%']` 三档可拖。
-     *  专用场景显式覆盖,如单档不可调 `['90%']`、短确认 + 中 `['40%', '85%']`。 */
-    snapPoints?: (string | number)[];
-    /** Sheet 内容 */
-    children: ReactNode;
-    /** Sheet 容器附加样式(影响 BottomSheetView style) */
-    sheetStyle?: StyleProp<ViewStyle>;
-    /** Backdrop 模式,默认 'scrim':
-     *  - `'scrim'`:@gorhom 默认 BottomSheetBackdrop,单色半透黑
-     *  - `'blur'`:自定义 BlurBackdrop(BlurLayer intensity='strong')
-     *  - `'none'`:无 backdrop,适合"屏 root 已有自己 backdrop"场景 */
-    backdrop?: 'scrim' | 'blur' | 'none';
-    /** 是否显示顶部 grabber(默认 true) */
-    grabber?: boolean;
-    /** Sheet 关闭(animatedIndex 收到 -1)时触发。
-     *
-     *  **transparentModal route 模式必传 `navigation.goBack()`** —— 不然关闭 sheet 后,
-     *  屏 route 没 pop,native overlay 屏继续覆盖,触摸全被屏吞掉。 */
-    onClose?: () => void;
-    /** E2E / 测试定位 */
-    testID?: string;
-};
-//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/ui/BottomSheet/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/BottomSheet/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;8DAC0D;IAC1D,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACjC,eAAe;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;;2DAGuD;IACvD,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;sDAGkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/src/components/ui/BottomSheet/BottomSheet.tsx

@@ -1,117 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import { View } from 'react-native';
-import GorhomBottomSheet, {
-  BottomSheetBackdrop,
-  BottomSheetScrollView,
-  type BottomSheetBackdropProps,
-} from '@gorhom/bottom-sheet';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useThemedStyles } from '../../../theme';
-import { BlurLayer } from '../BlurLayer';
-import { makeStyles } from './styles';
-import type { BottomSheetProps } from './types';
-
-/** 底部 sheet —— @gorhom/bottom-sheet 的薄壳层。
- *
- *  适合 navigation `presentation: 'transparentModal'` 屏内 root 用法:mount 时
- *  默认 animateOnMount=true 从 -1 动画到 index=0,goBack() 自然关闭。
- *  state-driven sheet 应用 @gorhom 原生 `<BottomSheetModal>`,本 wrapper 不覆盖。
- *
- *  - `snapPoints` 必传(`['50%']` / `['50%', '90%']` 等)
- *  - `backdrop` 三档:`'scrim'` / `'blur'`(BlurLayer)/ `'none'` */
-// 默认 30% / 60% / 95%,模块顶层 const 引用稳定。
-const DEFAULT_SNAP_POINTS: (string | number)[] = ['30%', '60%', '95%'];
-
-export function BottomSheet({
-  snapPoints = DEFAULT_SNAP_POINTS,
-  children,
-  sheetStyle,
-  backdrop = 'scrim',
-  grabber = true,
-  onClose,
-  testID,
-}: BottomSheetProps): React.JSX.Element {
-  const styles = useThemedStyles(makeStyles);
-
-  /** BlurView backdrop —— 复用 @gorhom BottomSheetBackdrop 的手势 + animatedIndex
-   *  插值,opacity=1 + bg=transparent 让 backdrop 本身不画 scrim,只画 BlurLayer。
-   *  tap-to-close + opacity 淡入 / pointer-events disable 全部继承自 @gorhom 内核。
-   *
-   *  useCallback + styles dep 保引用稳定(主题切换时才重建),避免每次渲染新引用让
-   *  @gorhom 内部 memo 失效 / remount backdrop 树。 */
-  const BlurBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        appearsOnIndex={0}
-        disappearsOnIndex={-1}
-        opacity={1}
-        style={[props.style, styles.backdropTransparent]}
-      >
-        <BlurLayer intensity="strong" />
-      </BottomSheetBackdrop>
-    ),
-    [styles.backdropTransparent]
-  );
-
-  /** Scrim backdrop —— 走 c.scrim token(亮 rgba(0,0,0,0.5) / 暗 0.7),opacity=1
-   *  让 @gorhom 只跑透明度淡入动画,scrim 实色由 token 决定 → 暗色自动加深。 */
-  const ScrimBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        appearsOnIndex={0}
-        disappearsOnIndex={-1}
-        opacity={1}
-        style={[props.style, styles.scrimBackdrop]}
-      />
-    ),
-    [styles.scrimBackdrop]
-  );
-
-  const renderBackdrop = useMemo(() => {
-    switch (backdrop) {
-      case 'none':
-        return undefined;
-      case 'blur':
-        return BlurBackdrop;
-      case 'scrim':
-        return ScrimBackdrop;
-    }
-  }, [backdrop, BlurBackdrop, ScrimBackdrop]);
-
-  // @gorhom onChange:index === -1 即关闭。配合 transparentModal route 必传
-  // caller 的 onClose → navigation.goBack(),否则路由 stack 不 pop,native overlay 继续吞触摸。
-  const onChange = (index: number) => {
-    if (index === -1) onClose?.();
-  };
-
-  return (
-    <GestureHandlerRootView style={styles.root}>
-      <GorhomBottomSheet
-        snapPoints={snapPoints}
-        index={0}
-        backdropComponent={renderBackdrop}
-        handleComponent={grabber ? undefined : null}
-        backgroundStyle={styles.sheet}
-        onChange={onChange}
-        // enableDynamicSizing=false 关键 —— @gorhom v5 默认 true 会让 sheet 跟内容
-        // 自动撑高忽略 snapPoints max,设 false 强制按 snapPoints 锁高度(gorhom#1783 / #918)
-        enableDynamicSizing={false}
-        enableOverDrag={false}
-        // @gorhom 默认 false:user 下拉到底部 snap 后不会关闭 sheet,只是 bounce
-        // (BottomSheetScrollView 在 scrollOffset=0 时下拉看着像下拉刷新效果)。
-        // 设 true 后超过最低 snap 阈值直接 dismiss → 走 onChange(-1) → onClose。
-        enablePanDownToClose
-      >
-        <BottomSheetScrollView
-          testID={testID}
-          showsVerticalScrollIndicator={false}
-        >
-          {/* sheetStyle 给内层 View,ScrollView 只负责 scroll,不接管 padding / gap / maxHeight。 */}
-          <View style={sheetStyle}>{children}</View>
-        </BottomSheetScrollView>
-      </GorhomBottomSheet>
-    </GestureHandlerRootView>
-  );
-}

package/src/components/ui/BottomSheet/index.ts

@@ -1,2 +0,0 @@
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './types';

package/src/components/ui/BottomSheet/styles.ts

@@ -1,20 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { space } from '../../../theme';
-import type { ColorTokens } from '../../../theme';
-
-/** @gorhom 接管动画 / handle / scrim,这里只控 root flex + sheet bg + 顶部圆角 24
- *  + scrim/blur backdrop 背景色(走 c.scrim token,亮 rgba(0,0,0,0.5) / 暗 0.7)。 */
-export const makeStyles = (c: ColorTokens) =>
-  StyleSheet.create({
-    root: { flex: 1 },
-    sheet: {
-      backgroundColor: c.surface,
-      borderTopLeftRadius: space['9'],
-      borderTopRightRadius: space['9'],
-    },
-    /** Scrim backdrop:c.scrim token,亮暗自动切换(亮 0.5 / 暗 0.7 alpha)。
-     *  与 @gorhom 默认 backgroundColor:'black' + opacity 0.5 等价但走 token。 */
-    scrimBackdrop: { backgroundColor: c.scrim },
-    /** Blur backdrop:bg 透明,由 BlurLayer child 接管视觉。 */
-    backdropTransparent: { backgroundColor: 'transparent' },
-  });

package/src/components/ui/BottomSheet/types.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-export type BottomSheetProps = {
-  /** snap points,默认 `['30%', '60%', '95%']` 三档可拖。
-   *  专用场景显式覆盖,如单档不可调 `['90%']`、短确认 + 中 `['40%', '85%']`。 */
-  snapPoints?: (string | number)[];
-  /** Sheet 内容 */
-  children: ReactNode;
-  /** Sheet 容器附加样式(影响 BottomSheetView style) */
-  sheetStyle?: StyleProp<ViewStyle>;
-  /** Backdrop 模式,默认 'scrim':
-   *  - `'scrim'`:@gorhom 默认 BottomSheetBackdrop,单色半透黑
-   *  - `'blur'`:自定义 BlurBackdrop(BlurLayer intensity='strong')
-   *  - `'none'`:无 backdrop,适合"屏 root 已有自己 backdrop"场景 */
-  backdrop?: 'scrim' | 'blur' | 'none';
-  /** 是否显示顶部 grabber(默认 true) */
-  grabber?: boolean;
-  /** Sheet 关闭(animatedIndex 收到 -1)时触发。
-   *
-   *  **transparentModal route 模式必传 `navigation.goBack()`** —— 不然关闭 sheet 后,
-   *  屏 route 没 pop,native overlay 屏继续覆盖,触摸全被屏吞掉。 */
-  onClose?: () => void;
-  /** E2E / 测试定位 */
-  testID?: string;
-};