@umituz/react-native-design-system 2.3.9 → 2.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.3.9",
+  "version": "2.3.11",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -226,6 +226,25 @@ export {
   type BadgeSize,
 } from './atoms';
 
+// =============================================================================
+// LAYOUTS EXPORTS
+// =============================================================================
+
+export {
+  ScreenLayout,
+  AppHeader,
+  ScreenHeader,
+  Grid,
+  Container,
+  FormLayout,
+  type ScreenLayoutProps,
+  type AppHeaderProps,
+  type ScreenHeaderProps,
+  type GridProps,
+  type ContainerProps,
+  type FormLayoutProps,
+} from './layouts';
+
 // =============================================================================
 // MOLECULES EXPORTS
 // =============================================================================
@@ -235,14 +254,36 @@ export {
   ListItem,
   SearchBar,
   IconContainer,
-  ScreenHeader,
   BaseModal,
   ConfirmationModal,
   useConfirmationModal,
   StepProgress,
-  Grid,
   List,
-  Container,
+  Avatar,
+  AvatarGroup,
+  AvatarUtils,
+  type AvatarProps,
+  type AvatarGroupProps,
+  type AvatarGroupItem,
+  type AvatarSize,
+  type AvatarShape,
+  type AvatarConfig,
+  type AvatarType,
+  // Bottom Sheet
+  BottomSheet,
+  BottomSheetModal,
+  SafeBottomSheetModalProvider,
+  FilterBottomSheet,
+  FilterSheet,
+  useBottomSheet,
+  useBottomSheetModal,
+  useListFilters,
+  type BottomSheetProps,
+  type BottomSheetModalProps,
+  type BottomSheetRef,
+  type BottomSheetModalRef,
+  type FilterOption,
+  type FilterCategory,
   // Alerts
   AlertBanner,
   AlertToast,
@@ -256,9 +297,7 @@ export {
   AlertMode,
   AlertPosition,
   type BaseModalProps,
-  type GridProps,
   type ListProps,
-  type ContainerProps,
   type Alert,
   type AlertAction,
   type AlertOptions,
@@ -269,11 +308,8 @@ export {
 // =============================================================================
 
 export {
-  ScreenLayout,
-  AppHeader,
   FormContainer,
-  FormLayout,
-  type FormLayoutProps,
+  type FormContainerProps,
 } from './organisms';
 
 // =============================================================================

package/src/{organisms → layouts/AppHeader}/AppHeader.tsx

@@ -11,8 +11,8 @@
 import React from 'react';
 import { View, type ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../theme';
-import { AtomicText, AtomicButton, type IconName } from '../atoms';
+import { useAppDesignTokens } from '../../theme';
+import { AtomicText, AtomicButton, type IconName } from '../../atoms';
 
 // =============================================================================
 // TYPE DEFINITIONS

package/src/layouts/AppHeader/index.ts

@@ -0,0 +1 @@
+export * from './AppHeader';

package/src/{molecules → layouts/ScreenHeader}/ScreenHeader.tsx

@@ -14,8 +14,8 @@
 
 import React from 'react';
 import { View, TouchableOpacity, ViewStyle } from 'react-native';
-import { AtomicIcon, AtomicText } from '../atoms';
-import { useAppDesignTokens } from '../theme';
+import { AtomicIcon, AtomicText } from '../../atoms';
+import { useAppDesignTokens } from '../../theme';
 
 export interface ScreenHeaderProps {
   /** Screen title (centered) */

package/src/layouts/ScreenHeader/index.ts

@@ -0,0 +1 @@
+export * from './ScreenHeader';

package/src/{organisms → layouts/ScreenLayout}/ScreenLayout.tsx

@@ -27,10 +27,10 @@ import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, type ViewStyle, RefreshControlProps } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { Edge } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../theme';
-import { useResponsive } from '../responsive/useResponsive';
-import { getResponsiveMaxWidth } from '../responsive/responsiveSizing';
-import { getResponsiveHorizontalPadding } from '../responsive/responsiveLayout';
+import { useAppDesignTokens } from '../../theme';
+import { useResponsive } from '../../responsive/useResponsive';
+import { getResponsiveMaxWidth } from '../../responsive/responsiveSizing';
+import { getResponsiveHorizontalPadding } from '../../responsive/responsiveLayout';
 
 /**
  * NOTE: This component now works in conjunction with the SafeAreaProvider

package/src/layouts/ScreenLayout/index.ts

@@ -0,0 +1 @@
+export * from './ScreenLayout';

package/src/layouts/index.ts

@@ -0,0 +1,6 @@
+export * from './AppHeader';
+export * from './Container';
+export * from './FormLayout';
+export * from './Grid';
+export * from './ScreenHeader';
+export * from './ScreenLayout';

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import GorhomBottomSheet, {
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '../../../theme';
+import type {
+  BottomSheetConfig,
+  BottomSheetRef,
+  BottomSheetProps,
+} from '../types/BottomSheet';
+import { BottomSheetUtils } from '../types/BottomSheet';
+
+export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props, ref) => {
+  const {
+    children,
+    preset = 'medium',
+    snapPoints: customSnapPoints,
+    initialIndex,
+    enableBackdrop = true,
+    backdropAppearsOnIndex,
+    backdropDisappearsOnIndex,
+    keyboardBehavior = 'interactive',
+    enableHandleIndicator = true,
+    enablePanDownToClose = true,
+    enableDynamicSizing = false,
+    onChange,
+    onClose,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const sheetRef = useRef<GorhomBottomSheet>(null);
+
+  const config: BottomSheetConfig = 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]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) =>
+      enableBackdrop ? (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
+          disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
+          opacity={0.5}
+          pressBehavior="close"
+        />
+      ) : null,
+    [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
+  );
+
+  const handleSheetChange = useCallback(
+    (index: number) => {
+      onChange?.(index);
+      if (index === -1) onClose?.();
+    },
+    [onChange, onClose]
+  );
+
+  useImperativeHandle(ref, () => ({
+    snapToIndex: (index: number) => sheetRef.current?.snapToIndex(index),
+    snapToPosition: (pos: string | number) => sheetRef.current?.snapToPosition(pos),
+    expand: () => sheetRef.current?.expand(),
+    collapse: () => sheetRef.current?.collapse(),
+    close: () => sheetRef.current?.close(),
+  }));
+
+  if (!config.snapPoints || config.snapPoints.length === 0) return null;
+
+  return (
+    <GorhomBottomSheet
+      ref={sheetRef}
+      index={-1}
+      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,
+  },
+});
+

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useCallback, useMemo, useImperativeHandle, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  BottomSheetModal as GorhomBottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { useAppDesignTokens } from '../../../theme';
+import type {
+  BottomSheetConfig,
+  BottomSheetModalRef,
+  BottomSheetModalProps,
+} from '../types/BottomSheet';
+import { BottomSheetUtils } from '../types/BottomSheet';
+
+export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModalProps>((props, ref) => {
+  const {
+    children,
+    preset = 'medium',
+    snapPoints: customSnapPoints,
+    initialIndex,
+    enableBackdrop = true,
+    backdropAppearsOnIndex,
+    backdropDisappearsOnIndex,
+    keyboardBehavior = 'interactive',
+    enableHandleIndicator = true,
+    enablePanDownToClose = true,
+    enableDynamicSizing = false,
+    onChange,
+    onDismiss,
+    backgroundColor,
+  } = props;
+
+  const tokens = useAppDesignTokens();
+  const modalRef = useRef<GorhomBottomSheetModal>(null);
+
+  const config: BottomSheetConfig = 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]);
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) =>
+      enableBackdrop ? (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          appearsOnIndex={config.backdropAppearsOnIndex ?? 0}
+          disappearsOnIndex={config.backdropDisappearsOnIndex ?? -1}
+          opacity={0.5}
+          pressBehavior="close"
+        />
+      ) : null,
+    [enableBackdrop, config.backdropAppearsOnIndex, config.backdropDisappearsOnIndex]
+  );
+
+  const handleSheetChange = useCallback(
+    (index: number) => {
+      onChange?.(index);
+      if (index === -1) onDismiss?.();
+    },
+    [onChange, onDismiss]
+  );
+
+  useImperativeHandle(ref, () => ({
+    present: () => modalRef.current?.present(),
+    dismiss: () => modalRef.current?.dismiss(),
+    snapToIndex: (index: number) => modalRef.current?.snapToIndex(index),
+    snapToPosition: (pos: string | number) => modalRef.current?.snapToPosition(pos),
+    expand: () => modalRef.current?.expand(),
+    collapse: () => modalRef.current?.collapse(),
+  }));
+
+  return (
+    <GorhomBottomSheetModal
+      ref={modalRef}
+      index={-1}
+      snapPoints={config.snapPoints}
+      enableDynamicSizing={config.enableDynamicSizing}
+      backdropComponent={renderBackdrop}
+      keyboardBehavior={config.keyboardBehavior}
+      enableHandlePanningGesture={config.enableHandleIndicator}
+      enablePanDownToClose={config.enablePanDownToClose}
+      onChange={handleSheetChange}
+      onDismiss={onDismiss}
+      backgroundStyle={[styles.background, { backgroundColor: backgroundColor || tokens.colors.surface }]}
+      handleIndicatorStyle={[styles.handleIndicator, { backgroundColor: tokens.colors.border }]}
+    >
+      <BottomSheetView style={styles.contentContainer}>
+        {children}
+      </BottomSheetView>
+    </GorhomBottomSheetModal>
+  );
+});
+
+BottomSheetModal.displayName = 'BottomSheetModal';
+
+const styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+});
+

package/src/molecules/bottom-sheet/components/SafeBottomSheetModalProvider.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+interface SafeBottomSheetModalProviderProps {
+  children: ReactNode;
+}
+
+export const SafeBottomSheetModalProvider = ({ children }: SafeBottomSheetModalProviderProps) => (
+  <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+);
+

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -0,0 +1,168 @@
+/**
+ * Presentation - Filter Bottom Sheet component
+ * 
+ * Advanced filtering UI using @umituz/react-native-bottom-sheet
+ */
+
+import React, { forwardRef, useCallback } from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { BottomSheetModal } from '../BottomSheetModal';
+import type { BottomSheetModalRef } from '../../types/BottomSheet';
+import { AtomicText, AtomicIcon, AtomicButton } from "../../../../atoms";
+import { useAppDesignTokens } from '../../../../theme';
+import type { FilterOption, FilterCategory } from '../../types/Filter';
+import { FilterUtils } from '../../types/Filter';
+
+export interface FilterBottomSheetProps {
+    readonly categories: FilterCategory[];
+    readonly selectedIds: string[];
+    readonly onFilterPress: (id: string, categoryId: string) => void;
+    readonly onClearFilters: () => void;
+    readonly onDismiss?: () => void;
+    readonly title?: string;
+    readonly clearLabel?: string;
+    readonly applyLabel?: string;
+    readonly defaultId?: string;
+}
+
+export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomSheetProps>(({
+    categories,
+    selectedIds,
+    onFilterPress,
+    onClearFilters,
+    onDismiss,
+    title,
+    clearLabel = 'Clear',
+    applyLabel = 'Apply',
+    defaultId = 'all'
+}, ref) => {
+    const tokens = useAppDesignTokens();
+
+    const styles = React.useMemo(() => StyleSheet.create({
+        container: {
+            flex: 1,
+            padding: 16,
+        },
+        header: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 20,
+        },
+        category: {
+            marginBottom: 24,
+        },
+        categoryTitle: {
+            marginBottom: 12,
+            opacity: 0.7,
+        },
+        optionsGrid: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 8,
+        },
+        option: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            borderRadius: 20,
+            backgroundColor: tokens.colors.surfaceVariant,
+            gap: 6,
+            borderWidth: 1,
+            borderColor: 'transparent',
+        },
+        optionLeft: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+        },
+        footer: {
+            marginTop: 16,
+            paddingBottom: 8,
+        }
+    }), [tokens]);
+
+    const renderOption = useCallback((option: FilterOption, categoryId: string) => {
+        const isSelected = selectedIds.includes(option.id);
+
+        return (
+            <TouchableOpacity
+                key={option.id}
+                style={[
+                    styles.option,
+                    isSelected && { backgroundColor: tokens.colors.primary + '15' }
+                ]}
+                onPress={() => onFilterPress(option.id, categoryId)}
+            >
+                <View style={styles.optionLeft}>
+                    {option.icon && (
+                        <AtomicIcon
+                            name={option.icon as any}
+                            size="sm"
+                            color={isSelected ? 'primary' : 'secondary'}
+                        />
+                    )}
+                    <AtomicText
+                        type="bodyMedium"
+                        style={[isSelected && { color: tokens.colors.primary, fontWeight: '600' }]}
+                    >
+                        {option.label}
+                    </AtomicText>
+                </View>
+                {isSelected && (
+                    <AtomicIcon name="checkmark" size="sm" color="primary" />
+                )}
+            </TouchableOpacity>
+        );
+    }, [selectedIds, tokens, onFilterPress]);
+
+    const renderCategory = useCallback((category: FilterCategory) => (
+        <View key={category.id} style={styles.category}>
+            <AtomicText type="labelLarge" style={styles.categoryTitle}>
+                {category.title}
+            </AtomicText>
+            <View style={styles.optionsGrid}>
+                {category.options.map(option => renderOption(option, category.id))}
+            </View>
+        </View>
+    ), [renderOption, styles]);
+
+
+    const hasActiveFilters = FilterUtils.hasActiveFilter(selectedIds, defaultId);
+
+    return (
+        <BottomSheetModal
+            ref={ref}
+            preset="medium"
+            onDismiss={onDismiss}
+            backgroundColor={tokens.colors.surface}
+        >
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <AtomicText type="headlineSmall">{title || 'Filter'}</AtomicText>
+                    {hasActiveFilters && (
+                        <TouchableOpacity onPress={onClearFilters}>
+                            <AtomicText type="labelLarge" color="error">{clearLabel}</AtomicText>
+                        </TouchableOpacity>
+                    )}
+                </View>
+
+                <ScrollView showsVerticalScrollIndicator={false}>
+                    {categories.map(renderCategory)}
+                </ScrollView>
+
+                <View style={styles.footer}>
+                    <AtomicButton
+                        onPress={() => (ref as any).current?.dismiss()}
+                        fullWidth
+                    >
+                        {applyLabel}
+                    </AtomicButton>
+                </View>
+            </View>
+        </BottomSheetModal>
+    );
+});
+
+FilterBottomSheet.displayName = 'FilterBottomSheet';

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback } from "react";
+import { View, StyleSheet, ScrollView, Modal, Pressable } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AtomicText, AtomicIcon, AtomicButton } from "../../../../atoms";
+import { useAppDesignTokens } from "../../../../theme";
+import type { FilterOption, FilterCategory } from "../../types/Filter";
+import { FilterUtils } from "../../types/Filter";
+import { FilterSheetHeader } from "./FilterSheetComponents/FilterSheetHeader";
+import { FilterSheetOption } from "./FilterSheetComponents/FilterSheetOption";
+
+export interface FilterSheetProps {
+  visible: boolean;
+  options: FilterOption[];
+  selectedIds: string[];
+  onFilterPress: (filterId: string) => void;
+  onClearFilters: () => void;
+  onClose?: () => void;
+  defaultFilterId?: string;
+  title?: string;
+  clearLabel?: string;
+}
+
+export const FilterSheet: React.FC<FilterSheetProps> = ({
+  visible,
+  options,
+  selectedIds,
+  onFilterPress,
+  onClearFilters,
+  onClose,
+  defaultFilterId = "all",
+  title,
+  clearLabel = "Clear"
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const hasActiveFilter = FilterUtils.hasActiveFilter(selectedIds, defaultFilterId);
+
+  const handleFilterPressWithClose = useCallback((id: string) => {
+    onFilterPress(id);
+    onClose?.();
+  }, [onFilterPress, onClose]);
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <Pressable
+          style={[styles.sheet, { backgroundColor: tokens.colors.surface, paddingBottom: insets.bottom }]}
+          onPress={(e) => e.stopPropagation()}
+        >
+          <View style={[styles.handle, { backgroundColor: tokens.colors.border }]} />
+
+          <FilterSheetHeader
+            title={title || "Filter"}
+            onClose={() => onClose?.()}
+            tokens={tokens}
+          />
+
+          <ScrollView style={styles.optionsList} showsVerticalScrollIndicator={false}>
+            {options.map((option) => (
+              <FilterSheetOption
+                key={option.id}
+                option={option}
+                isSelected={selectedIds.includes(option.id)}
+                onPress={handleFilterPressWithClose}
+                tokens={tokens}
+              />
+            ))}
+          </ScrollView>
+
+          {hasActiveFilter && (
+            <View style={[styles.footer, { borderTopColor: tokens.colors.border, borderTopWidth: tokens.borders.width.thin }]}>
+              <AtomicButton variant="outline" onPress={onClearFilters} fullWidth>
+                {clearLabel}
+              </AtomicButton>
+            </View>
+          )}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+FilterSheet.displayName = "FilterSheet";
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end",
+  },
+  sheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    maxHeight: "80%",
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    alignSelf: "center",
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  optionsList: {
+    maxHeight: 400,
+    paddingVertical: 8,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+});
+
+

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetHeader.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import type { useAppDesignTokens } from '../../../../../theme';
+
+interface FilterSheetHeaderProps {
+    title: string;
+    onClose: () => void;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+export const FilterSheetHeader = ({ title, onClose, tokens }: FilterSheetHeaderProps) => (
+    <View style={[styles.header, { borderBottomColor: tokens.colors.border, borderBottomWidth: tokens.borders.width.thin }]}>
+        <AtomicText type="headlineMedium" style={styles.title}>{title}</AtomicText>
+        <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+            <AtomicIcon name="close" size="md" color="primary" />
+        </TouchableOpacity>
+    </View>
+);
+
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingBottom: 16,
+        paddingTop: 8,
+    },
+    title: {
+        fontWeight: '600',
+    },
+});

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetOption.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import type { useAppDesignTokens } from '../../../../../theme';
+import type { FilterOption } from '../../../types/Filter';
+
+interface FilterSheetOptionProps {
+    option: FilterOption;
+    isSelected: boolean;
+    onPress: (id: string) => void;
+    tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: FilterSheetOptionProps) => (
+    <TouchableOpacity
+        onPress={() => onPress(option.id)}
+        style={[
+            styles.option,
+            { borderBottomColor: tokens.colors.borderLight, borderBottomWidth: tokens.borders.width.thin },
+            isSelected && { backgroundColor: tokens.colors.primary + '15' }
+        ]}
+    >
+        <View style={styles.optionContent}>
+            {option.icon && (
+                <AtomicIcon
+                    name={option.icon as any}
+                    size="md"
+                    color={isSelected ? 'primary' : 'secondary'}
+                />
+            )}
+            <AtomicText
+                type="bodyLarge"
+                style={[styles.optionLabel, isSelected && { color: tokens.colors.primary, fontWeight: '600' }]}
+            >
+                {option.label}
+            </AtomicText>
+        </View>
+        {isSelected && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
+    </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+    option: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+    },
+    optionContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flex: 1,
+    },
+    optionLabel: {
+        flex: 1,
+    },
+});

