react-native-exp-fig 0.1.43 → 2.0.0

package/src/components/step-indicator/styles.ts

@@ -1,66 +1,68 @@
-/**
- * IMPORTS
- */
-
-import { StyleSheet } from "react-native";
-
-// typings
-import { type IStyleProps } from "./interface";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-const styles = (props: IStyleProps) =>
-  StyleSheet.create({
-    containerIndicator: {
-      width: "100%",
-      height: 86,
-      flexDirection: "row",
-      justifyContent: "flex-start",
-    },
-    containerBall: {
-      width: 32,
-      height: 32,
-      backgroundColor: props.sincronizado ? theme.colors.blue[500] : theme.colors.orange[150],
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: 16,
-    },
-    title: {
-      color: props.titleColor ?? "black",
-      textAlign: "center",
-      lineHeight: 24,
-      fontSize: theme.fontSizes["sm"],
-      fontWeight: "500",
-      marginLeft: 8,
-    },
-    titleNumber: {
-      color: props.titleNumberColor ?? theme.colors.neutral[25],
-      textAlign: "center",
-      lineHeight: 18,
-      fontFamily: theme.fonts.inter_regular_400,
-      fontSize: theme.fontSizes["xs"],
-      position: "absolute",
-    },
-    titleDescription: {
-      color: props.textColorDescription ?? theme.colors.gray[700],
-      textAlign: "center",
-      lineHeight: 16,
-      fontSize: 12,
-      fontFamily: theme.fonts.inter_light_300,
-      marginLeft: 8,
-    },
-    containerMain: {
-      width: "100%",
-      height: 56,
-      flexDirection: "column",
-      alignItems: "flex-start",
-      marginLeft: 2,
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+
+// typings
+import { IStepIndicator } from "./interface";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const styles = (props: IStepIndicator) =>
+  StyleSheet.create({
+    containerIndicator: {
+      width: "100%",
+      height: 86,
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      // backgroundColor: theme.colors.gray[300],
+    },
+    containerBall: {
+      width: 32,
+      height: 32,
+      backgroundColor: props.sincronizado ? theme.colors.blue[500] : theme.colors.orange[150],
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 16,
+    },
+    title: {
+      color: props.titleColor ?? "black",
+      textAlign: "center",
+      lineHeight: 20,
+      fontSize: theme.fontSizes["sm"],
+      fontWeight: "500",
+      marginLeft: 8,
+    },
+    titleNumber: {
+      color: props.titleNumberColor ?? theme.colors.neutral[25],
+      textAlign: "center",
+      lineHeight: 16,
+      fontFamily: theme.fonts.inter_regular_400,
+      fontSize: theme.fontSizes["xs"],
+      position: "absolute",
+    },
+    titleDescription: {
+      color: props.textColorDescription ?? theme.colors.gray[700],
+      textAlign: "center",
+      lineHeight: 16,
+      fontSize: theme.fontSizes["xs"],
+      fontFamily: theme.fonts.inter_regular_400,
+      fontWeight: "400",
+      marginLeft: 8,
+    },
+    containerMain: {
+      width: "100%",
+      height: 56,
+      flexDirection: "column",
+      alignItems: "flex-start",
+      marginLeft: 2,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };

package/src/components/typography/index.tsx

@@ -1,67 +1,67 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Text } from "react-native";
-
-// typings
-import { ITextInterface } from "./interface";
-
-//styles
-import { styles } from "./styles";
-
-/**
- * Componente Typography para a interação da  ui.
- */
-const Typography: React.FC<ITextInterface> = ({
-  text = "Hello Dev",
-  color = "#1E1E1E",
-  size = 23,
-  lineHeight = 24,
-  align = "left",
-  textDecoration,
-  fontWeight = "300",
-  fontFamily,
-  margin,
-  marginLeft,
-  marginRight,
-  marginTop,
-  marginBottom,
-  padding,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  numberOfLines,
-  ellipsizeMode,
-}) => {
-  const data = {
-    color,
-    size,
-    lineHeight,
-    align,
-    textDecoration,
-    fontWeight,
-    fontFamily,
-    margin,
-    marginLeft,
-    marginRight,
-    marginTop,
-    marginBottom,
-    padding,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-  } as ITextInterface;
-  return (
-    <Text numberOfLines={numberOfLines} ellipsizeMode={ellipsizeMode} style={styles(data).text}>
-      {text}
-    </Text>
-  );
-};
-
-/**
- * EXPORT
- */
-export { Typography };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Text } from "react-native";
+
+// typings
+import { ITextInterface } from "./interface";
+
+//styles
+import { styles } from "./styles";
+
+/**
+ * Componente Typography para a interação da  ui.
+ */
+const Typography: React.FC<ITextInterface> = ({
+  text = "Hello Dev",
+  color = "#1E1E1E",
+  size = 23,
+  lineHeight = 24,
+  align = "left",
+  textDecoration,
+  fontWeight = "300",
+  fontFamily,
+  margin,
+  marginLeft,
+  marginRight,
+  marginTop,
+  marginBottom,
+  padding,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  numberOfLines,
+  ellipsizeMode,
+}) => {
+  const data = {
+    color,
+    size,
+    lineHeight,
+    align,
+    textDecoration,
+    fontWeight,
+    fontFamily,
+    margin,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    padding,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+  } as ITextInterface;
+  return (
+    <Text numberOfLines={numberOfLines} ellipsizeMode={ellipsizeMode} style={styles(data).text}>
+      {text}
+    </Text>
+  );
+};
+
+/**
+ * EXPORT
+ */
+export { Typography };

package/src/components/typography/interface.d.ts

@@ -1,102 +1,102 @@
-/**
- * IMPORTS
- */
-import { TextProps } from "react-native";
-
-import { theme } from "../../styles/theme/theme";
-
-interface ITextInterface extends TextProps {
-  /**
-   * Propiedade texto que serar renderizado pro usuário final
-   */
-  text: string;
-
-  /**
-   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
-   */
-  color?: string;
-
-  /**
-   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
-   */
-  size?: number;
-
-  align?: "center" | "left" | "right";
-  lineHeight?: number;
-  letterSpacing?: keyof typeof theme.letterSpacing;
-
-  /**
-   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
-   */
-  textDecoration?: "line-through" | "underline" | "none";
-
-  /**
-   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
-   */
-  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
-
-  // fontFamily?: keyof typeof theme.fonts;
-  fontFamily?: string | undefined;
-
-  /**
-   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
-   */
-  margin?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
-   */
-  marginLeft?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
-   */
-  marginRight?: number;
-
-  /**
-   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
-   */
-  marginTop?: number;
-
-  /**
-   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
-   */
-  marginBottom?: number;
-
-  /**
-   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
-   */
-  padding?: number;
-
-  /**
-   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
-   */
-  paddingLeft?: number;
-
-  /**
-   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
-   */
-  paddingRight?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
-   */
-  paddingTop?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
-   */
-  paddingBottom?: number;
-
-  /**
-   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
-   *
-   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
-   */
-  numberOfLines?: number;
-  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
-}
-/**
- * EXPORTS
- */
-export { ITextInterface };
+/**
+ * IMPORTS
+ */
+import { TextProps } from "react-native";
+
+import { theme } from "../../styles/theme/theme";
+
+interface ITextInterface extends TextProps {
+  /**
+   * Propiedade texto que serar renderizado pro usuário final
+   */
+  text: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: string;
+
+  /**
+   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
+   */
+  size?: number;
+
+  align?: "center" | "left" | "right";
+  lineHeight?: number;
+  letterSpacing?: keyof typeof theme.letterSpacing;
+
+  /**
+   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
+   */
+  textDecoration?: "line-through" | "underline" | "none";
+
+  /**
+   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
+   */
+  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
+
+  // fontFamily?: keyof typeof theme.fonts;
+  fontFamily?: string | undefined;
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  margin?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
+   */
+  marginLeft?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
+   */
+  marginRight?: number;
+
+  /**
+   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
+   */
+  marginTop?: number;
+
+  /**
+   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
+   */
+  marginBottom?: number;
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  padding?: number;
+
+  /**
+   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
+   */
+  paddingLeft?: number;
+
+  /**
+   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
+   */
+  paddingRight?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
+   */
+  paddingTop?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
+   */
+  paddingBottom?: number;
+
+  /**
+   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
+   *
+   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
+   */
+  numberOfLines?: number;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+}
+/**
+ * EXPORTS
+ */
+export { ITextInterface };

package/src/components/typography/styles.ts

@@ -1,34 +1,34 @@
-/**
- * IMPORTS
- */
-
-import { StyleSheet } from "react-native";
-import { ITextInterface } from "./interface";
-
-const styles = (props: ITextInterface) =>
-  StyleSheet.create({
-    text: {
-      textAlign: props?.align,
-      fontSize: props?.size ?? 20,
-      fontWeight: props?.fontWeight,
-      fontFamily: props.fontFamily ?? "Inter-Medium",
-      color: props?.color,
-      lineHeight: props?.lineHeight,
-      letterSpacing: 0.5,
-      margin: props?.margin,
-      marginLeft: props?.marginLeft ?? 0,
-      marginRight: props?.marginRight ?? 0,
-      marginTop: props?.marginTop ?? 0,
-      marginBottom: props?.marginBottom ?? 0,
-      padding: props?.padding ?? 0,
-      paddingLeft: props?.paddingLeft ?? 0,
-      paddingRight: props?.paddingRight ?? 0,
-      paddingTop: props?.paddingTop ?? 0,
-      paddingBottom: props?.paddingBottom ?? 0,
-    },
-  });
-
-/**
- * EXPORTS
- */
-export { styles };
+/**
+ * IMPORTS
+ */
+
+import { StyleSheet } from "react-native";
+import { ITextInterface } from "./interface";
+
+const styles = (props: ITextInterface) =>
+  StyleSheet.create({
+    text: {
+      textAlign: props?.align,
+      fontSize: props?.size ?? 20,
+      fontWeight: props?.fontWeight,
+      fontFamily: props.fontFamily ?? "Inter-Medium",
+      color: props?.color,
+      lineHeight: props?.lineHeight,
+      letterSpacing: 0.5,
+      margin: props?.margin,
+      marginLeft: props?.marginLeft ?? 0,
+      marginRight: props?.marginRight ?? 0,
+      marginTop: props?.marginTop ?? 0,
+      marginBottom: props?.marginBottom ?? 0,
+      padding: props?.padding ?? 0,
+      paddingLeft: props?.paddingLeft ?? 0,
+      paddingRight: props?.paddingRight ?? 0,
+      paddingTop: props?.paddingTop ?? 0,
+      paddingBottom: props?.paddingBottom ?? 0,
+    },
+  });
+
+/**
+ * EXPORTS
+ */
+export { styles };