decathlon-ui 0.3.50 → 2.0.0

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

@@ -0,0 +1,168 @@
+import { Platform, StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useDeliveryOptionCardStyles = ({ tone, selected, disabled = false, }) => {
+    const theme = useTheme();
+    const effectiveSelected = selected && !disabled;
+    const accent = tone === "featured"
+        ? theme.colors.deliveryOptionFeatured
+        : theme.colors.primary;
+    const borderWidth = effectiveSelected
+        ? theme.borderWidth.md
+        : theme.borderWidth.sm;
+    const borderColor = disabled || !effectiveSelected
+        ? theme.colors.borderDeliveryIdle
+        : accent;
+    const ringShadow = Platform.OS === "ios" && effectiveSelected
+        ? {
+            shadowColor: tone === "featured"
+                ? theme.colors.deliveryOptionFeatured
+                : theme.colors.primary,
+            shadowOffset: { width: 0, height: 0 },
+            shadowOpacity: tone === "featured" ? 0.15 : 0.1,
+            shadowRadius: 2,
+        }
+        : {};
+    return StyleSheet.create({
+        card: {
+            backgroundColor: theme.colors.white,
+            borderRadius: theme.radius.none,
+            borderWidth,
+            borderColor,
+            paddingHorizontal: theme.spacing.default,
+            paddingVertical: theme.spacing.sm,
+            opacity: disabled ? 0.55 : 1,
+            ...ringShadow,
+        },
+        topRow: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+        },
+        leadingCluster: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            flex: 1,
+            marginRight: theme.spacing.xs,
+        },
+        badgesColumn: {
+            flex: 1,
+            marginLeft: theme.spacing.xs,
+        },
+        recommendedBadge: {
+            flexDirection: "row",
+            alignItems: "center",
+            alignSelf: "flex-start",
+            backgroundColor: theme.colors.backgroundDeliveryRecommendedBadge,
+            paddingHorizontal: theme.spacing.xs,
+            paddingVertical: 5.5,
+            gap: theme.spacing.xxs,
+        },
+        recommendedText: {
+            fontFamily: theme.fonts.inter.bold,
+            fontSize: theme.fonts.sizes.xxxs,
+            lineHeight: 15,
+            letterSpacing: 0.25,
+            textTransform: "uppercase",
+            color: theme.colors.white,
+        },
+        advantageousBadge: {
+            alignSelf: "flex-start",
+            marginTop: theme.spacing.xxs,
+            backgroundColor: theme.colors.backgroundDeliveryAdvantageBadge,
+            paddingHorizontal: theme.spacing.xs,
+            paddingVertical: 5.5,
+        },
+        advantageousText: {
+            fontFamily: theme.fonts.inter.bold,
+            fontSize: theme.fonts.sizes.xxxs,
+            lineHeight: 15,
+            letterSpacing: 0.25,
+            textTransform: "uppercase",
+            color: theme.colors.textDeliveryAdvantageBadge,
+        },
+        radioOuterSelected: {
+            width: 20,
+            height: 20,
+            borderRadius: theme.radius.round,
+            borderWidth: theme.borderWidth.md,
+            borderColor: accent,
+            backgroundColor: accent,
+            alignItems: "center",
+            justifyContent: "center",
+            marginLeft: theme.spacing.xs,
+        },
+        radioOuterIdle: {
+            width: 20,
+            height: 20,
+            borderRadius: theme.radius.round,
+            borderWidth: theme.borderWidth.md,
+            borderColor: theme.colors.borderDeliveryRadioIdle,
+            backgroundColor: theme.colors.white,
+            alignItems: "center",
+            justifyContent: "center",
+            marginLeft: theme.spacing.xs,
+        },
+        radioInner: {
+            width: 8,
+            height: 8,
+            borderRadius: theme.radius.round,
+            backgroundColor: theme.colors.white,
+        },
+        titleRow: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: theme.spacing.sm,
+        },
+        title: {
+            fontFamily: theme.fonts.inter.semiBold,
+            fontSize: 14,
+            lineHeight: 18.13,
+            color: theme.colors.textPrimary,
+            flex: 1,
+            marginRight: theme.spacing.sm,
+        },
+        trailingTitle: {
+            fontFamily: theme.fonts.inter.semiBold,
+            fontSize: 14,
+            lineHeight: 18.13,
+            color: theme.colors.textPrimary,
+            textAlign: "right",
+        },
+        subtitle: {
+            marginTop: theme.spacing.xxs,
+        },
+        subtitleText: {
+            fontFamily: theme.fonts.inter.regular,
+            fontSize: 13,
+            lineHeight: 17.88,
+            color: theme.colors.textDeliveryMuted,
+        },
+        availabilityRow: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            marginTop: theme.spacing.sm,
+        },
+        availabilityBar: {
+            width: 5,
+            height: 8,
+            marginRight: theme.spacing.xs,
+            marginTop: 4,
+            backgroundColor: theme.colors.deliveryAvailabilityIndicator,
+            borderRadius: theme.radius.none,
+        },
+        footerLink: {
+            flexDirection: "row",
+            alignItems: "center",
+            marginTop: theme.spacing.sm,
+            alignSelf: "flex-start",
+            gap: theme.spacing.xxs,
+        },
+        footerLinkText: {
+            fontFamily: theme.fonts.inter.semiBold,
+            fontSize: 13,
+            lineHeight: 19.5,
+            color: theme.colors.primary,
+        },
+    });
+};

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+/** Tom visual da opção — handoff: featured = verde (sucesso), default = marca (azul). */
+export type DeliveryOptionTone = "featured" | "default";
+export type DeliveryOptionCardProps = {
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    tone?: DeliveryOptionTone;
+    /** Equivalente ao handoff · bloqueia toque e aplica tratamento visual do estado indisponível */
+    disabled?: boolean;
+    /** Estado selecionado (borda 2px + anel conforme DS checkout) — ignorado visualmente quando `disabled` */
+    selected?: boolean;
+    /** Lista de tags / badges acima do título — substitui `showRecommendedBadge` + `advantageousLabel` quando definido */
+    tags?: ReactNode;
+    /** Ao tocar no cartão inteiro */
+    onPress?: () => void;
+    leadingIcon?: ReactNode;
+    showRecommendedBadge?: boolean;
+    recommendedBadgeIcon?: ReactNode;
+    advantageousLabel?: string;
+    title: string;
+    trailingTitle?: string;
+    subtitle?: ReactNode;
+    /** Alias de `subtitle` (layouts antigos) */
+    description?: ReactNode;
+    /** Barra lateral de contexto (ex.: aviso misto casa/loja) */
+    showAvailabilityIndicator?: boolean;
+    availabilitySummary?: ReactNode;
+    changeStoreLabel?: string;
+    onChangeStorePress?: () => void;
+};
+//# sourceMappingURL=delivery-option-card.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"delivery-option-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-option-card/delivery-option-card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,yFAAyF;AACzF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,SAAS,CAAC;AAExD,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sHAAsH;IACtH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export { DeliveryOptionCard } from "./delivery-option-card.component";
+export type { DeliveryOptionCardProps, DeliveryOptionTone, } from "./delivery-option-card.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-option-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC"}

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

