@adiraku/react-native-ui 1.2.11-canary-5 → 1.2.11

package/lib/typescript/components/TopUpCard/TopUpCard.style.d.ts

@@ -0,0 +1,62 @@
+export declare const getStyle: (variant: 'unselected' | 'selected') => {
+    cardContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        position: "relative";
+        flexDirection: "column";
+        justifyContent: "center";
+        alignItems: "flex-start";
+        paddingHorizontal: number;
+        gap: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        elevation: number;
+    };
+    text: {
+        fontSize: number;
+        fontWeight: "700";
+        color: string;
+        textAlign: "left";
+    };
+    price: {
+        marginTop: number;
+        fontSize: number;
+        color: string;
+        textAlign: "left";
+    };
+    badge: {
+        position: "absolute";
+        top: number;
+        right: number;
+        width: number;
+        height: number;
+        backgroundColor: string;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        flexDirection: "row";
+        zIndex: number;
+    };
+    badgeText: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "600";
+        color: string;
+    };
+    contentContainer: {
+        width: string;
+        alignItems: "flex-start";
+    };
+};
+//# sourceMappingURL=TopUpCard.style.d.ts.map

package/lib/typescript/components/TopUpCard/TopUpCard.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopUpCard.style.d.ts","sourceRoot":"","sources":["../../../../src/components/TopUpCard/TopUpCard.style.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,YAAa,YAAY,GAAG,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D1D,CAAC"}

package/lib/typescript/components/TopUpCard/TopUpCard.type.d.ts

@@ -0,0 +1,32 @@
+import { ViewStyle } from 'react-native';
+export interface TopUpCardProps {
+    /**
+     * The text amount to display on the top up card.
+     */
+    amount: string;
+    /**
+     * The variant of the top up card (unselected or selected).
+     */
+    variant: 'unselected' | 'selected';
+    /**
+     * Optional container style for customization.
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * Optional price to show under amount.
+     */
+    price?: string;
+    /**
+     * Optional points to show badge
+     */
+    points?: number;
+    /**
+     * Type of card (basic or with points)
+     */
+    type?: 'basic' | 'with-points';
+    /**
+     * Callback when card is pressed
+     */
+    onPress?: () => void;
+}
+//# sourceMappingURL=TopUpCard.type.d.ts.map

package/lib/typescript/components/TopUpCard/TopUpCard.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopUpCard.type.d.ts","sourceRoot":"","sources":["../../../../src/components/TopUpCard/TopUpCard.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;IAEnC;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

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

@@ -35,6 +35,8 @@ export { Loader } from './Loader/loader.component';
 export { Notification } from './Notification/notification.component';
 export { Pagination } from './Pagination/pagination.component';
 export { BudgetCard } from './BudgetCard/budget-card.component';
+export { TopUpCards } from './TopUpCard/TopUpCard.component';
+export type { TopUpCardProps } from './TopUpCard/TopUpCard.type';
 export { Banner } from './Banner/banner.component';
 export { FilterList } from './FilterList/FilterList.component';
 export { BasicTab } from './BasicTab/BasicTab.component';
@@ -47,6 +49,7 @@ export { Ribbon } from './Ribbon/Ribbon.component';
 export { StickyBar } from './StickyBar/StickyBar.component';
 export { LimitAngsuranCard } from './LimitAngsuranCard/LimitAngsuranCard.component';
 export { ToolTip } from './ToolTip/tooltip.component';
+export { SingleBalanceCard } from './SingleBalanceCard/SingleBalanceCard.component';
 export type { ActionListProps } from './ActionList/ActionList.type';
 export type { BadgesIconProps, BadgesIlustrationProps, BadgesIlustrationRakuProps, BadgesProps, BadgesImageProps, BadgesInitialProps, BadgesStepProps, BadgesLogoProps, } from './Badge/Badge.type';
 export type { CategoryCardProps } from './CategoryCard/CategoryCard.type';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EACL,WAAW,EACX,kBAAkB,GACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,UAAU,GACX,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EACL,IAAI,EACJ,SAAS,EACT,cAAc,EACd,QAAQ,EACR,KAAK,EACL,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AAEpF,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,YAAY,EACV,eAAe,EACf,sBAAsB,EACtB,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,YAAY,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AACrF,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAChF,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,wCAAwC,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,YAAY,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACzF,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiraku/react-native-ui",
