decathlon-ui 0.3.36 → 0.3.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/blue-product-filter/blue-product-filter.component.d.ts.map +1 -1
  2. package/dist/components/blue-product-filter/blue-product-filter.component.js +1 -1
  3. package/dist/components/toggle-switch/toggle-switch.component.d.ts.map +1 -1
  4. package/dist/components/toggle-switch/toggle-switch.component.js +8 -2
  5. package/dist/components/toggle-switch/toggle-switch.styles.d.ts +14 -5
  6. package/dist/components/toggle-switch/toggle-switch.styles.d.ts.map +1 -1
  7. package/dist/components/toggle-switch/toggle-switch.styles.js +7 -6
  8. package/dist/components/toggle-switch/toggle-switch.types.d.ts +20 -0
  9. package/dist/components/toggle-switch/toggle-switch.types.d.ts.map +1 -1
  10. package/package.json +1 -1
package/dist/components/blue-product-filter/blue-product-filter.component.d.ts.map CHANGED
@@ -1 +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"}
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,2CA+BzB"}
package/dist/components/blue-product-filter/blue-product-filter.component.js CHANGED
@@ -5,5 +5,5 @@ import { ToggleSwitch } from "../toggle-switch";
5
5
  import { useBlueProductFilterStyles } from "./blue-product-filter.styles";
6
6
  export function BlueProductFilter({ selected, onChange, disabled = false, }) {
7
7
  const styles = useBlueProductFilterStyles();
8
- 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 }) })] }));
8
+ 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" }) })] }));
9
9
  }
package/dist/components/toggle-switch/toggle-switch.component.d.ts.map CHANGED
@@ -1 +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"}
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;AA0E/D,eAAO,MAAM,YAAY,+CAAoC,CAAC"}
package/dist/components/toggle-switch/toggle-switch.component.js CHANGED
@@ -3,8 +3,14 @@ import * as React from "react";
3
3
  import { Text, TouchableOpacity, View } from "react-native";
4
4
  import { useTheme } from "../../themes";
5
5
  import { useToggleSwitchStyles } from "./toggle-switch.styles";
