@oxyhq/bloom 0.1.9 → 0.1.11

package/lib/typescript/module/bottom-sheet/index.d.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export interface BottomSheetRef {
+    present: () => void;
+    dismiss: () => void;
+    close: () => void;
+    expand: () => void;
+    collapse: () => void;
+    scrollTo: (y: number, animated?: boolean) => void;
+}
+export interface BottomSheetProps {
+    children: React.ReactNode;
+    onDismiss?: () => void;
+    enablePanDownToClose?: boolean;
+    backgroundComponent?: (props: {
+        style?: StyleProp<ViewStyle>;
+    }) => React.ReactElement | null;
+    backdropComponent?: (props: {
+        style?: StyleProp<ViewStyle>;
+        onPress?: () => void;
+    }) => React.ReactElement | null;
+    style?: StyleProp<ViewStyle>;
+    enableHandlePanningGesture?: boolean;
+    onDismissAttempt?: () => boolean;
+    detached?: boolean;
+}
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
+export default BottomSheet;
+export { BottomSheet };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/bottom-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/bottom-sheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAOH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,cAAc,CAAC;AA+BtB,MAAM,WAAW,cAAc;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC7F,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACjH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,yFA6Sf,CAAC;AAuFH,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/lib/typescript/module/index.d.ts

@@ -32,6 +32,8 @@ export { IconCircle } from './icon-circle';
 export * as TextField from './text-field';
 export * as SegmentedControl from './segmented-control';
 export { SearchInput } from './search-input';
+export { BottomSheet } from './bottom-sheet';
+export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 export * as Admonition from './admonition';
 export * as Menu from './menu';
 export * as Tooltip from './tooltip';

package/lib/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAG9D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,KAAK,KAAK,IAAI,SAAS,EAAE,KAAK,IAAI,SAAS,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG3E,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAGjC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAG3C,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAG9D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,KAAK,KAAK,IAAI,SAAS,EAAE,KAAK,IAAI,SAAS,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG3E,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC;AAC9C,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAGjC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAG3C,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,WAAW,MAAM,gBAAgB,CAAC"}

package/lib/typescript/module/theme/color-presets.d.ts

@@ -1,4 +1,4 @@
-export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint';
+export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy';
 export interface AppColorPreset {
     name: AppColorName;
     hex: string;

package/lib/typescript/module/theme/color-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,EAAyF,CAAC;AAEpI,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAWzD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAsdlE,CAAC"}
+{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAC;AAE/H,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,EAAE,YAAY,EAAyF,CAAC;AAEpI,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAYzD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAqgBlE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -364,6 +364,17 @@
         "default": "./lib/commonjs/select/index.js"
       }
     },
