react-native-exp-fig 0.1.21 → 0.1.23

package/src/common/icons-svg/eclamation-triangle/index.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+import { type ISvgProps } from "../interface";
+
+const SvgIconWarningTriangle: React.FC<ISvgProps> = ({
+  color,
+  size,
+  background,
+}) => (
+  <Svg
+    width={size ?? 36}
+    height={size ?? 36}
+    viewBox="0 0 36 36"
+    fill="none"
+  >
+    {/* Triângulo com cantos arredondados usando curvas (Q) */}
+    <Path
+      d="M18 4 
+        C19 4 20 5 20.5 6 
+        L33.5 30 
+        C34 31 33 32 32 32 
+        H4 
+        C3 32 2 31 2.5 30 
+        L15.5 6 
+        C16 5 17 4 18 4 
+        Z"
+      fill={background ?? "#F4B31D"}
+    />
+
+    {/* Traço da exclamação */}
+    <Path
+      d="M18 13V20"
+      stroke={color ?? "#fff"}
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+
+    {/* Ponto da exclamação */}
+    <Path
+      d="M18 25a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      fill={color ?? "#fff"}
+    />
+  </Svg>
+);
+
+export { SvgIconWarningTriangle };

package/src/common/icons-svg/index.tsx

@@ -57,6 +57,7 @@ import { SvgIconHourglass } from "./hourglass";
 import { SvgCurrencyCircleDollar } from "./currency-circle-dollar";
 import { SvgPackage } from "./package";
 import { SvgIconHouse } from "./house";
+import { SvgIconWarningTriangle } from "./eclamation-triangle"; 
 
 // typing
 import { ISvgProps } from "./interface";
@@ -197,7 +198,10 @@ const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
           background={background}
         />
       );
-
+    
+    case "EXCLAMATION_TRIANGLE":
+      return <SvgIconWarningTriangle icon={"EXCLAMATION_TRIANGLE"} color={color} size={size} background={background} />;
+    
     case "PLUS":
       return <SvgIconPlus color={color} size={size} icon={"PLUS"} />;
 

package/src/common/icons-svg/truck/index.tsx

