@xetwa/design-system 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Cards/PlanCard/PlanCard.tsx

@@ -28,6 +28,8 @@ export interface PlanCardProps {
   excludedItems?: string[];
   /** Define se o cartão deve exibir o badge de "mais popular". */
   isPopular?: boolean;
+  /** Texto customizado para o badge (ex: "POUPA 40%") */
+  badgeText?: string;
   /** Estilização customizada do container. */
   style?: ViewStyle | ViewStyle[];
   /** Variante de layout do cartão (completo ou miniatura). */
@@ -43,6 +45,7 @@ export const PlanCard = ({
   includedItems = [],
   excludedItems = [],
   isPopular = false,
+  badgeText,
   style,
   variant = 'default',
 }: PlanCardProps) => {
@@ -66,15 +69,22 @@ export const PlanCard = ({
         };
       case 'explorateur':
         return {
-          borderWidth: 2,
+          borderWidth: 3, // Thicker border as seen in the image
           borderColor: '#f2974b',
           backgroundColor: '#ffffff',
           borderRadius: scale(18),
           paddingVertical: scale(14),
           paddingHorizontal: scale(15),
-          shadow: 'sm' as const,
+          shadow: 'none' as const,
           overflow: 'visible' as const,
           flatShadow: false,
+          customShadow: {
+            shadowColor: '#fce3ce', // light orange tint for shadow
+            shadowOffset: { width: 4, height: 4 },
+            shadowOpacity: 1,
+            shadowRadius: 0,
+            elevation: 4, // Android fallback
+          }
         };
       case 'fluent':
         return {
@@ -133,6 +143,7 @@ export const PlanCard = ({
         overflow={config.overflow}
         style={[
           config.flatShadow ? styles.fluentFlatShadow : null,
+          config.customShadow ? config.customShadow : null,
           ...(Array.isArray(style) ? style : [style].filter(Boolean)),
         ] as ViewStyle[]}
       >
@@ -141,48 +152,52 @@ export const PlanCard = ({
           <View style={[
             styles.popularBadge,
             {
-              top: scale(-10),
+              top: scale(-12),
+              right: isMini ? scale(20) : undefined, // align right if mini
+              alignSelf: isMini ? 'flex-end' : 'center',
               paddingVertical: scale(4),
               paddingHorizontal: scale(12),
               borderRadius: scale(20),
             }
           ]}>
-            <Typography style={[styles.popularBadgeText, { fontSize: scaleText(9), letterSpacing: scale(0.8) }]}>MAIS POPULAR</Typography>
+            <Typography variant="label" color="#ffffff" style={{ letterSpacing: scale(0.5) }}>
+              {badgeText || 'MAIS POPULAR'}
+            </Typography>
           </View>
         )}
 
         {isMini ? (
           <View style={[styles.miniHeader, { marginTop: scale(8), marginBottom: scale(4) }]}>
             <View style={styles.miniLeft}>
-              <Typography style={[styles.labelTier, { color: colors.labelColor, fontSize: scaleText(10), letterSpacing: scale(1.0) }]}>
-                {tierLabel || tier.toUpperCase()}
-              </Typography>
-              <Typography style={[styles.planName, { color: colors.titleColor, fontSize: scaleText(18), lineHeight: scaleText(20) }]}>
+              <Typography variant="h1" color="#51332d" style={{ marginBottom: scale(2) }}>
                 {planName}
               </Typography>
+              <Typography variant="bodySm" color="#9a8478">
+                {tierLabel}
+              </Typography>
             </View>
-            <View style={styles.priceRow}>
-              <Typography style={[styles.priceText, { color: colors.priceColor, fontSize: scaleText(28), lineHeight: scaleText(32) }]}>
+            <View style={styles.miniRight}>
+              <Typography variant="display1" color="#51332d">
                 {priceText}
               </Typography>
-              <Typography style={[styles.periodText, { color: colors.periodColor, fontSize: scaleText(12), marginLeft: scale(2), lineHeight: scaleText(16) }]}>
+              <Typography variant="bodySm" color="#9a8478" style={{ marginTop: scale(2), textAlign: 'right' }}>
                 {pricePeriod}
               </Typography>
             </View>
           </View>
         ) : (
           <View style={[styles.header, { gap: scale(4), marginTop: scale(8) }]}>
-            <Typography style={[styles.labelTier, { color: colors.labelColor, fontSize: scaleText(10), letterSpacing: scale(1.0) }]}>
+            <Typography variant="label" color={colors.labelColor} style={{ letterSpacing: scale(1.0) }}>
               {tierLabel || tier.toUpperCase()}
             </Typography>
-            <Typography style={[styles.planName, { color: colors.titleColor, fontSize: scaleText(18), lineHeight: scaleText(20) }]}>
+            <Typography variant="h1" color={colors.titleColor}>
               {planName}
             </Typography>
             <View style={styles.priceRow}>
-              <Typography style={[styles.priceText, { color: colors.priceColor, fontSize: scaleText(28), lineHeight: scaleText(32) }]}>
+              <Typography variant="display1" color={colors.priceColor}>
                 {priceText}
               </Typography>
-              <Typography style={[styles.periodText, { color: colors.periodColor, fontSize: scaleText(12), marginLeft: scale(2), lineHeight: scaleText(16) }]}>
+              <Typography variant="bodySm" color={colors.periodColor} style={{ marginLeft: scale(4), marginTop: scale(8) }}>
                 {pricePeriod}
               </Typography>
             </View>
@@ -203,7 +218,7 @@ export const PlanCard = ({
                   <View style={[styles.iconBox, { width: scale(20) }]}>
                     <Check stroke={colors.checkColor} strokeWidth={2.6} size={scale(14)} />
                   </View>
-                  <Typography style={[styles.featureText, { color: colors.itemTextColor, fontSize: scaleText(12), lineHeight: scaleText(14) }]}>
+                  <Typography variant="bodySm" color={colors.itemTextColor} style={{ flex: 1 }}>
                     {item}
                   </Typography>
                 </View>
@@ -214,7 +229,7 @@ export const PlanCard = ({
                   <View style={[styles.iconBox, { width: scale(20) }]}>
                     <X stroke={colors.crossColor} strokeWidth={2.4} size={scale(14)} />
                   </View>
-                  <Typography style={[styles.featureText, { color: '#9a8478', textDecorationLine: 'line-through', fontSize: scaleText(12), lineHeight: scaleText(14) }]}>
+                  <Typography variant="bodySm" color="#9a8478" style={{ textDecorationLine: 'line-through', flex: 1 }}>
                     {item}
                   </Typography>
                 </View>
@@ -268,7 +283,11 @@ const styles = StyleSheet.create({
   },
   miniLeft: {
     alignItems: 'flex-start',
-    gap: 4,
+    flex: 1,
+  },
+  miniRight: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
   },
   labelTier: {
 

package/src/styles/theme.ts

@@ -1,3 +1,12 @@
+import { Platform } from 'react-native';
+
+const font = (family: string, webWeight: '600' | '700' | '800') => {
+  return Platform.select({
+    web: { fontFamily: family.split('-')[0], fontWeight: webWeight },
+    default: { fontFamily: family }
+  }) as { fontFamily: string; fontWeight?: '600' | '700' | '800' };
+};
+
 export const theme = {
   colors: {
     // Paleta primária
@@ -162,82 +171,72 @@ export const theme = {
 
   typography: {
     display1: {
-      fontFamily: 'Fredoka',
+      ...font('Fredoka-Bold', '700'),
       fontSize: 28,
-      fontWeight: '700' as const,
       lineHeight: 30,
     },
     display2: {
-      fontFamily: 'Fredoka',
+      ...font('Fredoka-Bold', '700'),
       fontSize: 24,
-      fontWeight: '700' as const,
       lineHeight: 27,
     },
     h1: {
-      fontFamily: 'Fredoka',
+      ...font('Fredoka-Bold', '700'),
       fontSize: 22,
-      fontWeight: '700' as const,
       lineHeight: 25,
     },
     h2: {
-      fontFamily: 'Fredoka',
+      ...font('Fredoka-SemiBold', '600'),
       fontSize: 18,
-      fontWeight: '600' as const,
       lineHeight: 22,
     },
     h3: {
-      fontFamily: 'Fredoka',
+      ...font('Fredoka-SemiBold', '600'),
       fontSize: 16,
-      fontWeight: '600' as const,
       lineHeight: 20,
     },
     label: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 10,
-      fontWeight: '800' as const,
-      lineHeight: 10,
+      lineHeight: 14,
       letterSpacing: 1.2,
     },
     bodyLg: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-Bold', '700'),
       fontSize: 15,
-      fontWeight: '600' as const,
       lineHeight: 23,
     },
     bodyMd: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-Bold', '700'),
       fontSize: 13.5,
-      fontWeight: '600' as const,
       lineHeight: 20,
     },
     bodySm: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-Bold', '700'),
       fontSize: 12,
-      fontWeight: '700' as const,
       lineHeight: 17,
     },
     caption: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-SemiBold', '600'),
       fontSize: 10,
-      fontWeight: '700' as const,
       lineHeight: 14,
     },
     btnLg: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 16,
-      fontWeight: '800' as const,
+      lineHeight: 22,
       letterSpacing: 0.64,
     },
     btnMd: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 14,
-      fontWeight: '800' as const,
+      lineHeight: 20,
       letterSpacing: 0.56,
     },
     btnSm: {
-      fontFamily: 'Nunito',
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 12,
-      fontWeight: '800' as const,
+      lineHeight: 16,
       letterSpacing: 0.48,
     },
   },