related-ui-components 1.9.9 → 2.0.1

package/lib/module/app.js

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { Text } from "react-native";
 import { Popup, ScratchCard, ScratchCardContent } from "./components/index.js";
 import { Ionicons } from "@expo/vector-icons";
-import { useTheme } from "./theme/index.js";
+import { RelatedProvider, useTheme } from "./theme/index.js";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MyScreen = () => {
@@ -104,48 +104,50 @@ const MyScreen = () => {
   }];
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
-      children: /*#__PURE__*/_jsx(Popup, {
-        visible: true,
-        onClose: () => {},
-        children: /*#__PURE__*/_jsx(ScratchCard, {
-          backgroundColor: "#8A2BE2",
-          text: "Scratch to reveal your prize!",
-          textFontColor: "#FFFFFF",
-          textFontSize: 18
-          // textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
-          ,
-          width: 300,
-          height: 150,
-          gradient: {
-            colors: ["#ff0000", "#00ff00", "#0000ff"],
-            start: {
-              x: 0,
-              y: 0
-            },
-            end: {
-              x: 300,
-              y: 300
-            }
-          },
-          onScratched: () => alert("Congratulations! You won a prize!"),
-          children: /*#__PURE__*/_jsxs(ScratchCardContent, {
-            style: {
-              backgroundColor: "#FFD700"
-            },
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: {
-                fontSize: 24,
-                fontWeight: "bold",
-                color: "#000"
+      children: /*#__PURE__*/_jsx(RelatedProvider, {
+        children: /*#__PURE__*/_jsx(Popup, {
+          visible: true,
+          onClose: () => {},
+          children: /*#__PURE__*/_jsx(ScratchCard, {
+            backgroundColor: "#8A2BE2",
+            text: "Scratch to reveal your prize!",
+            textFontColor: "#FFFFFF",
+            textFontSize: 18
+            // textFont={require("@/assets/fonts/SpaceMono-Regular.ttf")}
+            ,
+            width: 300,
+            height: 150,
+            gradient: {
+              colors: ["#ff0000", "#00ff00", "#0000ff"],
+              start: {
+                x: 0,
+                y: 0
               },
-              children: "50% OFF COUPON"
-            }), /*#__PURE__*/_jsx(Text, {
+              end: {
+                x: 300,
+                y: 300
+              }
+            },
+            onScratched: () => alert("Congratulations! You won a prize!"),
+            children: /*#__PURE__*/_jsxs(ScratchCardContent, {
               style: {
-                marginTop: 8,
-                color: "#333"
+                backgroundColor: "#FFD700"
               },
-              children: "Use code: SCRATCH50"
-            })]
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: {
+                  fontSize: 24,
+                  fontWeight: "bold",
+                  color: "#000"
+                },
+                children: "50% OFF COUPON"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: {
+                  marginTop: 8,
+                  color: "#333"
+                },
+                children: "Use code: SCRATCH50"
+              })]
+            })
           })
         })
       })

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Text","Popup","ScratchCard","ScratchCardContent","Ionicons","useTheme","GestureHandlerRootView","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","MyScreen","isFilterVisible","setIsFilterVisible","theme","handleApplyFilters","result","console","log","rewardsData","icon","name","size","color","primary","activeIcon","onPrimary","title","description","isActive","status","statusBackgroundColor","statusTextColor","helper","disabled","text","background","children","visible","onClose","backgroundColor","textFontColor","textFontSize","width","height","gradient","colors","start","x","y","end","onScratched","alert","style","fontSize","fontWeight","marginTop"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","Text","Popup","ScratchCard","ScratchCardContent","Ionicons","RelatedProvider","useTheme","GestureHandlerRootView","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","MyScreen","isFilterVisible","setIsFilterVisible","theme","handleApplyFilters","result","console","log","rewardsData","icon","name","size","color","primary","activeIcon","onPrimary","title","description","isActive","status","statusBackgroundColor","statusTextColor","helper","disabled","text","background","children","visible","onClose","backgroundColor","textFontColor","textFontSize","width","height","gradient","colors","start","x","y","end","onScratched","alert","style","fontSize","fontWeight","marginTop"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Card/templates/SelaDealCard.js

@@ -0,0 +1,233 @@
+"use strict";
+
+// src/components/SelaDealCard/SelaDealCard.tsx
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Card from "../Card.js"; // Adjust path to your Card component
+import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SelaDealCard = ({
+  variant,
+  backgroundImage,
+  label,
+  labelStyle,
+  labelContainerStyle,
+  providerName,
+  providerNameStyle,
+  description,
+  descriptionStyle,
+  price,
+  priceStyle,
+  priceContainerStyle,
+  onPress,
+  style,
+  width = "100%",
+  height = variant === "horizontal" ? 180 : 280,
+  // Different default heights
+  isRTL: propIsRTL,
+  borderRadius = 12,
+  // Default based on images
+  contentColor,
+  labelBackgroundColor,
+  labelTextColor,
+  priceBackgroundColor,
+  priceTextColor
+}) => {
+  const {
+    theme,
+    isRTL: themeIsRTL
+  } = useTheme();
+  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
+
+  // Default color for text directly on the image (e.g., provider name, description)
+  // Provider name in images is often yellow, description white.
+  // Consumers can override with providerNameStyle/descriptionStyle.
+  const mainImageTextColor = contentColor || "#FFFFFF"; // Default to white
+
+  // --- Label Styles ---
+  // Image 1 (Horizontal "Offer"): White background, dark text.
+  // Image 2 (Vertical "Booking"): Appears to be a light text on image, no distinct bg.
+  // For consistency, let's assume label has a background.
+  const actualLabelBgColor = labelBackgroundColor || theme.surface;
+  const actualLabelTxtColor = labelTextColor || theme.onSurface;
+  const finalLabelContainerStyle = [styles.labelContainerBase, {
+    backgroundColor: actualLabelBgColor
+  }, labelContainerStyle];
+  const finalLabelStyle = [styles.labelTextBase, {
+    color: actualLabelTxtColor
+  }, labelStyle];
+
+  // --- Price Container Styles ---
+  // Horizontal (Image 1): Bright cyan/teal background, dark text.
+  const defaultHorizontalPriceBg = priceBackgroundColor || "#17D4C6";
+  const defaultHorizontalPriceText = priceTextColor || "#000000";
+  // Vertical (Image 2): Semi-transparent dark background, white text.
+  const defaultVerticalPriceBg = priceBackgroundColor || "rgba(0, 0, 0, 0.5)";
+  const defaultVerticalPriceText = priceTextColor || "#FFFFFF";
+  const actualPriceBgColor = variant === "horizontal" ? defaultHorizontalPriceBg : defaultVerticalPriceBg;
+  const actualPriceTxtColor = variant === "horizontal" ? defaultHorizontalPriceText : defaultVerticalPriceText;
+  const finalPriceContainerStyle = [styles.priceContainerBase, {
+    backgroundColor: actualPriceBgColor
+  }, variant === "horizontal" ? styles.priceContainerHorizontal : styles.priceContainerVertical, priceContainerStyle];
+  const finalPriceStyle = [styles.priceTextBase, {
+    color: actualPriceTxtColor
+  }, priceStyle];
+
+  // --- Text Styles for Content on Image ---
+  const providerTextStyle = [styles.providerNameBase,
+  // In images, provider name is often yellow. This can be set via providerNameStyle.
+  {
+    color: mainImageTextColor,
+    textAlign: isRTL ? "right" : "left"
+  }, providerNameStyle];
+  const descriptionTextStyle = [styles.descriptionBase, {
+    color: mainImageTextColor,
+    textAlign: isRTL ? "right" : "left"
+  }, descriptionStyle];
+  return /*#__PURE__*/_jsx(Card, {
+    onPress: onPress,
+    style: [styles.cardBase, {
+      borderRadius,
+      width,
+      height
+    }, style],
+    backgroundImage: {
+      source: backgroundImage,
+      resizeMode: "cover"
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.overlayContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.topSection,
+        // Horizontal: LTR=left, RTL=right
+        // Vertical: LTR=right, RTL=left
+        {
+          alignItems: variant === "horizontal" ? isRTL ? "flex-end" : "flex-start" : isRTL ? "flex-start" : "flex-end"
+        }],
+        children: label && /*#__PURE__*/_jsx(View, {
+          style: finalLabelContainerStyle,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: finalLabelStyle,
+            children: label
+          })
+        })
+      }), variant === "horizontal" ? /*#__PURE__*/_jsxs(View, {
+        style: styles.bottomContentHorizontal,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.textBlockHorizontal,
+          children: [providerName && /*#__PURE__*/_jsx(Text, {
+            style: providerTextStyle,
+            children: providerName
+          }), description && /*#__PURE__*/_jsx(Text, {
+            style: descriptionTextStyle,
+            children: description
+          })]
+        }), price && /*#__PURE__*/_jsx(View, {
+          style: finalPriceContainerStyle,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: finalPriceStyle,
+            children: price
+          })
+        })]
+      }) :
+      /*#__PURE__*/
+      // Vertical Variant
+      _jsxs(View, {
+        style: styles.bottomContentVertical,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.textBlockVertical,
+          children: [providerName && /*#__PURE__*/_jsx(Text, {
+            style: providerTextStyle,
+            children: providerName
+          }), description && /*#__PURE__*/_jsx(Text, {
+            style: descriptionTextStyle,
+            children: description
+          })]
+        }), price && /*#__PURE__*/_jsx(View, {
+          style: finalPriceContainerStyle,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: finalPriceStyle,
+            children: price
+          })
+        })]
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  cardBase: {
+    overflow: "hidden",
+    // Ensures content respects borderRadius
+    position: "relative"
+  },
+  overlayContainer: {
+    flex: 1,
+    padding: 16,
+    // General padding for content from edges
+    justifyContent: "space-between" // Pushes top and bottom sections apart
+    // Optional: Add a LinearGradient here for a scrim if text readability is an issue
+  },
+  topSection: {
+    // This view ensures the label is positioned correctly (start/end)
+    // It will be at the top due to justifyContent: 'space-between' on overlayContainer
+  },
+  labelContainerBase: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16 // Pill shape
+    // alignSelf is determined by parent's alignItems in topSection
+  },
+  labelTextBase: {
+    fontWeight: "600",
+    fontSize: 13
+  },
+  providerNameBase: {
+    // Example: Yellow text in images "Altanfeethi", "Riva Jeddah Yacht Club"
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 2 // Space between provider name and description
+  },
+  descriptionBase: {
+    // Example: White text in images "1 Year Membership", "2 hours Boat Trip"
+    fontSize: 14
+  },
+  priceContainerBase: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 10 // Rounded corners for the price box
+  },
+  priceTextBase: {
+    fontWeight: "bold",
+    fontSize: 16
+  },
+  // --- Horizontal Variant Layout ---
+  bottomContentHorizontal: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end" // Aligns text block and price box to their bottom
+  },
+  textBlockHorizontal: {
+    flex: 1,
+    // Allows text to take available space, pushing price to the side
+    marginRight: 10 // Space between text content and price box
+  },
+  priceContainerHorizontal: {
+    // Specific styling for horizontal price box if needed (e.g., fixed width)
+    // Default is to wrap content.
+  },
+  // --- Vertical Variant Layout ---
+  bottomContentVertical: {
+    flexDirection: "column" // Stacks text block and price box vertically
+  },
+  textBlockVertical: {
+    marginBottom: 12 // Space between text content and price box
+    // Text inside will align start/end based on isRTL and individual text styles
+  },
+  priceContainerVertical: {
+    alignSelf: "stretch",
+    // Makes the price box take the full width
+    alignItems: "center" // Centers the price text within the wide box
+  }
+});
+export default SelaDealCard;
+//# sourceMappingURL=SelaDealCard.js.map

