related-ui-components 2.1.3 → 2.1.5

package/lib/module/app.js

@@ -1,48 +1,63 @@
 "use strict";
 
-import React, { useEffect } from "react";
-import { I18nManager, SafeAreaView } from "react-native";
-import { SelaDealCard } from "./components/index.js";
-import { RelatedProvider } from "./theme/index.js";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const MyScreen = () => {
-  useEffect(() => {
-    I18nManager.allowRTL(true);
-    I18nManager.forceRTL(true);
-  }, []);
+import React from "react";
+import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
+import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack.js"; // Adjust path as needed
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+// Sample data - replace with your actual image URLs
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 = () => {
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(RelatedProvider, {
-      children: /*#__PURE__*/_jsx(SafeAreaView, {
-        style: {
-          padding: 50
-        },
-        children: /*#__PURE__*/_jsx(SelaDealCard, {
-          variant: "vertical"
-          // isRTL
-          ,
-          backgroundImage: {
-            uri: "https://picsum.photos/seed/lounge/600/700"
-          } // Your image for the horizontal card
-          ,
-          label: "Offer",
-          lockOverlay: true,
-          providerName: "Altanfeethi",
-          providerNameStyle: {
-            color: "yellow"
-          } // Specific style for provider name
-          ,
-          description: "1 Year Membership",
-          descriptionStyle: {
-            color: "white"
-          },
-          price: "20,000 pts",
-          onPress: () => console.log("Horizontal Sela Card Pressed"),
-          width: 177 // Example width
-          // height={180} // Example height
+    children: /*#__PURE__*/_jsxs(GestureHandlerRootView, {
+      style: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/_jsx(StatusBar, {
+        barStyle: "light-content"
+      }), /*#__PURE__*/_jsx(SafeAreaView, {
+        style: styles.appContainer,
+        children: /*#__PURE__*/_jsx(CarouselCardStack, {
+          data: DUMMY_DATA
         })
-      })
+      })]
     })
   });
 };
-export default MyScreen;
+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;
 //# sourceMappingURL=app.js.map

package/lib/module/app.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","I18nManager","SafeAreaView","SelaDealCard","RelatedProvider","jsx","_jsx","Fragment","_Fragment","MyScreen","allowRTL","forceRTL","children","style","padding","variant","backgroundImage","uri","label","lockOverlay","providerName","providerNameStyle","color","description","descriptionStyle","price","onPress","console","log","width"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAkB,OAAO;AAClD,SAASC,WAAW,EAAEC,YAAY,QAAc,cAAc;AAC9D,SAASC,YAAY,QAAQ,uBAAc;AAC3C,SAASC,eAAe,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAE1C,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EACrBT,SAAS,CAAC,MAAM;IACdC,WAAW,CAACS,QAAQ,CAAC,IAAI,CAAC;IAC1BT,WAAW,CAACU,QAAQ,CAAC,IAAI,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EACN,oBACEL,IAAA,CAAAE,SAAA;IAAAI,QAAA,eACEN,IAAA,CAACF,eAAe;MAAAQ,QAAA,eACdN,IAAA,CAACJ,YAAY;QAACW,KAAK,EAAE;UAAEC,OAAO,EAAE;QAAG,CAAE;QAAAF,QAAA,eACnCN,IAAA,CAACH,YAAY;UACXY,OAAO,EAAC;UACR;UAAA;UACAC,eAAe,EAAE;YACfC,GAAG,EAAE;UACP,CAAE,CAAC;UAAA;UACHC,KAAK,EAAC,OAAO;UACbC,WAAW;UACXC,YAAY,EAAC,aAAa;UAC1BC,iBAAiB,EAAE;YAAEC,KAAK,EAAE;UAAS,CAAE,CAAC;UAAA;UACxCC,WAAW,EAAC,mBAAmB;UAC/BC,gBAAgB,EAAE;YAAEF,KAAK,EAAE;UAAQ,CAAE;UACrCG,KAAK,EAAC,YAAY;UAClBC,OAAO,EAAEA,CAAA,KAAMC,OAAO,CAACC,GAAG,CAAC,8BAA8B,CAAE;UAC3DC,KAAK,EAAE,GAAI,CAAC;UACZ;QAAA,CACD;MAAC,CACU;IAAC,CACA;EAAC,CAClB,CAAC;AAEP,CAAC;AAED,eAAepB,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","SafeAreaView","StyleSheet","StatusBar","CarouselCardStack","GestureHandlerRootView","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","id","image","title","App","children","style","flex","barStyle","styles","appContainer","data","create","backgroundColor","justifyContent"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AAClE,OAAOC,iBAAiB,MAAM,qDAAkD,CAAC,CAAC;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;;AAErE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,MAAMC,UAAU,GAAG,CACjB;EACEC,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,CACD;AAED,MAAMC,GAAG,GAAGA,CAAA,KAAM;EAChB,oBACET,IAAA,CAAAI,SAAA;IAAAM,QAAA,eACER,KAAA,CAACJ,sBAAsB;MAACa,KAAK,EAAE;QAAEC,IAAI,EAAE;MAAE,CAAE;MAAAF,QAAA,gBACzCV,IAAA,CAACJ,SAAS;QAACiB,QAAQ,EAAC;MAAe,CAAE,CAAC,eACtCb,IAAA,CAACN,YAAY;QAACiB,KAAK,EAAEG,MAAM,CAACC,YAAa;QAAAL,QAAA,eACvCV,IAAA,CAACH,iBAAiB;UAACmB,IAAI,EAAEX;QAAW,CAAE;MAAC,CAC3B,CAAC;IAAA,CACO;EAAC,CACzB,CAAC;AAEP,CAAC;AAED,MAAMS,MAAM,GAAGnB,UAAU,CAACsB,MAAM,CAAC;EAC/BF,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPM,eAAe,EAAE,SAAS;IAAE;IAC5BC,cAAc,EAAE,QAAQ,CAAE;EAC5B;AACF,CAAC,CAAC;AAEF,eAAeV,GAAG","ignoreList":[]}

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

@@ -7,6 +7,7 @@ import Card from "../Card.js"; // Adjust path to your Card component
 import { useTheme } from "../../../theme/ThemeContext.js"; // Adjust path
 
 import { LockOverlay } from "../../LockOverlay/index.js";
+import { BlurView } from "expo-blur";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelaDealCard = ({
   variant,
@@ -30,7 +31,8 @@ const SelaDealCard = ({
   // Default based on images
   darkOverlayEnabled = true,
   darkOverlayColor = "rgba(0, 0, 0, 0.3)",
-  lockOverlay = false
+  lockOverlay = false,
+  priceContainerBlur
 }) => {
   const {
     theme,
@@ -130,12 +132,23 @@ const SelaDealCard = ({
             style: descriptionTextStyle,
             children: description
           })]
-        }), price && /*#__PURE__*/_jsx(View, {
+        }), price && priceContainerBlur && /*#__PURE__*/_jsx(BlurView, {
+          experimentalBlurMethod: "dimezisBlurView",
+          intensity: priceContainerBlur,
+          tint: "dark",
           style: finalPriceContainerStyle,
           children: /*#__PURE__*/_jsx(Text, {
             style: finalPriceStyle,
             children: price
           })
+        }), price && !priceContainerBlur && /*#__PURE__*/_jsx(View, {
+          style: [finalPriceContainerStyle, {
+            backgroundColor: theme.primary
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: finalPriceStyle,
+            children: price
+          })
         })]
       })]
     })]