-  "version": "1.2.11-canary-5",
+  "version": "1.2.11",
   "description": "UI library for Adiraku apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/InputPIN/InputPIN.component.tsx

@@ -68,7 +68,7 @@ const InputPIN = React.forwardRef<InputPinRefHandle, InputPINProps>((props, ref)
           showForgetPin && <TextLink testID="buttonLupaPin" containerStyles={computedStyle.forgetPinContainer} label="Lupa PIN" onPress={onPressForgetPin} />
         }
       </View>
-      <View>
+      <View style={{ flex: 1, justifyContent: 'space-evenly' }}>
         <View style={computedStyle.numberContainerStyle}>
           <NumberButton number="1" />
           <NumberButton number="2" />

package/src/components/InputPIN/InputPIN.style.tsx

@@ -22,7 +22,6 @@ export const getStyle = () => {
     flex: 1,
     backgroundColor: Palettes.whiteDark[50],
     justifyContent: 'space-between',
-    marginTop: Spacing[48],
   };
 
   computedStyle.dotContainerStyle = {
@@ -34,6 +33,7 @@ export const getStyle = () => {
 
   computedStyle.numberContainerStyle = {
     flexDirection: 'row',
+    flex: 1,
     justifyContent: 'space-between',
     marginHorizontal: Spacing[32],
   };
@@ -54,12 +54,10 @@ export const getStyle = () => {
   };
 
   computedStyle.numberPadStyle = {
-    padding: Spacing[24],
     margin: Spacing[8],
     justifyContent: 'center',
     alignItems: 'center',
     flex: 1,
-    // backgroundColor: 'blue'
   };
 
   computedStyle.errorMessage = {

package/src/components/SingleBalanceCard/SingleBalanceCard.component.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { IconSeeShow, IconCopy, IconInfo } from '../../icons';
+import { styles } from './SingleBalanceCard.styles';
+import { SingleBalanceCardProps } from './SingleBalanceCard.type';
+
+export const SingleBalanceCard = ({
+  title,
+  balance,
+  leadingComponent,
+  information,
+  footerComponent,
+  actionComponent,
+  hasDividerOnAction = false,
+  variant = 'basic',
+  defaultMasked = false,
+}: SingleBalanceCardProps) => {
+  const [isBalanceVisible, setIsBalanceVisible] = useState(defaultMasked);
+
+  const isNonSliding = !!actionComponent && variant === 'basic';
+
+  return (
+    <View style={styles.cardContainer}>
+      {isNonSliding ? (
+        <View style={styles.nonSlidingRow}>
+          <View style={styles.nonSlidingLeft}>
+            <View style={styles.headerRow}>
+              {leadingComponent && (
+                <View style={styles.leading}> {leadingComponent} </View>
+              )}
+              <Typography style={styles.title}> {title} </Typography>
+              <TouchableOpacity activeOpacity={0.6}>
+                <IconInfo />
+              </TouchableOpacity>
+            </View>
+            <Typography style={styles.balance}>
+              {isBalanceVisible ? balance : '••••••••••••'}
+            </Typography>
+          </View>
+
+          <View
+            style={[
+              styles.nonSlidingRight,
+              hasDividerOnAction && styles.trailingWithDivider,
+            ]}
+          >
+            {actionComponent}
+          </View>
+        </View>
+      ) : (
+        <>
+          <View style={styles.headerRow}>
+            <View style={styles.headerLeft}>
+              {leadingComponent && (
+                <View style={styles.leading}> {leadingComponent} </View>
+              )}
+              <Typography style={styles.title}> {title} </Typography>
+              <TouchableOpacity activeOpacity={0.6}>
+                <IconInfo />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <View style={styles.balanceRow}>
+            <Typography style={styles.balance}>
+              {isBalanceVisible ? balance : '••••••••••••'}
+            </Typography>
+
+            <View style={styles.trailing}>
+              {actionComponent && (
+                <View
+                  style={
+                    hasDividerOnAction ? styles.trailingWithDivider : undefined
+                  }
+                >
+                  {actionComponent}
+                </View>
+              )}
+              {variant === 'with-information' && (
+                <TouchableOpacity
+                  onPress={() => setIsBalanceVisible((prev) => !prev)}
+                >
+                  <IconSeeShow />
+                </TouchableOpacity>
+              )}
+            </View>
+          </View>
+
+          {variant === 'with-information' && information && (
+            <>
+              <View style={styles.divider} />
+              <View style={styles.infoRow}>
+                <Typography style={styles.infoLabel}>
+                  {' '}
+                  {information.label}{' '}
+                </Typography>
+                <View style={styles.infoRight}>
+                  <Typography style={styles.noVA}>
+                    {' '}
+                    {information.value}{' '}
+                  </Typography>
+                  {information.onCopy && (
+                    <TouchableOpacity onPress={information.onCopy}>
+                      <IconCopy />
+                    </TouchableOpacity>
+                  )}
+                </View>
+              </View>
+            </>
+          )}
+        </>
+      )}
+
+      {footerComponent && (
+        <View style={styles.footer}> {footerComponent} </View>
+      )}
+    </View>
+  );
+};

package/src/components/SingleBalanceCard/SingleBalanceCard.styles.tsx

@@ -0,0 +1,123 @@
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Shadow } from '../../themes';
+
+export const styles = StyleSheet.create({
+  cardContainer: {
+    backgroundColor: Palettes.white[50],
+    borderRadius: Radius[8],
+    ...Shadow['shadow-elevation-2'],
+    marginVertical: 8,
+    borderWidth: 1,
+    borderColor: Palettes.grey[100],
+    paddingLeft: 16,
+    paddingRight: 8,
+    paddingVertical: 12,
+    alignSelf: 'center',
+    maxWidth: 340,
+    width: '90%',
+  },
+
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginBottom: 12,
+  },
+
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  leading: {
+    marginRight: 8,
+  },
+
+  title: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    color: Palettes.black[900],
+    marginRight: 4,
+  },
+
+  balanceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+
+  balance: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: Palettes.black[900],
+    minWidth: 140,
+  },
+
+  trailing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginRight: 0,
+  },
+
+  trailingWithDivider: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 12,
+    paddingLeft: 12,
+    borderLeftWidth: 2,
+    borderLeftColor: Palettes.grey[100],
+  },
+
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: Palettes.grey[100],
+    marginVertical: 8,
+  },
+
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+
+  infoLabel: {
+    fontSize: 14,
+    color: Palettes.black[700],
+  },
+
+  infoRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginRight: 0,
+  },
+
+  noVA: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: Palettes.blue[600],
+    marginRight: 2,
+  },
+
+  footer: {
+    marginTop: 12,
+  },
+
+  nonSlidingRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  nonSlidingLeft: {
+    flex: 1,
+  },
+
+  nonSlidingRight: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: 12,
+  },
+});

