decathlon-ui 0.1.2 → 0.1.4

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

@@ -0,0 +1,168 @@
+import type { CashbackBannerVariant } from "./cashback-banner.types";
+export declare const useCashbackBannerStyles: (variant?: CashbackBannerVariant) => {
+    container: {
+        backgroundColor: "#FFFFFF";
+        borderWidth: number;
+        borderColor: "#D9DDE1";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+        width: "100%";
+        flex: number;
+    };
+    text: {
+        color: "#101010";
+        fontFamily: "Inter-Bold";
+        fontSize: 14;
+    };
+    subText: {
+        color: "#616161";
+        fontFamily: "Inter-Medium";
+        fontSize: 10;
+    };
+    button: {
+        backgroundColor: string;
+        padding: number;
+        margin: number;
+        paddingHorizontal: 16;
+        paddingVertical: 4;
+        borderRadius: 4;
+        justifyContent: "center";
+        alignItems: "center";
+        marginLeft: 16;
+    };
+    buttonText: {
+        color: "#3643BA";
+        fontFamily: "Inter-Medium";
+        fontSize: 12;
+    };
+    textContainer: {
+        flex: number;
+    };
+    highlightedText: {
+        color: "#7AFFA6";
+    };
+    link: {
+        fontFamily: "Inter-Medium";
+        fontSize: 12;
+        color: "#383838";
+        textDecorationLine: "underline";
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    arrowIcon: {
+        marginLeft: 4;
+    };
+} | {
+    container: {
+        flexDirection: "column";
+        alignItems: "center";
+        justifyContent: "center";
+        backgroundColor: string;
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+        width: "100%";
+        flex: number;
+    };
+    text: {
+        color: "#FFFFFF";
+        fontFamily: "Inter-Bold";
+        fontSize: 14;
+    };
+    subText: {
+        color: "#FFFFFF";
+        fontFamily: "Inter-Bold";
+        fontSize: 14;
+    };
+    button: {
+        backgroundColor: string;
+        paddingHorizontal: 16;
+        paddingVertical: 4;
+        borderRadius: 4;
+        justifyContent: "center";
+        alignItems: "center";
+        marginLeft: 16;
+    };
+    buttonText: {
+        color: "#FFFFFF";
+        fontFamily: "Inter-Medium";
+        fontSize: 12;
+    };
+    textContainer: {
+        flex: number;
+    };
+    highlightedText: {
+        color: "#7AFFA6";
+    };
+    link: {
+        fontFamily: "Inter-Medium";
+        fontSize: 12;
+        color: "#383838";
+        textDecorationLine: "underline";
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    arrowIcon: {
+        marginLeft: 4;
+    };
+} | {
+    container: {
+        backgroundColor: "#3643BA";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+        width: "100%";
+        flex: number;
+    };
+    text: {
+        color: "#FFFFFF";
+        fontFamily: "Inter-Bold";
+        fontSize: 14;
+    };
+    subText: {
+        color: "#FFFFFF";
+        fontFamily: "Inter-Medium";
+        fontSize: 10;
+    };
+    buttonText: {
+        color: "#FFFFFF";
+        fontFamily: "Inter-Medium";
+        fontSize: 12;
+    };
+    textContainer: {
+        flex: number;
+    };
+    button: {
+        paddingHorizontal: 16;
+        paddingVertical: 4;
+        borderRadius: 4;
+        justifyContent: "center";
+        alignItems: "center";
+        marginLeft: 16;
+    };
+    highlightedText: {
+        color: "#7AFFA6";
+    };
+    link: {
+        fontFamily: "Inter-Medium";
+        fontSize: 12;
+        color: "#383838";
+        textDecorationLine: "underline";
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    arrowIcon: {
+        marginLeft: 4;
+    };
+};
+//# sourceMappingURL=cashback-banner.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cashback-banner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/cashback-banner/cashback-banner.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,eAAO,MAAM,uBAAuB,GAClC,UAAS,qBAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJ3C,CAAC"}

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

@@ -0,0 +1,148 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useCashbackBannerStyles = (variant = "default") => {
+    const theme = useTheme();
+    return useMemo(() => {
+        const baseStyles = StyleSheet.create({
+            container: {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm,
+                width: "100%",
+                flex: 1,
+            },
+            textContainer: {
+                flex: 1,
+            },
+            text: {
+                fontFamily: theme.fonts.inter.bold,
+                fontSize: theme.fonts.sizes.xs,
+            },
+            subText: {
+                fontFamily: theme.fonts.inter.medium,
+                fontSize: theme.fonts.sizes.xxxs,
+            },
+            button: {
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.xxs,
+                borderRadius: theme.radius.sm,
+                justifyContent: "center",
+                alignItems: "center",
+                marginLeft: theme.spacing.md,
+            },
+            buttonText: {
+                fontFamily: theme.fonts.inter.medium,
+                fontSize: theme.fonts.sizes.xxs,
+            },
+            highlightedText: {
+                color: theme.colors.backgroundMint3,
+            },
+            link: {
+                fontFamily: theme.fonts.inter.medium,
+                fontSize: theme.fonts.sizes.xxs,
+                color: theme.colors.textSecondary,
+                textDecorationLine: "underline",
+            },
+            row: {
+                flexDirection: "row",
+                alignItems: "center",
+            },
+            arrowIcon: {
+                marginLeft: theme.spacing.xxs,
+            },
+        });
+        // Específico para a variante padrão (azul com botão verde)
+        const defaultStyles = StyleSheet.create({
+            container: {
+                ...baseStyles.container,
+                backgroundColor: theme.colors.textAction,
+            },
+            text: {
+                ...baseStyles.text,
+                color: theme.colors.white,
+            },
+            subText: {
+                ...baseStyles.subText,
+                color: theme.colors.white,
+            },
+            buttonText: {
+                ...baseStyles.buttonText,
+                color: theme.colors.white,
+            },
+        });
+        // Específico para a variante de valor (branco com valor em destaque)
+        const valueStyles = StyleSheet.create({
+            container: {
+                ...baseStyles.container,
+                backgroundColor: theme.colors.white,
+                borderWidth: 1,
+                borderColor: theme.colors.borderSecondary,
+            },
+            text: {
+                ...baseStyles.text,
+                color: theme.colors.textPrimary,
+            },
+            subText: {
+                ...baseStyles.subText,
+                color: theme.colors.textTertiary,
+            },
+            button: {
+                ...baseStyles.button,
+                backgroundColor: "transparent",
+                padding: 0,
+                margin: 0,
+            },
+            buttonText: {
+                ...baseStyles.buttonText,
+                color: theme.colors.textAction,
+            },
+        });
+        // Específico para a variante Black Friday (roxo escuro)
+        const blackFridayStyles = StyleSheet.create({
+            container: {
+                ...baseStyles.container,
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#291BB9", // Cor roxa escura específica para Black Friday
+            },
+            text: {
+                ...baseStyles.text,
+                color: theme.colors.white,
+            },
+            subText: {
+                ...baseStyles.text,
+                color: theme.colors.white,
+            },
+            button: {
+                ...baseStyles.button,
+                backgroundColor: "transparent",
+            },
+            buttonText: {
+                ...baseStyles.buttonText,
+                color: theme.colors.white,
+            },
+        });
+        // Retorna o estilo apropriado com base na variante
+        switch (variant) {
+            case "value":
+                return {
+                    ...baseStyles,
+                    ...valueStyles,
+                };
+            case "blackFriday":
+                return {
+                    ...baseStyles,
+                    ...blackFridayStyles,
+                };
+            default:
+                return {
+                    ...baseStyles,
+                    ...defaultStyles,
+                };
+        }
+    }, [theme, variant]);
+};

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

@@ -0,0 +1,70 @@
+import { TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
+export type CashbackBannerVariant = "default" | "value" | "blackFriday";
+export interface CashbackBannerProps extends TouchableOpacityProps {
+    /**
+     * Variante do banner
+     * @default 'default'
+     */
+    variant?: CashbackBannerVariant;
+    /**
+     * Texto principal do banner
+     * Use %s para indicar partes a serem destacadas com a cor mint3.
+     * Ex: "Você tem %sR$14,32%s de cashback disponível!"
+     */
+    text: string;
+    /**
+     * Texto destacado (para variante 'value')
+     * Use %s para indicar onde inserir a parte destacada em cor mint3
+     * Ex: "Você tem %sR$14,32%s de cashback disponível!"
+     */
+    highlightedText?: string;
+    /**
+     * Texto adicional do banner (opcional)
+     * Use %s para indicar partes a serem destacadas com a cor mint3.
+     * Ex: "Utilize %santes%s da data limite de expiração."
+     */
+    subText?: string;
+    /**
+     * Texto do botão de ação
+     * Use %s para indicar partes a serem destacadas com a cor mint3.
+     * Ex: "Consultar %ssaldo%s"
+     */
+    buttonText: string;
+    /**
+     * Link/caminho para redirecionamento (exibe uma seta no botão)
+     */
+    link?: boolean;
+    /**
+     * Callback para quando o botão de consultar saldo for pressionado
+     */
+    onButtonPress?: () => void;
+    /**
+     * Callback para quando o link "Entendi" for pressionado (para variante 'value')
+     */
+    onUnderstandPress?: () => void;
+    /**
+     * Estilo do container
+     */
+    style?: ViewStyle;
+    /**
+     * Estilo do texto principal
+     */
+    textStyle?: TextStyle;
+    /**
+     * Estilo do texto adicional
+     */
+    subTextStyle?: TextStyle;
+    /**
+     * Estilo do texto destacado com %s
+     */
+    highlightedTextStyle?: TextStyle;
+    /**
+     * Estilo do botão
+     */
+    buttonStyle?: ViewStyle;
+    /**
+     * Estilo do texto do botão
+     */
+    buttonTextStyle?: TextStyle;
+}
+//# sourceMappingURL=cashback-banner.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cashback-banner.types.d.ts","sourceRoot":"","sources":["../../../src/components/cashback-banner/cashback-banner.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAExE,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAEhC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAC;IAEjC;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B"}

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

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

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

@@ -0,0 +1,3 @@
+export { CashbackBanner } from "./cashback-banner.component";
+export type { CashbackBannerProps } from "./cashback-banner.types";
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,7 @@
+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>;
+//# sourceMappingURL=category-item.component.d.ts.map

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, Pressable, Text, View } from "react-native";
+import React from "react";
+import { ChevronRightIcon } from "../../icons";
+import { useTheme } from "../../themes";
+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 styles = useCategoryItemStyles();
+    const theme = useTheme();
+    const renderIcon = () => {
+        if (React.isValidElement(icon)) {
+            return _jsx(View, { style: [styles.iconContainer, iconStyle], children: icon });
+        }
+        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 }))] }));
+};

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

