related-ui-components 2.4.7 → 2.4.9

package/lib/module/utils/flags.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export function iso2ToFlagEmoji(countryCode) {
+  return countryCode.toUpperCase().split('').map(ch => String.fromCodePoint(ch.charCodeAt(0) + 127397)).join('');
+}
+//# sourceMappingURL=flags.js.map

package/lib/module/utils/flags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iso2ToFlagEmoji","countryCode","toUpperCase","split","map","ch","String","fromCodePoint","charCodeAt","join"],"sourceRoot":"..\\..\\..\\src","sources":["utils/flags.ts"],"mappings":";;AAAA,OAAO,SAASA,eAAeA,CAACC,WAAmB,EAAU;EAC3D,OAAOA,WAAW,CACfC,WAAW,CAAC,CAAC,CACbC,KAAK,CAAC,EAAE,CAAC,CACTC,GAAG,CAACC,EAAE,IAAIC,MAAM,CAACC,aAAa,CAACF,EAAE,CAACG,UAAU,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAC1DC,IAAI,CAAC,EAAE,CAAC;AACb","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqDxC,QAAA,MAAM,GAAG,yBA4ER,CAAC;AAUF,eAAe,GAAG,CAAC"}

package/lib/typescript/src/components/Input/PhoneInput.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TextInput, StyleProp, TextStyle } from "react-native";
+import { CustomInputProps } from "./Input";
+export type Country = {
+    code: string;
+    iso2: string;
+    name: string;
+};
+export interface PhoneInputProps extends Omit<CustomInputProps, "leftIcon" | "rightIcon" | "onRightIconPress" | "keyboardType" | "style" | "placeholderTextColor"> {
+    value: string;
+    onChangeText: (text: string) => void;
+    selectedCountry?: Country;
+    onSelectCountry?: (c: Country) => void;
+    countries?: Country[];
+    countryNameStyle?: StyleProp<TextStyle>;
+    countryCodeStyle?: StyleProp<TextStyle>;
+    listTitleStyle?: StyleProp<TextStyle>;
+    listTitle?: string;
+}
+declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<TextInput>>;
+export default PhoneInput;
+//# sourceMappingURL=PhoneInput.d.ts.map

package/lib/typescript/src/components/Input/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EACL,SAAS,EAOT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AASxD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,gBAAgB,EACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,OAAO,GACP,sBAAsB,CACzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAGtB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAQD,QAAA,MAAM,UAAU,mFAiHf,CAAC;AA2CF,eAAe,UAAU,CAAC"}

package/lib/typescript/src/components/Input/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Input } from "./Input";
 export * from "./Input";
+export { default as PhoneInput } from "./PhoneInput";
+export * from "./PhoneInput";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAC;AAC1C,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAC;AAC1C,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAC,MAAM,cAAc,CAAC;AACpD,cAAc,cAAc,CAAC"}

package/lib/typescript/src/contexts/BottomSheetStackContext.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+export interface BottomSheetStackItem {
+    component: ReactNode;
+    snapPoints?: string[] | number[];
+    initialSnapIndex?: number;
+}
+export interface BottomSheetStackContextType {
+    push: (item: BottomSheetStackItem) => void;
+    pop: () => void;
+    replace: (item: BottomSheetStackItem) => void;
+    clear: () => void;
+    canGoBack: boolean;
+}
+export declare const BottomSheetStackContext: React.Context<BottomSheetStackContextType | null>;
+export declare const useBottomSheetStack: () => BottomSheetStackContextType;
+//# sourceMappingURL=BottomSheetStackContext.d.ts.map

package/lib/typescript/src/contexts/BottomSheetStackContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetStackContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC3C,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC9C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,mDAC2B,CAAC;AAEhE,eAAO,MAAM,mBAAmB,mCAU/B,CAAC"}

package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts

@@ -0,0 +1,5 @@
+import React, { ReactNode } from "react";
+export declare const BottomSheetStackProvider: React.FC<{
+    children: ReactNode;
+}>;
+//# sourceMappingURL=BottomSheetStackProvider.d.ts.map

