related-ui-components 1.6.8 → 1.7.0

package/src/components/Filters/Filters.tsx

@@ -148,26 +148,14 @@ const Filters: React.FC<FiltersProps> = ({
   visible = true,
 }) => {
   const { theme, isRTL: themeIsRTL } = useTheme();
-  const isRTL = isRTLProp ?? themeIsRTL ?? I18nManager.isRTL; 
+  const isRTL = isRTLProp ?? themeIsRTL ?? I18nManager.isRTL;
   const bottomSheetRef = useRef<BottomSheet>(null);
   const styles = createStyles(theme, isRTL);
   const checkboxColor = checkboxColorProp ?? theme.primary;
-  const [isVisible, setIsVisible] = useState(visible);
-
-  useEffect(() => {
-    if (visible) {
-      setIsVisible(true);
-      setTimeout(() => bottomSheetRef.current?.snapToIndex(bottomSheetIndex), 0);
-    } else {
-      bottomSheetRef.current?.close();
-      setIsVisible(false); 
-    }
-  }, [visible, bottomSheetIndex]);
 
   const handleSheetChanges = useCallback(
     (index: number) => {
       if (index === -1) {
-        setIsVisible(false);
         if (onClose) {
           onClose();
         }
@@ -182,20 +170,16 @@ const Filters: React.FC<FiltersProps> = ({
     sortOptions.find((option) => option.checked)?.id || null
   );
 
-  const [selectedBrands, setSelectedBrands] = useState<
-    Record<string, boolean>
-  >(
+  const [selectedBrands, setSelectedBrands] = useState<Record<string, boolean>>(
     brands.reduce((acc, option) => {
       acc[option.id] = option.checked || false;
       return acc;
     }, {} as Record<string, boolean>)
   );
-  const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>(
-    {
-      min: rangeInitialMin,
-      max: rangeInitialMax,
-    }
-  );
+  const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>({
+    min: rangeInitialMin,
+    max: rangeInitialMax,
+  });
 
   const handleCheckboxChange = (id: number) => {
     setCheckedItem(id);
@@ -208,9 +192,14 @@ const Filters: React.FC<FiltersProps> = ({
     }));
   };
 
-  const closeBottomSheet = useCallback(() => {
-    bottomSheetRef.current?.close();
-  }, [/* onClose */]);
+  const closeBottomSheet = useCallback(
+    () => {
+      bottomSheetRef.current?.close();
+    },
+    [
+      /* onClose */
+    ]
+  );
 
   const handleApplyFilter = () => {
     if (onActionButtonPress) {
@@ -249,7 +238,7 @@ const Filters: React.FC<FiltersProps> = ({
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
         {...props}
-        appearsOnIndex={0} 
+        appearsOnIndex={0}
         disappearsOnIndex={-1}
         pressBehavior="close"
         opacity={0.5}
@@ -258,160 +247,138 @@ const Filters: React.FC<FiltersProps> = ({
     []
   );
 
-  if (!visible) {
-    return null;
-  }
-
   return (
-    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
-      <BottomSheet
-        ref={bottomSheetRef}
-        index={isVisible ? bottomSheetIndex : -1} 
-        onChange={handleSheetChanges}
-        handleComponent={() => null}
-        style={bottomSheetStyle}
-        backgroundStyle={{ backgroundColor: theme.surface }}
-        handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
-        enablePanDownToClose={true}
-        backdropComponent={renderBackdrop}
-      >
-        <View style={[styles.container, containerStyle]}>
-          <View style={[styles.header, headerStyle]}>
-            <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
-            <TouchableOpacity onPress={handleResetAll}>
-              <Text style={[styles.resetText, resetTextStyle]}>
-                {headerResetText}
+    <BottomSheet
+      ref={bottomSheetRef}
+      index={visible ? bottomSheetIndex : -1}
+      onChange={handleSheetChanges}
+      handleComponent={() => null}
+      style={bottomSheetStyle}
+      backgroundStyle={{ backgroundColor: theme.surface }}
+      handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
+      enablePanDownToClose={true}
+      backdropComponent={renderBackdrop}
+    >
+      <View style={[styles.container, containerStyle]}>
+        <View style={[styles.header, headerStyle]}>
+          <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
+          <TouchableOpacity onPress={handleResetAll}>
+            <Text style={[styles.resetText, resetTextStyle]}>
+              {headerResetText}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <BottomSheetView style={{ paddingBottom: 75 }}>
+          {sortOptions && sortOptions.length > 0 && (
+            <View style={[styles.section, sectionStyle, sortSectionStyle]}>
+              <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                {sortSectionTitle}
               </Text>
-            </TouchableOpacity>
-          </View>
-          <BottomSheetView style={{ paddingBottom: 75 }}>
-            {sortOptions && sortOptions.length > 0 && (
-              <View style={[styles.section, sectionStyle, sortSectionStyle]}>
-                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                  {sortSectionTitle}
-                </Text>
-                {sortOptions.map((option) => (
-                  <View
-                    style={[styles.optionRow, optionRowStyle]}
-                    key={option.id}
-                  >
-                    <Checkbox
-                      value={option.id == checkedItem}
-                      color={checkboxColor}
-                      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
-                      onValueChange={() => handleCheckboxChange(option.id)}
-                    />
-                    <Text style={[styles.optionText, optionTextStyle]}>
-                      {option.name}
-                    </Text>
-                  </View>
-                ))}
-              </View>
-            )}
+              {sortOptions.map((option) => (
+                <View
+                  style={[styles.optionRow, optionRowStyle]}
+                  key={option.id}
+                >
+                  <Checkbox
+                    value={option.id == checkedItem}
+                    color={checkboxColor}
+                    hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+                    onValueChange={() => handleCheckboxChange(option.id)}
+                  />
+                  <Text style={[styles.optionText, optionTextStyle]}>
+                    {option.name}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          )}
 
-            {showPointsRange && (
-              <View style={[styles.section, sectionStyle]}>
-                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                  {pointsRangeSectionTitle}
-                </Text>
-                <PointsRangeSelector
-                  resetKey={resetCounter}
-                  initialMax={rangeInitialMax}
-                  initialMin={rangeInitialMin}
-                  minLimit={rangeMinLimit}
-                  maxLimit={rangeMaxLimit}
-                  isRTL={isRTL}
-                  containerStyle={pointsRangeContainerStyle}
-                  inputsContainerStyle={pointsRangeInputsContainerStyle}
-                  customInputContainerStyle={
-                    pointsRangeCustomInputContainerStyle
-                  }
-                  customInputFieldStyle={pointsRangeCustomInputFieldStyle}
-                  sliderContainerStyle={pointsRangeSliderContainerStyle}
-                  multiSliderContainerStyle={
-                    pointsRangeMultiSliderContainerStyle
-                  }
-                  trackStyle={pointsRangeTrackStyle}
-                  selectedTrackStyle={pointsRangeSelectedTrackStyle}
-                  unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
-                  markerStyle={pointsRangeMarkerStyle}
-                  markerEnabledStyle={pointsRangeMarkerEnabledStyle}
-                  markerDisabledStyle={pointsRangeMarkerDisabledStyle}
-                  markerDotStyle={pointsRangeMarkerDotStyle}
-                  inputProps={pointsRangeInputProps}
-                  multiSliderProps={pointsRangeMultiSliderProps}
-                  onChange={(min: number, max: number) => {
-                    setPointsRange({ min, max });
-                  }}
-                />
-              </View>
-            )}
+          {showPointsRange && (
+            <View style={[styles.section, sectionStyle]}>
+              <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                {pointsRangeSectionTitle}
+              </Text>
+              <PointsRangeSelector
+                resetKey={resetCounter}
+                initialMax={rangeInitialMax}
+                initialMin={rangeInitialMin}
+                minLimit={rangeMinLimit}
+                maxLimit={rangeMaxLimit}
+                isRTL={isRTL}
+                containerStyle={pointsRangeContainerStyle}
+                inputsContainerStyle={pointsRangeInputsContainerStyle}
+                customInputContainerStyle={pointsRangeCustomInputContainerStyle}
+                customInputFieldStyle={pointsRangeCustomInputFieldStyle}
+                sliderContainerStyle={pointsRangeSliderContainerStyle}
+                multiSliderContainerStyle={pointsRangeMultiSliderContainerStyle}
+                trackStyle={pointsRangeTrackStyle}
+                selectedTrackStyle={pointsRangeSelectedTrackStyle}
+                unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
+                markerStyle={pointsRangeMarkerStyle}
+                markerEnabledStyle={pointsRangeMarkerEnabledStyle}
+                markerDisabledStyle={pointsRangeMarkerDisabledStyle}
+                markerDotStyle={pointsRangeMarkerDotStyle}
+                inputProps={pointsRangeInputProps}
+                multiSliderProps={pointsRangeMultiSliderProps}
+                onChange={(min: number, max: number) => {
+                  setPointsRange({ min, max });
+                }}
+              />
+            </View>
+          )}
 
-            {brands && brands.length > 0 && (
-              <View style={[styles.section, sectionStyle]}>
-                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                  {brandSectionTile}
-                </Text>
-                <View style={[styles.brandsGrid, brandContainerStyle]}>
-                  {brands.map((brand) => (
-                    <BrandIcon
-                      key={brand.id}
-                      size={50}
-                      selected={selectedBrands[brand.id]}
-                      onPress={() => handleBrandSelect(brand.id.toString())}
-                      brand={{
-                        id: brand.id,
-                        name: brand.name,
-                        logo: brand.logo,
-                      }}
-                      selectionIndicatorIcon={
-                        brandActiveIcon || (
-                          <Ionicons
-                            name="checkmark-outline"
-                            color={theme.onPrimary}
-                          />
-                        )
-                      }
-                      selectionIndicatorStyle={brandActiveIconStyle}
-                    />
-                  ))}
-                </View>
+          {brands && brands.length > 0 && (
+            <View style={[styles.section, sectionStyle]}>
+              <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                {brandSectionTile}
+              </Text>
+              <View style={[styles.brandsGrid, brandContainerStyle]}>
+                {brands.map((brand) => (
+                  <BrandIcon
+                    key={brand.id}
+                    size={50}
+                    selected={selectedBrands[brand.id]}
+                    onPress={() => handleBrandSelect(brand.id.toString())}
+                    brand={{
+                      id: brand.id,
+                      name: brand.name,
+                      logo: brand.logo,
+                    }}
+                    selectionIndicatorIcon={
+                      brandActiveIcon || (
+                        <Ionicons
+                          name="checkmark-outline"
+                          color={theme.onPrimary}
+                        />
+                      )
+                    }
+                    selectionIndicatorStyle={brandActiveIconStyle}
+                  />
+                ))}
               </View>
-            )}
+            </View>
+          )}
 
-            <TouchableOpacity
-              style={[styles.applyButton, applyButtonStyle]}
-              onPress={handleApplyFilter}
-            >
-              <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
-                {applyButtonText}
-              </Text>
-            </TouchableOpacity>
-          </BottomSheetView>
-        </View>
-      </BottomSheet>
-    </GestureHandlerRootView>
+          <TouchableOpacity
+            style={[styles.applyButton, applyButtonStyle]}
+            onPress={handleApplyFilter}
+          >
+            <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
+              {applyButtonText}
+            </Text>
+          </TouchableOpacity>
+        </BottomSheetView>
+      </View>
+    </BottomSheet>
   );
 };
 
 const createStyles = (theme: ThemeType, isRTL: boolean) =>
   StyleSheet.create({
-    // overlayContainer is likely not needed anymore
-    // overlay: { ... }, // Removed - handled by backdropComponent
-    gestureHandlerRoot: {
-      // Style needed for GestureHandlerRootView if it needs specific layout,
-      // often just flex: 1 or position absolute covering the screen
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 1000, // Ensure it's above other content
-    },
     container: {
       flex: 1,
       paddingHorizontal: 25,
-      backgroundColor: theme.surface, // Background is set on BottomSheet backgroundStyle now
+      backgroundColor: theme.surface,
     },
     handleIndicator: {
       width: 40,

package/src/components/TravelBooking/FlightForm.tsx

@@ -445,7 +445,7 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     },
     suggestionAirportText: {
       fontSize: 14,
-      color: theme.onSurfaceVariant, 
+      color: theme.onSurface, 
     },
   });
 

package/src/components/TravelBooking/FlightSummary.tsx

@@ -380,7 +380,7 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     },
     passengerDescription: {
       fontSize: 12,
-      color: theme.secondaryText || theme.onSurface,
+      color: theme.text || theme.onSurface,
       opacity: 0.8,
     },
   });

package/src/components/TravelBooking/HotelSummary.tsx

@@ -323,7 +323,7 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
     },
     guestDescription: {
       fontSize: 12,
-      color: theme.secondaryText || theme.onSurface,
+      color: theme.onSurface,
       opacity: 0.8,
     },
     addRoomButton: {

package/src/components/TravelBooking/SummaryBar.tsx

@@ -163,7 +163,7 @@ const SummaryBar: React.FC<SummaryBarProps> = ({
         <Ionicons
           name={isExpanded ? "chevron-up" : "chevron-down"}
           size={22}
-          color={theme.secondaryText || theme.border}
+          color={ theme.border}
           style={iconStyle}
         />
       </TouchableOpacity>
@@ -210,7 +210,7 @@ const themedStyles = (theme: ThemeType) =>
       paddingHorizontal: 16,
     },
     summaryText: {
-      color: theme.onSurfaceVariant || theme.onSurface,
+      color: theme.onSurface,
       fontSize: 15,
       fontWeight: "500",
       flex: 1,

package/src/theme/Colors.ts

@@ -3,8 +3,11 @@ export interface ThemeType {
   // Core
   background: string; // Main screen background
   surface: string; // Background for components like cards, dialogs, sheets
+  surfaceVariant: string;
   primary: string; // Main accent color for interactive elements
+  primaryVariant: string
   secondary: string; // Secondary accent color or for elements on primary
+  secondaryVariant: string
   error: string; // Error states, destructive actions
   success: string; // Success states
   warning: string; // Warning states
@@ -31,9 +34,15 @@ export interface ThemeType {
   labelText: string; // Color of labels for inputs
   placeholderText: string; // Color of placeholder text in inputs
   helper: string; // Helper text below inputs
-
-  // Allow for additional keys if needed later
-  [key: string]: string;
+  
+  spacing: {
+    xs: number;
+    s: number; 
+    m: number;
+    l: number; 
+    xl: number;
+    xxl: number; 
+  }
 }
 
 // Updated Light Theme - True black and white oriented, less muted
@@ -41,8 +50,11 @@ export const lightTheme: ThemeType = {
   // Core
   background: "#F8F8F8", // Very light pure gray
   surface: "#FFFFFF", // Pure white for cards/dialogs
+  surfaceVariant: "#FFFFFF", // Pure white for cards/dialogs
   primary: "#333333", // Pure dark gray, almost black
+  primaryVariant: "#333333", // Pure dark gray, almost black
   secondary: "#777777", // Medium gray without color tint
+  secondaryVariant: "#777777", // Medium gray without color tint
   error: "#E53935", // Vibrant but pure red
   success: "#43A047", // Vibrant but pure green
   warning: "#F57C00", // Vibrant but pure orange
@@ -69,6 +81,15 @@ export const lightTheme: ThemeType = {
   labelText: "#444444", // Dark gray for labels
   placeholderText: "#999999", // Medium gray for placeholders
   helper: "#777777", // Medium gray for helper text
+
+  spacing: {
+    xs: 4,
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 64,
+  },
 };
 
 // Updated Dark Theme - True black and white oriented, less muted
@@ -76,8 +97,11 @@ export const darkTheme: ThemeType = {
   // Core
   background: "#121212", // Very dark gray, nearly black
   surface: "#1E1E1E", // Dark gray for surface elements
+  surfaceVariant: "#1E1E1E", // Dark gray for surface elements
   primary: "#E0E0E0", // Light gray without tint
+  primaryVariant: "#E0E0E0",
   secondary: "#757575", // Medium gray without tint
+  secondaryVariant: "#757575",
   error: "#F44336", // Vibrant but pure red
   success: "#4CAF50", // Vibrant but pure green
   warning: "#FF9800", // Vibrant but pure orange
@@ -104,4 +128,13 @@ export const darkTheme: ThemeType = {
   labelText: "#E0E0E0", // Light gray for labels
   placeholderText: "#9E9E9E", // Medium gray for placeholders
   helper: "#9E9E9E", // Medium gray for helper text
+  
+  spacing: {
+    xs: 4,
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 32,
+    xxl: 64,
+  },
 };