decathlon-ui 0.1.2 → 0.1.3

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TouchableOpacity } from "react-native";
+import Animation from "../../assets/animations/loading-animation.json";
+import { Loading } from "../loading";
+import { useButtonStyles } from "./button.styles";
+export const Button = ({ label, loading, variant, fullWidth, size, disabled, ...rest }) => {
+    const buttonStyle = useButtonStyles({
+        variant: variant,
+        fullWidth,
+        size,
+    });
+    const { icon: Icon } = rest;
+    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 })] })) }));
+};

package/dist/components/Button/button.props.d.ts

@@ -0,0 +1,18 @@
+export type ButtonProps = {
+    onPress?: () => void;
+    label?: string;
+    loading?: boolean;
+    variant?: "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "converted";
+    fullWidth?: boolean;
+    size?: "small" | "medium" | "large";
+    icon?: any;
+    disabled?: boolean;
+};
+export declare enum ButtonVariant {
+    primary = "primary",
+    primaryInverted = "primary-inverted",
+    secondary = "secondary",
+    secondaryInverted = "secondary-inverted",
+    converted = "converted"
+}
+//# sourceMappingURL=button.props.d.ts.map

package/dist/components/Button/button.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.props.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.props.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EACJ,SAAS,GACT,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,WAAW,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,SAAS,cAAc;IACvB,iBAAiB,uBAAuB;IACxC,SAAS,cAAc;CACxB"}

package/dist/components/Button/button.props.js

@@ -0,0 +1,8 @@
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["primary"] = "primary";
+    ButtonVariant["primaryInverted"] = "primary-inverted";
+    ButtonVariant["secondary"] = "secondary";
+    ButtonVariant["secondaryInverted"] = "secondary-inverted";
+    ButtonVariant["converted"] = "converted";
+})(ButtonVariant || (ButtonVariant = {}));

package/dist/components/Button/button.styles.d.ts

