sapo-components-ui-rn 1.0.47 → 1.0.49

package/dist/styles/themes/tokens.d.ts

@@ -254,6 +254,8 @@ export declare const tokens: {
                         borderPrimaryFocused: string;
                         borderWarningInverseDefault: string;
                         borderSuccessInverseDefault: string;
+                        toggleBackgroundDefault: string;
+                        toggleBackgroundActive: string;
                     };
                 };
                 light: {
@@ -395,6 +397,8 @@ export declare const tokens: {
                         borderPrimaryFocused: string;
                         borderWarningInverseDefault: string;
                         borderSuccessInverseDefault: string;
+                        toggleBackgroundDefault: string;
+                        toggleBackgroundActive: string;
                     };
                 };
             };
@@ -667,6 +671,8 @@ export declare const ThemeColors: {
             borderPrimaryFocused: string;
             borderWarningInverseDefault: string;
             borderSuccessInverseDefault: string;
+            toggleBackgroundDefault: string;
+            toggleBackgroundActive: string;
         };
     };
     light: {
@@ -808,6 +814,8 @@ export declare const ThemeColors: {
             borderPrimaryFocused: string;
             borderWarningInverseDefault: string;
             borderSuccessInverseDefault: string;
+            toggleBackgroundDefault: string;
+            toggleBackgroundActive: string;
         };
     };
 };

package/dist/types.d.ts

@@ -150,6 +150,8 @@ export type ThemeColors = {
     textWarningPressed: string;
     selectBackgroundDisabled: string;
     selectIconDisabled: string;
+    toggleBackgroundDefault: string;
+    toggleBackgroundActive: string;
 };
 export type ThemeProp = $DeepPartial<InternalTheme>;
 export type ThemeBase = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapo-components-ui-rn",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "description": "React Native UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/Icon/index.tsx

@@ -15,6 +15,10 @@ import IconArrowDown from "../../icons/IconArrowDown";
 import IconClearText from "../../icons/IconClearText";
 import IconSearch from "@/icons/IconSearch";
 import IconClose from "@/icons/IconClose";
+import IconSuccess from "@/icons/IconSuccess";
+import IconError from "@/icons/IconError";
+import IconInfo from "@/icons/IconInfo";
+import IconWarning from "@/icons/IconWarning";
 
 export type IconType =
   | "FontAwesome"
