sapo-components-ui-rn 1.1.21 → 1.1.23

package/package.json

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

package/src/assets/svg/icon-arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0107 9.70166L12 15.7124L5.98926 9.70166L7.40332 8.2876L12 12.8843L16.5967 8.2876L18.0107 9.70166Z" fill="#A3A8AF"/>
+</svg>

package/src/assets/svg/icon-clear-text.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.66699C16.6024 3.66699 20.333 7.39763 20.333 12C20.333 16.6024 16.6024 20.333 12 20.333C7.39763 20.333 3.66699 16.6024 3.66699 12C3.66699 7.39763 7.39763 3.66699 12 3.66699Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66669 12C3.66669 7.39167 7.39169 3.66667 12 3.66667C16.6084 3.66667 20.3334 7.39167 20.3334 12C20.3334 16.6083 16.6084 20.3333 12 20.3333C7.39169 20.3333 3.66669 16.6083 3.66669 12ZM12 10.825L14.1584 8.66667L15.3334 9.84167L13.175 12L15.3334 14.1583L14.1584 15.3333L12 13.175L9.84169 15.3333L8.66669 14.1583L10.825 12L8.66669 9.84167L9.84169 8.66667L12 10.825Z" fill="#A3A8AF"/>
+</svg>

package/src/assets/svg/icon-del-number.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.0455 0H11.4154C10.7939 0.000239015 10.1952 0.240624 9.7409 0.6725L0.889895 9.08617C0.641199 9.32258 0.5 9.65352 0.5 10C0.5 10.3465 0.641199 10.6774 0.889895 10.9138L9.74099 19.3276C10.1953 19.7595 10.7939 19.9998 11.4154 20H25.0455C25.6964 20 26.3208 19.7366 26.7811 19.2678C27.2414 18.7989 27.5 18.163 27.5 17.5V2.5C27.5 1.83696 27.2414 1.20108 26.7811 0.732233C26.3208 0.263392 25.6964 0 25.0455 0Z" fill="#A3A8AF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7085 5.9531C14.1026 5.56618 14.7357 5.57199 15.1227 5.96608L17.6818 8.57263L20.241 5.96608C20.6279 5.57199 21.261 5.56618 21.6551 5.9531C22.0492 6.34003 22.055 6.97317 21.6681 7.36726L19.0832 10L21.6681 12.6327C22.055 13.0268 22.0492 13.66 21.6551 14.0469C21.261 14.4338 20.6279 14.428 20.241 14.0339L17.6818 11.4274L15.1227 14.0339C14.7357 14.428 14.1026 14.4338 13.7085 14.0469C13.3144 13.66 13.3086 13.0268 13.6955 12.6327L16.2804 10L13.6955 7.36726C13.3086 6.97317 13.3144 6.34003 13.7085 5.9531Z" fill="white"/>
+</svg>

package/src/assets/svg/icon-error.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99219 2.5004C14.1397 2.5004 17.5 5.8604 17.5 10.0004C17.4998 14.1402 14.1396 17.5004 9.99219 17.5004C5.85247 17.5002 2.50022 14.1401 2.5 10.0004C2.5 5.8605 5.85233 2.50057 9.99219 2.5004ZM10 4.0004C6.685 4.0004 4 6.6854 4 10.0004C4.00022 13.3152 6.68514 16.0004 10 16.0004C13.3149 16.0004 15.9998 13.3152 16 10.0004C16 6.6854 13.315 4.0004 10 4.0004ZM10.75 12.2504V13.7504H9.25V12.2504H10.75ZM10.75 6.2504V10.7504H9.25V6.2504H10.75Z" fill="white"/>
+</svg>

package/src/assets/svg/icon-info.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.5004C14.1667 2.5004 17.5 5.83374 17.5 10.0004C17.4998 14.1669 14.1665 17.5004 10 17.5004C5.83347 17.5004 2.50022 14.1669 2.5 10.0004C2.5 5.83374 5.83333 2.5004 10 2.5004ZM10 4.0004C6.66667 4.0004 4 6.66707 4 10.0004C4.00022 13.3335 6.6668 16.0004 10 16.0004C13.3332 16.0004 15.9998 13.3335 16 10.0004C16 6.66707 13.3333 4.0004 10 4.0004ZM10.75 12.2504H11.5V13.7504H9.25V10.7504H8.5V9.2504H10.75V12.2504ZM10.75 7.7504H9.25V6.2504H10.75V7.7504Z" fill="white"/>
+</svg>

