decathlon-ui 0.3.36 → 0.3.38

package/dist/components/blue-product-filter/blue-product-filter.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blue-product-filter.component.d.ts","sourceRoot":"","sources":["../../../src/components/blue-product-filter/blue-product-filter.component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,QAAgB,GACjB,EAAE,uBAAuB,2CA2BzB"}
+{"version":3,"file":"blue-product-filter.component.d.ts","sourceRoot":"","sources":["../../../src/components/blue-product-filter/blue-product-filter.component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,QAAQ,EACR,QAAgB,GACjB,EAAE,uBAAuB,2CA+BzB"}

package/dist/components/blue-product-filter/blue-product-filter.component.js

@@ -5,5 +5,5 @@ import { ToggleSwitch } from "../toggle-switch";
 import { useBlueProductFilterStyles } from "./blue-product-filter.styles";
 export function BlueProductFilter({ selected, onChange, disabled = false, }) {
     const styles = useBlueProductFilterStyles();
-    return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.leftContent, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(BlueProductRoundedIcon, { viewBox: "0 0 50 50", size: 48 }) }), _jsxs(View, { style: styles.textContent, children: [_jsx(Text, { style: styles.title, children: "Produto Azul" }), _jsxs(Text, { style: styles.description, children: ["Produtos Decathlon com o", "\n", " melhor custo-benef\u00EDcio"] })] })] }), _jsx(View, { style: styles.toggleContainer, children: _jsx(ToggleSwitch, { isOn: selected, onToggle: () => onChange(!selected), disabled: disabled }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.leftContent, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(BlueProductRoundedIcon, { viewBox: "0 0 50 50", size: 48 }) }), _jsxs(View, { style: styles.textContent, children: [_jsx(Text, { style: styles.title, children: "Produto Azul" }), _jsxs(Text, { style: styles.description, children: ["Produtos Decathlon com o", "\n", "melhor custo-benef\u00EDcio"] })] })] }), _jsx(View, { style: styles.toggleContainer, children: _jsx(ToggleSwitch, { isOn: selected, onToggle: () => onChange(!selected), disabled: disabled, activeCircleColor: "#fff", inactiveBackgroundColor: "#D9DDE1", inactiveBorderColor: "#D9DDE1", inactiveCircleColor: "#fff" }) })] }));
 }

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

