decathlon-ui 0.2.2 → 0.2.3

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { AccordionProps } from "./accordion.types";
-export declare const Accordion: React.FC<AccordionProps>;
+export declare const Accordion: React.NamedExoticComponent<AccordionProps>;
 //# sourceMappingURL=accordion.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoF9C,CAAC"}
+{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAsFnD,eAAO,MAAM,SAAS,4CAAiC,CAAC"}

package/dist/components/accordion/accordion.component.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-// import { ChevronDownIcon, ChevronUpIcon } from "../../icons";
 import { LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
+import { MinusIcon, PlusIcon } from "../../icons";
 import { useTheme } from "../../themes";
 import { useAccordionStyles } from "./accordion.styles";
-export const Accordion = ({ items = [], initialExpandedItems = [], allowMultiple = true, testID, }) => {
+const AccordionComponent = ({ items = [], initialExpandedItems = [], allowMultiple = true, testID, }) => {
     const styles = useAccordionStyles();
     const { colors } = useTheme();
     const [expandedItems, setExpandedItems] = React.useState(initialExpandedItems);
@@ -32,17 +32,7 @@ export const Accordion = ({ items = [], initialExpandedItems = [], allowMultiple
     if (!items || items.length === 0) {
         return null;
     }
-    return (_jsx(View, { style: styles.container, testID: testID, children: items.map((item) => (_jsxs(View, { style: styles.item, children: [_jsxs(TouchableOpacity, { style: styles.header, onPress: () => handleToggle(item.id), activeOpacity: 0.7, accessibilityRole: "button", accessibilityState: { expanded: isExpanded(item.id) }, accessibilityHint: "Toque para expandir ou recolher", children: [_jsx(Text, { style: styles.title, children: item.title }), isExpanded(item.id) ? (_jsx(Text, { children: "\u2191" })
-                        // <ChevronUpIcon
-                        //   size={20}
-                        //   color={colors.textPrimary}
-                        //   style={styles.icon}
-                        // />
-                        ) : (_jsx(Text, { children: "\u2193" })
-                        // <ChevronDownIcon
-                        //   size={20}
-                        //   color={colors.textPrimary}
-                        //   style={styles.icon}
-                        // />
-                        )] }), isExpanded(item.id) && (_jsx(View, { style: styles.content, children: renderContent(item.content) }))] }, item.id))) }));
+    return (_jsx(View, { style: styles.container, testID: testID, children: items.map((item) => (_jsxs(View, { style: styles.item, children: [_jsxs(TouchableOpacity, { style: styles.header, onPress: () => handleToggle(item.id), activeOpacity: 0.7, accessibilityRole: "button", accessibilityState: { expanded: isExpanded(item.id) }, accessibilityHint: "Toque para expandir ou recolher", children: [_jsx(Text, { style: styles.title, children: item.title }), isExpanded(item.id) ? (_jsx(MinusIcon, { size: 20, color: colors.textPrimary, style: styles.icon })) : (_jsx(PlusIcon, { size: 20, color: colors.textPrimary, style: styles.icon }))] }), isExpanded(item.id) && (_jsx(View, { style: styles.content, children: renderContent(item.content) }))] }, item.id))) }));
 };
+export const Accordion = React.memo(AccordionComponent);
+Accordion.displayName = "Accordion";

package/dist/components/action-button/action-button.component.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { ActionButtonProps } from "./action-button.types";
-export declare const ActionButton: React.FC<ActionButtonProps>;
+export declare const ActionButton: React.NamedExoticComponent<ActionButtonProps>;
 //# sourceMappingURL=action-button.component.d.ts.map

package/dist/components/action-button/action-button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-button.component.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/action-button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsDpD,CAAC"}
+{"version":3,"file":"action-button.component.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/action-button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAqD/D,eAAO,MAAM,YAAY,+CAAoC,CAAC"}

package/dist/components/action-button/action-button.component.js

@@ -4,13 +4,11 @@ import { Text, TouchableOpacity, View } from "react-native";
 import { ChevronRightIcon, HelpCircleIcon } from "../../icons";
 import { useTheme } from "../../themes";
 import { useActionButtonStyles } from "./action-button.styles";
-export const ActionButton = ({ label = "Preciso de ajuda", icon, iconSize = 24, iconColor, iconBackgroundColor, onPress, disabled = false, testID, }) => {
+const ActionButtonComponent = ({ label = "Preciso de ajuda", icon, iconSize = 24, iconColor, iconBackgroundColor, onPress, disabled = false, testID, }) => {
     const styles = useActionButtonStyles();
     const { colors } = useTheme();
-    const renderIcon = () => {
-        // Definir a cor do ícone para branco como padrão ou usar a cor personalizada
-        const finalIconColor = iconColor || colors.white;
-        // Se for fornecido um ícone personalizado
+    const finalIconColor = iconColor || colors.backgroundAction1;
+    const iconElement = React.useMemo(() => {
         if (icon) {
             if (React.isValidElement(icon)) {
                 return icon;
@@ -19,11 +17,12 @@ export const ActionButton = ({ label = "Preciso de ajuda", icon, iconSize = 24,
                 return icon({ size: iconSize, color: finalIconColor });
             }
         }
-        // Usar o ícone padrão (HelpCircle)
         return _jsx(HelpCircleIcon, { size: iconSize, color: finalIconColor });
-    };
+    }, [icon, iconSize, finalIconColor]);
     return (_jsxs(TouchableOpacity, { style: [styles.container, disabled && styles.disabled], onPress: onPress, disabled: disabled, testID: testID, accessibilityRole: "button", accessibilityLabel: label, accessibilityState: { disabled }, children: [_jsxs(View, { style: styles.contentContainer, children: [_jsx(View, { style: [
                             styles.iconContainer,
                             iconBackgroundColor && { backgroundColor: iconBackgroundColor },
-                        ], children: renderIcon() }), _jsx(Text, { style: styles.label, children: label })] }), _jsx(ChevronRightIcon, { size: 20, color: colors.textTertiary })] }));
+                        ], children: iconElement }), _jsx(Text, { style: styles.label, children: label })] }), _jsx(ChevronRightIcon, { size: 20, color: colors.textTertiary })] }));
 };