package/src/assets/svg/icon-search.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_155_9023)">
+<path d="M19.7 18.3L15.5 14.1C15.3 13.9 15 13.8 14.7 13.8C15.5 12.8 16 11.4 16 10C16 6.7 13.3 4 10 4C6.7 4 4 6.7 4 10C4 13.3 6.7 16 10 16C11.4 16 12.8 15.5 13.8 14.6C13.8 14.9 13.8 15.2 14.1 15.4L18.3 19.6C18.5 19.8 18.8 19.9 19 19.9C19.2 19.9 19.5 19.8 19.7 19.6C20.1 19.3 20.1 18.7 19.7 18.3ZM10 14.5C7.5 14.5 5.5 12.5 5.5 10C5.5 7.5 7.5 5.5 10 5.5C12.5 5.5 14.5 7.5 14.5 10C14.5 12.5 12.5 14.5 10 14.5Z" fill="#A3A8AF"/>
+</g>
+<defs>
+<clipPath id="clip0_155_9023">
+<rect width="16" height="16" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/svg/icon-success.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.50041C14.1421 2.50041 17.5 5.85828 17.5 10.0004C17.4998 14.1424 14.142 17.5004 10 17.5004C5.858 17.5004 2.50022 14.1424 2.5 10.0004C2.5 5.85828 5.85786 2.50041 10 2.50041ZM10 3.86369C6.61098 3.86369 3.86328 6.61139 3.86328 10.0004C3.8635 13.3892 6.61112 16.1362 10 16.1362C13.3889 16.1362 16.1365 13.3892 16.1367 10.0004C16.1367 6.61139 13.389 3.86369 10 3.86369ZM13.9053 8.01506L8.875 13.0453L6.09473 10.2651L7.15527 9.20451L8.875 10.9242L12.8447 6.95451L13.9053 8.01506Z" fill="white"/>
+</svg>

package/src/assets/svg/icon-warning.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.27915 2.9137C9.60027 2.35977 10.4006 2.35955 10.7215 2.9137L18.4422 16.2506C18.7638 16.8061 18.3633 17.5014 17.7215 17.5016H2.27915C1.63721 17.5016 1.23583 16.8062 1.55747 16.2506L9.27915 2.9137ZM3.72446 15.8346H16.2762L9.99985 4.99475L3.72446 15.8346ZM10.8329 14.9996H9.16685V13.3336H10.8329V14.9996ZM10.8329 12.4996H9.16685V8.33362H10.8329V12.4996Z" fill="white"/>
+</svg>

package/src/assets/svg/index.ts

@@ -3,6 +3,14 @@ import IconCheckbox from "./icon-checkbox.svg";
 import IconCheckboxActive from "./icon-checkbox-active.svg";
 import IconRadio from "./icon-radio.svg";
 import IconRadioActive from "./icon-radio-active.svg";