package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA0GtE,CAAC"}

package/lib/typescript/src/contexts/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./BottomSheetContext";
-export * from "./BottomSheetProvider";
+export * from "./BottomSheetStackContext";
+export * from "./BottomSheetStackProvider";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA"}

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

@@ -42,6 +42,7 @@ export interface ThemeType {
     };
     skeletonBackgroundColor?: string;
     skeletonItemColor?: string;
+    skeletonShimmer?: string;
 }
 export declare const lightTheme: ThemeType;
 export declare const darkTheme: ThemeType;

package/lib/typescript/src/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,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,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,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;IAED,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;KACrC,CAAC;IACF,uBAAuB,CAAC,EAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAGD,eAAO,MAAM,UAAU,EAAE,SAkDxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SAkDvB,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,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,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;IAED,SAAS,CAAC,EAAE;QACV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;KACrC,CAAC;IACF,uBAAuB,CAAC,EAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,eAAO,MAAM,UAAU,EAAE,SAmDxB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,SAmDvB,CAAC"}

package/lib/typescript/src/utils/flags.d.ts

@@ -0,0 +1,2 @@
+export declare function iso2ToFlagEmoji(countryCode: string): string;
+//# sourceMappingURL=flags.d.ts.map

package/lib/typescript/src/utils/flags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flags.d.ts","sourceRoot":"","sources":["../../../../src/utils/flags.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAM3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -16,6 +16,7 @@
     "@react-native-community/slider": "4.5.6",
     "@react-native-picker/picker": "2.11.0",
     "@shopify/react-native-skia": "v2.0.0-next.4",
+    "country-telephone-data": "^0.6.3",
     "date-fns": "^4.1.0",
     "expo": "~53.0.9",
     "expo-blur": "~14.1.4",
@@ -31,10 +32,12 @@
     "react-native-picker-select": "^9.3.1",
     "react-native-qrcode-svg": "^6.3.15",
     "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "^5.4.1",
     "react-native-svg": "15.11.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@types/country-telephone-data": "^0.6.3",
     "@types/react": "~19.0.10",
     "react-native-builder-bob": "^0.40.11",
     "typescript": "~5.8.3"

package/src/app.tsx

@@ -1,122 +1,140 @@
-// import React, { useState } from "react";
-// import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
-// import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
-// import { GestureHandlerRootView } from "react-native-gesture-handler";
-// import { CarRentalForm, DateRangePicker, FlightForm, FlightSummary, HotelForm, HotelSummary, Filters} from "./components";
-// import { lightTheme, RelatedProvider, useTheme } from "./theme";
-// import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
+import React, { useState } from "react";
+import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
+import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import {
+  CarRentalForm,
+  DateRangePicker,
+  FlightForm,
+  FlightSummary,
+  HotelForm,
+  HotelSummary,
+  Filters,
+} from "./components";
+import { lightTheme, RelatedProvider, useTheme } from "./theme";
+import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
+import PhoneInput from "./components/Input/PhoneInput";
+import { BottomSheetStackProvider } from "./contexts";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
-// // Sample data - replace with your actual image URLs
-// const DUMMY_DATA = [
-//   {
-//     id: "1",
-//     image:
-//       "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//     title: "Mountain Lake",
-//   },
-//   // {
-//   //   id: "2",
-//   //   image:
-//   //     "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//   //   title: "Sunset Cruise",
-//   // },
-//   {
-//     id: "3",
-//     image:
-//       "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//     title: "Ocean Horizon",
-//   },
-//   {
-//     id: "4",
-//     image:
-//       "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//     title: "Forest Trail",
-//   },
-//   // {
-//   //   id: "5",
-//   //   image:
-//   //     "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-//   //   title: "City Lights",
-//   // },
-// ];
+// Sample data - replace with your actual image URLs
+const DUMMY_DATA = [
+  {
+    id: "1",
+    image:
+      "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+    title: "Mountain Lake",
+  },
+  // {
+  //   id: "2",
+  //   image:
+  //     "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  //   title: "Sunset Cruise",
+  // },
+  {
+    id: "3",
+    image:
+      "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+    title: "Ocean Horizon",
+  },
+  {
+    id: "4",
+    image:
+      "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+    title: "Forest Trail",
+  },
+  // {
+  //   id: "5",
+  //   image:
+  //     "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+  //   title: "City Lights",
+  // },
+];
 
