related-ui-components 1.1.6

package/lib/commonjs/components/Card/templates/DealCard.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _Card = _interopRequireDefault(require("../Card.js"));
+var _ThemeContext = require("../../../theme/ThemeContext.js");
+var _ProgressBar = _interopRequireDefault(require("../../ProgressBar/ProgressBar.js"));
+var _CardHeader = _interopRequireDefault(require("../CardHeader.js"));
+var _CardFooter = _interopRequireDefault(require("../CardFooter.js"));
+var _LockOverlay = _interopRequireDefault(require("../../LockOverlay/LockOverlay.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DealCard = ({
+  imageSource,
+  onPress,
+  label,
+  labelContainerStyle,
+  labelStyle,
+  dealDescription,
+  dealDescriptionStyle,
+  dealPrice,
+  dealPriceStyle,
+  dealProviderName,
+  dealProviderNameStyle,
+  progressBar,
+  progressBarText,
+  progressBarTextPosition,
+  progressBarTextAlign,
+  progressValue,
+  progressHeight,
+  progressWidth,
+  remainingProgressColor,
+  progressColor,
+  style,
+  width,
+  variant = "horizontal",
+  isRTL = false,
+  overlayVisible = false
+}) => {
+  const theme = (0, _ThemeContext.useTheme)();
+  const {
+    width: screenWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const isVertical = variant === "vertical";
+  const imageSize = Math.min(110, 110);
+  const cardPadding = 12;
+  const fontSize = screenWidth < 360 ? 14 : 16;
+  const calculatedProgressWidth = progressWidth || (typeof width === "number" ? width * 0.4 : screenWidth * 0.3);
+  const containerFlexDirection = isVertical ? "column" : isRTL ? "row-reverse" : "row";
+  const textContainerStyle = {
+    flex: isVertical ? 0 : 1,
+    ...(isVertical ? {
+      paddingLeft: cardPadding,
+      paddingRight: cardPadding
+    } : isRTL ? {
+      paddingLeft: cardPadding
+    } : {
+      paddingRight: cardPadding
+    })
+  };
+  const renderDealPrice = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [{
+        textAlign: "right",
+        fontSize: fontSize,
+        fontWeight: "bold",
+        marginBottom: 3,
+        color: theme.text
+      }, isRTL && {
+        textAlign: "left"
+      }, dealPriceStyle],
+      children: dealPrice
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+    onPress: onPress,
+    variant: "filled",
+    backgroundColor: theme.surface,
+    style: [{
+      borderRadius: 16,
+      overflow: "hidden",
+      alignItems: isVertical ? "stretch" : "center",
+      flexDirection: containerFlexDirection
+    }, typeof width === "number" && {
+      width
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: isVertical ? {
+        position: "relative",
+        marginHorizontal: cardPadding,
+        marginVertical: cardPadding,
+        borderRadius: 10,
+        overflow: "hidden"
+      } : {
+        position: "relative",
+        marginLeft: cardPadding,
+        marginRight: cardPadding,
+        borderRadius: 10,
+        overflow: "hidden"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: imageSource,
+        style: isVertical ? {
+          height: 200,
+          width: "100%",
+          borderRadius: 10,
+          alignSelf: "center",
+          resizeMode: "cover"
+        } : {
+          width: imageSize,
+          height: imageSize,
+          borderRadius: 10,
+          alignSelf: "center",
+          resizeMode: "cover"
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockOverlay.default, {
+        visible: overlayVisible
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textContainerStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
+        title: dealProviderName,
+        subtitle: dealDescription,
+        subtitleStyle: [isRTL && {
+          textAlign: "right"
+        }, dealDescriptionStyle],
+        titleStyle: [isRTL && {
+          textAlign: "right"
+        }, dealProviderNameStyle],
+        style: {
+          paddingLeft: 0,
+          paddingRight: 0
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          marginTop: 10,
+          marginBottom: 15
+        },
+        children: [renderDealPrice(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardFooter.default, {
+          justifyContent: "space-between",
+          style: [{
+            padding: 0
+          }, isRTL && {
+            flexDirection: "row-reverse"
+          }],
+          children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [{
+              backgroundColor: theme.primary,
+              paddingVertical: 5,
+              paddingHorizontal: 8,
+              borderRadius: 10
+            }, labelContainerStyle],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [{
+                color: theme.onPrimary,
+                fontSize: 14
+              }, labelStyle],
+              children: label
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            children: progressBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.default, {
+              progress: progressValue,
+              remainingColor: remainingProgressColor,
+              progressColor: progressColor,
+              height: progressHeight || (screenWidth < 360 ? 10 : 14),
+              width: calculatedProgressWidth,
+              textPosition: progressBarTextPosition,
+              text: progressBarText,
+              showText: progressBarText != null,
+              textAlign: isRTL && progressBarTextAlign == null ? "right" : progressBarTextAlign,
+              isRTL: isRTL,
+              textStyle: {
+                fontSize: screenWidth < 360 ? 8 : 10,
+                color: theme.text
+              }
+            })
+          })]
+        })]
+      })]
+    })]
+  });
+};
+var _default = exports.default = DealCard;
+//# sourceMappingURL=DealCard.js.map