@@ -0,0 +1,37 @@
+export declare const useCategoryItemStyles: () => {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: 16;
+        width: "100%";
+    };
+    content: {
+        flexDirection: "row";
+        alignItems: "center";
+        flex: number;
+    };
+    iconContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    icon: {
+        width: number;
+        height: number;
+        resizeMode: "contain";
+    };
+    title: {
+        fontFamily: "Inter-Medium";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+        color: "#101010";
+        marginLeft: number;
+        flex: number;
+    };
+    arrowIcon: {
+        marginLeft: 8;
+    };
+};
+//# sourceMappingURL=category-item.styles.d.ts.map

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

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

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

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useCategoryItemStyles = () => {
+    const theme = useTheme();
+    return useMemo(() => {
+        return StyleSheet.create({
+            container: {
+                flexDirection: "row",
+                alignItems: "center",
+                paddingVertical: theme.spacing.md,
+                width: "100%",
+            },
+            content: {
+                flexDirection: "row",
+                alignItems: "center",
+                flex: 1,
+            },
+            iconContainer: {
+                width: 40,
+                height: 40,
+                justifyContent: "center",
+                alignItems: "center",
+            },
+            icon: {
+                width: 40,
+                height: 40,
+                resizeMode: "contain",
+            },
+            title: {
+                fontFamily: theme.fonts.inter.medium,
+                fontSize: 20,
+                lineHeight: 28,
+                letterSpacing: 0,
+                color: theme.colors.textPrimary,
+                marginLeft: 16,
+                flex: 1,
+            },
+            arrowIcon: {
+                marginLeft: theme.spacing.xs,
+            },
+        });
+    }, [theme]);
+};

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

