related-ui-components 1.1.6

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

@@ -0,0 +1,188 @@
+"use strict";
+
+import React, { useState } from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import Card from "../Card.js";
+import CardHeader from "../CardHeader.js";
+import CardContent from "../CardContent.js";
+import { useTheme } from "../../../theme/ThemeContext.js";
+import CardFooter from "../CardFooter.js";
+import ProgressBar from "../../ProgressBar/ProgressBar.js";
+import LockOverlay from "../../LockOverlay/LockOverlay.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DealCardWithBackgroundImage = ({
+  backgroundImage,
+  onPress,
+  label,
+  labelContainerStyle,
+  labelStyle,
+  actionIconDefault,
+  actionIconActive,
+  onActionPress,
+  innerCardStyle,
+  dealDescription,
+  dealDescriptionStyle,
+  dealPrice,
+  dealPriceStyle,
+  dealProviderName,
+  dealProviderNameStyle,
+  progressBar,
+  progressBarText,
+  progressBarTextPosition,
+  progressBarTextAlign,
+  progressValue,
+  progressHeight,
+  progressWidth,
+  remainingProgressColor,
+  progressColor,
+  innerCardVariant = "nested",
+  style,
+  width = 300,
+  isRTL = false,
+  overlayVisible = false,
+  overlayCover = "background"
+}) => {
+  const theme = useTheme();
+  const [isActive, setIsActive] = useState(false);
+  const handleActionPress = () => {
+    if (!actionIconActive) return;
+    setIsActive(!isActive);
+    if (onActionPress) {
+      onActionPress(!isActive);
+    }
+  };
+  const labelContent = label && /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: theme.surface,
+      paddingVertical: 5,
+      paddingHorizontal: 8,
+      borderRadius: 10
+    }, labelContainerStyle],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [{
+        color: theme.onSurface
+      }, labelStyle],
+      children: label
+    })
+  });
+  const actionContent = /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: handleActionPress,
+    children: isActive ? actionIconActive : actionIconDefault
+  });
+  const headerLeft = isRTL ? actionContent : labelContent;
+  const headerRight = isRTL ? labelContent : actionContent;
+  const mainCardBorderRadius = style?.borderRadius || 8;
+  const innerCardBorderRadius = 30;
+  const getVariantStyle = () => {
+    if (innerCardVariant === "floating") {
+      return {
+        position: "absolute",
+        bottom: -30,
+        width: width,
+        marginHorizontal: 0,
+        marginVertical: 0,
+        paddingBottom: progressBar || dealPrice ? 0 : 20,
+        borderRadius: 20
+      };
+    }
+    return {};
+  };
+  const computedInnerCardStyle = [{
+    borderRadius: innerCardBorderRadius
+  }, getVariantStyle(), innerCardStyle];
+  const finalInnerBorderRadius = innerCardStyle?.borderRadius || (innerCardVariant === "floating" ? 20 : innerCardBorderRadius) || innerCardBorderRadius;
+  const overlayStyle = {
+    borderRadius: mainCardBorderRadius,
+    borderBottomLeftRadius: innerCardVariant === "floating" ? finalInnerBorderRadius : mainCardBorderRadius,
+    borderBottomRightRadius: innerCardVariant === "floating" ? finalInnerBorderRadius : mainCardBorderRadius,
+    bottom: innerCardVariant === "floating" ? -30 : 0,
+    overflow: "hidden"
+  };
+  return /*#__PURE__*/_jsxs(Card, {
+    onPress: onPress,
+    style: [{
+      height: 300,
+      position: "relative",
+      borderRadius: mainCardBorderRadius
+    }, style, {
+      width
+    }],
+    backgroundImage: {
+      source: backgroundImage,
+      resizeMode: "cover"
+    },
+    children: [/*#__PURE__*/_jsx(LockOverlay, {
+      visible: overlayVisible,
+      containerStyle: overlayStyle,
+      contentVerticalAlign: overlayCover == "background" ? "top" : "center"
+    }), /*#__PURE__*/_jsx(CardHeader, {
+      left: headerLeft,
+      right: headerRight,
+      style: {
+        alignItems: "center"
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        justifyContent: "flex-end",
+        zIndex: overlayCover == "background" ? 1000 : 0
+      },
+      children: /*#__PURE__*/_jsx(CardContent, {
+        style: {
+          padding: 0
+        },
+        children: /*#__PURE__*/_jsxs(Card, {
+          backgroundColor: theme.surface,
+          variant: "filled",
+          style: computedInnerCardStyle,
+          children: [/*#__PURE__*/_jsx(CardHeader, {
+            title: dealProviderName,
+            titleColor: theme.text,
+            titleStyle: [{
+              fontSize: 18,
+              textAlign: isRTL ? "right" : "left"
+            }, dealProviderNameStyle],
+            subtitle: dealDescription,
+            subtitleColor: theme.helper,
+            subtitleStyle: [{
+              textAlign: isRTL ? "right" : "left"
+            }, dealDescriptionStyle]
+          }), (progressBar || dealPrice) && /*#__PURE__*/_jsxs(CardFooter, {
+            justifyContent: "space-between",
+            style: {
+              flexDirection: isRTL ? "row-reverse" : "row"
+            },
+            children: [progressBar && /*#__PURE__*/_jsx(ProgressBar, {
+              progress: progressValue,
+              remainingColor: remainingProgressColor,
+              progressColor: progressColor,
+              height: progressHeight || 14,
+              width: progressWidth || width * 0.5,
+              textPosition: progressBarTextPosition,
+              text: progressBarText,
+              showText: progressBarText != null,
+              textAlign: isRTL && progressBarTextAlign == null ? "right" : progressBarTextAlign,
+              textStyle: {
+                fontSize: 10,
+                color: theme.text
+              },
+              isRTL: isRTL
+            }), /*#__PURE__*/_jsx(View, {
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [{
+                  fontSize: 16,
+                  color: theme.primary,
+                  fontWeight: "bold",
+                  textAlign: isRTL ? "left" : "right"
+                }, dealPriceStyle],
+                children: dealPrice
+              })
+            })]
+          })]
+        })
+      })
+    })]
+  });
+};
+export default DealCardWithBackgroundImage;
+//# sourceMappingURL=DealCardWithBackgroundImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","Text","TouchableOpacity","Card","CardHeader","CardContent","useTheme","CardFooter","ProgressBar","LockOverlay","jsx","_jsx","jsxs","_jsxs","DealCardWithBackgroundImage","backgroundImage","onPress","label","labelContainerStyle","labelStyle","actionIconDefault","actionIconActive","onActionPress","innerCardStyle","dealDescription","dealDescriptionStyle","dealPrice","dealPriceStyle","dealProviderName","dealProviderNameStyle","progressBar","progressBarText","progressBarTextPosition","progressBarTextAlign","progressValue","progressHeight","progressWidth","remainingProgressColor","progressColor","innerCardVariant","style","width","isRTL","overlayVisible","overlayCover","theme","isActive","setIsActive","handleActionPress","labelContent","backgroundColor","surface","paddingVertical","paddingHorizontal","borderRadius","children","color","onSurface","actionContent","headerLeft","headerRight","mainCardBorderRadius","innerCardBorderRadius","getVariantStyle","position","bottom","marginHorizontal","marginVertical","paddingBottom","computedInnerCardStyle","finalInnerBorderRadius","overlayStyle","borderBottomLeftRadius","borderBottomRightRadius","overflow","height","source","resizeMode","visible","containerStyle","contentVerticalAlign","left","right","alignItems","flex","justifyContent","zIndex","padding","variant","title","titleColor","text","titleStyle","fontSize","textAlign","subtitle","subtitleColor","helper","subtitleStyle","flexDirection","progress","remainingColor","textPosition","showText","textStyle","primary","fontWeight"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/DealCardWithBackgroundImage.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAIEC,IAAI,EACJC,IAAI,EAEJC,gBAAgB,QACX,cAAc;AACrB,OAAOC,IAAI,MAAM,YAAS;AAC1B,OAAOC,UAAU,MAAM,kBAAe;AACtC,OAAOC,WAAW,MAAM,mBAAgB;AACxC,SAASC,QAAQ,QAAQ,gCAA6B;AACtD,OAAOC,UAAU,MAAM,kBAAe;AACtC,OAAOC,WAAW,MAGX,kCAA+B;AACtC,OAAOC,WAAW,MAAM,kCAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmCxD,MAAMC,2BAAoD,GAAGA,CAAC;EAC5DC,eAAe;EACfC,OAAO;EACPC,KAAK;EACLC,mBAAmB;EACnBC,UAAU;EACVC,iBAAiB;EACjBC,gBAAgB;EAChBC,aAAa;EACbC,cAAc;EACdC,eAAe;EACfC,oBAAoB;EACpBC,SAAS;EACTC,cAAc;EACdC,gBAAgB;EAChBC,qBAAqB;EACrBC,WAAW;EACXC,eAAe;EACfC,uBAAuB;EACvBC,oBAAoB;EACpBC,aAAa;EACbC,cAAc;EACdC,aAAa;EACbC,sBAAsB;EACtBC,aAAa;EACbC,gBAAgB,GAAG,QAAQ;EAC3BC,KAAK;EACLC,KAAK,GAAG,GAAG;EACXC,KAAK,GAAG,KAAK;EACbC,cAAc,GAAG,KAAK;EACtBC,YAAY,GAAG;AACjB,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGvC,QAAQ,CAAC,CAAC;EAExB,MAAM,CAACwC,QAAQ,EAAEC,WAAW,CAAC,GAAGhD,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAMiD,iBAAiB,GAAGA,CAAA,KAAM;IAC9B,IAAI,CAAC3B,gBAAgB,EAAE;IACvB0B,WAAW,CAAC,CAACD,QAAQ,CAAC;IACtB,IAAIxB,aAAa,EAAE;MACjBA,aAAa,CAAC,CAACwB,QAAQ,CAAC;IAC1B;EACF,CAAC;EAED,MAAMG,YAAY,GAAGhC,KAAK,iBACxBN,IAAA,CAACX,IAAI;IACHwC,KAAK,EAAE,CACL;MACEU,eAAe,EAAEL,KAAK,CAACM,OAAO;MAC9BC,eAAe,EAAE,CAAC;MAClBC,iBAAiB,EAAE,CAAC;MACpBC,YAAY,EAAE;IAChB,CAAC,EACDpC,mBAAmB,CACnB;IAAAqC,QAAA,eAEF5C,IAAA,CAACV,IAAI;MAACuC,KAAK,EAAE,CAAC;QAAEgB,KAAK,EAAEX,KAAK,CAACY;MAAU,CAAC,EAAEtC,UAAU,CAAE;MAAAoC,QAAA,EAAEtC;IAAK,CAAO;EAAC,CACjE,CACP;EAED,MAAMyC,aAAa,gBACjB/C,IAAA,CAACT,gBAAgB;IAACc,OAAO,EAAEgC,iBAAkB;IAAAO,QAAA,EAC1CT,QAAQ,GAAGzB,gBAAgB,GAAGD;EAAiB,CAChC,CACnB;EAED,MAAMuC,UAAU,GAAGjB,KAAK,GAAGgB,aAAa,GAAGT,YAAY;EACvD,MAAMW,WAAW,GAAGlB,KAAK,GAAGO,YAAY,GAAGS,aAAa;EAExD,MAAMG,oBAAoB,GAAGrB,KAAK,EAAEc,YAAY,IAAI,CAAC;EAErD,MAAMQ,qBAAqB,GAAG,EAAE;EAChC,MAAMC,eAAe,GAAGA,CAAA,KAA4B;IAClD,IAAIxB,gBAAgB,KAAK,UAAU,EAAE;MACnC,OAAO;QACLyB,QAAQ,EAAE,UAAU;QACpBC,MAAM,EAAE,CAAC,EAAE;QACXxB,KAAK,EAAEA,KAAK;QACZyB,gBAAgB,EAAE,CAAC;QACnBC,cAAc,EAAE,CAAC;QACjBC,aAAa,EAAEtC,WAAW,IAAIJ,SAAS,GAAG,CAAC,GAAG,EAAE;QAChD4B,YAAY,EAAE;MAChB,CAAC;IACH;IACA,OAAO,CAAC,CAAC;EACX,CAAC;EAED,MAAMe,sBAAsB,GAAG,CAC7B;IACEf,YAAY,EAAEQ;EAChB,CAAC,EACDC,eAAe,CAAC,CAAC,EACjBxC,cAAc,CACf;EACD,MAAM+C,sBAAsB,GACzB/C,cAAc,EAAE+B,YAAY,KAC5Bf,gBAAgB,KAAK,UAAU,GAAG,EAAE,GAAGuB,qBAAqB,CAAC,IAC9DA,qBAAqB;EAEvB,MAAMS,YAAuB,GAAG;IAC9BjB,YAAY,EAAEO,oBAAoB;IAClCW,sBAAsB,EACpBjC,gBAAgB,KAAK,UAAU,GAC3B+B,sBAAsB,GACtBT,oBAAoB;IAC1BY,uBAAuB,EACrBlC,gBAAgB,KAAK,UAAU,GAC3B+B,sBAAsB,GACtBT,oBAAoB;IAC1BI,MAAM,EAAE1B,gBAAgB,KAAK,UAAU,GAAG,CAAC,EAAE,GAAG,CAAC;IACjDmC,QAAQ,EAAE;EACZ,CAAC;EAED,oBACE7D,KAAA,CAACV,IAAI;IACHa,OAAO,EAAEA,OAAQ;IACjBwB,KAAK,EAAE,CACL;MACEmC,MAAM,EAAE,GAAG;MACXX,QAAQ,EAAE,UAAU;MACpBV,YAAY,EAAEO;IAChB,CAAC,EACDrB,KAAK,EACL;MAAEC;IAAM,CAAC,CACT;IACF1B,eAAe,EAAE;MACf6D,MAAM,EAAE7D,eAAe;MACvB8D,UAAU,EAAE;IACd,CAAE;IAAAtB,QAAA,gBAEF5C,IAAA,CAACF,WAAW;MACVqE,OAAO,EAAEnC,cAAe;MACxBoC,cAAc,EAAER,YAAa;MAC7BS,oBAAoB,EAAEpC,YAAY,IAAI,YAAY,GAAG,KAAK,GAAG;IAAS,CACvE,CAAC,eACFjC,IAAA,CAACP,UAAU;MACT6E,IAAI,EAAEtB,UAAW;MACjBuB,KAAK,EAAEtB,WAAY;MACnBpB,KAAK,EAAE;QAAE2C,UAAU,EAAE;MAAS;IAAE,CACjC,CAAC,eAEFxE,IAAA,CAACX,IAAI;MACHwC,KAAK,EAAE;QACL4C,IAAI,EAAE,CAAC;QACPC,cAAc,EAAE,UAAU;QAC1BC,MAAM,EAAE1C,YAAY,IAAI,YAAY,GAAG,IAAI,GAAG;MAChD,CAAE;MAAAW,QAAA,eAEF5C,IAAA,CAACN,WAAW;QAACmC,KAAK,EAAE;UAAE+C,OAAO,EAAE;QAAE,CAAE;QAAAhC,QAAA,eACjC1C,KAAA,CAACV,IAAI;UACH+C,eAAe,EAAEL,KAAK,CAACM,OAAQ;UAC/BqC,OAAO,EAAC,QAAQ;UAChBhD,KAAK,EAAE6B,sBAAuB;UAAAd,QAAA,gBAE9B5C,IAAA,CAACP,UAAU;YACTqF,KAAK,EAAE7D,gBAAiB;YACxB8D,UAAU,EAAE7C,KAAK,CAAC8C,IAAK;YACvBC,UAAU,EAAE,CACV;cAAEC,QAAQ,EAAE,EAAE;cAAEC,SAAS,EAAEpD,KAAK,GAAG,OAAO,GAAG;YAAO,CAAC,EACrDb,qBAAqB,CACrB;YACFkE,QAAQ,EAAEvE,eAAgB;YAC1BwE,aAAa,EAAEnD,KAAK,CAACoD,MAAO;YAC5BC,aAAa,EAAE,CACb;cAAEJ,SAAS,EAAEpD,KAAK,GAAG,OAAO,GAAG;YAAO,CAAC,EACvCjB,oBAAoB;UACpB,CACH,CAAC,EACD,CAACK,WAAW,IAAIJ,SAAS,kBACxBb,KAAA,CAACN,UAAU;YACT8E,cAAc,EAAC,eAAe;YAC9B7C,KAAK,EAAE;cACL2D,aAAa,EAAEzD,KAAK,GAAG,aAAa,GAAG;YACzC,CAAE;YAAAa,QAAA,GAEDzB,WAAW,iBACVnB,IAAA,CAACH,WAAW;cACV4F,QAAQ,EAAElE,aAAc;cACxBmE,cAAc,EAAEhE,sBAAuB;cACvCC,aAAa,EAAEA,aAAc;cAC7BqC,MAAM,EAAExC,cAAc,IAAI,EAAG;cAC7BM,KAAK,EAAEL,aAAa,IAAIK,KAAK,GAAG,GAAI;cACpC6D,YAAY,EAAEtE,uBAAwB;cACtC2D,IAAI,EAAE5D,eAAgB;cACtBwE,QAAQ,EAAExE,eAAe,IAAI,IAAK;cAClC+D,SAAS,EACPpD,KAAK,IAAIT,oBAAoB,IAAI,IAAI,GACjC,OAAO,GACPA,oBACL;cACDuE,SAAS,EAAE;gBAAEX,QAAQ,EAAE,EAAE;gBAAErC,KAAK,EAAEX,KAAK,CAAC8C;cAAK,CAAE;cAC/CjD,KAAK,EAAEA;YAAM,CACd,CACF,eACD/B,IAAA,CAACX,IAAI;cAAAuD,QAAA,eACH5C,IAAA,CAACV,IAAI;gBACHuC,KAAK,EAAE,CACL;kBACEqD,QAAQ,EAAE,EAAE;kBACZrC,KAAK,EAAEX,KAAK,CAAC4D,OAAO;kBACpBC,UAAU,EAAE,MAAM;kBAClBZ,SAAS,EAAEpD,KAAK,GAAG,MAAM,GAAG;gBAC9B,CAAC,EACDf,cAAc,CACd;gBAAA4B,QAAA,EAED7B;cAAS,CACN;YAAC,CACH,CAAC;UAAA,CACG,CACb;QAAA,CACG;MAAC,CACI;IAAC,CACV,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,eAAeZ,2BAA2B","ignoreList":[]}