-// const App = () => {
-//   const { theme } = useTheme();
+const App = () => {
+  const { theme } = useTheme();
 
-//   const [departureDate, setDepartureDate] = useState<string | undefined>(undefined);
-//   const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
+  const [departureDate, setDepartureDate] = useState<string | undefined>(
+    undefined
+  );
+  const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
 
-//   const [progress, setProgress] = useState(25);
-// const handleAnimate = () => {
-//     // Set progress to a new random value between 0 and 100
-//     const newProgress = Math.floor(Math.random() * 101);
-//     setProgress(newProgress);
-//   };
-//   return (
-//     <>
-//       <RelatedProvider theme={lightTheme}>
-//         <GestureHandlerRootView style={{ flex: 1 }}>
-//           <StatusBar barStyle="light-content" />
-//           <SafeAreaView style={styles.appContainer}>
-//             <CircularProgressBar
-//               progress={5}
-//               lineCap="round"
-//               textFont={""}
-//             />
-//             {/* <DateRangePicker
-//               onDatesChange={(t) => {
-//                 setDepartureDate(t.departure);
-//                 setReturnDate(t.return);
-//               }}
-//               departureDate={departureDate}
-//               // departureDisplayValue={departureDate}
-//               returnDate={returnDate}
-//               // returnDisplayValue={returnDate}
-//             ></DateRangePicker> */}
-//             {/* <Filters
-//               bottomSheetBackgroundStyle={{
-//                 borderTopRightRadius: 30,
-//                 borderTopLeftRadius: 30,
-//                 padding: 10,
-//                 backgroundColor: "white",
-//               }}
-//               containerStyle={{
-//                 backgroundColor: "white",
-//                 borderTopRightRadius: 60,
-//                 borderTopLeftRadius: 60,
-//               }}
-//               resetTextStyle={{ color: theme.primary }}
-//               sectionTitleStyle={{ color: "black" }}
-//               titleStyle={{ color: "black" }}
-//               onActionButtonPress={(result) => {
-//                 // setFiltersResult(result);
-//               }}
-//               sortOptions={[{ id: 1, name: "test", value: "test" }]}
-//               // onClose={() => setDisplayFilters(false)}
-//               applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
-//               applyButtonTextStyle={{ color: theme.secondary }}
-//               headerStyle={{ borderBottomWidth: 0 }}
-//             ></Filters> */}
-//             {/* <FlightSummary></FlightSummary> */}
-//             {/* <FlightForm></FlightForm> */}
-//             {/* <HotelSummary></HotelSummary> */}
-//             {/* <HotelForm></HotelForm> */}
-//             {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
-//             {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
-//             <CarouselCardStack data={DUMMY_DATA} />
-//           </SafeAreaView>
-//         </GestureHandlerRootView>
-//       </RelatedProvider>
-//     </>
-//   );
-// };
+  const [progress, setProgress] = useState(25);
+  const handleAnimate = () => {
+    // Set progress to a new random value between 0 and 100
+    const newProgress = Math.floor(Math.random() * 101);
+    setProgress(newProgress);
+  };
+  return (
+    <>
+    <SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <RelatedProvider theme={lightTheme}>
+          <BottomSheetStackProvider>
+            <StatusBar barStyle="light-content" />
+            <SafeAreaView style={styles.appContainer}>
+              {/* <CircularProgressBar
+              progress={5}
+              lineCap="round"
+              textFont={""}
+            /> */}
+              {/* <DateRangePicker
+              onDatesChange={(t) => {
+                setDepartureDate(t.departure);
+                setReturnDate(t.return);
+              }}
+              departureDate={departureDate}
+              // departureDisplayValue={departureDate}
+              returnDate={returnDate}
+              // returnDisplayValue={returnDate}
+            ></DateRangePicker> */}
+              {/* <Filters
+              bottomSheetBackgroundStyle={{
+                borderTopRightRadius: 30,
+                borderTopLeftRadius: 30,
+                padding: 10,
+                backgroundColor: "white",
+              }}
+              containerStyle={{
+                backgroundColor: "white",
+                borderTopRightRadius: 60,
+                borderTopLeftRadius: 60,
+              }}
+              resetTextStyle={{ color: theme.primary }}
+              sectionTitleStyle={{ color: "black" }}
+              titleStyle={{ color: "black" }}
+              onActionButtonPress={(result) => {
+                // setFiltersResult(result);
+              }}
+              sortOptions={[{ id: 1, name: "test", value: "test" }]}
+              // onClose={() => setDisplayFilters(false)}
+              applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
+              applyButtonTextStyle={{ color: theme.secondary }}
+              headerStyle={{ borderBottomWidth: 0 }}
+            ></Filters> */}
+              {/* <FlightSummary></FlightSummary> */}
+              {/* <FlightForm></FlightForm> */}
+              {/* <HotelSummary></HotelSummary> */}
+              {/* <HotelForm></HotelForm> */}
+              {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
+              {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
+              {/* <CarouselCardStack data={DUMMY_DATA} /> */}
+              <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput>
+            </SafeAreaView>
+          </BottomSheetStackProvider>
+        </RelatedProvider>
+      </GestureHandlerRootView>
+      </SafeAreaProvider>
+    </>
+  );
+};
 
-// const styles = StyleSheet.create({
-//   appContainer: {
-//     flex: 1,
-//     backgroundColor: "#212121", // Match carousel background or choose another
-//     justifyContent: "center", // Center the carousel vertically if it's the main content
-//   },
-// });
+const styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+    backgroundColor: "#212121", // Match carousel background or choose another
+    justifyContent: "center", // Center the carousel vertically if it's the main content
+  },
+});
 
