decathlon-ui 0.1.2 → 0.1.4

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

@@ -0,0 +1,55 @@
+export declare const useCheckboxStyles: () => {
+    container: {
+        gap: 12;
+    };
+    optionContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: 8;
+    };
+    checkbox: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        borderRadius: 2;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    checkboxDisabled: {
+        borderColor: "#949494";
+    };
+    checkboxSelected: {
+        borderColor: "#3643BA";
+    };
+    checkboxError: {
+        borderColor: "#AB0009";
+    };
+    dot: {
+        width: "100%";
+        height: "100%";
+        alignItems: "center";
+        justifyContent: "center";
+        backgroundColor: "#3643BA";
+    };
+    dotDisabled: {
+        backgroundColor: "#949494";
+    };
+    label: {
+        color: "#101010";
+        fontSize: number;
+        lineHeight: number;
+    };
+    labelDisabled: {
+        color: "#949494";
+    };
+    labelError: {
+        color: "#AB0009";
+    };
+    errorText: {
+        color: "#AB0009";
+        fontSize: number;
+        marginTop: 8;
+    };
+};
+//# sourceMappingURL=checkbox.styles.d.ts.map

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

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

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useCheckboxStyles = () => {
+    const { colors, spacing, radius } = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            gap: spacing.sm,
+        },
+        optionContainer: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: spacing.xs,
+        },
+        checkbox: {
+            width: 18,
+            height: 18,
+            borderWidth: 2,
+            borderColor: colors.borderPrimary,
+            borderRadius: radius.xs,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        checkboxDisabled: {
+            borderColor: colors.textDisabled,
+        },
+        checkboxSelected: {
+            borderColor: colors.textAction,
+        },
+        checkboxError: {
+            borderColor: colors.textError,
+        },
+        dot: {
+            width: "100%",
+            height: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: colors.textAction,
+        },
+        dotDisabled: {
+            backgroundColor: colors.textDisabled,
+        },
+        label: {
+            color: colors.textPrimary,
+            fontSize: 14,
+            lineHeight: 20,
+        },
+        labelDisabled: {
+            color: colors.textDisabled,
+        },
+        labelError: {
+            color: colors.textError,
+        },
+        errorText: {
+            color: colors.textError,
+            fontSize: 12,
+            marginTop: spacing.xs,
+        },
+    }), [colors, spacing]);
+};

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

@@ -0,0 +1,15 @@
+export interface CheckBoxOption {
+    label: string;
+    value: string;
+}
+export interface CheckBoxProps {
+    label: string;
+    value: string;
+    selected?: boolean;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+    testID?: string;
+    indeterminate?: boolean;
+}
+//# sourceMappingURL=checkbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/components/checkbox/checkbox.types.js

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

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

@@ -0,0 +1,3 @@
+export { CheckBox } from "./checkbox.component";
+export type { CheckBoxOption, CheckBoxProps } from "./checkbox.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { CheckBox } from "./checkbox.component";

package/dist/components/filter-chip/filter-chip.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FilterChipProps } from "./filter-chip.types";
+/**
+ * Componente FilterChip usado para filtros com estados selecionado/não selecionado
+ */
+export declare const FilterChip: React.FC<FilterChipProps>;
+//# sourceMappingURL=filter-chip.component.d.ts.map

package/dist/components/filter-chip/filter-chip.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.component.d.ts","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.component.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4DhD,CAAC"}

package/dist/components/filter-chip/filter-chip.component.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { PlusIcon, SlidersIcon, XIcon } from "../../icons";
+import { useTheme } from "../../themes";
+import { useFilterChipStyles } from "./filter-chip.styles";
+/**
+ * Componente FilterChip usado para filtros com estados selecionado/não selecionado
+ */
+export const FilterChip = ({ label, selected = false, count, onPress, style, textStyle, }) => {
+    const theme = useTheme();
+    const styles = useFilterChipStyles(selected ? "selected" : "default");
+    const renderContent = () => {
+        // Caso 1: Chip com ícone de filtro e contador (sem label)
+        if (!label && count !== undefined) {
+            return (_jsxs(View, { style: styles.countContainer, children: [_jsx(SlidersIcon, { color: selected ? theme.colors.textPrimary : theme.colors.textSecondary, size: 20, style: styles.icon }), _jsx(Text, { style: styles.countText, children: count })] }));
+        }
+        // Caso 2: Chip com label e botão de ação (+ ou X)
+        if (label) {
+            return (_jsxs(_Fragment, { children: [_jsx(Text, { style: [styles.text, textStyle], children: label }), selected ? (_jsx(XIcon, { style: styles.actionIcon, color: theme.colors.textPrimary, size: 16 })) : (_jsx(PlusIcon, { style: styles.actionIcon, color: theme.colors.textPrimary, size: 16 }))] }));
+        }
+        // Caso 3: Chip vazio (apenas com marca Decathlon)
+        return _jsx(Text, { style: [styles.text, textStyle], children: label });
+    };
+    return (_jsx(Pressable, { style: [styles.container, style], onPress: onPress, children: renderContent() }));
+};