@@ -176,7 +189,8 @@ const getStyles = (theme, isRTL) => StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
     borderRadius: 10,
-    backgroundColor: theme.primary
+    overflow: "hidden"
+    // backgroundColor: theme.primary,
   },
   priceTextBase: {
     fontSize: 16,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","theme","themeIsRTL","undefined","styles","getStyles","dynamicHeight","setDynamicHeight","uri","getSize","imgWidth","imgHeight","aspectRatio","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","primary","onPrimary","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","View","Text","StyleSheet","Image","Card","useTheme","LockOverlay","BlurView","jsx","_jsx","jsxs","_jsxs","SelaDealCard","variant","backgroundImage","label","labelStyle","labelContainerStyle","providerName","providerNameStyle","description","descriptionStyle","price","priceStyle","priceContainerStyle","onPress","style","width","height","isRTL","propIsRTL","borderRadius","darkOverlayEnabled","darkOverlayColor","lockOverlay","priceContainerBlur","theme","themeIsRTL","undefined","styles","getStyles","dynamicHeight","setDynamicHeight","uri","getSize","imgWidth","imgHeight","aspectRatio","finalLabelContainerStyle","labelContainerBase","finalLabelStyle","labelTextBase","finalPriceContainerStyle","priceContainerBase","priceContainerHorizontal","priceContainerVertical","finalPriceStyle","priceTextBase","providerTextStyle","providerNameBase","color","onSurface","textAlign","descriptionTextStyle","descriptionBase","cardBase","source","resizeMode","children","absoluteFill","backgroundColor","visible","contentPosition","iconSize","text","overlayOpacity","overlayContainer","topSection","alignItems","bottomContentHorizontal","textBlockHorizontal","bottomContentVertical","textBlockVertical","experimentalBlurMethod","intensity","tint","primary","create","overflow","position","flex","padding","justifyContent","paddingVertical","paddingHorizontal","background","fontWeight","fontSize","onBackground","marginBottom","secondary","helper","onPrimary","flexDirection","marginRight","alignSelf"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SelaDealCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CarouselCardStack/CarouselCardStack.js

@@ -0,0 +1,241 @@
+"use strict";
+
+import React, { useEffect, useMemo } from "react";
+import { View, StyleSheet, Image, Dimensions, Text } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { useSharedValue, useAnimatedStyle, withSpring, interpolate, useDerivedValue, Extrapolation } from "react-native-reanimated";
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width: SCREEN_WIDTH
+} = Dimensions.get("window");
+const CARD_WIDTH_FACTOR = 0.5;
+const CARD_ASPECT_RATIO = 1.35;
+const SIDE_CARD_SCALE_FACTOR = 0.85;
+const CARD_WIDTH = SCREEN_WIDTH * CARD_WIDTH_FACTOR;
+const CARD_HEIGHT = CARD_WIDTH * CARD_ASPECT_RATIO;
+const MAX_X_FACTOR = 0.5 / CARD_WIDTH_FACTOR - SIDE_CARD_SCALE_FACTOR / 2;
+const SIDE_CARD_TRANSLATE_X_FACTOR = Math.min(0.32, MAX_X_FACTOR);
+const SIDE_CARD_TRANSLATE_X = CARD_WIDTH * SIDE_CARD_TRANSLATE_X_FACTOR;
+const ACTIVE_CARD_SCALE = 1.0;
+const SPRING_CONFIG = {
+  damping: 18,
+  stiffness: 120,
+  mass: 0.6
+};
+const createVirtualData = originalData => {
+  if (!originalData || originalData.length === 0) return [];
+  const prefixItems = (items, segmentPrefix) => items.map((item, idx) => ({
+    ...item,
+    uniqueId: `${segmentPrefix}-${item.id}-${idx}`
+  }));
+  const prevSegment = prefixItems(originalData, "prev");
+  const currSegment = prefixItems(originalData, "curr");
+  const nextSegment = prefixItems(originalData, "next");
+  return [...prevSegment, ...currSegment, ...nextSegment];
+};
+const CarouselCardStack = ({
+  data: originalData,
+  cardHeight = CARD_HEIGHT,
+  cardWidth = CARD_WIDTH
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const N_original = originalData.length;
+  const virtualData = useMemo(() => createVirtualData(originalData), [originalData]);
+  const activeIndex = useSharedValue(N_original > 0 ? N_original : 0);
+  const gestureTranslateX = useSharedValue(0);
+  const contextX = useSharedValue(0);
+  useEffect(() => {
+    activeIndex.value = N_original > 0 ? N_original : 0;
+    gestureTranslateX.value = 0;
+  }, [N_original, activeIndex, gestureTranslateX]);
+
+  // Worklet to handle the loop reset
+  const handleLoopReset = () => {
+    "worklet";
+
+    if (N_original === 0) return;
+    const currentValue = Math.round(activeIndex.value);
+
+    // If in the "next" segment (indices >= 2*N_original)
+    if (currentValue >= N_original * 2) {
+      activeIndex.value = currentValue - N_original;
+    }
+    // If in the "prev" segment (indices < N_original)
+    else if (currentValue < N_original) {
+      activeIndex.value = currentValue + N_original;
+    }
+  };
+  const panGesture = Gesture.Pan().onBegin(() => {
+    contextX.value = gestureTranslateX.value;
+  }).onUpdate(event => {
+    gestureTranslateX.value = event.translationX;
+  }).onEnd(event => {
+    if (virtualData.length === 0) return;
+    const threshold = cardWidth / 3;
+    let newTargetVirtualIndex = activeIndex.value;
+    if (event.translationX < -threshold) {
+      newTargetVirtualIndex = activeIndex.value + 1;
+    } else if (event.translationX > threshold) {
+      newTargetVirtualIndex = activeIndex.value - 1;
+    }
+
+    // Clamp to virtual data bounds
+    newTargetVirtualIndex = Math.max(0, Math.min(newTargetVirtualIndex, virtualData.length - 1));
+    activeIndex.value = withSpring(newTargetVirtualIndex, SPRING_CONFIG, finished => {
+      "worklet";
+
+      if (finished) {
+        handleLoopReset();
+      }
+    });
+    gestureTranslateX.value = withSpring(0, SPRING_CONFIG);
+    contextX.value = 0;
+  });
+  const activeDotIndex = useDerivedValue(() => {
+    if (N_original === 0) return 0;
+    const currentVal = Math.round(activeIndex.value);
+    return (currentVal % N_original + N_original) % N_original;
+  });
+  if (virtualData.length === 0) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, {
+        height: cardHeight + 60
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: "No items to display"
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      height: cardHeight + 60
+    }],
+    children: [/*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.cardContainer, {
+          height: cardHeight
+        }],
+        children: virtualData.map((item, index) => {
+          const animatedStyle = useAnimatedStyle(() => {
+            const currentCardDragOffset = gestureTranslateX.value / cardWidth;
+            const displayOffset = index - (activeIndex.value - currentCardDragOffset);
+            const scale = interpolate(displayOffset, [-1, 0, 1], [SIDE_CARD_SCALE_FACTOR, ACTIVE_CARD_SCALE, SIDE_CARD_SCALE_FACTOR], Extrapolation.CLAMP);
+            const translateX = interpolate(displayOffset, [-1, 0, 1], [-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X], Extrapolation.CLAMP);
+            const opacity = interpolate(Math.abs(displayOffset), [0, 1, 2, 2.75], [1, 1, 0.6, 0], Extrapolation.CLAMP);
+            const snappedDisplayOffset = index - Math.round(activeIndex.value);
+            const zIndex = virtualData.length - Math.abs(snappedDisplayOffset);
+            return {
+              transform: [{
+                translateX
+              }, {
+                scale
+              }],
+              opacity,
+              zIndex
+            };
+          });
+          return /*#__PURE__*/_jsxs(Animated.View, {
+            style: [styles.card, {
+              width: cardWidth,
+              height: cardHeight
+            }, animatedStyle],
+            children: [/*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: item.image
+              },
+              style: styles.cardImage
+            }), item.title && /*#__PURE__*/_jsx(View, {
+              style: styles.titleContainer,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.cardTitle,
+                children: item.title
+              })
+            })]
+          }, item.uniqueId);
+        })
+      })
+    }), N_original > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.paginationContainer,
+      children: originalData.map((_, i) => {
+        const isActiveDot = useDerivedValue(() => {
+          return activeDotIndex.value === i;
+        });
+        const dotStyle = useAnimatedStyle(() => {
+          return {
+            width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
+            marginHorizontal: 4
+          };
+        });
+        return /*#__PURE__*/_jsx(Animated.View, {
+          style: dotStyle
+        }, `dot-${i}`);
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#212121"
+  },
+  cardContainer: {
+    width: SCREEN_WIDTH,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  card: {
+    position: "absolute",
+    borderRadius: 16,
+    backgroundColor: "white",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 8,
+    overflow: "hidden"
+  },
+  cardImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover"
+  },
+  titleContainer: {
+    position: "absolute",
+    bottom: 10,
+    left: 10,
+    right: 10,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    padding: 8,
+    borderRadius: 8
+  },
+  cardTitle: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold"
+  },
+  paginationContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+    marginBottom: 10
+  },
+  emptyText: {
+    color: "#FFFFFF",
+    fontSize: 16
+  }
+});
+export default CarouselCardStack;
+//# sourceMappingURL=CarouselCardStack.js.map