+export const ActionButton = React.memo(ActionButtonComponent);
+ActionButton.displayName = "ActionButton";

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

@@ -1,7 +1,4 @@
+import React from "react";
 import type { BadgeProps } from "./badge.types";
-/**
- * Badge - Componente para exibição de etiquetas ou marcadores
- * Suporta ícones SVG
- */
-export declare const Badge: ({ text, variant, size, style, textStyle, icon, iconPosition, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: React.MemoExoticComponent<({ text, variant, size, style, textStyle, icon, iconPosition, }: BadgeProps) => import("react/jsx-runtime").JSX.Element>;
 //# 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":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,KAAK,GAAI,gEAQnB,UAAU,4CA6CZ,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;AA6DhD,eAAO,MAAM,KAAK,6FA/Cf,UAAU,6CA+CkC,CAAC"}

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, View } from "react-native";
+import React from "react";
 import { useBadgeStyles } from "./badge.styles";
 /**
  * Badge - Componente para exibição de etiquetas ou marcadores
  * Suporta ícones SVG
  */
-export const Badge = ({ text, variant = "default", size = "medium", style, textStyle, icon, iconPosition = "left", }) => {
+const BadgeComponent = ({ text, variant = "default", size = "medium", style, textStyle, icon, iconPosition = "left", }) => {
     const styles = useBadgeStyles(variant, size);
     const renderIcon = () => {
         if (!icon) {
@@ -32,3 +33,5 @@ export const Badge = ({ text, variant = "default", size = "medium", style, textS
                     textStyle
                 ], children: text }), icon && iconPosition === "right" && renderIcon()] }));
 };
+export const Badge = React.memo(BadgeComponent);
+Badge.displayName = "Badge";

package/dist/components/banner-carousel/banner-carousel.component.d.ts