@@ -38,7 +38,7 @@ const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName,
                                 }, icon: flag.icon }, flag.name + index + productName));
                         })), showFavoriteButton && (_jsx(TouchableOpacity, { style: [
                             isFavorite ? styles.favoriteButton : styles.unfavoriteButton,
-                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: isLoadingFavorite ? (_jsx(Loading, { size: 16 })) : isFavorite ? (_jsx(HeartFillIcon, { size: 16, color: "#101010" })) : (_jsx(HeartIcon, { size: 16, color: "#101010" })) }))] }), variant !== "lastViewed" && (_jsxs(View, { style: styles.detailsContainer, children: [_jsxs(View, { style: styles.productInfo, children: [_jsx(Text, { style: styles.brandText, children: brand }), _jsx(View, { style: styles.nameContainer, children: _jsx(Text, { numberOfLines: 3, style: styles.nameText, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }) })] }), variant === "grid" && showRating && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#15181B", filled: true }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating === null || rating === void 0 ? void 0 : rating.toString().replace(/\./g, ",") }), _jsx(Text, { style: styles.reviewCountText, children: reviewCount })] })] })), _jsxs(View, { style: styles.priceContainer, children: [_jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${price}`, children: `${price} à vista` }), discountPrice && (_jsx(Text, { style: styles.priceDiscountText, children: discountPrice }))] }), colorsVariants && (_jsx(Text, { style: styles.colorsText, children: colorsVariants }))] }))] })), [
+                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: isLoadingFavorite ? (_jsx(Loading, { size: 16 })) : isFavorite ? (_jsx(HeartFillIcon, { size: 16, color: "#101010" })) : (_jsx(HeartIcon, { size: 16, color: "#101010" })) }))] }), variant !== "lastViewed" && (_jsxs(View, { style: styles.detailsContainer, children: [_jsxs(View, { style: styles.productInfo, children: [_jsx(Text, { style: styles.brandText, children: brand }), _jsx(View, { style: styles.nameContainer, children: _jsx(Text, { numberOfLines: 3, style: styles.nameText, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }) })] }), variant === "grid" && showRating && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#15181B", filled: true }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating === null || rating === void 0 ? void 0 : rating.toString().replace(/\./g, ",") }), _jsx(Text, { style: styles.reviewCountText, children: reviewCount })] })] })), _jsxs(View, { style: styles.priceContainer, children: [_jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${price}`, children: `${price} ${discountPrice ? `à vista` : ''}` }), discountPrice && (_jsx(Text, { style: styles.priceDiscountText, children: discountPrice }))] }), colorsVariants && (_jsx(Text, { style: styles.colorsText, children: colorsVariants }))] }))] })), [
         brand,
         handleFavoritePress,
         imageUrl,

package/dist/components/toggle-switch/toggle-switch.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.component.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA+D/D,eAAO,MAAM,YAAY,+CAAoC,CAAC"}
+{"version":3,"file":"toggle-switch.component.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA0E/D,eAAO,MAAM,YAAY,+CAAoC,CAAC"}

package/dist/components/toggle-switch/toggle-switch.component.js

@@ -3,8 +3,14 @@ import * as React from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { useTheme } from "../../themes";
 import { useToggleSwitchStyles } from "./toggle-switch.styles";
-const ToggleSwitchComponent = ({ isOn = false, onToggle, disabled = false, error = false, testID, label, }) => {
-    const styles = useToggleSwitchStyles();
+const ToggleSwitchComponent = ({ isOn = false, onToggle, disabled = false, error = false, testID, label, activeBackgroundColor, inactiveBackgroundColor, inactiveBorderColor, activeCircleColor, inactiveCircleColor, }) => {
+    const styles = useToggleSwitchStyles({
+        activeBackgroundColor,
+        inactiveBackgroundColor,
+        inactiveBorderColor,
+        activeCircleColor,
+        inactiveCircleColor,
+    });
     const { colors } = useTheme();
     const handlePress = React.useCallback(() => {
         if (!disabled && onToggle) {

package/dist/components/toggle-switch/toggle-switch.styles.d.ts

@@ -1,4 +1,11 @@
-export declare const useToggleSwitchStyles: () => {
+interface ToggleSwitchStylesProps {
+    activeBackgroundColor?: string;
+    inactiveBackgroundColor?: string;
+    inactiveBorderColor?: string;
+    activeCircleColor?: string;
+    inactiveCircleColor?: string;
+}
+export declare const useToggleSwitchStyles: (customColors?: ToggleSwitchStylesProps) => {
     container: {
         flexDirection: "row";
         alignItems: "center";
@@ -13,7 +20,7 @@ export declare const useToggleSwitchStyles: () => {
         justifyContent: "center";
     };
     switchActive: {
-        backgroundColor: "#3643BA";
+        backgroundColor: string;
     };
     switchDisabled: {
         backgroundColor: "#949494";
@@ -22,8 +29,8 @@ export declare const useToggleSwitchStyles: () => {
         backgroundColor: "#AB0009";
     };
     switchInactive: {
-        backgroundColor: "#FFFFFF";
-        borderColor: "#B3BAC3";
+        backgroundColor: string;
+        borderColor: string;
         borderWidth: number;
     };
     circle: {
@@ -42,12 +49,13 @@ export declare const useToggleSwitchStyles: () => {
     };
     circleActive: {
         alignSelf: "flex-end";
+        backgroundColor: string;
     };
     circleDisabled: {
         backgroundColor: "#EFF1F3";
     };
     circleInactive: {
-        backgroundColor: "#949494";
+        backgroundColor: string;
     };
     label: {
         color: "#101010";
@@ -61,4 +69,5 @@ export declare const useToggleSwitchStyles: () => {
         color: "#AB0009";
     };
 };
+export {};
 //# sourceMappingURL=toggle-switch.styles.d.ts.map

package/dist/components/toggle-switch/toggle-switch.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEjC,CAAC"}
+{"version":3,"file":"toggle-switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.styles.ts"],"names":[],"mappings":"AAIA,UAAU,uBAAuB;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,GAChC,eAAe,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEvC,CAAC"}

package/dist/components/toggle-switch/toggle-switch.styles.js

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { useTheme } from "../../themes";
-export const useToggleSwitchStyles = () => {
+export const useToggleSwitchStyles = (customColors) => {
     const { colors, spacing, radius } = useTheme();
     return useMemo(() => StyleSheet.create({
         container: {
@@ -18,7 +18,7 @@ export const useToggleSwitchStyles = () => {
             justifyContent: "center",
         },
         switchActive: {
-            backgroundColor: colors.textAction,
+            backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.activeBackgroundColor) || colors.textAction,
         },
         switchDisabled: {
             backgroundColor: colors.textDisabled,
@@ -27,8 +27,8 @@ export const useToggleSwitchStyles = () => {
             backgroundColor: colors.textError,
         },
         switchInactive: {
-            backgroundColor: colors.white,
-            borderColor: colors.borderPrimary,
+            backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.inactiveBackgroundColor) || colors.white,
+            borderColor: (customColors === null || customColors === void 0 ? void 0 : customColors.inactiveBorderColor) || colors.borderPrimary,
             borderWidth: 1,
         },
         circle: {
@@ -44,12 +44,13 @@ export const useToggleSwitchStyles = () => {
         },
         circleActive: {
             alignSelf: "flex-end",
+            backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.activeCircleColor) || colors.white,
         },
         circleDisabled: {
             backgroundColor: colors.backgroundTertiary,
         },
         circleInactive: {
-            backgroundColor: colors.iconDisabled,
+            backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.inactiveCircleColor) || colors.iconDisabled,
         },
         label: {
             color: colors.textPrimary,
@@ -62,5 +63,5 @@ export const useToggleSwitchStyles = () => {
         labelError: {
             color: colors.textError,
         },
-    }), [colors, spacing, radius]);
+    }), [colors, spacing, radius, customColors]);
 };

package/dist/components/toggle-switch/toggle-switch.types.d.ts

@@ -23,5 +23,25 @@ export interface ToggleSwitchProps {
      * Label que acompanha o switch
      */
     label?: string;
+    /**
+     * Cor de fundo quando o switch está ativo
+     */
+    activeBackgroundColor?: string;
+    /**
+     * Cor de fundo quando o switch está inativo
+     */
+    inactiveBackgroundColor?: string;
+    /**
+     * Cor da borda quando o switch está inativo
+     */
+    inactiveBorderColor?: string;
+    /**
+     * Cor da bolinha quando o switch está ativo
+     */
+    activeCircleColor?: string;
+    /**
+     * Cor da bolinha quando o switch está inativo
+     */
+    inactiveCircleColor?: string;
 }
 //# sourceMappingURL=toggle-switch.types.d.ts.map

package/dist/components/toggle-switch/toggle-switch.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"toggle-switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/toggle-switch.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "decathlon-ui",
-  "version": "0.3.36",
+  "version": "0.3.38",
   "description": "Biblioteca de componentes React Native com Storybook e documentação via GitHub Pages.",
   "main": "dist/index.js",
   "module": "dist/index.js",