package/lib/module/components/Card/templates/README.md

@@ -0,0 +1,233 @@
+# Card Template Components
+
+List of pre-defined template common based on app designs, the templates use the internal Card related components
+
+## 1. Simple Trending Card
+
+![With icon](../../../assets/components/SimpleTrendingCard.png)
+![Without icon](../../../assets/components/SimpleTrendingCardV2.png)
+
+## SimpleTrendingCard Documentation
+
+The `SimpleTrendingCard` is a customizable card component designed for displaying trending content with an optional icon. It leverages the base `Card` component and provides a sleek interface with background image support.
+
+### Usage
+
+```tsx
+import SimpleTrendingCard from "@/components/Card/templates/SimpleTrendingCard";
+import { Image } from "react-native";
+
+const MyComponent = () => {
+  return (
+      <SimpleTrendingCard
+        backgroundImage={require("@/assets/images/pb.jpg")}
+        style={{ borderRadius: 50 }}
+        icon={
+          <Image
+            source={require("@/assets/images/insta.webp")}
+            style={{ width: 36, height: 36 }} // Adjust size as needed
+            resizeMode="contain"
+          />
+        }
+        onPress={()=>Alert.alert("Pressed")}
+        iconPosition="left"
+      />
+  );
+};
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the card |
+| `icon` | `React.ReactNode` | `undefined` | Optional icon to display in the card header |
+| `iconPosition` | `"left" \| "right"` | `"left"` | Position of the icon in the header |
+| `shadowEffect` | `true \| false` | `true` | Shadow Effect displayed or not |
+| `shadowOpacity` | `number` | `0.5` | Shadow Effect Opacity |
+| `onPress` | `() => void` | `undefined` | Function to execute when the card is pressed |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles to apply to the card |
+
+### Features
+
+- **Background Image**: The card displays a full-size background image with "cover" resize mode
+- **Customizable Icon**: Optional icon that can be positioned on either the left or right side of the card header
+- **Responsive Sizing**: Default dimensions of 250×300, which can be overridden with custom styles
+- **Interactive**: Built-in touch handling through the `onPress` prop
+
+### Related Components
+
+- `Card`: The base component for all card layouts
+- `CardHeader`: Handles the positioning of elements in the card header
+
+# DealCardWithBackgroundImage
+
+![DealCardWithBackgroundImage Example](../../../assets/components/DealCard-floating.png)
+![DealCardWithBackgroundImage Example](../../../assets/components/DealCard-nested.png)
+
+
+# DealCardWithBackgroundImage Documentation
+
+The `DealCardWithBackgroundImage` is a versatile card component designed for displaying deals, offers, or promotions with rich customization options. It features a background image, customizable labels, action icons, inner card content, and optional progress bar. As well as choosing between a floating or nested inner card.
+
+## Usage
+
+```tsx
+import DealCardWithBackgroundImage from "@/components/Card/templates/DealCardWithBackgroundImage";
+import { Image } from "react-native";
+import { HeartIcon, HeartFilledIcon } from "@/components/Icons";
+
+const MyComponent = () => {
+  return (
+    <DealCardWithBackgroundImage
+    width={300}
+    backgroundImage={require("@/assets/images/pb.jpg")}
+    label="Discount"
+    actionIconDefault={
+      <Ionicons name="heart-outline" size={20} color={theme.primary} />
+    }
+    actionIconActive={
+      <Ionicons name="heart" size={20} color={theme.secondary} />
+    }
+    innerCardVariant="floating"
+    onActionPress={(active) => console.log(active)}
+    dealProviderName="Pull&Bear"
+    dealDescription="25% discount on all items"
+    progressBar={true}
+    progressBarText="500 points to Redeem!"
+    progressBarTextPosition="below"
+    remainingProgressColor="rgba(0, 0, 0, 0.4)"
+    dealPrice="1,000 KP"
+  />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `backgroundImage` | `ImageRequireSource` | Required | The background image to display in the card |
+| `label` | `string` | `undefined` | Optional label text to display in the upper left corner |
+| `labelStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the label text |
+| `labelContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Custom styles for the label container |
+| `actionIconDefault` | `React.ReactNode` | `undefined` | Icon to display when action is inactive (e.g., unfavorited) |
+| `actionIconActive` | `React.ReactNode` | `undefined` | Icon to display when action is active (e.g., favorited) |
+| `onActionPress` | `(active: boolean) => void` | `undefined` | Function to execute when the action icon is pressed |
+| `innerCardStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the inner card |
+| `innerCardVariant` | `"floating" \| "nested"` | `"nested"` | The style variant for the inner card |
+| `dealDescription` | `string` | `undefined` | Description text for the deal |
+| `dealDescriptionStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the deal description |
+| `dealProviderName` | `string` | `undefined` | Name of the deal provider |
+| `dealProviderNameStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the provider name |
+| `dealPrice` | `string` | `undefined` | Price text for the deal |
+| `dealPriceStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the price text |
+| `progressBar` | `boolean` | `undefined` | Whether to show a progress bar |
+| `progressBarText` | `string` | `undefined` | Text to display with the progress bar |
+| `progressBarTextPosition` | `ProgressBarTextPosition` | `undefined` | Position of the progress bar text |
+| `progressBarTextAlign` | `ProgressBarTextAlign` | `undefined` | Alignment of the progress bar text |
+| `progressColor` | `string` | `undefined` | Color of the progress indicator |
+| `progressWidth` | `number` | `undefined` | Width of the progress bar |
+| `progressHeight` | `number` | `undefined` | Height of the progress bar |
+| `remainingProgressColor` | `string` | `undefined` | Color of the unfilled portion of the progress bar |
+| `progressValue` | `number` | `undefined` | Value between 0 and 1 representing progress |
+| `onPress` | `() => void` | `undefined` | Function to execute when the card is pressed |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles to apply to the card |
+| `width` | `number` | `300` | Width of the card in pixels |
+| `isRTL` | `boolean` | `false` | Whether to render the component in right-to-left mode for RTL languages |
+| `overlayVisible` | `boolean` | `false` | Whether to show a lock overlay on the card |
+| `overlayCover` | `"all" \| "background"` | `"background"` | Controls which part of the card the overlay covers |
+
+## Inner Card Variants
+
+- **Nested**: The inner card sits within the main card's boundaries
+- **Floating**: The inner card extends beyond the bottom edge of the main card, creating a floating effect
+
+## Related Components
+
+- `Card`: The base component for all card layouts
+- `CardHeader`: Handles the positioning of elements in the card header
+- `CardContent`: Contains the main content of the card
+- `CardFooter`: Displays the progress bar and price at the bottom of the inner card
+- `ProgressBar`: Shows completion or availability status visually
+- `LockOverlay`: Displays a lock overlay when the `overlayVisible` prop is true
+
+# DealCard
+
+![Horizontal variant](../../../assets/components/DealCard-Horizontal.png)
+![Vertical variant](../../../assets/components/DealCard-Vertical.png)
+
+# DealCard Documentation
+
+The `DealCard` is a versatile card component designed for displaying deals or offers in either horizontal or vertical orientation. It features an image, customizable labels, descriptive text, pricing information, and an optional progress bar.
+
+## Usage
+
+```tsx
+import DealCard from "@/components/Card/templates/DealCard";
+import { Alert } from "react-native";
+
+const MyComponent = () => {
+  return (
+      <DealCard
+        imageSource={require("@/assets/images/pb.jpg")}
+        // width={275}
+        variant="horizontal"
+        label="Discount"
+        // labelStyle={{ color: "#000" }}
+        dealProviderName="Pull&Bear"
+        dealDescription="25% discount on all items"
+        // dealDescriptionStyle={{ color: "black" }}
+        progressBar={true}
+        progressBarText="500 points to Redeem!"
+        progressBarTextPosition="below"
+        // progressColor="black"
+        remainingProgressColor="rgba(255, 255, 255, 0.4)"
+        dealPrice="1,000 KP"
+      />
+  );
+};
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageSource` | `ImageRequireSource` | Required | The image to display in the card |
+| `variant` | `"vertical" \| "horizontal"` | `"horizontal"` | Layout orientation of the card |
+| `label` | `string` | `undefined` | Optional label text to display |
+| `labelStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the label text |
+| `labelContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Custom styles for the label container |
+| `dealDescription` | `string` | `undefined` | Description text for the deal |
+| `dealDescriptionStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the deal description |
+| `dealProviderName` | `string` | `undefined` | Name of the deal provider |
+| `dealProviderNameStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the provider name |
+| `dealPrice` | `string` | `undefined` | Price text for the deal |
+| `dealPriceStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the price text |
+| `progressBar` | `boolean` | `undefined` | Whether to show a progress bar |
+| `progressBarText` | `string` | `undefined` | Text to display with the progress bar |
+| `progressBarTextPosition` | `ProgressBarTextPosition` | `undefined` | Position of the progress bar text |
+| `progressBarTextAlign` | `ProgressBarTextAlign` | `undefined` | Alignment of the progress bar text |
+| `progressColor` | `string` | `undefined` | Color of the progress indicator |
+| `progressWidth` | `number` | `undefined` | Width of the progress bar |
+| `progressHeight` | `number` | `undefined` | Height of the progress bar |
+| `remainingProgressColor` | `string` | `undefined` | Color of the unfilled portion of the progress bar |
+| `progressValue` | `number` | `undefined` | Value between 0 and 1 representing progress |
+| `onPress` | `() => void` | `undefined` | Function to execute when the card is pressed |
+| `style` | `StyleProp<ViewStyle>` | `undefined` | Additional styles to apply to the card |
+| `width` | `number \| string` | `undefined` | Width of the card in pixels or as a percentage |
+| `isRTL` | `boolean` | `false` | Whether to render the component in right-to-left mode for RTL languages |
+| `overlayVisible` | `boolean` | `false` | Whether to show a lock overlay on top of the image |
+
+## Layout Variants
+
+- **Horizontal**: Image appears on the left side with content to the right
+- **Vertical**: Image appears on top with content below
+
+## Related Components
+
+- `Card`: The base component used for the overall container
+- `CardHeader`: Displays the provider name and deal description
+- `CardFooter`: Contains the label and progress bar
+- `ProgressBar`: Shows completion or availability status visually
+- `LockOverlay`: Displays a lock overlay when the `overlayVisible` prop is true

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

@@ -0,0 +1,54 @@
+"use strict";
+
+import React from "react";
+import Card from "../Card.js";
+import CardHeader from "../CardHeader.js";
+import { LinearGradient } from "expo-linear-gradient";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SimpleTrendingCard = ({
+  backgroundImage,
+  onPress,
+  icon,
+  iconPosition = "left",
+  shadowEffect = true,
+  shadowOpacity = 0.5,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(Card, {
+    onPress: onPress,
+    style: [{
+      width: 250,
+      height: 300
+    }, style],
+    backgroundImage: {
+      source: backgroundImage,
+      resizeMode: "cover"
+    },
+    children: [shadowEffect && /*#__PURE__*/_jsx(LinearGradient, {
+      colors: [`rgba(0, 0, 0, ${shadowOpacity})`, "transparent"],
+      start: {
+        x: 0.5,
+        y: 1
+      },
+      end: {
+        x: 0.5,
+        y: 0
+      },
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }
+    }), icon && /*#__PURE__*/_jsx(CardHeader, {
+      left: iconPosition === "left" ? icon : null,
+      right: iconPosition === "right" ? icon : null,
+      style: {
+        alignItems: "center"
+      }
+    })]
+  });
+};
+export default SimpleTrendingCard;
+//# sourceMappingURL=SimpleTrendingCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Card","CardHeader","LinearGradient","jsx","_jsx","jsxs","_jsxs","SimpleTrendingCard","backgroundImage","onPress","icon","iconPosition","shadowEffect","shadowOpacity","style","width","height","source","resizeMode","children","colors","start","x","y","end","position","left","right","top","bottom","alignItems"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/SimpleTrendingCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,IAAI,MAAM,YAAS;AAC1B,OAAOC,UAAU,MAAM,kBAAe;AACtC,SAASC,cAAc,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAWtD,MAAMC,kBAAqD,GAAGA,CAAC;EAC7DC,eAAe;EACfC,OAAO;EACPC,IAAI;EACJC,YAAY,GAAG,MAAM;EACrBC,YAAY,GAAG,IAAI;EACnBC,aAAa,GAAG,GAAG;EACnBC;AACF,CAAC,KAAK;EACJ,oBACER,KAAA,CAACN,IAAI;IACHS,OAAO,EAAEA,OAAQ;IACjBK,KAAK,EAAE,CAAC;MAAEC,KAAK,EAAE,GAAG;MAAEC,MAAM,EAAE;IAAI,CAAC,EAAEF,KAAK,CAAE;IAC5CN,eAAe,EAAE;MACfS,MAAM,EAAET,eAAe;MACvBU,UAAU,EAAE;IACd,CAAE;IAAAC,QAAA,GAEDP,YAAY,iBACXR,IAAA,CAACF,cAAc;MACbkB,MAAM,EAAE,CAAC,iBAAiBP,aAAa,GAAG,EAAE,aAAa,CAAE;MAC3DQ,KAAK,EAAE;QAAEC,CAAC,EAAE,GAAG;QAAEC,CAAC,EAAE;MAAE,CAAE;MACxBC,GAAG,EAAE;QAAEF,CAAC,EAAE,GAAG;QAAEC,CAAC,EAAE;MAAE,CAAE;MACtBT,KAAK,EAAE;QAAEW,QAAQ,EAAE,UAAU;QAAEC,IAAI,EAAE,CAAC;QAAEC,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE;IAAE,CACvE,CACF,EAEAnB,IAAI,iBACHN,IAAA,CAACH,UAAU;MACTyB,IAAI,EAAEf,YAAY,KAAK,MAAM,GAAGD,IAAI,GAAG,IAAK;MAC5CiB,KAAK,EAAEhB,YAAY,KAAK,OAAO,GAAGD,IAAI,GAAG,IAAK;MAC9CI,KAAK,EAAE;QAAEgB,UAAU,EAAE;MAAS;IAAE,CACjC,CACF;EAAA,CACG,CAAC;AAEX,CAAC;AAED,eAAevB,kBAAkB","ignoreList":[]}

package/lib/module/components/Card/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/Card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Card/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/CloseIcon/CloseIcon.js

@@ -0,0 +1,63 @@
+"use strict";
+
+// components/CloseIcon.tsx
+import React from "react";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../../theme/index.js"; // Assuming your theme setup is here
+import { jsx as _jsx } from "react/jsx-runtime";
+const CloseIcon = ({
+  onPress,
+  show = true,
+  customIcon,
+  variant = "nested",
+  containerStyle,
+  iconStyle,
+  color: colorProp,
+  // Renamed to avoid conflict with theme color
+  size = 28,
+  isRTL = false
+}) => {
+  const theme = useTheme();
+  const styles = themedStyles(theme);
+
+  // Use prop color if provided, otherwise use theme text color
+  const iconColor = colorProp ?? theme.text;
+
+  // Calculate default position based on variant and RTL
+  const defaultPosition = variant === "nested" ? {
+    top: 10,
+    [isRTL ? "left" : "right"]: 10
+  } : {
+    top: -12,
+    [isRTL ? "left" : "right"]: -12
+  };
+  if (!show || !onPress) {
+    return null; // Don't render if not shown or no onPress handler
+  }
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: [styles.container, defaultPosition, containerStyle],
+    onPress: onPress,
+    hitSlop: {
+      top: 10,
+      right: 10,
+      bottom: 10,
+      left: 10
+    } // Improve touch area
+    ,
+    children: customIcon || /*#__PURE__*/_jsx(Ionicons, {
+      name: "close",
+      size: size,
+      color: iconColor,
+      style: iconStyle
+    })
+  });
+};
+const themedStyles = theme => StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 10 // Ensure it's above other elements
+  }
+});
+export default CloseIcon;
+//# sourceMappingURL=CloseIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","TouchableOpacity","StyleSheet","Ionicons","useTheme","jsx","_jsx","CloseIcon","onPress","show","customIcon","variant","containerStyle","iconStyle","color","colorProp","size","isRTL","theme","styles","themedStyles","iconColor","text","defaultPosition","top","style","container","hitSlop","right","bottom","left","children","name","create","position","zIndex"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CloseIcon/CloseIcon.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,gBAAgB,EAChBC,UAAU,QAGL,cAAc;AACrB,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAmB,sBAAa,CAAC,CAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAcnD,MAAMC,SAAmC,GAAGA,CAAC;EAC3CC,OAAO;EACPC,IAAI,GAAG,IAAI;EACXC,UAAU;EACVC,OAAO,GAAG,QAAQ;EAClBC,cAAc;EACdC,SAAS;EACTC,KAAK,EAAEC,SAAS;EAAE;EAClBC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG;AACV,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGd,QAAQ,CAAC,CAAC;EACxB,MAAMe,MAAM,GAAGC,YAAY,CAACF,KAAK,CAAC;;EAElC;EACA,MAAMG,SAAS,GAAGN,SAAS,IAAIG,KAAK,CAACI,IAAI;;EAEzC;EACA,MAAMC,eAAe,GACnBZ,OAAO,KAAK,QAAQ,GAChB;IAAEa,GAAG,EAAE,EAAE;IAAE,CAACP,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG;EAAG,CAAC,GAC3C;IAAEO,GAAG,EAAE,CAAC,EAAE;IAAE,CAACP,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC;EAAG,CAAC;EAEnD,IAAI,CAACR,IAAI,IAAI,CAACD,OAAO,EAAE;IACrB,OAAO,IAAI,CAAC,CAAC;EACf;EAEA,oBACEF,IAAA,CAACL,gBAAgB;IACfwB,KAAK,EAAE,CAACN,MAAM,CAACO,SAAS,EAAEH,eAAe,EAAEX,cAAc,CAAE;IAC3DJ,OAAO,EAAEA,OAAQ;IACjBmB,OAAO,EAAE;MAAEH,GAAG,EAAE,EAAE;MAAEI,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,IAAI,EAAE;IAAG,CAAE,CAAC;IAAA;IAAAC,QAAA,EAEtDrB,UAAU,iBACTJ,IAAA,CAACH,QAAQ;MACP6B,IAAI,EAAC,OAAO;MACZhB,IAAI,EAAEA,IAAK;MACXF,KAAK,EAAEO,SAAU;MACjBI,KAAK,EAAEZ;IAAU,CAClB;EACF,CACe,CAAC;AAEvB,CAAC;AAED,MAAMO,YAAY,GAAIF,KAAgB,IACpChB,UAAU,CAAC+B,MAAM,CAAC;EAChBP,SAAS,EAAE;IACTQ,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE,EAAE,CAAE;EACd;AACF,CAAC,CAAC;AAEJ,eAAe5B,SAAS","ignoreList":[]}

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

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

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

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