package/lib/module/components/Card/templates/SelaDealCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","Card","useTheme","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","contentColor","labelBackgroundColor","labelTextColor","priceBackgroundColor","priceTextColor","theme","themeIsRTL","undefined","mainImageTextColor","actualLabelBgColor","surface","actualLabelTxtColor","onSurface","finalLabelContainerStyle","styles","labelContainerBase","backgroundColor","finalLabelStyle","labelTextBase","color","defaultHorizontalPriceBg","defaultHorizontalPriceText","defaultVerticalPriceBg","defaultVerticalPriceText","actualPriceBgColor","actualPriceTxtColor","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","fontWeight","fontSize","marginBottom","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/ThemeContext.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const ThemeContext = /*#__PURE__*/createContext({
   theme: lightTheme,
   isRTL: I18nManager.isRTL,
-  isDark: useColorScheme() === "dark",
+  isDark: false,
   toggleTheme: () => {}
 });
 

package/lib/module/theme/ThemeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContext","useState","I18nManager","useColorScheme","lightTheme","darkTheme","jsx","_jsx","ThemeContext","theme","isRTL","isDark","toggleTheme","RelatedProvider","children","customLightTheme","customDarkTheme","dark","forceRTL","setIsDark","currentIsRTL","themes","setThemes","light","prev","currentTheme","contextValue","Provider","value","useTheme"],"sourceRoot":"..\\..\\..\\src","sources":["theme/ThemeContext.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,aAAa,EACbC,UAAU,EACVC,QAAQ,QAGH,OAAO;AAEd,SAASC,WAAW,EAAEC,cAAc,QAAQ,cAAc;AAC1D,SAASC,UAAU,EAAaC,SAAS,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ5D,OAAO,MAAMC,YAAY,gBAAGT,aAAa,CAAiB;EACxDU,KAAK,EAAEL,UAAU;EACjBM,KAAK,EAAER,WAAW,CAACQ,KAAK;EACxBC,MAAM,EAAER,cAAc,CAAC,CAAC,KAAK,MAAM;EACnCS,WAAW,EAAEA,CAAA,KAAM,CAAC;AACtB,CAAC,CAAC;;AAEF;;AASA;AACA,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,QAAQ;EACRC,gBAAgB;EAChBC,eAAe;EACfC,IAAI;EACJC;AACF,CAAC,KAAK;EACJ,MAAM,CAACP,MAAM,EAAEQ,SAAS,CAAC,GAAGlB,QAAQ,CAClCgB,IAAI,IAAId,cAAc,CAAC,CAAC,KAAK,MAC/B,CAAC;EACD,MAAMiB,YAAY,GAAG,OAAOF,QAAQ,KAAK,SAAS,GAAGA,QAAQ,GAAG,KAAK;;EAErE;EACA,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGrB,QAAQ,CAAC;IACnCsB,KAAK,EAAE;MAAE,GAAGnB,UAAU;MAAE,GAAGW;IAAiB,CAAc;IAC1DE,IAAI,EAAE;MAAE,GAAGZ,SAAS;MAAE,GAAGW;IAAgB;EAC3C,CAAC,CAAC;EAEF,MAAMJ,WAAW,GAAGA,CAAA,KAAMO,SAAS,CAAEK,IAAI,IAAK,CAACA,IAAI,CAAC;EAEpD,MAAMC,YAAY,GAAGd,MAAM,GAAGU,MAAM,CAACJ,IAAI,GAAGI,MAAM,CAACE,KAAK;EAExD,MAAMG,YAA4B,GAAG;IACnCjB,KAAK,EAAEgB,YAAY;IACnBf,KAAK,EAAEU,YAAY;IACnBT,MAAM;IACNC;EACF,CAAC;EAED,oBACEL,IAAA,CAACC,YAAY,CAACmB,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAZ,QAAA,EACxCA;EAAQ,CACY,CAAC;AAE5B,CAAC;;AAED;AACA,OAAO,MAAMe,QAAQ,GAAGA,CAAA,KAAM7B,UAAU,CAACQ,YAAY,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createContext","useContext","useState","I18nManager","useColorScheme","lightTheme","darkTheme","jsx","_jsx","ThemeContext","theme","isRTL","isDark","toggleTheme","RelatedProvider","children","customLightTheme","customDarkTheme","dark","forceRTL","setIsDark","currentIsRTL","themes","setThemes","light","prev","currentTheme","contextValue","Provider","value","useTheme"],"sourceRoot":"..\\..\\..\\src","sources":["theme/ThemeContext.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IACVC,aAAa,EACbC,UAAU,EACVC,QAAQ,QAGH,OAAO;AAEd,SAASC,WAAW,EAAEC,cAAc,QAAQ,cAAc;AAC1D,SAASC,UAAU,EAAaC,SAAS,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ5D,OAAO,MAAMC,YAAY,gBAAGT,aAAa,CAAiB;EACxDU,KAAK,EAAEL,UAAU;EACjBM,KAAK,EAAER,WAAW,CAACQ,KAAK;EACxBC,MAAM,EAAE,KAAK;EACbC,WAAW,EAAEA,CAAA,KAAM,CAAC;AACtB,CAAC,CAAC;;AAEF;;AASA;AACA,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,QAAQ;EACRC,gBAAgB;EAChBC,eAAe;EACfC,IAAI;EACJC;AACF,CAAC,KAAK;EACJ,MAAM,CAACP,MAAM,EAAEQ,SAAS,CAAC,GAAGlB,QAAQ,CAClCgB,IAAI,IAAId,cAAc,CAAC,CAAC,KAAK,MAC/B,CAAC;EACD,MAAMiB,YAAY,GAAG,OAAOF,QAAQ,KAAK,SAAS,GAAGA,QAAQ,GAAG,KAAK;;EAErE;EACA,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGrB,QAAQ,CAAC;IACnCsB,KAAK,EAAE;MAAE,GAAGnB,UAAU;MAAE,GAAGW;IAAiB,CAAc;IAC1DE,IAAI,EAAE;MAAE,GAAGZ,SAAS;MAAE,GAAGW;IAAgB;EAC3C,CAAC,CAAC;EAEF,MAAMJ,WAAW,GAAGA,CAAA,KAAMO,SAAS,CAAEK,IAAI,IAAK,CAACA,IAAI,CAAC;EAEpD,MAAMC,YAAY,GAAGd,MAAM,GAAGU,MAAM,CAACJ,IAAI,GAAGI,MAAM,CAACE,KAAK;EAExD,MAAMG,YAA4B,GAAG;IACnCjB,KAAK,EAAEgB,YAAY;IACnBf,KAAK,EAAEU,YAAY;IACnBT,MAAM;IACNC;EACF,CAAC;EAED,oBACEL,IAAA,CAACC,YAAY,CAACmB,QAAQ;IAACC,KAAK,EAAEF,YAAa;IAAAZ,QAAA,EACxCA;EAAQ,CACY,CAAC;AAE5B,CAAC;;AAED;AACA,OAAO,MAAMe,QAAQ,GAAGA,CAAA,KAAM7B,UAAU,CAACQ,YAAY,CAAC","ignoreList":[]}

