@umituz/react-native-bottom-sheet 1.0.0

package/lib/presentation/components/BottomSheet.js

@@ -0,0 +1,108 @@
+/**
+ * Bottom Sheet Component
+ *
+ * Main bottom sheet wrapper using @gorhom/bottom-sheet library.
+ * Provides a clean, theme-aware API for bottom sheets across the app.
+ *
+ * Features:
+ * - Snap point support (percentage, fixed, dynamic)
+ * - Backdrop with tap-to-close
+ * - Keyboard handling (interactive, fillParent, extend)
+ * - Theme-aware colors
+ * - Handle indicator
+ * - Pan down to close
+ * - Smooth animations with Reanimated v3
+ *
+ * Usage:
+ * ```tsx
+ * const sheetRef = useRef<BottomSheetRef>(null);
+ *
+ * <BottomSheet
+ *   ref={sheetRef}
+ *   preset="medium"
+ *   onClose={() => console.log('Closed')}
+ * >
+ *   <View>
+ *     <Text>Bottom Sheet Content</Text>
+ *   </View>
+ * </BottomSheet>
+ * ```
+ */
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import GorhomBottomSheet, { BottomSheetView, BottomSheetBackdrop, } from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { BottomSheetUtils } from '../../domain/entities/BottomSheet';
+/**
+ * Bottom Sheet Component
+ *
+ * Modern, performant bottom sheet for React Native.
+ * Uses @gorhom/bottom-sheet with Reanimated v3.
+ */
+export const BottomSheet = forwardRef(({ children, preset = 'medium', snapPoints: customSnapPoints, initialIndex, enableBackdrop = true, backdropAppearsOnIndex, backdropDisappearsOnIndex, keyboardBehavior = 'interactive', enableHandleIndicator = true, enablePanDownToClose = true, enableDynamicSizing = false, onChange, onClose, }, ref) => {
+    const tokens = useAppDesignTokens();
+    // Get configuration from preset or custom
+    const config = useMemo(() => {
+        if (customSnapPoints) {
+            return BottomSheetUtils.createConfig({
+                snapPoints: customSnapPoints,
+                initialIndex,
+                enableBackdrop,
+                backdropAppearsOnIndex,
+                backdropDisappearsOnIndex,
+                keyboardBehavior,
+                enableHandleIndicator,
+                enablePanDownToClose,
+                enableDynamicSizing,
+            });
+        }
+        return BottomSheetUtils.getPreset(preset);
+    }, [
+        preset,
+        customSnapPoints,
+        initialIndex,
+        enableBackdrop,
+        backdropAppearsOnIndex,
+        backdropDisappearsOnIndex,
+        keyboardBehavior,
+        enableHandleIndicator,
+        enablePanDownToClose,
+        enableDynamicSizing,
+    ]);
+    // Render backdrop component
+    const renderBackdrop = useCallback((props) => enableBackdrop ? (<BottomSheetBackdrop {...props} appearsOnIndex={config.backdropAppearsOnIndex ?? 0} disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1} opacity={0.5} pressBehavior="close"/>) : null, [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]);
+    // Handle sheet changes
+    const handleSheetChange = useCallback((index) => {
+        onChange?.(index);
+        if (index === -1) {
+            onClose?.();
+        }
+    }, [onChange, onClose]);
+    return (<GorhomBottomSheet ref={ref} index={config.initialIndex ?? 0} snapPoints={config.snapPoints} enableDynamicSizing={config.enableDynamicSizing} backdropComponent={renderBackdrop} keyboardBehavior={config.keyboardBehavior} enableHandlePanningGesture={config.enableHandleIndicator} enablePanDownToClose={config.enablePanDownToClose} onChange={handleSheetChange} backgroundStyle={[
+            styles.background,
+            { backgroundColor: tokens.colors.surface },
+        ]} handleIndicatorStyle={[
+            styles.handleIndicator,
+            { backgroundColor: tokens.colors.border },
+        ]}>
+        <BottomSheetView style={styles.contentContainer}>
+          {children}
+        </BottomSheetView>
+      </GorhomBottomSheet>);
+});
+BottomSheet.displayName = 'BottomSheet';
+const styles = StyleSheet.create({
+    background: {
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+    },
+    handleIndicator: {
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=BottomSheet.js.map

package/lib/presentation/components/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["../../../src/presentation/components/BottomSheet.tsx"],"names":[],"mappings":"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"}

package/lib/presentation/hooks/useBottomSheet.d.ts

@@ -0,0 +1,70 @@
+/**
+ * useBottomSheet Hook
+ *
+ * React hook for managing bottom sheet state and interactions.
+ * Provides a clean API for common bottom sheet operations.
+ *
+ * Features:
+ * - Open/close bottom sheet
+ * - Snap to specific index
+ * - Expand to max height
+ * - Collapse to min height
+ * - Track current position
+ * - Preset configurations
+ *
+ * Usage:
+ * ```tsx
+ * const { sheetRef, open, close, expand, collapse } = useBottomSheet();
+ *
+ * return (
+ *   <>
+ *     <Button onPress={open}>Open Sheet</Button>
+ *     <BottomSheet ref={sheetRef} preset="medium">
+ *       <Text>Content</Text>
+ *     </BottomSheet>
+ *   </>
+ * );
+ * ```
+ */
+import type { BottomSheetRef } from '../components/BottomSheet';
+/**
+ * Return type for useBottomSheet hook
+ */
+export interface UseBottomSheetReturn {
+    /**
+     * Ref to attach to BottomSheet component
+     */
+    sheetRef: React.RefObject<BottomSheetRef>;
+    /**
+     * Open bottom sheet to initial index
+     */
+    open: () => void;
+    /**
+     * Close bottom sheet completely
+     */
+    close: () => void;
+    /**
+     * Expand to maximum height
+     */
+    expand: () => void;
+    /**
+     * Collapse to minimum height
+     */
+    collapse: () => void;
+    /**
+     * Snap to specific index
+     */
+    snapToIndex: (index: number) => void;
+    /**
+     * Snap to specific position
+     */
+    snapToPosition: (position: string | number) => void;
+}
+/**
+ * useBottomSheet Hook
+ *
+ * Hook for managing bottom sheet state and interactions.
+ * Provides imperative methods for controlling the sheet.
+ */
+export declare const useBottomSheet: () => UseBottomSheetReturn;
+//# sourceMappingURL=useBottomSheet.d.ts.map

package/lib/presentation/hooks/useBottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/presentation/hooks/useBottomSheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAE1C;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QAAO,oBAsDjC,CAAC"}

package/lib/presentation/hooks/useBottomSheet.js

@@ -0,0 +1,84 @@
+/**
+ * useBottomSheet Hook
+ *
+ * React hook for managing bottom sheet state and interactions.
+ * Provides a clean API for common bottom sheet operations.
+ *
+ * Features:
+ * - Open/close bottom sheet
+ * - Snap to specific index
+ * - Expand to max height
+ * - Collapse to min height
+ * - Track current position
+ * - Preset configurations
+ *
+ * Usage:
+ * ```tsx
+ * const { sheetRef, open, close, expand, collapse } = useBottomSheet();
+ *
+ * return (
+ *   <>
+ *     <Button onPress={open}>Open Sheet</Button>
+ *     <BottomSheet ref={sheetRef} preset="medium">
+ *       <Text>Content</Text>
+ *     </BottomSheet>
+ *   </>
+ * );
+ * ```
+ */
+import { useRef, useCallback } from 'react';
+/**
+ * useBottomSheet Hook
+ *
+ * Hook for managing bottom sheet state and interactions.
+ * Provides imperative methods for controlling the sheet.
+ */
+export const useBottomSheet = () => {
+    const sheetRef = useRef(null);
+    /**
+     * Open bottom sheet to first snap point
+     */
+    const open = useCallback(() => {
+        sheetRef.current?.snapToIndex(0);
+    }, []);
+    /**
+     * Close bottom sheet completely
+     */
+    const close = useCallback(() => {
+        sheetRef.current?.close();
+    }, []);
+    /**
+     * Expand to maximum height (last snap point)
+     */
+    const expand = useCallback(() => {
+        sheetRef.current?.expand();
+    }, []);
+    /**
+     * Collapse to minimum height (first snap point)
+     */
+    const collapse = useCallback(() => {
+        sheetRef.current?.collapse();
+    }, []);
+    /**
+     * Snap to specific index
+     */
+    const snapToIndex = useCallback((index) => {
+        sheetRef.current?.snapToIndex(index);
+    }, []);
+    /**
+     * Snap to specific position (percentage or fixed)
+     */
+    const snapToPosition = useCallback((position) => {
+        sheetRef.current?.snapToPosition(position);
+    }, []);
+    return {
+        sheetRef,
+        open,
+        close,
+        expand,
+        collapse,
+        snapToIndex,
+        snapToPosition,
+    };
+};
+//# sourceMappingURL=useBottomSheet.js.map

package/lib/presentation/hooks/useBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomSheet.js","sourceRoot":"","sources":["../../../src/presentation/hooks/useBottomSheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA2C5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAyB,EAAE;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C;;OAEG;IACH,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAChD,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,QAAyB,EAAE,EAAE;QAC/D,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,QAAQ;QACR,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ;QACR,WAAW;QACX,cAAc;KACf,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@umituz/react-native-bottom-sheet",
+  "version": "1.0.0",
+  "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf lib",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "bottom-sheet",
+    "modal",
+    "sheet",
+    "reanimated",
+    "gesture-handler"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-bottom-sheet"
+  },
+  "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "@umituz/react-native-design-system": "*",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-gesture-handler": ">=2.16.0",
+    "react-native-reanimated": ">=3.10.0"
+  },
+  "devDependencies": {
+    "@gorhom/bottom-sheet": "^5",
+    "@types/react": "^18.2.45",
+    "@types/react-native": "^0.73.0",
+    "@umituz/react-native-design-system": "latest",
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "^3.10.1",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}
+