@@ -0,0 +1,32 @@
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface CategoryItemProps {
+    /**
+     * Título da categoria
+     */
+    title: string;
+    /**
+     * URL da imagem ou componente React para o ícone da categoria
+     */
+    icon: any;
+    /**
+     * Função chamada quando o item é clicado
+     */
+    onPress?: () => void;
+    /**
+     * Estilos adicionais para o container do item
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Estilos adicionais para o texto do item
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Estilos adicionais para a imagem/ícone
+     */
+    iconStyle?: StyleProp<ViewStyle>;
+    /**
+     * Indica se possui uma seta para a direita
+     */
+    hasArrow?: boolean;
+}
+//# sourceMappingURL=category-item.types.d.ts.map

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from "./category-item.component";
+export * from "./category-item.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/category-item/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from "./category-item.component";
+export * from "./category-item.types";

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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 styles = useCheckboxStyles();
+    const { colors } = useTheme();
+    const handlePress = React.useCallback(() => {
+        if (!disabled && onChange) {
+            onChange(value);
+        }
+    }, [disabled, onChange, value]);
+    return (_jsxs(TouchableOpacity, { style: styles.optionContainer, onPress: handlePress, disabled: disabled, testID: testID, accessibilityRole: "radio", accessibilityState: {
+            checked: selected,
+            disabled: disabled,
+        }, accessibilityLabel: label, children: [_jsxs(View, { style: [
+                    styles.checkbox,
+                    selected && styles.checkboxSelected,
+                    disabled && styles.checkboxDisabled,
+                    error && styles.checkboxError,
+                ], children: [selected && !indeterminate && (_jsx(View, { style: [styles.dot, disabled && styles.dotDisabled], children: _jsx(CheckIcon, { size: 12, color: colors.white, strokeWidth: 2, stroke: colors.white }) })), indeterminate && (_jsx(View, { style: [styles.dot, disabled && styles.dotDisabled], children: _jsx(View, { style: {
+                                width: 8,
+                                height: 2,
+                                backgroundColor: colors.white,
+                                borderRadius: 1,
+                            } }) }))] }), _jsx(Text, { style: [
+                    styles.label,
+                    disabled && styles.labelDisabled,
+                    error && styles.labelError,
+                ], children: label })] }));
+};