@@ -0,0 +1,50 @@
+import { ButtonVariant } from "./button.props";
+export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
+    variant?: ButtonVariant | undefined;
+    fullWidth?: boolean | undefined;
+    size?: string | undefined;
+}) => {
+    container: {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    buttonText: {
+        fontWeight: "600";
+        color: string;
+        fontSize: number;
+    } | {
+        fontWeight: "600";
+        color: string;
+        fontSize: number;
+    };
+    icon: {
+        color: string;
+    } | {
+        color: string;
+    };
+    disabled: {
+        opacity: number;
+    };
+};
+//# sourceMappingURL=button.styles.d.ts.map

package/dist/components/Button/button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI;;;;CAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIA,CAAC"}

package/dist/components/Button/button.styles.js

@@ -0,0 +1,130 @@
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+import { ButtonVariant } from "./button.props";
+export const useButtonStyles = ({ variant = ButtonVariant.primary, // Padrão é ButtonVariant.primary
+fullWidth = true, size = "medium", }) => {
+    const theme = useTheme();
+    const getSizeStyles = () => {
+        switch (size) {
+            case "small":
+                return {
+                    container: { paddingHorizontal: 16, paddingVertical: 5.5 },
+                    buttonText: { fontSize: 14 },
+                    icon: {
+                        width: 14,
+                        height: 14,
+                    },
+                };
+            case "medium":
+                return {
+                    container: { paddingHorizontal: 16, paddingVertical: 12 },
+                    buttonText: { fontSize: 16 },
+                    icon: {
+                        width: 16,
+                        height: 16,
+                    },
+                };
+            case "large":
+                return {
+                    container: { paddingHorizontal: 16, paddingVertical: 16 },
+                    buttonText: { fontSize: 18 },
+                    icon: {
+                        width: 16,
+                        height: 16,
+                    },
+                };
+            default:
+                return {
+                    container: { paddingHorizontal: 16, paddingVertical: 12 },
+                    buttonText: { fontSize: 14 },
+                    icon: {
+                        width: 14,
+                        height: 14,
+                    },
+                };
+        }
+    };
+    const getVariantStyles = () => {
+        switch (variant) {
+            case ButtonVariant.primary:
+                return {
+                    container: { backgroundColor: theme.colors.black },
+                    buttonText: { color: "#fff" },
+                    icon: {
+                        color: "#fff",
+                    },
+                };
+            case ButtonVariant.primaryInverted:
+                return {
+                    container: { backgroundColor: "#fff" },
+                    buttonText: { color: "#000" },
+                    icon: {
+                        color: "#000",
+                    },
+                };
+            case ButtonVariant.secondary:
+                return {
+                    container: {
+                        backgroundColor: "transparent",
+                        borderWidth: 1,
+                        borderColor: "#B3BAC3",
+                    },
+                    buttonText: { color: "#000" },
+                    icon: {
+                        color: "#000",
+                    },
+                };
+            case ButtonVariant.secondaryInverted:
+                return {
+                    container: {
+                        backgroundColor: "transparent",
+                        borderWidth: 1,
+                        borderColor: "#B3BAC3",
+                    },
+                    buttonText: { color: "#fff" },
+                    icon: {
+                        color: "#fff",
+                    },
+                };
+            case ButtonVariant.converted:
+                return {
+                    container: { backgroundColor: "#3643BA" },
+                    buttonText: { color: "#fff" },
+                    icon: {
+                        color: "#fff",
+                    },
+                };
+            default:
+                return {
+                    container: { backgroundColor: "#101010" },
+                    buttonText: { color: "#fff" },
+                    icon: {
+                        color: "#fff",
+                    },
+                };
+        }
+    };
+    return StyleSheet.create({
+        container: {
+            ...getSizeStyles().container, // Define altura e padding com base no tamanho
+            ...getVariantStyles().container, // Define estilos com base na variante
+            width: fullWidth ? "100%" : "auto",
+            borderRadius: 180,
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "row", // Alinha ícone + label
+            gap: 8, // Espaçamento entre ícone e label
+        },
+        buttonText: {
+            ...getSizeStyles().buttonText,
+            ...getVariantStyles().buttonText,
+            fontWeight: "600",
+        },
+        icon: {
+            ...getVariantStyles().icon,
+        },
+        disabled: {
+            opacity: 0.5,
+        },
+    });
+};

package/dist/components/Button/button.types.d.ts

@@ -0,0 +1,23 @@
+export declare enum ButtonVariant {
+    primary = "primary",
+    primaryInverted = "primaryInverted",
+    secondary = "secondary",
+    secondaryInverted = "secondaryInverted",
+    converted = "converted"
+}
+export declare enum ButtonSize {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+export interface ButtonProps {
+    variant?: ButtonVariant;
+    label: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    testID?: string;
+}
+//# sourceMappingURL=button.types.d.ts.map

package/dist/components/Button/button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,eAAe,oBAAoB;IACnC,SAAS,cAAc;IACvB,iBAAiB,sBAAsB;IACvC,SAAS,cAAc;CACxB;AAED,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/Button/button.types.js

@@ -0,0 +1,14 @@
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["primary"] = "primary";
+    ButtonVariant["primaryInverted"] = "primaryInverted";
+    ButtonVariant["secondary"] = "secondary";
+    ButtonVariant["secondaryInverted"] = "secondaryInverted";
+    ButtonVariant["converted"] = "converted";
+})(ButtonVariant || (ButtonVariant = {}));
+export var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["small"] = "small";
+    ButtonSize["medium"] = "medium";
+    ButtonSize["large"] = "large";
+})(ButtonSize || (ButtonSize = {}));

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

@@ -1,3 +1,3 @@
-export { Button } from "./Button";
-export type { ButtonProps } from "./Button";
+export * from "./button.component";
+export * from "./button.types";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC"}

package/dist/components/Button/index.js

@@ -1 +1,2 @@
-export { Button } from "./Button";
+export * from "./button.component";
+export * from "./button.types";

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,48 @@
+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 { useTheme } from "../../themes";
+import { useAccordionStyles } from "./accordion.styles";
+export const Accordion = ({ items = [], initialExpandedItems = [], allowMultiple = true, testID, }) => {
+    const styles = useAccordionStyles();
+    const { colors } = useTheme();
+    const [expandedItems, setExpandedItems] = React.useState(initialExpandedItems);
+    const isExpanded = React.useCallback((id) => expandedItems.includes(id), [expandedItems]);
+    const handleToggle = React.useCallback((id) => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        if (isExpanded(id)) {
+            setExpandedItems(expandedItems.filter((itemId) => itemId !== id));
+        }
+        else {
+            if (allowMultiple) {
+                setExpandedItems([...expandedItems, id]);
+            }
+            else {
+                setExpandedItems([id]);
+            }
+        }
+    }, [expandedItems, isExpanded, allowMultiple]);
+    const renderContent = React.useCallback((content) => {
+        if (typeof content === "function") {
+            return content();
+        }
+        return content;
+    }, []);
+    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))) }));
+};

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

@@ -0,0 +1,30 @@
+export declare const useAccordionStyles: () => {
+    container: {
+        width: "100%";
+    };
+    item: {
+        borderBottomWidth: number;
+        borderBottomColor: "#D9DDE1";
+    };
+    header: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        paddingVertical: 16;
+        paddingHorizontal: 16;
+    };
+    title: {
+        fontSize: number;
+        lineHeight: number;
+        color: "#101010";
+        flex: number;
+    };
+    icon: {
+        marginLeft: 12;
+    };
+    content: {
+        paddingHorizontal: 16;
+        paddingBottom: 16;
+    };
+};
+//# sourceMappingURL=accordion.styles.d.ts.map

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

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