package/src/domain/entities/BottomSheet.ts

@@ -0,0 +1,212 @@
+/**
+ * Bottom Sheet Domain - Entity
+ *
+ * Defines bottom sheet types, snap point configurations, and utilities.
+ * Provides a clean abstraction over @gorhom/bottom-sheet library.
+ *
+ * Features:
+ * - Snap point types (percentage, fixed, dynamic)
+ * - Pre-built configs (small, medium, large, full)
+ * - Backdrop configurations
+ * - Animation timing configs
+ * - Keyboard behavior options
+ *
+ * Architecture:
+ * - Domain Layer: Pure business logic, no UI dependencies
+ * - Factory pattern for config creation
+ * - Type-safe snap points and options
+ */
+
+import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
+
+/**
+ * Snap point types for bottom sheet positioning
+ */
+export type SnapPoint = string | number;
+
+/**
+ * Keyboard behavior strategies
+ */
+export type KeyboardBehavior = 'interactive' | 'fillParent' | 'extend';
+
+/**
+ * Bottom sheet preset sizes
+ */
+export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full';
+
+/**
+ * Bottom sheet configuration interface
+ */
+export interface BottomSheetConfig {
+  /**
+   * Snap points for the bottom sheet
+   * - Percentage: '25%', '50%', '75%'
+   * - Fixed: 200, 400, 600
+   * - Dynamic: 'CONTENT_HEIGHT'
+   */
+  snapPoints: SnapPoint[];
+
+  /**
+   * Initial snap point index (default: 0)
+   */
+  initialIndex?: number;
+
+  /**
+   * Enable backdrop (darkens background)
+   */
+  enableBackdrop?: boolean;
+
+  /**
+   * Backdrop appears at this snap index (default: 0)
+   */
+  backdropAppearsOnIndex?: number;
+
+  /**
+   * Backdrop disappears at this snap index (default: -1)
+   */
+  backdropDisappearsOnIndex?: number;
+
+  /**
+   * Keyboard behavior strategy
+   */
+  keyboardBehavior?: KeyboardBehavior;
+
+  /**
+   * Enable handle indicator (default: true)
+   */
+  enableHandleIndicator?: boolean;
+
+  /**
+   * Enable pan down to close (default: true)
+   */
+  enablePanDownToClose?: boolean;
+
+  /**
+   * Enable dynamic sizing
+   */
+  enableDynamicSizing?: boolean;
+}
+
+/**
+ * Backdrop configuration
+ */
+export interface BackdropConfig {
+  appearsOnIndex: number;
+  disappearsOnIndex: number;
+  opacity?: number;
+  pressBehavior?: 'none' | 'close' | 'collapse';
+}
+
+/**
+ * Pre-built bottom sheet configurations
+ */
+export const BOTTOM_SHEET_PRESETS: Record<BottomSheetPreset, BottomSheetConfig> = {
+  small: {
+    snapPoints: ['25%'],
+    initialIndex: 0,
+    enableBackdrop: true,
+    backdropAppearsOnIndex: 0,
+    backdropDisappearsOnIndex: -1,
+    enableHandleIndicator: true,
+    enablePanDownToClose: true,
+  },
+  medium: {
+    snapPoints: ['50%'],
+    initialIndex: 0,
+    enableBackdrop: true,
+    backdropAppearsOnIndex: 0,
+    backdropDisappearsOnIndex: -1,
+    enableHandleIndicator: true,
+    enablePanDownToClose: true,
+  },
+  large: {
+    snapPoints: ['75%'],
+    initialIndex: 0,
+    enableBackdrop: true,
+    backdropAppearsOnIndex: 0,
+    backdropDisappearsOnIndex: -1,
+    enableHandleIndicator: true,
+    enablePanDownToClose: true,
+  },
+  full: {
+    snapPoints: ['25%', '50%', '90%'],
+    initialIndex: 1,
+    enableBackdrop: true,
+    backdropAppearsOnIndex: 2,
+    backdropDisappearsOnIndex: 1,
+    enableHandleIndicator: true,
+    enablePanDownToClose: true,
+  },
+};
+
+/**
+ * Default bottom sheet configuration
+ */
+export const DEFAULT_BOTTOM_SHEET_CONFIG: BottomSheetConfig = {
+  snapPoints: ['50%'],
+  initialIndex: 0,
+  enableBackdrop: true,
+  backdropAppearsOnIndex: 0,
+  backdropDisappearsOnIndex: -1,
+  keyboardBehavior: 'interactive',
+  enableHandleIndicator: true,
+  enablePanDownToClose: true,
+  enableDynamicSizing: false,
+};
+
+/**
+ * Bottom sheet utilities
+ */
+export const BottomSheetUtils = {
+  /**
+   * Create custom bottom sheet config
+   */
+  createConfig: (overrides: Partial<BottomSheetConfig>): BottomSheetConfig => {
+    return {
+      ...DEFAULT_BOTTOM_SHEET_CONFIG,
+      ...overrides,
+    };
+  },
+
+  /**
+   * Get preset configuration
+   */
+  getPreset: (preset: BottomSheetPreset): BottomSheetConfig => {
+    return BOTTOM_SHEET_PRESETS[preset];
+  },
+
+  /**
+   * Validate snap points
+   */
+  validateSnapPoints: (snapPoints: SnapPoint[]): boolean => {
+    if (snapPoints.length === 0) return false;
+
+    return snapPoints.every(point => {
+      if (typeof point === 'number') return point > 0;
+      if (typeof point === 'string') {
+        if (point === 'CONTENT_HEIGHT') return true;
+        if (point.endsWith('%')) {
+          const value = parseInt(point);
+          return value > 0 && value <= 100;
+        }
+      }
+      return false;
+    });
+  },
+
+  /**
+   * Create backdrop config
+   */
+  createBackdropConfig: (
+    appearsOnIndex: number = 0,
+    disappearsOnIndex: number = -1,
+    opacity: number = 0.5
+  ): BackdropConfig => {
+    return {
+      appearsOnIndex,
+      disappearsOnIndex,
+      opacity,
+      pressBehavior: 'close',
+    };
+  },
+};