@@ -19,14 +19,14 @@ const IconTruck: React.FC<ISvgProps> = ({ color, size, ...res }) => (
     {...res}
   >
     <Path
-      stroke={color ?? "#050022"}
+      stroke={color ?? "#fff"}
       strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"
       d="M10 17h4V5H2v12h3M20 17h2v-3.34a4 4 0 00-1.17-2.83L19 9h-5M14 17h1"
     />
     <Path
-      stroke={color ?? "#050022"}
+      stroke={color ?? "#fff"}
       strokeWidth={2}
       strokeLinecap="round"
       strokeLinejoin="round"

package/src/components/activities-daily/index.tsx

@@ -1,116 +1,116 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../../components/box";
-import { Typography } from "../../components/typography";
-
-//commons/ icons
-import { Icons } from "../../common/icons-svg";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import { IActivitiesDaily } from "./interface";
-
-const ActivitiesDaily: React.FC<IActivitiesDaily> = ({ handleActivity }) => {
-  return (
-    <Box
-      testID={"activities-daily"}
-      width={"100%"}
-      height={100}
-      backgroundColor={theme.colors.neutral[25]}
-      borderStyled={{
-        borderRadius: theme.borderWidths.thick_medium,
-      }}
-    >
-      <Box
-        width={"100%"}
-        height={30}
-        backgroundColor={theme.colors.blue[400]}
-        borderStyled={{
-          borderTopLeftRadius: theme.borderWidths.thin_bold,
-          borderTopRightRadius: theme.borderWidths.thin_bold,
-          borderColor: theme.colors.blue[400],
-        }}
-        flexStyle={{
-          justifyContent: "center",
-        }}
-      >
-        <Typography
-          text={"Atividades diárias"}
-          color={theme.colors.neutral[25]}
-          size={theme.fontSizes.sm}
-          fontFamily={theme.fonts.inter_medium_500}
-          fontWeight={"500"}
-          lineHeight={theme.fontSizes.lg}
-          marginLeft={theme.margins["2xs"]}
-        />
-      </Box>
-      <Box
-        width={"100%"}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-        paddingStyle={{
-          padding: theme.paddings["2xs"],
-        }}
-      >
-        <Typography
-          text={"Selecione uma das opções"}
-          color={theme.colors.blue[500]}
-          size={theme.fontSizes.xs}
-          fontFamily={theme.fonts.inter_bold_700}
-          fontWeight={"700"}
-          lineHeight={theme.fontSizes.md}
-        />
-
-        <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: 5 }}>
-          <TouchableOpacity
-            activeOpacity={0.7}
-            style={{ marginRight: theme.margins.xl, alignItems: "center" }}
-            onPress={() => handleActivity("trabalho")}
-          >
-            <Icons icon={"TRUCK"} color={theme.colors.blue[525]} />
-            <Typography
-              text={"Trabalho"}
-              color={theme.colors.black[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_bold_700}
-              fontWeight={"700"}
-              lineHeight={theme.fontSizes.sm}
-              marginTop={4}
-            />
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            activeOpacity={0.7}
-            style={{ alignItems: "center" }}
-            onPress={() => handleActivity("descanso")}
-          >
-            <Icons icon={"BED"} />
-            <Typography
-              text={"Descanso"}
-              color={theme.colors.black[25]}
-              size={theme.fontSizes.xs}
-              fontFamily={theme.fonts.inter_bold_700}
-              fontWeight={"700"}
-              lineHeight={theme.fontSizes.sm}
-              marginTop={4}
-            />
-          </TouchableOpacity>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { ActivitiesDaily };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import Box from "../box";
+import { Typography } from "../../components/typography";
+
+//commons/ icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { IActivitiesDaily } from "./interface";
+
+const ActivitiesDaily: React.FC<IActivitiesDaily> = ({ handleActivity }) => {
+  return (
+    <Box
+      testID={"activities-daily"}
+      width={"100%"}
+      height={100}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+    >
+      <Box
+        width={"100%"}
+        height={30}
+        backgroundColor={theme.colors.blue[400]}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thin_bold,
+          borderTopRightRadius: theme.borderWidths.thin_bold,
+          borderColor: theme.colors.blue[400],
+        }}
+        flexStyle={{
+          justifyContent: "center",
+        }}
+      >
+        <Typography
+          text={"Atividades diárias"}
+          color={theme.colors.neutral[25]}
+          size={theme.fontSizes.sm}
+          fontFamily={theme.fonts.inter_medium_500}
+          fontWeight={"500"}
+          lineHeight={theme.fontSizes.lg}
+          marginLeft={theme.margins["2xs"]}
+        />
+      </Box>
+      <Box
+        width={"100%"}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          padding: theme.paddings["2xs"],
+        }}
+      >
+        <Typography
+          text={"Selecione uma das opções"}
+          color={theme.colors.blue[500]}
+          size={theme.fontSizes.xs}
+          fontFamily={theme.fonts.inter_bold_700}
+          fontWeight={"700"}
+          lineHeight={theme.fontSizes.md}
+        />
+
+        <Box flexStyle={{ flexDirection: "row" }} marginStyle={{ marginTop: 5 }}>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={{ marginRight: theme.margins.xl, alignItems: "center" }}
+            onPress={() => handleActivity("trabalho")}
+          >
+            <Icons icon={"TRUCK"} color={theme.colors.blue[525]} />
+            <Typography
+              text={"Trabalho"}
+              color={theme.colors.black[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.sm}
+              marginTop={4}
+            />
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={{ alignItems: "center" }}
+            onPress={() => handleActivity("descanso")}
+          >
+            <Icons icon={"BED"} />
+            <Typography
+              text={"Descanso"}
+              color={theme.colors.black[25]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_bold_700}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.sm}
+              marginTop={4}
+            />
+          </TouchableOpacity>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { ActivitiesDaily };

package/src/components/activities-progress/index.tsx