package/dist/components/accordion/accordion.styles.js

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useAccordionStyles = () => {
+    const { colors, spacing, radius } = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            width: "100%",
+        },
+        item: {
+            borderBottomWidth: 1,
+            borderBottomColor: colors.borderSecondary,
+        },
+        header: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingVertical: spacing.md,
+            paddingHorizontal: spacing.md,
+        },
+        title: {
+            fontSize: 14,
+            lineHeight: 20,
+            color: colors.textPrimary,
+            flex: 1,
+        },
+        icon: {
+            marginLeft: spacing.sm,
+        },
+        content: {
+            paddingHorizontal: spacing.md,
+            paddingBottom: spacing.md,
+        },
+    }), [colors, spacing]);
+};

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

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+export interface AccordionItem {
+    /**
+     * Identificador único do item
+     */
+    id: string;
+    /**
+     * Título do item do acordeão
+     */
+    title: string;
+    /**
+     * Conteúdo a ser exibido quando o acordeão estiver expandido
+     */
+    content: ReactNode | (() => ReactNode);
+}
+export interface AccordionProps {
+    /**
+     * Itens do acordeão
+     */
+    items?: AccordionItem[];
+    /**
+     * Estado inicial dos itens expandidos
+     */
+    initialExpandedItems?: string[];
+    /**
+     * ID para testes
+     */
+    testID?: string;
+    /**
+     * Permite que múltiplos itens sejam expandidos simultaneamente
+     * @default true
+     */
+    allowMultiple?: boolean;
+}
+//# sourceMappingURL=accordion.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IAExB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/components/accordion/accordion.types.js

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

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

@@ -0,0 +1,3 @@
+export { Accordion } from "./accordion.component";
+export type { AccordionItem, AccordionProps } from "./accordion.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion } from "./accordion.component";

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,29 @@
+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, 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 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
+        if (icon) {
+            if (React.isValidElement(icon)) {
+                return icon;
+            }
+            else if (typeof icon === "function") {
+                return icon({ size: iconSize, color: finalIconColor });
+            }
+        }
+        // Usar o ícone padrão (HelpCircle)
+        return _jsx(HelpCircleIcon, { size: iconSize, color: 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 })] }));
+};

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

@@ -0,0 +1,34 @@
+export declare const useActionButtonStyles: () => {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingVertical: 16;
+        paddingHorizontal: 16;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+    };
+    disabled: {
+        opacity: number;
+    };
+    contentContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: 12;
+    };
+    iconContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    label: {
+        color: "#101010";
+        fontSize: number;
+        lineHeight: number;
+    };
+    chevronIcon: {
+        color: "#616161";
+    };
+};
+//# sourceMappingURL=action-button.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/action-button.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCjC,CAAC"}

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

@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useActionButtonStyles = () => {
+    const { colors, spacing, radius } = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingVertical: spacing.md,
+            paddingHorizontal: spacing.md,
+            borderWidth: 1,
+            borderColor: colors.borderPrimary,
+        },
+        disabled: {
+            opacity: 0.6,
+        },
+        contentContainer: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: spacing.sm,
+        },
+        iconContainer: {
+            width: 24,
+            height: 24,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        label: {
+            color: colors.textPrimary,
+            fontSize: 14,
+            lineHeight: 20,
+        },
+        chevronIcon: {
+            color: colors.textTertiary,
+        },
+    }), [colors, spacing, radius]);
+};

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

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { IconProps } from "../../icons";
+export interface ActionButtonProps {
+    /**
+     * Texto que aparece no botão
+     */
+    label?: string;
+    /**
+     * Ícone para exibir no botão (Component React ou função que recebe IconProps)
+     */
+    icon?: ReactNode | ((props: IconProps) => ReactNode);
+    /**
+     * Tamanho do ícone
+     */
+    iconSize?: number;
+    /**
+     * Cor do ícone
+     */
+    iconColor?: string;
+    /**
+     * Cor do container do ícone
+     */
+    iconBackgroundColor?: string;
+    /**
+     * Função chamada quando o botão é pressionado
+     */
+    onPress?: () => void;
+    /**
+     * Indica se o botão está desabilitado
+     */
+    disabled?: boolean;
+    /**
+     * ID para testes
+     */
+    testID?: string;
+}
+//# sourceMappingURL=action-button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.types.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/action-button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

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