package/src/molecules/bottom-sheet/hooks/useBottomSheet.ts

@@ -0,0 +1,16 @@
+import { useRef, useCallback } from 'react';
+import type { BottomSheetRef, UseBottomSheetReturn } from '../types/BottomSheet';
+
+export const useBottomSheet = (): UseBottomSheetReturn => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+
+  const open = useCallback(() => sheetRef.current?.snapToIndex(0), []);
+  const close = useCallback(() => sheetRef.current?.close(), []);
+  const expand = useCallback(() => sheetRef.current?.expand(), []);
+  const collapse = useCallback(() => sheetRef.current?.collapse(), []);
+  const snapToIndex = useCallback((index: number) => sheetRef.current?.snapToIndex(index), []);
+  const snapToPosition = useCallback((pos: string | number) => sheetRef.current?.snapToPosition(pos), []);
+
+  return { sheetRef, open, close, expand, collapse, snapToIndex, snapToPosition };
+};
+

package/src/molecules/bottom-sheet/hooks/useBottomSheetModal.ts

@@ -0,0 +1,17 @@
+import { useRef, useCallback } from 'react';
+import type { BottomSheetModalRef, UseBottomSheetModalReturn } from '../types/BottomSheet';
+
+export const useBottomSheetModal = (): UseBottomSheetModalReturn => {
+  const modalRef = useRef<BottomSheetModalRef>(null);
+
+  const present = useCallback(() => modalRef.current?.present(), []);
+  const dismiss = useCallback(() => modalRef.current?.dismiss(), []);
+  const expand = useCallback(() => modalRef.current?.expand(), []);
+  const collapse = useCallback(() => modalRef.current?.collapse(), []);
+  const snapToIndex = useCallback((index: number) => modalRef.current?.snapToIndex(index), []);
+  const snapToPosition = useCallback((pos: string | number) => modalRef.current?.snapToPosition(pos), []);
+
+  return { modalRef, present, dismiss, expand, collapse, snapToIndex, snapToPosition };
+};
+
+