+    "./bottom-sheet": {
+      "react-native": "./src/bottom-sheet/index.tsx",
+      "import": {
+        "types": "./lib/typescript/module/bottom-sheet/index.d.ts",
+        "default": "./lib/module/bottom-sheet/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/bottom-sheet/index.d.ts",
+        "default": "./lib/commonjs/bottom-sheet/index.js"
+      }
+    },
     "./context-menu": {
       "react-native": "./src/context-menu/index.tsx",
       "import": {
@@ -409,6 +420,7 @@
     "tooltip",
     "select",
     "context-menu",
+    "bottom-sheet",
     "ai"
   ],
   "repository": {

package/src/bottom-sheet/index.tsx

@@ -0,0 +1,453 @@
+import type React from 'react';
+import { forwardRef, useImperativeHandle, useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import {
+    View,
+    StyleSheet,
+    Modal,
+    Pressable,
+    Dimensions,
+    Platform,
+    type ViewStyle,
+    type StyleProp,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+    interpolate,
+    runOnJS,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useSharedValue,
+    withSpring,
+    withTiming,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from '../theme/use-theme';
+
+// Optional dependency — keyboard handling is skipped if not installed
+let useKeyboardHandler: ((handlers: Record<string, (e: { height: number }) => void>, deps: unknown[]) => void) | undefined;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
+} catch {
+    // react-native-keyboard-controller not available
+}
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const SPRING_CONFIG = {
+    damping: 25,
+    stiffness: 300,
+    mass: 0.8,
+};
+
+export interface BottomSheetRef {
+    present: () => void;
+    dismiss: () => void;
+    close: () => void;
+    expand: () => void;
+    collapse: () => void;
+    scrollTo: (y: number, animated?: boolean) => void;
+}
+
+export interface BottomSheetProps {
+    children: React.ReactNode;
+    onDismiss?: () => void;
+    enablePanDownToClose?: boolean;
+    backgroundComponent?: (props: { style?: StyleProp<ViewStyle> }) => React.ReactElement | null;
+    backdropComponent?: (props: { style?: StyleProp<ViewStyle>; onPress?: () => void }) => React.ReactElement | null;
+    style?: StyleProp<ViewStyle>;
+    enableHandlePanningGesture?: boolean;
+    onDismissAttempt?: () => boolean;
+    detached?: boolean; // If true, shows with margins and rounded corners. If false, full width with rounded top only.
+}
+
+const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef<BottomSheetRef>) => {
+    const {
+        children,
+        onDismiss,
+        enablePanDownToClose = true,
+        backgroundComponent,
+        backdropComponent,
+        style,
+        enableHandlePanningGesture = true,
+        onDismissAttempt,
+        detached = false,
+    } = props;
+
+    const insets = useSafeAreaInsets();
+    const { colors } = useTheme();
+    const [visible, setVisible] = useState(false);
+    const [rendered, setRendered] = useState(false); // keep mounted for exit animation
+    const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const hasClosedRef = useRef(false);
+    const scrollViewRef = useRef<Animated.ScrollView>(null);
+
+    const translateY = useSharedValue(SCREEN_HEIGHT);
+    const opacity = useSharedValue(0);
+    const scrollOffsetY = useSharedValue(0);
+    const isScrollAtTop = useSharedValue(true);
+    const allowPanClose = useSharedValue(true);
+    const keyboardHeight = useSharedValue(0);
+    const context = useSharedValue({ y: 0 });
+
+    if (useKeyboardHandler) {
+        useKeyboardHandler({
+            onMove: (e) => {
+                'worklet';
+                keyboardHeight.value = e.height;
+            },
+            onEnd: (e) => {
+                'worklet';
+                keyboardHeight.value = e.height;
+            },
+        }, []);
+    }
+
+    // Dismiss callbacks
+    const safeClose = () => {
+        if (onDismissAttempt?.()) {
+            onDismiss?.();
+        } else if (!onDismissAttempt) {
+            onDismiss?.();
+        }
+    };
+
+    const finishClose = useCallback(() => {
+        if (hasClosedRef.current) return;
+        hasClosedRef.current = true;
+        safeClose();
+        setRendered(false);
+    }, [safeClose]);
+
+    useEffect(() => {
+        if (visible) {
+            if (closeTimeoutRef.current) {
+                clearTimeout(closeTimeoutRef.current);
+                closeTimeoutRef.current = null;
+            }
+            hasClosedRef.current = false;
+            opacity.value = withTiming(1, { duration: 250 });
+            translateY.value = withSpring(0, SPRING_CONFIG);
+        } else if (rendered) {
+            opacity.value = withTiming(0, { duration: 250 }, (finished) => {
+                if (finished) {
+                    runOnJS(finishClose)();
+                }
+            });
+            translateY.value = withSpring(SCREEN_HEIGHT, { ...SPRING_CONFIG, stiffness: 250 });
+
+            // Fallback timer to ensure close completes (especially on web)
+            if (closeTimeoutRef.current) {
+                clearTimeout(closeTimeoutRef.current);
+            }
+            closeTimeoutRef.current = setTimeout(() => {
+                finishClose();
+                closeTimeoutRef.current = null;
+            }, 300);
+        }
+    }, [visible, rendered, finishClose]);
+
+    // Clear pending timeout on unmount
+    useEffect(() => () => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+
+    // Apply web scrollbar styles when colors change
+    useEffect(() => {
+        if (Platform.OS === 'web') {
+            createWebScrollbarStyle(colors.border);
+        }
+    }, [colors.border]);
+
+    const present = useCallback(() => {
+        setRendered(true);
+        setVisible(true);
+    }, []);
+    const dismiss = useCallback(() => {
+        setVisible(false);
+    }, []);
+
+    const scrollTo = useCallback((y: number, animated = true) => {
+        scrollViewRef.current?.scrollTo({ y, animated });
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+        present,
+        dismiss,
+        close: dismiss,
+        expand: present,
+        collapse: dismiss,
+        scrollTo,
+    }), [present, dismiss, scrollTo]);
+
+    const nativeGesture = useMemo(() => Gesture.Native(), []);
+
+    const panGesture = Gesture.Pan()
+        .enabled(enablePanDownToClose)
+        .simultaneousWithExternalGesture(nativeGesture)
+        .onStart(() => {
+            'worklet';
+            context.value = { y: translateY.value };
+            allowPanClose.value = scrollOffsetY.value <= 8;
+        })
+        .onUpdate((event) => {
+            'worklet';
+            if (!allowPanClose.value) {
+                return;
+            }
+            const newTranslateY = context.value.y + event.translationY;
+            // If user is scrolling down while content isn't at (or near) the top, let ScrollView handle it
+            const atTopOrNearTop = scrollOffsetY.value <= 8; // slightly larger tolerance for smoother handoff
+            if (event.translationY > 0 && !atTopOrNearTop) {
+                return;
+            }
+            if (newTranslateY >= 0) {
+                translateY.value = newTranslateY;
+            } else if (detached) {
+                // Only allow overdrag (pulling up beyond top) when detached
+                translateY.value = newTranslateY * 0.3;
+            } else {
+                // In normal mode, prevent overdrag - clamp to 0
+                translateY.value = 0;
+            }
+        })
+        .onEnd((event) => {
+            'worklet';
+            if (!allowPanClose.value) {
+                return;
+            }
+            const velocity = event.velocityY;
+            const distance = translateY.value;
+            // Require a deeper pull to close (more like native bottom sheets)
+            const closeThreshold = Math.max(140, SCREEN_HEIGHT * 0.25);
+            const fastSwipeThreshold = 900;
+            const shouldClose =
+                velocity > fastSwipeThreshold ||
+                (distance > closeThreshold && velocity > -300);
+
+            if (shouldClose) {
+                translateY.value = withSpring(SCREEN_HEIGHT, {
+                    ...SPRING_CONFIG,
+                    velocity: velocity,
+                });
+                opacity.value = withTiming(0, { duration: 250 }, (finished) => {
+                    if (finished) {
+                        runOnJS(finishClose)();
+                    }
+                });
+            } else {
+                translateY.value = withSpring(0, {
+                    ...SPRING_CONFIG,
+                    velocity: velocity,
+                });
+            }
+        });
+
+    const backdropStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+    }));
+
+    const sheetStyle = useAnimatedStyle(() => {
+        const scale = interpolate(translateY.value, [0, SCREEN_HEIGHT], [1, 0.95]);
+        return {
+            transform: [
+                { translateY: translateY.value - keyboardHeight.value },
+                { scale },
+            ],
+        };
+    });
+
+    const sheetHeightStyle = useAnimatedStyle(() => ({
+        maxHeight: SCREEN_HEIGHT - keyboardHeight.value - insets.top - (detached ? insets.bottom + 16 : 0),
+    }), [insets.top, insets.bottom, detached]);
+
+    const sheetMarginStyle = useAnimatedStyle(() => {
+        // Only add margin when detached, otherwise extend behind safe area
+        if (detached) {
+            return {
+                marginBottom: keyboardHeight.value > 0 ? 16 : insets.bottom + 16,
+            };
+        }
+        return {
+            marginBottom: 0,
+        };
+    }, [insets.bottom, detached]);
+
+    const handleBackdropPress = useCallback(() => {
+        // Always animate close on backdrop press
+        if (onDismissAttempt && !onDismissAttempt()) {
+            return;
+        }
+        dismiss();
+    }, [onDismissAttempt, dismiss]);
+
+    const scrollHandler = useAnimatedScrollHandler({
+        onScroll: (event) => {
+            scrollOffsetY.value = event.contentOffset.y;
+            isScrollAtTop.value = event.contentOffset.y <= 0;
+        },
+    });
+
+    const dynamicStyles = useMemo(() => {
+        const isDark = colors.background === '#000000';
+        return StyleSheet.create({
+            handle: {
+                ...styles.handle,
+                backgroundColor: isDark ? '#444' : '#C7C7CC',
+            },
+            sheet: {
+                ...styles.sheet,
+                backgroundColor: colors.background,
+                ...(detached ? styles.sheetDetached : styles.sheetNormal),
+            },
+            scrollContent: {
+                ...styles.scrollContent,
+                // In normal mode, don't add padding here - screens handle their own padding
+                // The sheet extends behind safe area, and screens add padding as needed
+            },
+        });
+    }, [colors.background, detached, insets.bottom]);
+
+    if (!rendered) return null;
+
+    return (
+        <Modal visible={rendered} transparent animationType="none" statusBarTranslucent onRequestClose={dismiss}>
+            <View style={StyleSheet.absoluteFill}>
+                <Animated.View style={[styles.backdrop, backdropStyle]}>
+                    {backdropComponent ? (
+                        backdropComponent({ onPress: handleBackdropPress })
+                    ) : (
+                        <Pressable style={styles.backdropTouchable} onPress={handleBackdropPress}>
+                            <View style={StyleSheet.absoluteFill} />
+                        </Pressable>
+                    )}
+                </Animated.View>
+
+                <GestureDetector gesture={panGesture}>
+                    <Animated.View style={[dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle]}>
+                        {backgroundComponent?.({ style: styles.background })}
+
+                        <View style={dynamicStyles.handle} />
+
+                        <GestureDetector gesture={nativeGesture}>
+                            <Animated.ScrollView
+                                ref={scrollViewRef}
+                                style={[
+                                    styles.scrollView,
+                                    Platform.OS === 'web' && ({
+                                        scrollbarWidth: 'thin',
+                                        scrollbarColor: `${colors.border} transparent`,
+                                    } as ViewStyle),
+                                ]}
+                                contentContainerStyle={dynamicStyles.scrollContent}
+                                showsVerticalScrollIndicator={false}
+                                keyboardShouldPersistTaps="handled"
+                                onScroll={scrollHandler}
+                                scrollEventThrottle={16}
+                                {...(Platform.OS === 'web' ? { className: 'bottom-sheet-scrollview' } : undefined)}
+                                onLayout={() => {
+                                    if (Platform.OS === 'web') {
+                                        createWebScrollbarStyle(colors.border);
+                                    }
+                                }}
+                            >
+                                {children}
+                            </Animated.ScrollView>
+                        </GestureDetector>
+                    </Animated.View>
+                </GestureDetector>
+            </View>
+        </Modal>
+    );
+});
+
+BottomSheet.displayName = 'BottomSheet';
+
+const styles = StyleSheet.create({
+    backdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    backdropTouchable: {
+        flex: 1,
+    },
+    sheet: {
+        position: 'absolute',
+        bottom: 0,
+        overflow: 'hidden',
+        maxWidth: 800,
+        alignSelf: 'center',
+        marginHorizontal: 'auto',
+    },
+    sheetDetached: {
+        left: 16,
+        right: 16,
+        borderRadius: 24,
+    },
+    sheetNormal: {
+        left: 0,
+        right: 0,
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    handle: {
+        position: 'absolute',
+        top: 10,
+        left: '50%',
+        marginLeft: -18,
+        width: 36,
+        height: 5,
+        borderRadius: 3,
+        zIndex: 100,
+    },
+    background: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+});
+
+// Create web scrollbar styles dynamically based on theme
+const createWebScrollbarStyle = (borderColor: string) => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+
+    const styleId = 'bottom-sheet-scrollbar-style';
+    let styleElement = document.getElementById(styleId) as HTMLStyleElement;
+
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        document.head.appendChild(styleElement);
+    }
+
+    // Use theme border color for scrollbar
+    const scrollbarColor = borderColor;
+    const scrollbarHoverColor = borderColor === '#E5E5EA' ? '#C7C7CC' : '#555';
+
+    styleElement.textContent = `
+        .bottom-sheet-scrollview::-webkit-scrollbar {
+            width: 6px;
+        }
+        .bottom-sheet-scrollview::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 10px;
+        }
+        .bottom-sheet-scrollview::-webkit-scrollbar-thumb {
+            background: ${scrollbarColor};
+            border-radius: 10px;
+        }
+        .bottom-sheet-scrollview::-webkit-scrollbar-thumb:hover {
+            background: ${scrollbarHoverColor};
+        }
+    `;
+};
+
+export default BottomSheet;
+export { BottomSheet };