package/dist/components/filter-chip/filter-chip.styles.d.ts

@@ -0,0 +1,73 @@
+import { FilterChipVariant } from "./filter-chip.types";
+export declare const useFilterChipStyles: (variant?: FilterChipVariant) => {
+    container: {
+        borderColor: "#101010";
+        flexDirection: "row";
+        alignItems: "center";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+        borderRadius: 360;
+        borderWidth: 1;
+        backgroundColor: "#FFFFFF";
+        gap: 8;
+    };
+    text: {
+        color: "#101010";
+        fontFamily: "Inter-Medium";
+        fontSize: 14;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    countText: {
+        color: "#101010";
+        fontFamily: "Inter-Medium";
+        fontSize: 14;
+        marginLeft: 8;
+    };
+    icon: {
+        marginRight: 4;
+    };
+    countContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    actionIcon: {
+        marginLeft: 8;
+    };
+} | {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+        borderRadius: 360;
+        borderWidth: 1;
+        borderColor: "#D9DDE1";
+        backgroundColor: "#FFFFFF";
+        gap: 8;
+    };
+    text: {
+        fontFamily: "Inter-Regular";
+        fontSize: 14;
+        color: "#101010";
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    icon: {
+        marginRight: 4;
+    };
+    countContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    countText: {
+        fontFamily: "Inter-Medium";
+        fontSize: 14;
+        color: "#101010";
+        marginLeft: 8;
+    };
+    actionIcon: {
+        marginLeft: 8;
+    };
+};
+//# sourceMappingURL=filter-chip.styles.d.ts.map

package/dist/components/filter-chip/filter-chip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,eAAO,MAAM,mBAAmB,GAAI,UAAS,iBAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFzE,CAAC"}

package/dist/components/filter-chip/filter-chip.styles.js

@@ -0,0 +1,82 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useFilterChipStyles = (variant = "default") => {
+    const theme = useTheme();
+    return useMemo(() => {
+        const baseStyles = StyleSheet.create({
+            container: {
+                flexDirection: "row",
+                alignItems: "center",
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm,
+                borderRadius: theme.radius.round,
+                borderWidth: theme.borderWidth.sm,
+                borderColor: theme.colors.borderSecondary,
+                backgroundColor: theme.colors.white,
+                gap: theme.spacing.xs,
+            },
+            text: {
+                fontFamily: theme.fonts.inter.regular,
+                fontSize: theme.fonts.sizes.xs,
+                color: theme.colors.textPrimary,
+                lineHeight: 21,
+                letterSpacing: 0,
+            },
+            icon: {
+                marginRight: theme.spacing.xxs,
+            },
+            countContainer: {
+                flexDirection: "row",
+                alignItems: "center",
+            },
+            countText: {
+                fontFamily: theme.fonts.inter.medium,
+                fontSize: theme.fonts.sizes.xs,
+                color: theme.colors.textPrimary,
+                marginLeft: theme.spacing.xs,
+            },
+            actionIcon: {
+                marginLeft: theme.spacing.xs,
+            },
+        });
+        // Estilos específicos para o chip não selecionado
+        const defaultStyles = StyleSheet.create({
+            container: {
+                ...baseStyles.container,
+            },
+            text: {
+                ...baseStyles.text,
+            },
+        });
+        // Estilos específicos para o chip selecionado
+        const selectedStyles = StyleSheet.create({
+            container: {
+                ...baseStyles.container,
+                borderColor: theme.colors.borderActive,
+            },
+            text: {
+                ...baseStyles.text,
+                color: theme.colors.textPrimary,
+                fontFamily: theme.fonts.inter.medium,
+            },
+            countText: {
+                ...baseStyles.countText,
+                color: theme.colors.textPrimary,
+            },
+        });
+        // Retorna o estilo apropriado com base na variante
+        switch (variant) {
+            case "selected":
+                return {
+                    ...baseStyles,
+                    ...selectedStyles,
+                };
+            default:
+                return {
+                    ...baseStyles,
+                    ...defaultStyles,
+                };
+        }
+    }, [theme, variant]);
+};

package/dist/components/filter-chip/filter-chip.types.d.ts

@@ -0,0 +1,29 @@
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+export type FilterChipVariant = "default" | "selected";
+export interface FilterChipProps {
+    /**
+     * O texto que será exibido no chip
+     */
+    label?: string;
+    /**
+     * Indica se o chip está selecionado ou não
+     */
+    selected?: boolean;
+    /**
+     * Número de filtros selecionados (só aparece quando não há label)
+     */
+    count?: number;
+    /**
+     * Função a ser chamada quando o chip for pressionado
+     */
+    onPress?: () => void;
+    /**
+     * Estilos adicionais para o container do chip
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Estilos adicionais para o texto do chip
+     */
+    textStyle?: StyleProp<TextStyle>;
+}
+//# sourceMappingURL=filter-chip.types.d.ts.map

package/dist/components/filter-chip/filter-chip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.types.d.ts","sourceRoot":"","sources":["../../../src/components/filter-chip/filter-chip.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC"}

package/dist/components/filter-chip/filter-chip.types.js

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

package/dist/components/filter-chip/index.d.ts

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

package/dist/components/filter-chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filter-chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC"}

package/dist/components/filter-chip/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+export * from "./accordion";
+export * from "./action-button";
+export * from "./button";
+export * from "./card";
+export * from "./cashback-banner";
+export * from "./category-item";
+export * from "./checkbox";
+export * from "./filter-chip";
+export * from "./input";
+export * from "./loading";
+export * from "./order-card";
+export * from "./product-card";
+export * from "./product-highlight";
+export * from "./product-list-item";
+export * from "./product-review";
+export * from "./quick-add-product-card";
+export * from "./radio";
+export * from "./range-slider";
+export * from "./search-button";
+export * from "./seller-box";
+export * from "./toggle-switch";
+export * from "./typography";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,22 @@
+export * from "./accordion";
+export * from "./action-button";
+export * from "./button";
+export * from "./card";
+export * from "./cashback-banner";
+export * from "./category-item";
+export * from "./checkbox";
+export * from "./filter-chip";
+export * from "./input";
+export * from "./loading";
+export * from "./order-card";
+export * from "./product-card";
+export * from "./product-highlight";
+export * from "./product-list-item";
+export * from "./product-review";
+export * from "./quick-add-product-card";
+export * from "./radio";
+export * from "./range-slider";
+export * from "./search-button";
+export * from "./seller-box";
+export * from "./toggle-switch";
+export * from "./typography";

package/dist/components/input/error-message/error-message.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface ErrorMessageProps {
+    message: string;
+    testID?: string;
+}
+export declare const ErrorMessage: React.FC<ErrorMessageProps>;
+export {};
+//# sourceMappingURL=error-message.d.ts.map

package/dist/components/input/error-message/error-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-message.d.ts","sourceRoot":"","sources":["../../../../src/components/input/error-message/error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoBpD,CAAC"}

package/dist/components/input/error-message/error-message.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+export const ErrorMessage = ({ message, testID, }) => {
+    return (_jsxs(View, { style: styles.container, testID: testID, accessibilityRole: "alert", accessible: true, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(Text, { children: "!" }) }), _jsx(Text, { style: styles.message, accessibilityRole: "text", children: message })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        width: "100%",
+        paddingVertical: 4,
+        paddingHorizontal: 4,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 4,
+    },
+    iconContainer: {
+        paddingTop: 2,
+        width: 16,
+    },
+    icon: {
+        width: 16,
+        height: 16,
+    },
+    message: {
+        flex: 1,
+        color: "#CC212A",
+        fontSize: 14,
+        fontFamily: "Inter",
+    },
+});

