decathlon-ui 0.3.50 → 2.0.0

package/dist/components/badge/badge.component.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { BadgeProps } from "./badge.types";
-export declare const Badge: React.MemoExoticComponent<({ text, variant, size, style, textStyle, icon, iconPosition, }: BadgeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Badge: React.MemoExoticComponent<({ text, children, variant, tone, filled, size, style, textStyle, icon, iconPosition, }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null>;
 //# sourceMappingURL=badge.component.d.ts.map

package/dist/components/badge/badge.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkFhD,eAAO,MAAM,KAAK,6FApEf,UAAU,6CAoEkC,CAAC"}
+{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuIhD,eAAO,MAAM,KAAK,qHAnHf,UAAU,oDAmHkC,CAAC"}

package/dist/components/badge/badge.component.js

@@ -1,50 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Platform, Text, View } from "react-native";
 import React from "react";
-import { useBadgeStyles } from "./badge.styles";
+import { useBadgeStyles, useCheckoutTagStyles } from "./badge.styles";
+const isRenderable = (n) => n != null && n !== false && n !== true;
 /**
- * Badge - Componente para exibição de etiquetas ou marcadores
- * Suporta ícones SVG
+ * Badge — etiquetas da lib; suporta o modelo de **Tag** do handoff de checkout
+ * (`tone`, `filled`, `children`, `icon`) e a API legada (`text`, `variant`).
  */
-const BadgeComponent = ({ text, variant, size = "medium", style, textStyle, icon, iconPosition = "left", }) => {
-    const styles = useBadgeStyles(variant, size);
-    const renderIcon = () => {
-        if (!icon) {
+const BadgeComponent = ({ text, children, variant, tone, filled = false, size = "medium", style, textStyle, icon, iconPosition = "left", }) => {
+    const label = children !== null && children !== void 0 ? children : text;
+    const tagMode = tone != null ||
+        (isRenderable(children) && text === undefined);
+    const tagToneResolved = tone !== null && tone !== void 0 ? tone : "neutral";
+    const legacyVariant = variant !== null && variant !== void 0 ? variant : "default";
+    const tagStyles = useCheckoutTagStyles(tagToneResolved, filled);
+    const legacyStyles = useBadgeStyles(legacyVariant, size);
+    const renderIconTag = (tagIcon) => {
+        if (typeof tagIcon === "string" && tagIcon.includes(".svg")) {
+            if (Platform.OS !== "web") {
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
+                const { SvgUri } = require("react-native-svg");
+                if (SvgUri) {
+                    return (_jsx(SvgUri, { uri: tagIcon, width: 12, height: 12 }));
+                }
+            }
             return null;
         }
-        if (typeof icon === "string" && icon.includes(".svg")) {
-            // Suporte a URIs SVG apenas em plataformas nativas, onde SvgUri está disponível.
+        return tagIcon;
+    };
+    const renderIconLegacy = (tagIcon) => {
+        if (typeof tagIcon === "string" && tagIcon.includes(".svg")) {
             if (Platform.OS !== "web") {
-                // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-var-requires
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
                 const { SvgUri } = require("react-native-svg");
                 if (SvgUri) {
-                    return (_jsx(View, { style: styles.iconContainer, children: _jsx(SvgUri, { uri: icon, width: 12, height: 12 }) }));
+                    return (_jsx(View, { style: legacyStyles.iconContainer, children: _jsx(SvgUri, { uri: tagIcon, width: 12, height: 12 }) }));
                 }
             }
-            // No ambiente web (storybook) ou quando SvgUri não estiver disponível,
-            // o ícone via string é ignorado para evitar erros de build.
             return null;
         }
-        return _jsx(View, { style: styles.iconContainer, children: icon });
+        return _jsx(View, { style: legacyStyles.iconContainer, children: tagIcon });
     };
-    // Determina os estilos de tamanho do texto com base no parâmetro size
+    if (tagMode) {
+        if (!isRenderable(label)) {
+            return null;
+        }
+        const primitiveLabel = typeof label === "string" || typeof label === "number";
+        return (_jsxs(View, { style: [tagStyles.container, style], accessibilityRole: "text", children: [icon != null && iconPosition === "left" ? (_jsx(View, { style: tagStyles.iconWrap, children: renderIconTag(icon) })) : null, primitiveLabel ? (_jsx(Text, { style: [tagStyles.label, textStyle], children: String(label) })) : (_jsx(View, { style: { flexShrink: 1 }, children: label })), icon != null && iconPosition === "right" ? (_jsx(View, { style: tagStyles.iconWrap, children: renderIconTag(icon) })) : null] }));
+    }
+    if (!isRenderable(text)) {
+        return null;
+    }
     const getSizeStyle = () => {
         switch (size) {
             case "small":
-                return styles.small;
+                return legacyStyles.small;
             case "large":
-                return styles.large;
+                return legacyStyles.large;
             case "medium":
             default:
-                return styles.medium;
+                return legacyStyles.medium;
         }
     };
-    return (_jsxs(View, { style: [styles.container, !style && variant && styles[variant], style], children: [icon && iconPosition === "left" && renderIcon(), _jsx(Text, { style: [
-                    styles.text,
+    return (_jsxs(View, { style: [
+            legacyStyles.container,
+            !style && legacyVariant && legacyStyles[legacyVariant],
+            style,
+        ], children: [icon != null && iconPosition === "left"
+                ? renderIconLegacy(icon)
+                : null, _jsx(Text, { style: [
+                    legacyStyles.text,
                     getSizeStyle(),
-                    variant && styles[variant],
+                    legacyVariant && legacyStyles[legacyVariant],
                     textStyle,
-                ], children: text }), icon && iconPosition === "right" && renderIcon()] }));
+                ], children: text }), icon != null && iconPosition === "right"
+                ? renderIconLegacy(icon)
+                : null] }));
 };
 export const Badge = React.memo(BadgeComponent);
 Badge.displayName = "Badge";

package/dist/components/badge/badge.styles.d.ts

@@ -1,4 +1,30 @@
-import type { BadgeSize, BadgeVariant } from "./badge.types";
+import type { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types";
+export declare const useCheckoutTagStyles: (tone: BadgeTone, filled: boolean) => {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "flex-start";
+        backgroundColor: string;
+        paddingHorizontal: 8;
+        paddingVertical: number;
+        gap: 4;
+        borderRadius: 360;
+    };
+    label: {
+        fontFamily: "Inter-Bold";
+        fontSize: 10;
+        lineHeight: number;
+        letterSpacing: number;
+        textTransform: "uppercase";
+        color: string;
+    };
+    iconWrap: {
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
 export declare const useBadgeStyles: (variant?: BadgeVariant, size?: BadgeSize) => {
     container: {
         padding: 6;

package/dist/components/badge/badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAM7D,eAAO,MAAM,cAAc,GACzB,UAAS,YAAwB,EACjC,OAAM,SAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyF3B,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAMxE,eAAO,MAAM,oBAAoB,GAAI,MAAM,SAAS,EAAE,QAAQ,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAqCpE,CAAC;AAiDF,eAAO,MAAM,cAAc,GACzB,UAAS,YAAwB,EACjC,OAAM,SAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE3B,CAAC"}

package/dist/components/badge/badge.styles.js

@@ -1,20 +1,80 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { useTheme } from "../../themes";
+export const useCheckoutTagStyles = (tone, filled) => {
+    const theme = useTheme();
+    return useMemo(() => {
+        const { backgroundColor, color } = resolveTagColors(theme.colors, tone, filled);
+        return StyleSheet.create({
+            container: {
+                flexDirection: "row",
+                alignItems: "center",
+                alignSelf: "flex-start",
+                backgroundColor,
+                paddingHorizontal: theme.spacing.xs,
+                paddingVertical: 5.5,
+                gap: theme.spacing.xxs,
+                borderRadius: theme.radius.round,
+            },
+            label: {
+                fontFamily: theme.fonts.inter.bold,
+                fontSize: theme.fonts.sizes.xxxs,
+                lineHeight: 15,
+                letterSpacing: 0.25,
+                textTransform: "uppercase",
+                color,
+            },
+            iconWrap: {
+                width: 12,
+                height: 12,
+                alignItems: "center",
+                justifyContent: "center",
+            },
+        });
+    }, [theme, tone, filled]);
+};
+function resolveTagColors(c, tone, filled) {
+    switch (tone) {
+        case "success":
+            return filled
+                ? { backgroundColor: c.deliveryOptionFeatured, color: c.white }
+                : {
+                    backgroundColor: c.backgroundDeliveryAdvantageBadge,
+                    color: c.textDeliveryAdvantageBadge,
+                };
+        case "warning":
+            return filled
+                ? { backgroundColor: c.backgroundTagWarningFilled, color: c.white }
+                : {
+                    backgroundColor: c.backgroundDeliveryExpressBadge,
+                    color: c.textDeliveryExpressBadge,
+                };
+        case "brand":
+            return filled
+                ? { backgroundColor: c.primary, color: c.white }
+                : {
+                    backgroundColor: c.backgroundTagBrandSubtle,
+                    color: c.textTagBrandSubtle,
+                };
+        case "marketplace":
+            return filled
+                ? { backgroundColor: c.backgroundTagMarketplaceFilled, color: c.white }
+                : {
+                    backgroundColor: c.backgroundTagMarketplaceSubtle,
+                    color: c.textTagMarketplaceSubtle,
+                };
+        case "neutral":
+        default:
+            return filled
+                ? { backgroundColor: c.backgroundTagNeutralFilled, color: c.white }
+                : {
+                    backgroundColor: c.backgroundSecondary,
+                    color: c.textSecondary,
+                };
+    }
+}
 export const useBadgeStyles = (variant = "default", size = "medium") => {
     const theme = useTheme();
-    const getHeightStyle = () => {
-        switch (size) {
-            case "small":
-                return 19;
-            case "medium":
-                return 22;
-            case "large":
-                return 48;
-            default:
-                return 30;
-        }
-    };
     return useMemo(() => StyleSheet.create({
         container: {
             padding: theme.spacing.xxs2,
@@ -26,29 +86,26 @@ export const useBadgeStyles = (variant = "default", size = "medium") => {
         text: {
             color: theme.colors.textPrimary,
         },
-        // Estilos de tamanho
         medium: {
             fontFamily: "Inter",
             fontWeight: "500",
-            fontStyle: "normal", // "Medium" não é um valor válido para fontStyle no React Native
+            fontStyle: "normal",
             fontSize: 12,
-            lineHeight: 18, // 150% de 12px
+            lineHeight: 18,
             letterSpacing: 0,
-            // leading-trim: NONE; // Não suportado no React Native
         },
         small: {
             fontFamily: "Inter",
             fontWeight: "400",
             fontStyle: "normal",
             fontSize: 10,
-            lineHeight: 10, // 100% de 10px
+            lineHeight: 10,
             letterSpacing: 0,
-            // leading-trim: CAP_HEIGHT; // Não suportado diretamente no React Native
         },
         large: {
             fontFamily: theme.fonts.inter.medium,
             fontSize: 14,
-            lineHeight: 20, // 143% de 14px
+            lineHeight: 20,
             letterSpacing: 0,
         },
         iconContainer: {
@@ -57,27 +114,22 @@ export const useBadgeStyles = (variant = "default", size = "medium") => {
             alignItems: "center",
             justifyContent: "center",
         },
-        // Variante padrão
         default: {
             backgroundColor: theme.colors.backgroundAction1,
             color: theme.colors.white,
         },
-        // Variante black
         black: {
             backgroundColor: "#000000",
             color: theme.colors.white,
         },
-        // Variante discount
         discount: {
             backgroundColor: theme.colors.secondary,
             color: "#000000",
         },
-        // Variante cashback
         cashback: {
             backgroundColor: theme.colors.backgroundMint3,
             color: theme.colors.black,
         },
-        // Variante express
         express: {
             backgroundColor: theme.colors.black,
             color: theme.colors.white,

package/dist/components/badge/badge.types.d.ts

@@ -1,37 +1,36 @@
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { ReactNode } from "react";
 export type BadgeVariant = "default" | "black" | "discount" | "cashback" | "express";
+/** Tons do handoff (catálogo · <Tag />) — exposto como `Badge`. */
+export type BadgeTone = "success" | "warning" | "brand" | "neutral" | "marketplace";
 export type BadgeSize = "small" | "medium" | "large";
 export type IconPosition = "left" | "right";
 export interface BadgeProps {
     /**
-     * O texto exibido no badge
+     * Legado — conteúdo em string. Se `children` existir sem `text`, ativa o modo Tag do handoff.
      */
-    text: string;
+    text?: string;
     /**
-     * Variante de cor do badge
+     * Conteúdo do Tag (handoff). Com `tone`, composição canónica do DS de checkout.
      */
-    variant?: BadgeVariant;
+    children?: ReactNode;
     /**
-     * Tamanho do badge
+     * Variante legada (cores do catálogo anterior)
      */
-    size?: BadgeSize;
+    variant?: BadgeVariant;
     /**
-     * Estilos personalizados para o container do badge
+     * Tom do Tag (handoff). Se omitido e só `children` for usado — default `neutral`.
      */
-    style?: StyleProp<ViewStyle>;
+    tone?: BadgeTone;
     /**
-     * Estilos personalizados para o texto do badge
+     * Versão preenchida (texto branco sobre fundo sólido do tom)
+     * @default false
      */
+    filled?: boolean;
+    size?: BadgeSize;
+    style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
-    /**
-     * Ícone SVG a ser exibido junto com o texto do badge
-     */
     icon?: ReactNode;
-    /**
-     * Posição do ícone em relação ao texto
-     * @default 'left'
-     */
     iconPosition?: IconPosition;
 }
 //# sourceMappingURL=badge.types.d.ts.map

package/dist/components/badge/badge.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AAEd,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AAEd,yEAAyE;AACzE,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,CAAC;AAElB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}

package/dist/components/badge/index.d.ts

@@ -1,3 +1,3 @@
 export { Badge } from "./badge.component";
-export type { BadgeProps, BadgeSize, BadgeVariant, IconPosition, } from "./badge.types";
+export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, IconPosition, } from "./badge.types";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,YAAY,EACV,UAAU,EACV,SAAS,EACT,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,YAAY,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC"}

package/dist/components/card-picto/card-picto.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-picto.component.d.ts","sourceRoot":"","sources":["../../../src/components/card-picto/card-picto.component.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAmB,GACpB,EAAE,cAAc,2CAmBhB"}
+{"version":3,"file":"card-picto.component.d.ts","sourceRoot":"","sources":["../../../src/components/card-picto/card-picto.component.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAmB,GACpB,EAAE,cAAc,2CAiBhB"}

package/dist/components/card-picto/card-picto.component.js

@@ -1,17 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image, Text, TouchableOpacity } from "react-native";
-let FastImageComponent = null;
-try {
-    // Tenta importar o FastImage
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    FastImageComponent = require("react-native-fast-image").default;
-}
-catch (e) {
-    // Se não existir, permanece null
-}
-const CardImage = FastImageComponent ? FastImageComponent : Image;
 import { useCardPictoStyles } from "./card-picto.styles";
 export function CardPicto({ title, image, onPress, variant = "default", }) {
     const styles = useCardPictoStyles(variant);
-    return (_jsxs(TouchableOpacity, { style: styles.container, onPress: onPress, activeOpacity: 0.7, children: [_jsx(CardImage, { source: { uri: image }, style: styles.image, resizeMode: FastImageComponent ? FastImageComponent.resizeMode.contain : "contain" }), _jsx(Text, { style: styles.title, children: title })] }));
+    return (_jsxs(TouchableOpacity, { style: styles.container, onPress: onPress, activeOpacity: 0.7, children: [_jsx(Image, { source: { uri: image }, style: styles.image, resizeMode: "contain" }), _jsx(Text, { style: styles.title, children: title })] }));
 }

package/dist/components/delivery-option-card/delivery-option-card.component.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DeliveryOptionCardProps } from "./delivery-option-card.types";
+export declare const DeliveryOptionCard: React.NamedExoticComponent<DeliveryOptionCardProps>;
+//# sourceMappingURL=delivery-option-card.component.d.ts.map

package/dist/components/delivery-option-card/delivery-option-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delivery-option-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-option-card/delivery-option-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAuI5E,eAAO,MAAM,kBAAkB,qDAA0C,CAAC"}

package/dist/components/delivery-option-card/delivery-option-card.component.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Text, TouchableOpacity, View, } from "react-native";
+import { BagIcon, ChevronRightIcon, StarIcon, } from "../../icons";
+import { useTheme } from "../../themes";
+import { useDeliveryOptionCardStyles } from "./delivery-option-card.styles";
+const DeliveryOptionCardComponent = ({ testID, style, tone = "featured", disabled = false, selected = false, tags, onPress, leadingIcon, showRecommendedBadge, recommendedBadgeIcon, advantageousLabel, title, trailingTitle, subtitle, description, showAvailabilityIndicator, availabilitySummary, changeStoreLabel, onChangeStorePress, }) => {
+    const theme = useTheme();
+    const styles = useDeliveryOptionCardStyles({
+        tone,
+        selected,
+        disabled,
+    });
+    const subtitleContent = subtitle !== null && subtitle !== void 0 ? subtitle : description;
+    const effectiveSelected = selected && !disabled;
+    const badgesSection = tags !== null && tags !== void 0 ? tags : (_jsxs(_Fragment, { children: [showRecommendedBadge ? (_jsxs(View, { style: styles.recommendedBadge, children: [recommendedBadgeIcon !== null && recommendedBadgeIcon !== void 0 ? recommendedBadgeIcon : (_jsx(StarIcon, { size: 12, color: theme.colors.white })), _jsx(Text, { style: styles.recommendedText, children: "Recomendado" })] })) : null, advantageousLabel ? (_jsx(View, { style: styles.advantageousBadge, children: _jsx(Text, { style: styles.advantageousText, children: advantageousLabel }) })) : null] }));
+    const cardBody = (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.topRow, children: [_jsxs(View, { style: styles.leadingCluster, children: [leadingIcon !== null && leadingIcon !== void 0 ? leadingIcon : (_jsx(BagIcon, { size: 20, color: theme.colors.iconPrimary })), _jsx(View, { style: styles.badgesColumn, children: badgesSection })] }), _jsx(View, { style: effectiveSelected
+                            ? styles.radioOuterSelected
+                            : styles.radioOuterIdle, children: effectiveSelected ? _jsx(View, { style: styles.radioInner }) : null })] }), _jsxs(View, { style: styles.titleRow, children: [_jsx(Text, { style: styles.title, numberOfLines: 2, children: title }), trailingTitle ? (_jsx(Text, { style: styles.trailingTitle, children: trailingTitle })) : null] }), subtitleContent ? (_jsx(View, { style: styles.subtitle, children: typeof subtitleContent === "string" ? (_jsx(Text, { style: styles.subtitleText, children: subtitleContent })) : (subtitleContent) })) : null, availabilitySummary ? (_jsxs(View, { style: styles.availabilityRow, children: [showAvailabilityIndicator ? (_jsx(View, { style: styles.availabilityBar })) : null, _jsx(View, { style: { flex: 1 }, children: availabilitySummary })] })) : null, changeStoreLabel && onChangeStorePress && !disabled ? (_jsxs(TouchableOpacity, { onPress: onChangeStorePress, style: styles.footerLink, hitSlop: { top: 8, bottom: 8, left: 4, right: 8 }, accessibilityRole: "link", children: [_jsx(Text, { style: styles.footerLinkText, children: changeStoreLabel }), _jsx(ChevronRightIcon, { size: 14, color: theme.colors.primary })] })) : null] }));
+    if (onPress && !disabled) {
+        return (_jsx(TouchableOpacity, { testID: testID, accessibilityRole: "button", accessibilityState: { disabled: false }, style: [styles.card, style], onPress: onPress, activeOpacity: 0.85, children: cardBody }));
+    }
+    return (_jsx(View, { testID: testID, accessibilityState: { disabled }, style: [styles.card, style], children: cardBody }));
+};
+export const DeliveryOptionCard = React.memo(DeliveryOptionCardComponent);
+DeliveryOptionCard.displayName = "DeliveryOptionCard";

package/dist/components/delivery-option-card/delivery-option-card.styles.d.ts

@@ -0,0 +1,169 @@
+import type { DeliveryOptionTone } from "./delivery-option-card.types";
+type Options = {
+    tone: DeliveryOptionTone;
+    selected: boolean;
+    disabled?: boolean;
+};
+export declare const useDeliveryOptionCardStyles: ({ tone, selected, disabled, }: Options) => {
+    card: {
+        shadowColor: "#3643BA" | "#00A859";
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        backgroundColor: "#FFFFFF";
+        borderRadius: 0;
+        borderWidth: 1 | 2;
+        borderColor: "#3643BA" | "#00A859" | "#E5E7EB";
+        paddingHorizontal: 14;
+        paddingVertical: 12;
+        opacity: number;
+    } | {
+        shadowColor?: undefined;
+        shadowOffset?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        backgroundColor: "#FFFFFF";
+        borderRadius: 0;
+        borderWidth: 1 | 2;
+        borderColor: "#3643BA" | "#00A859" | "#E5E7EB";
+        paddingHorizontal: 14;
+        paddingVertical: 12;
+        opacity: number;
+    };
+    topRow: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+    };
+    leadingCluster: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        flex: number;
+        marginRight: 8;
+    };
+    badgesColumn: {
+        flex: number;
+        marginLeft: 8;
+    };
+    recommendedBadge: {
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "flex-start";
+        backgroundColor: "#00A859";
+        paddingHorizontal: 8;
+        paddingVertical: number;
+        gap: 4;
+    };
+    recommendedText: {
+        fontFamily: "Inter-Bold";
+        fontSize: 10;
+        lineHeight: number;
+        letterSpacing: number;
+        textTransform: "uppercase";
+        color: "#FFFFFF";
+    };
+    advantageousBadge: {
+        alignSelf: "flex-start";
+        marginTop: 4;
+        backgroundColor: "#E8F7EF";
+        paddingHorizontal: 8;
+        paddingVertical: number;
+    };
+    advantageousText: {
+        fontFamily: "Inter-Bold";
+        fontSize: 10;
+        lineHeight: number;
+        letterSpacing: number;
+        textTransform: "uppercase";
+        color: "#006B39";
+    };
+    radioOuterSelected: {
+        width: number;
+        height: number;
+        borderRadius: 360;
+        borderWidth: 2;
+        borderColor: "#3643BA" | "#00A859";
+        backgroundColor: "#3643BA" | "#00A859";
+        alignItems: "center";
+        justifyContent: "center";
+        marginLeft: 8;
+    };
+    radioOuterIdle: {
+        width: number;
+        height: number;
+        borderRadius: 360;
+        borderWidth: 2;
+        borderColor: "#D1D5DC";
+        backgroundColor: "#FFFFFF";
+        alignItems: "center";
+        justifyContent: "center";
+        marginLeft: 8;
+    };
+    radioInner: {
+        width: number;
+        height: number;
+        borderRadius: 360;
+        backgroundColor: "#FFFFFF";
+    };
+    titleRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        marginTop: 12;
+    };
+    title: {
+        fontFamily: "Inter-SemiBold";
+        fontSize: number;
+        lineHeight: number;
+        color: "#101010";
+        flex: number;
+        marginRight: 12;
+    };
+    trailingTitle: {
+        fontFamily: "Inter-SemiBold";
+        fontSize: number;
+        lineHeight: number;
+        color: "#101010";
+        textAlign: "right";
+    };
+    subtitle: {
+        marginTop: 4;
+    };
+    subtitleText: {
+        fontFamily: "Inter-Regular";
+        fontSize: number;
+        lineHeight: number;
+        color: "#4A5565";
+    };
+    availabilityRow: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        marginTop: 12;
+    };
+    availabilityBar: {
+        width: number;
+        height: number;
+        marginRight: 8;
+        marginTop: number;
+        backgroundColor: "#E85D04";
+        borderRadius: 0;
+    };
+    footerLink: {
+        flexDirection: "row";
+        alignItems: "center";
+        marginTop: 12;
+        alignSelf: "flex-start";
+        gap: 4;
+    };
+    footerLinkText: {
+        fontFamily: "Inter-SemiBold";
+        fontSize: number;
+        lineHeight: number;
+        color: "#3643BA";
+    };
+};
+export {};
+//# sourceMappingURL=delivery-option-card.styles.d.ts.map

package/dist/components/delivery-option-card/delivery-option-card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delivery-option-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-option-card/delivery-option-card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,+BAIzC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}