6
- const ToggleSwitchComponent = ({ isOn = false, onToggle, disabled = false, error = false, testID, label, }) => {
7
- const styles = useToggleSwitchStyles();
6
+ const ToggleSwitchComponent = ({ isOn = false, onToggle, disabled = false, error = false, testID, label, activeBackgroundColor, inactiveBackgroundColor, inactiveBorderColor, activeCircleColor, inactiveCircleColor, }) => {
7
+ const styles = useToggleSwitchStyles({
8
+ activeBackgroundColor,
9
+ inactiveBackgroundColor,
10
+ inactiveBorderColor,
11
+ activeCircleColor,
12
+ inactiveCircleColor,
13
+ });
8
14
  const { colors } = useTheme();
9
15
  const handlePress = React.useCallback(() => {
10
16
  if (!disabled && onToggle) {
package/dist/components/toggle-switch/toggle-switch.styles.d.ts CHANGED
@@ -1,4 +1,11 @@
1
- export declare const useToggleSwitchStyles: () => {
1
+ interface ToggleSwitchStylesProps {
2
+ activeBackgroundColor?: string;
3
+ inactiveBackgroundColor?: string;
4
+ inactiveBorderColor?: string;
5
+ activeCircleColor?: string;
6
+ inactiveCircleColor?: string;
7
+ }
8
+ export declare const useToggleSwitchStyles: (customColors?: ToggleSwitchStylesProps) => {
2
9
  container: {
3
10
  flexDirection: "row";
4
11
  alignItems: "center";
@@ -13,7 +20,7 @@ export declare const useToggleSwitchStyles: () => {
13
20
  justifyContent: "center";
14
21
  };
15
22
  switchActive: {
16
- backgroundColor: "#3643BA";
23
+ backgroundColor: string;
17
24
  };
18
25
  switchDisabled: {
19
26
  backgroundColor: "#949494";
@@ -22,8 +29,8 @@ export declare const useToggleSwitchStyles: () => {
22
29
  backgroundColor: "#AB0009";
23
30
  };
24
31
  switchInactive: {
25
- backgroundColor: "#FFFFFF";
26
- borderColor: "#B3BAC3";
32
+ backgroundColor: string;
33
+ borderColor: string;
27
34
  borderWidth: number;
28
35
  };
29
36
  circle: {
@@ -42,12 +49,13 @@ export declare const useToggleSwitchStyles: () => {
42
49
  };
43
50
  circleActive: {
44
51
  alignSelf: "flex-end";
52
+ backgroundColor: string;
45
53
  };
46
54
  circleDisabled: {
47
55
  backgroundColor: "#EFF1F3";
48
56
  };
49
57
  circleInactive: {
50
- backgroundColor: "#949494";
58
+ backgroundColor: string;
51
59
  };
52
60
  label: {
53
61
  color: "#101010";
@@ -61,4 +69,5 @@ export declare const useToggleSwitchStyles: () => {
61
69
  color: "#AB0009";
62
70
  };
63
71
  };
72
+ export {};
64
73
  //# sourceMappingURL=toggle-switch.styles.d.ts.map
package/dist/components/toggle-switch/toggle-switch.styles.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useMemo } from "react";
2
2
  import { StyleSheet } from "react-native";
3
3
  import { useTheme } from "../../themes";
4
- export const useToggleSwitchStyles = () => {
4
+ export const useToggleSwitchStyles = (customColors) => {
5
5
  const { colors, spacing, radius } = useTheme();
6
6
  return useMemo(() => StyleSheet.create({
7
7
  container: {
@@ -18,7 +18,7 @@ export const useToggleSwitchStyles = () => {
18
18
  justifyContent: "center",
19
19
  },
20
20
  switchActive: {
21
- backgroundColor: colors.textAction,
21
+ backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.activeBackgroundColor) || colors.textAction,
22
22
  },
23
23
  switchDisabled: {
24
24
  backgroundColor: colors.textDisabled,
@@ -27,8 +27,8 @@ export const useToggleSwitchStyles = () => {
27
27
  backgroundColor: colors.textError,
28
28
  },
29
29
  switchInactive: {
30
- backgroundColor: colors.white,
31
- borderColor: colors.borderPrimary,
30
+ backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.inactiveBackgroundColor) || colors.white,
31
+ borderColor: (customColors === null || customColors === void 0 ? void 0 : customColors.inactiveBorderColor) || colors.borderPrimary,
32
32
  borderWidth: 1,
33
33
  },
34
34
  circle: {
@@ -44,12 +44,13 @@ export const useToggleSwitchStyles = () => {
44
44
  },
45
45
  circleActive: {
46
46
  alignSelf: "flex-end",
47
+ backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.activeCircleColor) || colors.white,
47
48
  },
48
49
  circleDisabled: {
49
50
  backgroundColor: colors.backgroundTertiary,
50
51
  },
51
52
  circleInactive: {
52
- backgroundColor: colors.iconDisabled,
53
+ backgroundColor: (customColors === null || customColors === void 0 ? void 0 : customColors.inactiveCircleColor) || colors.iconDisabled,
53
54
  },
54
55
  label: {
55
56
  color: colors.textPrimary,
@@ -62,5 +63,5 @@ export const useToggleSwitchStyles = () => {
62
63
  labelError: {
63
64
  color: colors.textError,
64
65
  },
65
- }), [colors, spacing, radius]);
66
+ }), [colors, spacing, radius, customColors]);
66
67
  };
package/dist/components/toggle-switch/toggle-switch.types.d.ts CHANGED
@@ -23,5 +23,25 @@ export interface ToggleSwitchProps {
23
23
  * Label que acompanha o switch
24
24
  */
25
25
  label?: string;
26
+ /**
27
+ * Cor de fundo quando o switch está ativo
28
+ */
29
+ activeBackgroundColor?: string;
30
+ /**
31
+ * Cor de fundo quando o switch está inativo
32
+ */
33
+ inactiveBackgroundColor?: string;
34
+ /**
35
+ * Cor da borda quando o switch está inativo
36
+ */
37
+ inactiveBorderColor?: string;
38
+ /**
39
+ * Cor da bolinha quando o switch está ativo
40
+ */
41
+ activeCircleColor?: string;
42
+ /**
43
+ * Cor da bolinha quando o switch está inativo
44
+ */
45
+ inactiveCircleColor?: string;
26
46
  }
27
47
  //# sourceMappingURL=toggle-switch.types.d.ts.map
package/dist/components/toggle-switch/toggle-switch.types.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "decathlon-ui",
3
- "version": "0.3.36",
3
+ "version": "0.3.37",
4
4
  "description": "Biblioteca de componentes React Native com Storybook e documentação via GitHub Pages.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",