related-ui-components 1.9.6 → 1.9.8

package/lib/commonjs/components/TravelBooking/TabSelector.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = require("@/theme");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Adjust import path
+
+// Optional: Enable LayoutAnimation on Android
+if (_reactNative.Platform.OS === "android" && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+  _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const TabSelector = ({
+  tabs,
+  initialTab,
+  onTabChange,
+  containerStyle,
+  tabStyle,
+  activeTabStyle,
+  tabTextStyle,
+  activeTabTextStyle,
+  separatorStyle,
+  animated = false
+}) => {
+  const {
+    theme,
+    isRTL
+  } = (0, _theme.useTheme)();
+  const styles = (0, _react.useMemo)(() => themedStyles(theme, isRTL), [theme, isRTL]);
+  const defaultTab = (0, _react.useMemo)(() => initialTab ?? (tabs && tabs.length > 0 ? tabs[0] : ""), [initialTab, tabs]);
+  const [activeTab, setActiveTab] = (0, _react.useState)(defaultTab);
+  const handleTabPress = (0, _react.useCallback)(tab => {
+    if (tab !== activeTab) {
+      if (animated) {
+        _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
+      }
+      setActiveTab(tab);
+      onTabChange?.(tab);
+    }
+  }, [activeTab, onTabChange, animated]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    children: tabs.map((tab, index) => {
+      const isSelected = tab === activeTab;
+      const isLastTab = index === tabs.length - 1;
+
+      // const nextTabIsSelected = !isLastTab && tabs[index + 1] === activeTab;
+
+      // const showSeparator = !isLastTab && !isSelected && !nextTabIsSelected;
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.tab, tabStyle, isSelected && styles.activeTab, isSelected && activeTabStyle],
+          onPress: () => handleTabPress(tab),
+          activeOpacity: 0.8,
+          accessibilityRole: "tab",
+          accessibilityState: {
+            selected: isSelected
+          },
+          accessibilityLabel: tab,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.tabText, tabTextStyle, isSelected && styles.activeTabText, isSelected && activeTabTextStyle],
+            children: tab
+          })
+        })
+      }, tab);
+    })
+  });
+};
+const themedStyles = (theme, isRTL) => _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: isRTL ? "row-reverse" : "row",
+    alignItems: "flex-end",
+    backgroundColor: theme.surface
+  },
+  tab: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    justifyContent: "center",
+    alignItems: "center"
+    //   borderRightWidth: 1,
+    //   borderRightColor:"red"
+    //   borderBottomWidth: 1,
+    //   borderBottomColor: theme.border,
+  },
+  activeTab: {
+    backgroundColor: theme.primary,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomWidth: 0
+  },
+  tabText: {
+    color: theme.onSurface,
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  activeTabText: {
+    color: theme.onPrimary,
+    fontWeight: "bold"
+  },
+  separator: {
+    width: 1,
+    height: "60%",
+    alignSelf: "center",
+    backgroundColor: "red"
+  }
+});
+var _default = exports.default = TabSelector;
+//# sourceMappingURL=TabSelector.js.map

package/lib/commonjs/components/TravelBooking/TabSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_theme","require","_react","_interopRequireWildcard","_reactNative","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental","TabSelector","tabs","initialTab","onTabChange","containerStyle","tabStyle","activeTabStyle","tabTextStyle","activeTabTextStyle","separatorStyle","animated","theme","isRTL","useTheme","styles","useMemo","themedStyles","defaultTab","length","activeTab","setActiveTab","useState","handleTabPress","useCallback","tab","LayoutAnimation","configureNext","Presets","easeInEaseOut","jsx","View","style","container","children","map","index","isSelected","isLastTab","Fragment","TouchableOpacity","onPress","activeOpacity","accessibilityRole","accessibilityState","selected","accessibilityLabel","Text","tabText","activeTabText","StyleSheet","create","flexDirection","alignItems","backgroundColor","surface","paddingVertical","paddingHorizontal","justifyContent","primary","borderTopLeftRadius","borderTopRightRadius","borderBottomWidth","color","onSurface","fontSize","fontWeight","onPrimary","separator","width","height","alignSelf","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/TravelBooking/TabSelector.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/TravelBooking/TravelBooking.js