package/src/molecules/bottom-sheet/hooks/useListFilters.ts

@@ -0,0 +1,95 @@
+/**
+ * useListFilters Hook
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { FilterOption } from '../types/Filter';
+
+export interface FilterItem extends FilterOption {
+    active?: boolean;
+}
+
+export interface UseListFiltersReturn<T> {
+    filters: FilterItem[];
+    setFilters: (filters: FilterItem[]) => void;
+    activeFilters: FilterItem[];
+    selectedIds: string[];
+    applyFilters: (items: T[]) => T[];
+    toggleFilter: (id: string) => void;
+    handleFilterPress: (id: string) => void;
+    clearFilters: () => void;
+    handleClearFilters: () => void;
+}
+
+export interface UseListFiltersConfig<T> {
+    options: FilterOption[];
+    defaultFilterId?: string;
+    singleSelect?: boolean;
+    filterFn?: (item: T, activeFilters: FilterItem[]) => boolean;
+}
+
+// Overload 1: When config object is passed
+export function useListFilters<T>(config: UseListFiltersConfig<T>): UseListFiltersReturn<T>;
+// Overload 2: When initial filters array and optional filterFn are passed
+export function useListFilters<T>(initialFilters: FilterItem[], filterFn?: (item: T, activeFilters: FilterItem[]) => boolean): UseListFiltersReturn<T>;
+// Unified implementation
+export function useListFilters<T>(
+    configOrFilters: FilterItem[] | UseListFiltersConfig<T>,
+    filterFnParam?: (item: T, activeFilters: FilterItem[]) => boolean
+): UseListFiltersReturn<T> {
+    const isConfig = !Array.isArray(configOrFilters);
+
+    // Normalize initial state
+    const initialFilters = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).options.map(opt => ({
+            ...opt,
+            active: (configOrFilters as UseListFiltersConfig<T>).defaultFilterId
+                ? opt.id === (configOrFilters as UseListFiltersConfig<T>).defaultFilterId
+                : false
+        }))
+        : (configOrFilters as FilterItem[]);
+
+    const filterFn = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).filterFn
+        : filterFnParam;
+
+    const singleSelect = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).singleSelect
+        : false;
+
+    const [filters, setFilters] = useState<FilterItem[]>(initialFilters);
+
+    const activeFilters = useMemo(() => filters.filter((f) => f.active), [filters]);
+
+    const toggleFilter = useCallback((id: string) => {
+        setFilters((current) => {
+            if (singleSelect) {
+                return current.map((f) => ({ ...f, active: f.id === id }));
+            }
+            return current.map((f) => (f.id === id ? { ...f, active: !f.active } : f));
+        });
+    }, [singleSelect]);
+
+    const clearFilters = useCallback(() => {
+        setFilters((current) => current.map((f) => ({ ...f, active: false })));
+    }, []);
+
+    const applyFilters = useCallback((items: T[]) => {
+        if (activeFilters.length === 0 || !filterFn) return items;
+        return items.filter((item) => filterFn(item, activeFilters));
+    }, [activeFilters, filterFn]);
+
+    const selectedIds = useMemo(() => activeFilters.map((f) => f.id), [activeFilters]);
+
+    return {
+        filters,
+        setFilters,
+        activeFilters,
+        selectedIds,
+        applyFilters,
+        toggleFilter,
+        handleFilterPress: toggleFilter,
+        clearFilters,
+        handleClearFilters: clearFilters,
+    };
+}

package/src/molecules/bottom-sheet/index.ts

@@ -0,0 +1,10 @@
+export * from './components/BottomSheet';
+export * from './components/BottomSheetModal';
+export * from './components/SafeBottomSheetModalProvider';
+export * from './components/filter/FilterBottomSheet';
+export * from './components/filter/FilterSheet';
+export * from './hooks/useBottomSheet';
+export * from './hooks/useBottomSheetModal';
+export * from './hooks/useListFilters';
+export * from './types/BottomSheet';
+export * from './types/Filter';

package/src/molecules/bottom-sheet/types/BottomSheet.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+
+export type SnapPoint = string | number;
+export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full' | 'custom';
+export type KeyboardBehavior = 'interactive' | 'extend' | 'fillParent';
+
+export interface BottomSheetConfig {
+    snapPoints: SnapPoint[];
+    initialIndex?: number;
+    enableBackdrop?: boolean;
+    backdropAppearsOnIndex?: number;
+    backdropDisappearsOnIndex?: number;
+    keyboardBehavior?: KeyboardBehavior;
+    enableHandleIndicator?: boolean;
+    enablePanDownToClose?: boolean;
+    enableDynamicSizing?: boolean;
+}
+
+export interface BottomSheetRef {
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+    close: () => void;
+}
+
+export interface BottomSheetModalRef {
+    present: () => void;
+    dismiss: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+export interface BottomSheetProps {
+    children: React.ReactNode;
+    preset?: BottomSheetPreset;
+    snapPoints?: SnapPoint[];
+    initialIndex?: number;
+    enableBackdrop?: boolean;
+    backdropAppearsOnIndex?: number;
+    backdropDisappearsOnIndex?: number;
+    keyboardBehavior?: KeyboardBehavior;
+    enableHandleIndicator?: boolean;
+    enablePanDownToClose?: boolean;
+    enableDynamicSizing?: boolean;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+}
+
+export interface BottomSheetModalProps extends Omit<BottomSheetProps, 'onClose'> {
+    onDismiss?: () => void;
+    backgroundColor?: string;
+}
+
+export interface UseBottomSheetReturn {
+    sheetRef: React.RefObject<BottomSheetRef | null>;
+    open: () => void;
+    close: () => void;
+    expand: () => void;
+    collapse: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+}
+
+export interface UseBottomSheetModalReturn {
+    modalRef: React.RefObject<BottomSheetModalRef | null>;
+    present: () => void;
+    dismiss: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+
+export const BottomSheetUtils = {
+    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,
+                };
+        }
+    },
+
+    createConfig: (config: Partial<BottomSheetConfig>): BottomSheetConfig => {
+        return {
+            snapPoints: ['50%'],
+            enableBackdrop: true,
+            enablePanDownToClose: true,
+            ...config,
+        };
+    },
+};

package/src/molecules/bottom-sheet/types/Filter.ts

@@ -0,0 +1,48 @@
+/**
+ * Domain - Filter Entities
+ */
+
+export interface FilterOption {
+    id: string;
+    label: string;
+    icon?: string;
+    type?: string;
+    count?: number;
+}
+
+export interface FilterCategory {
+    id: string;
+    title: string;
+    options: FilterOption[];
+    multiSelect?: boolean;
+}
+
+export class FilterUtils {
+    static hasActiveFilter(selectedIds: string[], defaultId: string = "all"): boolean {
+        if (selectedIds.length === 0) return false;
+        if (selectedIds.length === 1 && selectedIds[0] === defaultId) return false;
+        return true;
+    }
+
+    static toggleFilter(
+        selectedIds: string[],
+        filterId: string,
+        multiSelect: boolean = false,
+        defaultId: string = "all"
+    ): string[] {
+        if (filterId === defaultId) {
+            return [defaultId];
+        }
+
+        if (multiSelect) {
+            const newIds = selectedIds.filter((id) => id !== defaultId);
+            if (newIds.includes(filterId)) {
+                const filtered = newIds.filter((id) => id !== filterId);
+                return filtered.length === 0 ? [defaultId] : filtered;
+            }
+            return [...newIds, filterId];
+        }
+
+        return [filterId];
+    }
+}