package/lib/module/components/CarouselCardStack/CarouselCardStack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","View","StyleSheet","Image","Dimensions","Text","Gesture","GestureDetector","Animated","useSharedValue","useAnimatedStyle","withSpring","interpolate","useDerivedValue","Extrapolation","useTheme","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","get","CARD_WIDTH_FACTOR","CARD_ASPECT_RATIO","SIDE_CARD_SCALE_FACTOR","CARD_WIDTH","CARD_HEIGHT","MAX_X_FACTOR","SIDE_CARD_TRANSLATE_X_FACTOR","Math","min","SIDE_CARD_TRANSLATE_X","ACTIVE_CARD_SCALE","SPRING_CONFIG","damping","stiffness","mass","createVirtualData","originalData","length","prefixItems","items","segmentPrefix","map","item","idx","uniqueId","id","prevSegment","currSegment","nextSegment","CarouselCardStack","data","cardHeight","cardWidth","theme","N_original","virtualData","activeIndex","gestureTranslateX","contextX","value","handleLoopReset","currentValue","round","panGesture","Pan","onBegin","onUpdate","event","translationX","onEnd","threshold","newTargetVirtualIndex","max","finished","activeDotIndex","currentVal","style","styles","container","height","children","emptyText","gesture","cardContainer","index","animatedStyle","currentCardDragOffset","displayOffset","scale","CLAMP","translateX","opacity","abs","snappedDisplayOffset","zIndex","transform","card","source","uri","image","cardImage","title","titleContainer","cardTitle","paginationContainer","_","i","isActiveDot","dotStyle","borderRadius","backgroundColor","primary","marginHorizontal","create","alignItems","justifyContent","position","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","overflow","resizeMode","bottom","left","right","padding","color","fontSize","fontWeight","flexDirection","marginTop","marginBottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CarouselCardStack/CarouselCardStack.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CarouselCardStack/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { default as CarouselCardStack } from "./CarouselCardStack.js";
+export * from "./CarouselCardStack.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/CarouselCardStack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","CarouselCardStack"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CarouselCardStack/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,wBAAqB;AAClE,cAAc,wBAAqB","ignoreList":[]}