@@ -0,0 +1,261 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _TabSelector = _interopRequireDefault(require("./TabSelector.js"));
+var _FlightForm = _interopRequireDefault(require("./FlightForm.js"));
+var _HotelForm = _interopRequireDefault(require("./HotelForm.js"));
+var _CarRentalForm = _interopRequireWildcard(require("./CarRentalForm.js"));
+var _theme = require("@/theme");
+var _SummaryBar = _interopRequireDefault(require("./SummaryBar.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// src/components/TravelBooking.tsx (or wherever TravelBooking is)
+
+// Import style types
+// Adjust import path
+// Adjust import path
+// Adjust import path
+
+// Adjust import path
+// Adjust import path
+
+// Adjust import path
+
+// Adjust import path
+
+// Define the possible tab names (can be overridden via props)
+
+const DEFAULT_TABS = ["Flights", "Hotels", "Car Rentals"];
+
+// Mock Data (Keep accessible for potential defaults)
+const DEFAULT_MOCK_FLIGHT_SUGGESTIONS = [{
+  id: 1,
+  city: "London",
+  value: "London, United Kingdom",
+  airports: ["Heathrow Airport (LHR)", "Gatwick Airport (LGW)", "Stansted Airport (STN)"]
+}, {
+  id: 2,
+  city: "New York",
+  value: "New York, USA",
+  airports: ["John F. Kennedy Intl (JFK)", "LaGuardia Airport (LGA)", "Newark Liberty Intl (EWR)"]
+}];
+const DEFAULT_MOCK_HOTEL_SUGGESTIONS = [{
+  id: 1,
+  city: "Beirut",
+  country: "Lebanon",
+  value: "BEIRUT, LEBANON"
+}, {
+  id: 2,
+  city: "Dubai",
+  country: "United Arab Emirates",
+  value: "DUBAI, UNITED ARAB EMIRATES"
+}];
+const DEFAULT_MOCK_CAR_SUGGESTIONS = _CarRentalForm.mockCarSuggestions;
+
+// --- TravelBooking Props Interface ---
+
+// --- TravelBooking Component Implementation ---
+const TravelBooking = ({
+  tabs = DEFAULT_TABS,
+  initialTab,
+  onTabChange,
+  onSearch,
+  initialFlightSelection,
+  initialHotelSelection,
+  onSummarySelectionChange,
+  flightSuggestionData = DEFAULT_MOCK_FLIGHT_SUGGESTIONS,
+  // Provide defaults
+  hotelSuggestionData = DEFAULT_MOCK_HOTEL_SUGGESTIONS,
+  // Provide defaults
+  carSuggestionData = DEFAULT_MOCK_CAR_SUGGESTIONS,
+  // Provide defaults
+  tabSelectorProps,
+  summaryBarProps,
+  flightFormProps,
+  hotelFormProps,
+  carRentalFormProps,
+  onInputFocus,
+  onTextChange,
+  // Destructure common style props
+  formContainerStyle,
+  labelStyle,
+  inputStyle,
+  inputTouchableStyle,
+  inputTextStyle,
+  dateSearchRowStyle,
+  dateInputGroupStyle,
+  searchButtonStyle,
+  searchIconStyle,
+  calendarThemeOverrides,
+  calendarContainerStyle,
+  swapButtonContainerStyle,
+  swapButtonStyle,
+  swapIconStyle,
+  inputGroupContainerStyle // Added
+}) => {
+  const {
+    theme
+  } = (0, _theme.useTheme)();
+  const styles = (0, _react.useMemo)(() => themedStyles(theme), [theme]);
+  const actualInitialTab = (0, _react.useMemo)(() => initialTab ?? (tabs.length > 0 ? tabs[0] : ""), [initialTab, tabs]);
+  const [selectedTab, setSelectedTab] = (0, _react.useState)(actualInitialTab);
+  const [selectedOptions, setSelectedOptions] = (0, _react.useState)(actualInitialTab === tabs[0] && tabs[0] === "Flights" ? initialFlightSelection : actualInitialTab === tabs[1] && tabs[1] === "Hotels" ? initialHotelSelection : undefined);
+
+  // --- Handlers ---
+  const handleTabChange = (0, _react.useCallback)(tab => {
+    setSelectedTab(tab);
+    if (tab === "Flights") {
+      setSelectedOptions(initialFlightSelection);
+    } else if (tab === "Hotels") {
+      setSelectedOptions(initialHotelSelection);
+    } else {
+      setSelectedOptions(undefined);
+    }
+    onTabChange?.(tab);
+  }, [onTabChange, initialFlightSelection, initialHotelSelection]);
+  const handleInternalSummarySelectionChange = (0, _react.useCallback)(selection => {
+    setSelectedOptions(selection);
+    onSummarySelectionChange?.(selection);
+  }, [onSummarySelectionChange]);
+  const handleInternalSearch = (0, _react.useCallback)(details => {
+    console.log("Internal Search Triggered:", details);
+    onSearch?.(details);
+  }, [onSearch]);
+  const handleInternalTextChange = (0, _react.useCallback)(text => {
+    onTextChange?.(text);
+  }, [onTextChange] // Added dependency
+  );
+  const handleInternalInputFocus = (0, _react.useCallback)(input => {
+    console.log("Input Focused:", input);
+    onInputFocus?.(input);
+  }, [onInputFocus] // Added dependency
+  );
+
+  // Determine SummaryBar mode
+  const summaryBarMode = (0, _react.useMemo)(() => {
+    if (selectedTab === "Flights") return "flight";
+    if (selectedTab === "Hotels") return "hotel";
+    return undefined;
+  }, [selectedTab]);
+
+  // --- Render Content Logic ---
+  const renderContent = () => {
+    const commonFormProps = {
+      containerStyle: formContainerStyle,
+      labelStyle: labelStyle,
+      inputStyle: inputStyle,
+      inputTouchableStyle: inputTouchableStyle,
+      inputTextStyle: inputTextStyle,
+      dateInputGroupStyle: dateInputGroupStyle,
+      searchButtonStyle: searchButtonStyle,
+      searchIconStyle: searchIconStyle,
+      calendarThemeOverrides: calendarThemeOverrides,
+      calendarContainerStyle: calendarContainerStyle
+    };
+    switch (selectedTab) {
+      case "Flights":
+        {
+          let isOneWay = false;
+          if (selectedOptions && typeof selectedOptions === "object" && !Array.isArray(selectedOptions) && "flightType" in selectedOptions) {
+            isOneWay = selectedOptions.flightType === "One way";
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlightForm.default
+          // Pass common props first
+          , {
+            ...commonFormProps,
+            departureRowStyle: dateSearchRowStyle // Map specific row style
+            ,
+            swapButtonContainerStyle: swapButtonContainerStyle // Pass swap styles
+            ,
+            swapButtonStyle: swapButtonStyle,
+            swapIconStyle: swapIconStyle
+
+            // Pass specific FlightForm props (will override common ones if keys match)
+            ,
+            ...flightFormProps,
+            // Pass controlled props
+            isOneWay: isOneWay,
+            onSearchPress: handleInternalSearch,
+            onInputFocus: handleInternalInputFocus,
+            onTextChange: handleInternalTextChange,
+            suggestionData: flightSuggestionData
+          });
+        }
+      case "Hotels":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HotelForm.default
+        // Pass common props first
+        , {
+          ...commonFormProps,
+          checkoutRowStyle: dateSearchRowStyle // Map specific row style
+
+          // Pass specific HotelForm props (will override common ones if keys match)
+          ,
+          ...hotelFormProps,
+          // Pass controlled props
+          onSearchPress: handleInternalSearch,
+          onInputFocus: handleInternalInputFocus,
+          onTextChange: handleInternalTextChange,
+          suggestionData: hotelSuggestionData
+        });
+      case "Car Rentals":
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarRentalForm.default
+        // Pass common props first
+        , {
+          ...commonFormProps,
+          pickupRowStyle: dateSearchRowStyle // Map specific row style
+          ,
+          swapButtonContainerStyle: swapButtonContainerStyle // Pass swap styles
+          ,
+          swapButtonStyle: swapButtonStyle,
+          swapIconStyle: swapIconStyle,
+          inputGroupStyle: inputGroupContainerStyle // Map input group style
+
+          // Pass specific CarRentalForm props (will override common ones if keys match)
+          ,
+          ...carRentalFormProps,
+          // Pass controlled props
+          onSearchPress: handleInternalSearch,
+          onInputFocus: handleInternalInputFocus,
+          onTextChange: handleInternalTextChange,
+          suggestionData: carSuggestionData
+        });
+      default:
+        console.warn(`No content defined for tab: ${selectedTab}`);
+        return null;
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [summaryBarMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SummaryBar.default, {
+      ...summaryBarProps,
+      mode: summaryBarMode,
+      onSelectionChange: handleInternalSummarySelectionChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabSelector.default, {
+      ...tabSelectorProps,
+      tabs: tabs,
+      initialTab: selectedTab // Use state for controlled component
+      ,
+      onTabChange: handleTabChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.contentContainer,
+      children: renderContent()
+    })]
+  });
+};
+const themedStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    // Removed flex: 1 to allow content to determine height naturally
+  },
+  contentContainer: {
+    // Removed flex: 1
+  }
+});
+var _default = exports.default = TravelBooking;
+//# sourceMappingURL=TravelBooking.js.map

