related-ui-components 2.1.4 → 2.1.6

package/lib/module/app.js

@@ -1,50 +1,63 @@
 "use strict";
 
 import React from "react";
-import { 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 { 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
-          ,
-          providerName: "Altanfeethi",
-          providerNameStyle: {
-            color: "yellow"
-          } // Specific style for provider name
-          ,
-          description: "1 Year Membership",
-          descriptionStyle: {
-            color: "white"
-          },
-          priceContainerBlur: 90,
-          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","SafeAreaView","SelaDealCard","RelatedProvider","jsx","_jsx","Fragment","_Fragment","MyScreen","children","style","padding","variant","backgroundImage","uri","label","providerName","providerNameStyle","color","description","descriptionStyle","priceContainerBlur","price","onPress","console","log","width"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAA+B,OAAO;AAClD,SAAsBC,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;EACrB;EACA;EACA;EACA;EACA,oBACEH,IAAA,CAAAE,SAAA;IAAAE,QAAA,eACEJ,IAAA,CAACF,eAAe;MAAAM,QAAA,eACdJ,IAAA,CAACJ,YAAY;QAACS,KAAK,EAAE;UAAEC,OAAO,EAAE;QAAG,CAAE;QAAAF,QAAA,eACnCJ,IAAA,CAACH,YAAY;UACXU,OAAO,EAAC;UACR;UAAA;UACAC,eAAe,EAAE;YACfC,GAAG,EAAE;UACP,CAAE,CAAC;UAAA;UACHC,KAAK,EAAC;UACN;UAAA;UACAC,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,kBAAkB,EAAE,EAAG;UACvBC,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,eAAelB,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/CarouselCardStack/CarouselCardStack.js

@@ -0,0 +1,243 @@
+"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,
+  backgroundColor = "transparent"
+}) => {
+  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,
+      backgroundColor: backgroundColor
+    }],
+    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: "transparent"
+  },
+  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","backgroundColor","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","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,yBA+Bb,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/CarouselCardStack/CarouselCardStack.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface CarouselItemOriginal {
+    id: string;
+    image: string;
+    title?: string;
+}
+interface CarouselCardStackProps {
+    data: CarouselItemOriginal[];
+    cardHeight?: number;
+    cardWidth?: number;
+    backgroundColor?: string;
+}
+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;IACnB,eAAe,CAAC,EAAG,MAAM,CAAC;CAC3B;AAuBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuLvD,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.4",
+  "version": "2.1.6",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/app.tsx

@@ -1,39 +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" }}
-            priceContainerBlur={90}
-            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/CarouselCardStack/CarouselCardStack.tsx

@@ -0,0 +1,306 @@
+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;
+  backgroundColor? : string;
+}
+
+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,
+  backgroundColor = "transparent"
+}) => {
+  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, backgroundColor: backgroundColor}]}>
+      <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: "transparent",
+  },
+  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";