package/src/index.ts

@@ -0,0 +1,98 @@
+/**
+ * Bottom Sheet Domain - Barrel Export
+ *
+ * Public API for the bottom-sheet domain.
+ * Provides modern, performant bottom sheets for React Native.
+ *
+ * Features:
+ * - Preset configurations (small, medium, large, full)
+ * - Custom snap points (percentage, fixed, dynamic)
+ * - Backdrop with tap-to-close
+ * - Keyboard handling (interactive, fillParent, extend)
+ * - Theme-aware colors
+ * - Handle indicator
+ * - Pan down to close
+ * - Smooth animations with Reanimated v3
+ * - Offline-compatible (100% client-side)
+ *
+ * Usage:
+ * ```tsx
+ * import { BottomSheet, useBottomSheet } from '@umituz/react-native-bottom-sheet';
+ *
+ * const MyScreen = () => {
+ *   const { sheetRef, open, close } = useBottomSheet();
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={open}>Open Sheet</Button>
+ *       <BottomSheet
+ *         ref={sheetRef}
+ *         preset="medium"
+ *         onClose={() => console.log('Closed')}
+ *       >
+ *         <View>
+ *           <Text>Bottom Sheet Content</Text>
+ *         </View>
+ *       </BottomSheet>
+ *     </>
+ *   );
+ * };
+ *
+ * // Custom snap points
+ * <BottomSheet
+ *   snapPoints={['25%', '50%', '90%']}
+ *   initialIndex={1}
+ *   enableBackdrop
+ * >
+ *   <FilterForm />
+ * </BottomSheet>
+ *
+ * // Keyboard-aware sheet
+ * <BottomSheet
+ *   preset="large"
+ *   keyboardBehavior="fillParent"
+ * >
+ *   <CommentForm />
+ * </BottomSheet>
+ * ```
+ *
+ * Presets:
+ * - small: 25% height
+ * - medium: 50% height
+ * - large: 75% height
+ * - full: Multi-snap (25%, 50%, 90%)
+ *
+ * Technical:
+ * - Uses @gorhom/bottom-sheet library
+ * - Animated with react-native-reanimated v3
+ * - Gesture handling with react-native-gesture-handler
+ * - Zero backend dependencies
+ */
+
+// Domain Entities
+export type {
+  BottomSheetConfig,
+  BottomSheetPreset,
+  SnapPoint,
+  KeyboardBehavior,
+  BackdropConfig,
+} from './domain/entities/BottomSheet';
+
+export {
+  BOTTOM_SHEET_PRESETS,
+  DEFAULT_BOTTOM_SHEET_CONFIG,
+  BottomSheetUtils,
+} from './domain/entities/BottomSheet';
+
+// Presentation Components
+export {
+  BottomSheet,
+  type BottomSheetProps,
+  type BottomSheetRef,
+} from './presentation/components/BottomSheet';
+
+// Presentation Hooks
+export {
+  useBottomSheet,
+  type UseBottomSheetReturn,
+} from './presentation/hooks/useBottomSheet';