package/lib/typescript/src/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;AAgBxC,QAAA,MAAM,QAAQ,yBA4Gb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,QAAA,MAAM,QAAQ,yBA8Gb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { ImageSourcePropType, StyleProp, ViewStyle, TextStyle, DimensionValue } from "react-native";
+interface SelaDealCardProps {
+    variant: "horizontal" | "vertical";
+    backgroundImage: ImageSourcePropType;
+    label?: string;
+    labelStyle?: StyleProp<TextStyle>;
+    labelContainerStyle?: StyleProp<ViewStyle>;
+    providerName?: string;
+    providerNameStyle?: StyleProp<TextStyle>;
+    description?: string;
+    descriptionStyle?: StyleProp<TextStyle>;
+    price?: string;
+    priceStyle?: StyleProp<TextStyle>;
+    priceContainerStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    width?: DimensionValue;
+    height?: DimensionValue;
+    isRTL?: boolean;
+    borderRadius?: number;
+    contentColor?: string;
+    labelBackgroundColor?: string;
+    labelTextColor?: string;
+    priceBackgroundColor?: string;
+    priceTextColor?: string;
+}
+declare const SelaDealCard: React.FC<SelaDealCardProps>;
+export default SelaDealCard;
+//# sourceMappingURL=SelaDealCard.d.ts.map