@@ -34,7 +38,11 @@ export interface IconProps {
     | "IconArrowDown"
     | "IconClearText"
     | "IconSearch"
-    | "IconClose";
+    | "IconClose"
+    | "IconSuccess"
+    | "IconError"
+    | "IconInfo"
+    | "IconWarning";
   backgroundColor?: string;
   size?: number;
   color?: string;
@@ -95,6 +103,14 @@ const Icon: React.FC<IconProps> = ({
         return IconSearch;
       case "IconClose":
         return IconClose;
+      case "IconSuccess":
+        return IconSuccess;
+      case "IconError":
+        return IconError;
+      case "IconInfo":
+        return IconInfo;
+      case "IconWarning":
+        return IconWarning;
       default:
         return IconCheckbox;
     }

package/src/components/Switch/Switch.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import {
   NativeModules,
-  Platform,
   StyleProp,
   Switch as NativeSwitch,
   ViewStyle,
@@ -67,7 +66,7 @@ const Switch = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme();
-  const { checkedColor, onTintColor, thumbTintColor } = getSwitchColor({
+  const { onTintColor, thumbTintColor } = getSwitchColor({
     theme,
     disabled,
     value,
@@ -80,12 +79,6 @@ const Switch = ({
           onTintColor,
           thumbTintColor,
         }
-      : Platform.OS === "web"
-      ? {
-          activeTrackColor: onTintColor,
-          thumbColor: thumbTintColor,
-          activeThumbColor: checkedColor,
-        }
       : {
           thumbColor: thumbTintColor,
           trackColor: {

package/src/components/Switch/utils.ts

@@ -19,7 +19,7 @@ const getCheckedColor = ({
     return color;
   }
 
-  return theme.colors.surfaceBrandDefault;
+  return theme.colors.toggleBackgroundActive;
 };
 
 const getThumbTintColor = ({
@@ -36,9 +36,9 @@ const getThumbTintColor = ({
 
   if (disabled) {
     if (theme.dark) {
-      return theme.colors.backgroundPrimary;
+      return theme.colors.toggleBackgroundDefault;
     }
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
   }
 
   if (value) {
@@ -46,9 +46,9 @@ const getThumbTintColor = ({
   }
 
   if (theme.dark) {
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
   }
-  return theme.colors.backgroundPrimary;
+  return theme.colors.toggleBackgroundDefault;
 };
 
 const getOnTintColor = ({
@@ -65,9 +65,9 @@ const getOnTintColor = ({
 
   if (disabled) {
     if (theme.dark) {
-      return theme.colors.backgroundPrimary;
+      return theme.colors.toggleBackgroundDefault;
     }
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
   }
 
   if (value) {
@@ -75,9 +75,9 @@ const getOnTintColor = ({
   }
 
   if (theme.dark) {
-    return theme.colors.backgroundPrimary;
+    return theme.colors.toggleBackgroundDefault;
   }
-  return theme.colors.backgroundPrimary;
+  return theme.colors.toggleBackgroundDefault;
 };
 
 export const getSwitchColor = ({

package/src/components/Toast/index.tsx

@@ -10,6 +10,7 @@ import View from "../View";
 import { memoWithRef } from "@/utils/function-utils";
 import ViewVisibleAnimated from "../ViewVisibleAnimated";
 import { useInternalTheme } from "../../core/theming";
+import Icon from "../Icon";
 
 const POSITION = {
   TOP: "top",
@@ -165,15 +166,15 @@ const Toast = memoWithRef(
     const getSourceIcon = () => {
       switch (options.type) {
         case "success":
-          return require("./assets/images/success.png");
+          return "IconSuccess";
         case "error":
-          return require("./assets/images/error.png");
+          return "IconError";
         case "info":
-          return require("./assets/images/info.png");
+          return "IconInfo";
         case "warning":
-          return require("./assets/images/warning.png");
+          return "IconWarning";
         default:
-          return require("./assets/images/success.png");
+          return "IconSuccess";
       }
     };
 
@@ -234,7 +235,7 @@ const Toast = memoWithRef(
         >
           <View row style={{ alignItems: "flex-start" }}>
             <View>
-              <RNImage source={getSourceIcon()} style={styles.img} />
+              <Icon name={getSourceIcon()} type="Svg" size={20} />
             </View>
             <View full paddingLeft={CONSTANTS.SPACE_8}>
               <Text bold color={colors.textOnFillDefault}>

package/src/icons/IconError.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+import { SvgProps } from "react-native-svg";
+const IconError = (props: SvgProps) => (
+  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM3.86364 10C3.86364 6.61098 6.61098 3.86364 10 3.86364C13.389 3.86364 16.1364 6.61098 16.1364 10C16.1364 13.389 13.389 16.1364 10 16.1364C6.61098 16.1364 3.86364 13.389 3.86364 10Z"
+      fill="white"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.3333 6.66667L10 10L6.66667 6.66667L5.83333 7.5L9.16667 10.8333L5.83333 14.1667L6.66667 15L10 11.6667L13.3333 15L14.1667 14.1667L10.8333 10.8333L14.1667 7.5L13.3333 6.66667Z"
+      fill="white"
+    />
+  </Svg>
+);
+
+export default IconError;

package/src/icons/IconInfo.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+const IconInfo = (props: SvgProps) => (
+  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM3.86364 10C3.86364 6.61098 6.61098 3.86364 10 3.86364C13.389 3.86364 16.1364 6.61098 16.1364 10C16.1364 13.389 13.389 16.1364 10 16.1364C6.61098 16.1364 3.86364 13.389 3.86364 10Z"
+      fill="white"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 6.66667C10.4602 6.66667 10.8333 7.03976 10.8333 7.5V10.8333C10.8333 11.2936 10.4602 11.6667 10 11.6667C9.53976 11.6667 9.16667 11.2936 9.16667 10.8333V7.5C9.16667 7.03976 9.53976 6.66667 10 6.66667Z"
+      fill="white"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 12.5C10.4602 12.5 10.8333 12.8731 10.8333 13.3333C10.8333 13.7936 10.4602 14.1667 10 14.1667C9.53976 14.1667 9.16667 13.7936 9.16667 13.3333C9.16667 12.8731 9.53976 12.5 10 12.5Z"
+      fill="white"
+    />
+  </Svg>
+);
+
+export default IconInfo;

package/src/icons/IconSuccess.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+const IconSuccess = (props: SvgProps) => (
+  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM3.86364 10C3.86364 6.61098 6.61098 3.86364 10 3.86364C13.389 3.86364 16.1364 6.61098 16.1364 10C16.1364 13.389 13.389 16.1364 10 16.1364C6.61098 16.1364 3.86364 13.389 3.86364 10Z"
+      fill="white"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.875 10.9242L12.8447 6.9545L13.9053 8.01516L8.875 13.0455L6.09467 10.2652L7.15533 9.2045L8.875 10.9242Z"
+      fill="white"
+    />
+  </Svg>
+);
+
+export default IconSuccess;

package/src/icons/IconWarning.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+const IconWarning = (props: SvgProps) => (
+  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 2.5L17.5 17.5H2.5L10 2.5ZM10 5.83333L4.16667 15.8333H15.8333L10 5.83333Z"
+      fill="white"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 7.5C10.4602 7.5 10.8333 7.8731 10.8333 8.33333V11.6667C10.8333 12.1269 10.4602 12.5 10 12.5C9.53976 12.5 9.16667 12.1269 9.16667 11.6667V8.33333C9.16667 7.8731 9.53976 7.5 10 7.5Z"
+      fill="white"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 13.3333C10.4602 13.3333 10.8333 13.7064 10.8333 14.1667C10.8333 14.6269 10.4602 15 10 15C9.53976 15 9.16667 14.6269 9.16667 14.1667C9.16667 13.7064 9.53976 13.3333 10 13.3333Z"
+      fill="white"
+    />
+  </Svg>
+);
+
+export default IconWarning;

package/src/styles/themes/DarkTheme.tsx

@@ -152,5 +152,7 @@ export const DarkTheme: AppTheme = {
     borderPrimaryFocused: blue.BLUE100,
     borderWarningInverseDefault: yellow.YELLOW40,
     borderSuccessInverseDefault: green.GREEN40,
+    toggleBackgroundDefault: ink.INK10,
+    toggleBackgroundActive: green.GREEN80,
   },
 };

package/src/styles/themes/LightTheme.tsx

@@ -151,6 +151,8 @@ export const LightTheme: AppTheme = {
     borderPrimaryFocused: blue.BLUE100,
     borderWarningInverseDefault: yellow.YELLOW40,
     borderSuccessInverseDefault: green.GREEN40,
+    toggleBackgroundDefault: ink.INK10,
+    toggleBackgroundActive: green.GREEN80,
   },
   fonts: configureFonts(),
   animation: {

package/src/styles/themes/tokens.tsx

@@ -150,6 +150,8 @@ const ref = {
         borderPrimaryFocused: blue.BLUE100,
         borderWarningInverseDefault: yellow.YELLOW40,
         borderSuccessInverseDefault: green.GREEN40,
+        toggleBackgroundDefault: ink.INK10,
+        toggleBackgroundActive: green.GREEN80,
       },
     },
     light: {
@@ -292,6 +294,8 @@ const ref = {
         borderPrimaryFocused: blue.BLUE100,
         borderWarningInverseDefault: yellow.YELLOW40,
         borderSuccessInverseDefault: green.GREEN40,
+        toggleBackgroundDefault: ink.INK10,
+        toggleBackgroundActive: green.GREEN80,
       },
     },
   },

package/src/types.ts

@@ -178,6 +178,9 @@ export type ThemeColors = {
 
   selectBackgroundDisabled: string;
   selectIconDisabled: string;
+
+  toggleBackgroundDefault: string;
+  toggleBackgroundActive: string
 };
 
 export type ThemeProp = $DeepPartial<InternalTheme>;