decathlon-ui 0.1.2 → 0.1.4

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { HeartIcon, StarIcon } from "../../icons";
+import { Badge } from "../badge";
+import { useProductCardStyles } from "./product-card.styles";
+export const ProductCard = ({ variant = "grid", imageUrl, brand, productName, rating, reviewCount, price, isFavorite = false, onFavoritePress, onPress, testID, flags = [], }) => {
+    const styles = useProductCardStyles(variant);
+    const handleFavoritePress = React.useCallback((e) => {
+        e.stopPropagation();
+        onFavoritePress === null || onFavoritePress === void 0 ? void 0 : onFavoritePress();
+    }, [onFavoritePress]);
+    const renderContent = React.useCallback(() => (_jsxs(View, { style: styles.cardContainer, children: [_jsxs(View, { style: styles.imageContainer, children: [_jsx(Image, { resizeMode: "cover", source: { uri: imageUrl }, style: styles.productImage, accessibilityLabel: `Imagem do produto ${productName}` }), ["grid", "shelf"].includes(variant) &&
+                        (flags === null || flags === void 0 ? void 0 : flags.length) > 0 &&
+                        (flags === null || flags === void 0 ? void 0 : flags.map((flag) => (_jsx(Badge, { text: flag.text, style: { position: "absolute", top: 0, left: 0 }, icon: flag.icon }, flag.text)))), variant === "grid" && (_jsx(TouchableOpacity, { style: [
+                            isFavorite ? styles.favoriteButton : styles.unfavoriteButton,
+                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: _jsx(HeartIcon, { size: 20, color: "#101010", fill: isFavorite ? "#101010" : "transparent" }) }))] }), 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" && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#101010", fill: "#101010" }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating }), _jsxs(Text, { style: styles.reviewCountText, children: ["(", reviewCount, ")"] })] })] })), _jsx(View, { style: styles.priceContainer, children: _jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${price}`, children: price }) })] }))] })), [
+        brand,
+        handleFavoritePress,
+        imageUrl,
+        isFavorite,
+        price,
+        productName,
+        rating,
+        reviewCount,
+        styles,
+        variant,
+    ]);
+    if (onPress) {
+        return (_jsx(TouchableOpacity, { style: styles.touchable, onPress: onPress, testID: testID, accessibilityRole: "button", accessibilityLabel: `Produto ${productName}`, children: renderContent() }));
+    }
+    return (_jsx(View, { style: styles.touchable, testID: testID, accessibilityRole: "none", accessibilityLabel: `Produto ${productName}`, children: renderContent() }));
+};

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

@@ -0,0 +1,101 @@
+import type { ProductCardVariant } from "./product-card.types";
+export declare const useProductCardStyles: (variant?: ProductCardVariant) => {
+    cardContainer: {
+        display: "flex";
+        maxWidth: number;
+        flexDirection: "column";
+        alignItems: "stretch";
+    };
+    imageContainer: {
+        borderRadius: number;
+        display: "flex";
+        width: "100%";
+        flexDirection: "column";
+        alignItems: "stretch";
+    };
+    productImage: {
+        position: "relative";
+        display: "flex";
+        aspectRatio: number;
+        gap: number;
+        justifyContent: "space-between";
+        width: number;
+        height: number;
+    };
+    detailsContainer: {
+        display: "none" | "flex";
+        marginTop: number;
+        width: "100%";
+        paddingHorizontal: number;
+        flexDirection: "column";
+        alignItems: "stretch";
+        fontFamily: string;
+    };
+    productInfo: {
+        display: "flex";
+        width: "100%";
+        flexDirection: "column";
+        alignItems: "stretch";
+        fontWeight: "400";
+    };
+    nameContainer: {
+        marginTop: number;
+    };
+    nameText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    priceContainer: {
+        marginTop: number;
+        gap: number;
+    };
+    priceText: {
+        fontSize: number;
+        color: string;
+        fontWeight: "500";
+        lineHeight: number;
+    };
+    ratingContainer: {
+        display: "none" | "flex";
+        flexDirection: "row";
+        marginTop: number;
+        alignItems: "center";
+        gap: number;
+    };
+    reviewCountWrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    reviewCountText: {
+        color: string;
+    };
+    brandText: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    favoriteButton: {
+        display: "none" | "flex";
+        position: "absolute";
+        top: number;
+        right: number;
+        borderRadius: number;
+        padding: number;
+    };
+    unfavoriteButton: {
+        display: "none" | "flex";
+        position: "absolute";
+        top: number;
+        right: number;
+    };
+    ratingText: {
+        color: string;
+    };
+    touchable: {
+        width: "100%";
+        maxWidth: number;
+    };
+};
+//# sourceMappingURL=product-card.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,eAAO,MAAM,oBAAoB,GAAI,UAAS,kBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHxE,CAAC"}

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

@@ -0,0 +1,116 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+export const useProductCardStyles = (variant = "grid") => {
+    return useMemo(() => {
+        const getImageSize = () => {
+            switch (variant) {
+                case "shelf":
+                    return 150;
+                case "lastViewed":
+                    return 112;
+                default:
+                    return 184;
+            }
+        };
+        const imageSize = getImageSize();
+        return StyleSheet.create({
+            cardContainer: {
+                display: "flex",
+                maxWidth: imageSize,
+                flexDirection: "column",
+                alignItems: "stretch",
+            },
+            imageContainer: {
+                borderRadius: 0,
+                display: "flex",
+                width: "100%",
+                flexDirection: "column",
+                alignItems: "stretch",
+            },
+            productImage: {
+                position: "relative",
+                display: "flex",
+                aspectRatio: 1,
+                gap: 20,
+                justifyContent: "space-between",
+                width: imageSize,
+                height: imageSize,
+            },
+            detailsContainer: {
+                display: variant === "lastViewed" ? "none" : "flex",
+                marginTop: 12,
+                width: "100%",
+                paddingHorizontal: 12,
+                flexDirection: "column",
+                alignItems: "stretch",
+                fontFamily: "Inter, sans-serif",
+            },
+            productInfo: {
+                display: "flex",
+                width: "100%",
+                flexDirection: "column",
+                alignItems: "stretch",
+                fontWeight: "400",
+            },
+            nameContainer: {
+                marginTop: 4,
+            },
+            nameText: {
+                color: "#101010",
+                fontSize: 14,
+                lineHeight: 21,
+            },
+            priceContainer: {
+                marginTop: 8,
+                gap: 8,
+            },
+            priceText: {
+                fontSize: 14,
+                color: "#101010",
+                fontWeight: "500",
+                lineHeight: 16.8,
+            },
+            ratingContainer: {
+                display: variant === "grid" ? "flex" : "none",
+                flexDirection: "row",
+                marginTop: 6,
+                alignItems: "center",
+                gap: 4,
+            },
+            reviewCountWrapper: {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 6,
+            },
+            reviewCountText: {
+                color: "#616161",
+            },
+            brandText: {
+                color: "#616161",
+                fontSize: 10,
+                lineHeight: 10,
+            },
+            favoriteButton: {
+                display: variant === "grid" ? "flex" : "none",
+                position: "absolute",
+                top: 12,
+                right: 12,
+                borderRadius: 20,
+                padding: 8,
+            },
+            unfavoriteButton: {
+                display: variant === "grid" ? "flex" : "none",
+                position: "absolute",
+                top: 12,
+                right: 12,
+            },
+            ratingText: {
+                color: "#383838",
+            },
+            touchable: {
+                width: "100%",
+                maxWidth: imageSize,
+            },
+        });
+    }, [variant]);
+};

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

@@ -0,0 +1,20 @@
+export type ProductCardVariant = "grid" | "shelf" | "lastViewed";
+export interface ProductCardProps {
+    variant?: ProductCardVariant;
+    imageUrl: string;
+    brand: string;
+    productName: string;
+    rating: number;
+    reviewCount: number;
+    price: string;
+    isFavorite?: boolean;
+    onFavoritePress?: () => void;
+    onPress?: () => void;
+    testID?: string;
+    flags?: {
+        name: string;
+        icon: string;
+        text: string;
+    }[];
+}
+//# sourceMappingURL=product-card.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/product-card/product-card.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,EAAE,CAAC;CACL"}

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

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

package/dist/components/product-highlight/index.d.ts

@@ -0,0 +1,3 @@
+export { ProductHighlight, ProductHighlightsContainer, } from "./product-highlight.component";
+export type { ProductHighlightProps, ProductHighlightsContainerProps, } from "./product-highlight.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/product-highlight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,qBAAqB,EACrB,+BAA+B,GAChC,MAAM,2BAA2B,CAAC"}

package/dist/components/product-highlight/index.js

@@ -0,0 +1 @@
+export { ProductHighlight, ProductHighlightsContainer, } from "./product-highlight.component";

package/dist/components/product-highlight/product-highlight.component.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { ProductHighlightProps, ProductHighlightsContainerProps } from "./product-highlight.types";
+export declare const ProductHighlight: React.FC<ProductHighlightProps>;
+export declare const ProductHighlightsContainer: React.FC<ProductHighlightsContainerProps>;
+//# sourceMappingURL=product-highlight.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-highlight.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/product-highlight.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACV,qBAAqB,EACrB,+BAA+B,EAChC,MAAM,2BAA2B,CAAC;AAKnC,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyB5D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,+BAA+B,CAShC,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TouchableOpacity, View } from "react-native";
+import { ChevronRightIcon } from "../../icons";
+import { useProductHighlightStyles } from "./product-highlight.styles";
+export const ProductHighlight = ({ title, onPress, shouldRender = true, testID, }) => {
+    const styles = useProductHighlightStyles();
+    if (!shouldRender) {
+        return null;
+    }
+    return (_jsx(View, { style: styles.highlightContainer, testID: testID, children: _jsxs(TouchableOpacity, { style: styles.highlightButton, onPress: onPress, accessibilityLabel: title, accessibilityRole: "button", children: [_jsx(Text, { style: styles.highlightTitle, children: title }), _jsx(ChevronRightIcon, { size: 20, color: "#101010", style: styles.icon })] }) }));
+};
+export const ProductHighlightsContainer = ({ children, testID }) => {
+    const styles = useProductHighlightStyles();
+    return (_jsx(View, { style: styles.outerContainer, testID: testID, children: _jsx(View, { style: styles.container, children: children }) }));
+};

package/dist/components/product-highlight/product-highlight.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<import("./product-highlight.types").ProductHighlightsContainerProps>;
+    argTypes: {};
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+    decorators: ((Story: React.FC<any>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHiddenItem: Story;
+//# sourceMappingURL=product-highlight.d.ts.map

package/dist/components/product-highlight/product-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-highlight.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/product-highlight.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI;;;;;;;yBAQE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;CAM0B,CAAC;AAEpD,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC"}

package/dist/components/product-highlight/product-highlight.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { ProductHighlight, ProductHighlightsContainer } from "./product-highlight.component";
+const meta = {
+    title: "Components/ProductHighlight",
+    component: ProductHighlightsContainer,
+    argTypes: {},
+    args: {
+        children: _jsx(_Fragment, {}),
+    },
+    decorators: [
+        (Story) => (_jsx(View, { style: { padding: 16 }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const handlePress = () => {
+    // action("highlight-pressed")("Highlight was pressed");
+};
+export const Default = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(ProductHighlight, { title: "Sobre o produto", testID: "about-highlight", onPress: () => handlePress() }), _jsx(ProductHighlight, { title: "Caracter\u00EDsticas", testID: "features-highlight", onPress: () => handlePress() }), _jsx(ProductHighlight, { title: "Informa\u00E7\u00F5es t\u00E9cnicas", testID: "tech-info-highlight", onPress: () => handlePress() })] })),
+    },
+};
+export const WithHiddenItem = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(ProductHighlight, { title: "Sobre o produto", testID: "about-highlight", onPress: () => handlePress() }), _jsx(ProductHighlight, { title: "Caracter\u00EDsticas", testID: "features-highlight", onPress: () => handlePress() }), _jsx(ProductHighlight, { title: "Informa\u00E7\u00F5es t\u00E9cnicas", shouldRender: false, testID: "tech-info-highlight", onPress: () => handlePress() })] })),
+    },
+};

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

@@ -0,0 +1,27 @@
+export declare const useProductHighlightStyles: () => {
+    container: {
+        width: "100%";
+    };
+    highlightContainer: {
+        marginBottom: 8;
+    };
+    highlightButton: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        paddingVertical: 12;
+        width: "100%";
+    };
+    highlightTitle: {
+        fontSize: 20;
+        fontWeight: "500";
+        color: "#101010";
+    };
+    icon: {
+        marginLeft: 8;
+    };
+    outerContainer: {
+        width: "100%";
+    };
+};
+//# sourceMappingURL=product-highlight.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-highlight.styles.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/product-highlight.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;CAiCrC,CAAC"}

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

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useProductHighlightStyles = () => {
+    const theme = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            width: "100%",
+        },
+        highlightContainer: {
+            marginBottom: theme.spacing.xs,
+        },
+        highlightButton: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingVertical: theme.spacing.sm,
+            width: "100%",
+        },
+        highlightTitle: {
+            fontSize: theme.fonts.sizes.md,
+            fontWeight: "500",
+            color: theme.colors.textPrimary,
+        },
+        icon: {
+            marginLeft: theme.spacing.xs,
+        },
+        outerContainer: {
+            width: "100%",
+        },
+    }), [theme]);
+};

package/dist/components/product-highlight/product-highlight.types.d.ts

@@ -0,0 +1,34 @@
+export interface ProductHighlightProps {
+    /**
+     * Título da seção
+     */
+    title: string;
+    /**
+     * Função chamada quando a seção é pressionada
+     */
+    onPress?: () => void;
+    /**
+     * Determina se a seção deve ser renderizada
+     * @default true
+     */
+    shouldRender?: boolean;
+    /**
+     * ID de teste para o componente
+     */
+    testID?: string;
+}
+export interface ProductHighlightsContainerProps {
+    /**
+     * Título do container
+     */
+    title?: string;
+    /**
+     * Filhos do container (componentes ProductHighlight)
+     */
+    children: React.ReactNode;
+    /**
+     * ID de teste para o componente
+     */
+    testID?: string;
+}
+//# sourceMappingURL=product-highlight.types.d.ts.map

package/dist/components/product-highlight/product-highlight.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-highlight.types.d.ts","sourceRoot":"","sources":["../../../src/components/product-highlight/product-highlight.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,+BAA+B;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/product-highlight/product-highlight.types.js

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

package/dist/components/product-list-item/index.d.ts

@@ -0,0 +1,3 @@
+export { ProductListItem } from "./product-list-item.component";
+export type { ProductListItemProps } from "./product-list-item.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/product-list-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/product-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,YAAY,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/product-list-item/index.js

@@ -0,0 +1 @@
+export { ProductListItem } from "./product-list-item.component";

package/dist/components/product-list-item/product-list-item.component.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { ProductListItemProps } from "./product-list-item.types";
+export declare const ProductListItem: React.FC<ProductListItemProps>;
+//# sourceMappingURL=product-list-item.component.d.ts.map

package/dist/components/product-list-item/product-list-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/product-list-item/product-list-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4J1D,CAAC"}

package/dist/components/product-list-item/product-list-item.component.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { MinusIcon, PlusIcon, TrashIcon } from "../../icons";
+import { Loading } from "../loading";
+import { useProductListItemStyles } from "./product-list-item.styles";
+export const ProductListItem = ({ imageUrl, productName, color, size, price, quantity, availableUnits, cashbackText, onAdd, onRemove, onDelete, loadingAdd = false, loadingRemove = false, loadingDelete = false, testID, showControls = true, }) => {
+    const styles = useProductListItemStyles();
+    const renderQuantityControls = () => (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", width: "100%" }, children: [_jsxs(View, { style: styles.quantityContainer, children: [_jsx(TouchableOpacity, { style: [
+                            styles.quantityButton,
+                            quantity <= 1 && styles.quantityButtonDisabled,
+                        ], onPress: onRemove, disabled: quantity <= 1 || loadingRemove, accessibilityLabel: "Diminuir quantidade", accessibilityRole: "button", children: loadingRemove ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(MinusIcon, { size: 16, color: "#101010" })) }), _jsx(Text, { style: styles.quantityText, children: quantity }), _jsx(TouchableOpacity, { style: [
+                            styles.quantityButton,
+                            availableUnits !== undefined &&
+                                quantity >= availableUnits &&
+                                styles.quantityButtonDisabled,
+                        ], onPress: onAdd, disabled: (availableUnits !== undefined && quantity >= availableUnits) ||
+                            loadingAdd, accessibilityLabel: "Aumentar quantidade", accessibilityRole: "button", children: loadingAdd ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(PlusIcon, { size: 16, color: "#101010" })) })] }), _jsx(TouchableOpacity, { style: styles.deleteButton, onPress: onDelete, accessibilityLabel: "Remover do carrinho", accessibilityRole: "button", disabled: loadingDelete, children: loadingDelete ? (_jsx(View, { style: styles.loadingContainer, children: _jsx(Loading, { size: 16, source: require("../../assets/animations/loading-animation.json") }) })) : (_jsx(TrashIcon, { size: 20, color: "#101010" })) })] }));
+    return (_jsxs(View, { style: styles.container, testID: testID, children: [_jsxs(View, { style: styles.topSection, children: [_jsx(View, { style: styles.imageContainer, children: _jsx(Image, { source: { uri: imageUrl }, style: styles.productImage, resizeMode: "cover", accessibilityLabel: `Imagem do produto ${productName}` }) }), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.header, children: [cashbackText && (_jsx(View, { style: styles.cashbackBadge, children: _jsx(Text, { style: styles.cashbackText, children: cashbackText }) })), _jsx(Text, { style: styles.productName, numberOfLines: 2, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }), _jsxs(View, { style: styles.infoRow, children: [color && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.infoLabel, children: "Cor:" }), _jsx(Text, { style: styles.infoValue, children: color })] })), color && size && _jsx(Text, { style: styles.infoLabel, children: " | " }), size && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.infoLabel, children: "Tamanho:" }), _jsx(Text, { style: styles.infoValue, children: size })] }))] })] }), _jsxs(View, { style: styles.priceContainer, children: [_jsx(Text, { style: styles.price, accessibilityLabel: `Preço: ${price}`, children: price }), availableUnits && (_jsxs(Text, { style: styles.availableUnits, children: [availableUnits, " un."] }))] })] })] }), showControls && (_jsx(View, { style: styles.controlsContainer, children: renderQuantityControls() }))] }));
+};

package/dist/components/product-list-item/product-list-item.styles.d.ts

@@ -0,0 +1,127 @@
+export declare const useProductListItemStyles: () => {
+    container: {
+        backgroundColor: "#FFFFFF";
+        padding: 16;
+        borderBottomWidth: number;
+        borderBottomColor: "#D9DDE1";
+    };
+    topSection: {
+        flexDirection: "row";
+        marginBottom: 16;
+        gap: 24;
+    };
+    imageContainer: {
+        width: number;
+        height: number;
+        marginRight: 16;
+    };
+    productImage: {
+        width: number;
+        height: number;
+        borderRadius: 2;
+    };
+    contentContainer: {
+        flex: number;
+        justifyContent: "space-between";
+    };
+    header: {
+        marginBottom: 4;
+    };
+    cashbackBadge: {
+        backgroundColor: "#F7F8F9";
+        paddingHorizontal: 8;
+        paddingVertical: 2;
+        borderRadius: 2;
+        alignSelf: "flex-start";
+        marginBottom: 4;
+    };
+    cashbackText: {
+        fontSize: number;
+        color: "#616161";
+    };
+    productName: {
+        fontSize: number;
+        color: "#101010";
+        fontWeight: "500";
+        marginBottom: 4;
+    };
+    infoRow: {
+        flexDirection: "row";
+        marginBottom: 4;
+    };
+    infoLabel: {
+        fontSize: number;
+        color: "#616161";
+        marginRight: 4;
+    };
+    infoValue: {
+        fontSize: number;
+        color: "#383838";
+    };
+    priceContainer: {
+        flexDirection: "row";
+        justifyContent: "flex-start";
+        alignItems: "flex-end";
+        marginTop: 12;
+    };
+    price: {
+        fontSize: number;
+        fontWeight: "600";
+        color: "#101010";
+    };
+    availableUnits: {
+        fontFamily: "Inter-SemiBold";
+        fontWeight: "600";
+        fontSize: 12;
+        letterSpacing: number;
+        color: "#101010";
+        marginLeft: 12;
+    };
+    controlsContainer: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        height: number;
+    };
+    quantityContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        borderWidth: number;
+        borderColor: "#D9DDE1";
+        borderRadius: 360;
+        flex: number;
+    };
+    quantityButton: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    quantityButtonDisabled: {
+        borderColor: "#EFF1F3";
+    };
+    deleteButton: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        marginLeft: 12;
+        borderWidth: number;
+        borderColor: "#D9DDE1";
+        borderRadius: 360;
+    };
+    quantityText: {
+        width: number;
+        textAlign: "center";
+        fontSize: number;
+        color: "#101010";
+    };
+    loadingContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};
+//# sourceMappingURL=product-list-item.styles.d.ts.map

package/dist/components/product-list-item/product-list-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/product-list-item/product-list-item.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIpC,CAAC"}