@umituz/react-native-bottom-sheet 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-bottom-sheet",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,7 +30,6 @@
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",
     "@umituz/react-native-design-system": "*",
-    "@umituz/react-native-design-system-theme": "*",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.16.0",
@@ -42,7 +41,6 @@
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
     "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-design-system-theme": "latest",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
     "react-native-gesture-handler": "~2.16.1",
@@ -58,4 +56,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/domain/entities/BottomSheet.ts

@@ -1,212 +1,65 @@
-/**
- * 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 { Dimensions } from 'react-native';
 
-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';
+export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full' | 'custom';
 
-/**
- * Bottom sheet preset sizes
- */
-export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full';
+export type KeyboardBehavior = 'interactive' | 'extend' | 'fillParent';
 
-/**
- * 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;
+    snapPoints: SnapPoint[];
+    initialIndex?: number;
+    enableBackdrop?: boolean;
+    backdropAppearsOnIndex?: number;
+    backdropDisappearsOnIndex?: number;
+    keyboardBehavior?: KeyboardBehavior;
+    enableHandleIndicator?: boolean;
+    enablePanDownToClose?: boolean;
+    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;
+    getPreset: (preset: BottomSheetPreset): BottomSheetConfig => {
+        switch (preset) {
+            case 'small':
+                return {
+                    snapPoints: ['25%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+            case 'medium':
+                return {
+                    snapPoints: ['50%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+            case 'large':
+                return {
+                    snapPoints: ['90%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+            case 'full':
+                return {
+                    snapPoints: ['100%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: false,
+                };
+            default:
+                return {
+                    snapPoints: ['50%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
         }
-      }
-      return false;
-    });
-  },
-
-  /**
-   * Create backdrop config
-   */
-  createBackdropConfig: (
-    appearsOnIndex: number = 0,
-    disappearsOnIndex: number = -1,
-    opacity: number = 0.5
-  ): BackdropConfig => {
-    return {
-      appearsOnIndex,
-      disappearsOnIndex,
-      opacity,
-      pressBehavior: 'close',
-    };
-  },
+    },
+
+    createConfig: (config: Partial<BottomSheetConfig>): BottomSheetConfig => {
+        return {
+            snapPoints: ['50%'],
+            enableBackdrop: true,
+            enablePanDownToClose: true,
+            ...config,
+        };
+    },
 };

package/src/index.ts

@@ -1,115 +1,6 @@
-/**
- * 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';
-export {
-  BottomSheetModal,
-  type BottomSheetModalProps,
-  type BottomSheetModalRef,
-} from './presentation/components/BottomSheetModal';
-
-// Presentation Hooks
-export {
-  useBottomSheet,
-  type UseBottomSheetReturn,
-} from './presentation/hooks/useBottomSheet';
-export {
-  useBottomSheetModal,
-  type UseBottomSheetModalReturn,
-} from './presentation/hooks/useBottomSheetModal';
-
-// Re-export BottomSheetModalProvider for convenience
-export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-
-// Safe provider that ensures Reanimated is ready before rendering
-export {
-  SafeBottomSheetModalProvider,
-} from './presentation/components/SafeBottomSheetModalProvider';
+export * from './presentation/components/BottomSheet';
+export * from './presentation/components/BottomSheetModal';
+export * from './presentation/components/SafeBottomSheetModalProvider';
+export * from './presentation/hooks/useBottomSheet';
+export * from './presentation/hooks/useBottomSheetModal';
+export * from './domain/entities/BottomSheet';

package/src/presentation/components/BottomSheet.tsx

@@ -36,7 +36,7 @@ import GorhomBottomSheet, {
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import type {
   BottomSheetConfig,
   BottomSheetPreset,

package/src/presentation/components/BottomSheetModal.tsx

@@ -38,7 +38,7 @@ import {
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import type {
   BottomSheetConfig,
   BottomSheetPreset,

package/README.md

@@ -1,101 +0,0 @@
-# @umituz/react-native-bottom-sheet
-
-Modern, performant bottom sheets for React Native with preset configurations, keyboard handling, and smooth animations.
-
-## Installation
-
-```bash
-npm install @umituz/react-native-bottom-sheet
-```
-
-## Peer Dependencies
-
-- `react` >= 18.2.0
-- `react-native` >= 0.74.0
-- `@gorhom/bottom-sheet` >= 5.0.0
-- `react-native-gesture-handler` >= 2.16.0
-- `react-native-reanimated` >= 3.10.0
-
-## 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
-
-### Basic 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
-
-```tsx
-<BottomSheet
-  snapPoints={['25%', '50%', '90%']}
-  initialIndex={1}
-  enableBackdrop
->
-  <FilterForm />
-</BottomSheet>
-```
-
-### Keyboard-Aware Sheet
-
-```tsx
-<BottomSheet
-  preset="large"
-  keyboardBehavior="fillParent"
->
-  <CommentForm />
-</BottomSheet>
-```
-
-## Presets
-
-- `small`: 25% height
-- `medium`: 50% height
-- `large`: 75% height
-- `full`: Multi-snap (25%, 50%, 90%)
-
-## API
-
-### Components
-
-- `BottomSheet`: Main bottom sheet component
-
-### Hooks
-
-- `useBottomSheet()`: Hook for managing bottom sheet state
-
-## License
-
-MIT
-