related-ui-components 1.6.9 → 1.7.1

package/lib/typescript/commonjs/theme/Colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAGf,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAGD,eAAO,MAAM,UAAU,EAAE,SAgCxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SAgCvB,CAAC"}
+{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,EAAE,MAAM,CAAC;KACb,CAAA;CACF;AAGD,eAAO,MAAM,UAAU,EAAE,SA4CxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SA4CvB,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare const MyScreen: () => React.JSX.Element;
 export default MyScreen;
 //# sourceMappingURL=app.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,QAAA,MAAM,QAAQ,yBAsBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,QAAA,MAAM,QAAQ,yBA4Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/module/components/Popup/Popup.d.ts

@@ -1,6 +1,7 @@
 import { FC, ReactNode } from "react";
 import { ImageSourcePropType, TextStyle, ViewStyle, ImageStyle } from "react-native";
-interface PopupProps {
+import { ModalProps } from "react-native-modal";
+interface PopupProps extends Partial<Pick<ModalProps, "animationIn" | "animationOut" | "animationInTiming" | "animationOutTiming" | "backdropTransitionInTiming" | "backdropTransitionOutTiming" | "onBackdropPress">> {
     visible: boolean;
     onClose: () => void;
     backgroundImage?: ImageSourcePropType;

package/lib/typescript/module/components/Popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAOL,mBAAmB,EAMnB,SAAS,EACT,SAAS,EACT,UAAU,EACX,MAAM,cAAc,CAAC;AAGtB,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACzC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAyMzB,CAAC;AAmIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAML,mBAAmB,EAMnB,SAAS,EACT,SAAS,EACT,UAAU,EACX,MAAM,cAAc,CAAC;AAEtB,OAAc,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEvD,UAAU,UACR,SAAQ,OAAO,CAAC,IAAI,CAClB,UAAU,EACR,aAAa,GACb,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,4BAA4B,GAC5B,6BAA6B,GAC7B,iBAAiB,CACpB,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACzC,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,wBAAwB,CAAC,EAAE,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA8MzB,CAAC;AAmIF,eAAe,KAAK,CAAC"}

package/lib/typescript/module/theme/Colors.d.ts

@@ -1,8 +1,11 @@
 export interface ThemeType {
     background: string;
     surface: string;
+    surfaceVariant: string;
     primary: string;
+    primaryVariant: string;
     secondary: string;
+    secondaryVariant: string;
     error: string;
     success: string;
     warning: string;
@@ -21,7 +24,14 @@ export interface ThemeType {
     labelText: string;
     placeholderText: string;
     helper: string;
-    [key: string]: string;
+    spacing: {
+        xs: number;
+        s: number;
+        m: number;
+        l: number;
+        xl: number;
+        xxl: number;
+    };
 }
 export declare const lightTheme: ThemeType;
 export declare const darkTheme: ThemeType;

package/lib/typescript/module/theme/Colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAGf,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAGD,eAAO,MAAM,UAAU,EAAE,SAgCxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SAgCvB,CAAC"}
+{"version":3,"file":"Colors.d.ts","sourceRoot":"","sources":["../../../../src/theme/Colors.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,SAAS;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAA;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,EAAE,EAAE,MAAM,CAAC;QACX,GAAG,EAAE,MAAM,CAAC;KACb,CAAA;CACF;AAGD,eAAO,MAAM,UAAU,EAAE,SA4CxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SA4CvB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
@@ -24,6 +24,7 @@
     "@gorhom/bottom-sheet": "^5.1.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/slider": "4.5.5",
+    "@react-native-picker/picker": "2.9.0",
     "@react-navigation/native": "^7.0.14",
     "@shopify/react-native-skia": "1.5.0",
     "date-fns": "^4.1.0",
@@ -40,13 +41,13 @@
     "react-native": "0.76.9",
     "react-native-calendars": "^1.1310.0",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-modal": "^14.0.0-rc.1",
     "react-native-reanimated": "^3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5",
-    "@react-native-picker/picker": "2.9.0"
+    "react-native-webview": "13.12.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/src/app.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { View, Button } from 'react-native';
-import { FilterResult, Filters } from './components';
-import BRANDS from './constants/BRANDS';
+import React, { useState } from "react";
+import { View, Button } from "react-native";
+import { FilterResult, Filters, Popup } from "./components";
+import BRANDS from "./constants/BRANDS";
 
 const MyScreen = () => {
   const [isFilterVisible, setIsFilterVisible] = useState(false);
@@ -12,18 +12,24 @@ const MyScreen = () => {
   };
 
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Button title="Show Filters" onPress={() => setIsFilterVisible(true)} />
-
-      <Filters
+    <>
+      <Popup
         visible={isFilterVisible}
-        onClose={() => setIsFilterVisible(false)} // Pass the function to close the modal
-        onActionButtonPress={handleApplyFilters}
-        // ... other filter props (sortOptions, brands, etc.)
-        sortOptions={[/* your sort options */]}
-        brands={BRANDS}
+        onClose={() => setIsFilterVisible(false)}
+        showCloseIcon={true}
+        title="ترقية إلى النسخة المميزة"
+        subtitle="استمتع بمزايا حصرية"
+        content="احصل على جميع الميزات المتقدمة والمحتوى الحصري بدون إعلانات. اشترك الآن واستمتع بتجربة كاملة مع تحديثات مجانية لمدة عام كامل."
+        primaryButtonText="ترقية الآن"
+        secondaryButtonText="ليس الآن"
+        // onPrimaryButtonPress={handleUpgrade}
+        // onSecondaryButtonPress={handleDismiss}
+        isRTL={true}
       />
-    </View>
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Button title="Show Filters" onPress={() => setIsFilterVisible(true)} />
+      </View>
+    </>
   );
 };
 

package/src/components/Popup/Popup.tsx

@@ -1,7 +1,6 @@
 import { useTheme, ThemeType } from "../../theme";
 import React, { FC, ReactNode } from "react";
 import {
-  Modal,
   View,
   Text,
   TouchableOpacity,
@@ -18,8 +17,19 @@ import {
   ImageStyle,
 } from "react-native";
 import CloseIcon from "../CloseIcon/CloseIcon";
+import Modal, { ModalProps } from "react-native-modal";
 
-interface PopupProps {
+interface PopupProps
+  extends Partial<Pick<
+    ModalProps,
+    | "animationIn"
+    | "animationOut"
+    | "animationInTiming"
+    | "animationOutTiming"
+    | "backdropTransitionInTiming"
+    | "backdropTransitionOutTiming"
+    | "onBackdropPress"
+  >> {
   visible: boolean;
   onClose: () => void;
   backgroundImage?: ImageSourcePropType;
@@ -91,6 +101,13 @@ const Popup: FC<PopupProps> = ({
   modalStyle,
   overlay,
   customContent,
+  animationIn = "slideInUp",
+  animationInTiming,
+  animationOut = "slideOutDown",
+  animationOutTiming,
+  backdropTransitionInTiming,
+  backdropTransitionOutTiming,
+  onBackdropPress
 }) => {
   const { theme, isRTL: rtl } = useTheme();
   isRTL = rtl;
@@ -237,20 +254,18 @@ const Popup: FC<PopupProps> = ({
 
   return (
     <Modal
-      transparent
-      visible={visible}
-      animationType="fade"
-      onRequestClose={onClose}
+      isVisible={visible}
+      animationIn={animationIn}
+      animationOut={animationOut}
+      backdropTransitionInTiming={backdropTransitionInTiming}
+      backdropTransitionOutTiming={backdropTransitionOutTiming}
+      animationInTiming={animationInTiming}
+      animationOutTiming={animationOutTiming}
+      onBackdropPress={onBackdropPress}
       statusBarTranslucent
       style={modalStyle}
     >
       <View style={styles.modalOverlay}>
-        {closeOnBackdropPress && (
-          <TouchableWithoutFeedback onPress={onClose}>
-            <View style={StyleSheet.absoluteFill} />
-          </TouchableWithoutFeedback>
-        )}
-
         <TouchableWithoutFeedback>
           <PopupContent />
         </TouchableWithoutFeedback>
@@ -267,7 +282,7 @@ const createStyles = (theme: ThemeType) =>
   StyleSheet.create({
     modalOverlay: {
       flex: 1,
-      backgroundColor: "rgba(0, 0, 0, 0.5)", // Keep overlay color
+      // backgroundColor: "rgba(0, 0, 0, 0.5)", // Keep overlay color
       justifyContent: "center",
       alignItems: "center",
       paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,

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,
+  },
 };