@@ -0,0 +1,5 @@
+import { BannerCarouselProps } from './banner-carousel.types';
+declare function BannerCarouselComponent({ items, onItemPress }: BannerCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const BannerCarousel: import("react").MemoExoticComponent<typeof BannerCarouselComponent>;
+export {};
+//# sourceMappingURL=banner-carousel.component.d.ts.map

package/dist/components/banner-carousel/banner-carousel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-carousel.component.d.ts","sourceRoot":"","sources":["../../../src/components/banner-carousel/banner-carousel.component.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,mBAAmB,EAAc,MAAM,yBAAyB,CAAC;AAI1E,iBAAS,uBAAuB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,mBAAmB,kDAqG3E;AAED,eAAO,MAAM,cAAc,qEAAgC,CAAC"}

package/dist/components/banner-carousel/banner-carousel.component.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useRef } from 'react';
+import { Animated, FlatList, Image, TouchableOpacity, View, } from 'react-native';
+import { ITEM_HEIGHT, ITEM_WIDTH, SPACING, useBannerCarouselStyles, } from './banner-carousel.styles';
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+function BannerCarouselComponent({ items, onItemPress }) {
+    const styles = useBannerCarouselStyles();
+    const flatListRef = useRef(null);
+    const scrollX = useRef(new Animated.Value(0)).current;
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return null;
+    const extendedItems = [...items, ...items, ...items];
+    const handleScroll = Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+        useNativeDriver: true,
+        listener: (event) => {
+            var _a, _b;
+            const offsetX = event.nativeEvent.contentOffset.x;
+            const midPoint = items.length * (ITEM_WIDTH + SPACING);
+            if (offsetX < ITEM_WIDTH + SPACING) {
+                (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({
+                    offset: offsetX + midPoint,
+                    animated: false,
+                });
+            }
+            else if (offsetX > midPoint * 2 - (ITEM_WIDTH + SPACING)) {
+                (_b = flatListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToOffset({
+                    offset: offsetX - midPoint,
+                    animated: false,
+                });
+            }
+        },
+    });
+    const renderItem = useCallback(({ item, index }) => {
+        const inputRange = [
+            (index - 1) * (ITEM_WIDTH + SPACING),
+            index * (ITEM_WIDTH + SPACING),
+            (index + 1) * (ITEM_WIDTH + SPACING),
+        ];
+        const scale = scrollX.interpolate({
+            inputRange,
+            outputRange: [1, 1, 0.9],
+            extrapolate: 'clamp',
+        });
+        const opacity = scrollX.interpolate({
+            inputRange,
+            outputRange: [0.8, 1, 0.8],
+            extrapolate: 'clamp',
+        });
+        const translateY = scrollX.interpolate({
+            inputRange,
+            outputRange: [55, 0, 5],
+            extrapolate: 'clamp',
+        });
+        return (_jsx(Animated.View, { style: [
+                styles.itemContainer,
+                {
+                    transform: [{ scale }, { translateY }],
+                    opacity,
+                },
+            ], children: _jsx(TouchableOpacity, { onPress: () => onItemPress === null || onItemPress === void 0 ? void 0 : onItemPress(item), children: _jsx(Image, { source: { uri: item.image }, style: { width: ITEM_WIDTH, height: ITEM_HEIGHT } }) }) }));
+    }, [onItemPress]);
+    return (_jsx(View, { style: styles.container, children: _jsx(AnimatedFlatList, { ref: flatListRef, data: extendedItems, renderItem: renderItem, horizontal: true, showsHorizontalScrollIndicator: false, onScroll: handleScroll, snapToInterval: ITEM_WIDTH + SPACING, decelerationRate: "fast", getItemLayout: (_, index) => ({
+                length: ITEM_WIDTH + SPACING,
+                offset: (ITEM_WIDTH + SPACING) * index,
+                index,
+            }), keyExtractor: (item, index) => `${item.id}-${index}` }) }));
+}
+export const BannerCarousel = memo(BannerCarouselComponent);

package/dist/components/banner-carousel/banner-carousel.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const ITEM_WIDTH: number;
+export declare const ITEM_HEIGHT = 435;
+export declare const SPACING = 2;
+export declare const useBannerCarouselStyles: () => {
+    container: {
+        width: number;
+        height: number;
+    };
+    itemContainer: {
+        width: number;
+        height: number;
+    };
+    list: {
+        height: "100%";
+    };
+};
+//# sourceMappingURL=banner-carousel.styles.d.ts.map