package/src/molecules/index.ts

@@ -5,11 +5,11 @@
 
 // Component exports
 export * from './avatar';
+export * from './bottom-sheet';
 export { FormField, type FormFieldProps } from './FormField';
 export { ListItem, type ListItemProps } from './ListItem';
 export { SearchBar, type SearchBarProps } from './SearchBar';
 export { IconContainer } from './IconContainer';
-export { ScreenHeader, type ScreenHeaderProps } from './ScreenHeader';
 export { BaseModal, type BaseModalProps } from './BaseModal';
 export { ConfirmationModal } from './ConfirmationModalMain';
 export { useConfirmationModal } from './confirmation-modal/useConfirmationModal';
@@ -25,9 +25,7 @@ export * from './Divider';
 export * from "./StepProgress";
 
 // Responsive Components
-export { Grid, type GridProps } from './Grid';
 export { List, type ListProps } from './List';
-export { Container, type ContainerProps } from './Container';
 
 // Alerts
 export * from './alerts';

package/src/organisms/index.ts

@@ -11,25 +11,13 @@
  */
 
 // Component exports
-export { AppHeader } from './AppHeader';
-export { ScreenLayout } from './ScreenLayout';
 export { FormContainer } from './FormContainer';
-export { FormLayout } from './FormLayout';
 
 // Type exports
-export type { AppHeaderProps } from './AppHeader';
-export type { ScreenLayoutProps } from './ScreenLayout';
 export type { FormContainerProps } from './FormContainer';
-export type { FormLayoutProps } from './FormLayout';
 
 // Union type for all organism props (used for type narrowing)
-import type { AppHeaderProps } from './AppHeader';
-import type { ScreenLayoutProps } from './ScreenLayout';
 import type { FormContainerProps } from './FormContainer';
-import type { FormLayoutProps } from './FormLayout';
 
 export type OrganismComponentProps =
-  | { type: 'AppHeader'; props: AppHeaderProps }
-  | { type: 'ScreenLayout'; props: ScreenLayoutProps }
-  | { type: 'FormContainer'; props: FormContainerProps }
-  | { type: 'FormLayout'; props: FormLayoutProps };
+  | { type: 'FormContainer'; props: FormContainerProps };