@@ -0,0 +1 @@
+export { DeliveryOptionCard } from "./delivery-option-card.component";

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.component.d.ts

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

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delivery-orientation-banner.component.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-orientation-banner/delivery-orientation-banner.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAiC1F,eAAO,MAAM,yBAAyB,4DAErC,CAAC"}

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.component.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Text, View } from "react-native";
+import { InfoIcon } from "../../icons";
+import { useTheme } from "../../themes";
+import { useDeliveryOrientationBannerStyles } from "./delivery-orientation-banner.styles";
+const DeliveryOrientationBannerComponent = ({ testID, style, icon, line1, emphasis, afterEmphasis = "", line3, }) => {
+    const styles = useDeliveryOrientationBannerStyles();
+    const { colors } = useTheme();
+    return (_jsxs(View, { style: [styles.container, style], testID: testID, children: [_jsx(View, { style: styles.iconWrap, children: icon !== null && icon !== void 0 ? icon : _jsx(InfoIcon, { size: 20, color: colors.iconInformation }) }), _jsxs(View, { style: styles.textBlock, children: [_jsx(Text, { style: styles.line1, children: line1 }), _jsxs(Text, { style: styles.regular, children: [_jsx(Text, { style: styles.emphasis, children: emphasis }), afterEmphasis] }), _jsx(Text, { style: styles.regular, children: line3 })] })] }));
+};
+export const DeliveryOrientationBanner = React.memo(DeliveryOrientationBannerComponent);
+DeliveryOrientationBanner.displayName = "DeliveryOrientationBanner";

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.styles.d.ts