package/dist/components/banner-carousel/banner-carousel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-carousel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/banner-carousel/banner-carousel.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,QAAsB,CAAC;AAC9C,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,OAAO,IAAI,CAAC;AAEzB,eAAO,MAAM,uBAAuB;;;;;;;;;;;;CAcnC,CAAC"}

package/dist/components/banner-carousel/banner-carousel.styles.js

@@ -0,0 +1,20 @@
+import { Dimensions, StyleSheet } from "react-native";
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+export const ITEM_WIDTH = SCREEN_WIDTH * 0.85;
+export const ITEM_HEIGHT = 435;
+export const SPACING = 2;
+export const useBannerCarouselStyles = () => {
+    return StyleSheet.create({
+        container: {
+            width: SCREEN_WIDTH,
+            height: ITEM_HEIGHT,
+        },
+        itemContainer: {
+            width: ITEM_WIDTH,
+            height: ITEM_HEIGHT,
+        },
+        list: {
+            height: "100%",
+        },
+    });
+};

package/dist/components/banner-carousel/banner-carousel.types.d.ts

@@ -0,0 +1,11 @@
+export interface BannerItem {
+    id: string;
+    image: string;
+    text: string;
+    label: string;
+}
+export interface BannerCarouselProps {
+    items: BannerItem[];
+    onItemPress?: (item: BannerItem) => void;
+}
+//# sourceMappingURL=banner-carousel.types.d.ts.map

package/dist/components/banner-carousel/banner-carousel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-carousel.types.d.ts","sourceRoot":"","sources":["../../../src/components/banner-carousel/banner-carousel.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CAC1C"}

package/dist/components/banner-carousel/banner-carousel.types.js

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

package/dist/components/banner-carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { BannerCarousel } from "./banner-carousel.component";
+export type { BannerCarouselProps, BannerItem } from "./banner-carousel.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/banner-carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/banner-carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/banner-carousel/index.js

@@ -0,0 +1 @@
+export { BannerCarousel } from "./banner-carousel.component";

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { ButtonProps } from "./button.props";
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.NamedExoticComponent<ButtonProps>;
 //# sourceMappingURL=button.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAiB,MAAM,gBAAgB,CAAC;AAG5D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiCxC,CAAC"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAiB,MAAM,gBAAgB,CAAC;AAsC5D,eAAO,MAAM,MAAM,yCAA8B,CAAC"}

package/dist/components/button/button.component.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Text, TouchableOpacity } from "react-native";
-import Animation from "../../assets/animations/loading-animation.json";
+import { useTheme } from "../../themes";
 import { Loading } from "../loading";
 import { useButtonStyles } from "./button.styles";
-export const Button = ({ label, loading, variant, fullWidth, size, disabled, ...rest }) => {
+const ButtonComponent = ({ label, loading, variant, fullWidth, size, disabled, ...rest }) => {
     const buttonStyle = useButtonStyles({
         variant: variant,
         fullWidth,
         size,
     });
     const { icon: Icon } = rest;
+    const { colors } = useTheme();
     return (_jsx(TouchableOpacity, { style: [buttonStyle.container, disabled && buttonStyle.disabled], ...rest, children: loading ? (
         // <ActivityIndicator color="#fff" size="small" animating={true} />
-        _jsx(Loading, { source: Animation, size: 28, containerStyle: { padding: 0 } })) : (_jsxs(_Fragment, { children: [rest.icon && _jsx(Icon, { stroke: 0.5, color: "#fff" }), _jsx(Text, { style: buttonStyle.buttonText, children: label })] })) }));
+        _jsx(Loading, { size: 28, containerStyle: { padding: 0 } })) : (_jsxs(_Fragment, { children: [rest.icon && _jsx(Icon, { stroke: 0.5, color: colors.backgroundAction1 }), _jsx(Text, { style: buttonStyle.buttonText, children: label })] })) }));
 };
+export const Button = React.memo(ButtonComponent);
+Button.displayName = "Button";

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { CardProps } from "./card.types";
-export declare const Card: React.FC<CardProps>;
+export declare const Card: React.NamedExoticComponent<CardProps>;
 //# sourceMappingURL=card.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4EpC,CAAC"}