package/lib/typescript/src/components/Card/templates/SelaDealCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,mBAAmB,EACnB,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAEf,MAAM,cAAc,CAAC;AAItB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0K7C,CAAC;AA0EF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "1.9.9",
+  "version": "2.0.1",
   "main": "./lib\\module\\index.js",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -10,7 +10,7 @@ import {
 } from "./components";
 import BRANDS from "./constants/BRANDS";
 import { Ionicons } from "@expo/vector-icons";
-import { useTheme } from "./theme";
+import { RelatedProvider, useTheme } from "./theme";
 import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
@@ -93,6 +93,7 @@ const MyScreen = () => {
   return (
     <>
       <GestureHandlerRootView>
+        <RelatedProvider>
         <Popup visible={true} onClose={()=>{}}>
         <ScratchCard
           backgroundColor="#8A2BE2"
@@ -119,6 +120,7 @@ const MyScreen = () => {
           </ScratchCardContent>
         </ScratchCard>
         </Popup>
+        </RelatedProvider>
       </GestureHandlerRootView>
     </>
   );

package/src/components/Card/templates/SelaDealCard.tsx

@@ -0,0 +1,286 @@
+// src/components/SelaDealCard/SelaDealCard.tsx
+import React from "react";
+import {
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  View,
+  Text,
+  TextStyle,
+  DimensionValue,
+  StyleSheet,
+} from "react-native";
+import Card from "../Card"; // Adjust path to your Card component
+import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
+
+interface SelaDealCardProps {
+  variant: "horizontal" | "vertical";
+  backgroundImage: ImageSourcePropType;
+  label?: string;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  providerName?: string;
+  providerNameStyle?: StyleProp<TextStyle>;
+  description?: string;
+  descriptionStyle?: StyleProp<TextStyle>;
+  price?: string;
+  priceStyle?: StyleProp<TextStyle>;
+  priceContainerStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>; // Overall card style
+  width?: DimensionValue;
+  height?: DimensionValue;
+  isRTL?: boolean;
+  borderRadius?: number;
+  contentColor?: string; // For text like providerName, description on the image
+  labelBackgroundColor?: string;
+  labelTextColor?: string;
+  priceBackgroundColor?: string;
+  priceTextColor?: string;
+}
+
+const SelaDealCard: React.FC<SelaDealCardProps> = ({
+  variant,
+  backgroundImage,
+  label,
+  labelStyle,
+  labelContainerStyle,
+  providerName,
+  providerNameStyle,
+  description,
+  descriptionStyle,
+  price,
+  priceStyle,
+  priceContainerStyle,
+  onPress,
+  style,
+  width = "100%",
+  height = variant === "horizontal" ? 180 : 280, // Different default heights
+  isRTL: propIsRTL,
+  borderRadius = 12, // Default based on images
+  contentColor,
+  labelBackgroundColor,
+  labelTextColor,
+  priceBackgroundColor,
+  priceTextColor,
+}) => {
+  const { theme, isRTL: themeIsRTL } = useTheme();
+  const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
+
+  // Default color for text directly on the image (e.g., provider name, description)
+  // Provider name in images is often yellow, description white.
+  // Consumers can override with providerNameStyle/descriptionStyle.
+  const mainImageTextColor = contentColor || "#FFFFFF"; // Default to white
+
+  // --- Label Styles ---
+  // Image 1 (Horizontal "Offer"): White background, dark text.
+  // Image 2 (Vertical "Booking"): Appears to be a light text on image, no distinct bg.
+  // For consistency, let's assume label has a background.
+  const actualLabelBgColor = labelBackgroundColor || theme.surface;
+  const actualLabelTxtColor = labelTextColor || theme.onSurface;
+
+  const finalLabelContainerStyle: StyleProp<ViewStyle> = [
+    styles.labelContainerBase,
+    { backgroundColor: actualLabelBgColor },
+    labelContainerStyle,
+  ];
+  const finalLabelStyle: StyleProp<TextStyle> = [
+    styles.labelTextBase,
+    { color: actualLabelTxtColor },
+    labelStyle,
+  ];
+
+  // --- Price Container Styles ---
+  // Horizontal (Image 1): Bright cyan/teal background, dark text.
+  const defaultHorizontalPriceBg = priceBackgroundColor || "#17D4C6";
+  const defaultHorizontalPriceText = priceTextColor || "#000000";
+  // Vertical (Image 2): Semi-transparent dark background, white text.
+  const defaultVerticalPriceBg =
+    priceBackgroundColor || "rgba(0, 0, 0, 0.5)";
+  const defaultVerticalPriceText = priceTextColor || "#FFFFFF";
+
+  const actualPriceBgColor =
+    variant === "horizontal"
+      ? defaultHorizontalPriceBg
+      : defaultVerticalPriceBg;
+  const actualPriceTxtColor =
+    variant === "horizontal"
+      ? defaultHorizontalPriceText
+      : defaultVerticalPriceText;
+
+  const finalPriceContainerStyle: StyleProp<ViewStyle> = [
+    styles.priceContainerBase,
+    { backgroundColor: actualPriceBgColor },
+    variant === "horizontal"
+      ? styles.priceContainerHorizontal
+      : styles.priceContainerVertical,
+    priceContainerStyle,
+  ];
+  const finalPriceStyle: StyleProp<TextStyle> = [
+    styles.priceTextBase,
+    { color: actualPriceTxtColor },
+    priceStyle,
+  ];
+
+  // --- Text Styles for Content on Image ---
+  const providerTextStyle: StyleProp<TextStyle> = [
+    styles.providerNameBase,
+    // In images, provider name is often yellow. This can be set via providerNameStyle.
+    { color: mainImageTextColor, textAlign: isRTL ? "right" : "left" },
+    providerNameStyle,
+  ];
+
+  const descriptionTextStyle: StyleProp<TextStyle> = [
+    styles.descriptionBase,
+    { color: mainImageTextColor, textAlign: isRTL ? "right" : "left" },
+    descriptionStyle,
+  ];
+
+  return (
+    <Card
+      onPress={onPress}
+      style={[styles.cardBase, { borderRadius, width, height }, style]}
+      backgroundImage={{
+        source: backgroundImage,
+        resizeMode: "cover",
+      }}
+    >
+      <View style={styles.overlayContainer}>
+        {/* Top Section (for Label) */}
+        <View
+          style={[
+            styles.topSection,
+            // Horizontal: LTR=left, RTL=right
+            // Vertical: LTR=right, RTL=left
+            {
+              alignItems:
+                variant === "horizontal"
+                  ? isRTL
+                    ? "flex-end"
+                    : "flex-start"
+                  : isRTL
+                  ? "flex-start"
+                  : "flex-end",
+            },
+          ]}
+        >
+          {label && (
+            <View style={finalLabelContainerStyle}>
+              <Text style={finalLabelStyle}>{label}</Text>
+            </View>
+          )}
+        </View>
+
+        {/* Bottom Section (Provider, Description, Price) */}
+        {variant === "horizontal" ? (
+          <View style={styles.bottomContentHorizontal}>
+            <View style={styles.textBlockHorizontal}>
+              {providerName && (
+                <Text style={providerTextStyle}>{providerName}</Text>
+              )}
+              {description && (
+                <Text style={descriptionTextStyle}>{description}</Text>
+              )}
+            </View>
+            {price && (
+              <View style={finalPriceContainerStyle}>
+                <Text style={finalPriceStyle}>{price}</Text>
+              </View>
+            )}
+          </View>
+        ) : (
+          // Vertical Variant
+          <View style={styles.bottomContentVertical}>
+            <View style={styles.textBlockVertical}>
+              {providerName && (
+                <Text style={providerTextStyle}>{providerName}</Text>
+              )}
+              {description && (
+                <Text style={descriptionTextStyle}>{description}</Text>
+              )}
+            </View>
+            {price && (
+              <View style={finalPriceContainerStyle}>
+                <Text style={finalPriceStyle}>{price}</Text>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardBase: {
+    overflow: "hidden", // Ensures content respects borderRadius
+    position: "relative",
+  },
+  overlayContainer: {
+    flex: 1,
+    padding: 16, // General padding for content from edges
+    justifyContent: "space-between", // Pushes top and bottom sections apart
+    // Optional: Add a LinearGradient here for a scrim if text readability is an issue
+  },
+  topSection: {
+    // This view ensures the label is positioned correctly (start/end)
+    // It will be at the top due to justifyContent: 'space-between' on overlayContainer
+  },
+  labelContainerBase: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16, // Pill shape
+    // alignSelf is determined by parent's alignItems in topSection
+  },
+  labelTextBase: {
+    fontWeight: "600",
+    fontSize: 13,
+  },
+  providerNameBase: {
+    // Example: Yellow text in images "Altanfeethi", "Riva Jeddah Yacht Club"
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 2, // Space between provider name and description
+  },
+  descriptionBase: {
+    // Example: White text in images "1 Year Membership", "2 hours Boat Trip"
+    fontSize: 14,
+  },
+  priceContainerBase: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 10, // Rounded corners for the price box
+  },
+  priceTextBase: {
+    fontWeight: "bold",
+    fontSize: 16,
+  },
+  // --- Horizontal Variant Layout ---
+  bottomContentHorizontal: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-end", // Aligns text block and price box to their bottom
+  },
+  textBlockHorizontal: {
+    flex: 1, // Allows text to take available space, pushing price to the side
+    marginRight: 10, // Space between text content and price box
+  },
+  priceContainerHorizontal: {
+    // Specific styling for horizontal price box if needed (e.g., fixed width)
+    // Default is to wrap content.
+  },
+  // --- Vertical Variant Layout ---
+  bottomContentVertical: {
+    flexDirection: "column", // Stacks text block and price box vertically
+  },
+  textBlockVertical: {
+    marginBottom: 12, // Space between text content and price box
+    // Text inside will align start/end based on isRTL and individual text styles
+  },
+  priceContainerVertical: {
+    alignSelf: "stretch", // Makes the price box take the full width
+    alignItems: "center", // Centers the price text within the wide box
+  },
+});
+
+export default SelaDealCard;

package/src/theme/ThemeContext.tsx

@@ -18,7 +18,7 @@ interface RelatedContext {
 export const ThemeContext = createContext<RelatedContext>({
   theme: lightTheme,
   isRTL: I18nManager.isRTL,
-  isDark: useColorScheme() === "dark",
+  isDark: false,
   toggleTheme: () => {}
 });