package/src/components/SingleBalanceCard/SingleBalanceCard.type.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+export type SingleBalanceCardProps = {
+  title: string;
+  balance: string;
+  leadingComponent?: ReactNode;
+  actionComponent?: ReactNode;
+  information?: {
+    label: string;
+    value: string;
+    onCopy?: () => void;
+  };
+  footerComponent?: ReactNode;
+  variant?: 'basic' | 'with-information';
+  hasDividerOnAction?: boolean;
+  defaultMasked?: boolean;
+};

package/src/components/TopUpCard/TopUpCard.component.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { getStyle } from './TopUpCard.style';
+import type { TopUpCardProps } from './TopUpCard.type';
+import { Typography } from './../typography/typography.component';
+
+const TopUpCards: React.FC<TopUpCardProps> = (props) => {
+  const {
+    amount,
+    variant,
+    containerStyle,
+    price,
+    points,
+    type = 'basic',
+    onPress,
+  } = props;
+
+  const styles = getStyle(variant);
+
+  const renderContent = () => (
+    <View style= {styles.contentContainer} >
+      <Typography variant = "text-heading-h6-bold">
+        {amount}
+      </Typography>
+      {price && (
+        <Typography variant="text-body-tertiary-regular">
+          {price}
+        </Typography>
+      )}
+    </View>
+  );
+
+  return (
+    <TouchableOpacity style= {[styles.cardContainer, containerStyle]} onPress = { onPress } activeOpacity = { 0.7}>
+      {/* Points Badge */ }
+      {type === 'with-points' && points !== undefined && (
+        <View style={styles.badge}>
+          <Typography variant = "text-subtitle-primary-semibold" style = { styles.badgeText } numberOfLines = { 1} ellipsizeMode = "tail">
+            {`+ ${points} poin`}
+          </Typography>
+        </View>
+      )}
+      {renderContent()}
+    </TouchableOpacity>
+  );
+};
+
+export { TopUpCards };