package/lib/module/components/index.js

@@ -19,4 +19,5 @@ export * from "./RedeemedVoucher/index.js";
 export * from "./Button/index.js";
 export * from "./Skeleton/index.js";
 export * from "./CustomIcon/index.js";
+export * from "./CarouselCardStack/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAe,mBAAU;AACzB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,6BAAoB;AAClC,cAAc,wBAAe;AAC7B,cAAc,0BAAiB;AAC/B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAe,mBAAU;AACzB,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,6BAAoB;AAClC,cAAc,wBAAe;AAC7B,cAAc,0BAAiB;AAC/B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,8BAAqB","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 import React from "react";
-declare const MyScreen: () => React.JSX.Element;
-export default MyScreen;
+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":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,QAAA,MAAM,QAAQ,yBA8Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuC1B,QAAA,MAAM,GAAG,yBAWR,CAAC;AAUF,eAAe,GAAG,CAAC"}

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

@@ -22,6 +22,7 @@ interface SelaDealCardProps {
     contentColor?: string;
     labelBackgroundColor?: string;
     labelTextColor?: string;
+    priceContainerBlur?: number;
     priceBackgroundColor?: string;
     priceTextColor?: string;
     darkOverlayEnabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAMtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,cAAc,CAAC;IAChC,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;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqK7C,CAAC;AAkEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelaDealCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Card/templates/SelaDealCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,SAAS,EACT,SAAS,EAGT,SAAS,EACT,cAAc,EAGd,cAAc,EACf,MAAM,cAAc,CAAC;AAOtB,UAAU,iBAAiB;IACzB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,eAAe,EAAE,cAAc,CAAC;IAChC,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,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuL7C,CAAC;AAmEF,eAAe,YAAY,CAAC"}

package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface CarouselItemOriginal {
+    id: string;
+    image: string;
+    title?: string;
+}
+interface CarouselCardStackProps {
+    data: CarouselItemOriginal[];
+    cardHeight?: number;
+    cardWidth?: number;
+}
+declare const CarouselCardStack: React.FC<CarouselCardStackProps>;
+export default CarouselCardStack;
+//# sourceMappingURL=CarouselCardStack.d.ts.map

package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselCardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CarouselCardStack/CarouselCardStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA4B5D,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsLvD,CAAC;AAwDF,eAAe,iBAAiB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CarouselCardStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,cAAc,qBAAqB,CAAC"}

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

@@ -17,4 +17,5 @@ export * from "./RedeemedVoucher";
 export * from "./Button";
 export * from "./Skeleton";
 export * from "./CustomIcon";
+export * from "./CarouselCardStack";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAe,UAAU,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -29,7 +29,8 @@
     "react-native-gesture-handler": "~2.24.0",
     "react-native-qrcode-svg": "^6.3.15",
     "react-native-reanimated": "~3.17.4",
-    "react-native-svg": "15.11.2"
+    "react-native-svg": "15.11.2",
+    "expo-blur": "~14.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/src/app.tsx

@@ -1,38 +1,61 @@
-import React, { useEffect, useState } from "react";
-import { I18nManager, SafeAreaView, Text } from "react-native";
-import { SelaDealCard } from "./components";
-import { RelatedProvider } from "./theme";
+import React 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";
 
-const MyScreen = () => {
-  useEffect(() => {
-    I18nManager.allowRTL(true);
-    I18nManager.forceRTL(true);
-  }, []);
+// 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 = () => {
   return (
     <>
-      <RelatedProvider>
-        <SafeAreaView style={{ padding: 50 }}>
-          <SelaDealCard
-            variant="vertical"
-            // isRTL
-            backgroundImage={{
-              uri: "https://picsum.photos/seed/lounge/600/700",
-            }} // Your image for the horizontal card
-            label="Offer"
-            lockOverlay
-            providerName="Altanfeethi"
-            providerNameStyle={{ color: "yellow" }} // Specific style for provider name
-            description="1 Year Membership"
-            descriptionStyle={{ color: "white" }}
-            price="20,000 pts"
-            onPress={() => console.log("Horizontal Sela Card Pressed")}
-            width={177} // Example width
-            // height={180} // Example height
-          />
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <StatusBar barStyle="light-content" />
+        <SafeAreaView style={styles.appContainer}>
+          <CarouselCardStack data={DUMMY_DATA} />
         </SafeAreaView>
-      </RelatedProvider>
+      </GestureHandlerRootView>
     </>
   );
 };
 
-export default MyScreen;
+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;

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

@@ -16,6 +16,7 @@ import Card from "../Card"; // Adjust path to your Card component
 import { useTheme } from "../../../theme/ThemeContext"; // Adjust path
 import { ThemeType } from "../../../theme";
 import { LockOverlay } from "../../LockOverlay";
+import { BlurView } from "expo-blur";
 
 interface SelaDealCardProps {
   variant: "horizontal" | "vertical";
@@ -39,6 +40,7 @@ interface SelaDealCardProps {
   contentColor?: string; // For text like providerName, description on the image
   labelBackgroundColor?: string;
   labelTextColor?: string;
+  priceContainerBlur?: number;
   priceBackgroundColor?: string;
   priceTextColor?: string;
   darkOverlayEnabled?: boolean; // New prop
@@ -68,6 +70,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
   darkOverlayEnabled = true,
   darkOverlayColor = "rgba(0, 0, 0, 0.3)",
   lockOverlay = false,
+  priceContainerBlur,
 }) => {
   const { theme, isRTL: themeIsRTL } = useTheme();
   const isRTL = propIsRTL !== undefined ? propIsRTL : themeIsRTL;
@@ -133,7 +136,11 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
   return (
     <Card
       onPress={onPress}
-      style={[styles.cardBase, { borderRadius, width, height: dynamicHeight || height }, style]}
+      style={[
+        styles.cardBase,
+        { borderRadius, width, height: dynamicHeight || height },
+        style,
+      ]}
       backgroundImage={{
         source: backgroundImage,
         resizeMode: "cover",
@@ -151,9 +158,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
 
       <LockOverlay
         visible={lockOverlay}
-        contentPosition={
-          isRTL ? "top-left" : "top-right"
-        }
+        contentPosition={isRTL ? "top-left" : "top-right"}
         iconSize={24}
         text={""}
         overlayOpacity={0.4}
@@ -164,7 +169,7 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
           style={[
             styles.topSection,
             {
-              alignItems: "flex-start"
+              alignItems: "flex-start",
             },
           ]}
         >
@@ -201,8 +206,23 @@ const SelaDealCard: React.FC<SelaDealCardProps> = ({
                 <Text style={descriptionTextStyle}>{description}</Text>
               )}
             </View>
-            {price && (
-              <View style={finalPriceContainerStyle}>
+            {price && priceContainerBlur && (
+              <BlurView
+                experimentalBlurMethod="dimezisBlurView"
+                intensity={priceContainerBlur}
+                tint="dark"
+                style={finalPriceContainerStyle}
+              >
+                <Text style={finalPriceStyle}>{price}</Text>
+              </BlurView>
+            )}
+            {price && !priceContainerBlur && (
+              <View
+                style={[
+                  finalPriceContainerStyle,
+                  { backgroundColor: theme.primary },
+                ]}
+              >
                 <Text style={finalPriceStyle}>{price}</Text>
               </View>
             )}
@@ -249,7 +269,8 @@ const getStyles = (theme: ThemeType, isRTL: boolean) =>
       paddingVertical: 8,
       paddingHorizontal: 16,
       borderRadius: 10,
-      backgroundColor: theme.primary,
+      overflow: "hidden",
+      // backgroundColor: theme.primary,
     },
     priceTextBase: {
       fontSize: 16,

package/src/components/CarouselCardStack/CarouselCardStack.tsx

@@ -0,0 +1,304 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { View, StyleSheet, Image, Dimensions, Text } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  interpolate,
+  Extrapolate,
+  useDerivedValue,
+  runOnJS,
+  Extrapolation,
+} from "react-native-reanimated";
+import { useTheme } from "../../theme";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+
+const CARD_WIDTH_FACTOR = 0.5;
+const CARD_ASPECT_RATIO = 1.35;
+const SIDE_CARD_SCALE_FACTOR = 0.85;
+const CARD_WIDTH = SCREEN_WIDTH * CARD_WIDTH_FACTOR;
+const CARD_HEIGHT = CARD_WIDTH * CARD_ASPECT_RATIO;
+const MAX_X_FACTOR = 0.5 / CARD_WIDTH_FACTOR - SIDE_CARD_SCALE_FACTOR / 2;
+const SIDE_CARD_TRANSLATE_X_FACTOR = Math.min(0.32, MAX_X_FACTOR);
+const SIDE_CARD_TRANSLATE_X = CARD_WIDTH * SIDE_CARD_TRANSLATE_X_FACTOR;
+const ACTIVE_CARD_SCALE = 1.0;
+const SPRING_CONFIG = { damping: 18, stiffness: 120, mass: 0.6 };
+
+interface CarouselItemOriginal {
+  id: string;
+  image: string;
+  title?: string;
+}
+
+interface CarouselItemVirtual extends CarouselItemOriginal {
+  uniqueId: string;
+}
+
+interface CarouselCardStackProps {
+  data: CarouselItemOriginal[];
+  cardHeight?: number;
+  cardWidth?: number;
+}
+
+const createVirtualData = (
+  originalData: CarouselItemOriginal[]
+): CarouselItemVirtual[] => {
+  if (!originalData || originalData.length === 0) return [];
+
+  const prefixItems = (
+    items: CarouselItemOriginal[],
+    segmentPrefix: string
+  ): CarouselItemVirtual[] =>
+    items.map((item, idx) => ({
+      ...item,
+      uniqueId: `${segmentPrefix}-${item.id}-${idx}`,
+    }));
+
+  const prevSegment = prefixItems(originalData, "prev");
+  const currSegment = prefixItems(originalData, "curr");
+  const nextSegment = prefixItems(originalData, "next");
+
+  return [...prevSegment, ...currSegment, ...nextSegment];
+};
+
+const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
+  data: originalData,
+  cardHeight = CARD_HEIGHT,
+  cardWidth = CARD_WIDTH,
+}) => {
+  const { theme } = useTheme();
+
+  const N_original = originalData.length;
+
+  const virtualData = useMemo(
+    () => createVirtualData(originalData),
+    [originalData]
+  );
+
+  const activeIndex = useSharedValue(N_original > 0 ? N_original : 0);
+  const gestureTranslateX = useSharedValue(0);
+  const contextX = useSharedValue(0);
+
+  useEffect(() => {
+    activeIndex.value = N_original > 0 ? N_original : 0;
+    gestureTranslateX.value = 0;
+  }, [N_original, activeIndex, gestureTranslateX]);
+
+  // Worklet to handle the loop reset
+  const handleLoopReset = () => {
+    "worklet";
+    if (N_original === 0) return;
+
+    const currentValue = Math.round(activeIndex.value);
+
+    // If in the "next" segment (indices >= 2*N_original)
+    if (currentValue >= N_original * 2) {
+      activeIndex.value = currentValue - N_original;
+    }
+    // If in the "prev" segment (indices < N_original)
+    else if (currentValue < N_original) {
+      activeIndex.value = currentValue + N_original;
+    }
+  };
+
+  const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      contextX.value = gestureTranslateX.value;
+    })
+    .onUpdate((event) => {
+      gestureTranslateX.value = event.translationX;
+    })
+    .onEnd((event) => {
+      if (virtualData.length === 0) return;
+
+      const threshold = cardWidth / 3;
+      let newTargetVirtualIndex = activeIndex.value;
+
+      if (event.translationX < -threshold) {
+        newTargetVirtualIndex = activeIndex.value + 1;
+      } else if (event.translationX > threshold) {
+        newTargetVirtualIndex = activeIndex.value - 1;
+      }
+
+      // Clamp to virtual data bounds
+      newTargetVirtualIndex = Math.max(
+        0,
+        Math.min(newTargetVirtualIndex, virtualData.length - 1)
+      );
+
+      activeIndex.value = withSpring(
+        newTargetVirtualIndex,
+        SPRING_CONFIG,
+        (finished) => {
+          "worklet";
+          if (finished) {
+            handleLoopReset();
+          }
+        }
+      );
+      gestureTranslateX.value = withSpring(0, SPRING_CONFIG);
+      contextX.value = 0;
+    });
+
+  const activeDotIndex = useDerivedValue(() => {
+    if (N_original === 0) return 0;
+    const currentVal = Math.round(activeIndex.value);
+    return ((currentVal % N_original) + N_original) % N_original;
+  });
+
+  if (virtualData.length === 0) {
+    return (
+      <View style={[styles.container, { height: cardHeight + 60 }]}>
+        <Text style={styles.emptyText}>No items to display</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { height: cardHeight + 60 }]}>
+      <GestureDetector gesture={panGesture}>
+        <Animated.View style={[styles.cardContainer, { height: cardHeight }]}>
+          {virtualData.map((item, index) => {
+            const animatedStyle = useAnimatedStyle(() => {
+              const currentCardDragOffset = gestureTranslateX.value / cardWidth;
+              const displayOffset =
+                index - (activeIndex.value - currentCardDragOffset);
+
+              const scale = interpolate(
+                displayOffset,
+                [-1, 0, 1],
+                [
+                  SIDE_CARD_SCALE_FACTOR,
+                  ACTIVE_CARD_SCALE,
+                  SIDE_CARD_SCALE_FACTOR,
+                ],
+                Extrapolation.CLAMP
+              );
+
+              const translateX = interpolate(
+                displayOffset,
+                [-1, 0, 1],
+                [-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X],
+                Extrapolation.CLAMP
+              );
+
+              const opacity = interpolate(
+                Math.abs(displayOffset),
+                [0, 1, 2, 2.75],
+                [1, 1, 0.6, 0],
+                Extrapolation.CLAMP
+              );
+
+              const snappedDisplayOffset =
+                index - Math.round(activeIndex.value);
+              const zIndex =
+                virtualData.length - Math.abs(snappedDisplayOffset);
+
+              return {
+                transform: [{ translateX }, { scale }],
+                opacity,
+                zIndex,
+              };
+            });
+
+            return (
+              <Animated.View
+                key={item.uniqueId}
+                style={[
+                  styles.card,
+                  { width: cardWidth, height: cardHeight },
+                  animatedStyle,
+                ]}
+              >
+                <Image source={{ uri: item.image }} style={styles.cardImage} />
+                {item.title && (
+                  <View style={styles.titleContainer}>
+                    <Text style={styles.cardTitle}>{item.title}</Text>
+                  </View>
+                )}
+              </Animated.View>
+            );
+          })}
+        </Animated.View>
+      </GestureDetector>
+
+      {N_original > 0 && (
+        <View style={styles.paginationContainer}>
+          {originalData.map((_, i) => {
+            const isActiveDot = useDerivedValue(() => {
+              return activeDotIndex.value === i;
+            });
+            const dotStyle = useAnimatedStyle(() => {
+              return {
+                width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
+                marginHorizontal: 4,
+              };
+            });
+            return <Animated.View key={`dot-${i}`} style={dotStyle} />;
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#212121",
+  },
+  cardContainer: {
+    width: SCREEN_WIDTH,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  card: {
+    position: "absolute",
+    borderRadius: 16,
+    backgroundColor: "white",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 8,
+    overflow: "hidden",
+  },
+  cardImage: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "cover",
+  },
+  titleContainer: {
+    position: "absolute",
+    bottom: 10,
+    left: 10,
+    right: 10,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    padding: 8,
+    borderRadius: 8,
+  },
+  cardTitle: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  paginationContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+    marginBottom: 10,
+  },
+  emptyText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+  },
+});
+
+export default CarouselCardStack;

package/src/components/CarouselCardStack/index.ts

@@ -0,0 +1,2 @@
+export { default as CarouselCardStack } from "./CarouselCardStack";
+export * from "./CarouselCardStack";

package/src/components/index.ts

@@ -16,4 +16,5 @@ export * from "./Marquee";
 export * from "./RedeemedVoucher";
 export * from "./Button";
 export * from "./Skeleton";
-export * from "./CustomIcon"
+export * from "./CustomIcon"
+export * from "./CarouselCardStack";