@@ -0,0 +1,38 @@
+export declare const useDeliveryOrientationBannerStyles: () => {
+    container: {
+        flexDirection: "row";
+        alignItems: "flex-start";
+        paddingVertical: 12;
+        paddingHorizontal: 14;
+        backgroundColor: "#EFF5FF";
+        borderWidth: 1;
+        borderColor: "#DBE7FF";
+        borderRadius: 0;
+    };
+    iconWrap: {
+        marginTop: number;
+        marginRight: 12;
+    };
+    textBlock: {
+        flex: number;
+    };
+    line1: {
+        fontFamily: "Inter-Regular";
+        fontSize: number;
+        lineHeight: number;
+        color: "#364153";
+    };
+    emphasis: {
+        fontFamily: "Inter-SemiBold";
+        fontSize: number;
+        lineHeight: number;
+        color: "#101010";
+    };
+    regular: {
+        fontFamily: "Inter-Regular";
+        fontSize: number;
+        lineHeight: number;
+        color: "#364153";
+    };
+};
+//# sourceMappingURL=delivery-orientation-banner.styles.d.ts.map

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delivery-orientation-banner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-orientation-banner/delivery-orientation-banner.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9C,CAAC"}

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.styles.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useDeliveryOrientationBannerStyles = () => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        container: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            paddingVertical: theme.spacing.sm,
+            paddingHorizontal: theme.spacing.default,
+            backgroundColor: theme.colors.backgroundCheckoutOrientacao,
+            borderWidth: theme.borderWidth.sm,
+            borderColor: theme.colors.borderCheckoutOrientacao,
+            borderRadius: theme.radius.none,
+        },
+        iconWrap: {
+            marginTop: 2,
+            marginRight: theme.spacing.sm,
+        },
+        textBlock: {
+            flex: 1,
+        },
+        line1: {
+            fontFamily: theme.fonts.inter.regular,
+            fontSize: 13,
+            lineHeight: 17.88,
+            color: theme.colors.textCheckoutOrientacao,
+        },
+        emphasis: {
+            fontFamily: theme.fonts.inter.semiBold,
+            fontSize: 13,
+            lineHeight: 17.88,
+            color: theme.colors.textPrimary,
+        },
+        regular: {
+            fontFamily: theme.fonts.inter.regular,
+            fontSize: 13,
+            lineHeight: 17.88,
+            color: theme.colors.textCheckoutOrientacao,
+        },
+    });
+};

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+export type DeliveryOrientationBannerProps = {
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
+    /** Ícone à esquerda (ex.: informação) */
+    icon?: ReactNode;
+    /** Primeira linha do texto */
+    line1: string;
+    /** Trecho em destaque (peso semibold) */
+    emphasis: string;
+    /** Continuação na mesma linha, após o destaque */
+    afterEmphasis?: string;
+    /** Linha final */
+    line3: string;
+};
+//# sourceMappingURL=delivery-orientation-banner.types.d.ts.map

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delivery-orientation-banner.types.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-orientation-banner/delivery-orientation-banner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,8BAA8B,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/components/delivery-orientation-banner/delivery-orientation-banner.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/delivery-orientation-banner/index.d.ts

@@ -0,0 +1,3 @@
+export { DeliveryOrientationBanner } from "./delivery-orientation-banner.component";
+export type { DeliveryOrientationBannerProps } from "./delivery-orientation-banner.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/delivery-orientation-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/delivery-orientation-banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,YAAY,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/components/delivery-orientation-banner/index.js

@@ -0,0 +1 @@
+export { DeliveryOrientationBanner } from "./delivery-orientation-banner.component";

package/dist/components/index.d.ts

@@ -11,6 +11,8 @@ export * from "./card/index";
 export * from "./cashback-banner/index";
 export * from "./category-item/index";
 export * from "./checkbox/index";
+export * from "./delivery-option-card/index";
+export * from "./delivery-orientation-banner/index";
 export * from "./event-card/index";
 export * from "./filter-chip/index";
 export * from "./information-card/index";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}

package/dist/components/index.js

@@ -11,6 +11,8 @@ export * from "./card/index";
 export * from "./cashback-banner/index";
 export * from "./category-item/index";
 export * from "./checkbox/index";