package/lib/commonjs/components/Card/templates/DealCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Card","_ThemeContext","_ProgressBar","_CardHeader","_CardFooter","_LockOverlay","_jsxRuntime","e","__esModule","default","DealCard","imageSource","onPress","label","labelContainerStyle","labelStyle","dealDescription","dealDescriptionStyle","dealPrice","dealPriceStyle","dealProviderName","dealProviderNameStyle","progressBar","progressBarText","progressBarTextPosition","progressBarTextAlign","progressValue","progressHeight","progressWidth","remainingProgressColor","progressColor","style","width","variant","isRTL","overlayVisible","theme","useTheme","screenWidth","useWindowDimensions","isVertical","imageSize","Math","min","cardPadding","fontSize","calculatedProgressWidth","containerFlexDirection","textContainerStyle","flex","paddingLeft","paddingRight","renderDealPrice","jsx","Text","textAlign","fontWeight","marginBottom","color","text","children","jsxs","backgroundColor","surface","borderRadius","overflow","alignItems","flexDirection","View","position","marginHorizontal","marginVertical","marginLeft","marginRight","Image","source","height","alignSelf","resizeMode","visible","title","subtitle","subtitleStyle","titleStyle","marginTop","justifyContent","padding","primary","paddingVertical","paddingHorizontal","onPrimary","progress","remainingColor","textPosition","showText","textStyle","_default","exports"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/DealCard.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _Card = _interopRequireDefault(require("../Card.js"));
+var _CardHeader = _interopRequireDefault(require("../CardHeader.js"));
+var _CardContent = _interopRequireDefault(require("../CardContent.js"));
+var _ThemeContext = require("../../../theme/ThemeContext.js");
+var _CardFooter = _interopRequireDefault(require("../CardFooter.js"));
+var _ProgressBar = _interopRequireDefault(require("../../ProgressBar/ProgressBar.js"));
+var _LockOverlay = _interopRequireDefault(require("../../LockOverlay/LockOverlay.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 = (0, _ThemeContext.useTheme)();
+  const [isActive, setIsActive] = (0, _react.useState)(false);
+  const handleActionPress = () => {
+    if (!actionIconActive) return;
+    setIsActive(!isActive);
+    if (onActionPress) {
+      onActionPress(!isActive);
+    }
+  };
+  const labelContent = label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      backgroundColor: theme.surface,
+      paddingVertical: 5,
+      paddingHorizontal: 8,
+      borderRadius: 10
+    }, labelContainerStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [{
+        color: theme.onSurface
+      }, labelStyle],
+      children: label
+    })
+  });
+  const actionContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+    onPress: onPress,
+    style: [{
+      height: 300,
+      position: "relative",
+      borderRadius: mainCardBorderRadius
+    }, style, {
+      width
+    }],
+    backgroundImage: {
+      source: backgroundImage,
+      resizeMode: "cover"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LockOverlay.default, {
+      visible: overlayVisible,
+      containerStyle: overlayStyle,
+      contentVerticalAlign: overlayCover == "background" ? "top" : "center"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
+      left: headerLeft,
+      right: headerRight,
+      style: {
+        alignItems: "center"
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        justifyContent: "flex-end",
+        zIndex: overlayCover == "background" ? 1000 : 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        style: {
+          padding: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+          backgroundColor: theme.surface,
+          variant: "filled",
+          style: computedInnerCardStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CardHeader.default, {
+            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__*/(0, _jsxRuntime.jsxs)(_CardFooter.default, {
+            justifyContent: "space-between",
+            style: {
+              flexDirection: isRTL ? "row-reverse" : "row"
+            },
+            children: [progressBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.default, {
+              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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [{
+                  fontSize: 16,
+                  color: theme.primary,
+                  fontWeight: "bold",
+                  textAlign: isRTL ? "left" : "right"
+                }, dealPriceStyle],
+                children: dealPrice
+              })
+            })]
+          })]
+        })
+      })
+    })]
+  });
+};
+var _default = exports.default = DealCardWithBackgroundImage;
+//# sourceMappingURL=DealCardWithBackgroundImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_Card","_interopRequireDefault","_CardHeader","_CardContent","_ThemeContext","_CardFooter","_ProgressBar","_LockOverlay","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","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","useTheme","isActive","setIsActive","useState","handleActionPress","labelContent","jsx","View","backgroundColor","surface","paddingVertical","paddingHorizontal","borderRadius","children","Text","color","onSurface","actionContent","TouchableOpacity","headerLeft","headerRight","mainCardBorderRadius","innerCardBorderRadius","getVariantStyle","position","bottom","marginHorizontal","marginVertical","paddingBottom","computedInnerCardStyle","finalInnerBorderRadius","overlayStyle","borderBottomLeftRadius","borderBottomRightRadius","overflow","jsxs","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","_default","exports"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/Card/templates/DealCardWithBackgroundImage.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/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