package/lib/commonjs/components/TravelBooking/TravelBooking.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_TabSelector","_interopRequireDefault","_FlightForm","_HotelForm","_CarRentalForm","_theme","_SummaryBar","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DEFAULT_TABS","DEFAULT_MOCK_FLIGHT_SUGGESTIONS","id","city","value","airports","DEFAULT_MOCK_HOTEL_SUGGESTIONS","country","DEFAULT_MOCK_CAR_SUGGESTIONS","mockCarSuggestions","TravelBooking","tabs","initialTab","onTabChange","onSearch","initialFlightSelection","initialHotelSelection","onSummarySelectionChange","flightSuggestionData","hotelSuggestionData","carSuggestionData","tabSelectorProps","summaryBarProps","flightFormProps","hotelFormProps","carRentalFormProps","onInputFocus","onTextChange","formContainerStyle","labelStyle","inputStyle","inputTouchableStyle","inputTextStyle","dateSearchRowStyle","dateInputGroupStyle","searchButtonStyle","searchIconStyle","calendarThemeOverrides","calendarContainerStyle","swapButtonContainerStyle","swapButtonStyle","swapIconStyle","inputGroupContainerStyle","theme","useTheme","styles","useMemo","themedStyles","actualInitialTab","length","selectedTab","setSelectedTab","useState","selectedOptions","setSelectedOptions","undefined","handleTabChange","useCallback","tab","handleInternalSummarySelectionChange","selection","handleInternalSearch","details","console","log","handleInternalTextChange","text","handleInternalInputFocus","input","summaryBarMode","renderContent","commonFormProps","containerStyle","isOneWay","Array","isArray","flightType","jsx","departureRowStyle","onSearchPress","suggestionData","checkoutRowStyle","pickupRowStyle","inputGroupStyle","warn","jsxs","View","style","container","children","mode","onSelectionChange","contentContainer","StyleSheet","create","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/TravelBooking/TravelBooking.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/TravelBooking/index.js