+{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAgFzC,eAAO,MAAM,IAAI,uCAA4B,CAAC"}

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { ChevronRightIcon } from "../../icons";
 import { useTheme } from "../../themes";
 import { useCardStyles } from "./card.styles";
-export const Card = ({ children, title, subtitle, icon, actionIcon, onPress, disabled = false, style, titleStyle, subtitleStyle, testID, }) => {
+const CardComponent = ({ children, title, subtitle, icon, actionIcon, onPress, disabled = false, style, titleStyle, subtitleStyle, testID, }) => {
     const styles = useCardStyles();
     const { colors } = useTheme();
     const renderIcon = () => {
@@ -47,3 +48,5 @@ export const Card = ({ children, title, subtitle, icon, actionIcon, onPress, dis
         : {};
     return (_jsxs(CardContainer, { style: [styles.container, disabled && styles.disabled, style], testID: testID, ...containerProps, children: [renderIcon(), _jsxs(View, { style: styles.contentContainer, children: [renderTitle(), renderSubtitle(), children] }), renderActionIcon()] }));
 };
+export const Card = React.memo(CardComponent);
+Card.displayName = "Card";

package/dist/components/cashback-banner/cashback-banner.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { CashbackBannerProps } from './cashback-banner.types';
-export declare const CashbackBanner: React.FC<CashbackBannerProps>;
+export declare const CashbackBanner: React.NamedExoticComponent<CashbackBannerProps>;
 //# sourceMappingURL=cashback-banner.component.d.ts.map

package/dist/components/cashback-banner/cashback-banner.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cashback-banner.component.d.ts","sourceRoot":"","sources":["../../../src/components/cashback-banner/cashback-banner.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAiDnE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgIxD,CAAC"}
+{"version":3,"file":"cashback-banner.component.d.ts","sourceRoot":"","sources":["../../../src/components/cashback-banner/cashback-banner.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAmLnE,eAAO,MAAM,cAAc,iDAAsC,CAAC"}

package/dist/components/cashback-banner/cashback-banner.component.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import React from 'react';
 import { useCashbackBannerStyles } from './cashback-banner.styles';
 /**
  * Helper para processar texto com destaque usando %s
@@ -36,7 +37,7 @@ const processHighlightedText = (text, normalStyle, highlightedStyle) => {
     }
     return result;
 };
-export const CashbackBanner = ({ variant = 'default', text, subText, buttonText, link, onButtonPress, onUnderstandPress, style, textStyle, subTextStyle, highlightedTextStyle, buttonStyle, buttonTextStyle, ...rest }) => {
+const CashbackBannerComponent = ({ variant = 'default', text, subText, buttonText, link, onButtonPress, onUnderstandPress, style, textStyle, subTextStyle, highlightedTextStyle, buttonStyle, buttonTextStyle, ...rest }) => {
     const styles = useCashbackBannerStyles(variant);
     const renderButton = () => {
         return (_jsx(Pressable, { style: [styles.button, buttonStyle], onPress: onButtonPress, accessibilityRole: "button", accessibilityLabel: buttonText, children: _jsxs(View, { style: styles.row, children: [processHighlightedText(buttonText, [styles.buttonText, buttonTextStyle], [styles.highlightedText, highlightedTextStyle]), link && _jsx(Text, { style: [styles.buttonText, styles.arrowIcon], children: "\u2192" })] }) }));
@@ -60,3 +61,5 @@ export const CashbackBanner = ({ variant = 'default', text, subText, buttonText,
             return renderDefaultVariant();
     }
 };
+export const CashbackBanner = React.memo(CashbackBannerComponent);
+CashbackBanner.displayName = "CashbackBanner";

package/dist/components/category-item/category-item.component.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
 import { CategoryItemProps } from "./category-item.types";
-/**
- * Componente CategoryItem utilizado para exibir categorias com ícone e título
- */
-export declare const CategoryItem: React.FC<CategoryItemProps>;
+export declare const CategoryItem: React.NamedExoticComponent<CategoryItemProps>;
 //# sourceMappingURL=category-item.component.d.ts.map

package/dist/components/category-item/category-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/category-item/category-item.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}
+{"version":3,"file":"category-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/category-item/category-item.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAkD1D,eAAO,MAAM,YAAY,+CAAoC,CAAC"}

package/dist/components/category-item/category-item.component.js

@@ -7,14 +7,16 @@ import { useCategoryItemStyles } from "./category-item.styles";
 /**
  * Componente CategoryItem utilizado para exibir categorias com ícone e título
  */
-export const CategoryItem = ({ title, icon, onPress, style, textStyle, iconStyle, hasArrow = true, }) => {
+const CategoryItemComponent = ({ title, image, onPress, style, textStyle, imageStyle, hasArrow = true, }) => {
     const styles = useCategoryItemStyles();
     const theme = useTheme();
-    const renderIcon = () => {
-        if (React.isValidElement(icon)) {
-            return _jsx(View, { style: [styles.iconContainer, iconStyle], children: icon });
+    const iconElement = React.useMemo(() => {
+        if (React.isValidElement(image)) {
+            return _jsx(View, { style: [styles.imageContainer, imageStyle], children: image });
         }
-        return (_jsx(View, { style: [styles.iconContainer, iconStyle], children: _jsx(Image, { source: icon, style: styles.icon }) }));
-    };
-    return (_jsxs(Pressable, { style: [styles.container, style], onPress: onPress, android_ripple: { color: theme.colors.backgroundTertiary, borderless: false }, children: [_jsxs(View, { style: styles.content, children: [renderIcon(), _jsx(Text, { style: [styles.title, textStyle], children: title })] }), hasArrow && (_jsx(ChevronRightIcon, { size: 24, color: theme.colors.textPrimary, style: styles.arrowIcon }))] }));
+        return (_jsx(View, { style: [styles.imageContainer, imageStyle], children: _jsx(Image, { source: image, style: styles.image }) }));
+    }, [image, imageStyle]);
+    return (_jsxs(Pressable, { style: [styles.container, style], onPress: onPress, android_ripple: { color: theme.colors.backgroundTertiary, borderless: false }, children: [_jsxs(View, { style: styles.content, children: [iconElement, _jsx(Text, { style: [styles.title, textStyle], children: title })] }), hasArrow && (_jsx(ChevronRightIcon, { size: 24, color: theme.colors.textPrimary, style: styles.arrowIcon }))] }));
 };
+export const CategoryItem = React.memo(CategoryItemComponent);
+CategoryItem.displayName = "CategoryItem";

package/dist/components/category-item/category-item.styles.d.ts

@@ -10,13 +10,13 @@ export declare const useCategoryItemStyles: () => {
         alignItems: "center";
         flex: number;
     };
-    iconContainer: {
+    imageContainer: {
         width: number;
         height: number;
         justifyContent: "center";
         alignItems: "center";
     };
-    icon: {
+    image: {
         width: number;
         height: number;
         resizeMode: "contain";

package/dist/components/category-item/category-item.styles.js

@@ -16,13 +16,13 @@ export const useCategoryItemStyles = () => {
                 alignItems: "center",
                 flex: 1,
             },
-            iconContainer: {
+            imageContainer: {
                 width: 40,
                 height: 40,
                 justifyContent: "center",
                 alignItems: "center",
             },
-            icon: {
+            image: {
                 width: 40,
                 height: 40,
                 resizeMode: "contain",

package/dist/components/category-item/category-item.types.d.ts

@@ -7,7 +7,7 @@ export interface CategoryItemProps {
     /**
      * URL da imagem ou componente React para o ícone da categoria
      */
-    icon: any;
+    image: any;
     /**
      * Função chamada quando o item é clicado
      */
@@ -23,7 +23,7 @@ export interface CategoryItemProps {
     /**
      * Estilos adicionais para a imagem/ícone
      */
-    iconStyle?: StyleProp<ViewStyle>;
+    imageStyle?: StyleProp<ViewStyle>;
     /**
      * Indica se possui uma seta para a direita
      */

package/dist/components/category-item/category-item.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-item.types.d.ts","sourceRoot":"","sources":["../../../src/components/category-item/category-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC;IAEV;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"category-item.types.d.ts","sourceRoot":"","sources":["../../../src/components/category-item/category-item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC;IAEX;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { CheckBoxProps } from "./checkbox.types";
-export declare const CheckBox: React.FC<CheckBoxProps>;
+export declare const CheckBox: React.NamedExoticComponent<CheckBoxProps>;
 //# sourceMappingURL=checkbox.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoE5C,CAAC"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAwEtD,eAAO,MAAM,QAAQ,2CAAgC,CAAC"}

package/dist/components/checkbox/checkbox.component.js

@@ -4,7 +4,7 @@ import { Text, TouchableOpacity, View } from "react-native";
 import { CheckIcon } from "../../icons";
 import { useTheme } from "../../themes";
 import { useCheckboxStyles } from "./checkbox.styles";
-export const CheckBox = ({ label, value, selected = false, onChange, disabled = false, error = false, testID, indeterminate = false, }) => {
+const CheckBoxComponent = ({ label, value, selected = false, onChange, disabled = false, error = false, testID, indeterminate = false, }) => {
     const styles = useCheckboxStyles();
     const { colors } = useTheme();
     const handlePress = React.useCallback(() => {
@@ -31,3 +31,5 @@ export const CheckBox = ({ label, value, selected = false, onChange, disabled =
                     error && styles.labelError,
                 ], children: label })] }));
 };
+export const CheckBox = React.memo(CheckBoxComponent);
+CheckBox.displayName = "CheckBox";

package/dist/components/event-card/event-card.component.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { EventCardProps } from "./event-card.types";
+export declare const EventCard: React.NamedExoticComponent<EventCardProps>;
+//# sourceMappingURL=event-card.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/event-card/event-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAuEzD,eAAO,MAAM,SAAS,4CAAiC,CAAC"}

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

@@ -0,0 +1,23 @@
+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 { useEventCardStyles } from "./event-card.styles";
+const EventCardComponent = ({ location, dateTime, title, place, imageSource, renderImage, onPress, style, textStyle, testID, }) => {
+    const styles = useEventCardStyles();
+    const ImageElement = React.useMemo(() => {
+        if (renderImage) {
+            return renderImage;
+        }
+        if (imageSource) {
+            return _jsx(Image, { source: imageSource, style: styles.image, resizeMode: "cover" });
+        }
+        return _jsx(View, { style: styles.image }); // Placeholder cinza
+    }, [renderImage, imageSource, styles.image]);
+    const Content = (_jsxs(View, { style: [styles.card, style], testID: testID, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(View, { style: styles.badge, children: _jsx(Text, { style: styles.badgeText, numberOfLines: 1, children: location }) }), _jsxs(View, { children: [_jsx(Text, { style: [styles.dateText, textStyle], numberOfLines: 1, children: dateTime }), _jsx(Text, { style: [styles.titleText, { marginTop: 8 }, textStyle], numberOfLines: 1, children: title })] }), _jsx(Text, { style: [styles.placeText, textStyle], numberOfLines: 1, children: place })] }), ImageElement] }));
+    if (onPress) {
+        return (_jsx(TouchableOpacity, { onPress: onPress, activeOpacity: 0.7, children: Content }));
+    }
+    return Content;
+};
+export const EventCard = React.memo(EventCardComponent);
+EventCard.displayName = "EventCard";

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

@@ -0,0 +1,15 @@
+import { ImageStyle, TextStyle, ViewStyle } from "react-native";
+interface EventCardStyle {
+    container: ViewStyle;
+    card: ViewStyle;
+    textContainer: ViewStyle;
+    badge: ViewStyle;
+    badgeText: TextStyle;
+    dateText: TextStyle;
+    titleText: TextStyle;
+    placeText: TextStyle;
+    image: ImageStyle;
+}
+export declare const useEventCardStyles: () => EventCardStyle;
+export {};
+//# sourceMappingURL=event-card.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/event-card/event-card.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG5E,UAAU,cAAc;IACtB,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,aAAa,EAAE,SAAS,CAAC;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,QAAO,cA+DrC,CAAC"}