+export * from "./delivery-option-card/index";
+export * from "./delivery-orientation-banner/index";
 export * from "./event-card/index";
 export * from "./filter-chip/index";
 export * from "./information-card/index";

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

@@ -1 +1 @@
-{"version":3,"file":"product-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAyO7D,eAAO,MAAM,WAAW,8CAAmC,CAAC"}
+{"version":3,"file":"product-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA8Q7D,eAAO,MAAM,WAAW,8CAAmC,CAAC"}

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Image, Text, TouchableOpacity, View } from "react-native";
-import { HeartFillIcon, HeartIcon, StarIcon } from "../../icons";
+import { AddToBagIcon, HeartFillIcon, HeartIcon, StarIcon } from "../../icons";
 import { useTheme } from "../../themes";
 import { Badge } from "../badge";
 import { Loading } from "../loading";
 import { useProductCardStyles } from "./product-card.styles";
-const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName, rating, reviewCount, price, discountPrice, cashPrice, offerPrice, colorsVariants, isFavorite = false, onFavoritePress, onPress, testID, width, flags = [], showRating = true, isLoadingFavorite = false, customStyles, showFavoriteButton = true, }) => {
+const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName, rating, reviewCount, price, discountPrice, cashPrice, offerPrice, colorsVariants, isFavorite = false, onFavoritePress, onPress, testID, width, flags = [], showRating = true, isLoadingFavorite = false, customStyles, showFavoriteButton = true, onAddToCartPress, }) => {
     const styles = useProductCardStyles(variant, width);
     const theme = useTheme();
     const parsePriceToNumber = React.useCallback((price) => {
@@ -26,6 +26,10 @@ const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName,
         e.stopPropagation();
         onFavoritePress === null || onFavoritePress === void 0 ? void 0 : onFavoritePress();
     }, [onFavoritePress]);
+    const handleAddToCartPress = React.useCallback((e) => {
+        e.stopPropagation();
+        onAddToCartPress === null || onAddToCartPress === void 0 ? void 0 : onAddToCartPress();
+    }, [onAddToCartPress]);
     const renderContent = React.useCallback(() => (_jsxs(View, { style: [styles.cardContainer, customStyles], children: [_jsxs(View, { style: styles.imageContainer, children: [_jsx(Image, { resizeMode: "cover", source: { uri: imageUrl }, style: styles.productImage, accessibilityLabel: `Imagem do produto ${productName}` }), (flags === null || flags === void 0 ? void 0 : flags.some((flag) => { var _a; return (_a = flag.text) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes("produto azul"); })) && (_jsx(View, { style: {
                             position: "absolute",
                             top: 0,
@@ -35,7 +39,7 @@ const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName,
                             height: 55,
                         }, children: _jsx(Image, { source: {
                                 uri: "https://decathlonstore.vtexassets.com/assets/vtex.file-manager-graphql/images/43a62e42-1b09-4a1b-9536-56a8fd6efb4a___57609de553b212bd01a55b5a862948b7.png",
-                            }, style: { width: 50, height: 55 } }) })), ["grid", "shelf"].includes(variant) &&
+                            }, style: { width: 50, height: 55 } }) })), ["grid", "shelf", "shelfWithAddToCart"].includes(variant) &&
                         (flags === null || flags === void 0 ? void 0 : flags.length) > 0 &&
                         (flags === null || flags === void 0 ? void 0 : flags.map((flag, index) => {
                             var _a;
@@ -51,19 +55,33 @@ const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName,
                                 }, icon: flag.icon }, flag.name + index + productName));
                         })), showFavoriteButton && (_jsx(TouchableOpacity, { style: [
                             isFavorite ? styles.favoriteButton : styles.unfavoriteButton,
-                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: isLoadingFavorite ? (_jsx(Loading, { size: 16 })) : isFavorite ? (_jsx(HeartFillIcon, { size: 16, color: "#101010" })) : (_jsx(HeartIcon, { size: 16, color: "#101010" })) }))] }), variant !== "lastViewed" && (_jsxs(View, { style: styles.detailsContainer, children: [_jsxs(View, { style: styles.productInfo, children: [_jsx(Text, { style: styles.brandText, children: brand }), _jsx(View, { style: styles.nameContainer, children: _jsx(Text, { numberOfLines: 3, style: styles.nameText, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }) })] }), variant === "grid" && showRating && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#15181B", filled: true }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating === null || rating === void 0 ? void 0 : rating.toString().replace(/\./g, ",") }), _jsx(Text, { style: styles.reviewCountText, children: reviewCount })] })] })), _jsx(View, { style: styles.priceContainer, children: cashPrice && parsePriceToNumber(cashPrice) < parsePriceToNumber(offerPrice || price) ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço à vista: ${cashPrice}`, children: `${cashPrice} à vista` }), _jsx(Text, { style: styles.priceDiscountText, accessibilityLabel: `Preço original: ${offerPrice || price}`, children: offerPrice || price })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${offerPrice || price}`, children: offerPrice || price }), discountPrice && (_jsx(Text, { style: styles.priceDiscountText, children: discountPrice }))] })) }), colorsVariants && (_jsx(Text, { style: styles.colorsText, children: colorsVariants }))] }))] })), [
+                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: isLoadingFavorite ? (_jsx(Loading, { size: 16 })) : isFavorite ? (_jsx(HeartFillIcon, { size: 16, color: "#101010" })) : (_jsx(HeartIcon, { size: 16, color: "#101010" })) })), variant === "shelfWithAddToCart" && (_jsx(TouchableOpacity, { style: styles.addToCartButton, onPress: handleAddToCartPress, accessibilityLabel: "Adicionar ao carrinho", accessibilityRole: "button", children: _jsx(AddToBagIcon, { color: "#FFFFFF", size: 16 }) }))] }), variant !== "lastViewed" && (_jsxs(View, { style: styles.detailsContainer, children: [_jsxs(View, { style: styles.productInfo, children: [variant !== "shelfWithAddToCart" && (_jsx(Text, { style: styles.brandText, children: brand })), _jsx(View, { style: styles.nameContainer, children: _jsx(Text, { numberOfLines: 3, style: styles.nameText, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }) })] }), variant === "grid" && showRating && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#15181B", filled: true }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating === null || rating === void 0 ? void 0 : rating.toString().replace(/\./g, ",") }), _jsx(Text, { style: styles.reviewCountText, children: reviewCount })] })] })), _jsx(View, { style: styles.priceContainer, children: cashPrice && parsePriceToNumber(cashPrice) < parsePriceToNumber(offerPrice || price) ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.priceText, accessibilityLabel: variant === "shelfWithAddToCart"
+                                        ? `Preço: ${cashPrice}`
+                                        : `Preço à vista: ${cashPrice}`, children: variant === "shelfWithAddToCart"
+                                        ? cashPrice
+                                        : `${cashPrice} à vista` }), _jsx(Text, { style: styles.priceDiscountText, accessibilityLabel: `Preço original: ${offerPrice || price}`, children: offerPrice || price })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${offerPrice || price}`, children: offerPrice || price }), discountPrice && (_jsx(Text, { style: styles.priceDiscountText, children: discountPrice }))] })) }), colorsVariants && (_jsx(Text, { style: styles.colorsText, children: colorsVariants }))] }))] })), [
         brand,
         cashPrice,
+        colorsVariants,
+        customStyles,
+        discountPrice,
+        flags,
+        handleAddToCartPress,
         handleFavoritePress,
         imageUrl,
         isFavorite,
+        isLoadingFavorite,
         offerPrice,
+        onAddToCartPress,
         parsePriceToNumber,
         price,
         productName,
         rating,
         reviewCount,
+        showFavoriteButton,
+        showRating,
         styles,
+        theme.spacing.xxs2,
         variant,
     ]);
     if (onPress) {

package/dist/components/product-card/product-card.styles.d.ts

@@ -9,6 +9,8 @@ export declare const useProductCardStyles: (variant?: ProductCardVariant, custom
         justifyContent: "center";
     };
     imageContainer: {
+        position?: "relative" | undefined;
+        width?: "100%" | undefined;
         borderRadius: number;
         display: "flex";
         flex: number;
@@ -47,8 +49,8 @@ export declare const useProductCardStyles: (variant?: ProductCardVariant, custom
     };
     priceContainer: {
         display: "flex";
-        flexDirection: "column";
-        alignItems: "flex-start";
+        flexDirection: "row" | "column";
+        alignItems: "flex-start" | "center";
         marginTop: number;
         gap: number;
     };
@@ -60,9 +62,10 @@ export declare const useProductCardStyles: (variant?: ProductCardVariant, custom
     };
     priceDiscountText: {
         fontFamily: string;
-        fontWeight: "500";
+        fontWeight: "400";
         fontStyle: "normal";
         fontSize: number;
+        lineHeight: number;
         letterSpacing: number;
         color: string;
         textDecorationLine: "line-through";
@@ -95,6 +98,7 @@ export declare const useProductCardStyles: (variant?: ProductCardVariant, custom
         color: string;
         fontSize: number;
         lineHeight: number;
+        display: "none" | "flex";
     };
     favoriteButton: {
         display: "none" | "flex";
@@ -108,6 +112,18 @@ export declare const useProductCardStyles: (variant?: ProductCardVariant, custom
         top: number;
         right: number;
     };
+    addToCartButton: {
+        display: "none" | "flex";
+        position: "absolute";
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+    };
     ratingText: {
         color: string;
     };

package/dist/components/product-card/product-card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,eAAO,MAAM,oBAAoB,GAC/B,UAAS,kBAA2B,EACpC,cAAc,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IrB,CAAC"}
+{"version":3,"file":"product-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,eAAO,MAAM,oBAAoB,GAC/B,UAAS,kBAA2B,EACpC,cAAc,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JrB,CAAC"}

package/dist/components/product-card/product-card.styles.js

@@ -6,6 +6,7 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
         const getImageSize = () => {
             switch (variant) {
                 case "shelf":
+                case "shelfWithAddToCart":
                     return 150;
                 case "lastViewed":
                     return 112;
@@ -22,7 +23,7 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
             cardContainer: {
                 display: "flex",
                 width: "100%",
-                maxWidth: 184,
+                maxWidth: variant === "shelfWithAddToCart" ? 150 : 184,
                 flexDirection: "column",
                 alignItems: "stretch",
                 justifyContent: "center",
@@ -33,6 +34,9 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
                 flex: 1,
                 justifyContent: "center",
                 alignItems: "center",
+                ...(variant === "shelfWithAddToCart"
+                    ? { position: "relative", width: "100%" }
+                    : {}),
             },
             productImage: {
                 position: "relative",
@@ -57,17 +61,17 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
                 fontWeight: "400",
             },
             nameContainer: {
-                marginTop: 4,
+                marginTop: variant === "shelfWithAddToCart" ? 0 : 4,
             },
             nameText: {
                 color: "#101010",
-                fontSize: 14,
-                lineHeight: 21,
+                fontSize: variant === "shelfWithAddToCart" ? 12 : 14,
+                lineHeight: variant === "shelfWithAddToCart" ? 18 : 21,
             },
             priceContainer: {
                 display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-start",
+                flexDirection: variant === "shelfWithAddToCart" ? "row" : "column",
+                alignItems: variant === "shelfWithAddToCart" ? "center" : "flex-start",
                 marginTop: 8,
                 gap: 8,
             },
@@ -75,13 +79,14 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
                 fontSize: 14,
                 color: "#101010",
                 fontWeight: "500",
-                lineHeight: 16.8,
+                lineHeight: 16.8, // 120%
             },
             priceDiscountText: {
                 fontFamily: "Inter",
-                fontWeight: "500",
-                fontStyle: "normal", // "Medium" não é um valor válido, use "normal"
+                fontWeight: "400",
+                fontStyle: "normal",
                 fontSize: 10,
+                lineHeight: 10,
                 letterSpacing: 0,
                 color: "#616161",
                 textDecorationLine: "line-through",
@@ -114,6 +119,7 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
                 color: "#616161",
                 fontSize: 10,
                 lineHeight: 10,
+                display: variant === "shelfWithAddToCart" ? "none" : "flex",
             },
             favoriteButton: {
                 display: variant === "grid" ? "flex" : "none",
@@ -127,6 +133,18 @@ export const useProductCardStyles = (variant = "grid", customWidth) => {
                 top: 12,
                 right: 12,
             },
+            addToCartButton: {
+                display: variant === "shelfWithAddToCart" ? "flex" : "none",
+                position: "absolute",
+                right: 8,
+                bottom: 8,
+                width: 32,
+                height: 32,
+                borderRadius: 16,
+                backgroundColor: "#101010",
+                justifyContent: "center",
+                alignItems: "center",
+            },
             ratingText: {
                 color: "#383838",
             },