@@ -0,0 +1,22 @@
+
+// export { default, type TravelBookingProps } from "./TravelBooking";
+// export * from "./TravelBooking"
+
+// export { default as CarRentalForm, type CarRentalFormProps } from "./CarRentalForm";
+// export * from "./CarRentalForm"
+// export { default as FlightForm, type FlightFormProps } from "./FlightForm";
+// export * from "./FlightForm";
+// export { default as HotelForm, type HotelFormProps } from "./HotelForm";
+// export * from "./HotelForm";
+// export { default as SummaryBar, type SummaryBarProps, type SelectionCallbackDataType } from "./SummaryBar";
+// export * from "./SummaryBar";
+// export { default as TabSelector, type TabSelectorProps } from "./TabSelector";
+// export * from "./TabSelector"
+// export { default as FlightSummary, type FlightSummaryProps, type FlightSelection } from "./FlightSummary";
+// export * from "./FlightSummary"
+// export { default as HotelSummary, type HotelSummaryProps, type RoomState } from "./HotelSummary";
+// export * from "./HotelSummary"
+
+// export * from "./types";
+"use strict";
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/TravelBooking/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/TravelBooking/index.ts"],"mappings":";AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA","ignoreList":[]}

package/lib/commonjs/components/TravelBooking/types.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormInputType = void 0;
+let FormInputType = exports.FormInputType = /*#__PURE__*/function (FormInputType) {
+  FormInputType["FLIGHT_FROM"] = "flightFrom";
+  FormInputType["FLIGHT_TO"] = "flightTo";
+  FormInputType["HOTEL_DEST"] = "hotelDest";
+  FormInputType["CAR_PICKUP"] = "carPickup";
+  FormInputType["CAR_DROP_OFF"] = "carDropoff";
+  return FormInputType;
+}({});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/components/TravelBooking/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FormInputType","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/TravelBooking/types.ts"],"mappings":";;;;;;IAAYA,aAAa,GAAAC,OAAA,CAAAD,aAAA,0BAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA","ignoreList":[]}