@@ -1,170 +1,170 @@
-/**
- * IMPORTS
- */
-import React from "react";
-
-// components
-import { Box } from "../../components/box";
-import { Typography } from "../../components/typography";
-
-//commons/ icons
-import { Icons } from "../../common/icons-svg";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-// typings
-import { IActivitiesProgress } from "./interface";
-
-// utils
-import { getIconByProperty } from "../../utils/get-icon-by-property";
-
-const ActivitiesProgress: React.FC<IActivitiesProgress> = ({
-  data_inicio_horario = "11/05/2025",
-  duracao = "00:30",
-  data_inicio = "17:20",
-  titleLabel = "Descanso",
-  criado_offline = true,
-  tipo_atividade = "Descanso",
-  referencia = "repouso_noturno",
-}) => {
-  return (
-    <Box
-      width={"100%"}
-      height={100}
-      backgroundColor={theme.colors.neutral[25]}
-      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
-    >
-      <Box
-        width={"100%"}
-        height={30}
-        backgroundColor={theme.colors.blue[400]}
-        borderStyled={{
-          borderTopLeftRadius: theme.borderWidths.thin_bold,
-          borderTopRightRadius: theme.borderWidths.thin_bold,
-          borderColor: theme.colors.blue[400],
-        }}
-        flexStyle={{
-          justifyContent: "space-between",
-          flexDirection: "row",
-        }}
-      >
-        <Box
-          flexStyle={{
-            flexDirection: "row",
-            alignItems: "center",
-          }}
-        >
-          <Typography
-            text={"Status: "}
-            color={theme.colors.neutral[25]}
-            size={theme.fontSizes.sm}
-            fontFamily={theme.fonts.inter_medium_500}
-            fontWeight={"500"}
-            lineHeight={theme.fontSizes.lg}
-            marginLeft={theme.margins["2xs"]}
-          />
-          <Typography
-            text={titleLabel}
-            color={
-              tipo_atividade === "trabalho" ? theme.colors.green[400] : theme.colors.orange[500]
-            }
-            size={theme.fontSizes.xs}
-            fontFamily={theme.fonts.inter_semi_bold_600}
-            fontWeight={"600"}
-            lineHeight={theme.fontSizes.lg}
-          />
-        </Box>
-
-        <Box
-          style={{ marginRight: theme.margins["2xs"], marginTop: theme.margins["1xs"] }}
-          height={20}
-          width={20}
-        >
-          <Icons
-            icon={criado_offline ? "CHECK_OUTLINE" : "TIMER"}
-            size={19}
-            color={criado_offline ? theme.colors.green[400] : theme.colors.orange[500]}
-          />
-        </Box>
-      </Box>
-
-      <Box
-        width={"100%"}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-        paddingStyle={{
-          padding: theme.paddings["2xs"],
-        }}
-      >
-        <Box height={20} flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-          {getIconByProperty(referencia)}
-          <Typography
-            text={data_inicio}
-            color={theme.colors.black[25]}
-            size={theme.fontSizes.xs}
-            fontFamily={theme.fonts.inter_bold_700}
-            fontWeight={"700"}
-            lineHeight={theme.fontSizes.lg}
-            marginLeft={4}
-          />
-        </Box>
-
-        <Box height={50} flexStyle={{ flexDirection: "row", alignItems: "flex-end" }}>
-          <Box
-            flexStyle={{ alignItems: "center" }}
-            marginStyle={{ marginRight: theme.margins["2xs"] }}
-          >
-            <Typography
-              text={data_inicio_horario}
-              color={theme.colors.blue[500]}
-              size={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_bold}
-              fontWeight={"700"}
-              lineHeight={theme.fontSizes.md}
-            />
-            <Typography
-              text={"INICIO"}
-              color={theme.colors.gray[600]}
-              size={theme.fontSizes["2xs"]}
-              fontFamily={theme.fonts.inter_medium_500}
-              fontWeight={"500"}
-              lineHeight={theme.fontSizes.xs}
-              marginTop={4}
-            />
-          </Box>
-
-          <Box
-            flexStyle={{ alignItems: "center" }}
-            marginStyle={{ marginRight: theme.margins["2xs"] }}
-          >
-            <Typography
-              text={duracao}
-              color={theme.colors.blue[500]}
-              size={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_bold}
-              fontWeight={"700"}
-              lineHeight={theme.fontSizes.md}
-            />
-            <Typography
-              text={"DURAÇÃO"}
-              color={theme.colors.gray[600]}
-              size={theme.fontSizes["2xs"]}
-              fontFamily={theme.fonts.inter_medium_500}
-              fontWeight={"500"}
-              lineHeight={theme.fontSizes.xs}
-              marginTop={4}
-            />
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { ActivitiesProgress };
+/**
+ * IMPORTS
+ */
+import React from "react";
+
+// components
+import Box from "../box";
+import { Typography } from "../../components/typography";
+
+//commons/ icons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { IActivitiesProgress } from "./interface";
+
+// utils
+import { getIconByProperty } from "../../utils/get-icon-by-property";
+
+const ActivitiesProgress: React.FC<IActivitiesProgress> = ({
+  data_inicio_horario = "11/05/2025",
+  duracao = "00:30",
+  data_inicio = "17:20",
+  titleLabel = "Descanso",
+  criado_offline = true,
+  tipo_atividade = "Descanso",
+  referencia = "repouso_noturno",
+}) => {
+  return (
+    <Box
+      width={"100%"}
+      height={100}
+      backgroundColor={theme.colors.neutral[25]}
+      borderStyled={{ borderRadius: theme.borderWidths.thick_medium }}
+    >
+      <Box
+        width={"100%"}
+        height={30}
+        backgroundColor={theme.colors.blue[400]}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thin_bold,
+          borderTopRightRadius: theme.borderWidths.thin_bold,
+          borderColor: theme.colors.blue[400],
+        }}
+        flexStyle={{
+          justifyContent: "space-between",
+          flexDirection: "row",
+        }}
+      >
+        <Box
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+        >
+          <Typography
+            text={"Status: "}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_medium_500}
+            fontWeight={"500"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={theme.margins["2xs"]}
+          />
+          <Typography
+            text={titleLabel}
+            color={
+              tipo_atividade === "trabalho" ? theme.colors.green[400] : theme.colors.orange[500]
+            }
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_semi_bold_600}
+            fontWeight={"600"}
+            lineHeight={theme.fontSizes.lg}
+          />
+        </Box>
+
+        <Box
+          style={{ marginRight: theme.margins["2xs"], marginTop: theme.margins["1xs"] }}
+          height={20}
+          width={20}
+        >
+          <Icons
+            icon={criado_offline ? "CHECK_OUTLINE" : "TIMER"}
+            size={19}
+            color={criado_offline ? theme.colors.green[400] : theme.colors.orange[500]}
+          />
+        </Box>
+      </Box>
+
+      <Box
+        width={"100%"}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+        paddingStyle={{
+          padding: theme.paddings["2xs"],
+        }}
+      >
+        <Box height={20} flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+          {getIconByProperty(referencia)}
+          <Typography
+            text={data_inicio}
+            color={theme.colors.black[25]}
+            size={theme.fontSizes.xs}
+            fontFamily={theme.fonts.inter_bold_700}
+            fontWeight={"700"}
+            lineHeight={theme.fontSizes.lg}
+            marginLeft={4}
+          />
+        </Box>
+
+        <Box height={50} flexStyle={{ flexDirection: "row", alignItems: "flex-end" }}>
+          <Box
+            flexStyle={{ alignItems: "center" }}
+            marginStyle={{ marginRight: theme.margins["2xs"] }}
+          >
+            <Typography
+              text={data_inicio_horario}
+              color={theme.colors.blue[500]}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.md}
+            />
+            <Typography
+              text={"INICIO"}
+              color={theme.colors.gray[600]}
+              size={theme.fontSizes["2xs"]}
+              fontFamily={theme.fonts.inter_medium_500}
+              fontWeight={"500"}
+              lineHeight={theme.fontSizes.xs}
+              marginTop={4}
+            />
+          </Box>
+
+          <Box
+            flexStyle={{ alignItems: "center" }}
+            marginStyle={{ marginRight: theme.margins["2xs"] }}
+          >
+            <Typography
+              text={duracao}
+              color={theme.colors.blue[500]}
+              size={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold}
+              fontWeight={"700"}
+              lineHeight={theme.fontSizes.md}
+            />
+            <Typography
+              text={"DURAÇÃO"}
+              color={theme.colors.gray[600]}
+              size={theme.fontSizes["2xs"]}
+              fontFamily={theme.fonts.inter_medium_500}
+              fontWeight={"500"}
+              lineHeight={theme.fontSizes.xs}
+              marginTop={4}
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { ActivitiesProgress };

package/src/components/avatar-profile/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TouchableOpacity, Image } from "react-native";
 
 // components
-import { Box } from "../box";
+import Box from "../box";
 import { Typography } from "../typography";
 
 // styles