-// export default App;
+export default App;

package/src/components/Input/PhoneInput.tsx

@@ -0,0 +1,214 @@
+import React, { forwardRef, useState, useMemo, useCallback } from "react";
+import {
+  TextInput,
+  Text,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  FlatList,
+  TextInputProps,
+  StyleProp,
+  TextStyle,
+} from "react-native";
+import CustomInput, { CustomInputProps } from "./Input";
+import { useTheme } from "../../theme";
+import { Popup } from "../Popup";
+import { Ionicons } from "@expo/vector-icons";
+import { useBottomSheetStack } from "../../contexts";
+import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
+import { allCountries } from 'country-telephone-data';
+import { iso2ToFlagEmoji } from "../../utils/flags";
+
+export type Country = {
+  code: string; 
+  iso2: string;
+  name: string; 
+};
+
+export interface PhoneInputProps
+  extends Omit<
+    CustomInputProps,
+    | "leftIcon"
+    | "rightIcon"
+    | "onRightIconPress"
+    | "keyboardType"
+    | "style"
+    | "placeholderTextColor"
+  > {
+  value: string;
+  onChangeText: (text: string) => void;
+  selectedCountry?: Country;
+  onSelectCountry?: (c: Country) => void;
+  countries?: Country[];
+
+  //styles 
+  countryNameStyle?: StyleProp<TextStyle>;
+  countryCodeStyle?: StyleProp<TextStyle>;
+  listTitleStyle?: StyleProp<TextStyle>;
+
+  listTitle?: string
+}
+
+const DEFAULT_COUNTRIES: Country[] = allCountries.map(c => ({
+  code: `+${c.dialCode}`,
+  iso2: c.iso2,
+  name: c.name,
+}));
+
+const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
+  (
+    {
+      value,
+      onChangeText,
+      selectedCountry,
+      onSelectCountry,
+      countries = DEFAULT_COUNTRIES,
+      containerStyle,
+      inputContainerStyle,
+      inputStyle,
+      label,
+      labelStyle,
+      error,
+      errorStyle,
+      helper,
+      helperStyle,
+      listTitle = "Select Country",
+      listTitleStyle,
+      countryCodeStyle,
+      countryNameStyle,
+      ...rest
+    },
+    ref
+  ) => {
+    const { theme } = useTheme();
+    const { push } = useBottomSheetStack();
+
+    const sel = useMemo(
+      () =>
+        selectedCountry ||
+        countries.find((c) => c.code === "+1") ||
+        countries[0],
+      [selectedCountry, countries]
+    );
+
+    const handleCountryPress = useCallback(
+      (c: Country) => {
+        onSelectCountry && onSelectCountry(c);
+      },
+      [onSelectCountry]
+    );
+
+    const renderCountry = ({ item }: { item: Country }) => (
+      <TouchableOpacity
+        style={styles.countryRow}
+        onPress={() => handleCountryPress(item)}
+      >
+        <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
+        <View style={styles.countryText}>
+          <Text style={[styles.countryName, countryNameStyle]}>{item.name}</Text>
+          <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+
+    const leftIcon = (
+      <TouchableOpacity
+        style={[styles.selector, { backgroundColor: theme.inputBackground }]}
+        hitSlop={{left: 30, top: 30, right: 30, bottom: 30}}
+        onPress={() =>
+          push({
+            component: (
+              <View style={styles.popup}>
+                <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
+                  {listTitle}
+                </Text>
+                <BottomSheetFlatList
+                  data={countries}
+                  keyExtractor={(c, i) => i.toString()}
+                  renderItem={renderCountry}
+                  contentContainerStyle={{ paddingBottom: 16 }}
+                />
+              </View>
+            ),
+            snapPoints: ["100%"]
+          })
+        }
+        activeOpacity={0.8}
+      >
+        <Text style={[styles.flag, { color: theme.inputText }]}>
+          {iso2ToFlagEmoji(sel.iso2)}
+        </Text>
+        <Text style={[styles.code, { color: theme.inputText }]}>
+          {sel.code}
+        </Text>
+        <Ionicons name="chevron-down" size={16} style={{marginHorizontal: 4}}></Ionicons>
+      </TouchableOpacity>
+    );
+
+    return (
+      <>
+        <CustomInput
+          ref={ref}
+          label={label}
+          value={value}
+          onChangeText={onChangeText}
+          keyboardType="phone-pad"
+          placeholder="123 456 7890"
+          leftIcon={leftIcon}
+          containerStyle={containerStyle}
+          inputContainerStyle={inputContainerStyle}
+          inputStyle={inputStyle}
+          labelStyle={labelStyle}
+          error={error}
+          errorStyle={errorStyle}
+          helper={helper}
+          helperStyle={helperStyle}
+          {...rest}
+        />
+      </>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  selector: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRightWidth: 1,
+    borderRightColor: "grey"
+  },
+  flag: {
+    fontSize: 18,
+  },
+  code: {
+    fontSize: 14,
+    marginLeft: 4,
+  },
+  popup: {
+    // maxHeight: 400,
+    width: "100%",
+    padding: 16,
+  },
+  popupTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  countryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 10,
+  },
+  countryText: {
+    marginLeft: 12,
+  },
+  countryName: {
+    fontSize: 16,
+  },
+  countryCode: {
+    fontSize: 14,
+    color: "#666",
+  },
+});
+
+export default PhoneInput;

package/src/components/Input/index.ts

@@ -1,2 +1,5 @@
 export { default as Input} from "./Input";
-export * from "./Input";
+export * from "./Input";
+
+export { default as PhoneInput} from "./PhoneInput";
+export * from "./PhoneInput";