package/lib/commonjs/components/UnlockRewards/README.md

@@ -0,0 +1,187 @@
+# UnlockRewards
+
+![UnlockRewards Example](../../assets/components/UnlockRewards-1.png)
+![UnlockRewards with RTL](../../assets/components/UnlockRewards-2.png)
+
+## UnlockRewards Documentation
+
+The `UnlockRewards` is a comprehensive component designed for displaying user rewards, achievements, or unlockable features. It provides a customizable interface with support for background images, icons, titles, descriptions, and status indicators for each reward. The component is fully RTL-compatible and offers different variants for close button positioning.
+
+### Usage
+
+```tsx
+import UnlockRewards from "@/components/UnlockRewards/UnlockRewards";
+import { useTheme } from "@/theme";
+import { Ionicons } from "@expo/vector-icons";
+
+const MyComponent = () => {
+  const theme = useTheme();
+  
+  const handleClose = () => {
+    // Handle close action
+  };
+
+  const rewardsData = [
+    {
+      icon: <Ionicons name="water-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="water" size={24} color={theme.primary} />,
+      title: "Aqua Guardian",
+      description:
+        "Maintain water usage below the community average for a month.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+    {
+      icon: <Ionicons name="build-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="build" size={24} color={theme.secondary} />,
+      title: "Leak Detective",
+      description: "Successfully report and fix a water leak on your property.",
+      isActive: true,
+      status: "1/1",
+      statusBackgroundColor: theme.primary,
+      statusTextColor: theme.secondary,
+    },
+    {
+      icon: <Ionicons name="leaf-outline" size={24} color={theme.helper} />,
+      activeIcon: <Ionicons name="leaf" size={24} color={theme.primary} />,
+      title: "Eco-Warrior",
+      description:
+        "Implement a rainwater harvesting system or greywater recycling.",
+      isActive: false,
+      status: "0/1",
+      statusBackgroundColor: theme.disabled,
+      statusTextColor: theme.text,
+    },
+  ];
+
+  return (
+    <UnlockRewards
+      title="Your Rewards"
+      description="Complete tasks to unlock special benefits"
+      rewards={rewardsData}
+      onClose={handleClose}
+      showCloseIcon={true}
+      closeIconVariant="nested"
+      topBackgroundHeight={200}
+      customCloseIcon={<Ionicons name="close-circle" size={28} color={theme.primary} />}
+    />
+  );
+};
+
+export default MyComponent
+```
+
+### RTL Example
+
+```tsx
+<UnlockRewards
+  title="المكافآت الخاصة بك"
+  description="أكمل المهام لفتح المزايا الخاصة"
+  rewards={rewardsDataArabic}
+  onClose={handleClose}
+  showCloseIcon={true}
+  isRTL={true}
+  topBackgroundColor="#f5f5f5"
+/>
+```
+
+### Props
+
+#### Core Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `rewards` | `Reward[]` | Required | Array of reward objects to display |
+| `title` | `string` | `undefined` | Main title text |
+| `description` | `string` | `undefined` | Description text displayed below title |
+| `onClose` | `() => void` | `undefined` | Function to call when close icon is pressed |
+| `isRTL` | `boolean` | `false` | Whether to render in right-to-left mode |
+
+#### Top Background Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `topBackgroundImage` | `ImageSourcePropType` | `undefined` | Background image for the top section |
+| `topBackgroundColor` | `string` | `theme.background` | Background color for the top section |
+| `topBackgroundHeight` | `number` | `250` | Height of the top background section |
+| `topBackgroundImageStyle` | `StyleProp<ImageStyle>` | `undefined` | Additional styles for the background image |
+| `topBackgroundStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the background container |
+
+#### Gradient Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `topGradientColors` | `string[]` | `undefined` | Array of colors for creating a gradient background in the top section |
+| `topGradientStart` | `{ x: number; y: number }` | `{ x: 0.5, y: 0 }` | Starting point for the gradient |
+| `topGradientEnd` | `{ x: number; y: number }` | `{ x: 0.5, y: 1 }` | Ending point for the gradient |
+| `topGradientLocations` | `number[]` | `undefined` | Locations for the gradient color stops |
+
+#### Style Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `cardContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the main container |
+| `mainTitleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the title text |
+| `subtitleStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the subtitle/description text |
+| `rewardsContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the rewards container |
+| `smallIconsRowStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the icons row at the top |
+| `activeIconStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for active reward icons |
+| `inactiveIconStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for inactive reward icons |
+| `modalOverlayStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the modal overlay (if component is used in a modal) |
+
+#### Reward Item Style Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `rewardItemContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for each reward item container |
+| `rewardItemIconWrapperStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the reward icon wrapper |
+| `rewardItemTextContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the reward text container |
+| `rewardItemTitleTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the reward title text |
+| `rewardItemDescriptionTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the reward description text |
+| `rewardItemStatusBadgeStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the status badge |
+| `rewardItemStatusTextStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the status text |
+
+#### Close Button Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showCloseIcon` | `boolean` | `true` | Whether to show the close icon button |
+| `customCloseIcon` | `ReactNode` | `undefined` | Custom component to use as close icon |
+| `closeIconVariant` | `"floating" \| "nested"` | `"nested"` | Style variant for the close icon position |
+| `closeIconContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the close icon container |
+| `closeIconStyle` | `StyleProp<TextStyle>` | `undefined` | Additional styles for the close icon |
+| `closeIconColor` | `string` | `theme.helper` | Color for the default close icon |
+| `closeIconSize` | `number` | `28` | Size for the default close icon |
+
+### Reward Object Structure
+
+Each reward in the `rewards` array should conform to this structure:
+
+```typescript
+type Reward = {
+  icon?: React.ReactNode;         // Icon for inactive state
+  activeIcon?: React.ReactNode;   // Icon for active state
+  title: string;                  // Reward title
+  description: string;            // Reward description
+  isActive: boolean;              // Whether the reward is active/unlocked
+  status: string;                 // Status text (e.g., "UNLOCKED", "LOCKED")
+  statusBackgroundColor: string;  // Background color for status badge
+  statusTextColor: string;        // Text color for status badge
+};
+```
+
+### Close Icon Variants
+
+- **Floating**: The close icon appears outside the card's main border, creating a floating effect
+- **Nested**: The close icon appears inside the card's border in the top-right (or top-left in RTL mode)
+
+### Related Components
+
+- `Badge`: Used for displaying reward icons in active/inactive states
+- `RewardItem`: Used for rendering individual reward entries
+- `ImageBackground`: Used when a top background image is provided
+- `TouchableOpacity`: Used for the close icon
+- `Text`: Used for rendering text content
+- `LinearGradient`: Used for creating gradient backgrounds