package/src/components/TopUpCard/TopUpCard.style.tsx

@@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius } from '../../themes';
+
+export const getStyle = (variant: 'unselected' | 'selected') => {
+  const isSelected = variant === 'selected';
+  return StyleSheet.create({
+    cardContainer: {
+      width: 156,
+      height: 101,
+      borderRadius: 8,
+      backgroundColor: Palettes.white[50],
+      borderWidth: isSelected ? 2 : 1,
+      borderColor: isSelected ? Palettes.yellow[600] : '#E0E0E0',
+      position: 'relative' as const,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      paddingHorizontal: 16,
+      gap: 4,
+      shadowColor: '#000000',
+      shadowOpacity: isSelected ? 0.2 : 0.1,
+      shadowRadius: isSelected ? 8 : 4,
+      shadowOffset: { width: 0, height: isSelected ? 4 : 2 },
+      elevation: isSelected ? 4 : 2,
+    },
+    text: {
+      fontSize: 20,
+      fontWeight: '700',
+      color: Palettes.black[900],
+      textAlign: 'left',
+    },
+    price: {
+      marginTop: 4,
+      fontSize: 12,
+      color: Palettes.black[900],
+      textAlign: 'left',
+    },
+    badge: {
+      position: 'absolute',
+      top: -7,
+      right: 12,
+      width: 84,
+      height: 28,
+      backgroundColor: Palettes.yellow[600],
+      borderRadius: Radius[8],
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 4,
+      paddingHorizontal: 8,
+      flexDirection: 'row',
+      zIndex: 1,
+    },
+    badgeText: {
+      fontSize: 12,
+      lineHeight: 12,
+      fontWeight: '600',
+      color: Palettes.black[900],
+    },
+    contentContainer: {
+      width: '100%',
+      alignItems: 'flex-start',
+    },
+  });
+};

package/src/components/TopUpCard/TopUpCard.type.ts

@@ -0,0 +1,38 @@
+import { ViewStyle } from 'react-native';
+
+export interface TopUpCardProps {
+  /**
+   * The text amount to display on the top up card.
+   */
+  amount: string;
+
+  /**
+   * The variant of the top up card (unselected or selected).
+   */
+  variant: 'unselected' | 'selected';
+
+  /**
+   * Optional container style for customization.
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Optional price to show under amount.
+   */
+  price?: string;
+
+  /**
+   * Optional points to show badge
+   */
+  points?: number;
+
+  /**
+   * Type of card (basic or with points)
+   */
+  type?: 'basic' | 'with-points';
+
+  /**
+   * Callback when card is pressed
+   */
+  onPress?: () => void;
+}

package/src/components/index.ts

@@ -42,6 +42,8 @@ export { Loader } from './Loader/loader.component';
 export { Notification } from './Notification/notification.component';
 export { Pagination } from './Pagination/pagination.component';
 export { BudgetCard } from './BudgetCard/budget-card.component';
+export { TopUpCards } from './TopUpCard/TopUpCard.component';
+export type { TopUpCardProps } from './TopUpCard/TopUpCard.type';
 export { Banner } from './Banner/banner.component';
 export { FilterList } from './FilterList/FilterList.component';
 export { BasicTab } from './BasicTab/BasicTab.component';
@@ -64,6 +66,7 @@ export { Ribbon } from './Ribbon/Ribbon.component';
 export { StickyBar } from './StickyBar/StickyBar.component';
 export { LimitAngsuranCard } from './LimitAngsuranCard/LimitAngsuranCard.component';
 export { ToolTip } from './ToolTip/tooltip.component';
+export { SingleBalanceCard } from './SingleBalanceCard/SingleBalanceCard.component';
 
 export type { ActionListProps } from './ActionList/ActionList.type';
 export type {