package/dist/components/input/error-message/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorMessage } from "./error-message";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/input/error-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/error-message/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/input/error-message/index.js

@@ -0,0 +1 @@
+export { ErrorMessage } from "./error-message";

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

@@ -0,0 +1,4 @@
+export { ErrorMessage } from "./error-message";
+export { Input } from "./input.component";
+export type { InputProps, MaskType } from "./input.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+export { ErrorMessage } from "./error-message";
+export { Input } from "./input.component";

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+type MaskType = "cpf" | "phone" | "date" | "cep" | "custom";
+interface InputProps {
+    label: string;
+    placeholder?: string;
+    error?: string;
+    value?: string;
+    disabled?: boolean;
+    maskType?: MaskType;
+    customMask?: string;
+    mask?: string;
+    pattern?: RegExp;
+    onChangeText?: (text: string) => void;
+    testID?: string;
+}
+export declare const Input: React.FC<InputProps>;
+export {};
+//# sourceMappingURL=input.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE5D,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiGtC,CAAC"}

package/dist/components/input/input.component.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Animated, Text, TextInput, View } from "react-native";
+import { ErrorMessage } from "./error-message";
+import { useInputStyles } from "./input.styles";
+const applyMask = (value, maskType, customMask) => {
+    if (!value)
+        return value;
+    // Remove todos os caracteres não numéricos
+    const numbers = value.replace(/\D/g, "");
+    switch (maskType) {
+        case "cpf":
+            // Formato: 000.000.000-00
+            return numbers
+                .replace(/(\d{3})(\d)/, "$1.$2")
+                .replace(/(\d{3})(\d)/, "$1.$2")
+                .replace(/(\d{3})(\d{1,2})$/, "$1-$2")
+                .slice(0, 14);
+        case "phone":
+            // Formato: (00) 00000-0000
+            if (numbers.length <= 10) {
+                return numbers
+                    .replace(/(\d{2})(\d)/, "($1) $2")
+                    .replace(/(\d{4})(\d)/, "$1-$2")
+                    .slice(0, 14);
+            }
+            return numbers
+                .replace(/(\d{2})(\d)/, "($1) $2")
+                .replace(/(\d{5})(\d)/, "$1-$2")
+                .slice(0, 15);
+        case "date":
+            // Formato: 00/00/0000
+            return numbers
+                .replace(/(\d{2})(\d)/, "$1/$2")
+                .replace(/(\d{2})(\d)/, "$1/$2")
+                .slice(0, 10);
+        case "cep":
+            // Formato: 00000-000
+            return numbers.replace(/(\d{5})(\d)/, "$1-$2").slice(0, 9);
+        case "custom":
+            if (!customMask)
+                return numbers;
+            let result = "";
+            let numberIndex = 0;
+            for (let i = 0; i < customMask.length && numberIndex < numbers.length; i++) {
+                if (customMask[i] === "#") {
+                    result += numbers[numberIndex];
+                    numberIndex++;
+                }
+                else {
+                    result += customMask[i];
+                }
+            }
+            return result;
+        default:
+            return value;
+    }
+};
+export const Input = ({ label, placeholder, error, value, disabled = false, maskType, customMask, mask, pattern, onChangeText, testID, }) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const focusAnimation = React.useRef(new Animated.Value(0)).current;
+    const styles = useInputStyles();
+    const handleChangeText = (text) => {
+        let maskedText = text;
+        if (maskType) {
+            maskedText = applyMask(text, maskType, customMask);
+        }
+        const effectivePattern = pattern !== null && pattern !== void 0 ? pattern : (mask ? new RegExp(mask) : undefined);
+        if (effectivePattern) {
+            const isValid = effectivePattern.test(maskedText);
+            if (maskedText === "" || isValid) {
+                onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(maskedText);
+            }
+        }
+        else {
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(maskedText);
+        }
+    };
+    React.useEffect(() => {
+        Animated.timing(focusAnimation, {
+            toValue: isFocused ? 1 : 0,
+            duration: 200,
+            useNativeDriver: false,
+        }).start();
+    }, [isFocused]);
+    const borderWidth = focusAnimation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 2],
+    });
+    return (_jsxs(View, { style: styles.container, accessible: true, testID: testID, accessibilityLabel: `${label} input field`, children: [_jsx(View, { style: styles.labelWrapper, children: _jsx(Text, { style: [
+                        styles.labelText,
+                        disabled && styles.disabledText,
+                        isFocused && styles.focusedLabel,
+                    ], accessibilityRole: "text", children: label }) }), _jsxs(Animated.View, { style: [
+                    styles.inputContainer,
+                    error && styles.inputError,
+                    disabled && styles.inputDisabled,
+                    isFocused && styles.inputFocused,
+                    { borderWidth },
+                ], children: [_jsx(TextInput, { style: [styles.input, disabled && styles.inputTextDisabled], placeholder: placeholder, value: value, onChangeText: handleChangeText, editable: !disabled, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityLabel: label, accessibilityState: {
+                            disabled: disabled,
+                        }, placeholderTextColor: "#A4ADB7" }), isFocused && _jsx(View, { style: styles.cursor })] }), error && _jsx(ErrorMessage, { message: error })] }));
+};