+import IconSearch from "./icons/IconSearch.svg";
+import IconInfo from "./icons/IconInfo.svg";
+import IconSuccess from "./icons/IconSuccess.svg";
+import IconWarning from "./icons/IconWarning.svg";
+import IconArrowDown from "./icons/IconArrowDown.svg";
+import IconError from "./icons/IconError.svg";
+import IconClearText from "./icons/IconClearText.svg";
+import IconDelNumber from './icon-del-number.svg'
 
 export const Svg = {
   IconClose,
@@ -10,4 +18,12 @@ export const Svg = {
   IconCheckboxActive,
   IconRadio,
   IconRadioActive,
+  IconSearch,
+  IconInfo,
+  IconSuccess,
+  IconWarning,
+  IconArrowDown,
+  IconError,
+  IconClearText,
+  IconDelNumber,
 };

package/src/components/Checkbox/index.tsx

@@ -5,8 +5,8 @@ import { CONSTANTS } from "../../styles/themes/tokens";
 import Text from "../Text";
 import { useInternalTheme } from "../../core/theming";
 import containerStyles from "../../theme/container-styles";
-import Icon from "../Icon";
 
+import SvgIcon from "../IconSvg";
 interface CheckboxProps {
   style?: StyleProp<ViewStyle>;
   content: string;
@@ -68,9 +68,10 @@ const Checkbox = ({
         <View paddingRight={CONSTANTS.SPACE_8}>{leftIcon}</View>
       ) : (
         <View paddingRight={CONSTANTS.SPACE_8}>
-          <Icon
+          <SvgIcon
             name={isActive ? "IconCheckboxActive" : "IconCheckbox"}
-            size={iconSize}
+            width={iconSize}
+            height={iconSize}
             color={checkboxColor}
           />
         </View>

package/src/components/IconSvg/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Svg } from "../../assets/svg";
 
 interface SvgIconProps {
-  name: any;
+  name: keyof typeof Svg;
   width?: number;
   height?: number;
   color?: string;

package/src/components/NumberKeyboard/index.tsx

@@ -9,8 +9,8 @@ import Text from "../Text";
 import View from "../View";
 import { useInternalTheme } from "../../core/theming";
 import Spacer from "../Spacer";
-import Icon from "../Icon";
 import containerStyles from "../../theme/container-styles";
+import SvgIcon from "../IconSvg";
 
 export interface NumberKeyboardProps {
   /** Giá trị hiện tại của input */
@@ -215,9 +215,10 @@ const NumberKeyboard: React.FC<NumberKeyboardProps> = ({
               </Text>
             </View>
             <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
-              <Icon
+              <SvgIcon
                 name="IconClearText"
-                size={24}
+                width={24}
+                height={24}
                 color={colors.textSecondary}
               />
             </TouchableOpacity>

package/src/components/RadioButton/index.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useCallback, useMemo, useEffect } from "react";
+import React, { useCallback, useMemo } from "react";
 import { StyleProp, ViewStyle, StyleSheet, TextStyle } from "react-native";
 import View from "../View";
 import { CONSTANTS } from "../../styles/themes/tokens";
 import Text from "../Text";
 import { useInternalTheme } from "../../core/theming";
 import containerStyles from "../../theme/container-styles";
-import Icon from "../Icon";
+import SvgIcon from "../IconSvg";
 
 interface RadioButtonProps {
   style?: StyleProp<ViewStyle>;
@@ -55,15 +55,10 @@ const RadioButton = ({
         <View paddingRight={CONSTANTS.SPACE_8}>{leftIcon}</View>
       ) : (
         <View paddingRight={CONSTANTS.SPACE_8}>
-          <Icon
-            name={
-              disabled
-                ? "IconRadioDisable"
-                : checked
-                ? "IconRadioActive"
-                : "IconRadio"
-            }
-            size={24}
+          <SvgIcon
+            name={checked ? "IconRadioActive" : "IconRadio"}
+            width={24}
+            height={24}
             color={getColorCheckbox}
           />
         </View>

package/src/components/SearchInput/index.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import View from "../View";
-import Icon from "../Icon";
+
 import TextInput from "../TextInput/TextInput";
 import { useInternalTheme } from "../../core/theming";
 import { useDebouncedCallback } from "use-debounce";
+import SvgIcon from "../IconSvg";
 
 interface SearchInputProps {
   style?: StyleProp<ViewStyle>;
@@ -48,7 +49,7 @@ const SearchInput = ({
     <TextInput
       left={
         <View>
-          <Icon name={"IconSearch"} size={18} />
+          <SvgIcon name={"IconSearch"} width={18} height={18} />
         </View>
       }
       disabled={disabled}

package/src/components/SelectionField/index.tsx

@@ -24,8 +24,8 @@ import View from "../View";
 import { useInternalTheme } from "../../core/theming";
 import { ThemeProp } from "../../types";
 import Spacer from "../Spacer";
-import Icon from "../Icon";
 import containerStyles from "../../theme/container-styles";
+import SvgIcon from "../IconSvg";
 
 export interface SelectionFieldProps extends TouchableOpacityProps {
   style?: StyleProp<ViewStyle>;
@@ -146,7 +146,7 @@ const SelectionField = ({
             </Text>
           </View>
 
-          {right || <Icon name={"IconArrowDown"} size={24} />}
+          {right || <SvgIcon name={"IconArrowDown"} height={24} width={24} />}
           <Spacer width={SPACE_12} />
         </View>
       </ScaleButton>

package/src/components/Tag/index.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import { StyleProp, ViewStyle, StyleSheet, TextStyle } from "react-native";
 import View from "../View";
 import { CONSTANTS } from "../../styles/themes/tokens";
 import Text from "../Text";
 import { useInternalTheme } from "../../core/theming";
 import containerStyles from "../../theme/container-styles";
-import Icon from "../Icon";
+import SvgIcon from "../IconSvg";
 
 interface TagProps {
   style?: StyleProp<ViewStyle>;
@@ -95,9 +95,10 @@ const Tag = ({
           <View />
         ) : (
           <View paddingLeft={CONSTANTS.SPACE_4}>
-            <Icon
+            <SvgIcon
               name={"IconClose"}
-              size={20}
+              width={20}
+              height={20}
               color={colors.iconBrandDefault}
             />
           </View>

package/src/components/TextInput/TextInputDefault.tsx

@@ -16,8 +16,8 @@ import { getOutlinedInputColors } from "./helpers";
 import type { RenderProps, ChildTextInputProps } from "./types";
 import { CONSTANTS } from "../../styles/themes/tokens";
 import Spacer from "../Spacer";
-import Icon from "../Icon";
 import Text from "../Text";
+import SvgIcon from "../IconSvg";
 
 const TextInputDefault = ({
   disabled = false,
@@ -393,7 +393,7 @@ const TextInputDefault = ({
             onPress={handleClear}
             style={multiline ? styles.clearButtonMultiline : styles.clearButton}
           >
-            <Icon name={"IconClearText"} size={24} />
+            <SvgIcon name={"IconClearText"} width={24} height={24} />
           </TouchableOpacity>
         ) : (
           <Spacer width={CONSTANTS.SPACE_12} />

package/src/components/TextInput/TextInputFlat.tsx

@@ -42,8 +42,8 @@ import {
   SPACE_8,
   SPACE_2,
 } from "@/theme/dimensions";
-import Icon from "../Icon";
 import Text from "../Text";
+import SvgIcon from "../IconSvg";
 
 const TextInputFlat = ({
   disabled = false,
@@ -501,7 +501,7 @@ const TextInputFlat = ({
         </View>
         {parentState.focused && !disabled && clearButton && inputValue ? (
           <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
-            <Icon name="IconClearText" size={24} />
+            <SvgIcon name="IconClearText" width={24} height={24} />
           </TouchableOpacity>
         ) : (
           <Spacer width={SPACE_12} />

package/src/components/TextInput/TextInputNumber.tsx

@@ -28,8 +28,8 @@ import View from "../View";
 import { useInternalTheme } from "../../core/theming";
 import { ThemeProp } from "../../types";
 import Spacer from "../Spacer";
-import Icon from "../Icon";
 import containerStyles from "../../theme/container-styles";
+import SvgIcon from "../IconSvg";
 
 export interface TextInputNumberProps extends TouchableOpacityProps {
   style?: StyleProp<ViewStyle>;
@@ -363,7 +363,7 @@ const TextInputNumber = ({
           </View>
           {clearButton && !checkValueEmpty() && (
             <TouchableOpacity activeOpacity={0.8} onPress={handleClearInput}>
-              <Icon name={"IconClearText"} size={24} />
+              <SvgIcon name="IconClearText" width={24} height={24} />
             </TouchableOpacity>
           )}
           {right && numberValue && (
@@ -428,9 +428,10 @@ const TextInputNumber = ({
                 onPress={handleClear}
                 style={styles.clearButton}
               >
-                <Icon
+                <SvgIcon
                   name="IconClearText"
-                  size={24}
+                  width={24}
+                  height={24}
                   color={colors.textSecondary}
                 />
               </TouchableOpacity>
@@ -461,7 +462,12 @@ const TextInputNumber = ({
                       }
                     >
                       {key === "del" ? (
-                        <Icon name="IconDelNumber" size={24} />
+                        <SvgIcon
+                          name="IconDelNumber"
+                          width={24}
+                          height={24}
+                          color={colors.textSecondary}
+                        />
                       ) : (
                         <Text
                           style={[

package/src/components/Toast/index.tsx

@@ -2,7 +2,7 @@
 
 import { CONSTANTS } from "../../styles/themes/tokens";
 import React, { useImperativeHandle, useRef, useState } from "react";
-import { StyleSheet, Image as RNImage } from "react-native";
+import { StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Text from "../Text";
 import View from "../View";
@@ -10,7 +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";
+import SvgIcon from "../IconSvg";
 
 const POSITION = {
   TOP: "top",
@@ -236,7 +236,7 @@ const Toast = memoWithRef(
         >
           <View row style={{ alignItems: "flex-start" }}>
             <View>
-              <Icon name={getSourceIcon()} size={20} />
+              <SvgIcon name={getSourceIcon()} width={20} height={20} />
             </View>
             <View full paddingLeft={CONSTANTS.SPACE_8}>
               <Text bold color={colors.textOnFillDefault}>