package/src/index.ts

@@ -48,6 +48,10 @@ export * as TextField from './text-field';
 export * as SegmentedControl from './segmented-control';
 export { SearchInput } from './search-input';
 
+// Bottom sheet
+export { BottomSheet } from './bottom-sheet';
+export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
+
 // Overlay components
 export * as Admonition from './admonition';
 export * as Menu from './menu';

package/src/theme/color-presets.ts

@@ -1,4 +1,4 @@
-export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint';
+export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy';
 
 export interface AppColorPreset {
   name: AppColorName;
@@ -20,6 +20,7 @@ export const HEX_TO_APP_COLOR: Record<string, AppColorName> = {
   '#0ea5e9': 'sky',
   '#f97316': 'orange',
   '#14b8a6': 'mint',
+  '#c46ede': 'oxy',
 };
 
 export function hexToAppColorName(hex: string): AppColorName {
@@ -496,4 +497,51 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
       '--sidebar': '173 30% 8%',
     },
   },
+
+  oxy: {
+    name: 'oxy',
+    hex: '#c46ede',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '277 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '277 66% 56%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '277 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '277 8% 95%',
+      '--muted-foreground': '277 5% 42%',
+      '--accent': '277 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '277 8% 88%',
+      '--input': '277 8% 88%',
+      '--ring': '277 66% 56%',
+      '--sidebar': '277 10% 97%',
+    },
+    dark: {
+      '--background': '277 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '277 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '277 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '277 66% 56%',
+      '--primary-foreground': '0 0% 100%',
+      '--secondary': '277 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '277 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '277 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '277 12% 20%',
+      '--input': '277 10% 23%',
+      '--ring': '277 66% 56%',
+      '--sidebar': '277 30% 8%',
+    },
+  },
 };