@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.5

package/src/components/HighlightedText/types.ts

@@ -1,10 +1,16 @@
-import { Text, TextProps } from "react-native";
+import { TextProps } from "react-native";
+import type { TypographyProps } from "../Typography/types";
 
 export interface HighlightedTextProps extends TextProps {
   text: string;
   highlightText?: string;
-  highlightTextClassName?: string;
   className?: string;
-  ref?: React.RefObject<Text | null>;
   reverse?: boolean;
+  variant?: TypographyProps["variant"];
+  weight?: TypographyProps["weight"];
+  highlightedTextProps?: {
+    className?: string;
+    variant?: TypographyProps["variant"];
+    weight?: TypographyProps["weight"];
+  };
 }

package/src/components/InputOTP/components/InformationStatus/index.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import type { InformationStatusProps } from "./types";
 
 import { merge } from "@kivid/tailwind-preset";
-import Button from "../../../Button";
+import { Button } from "../../../Button";
 import { HighlightedText } from "../../../HighlightedText";
 import LoadingDots from "../../../LoadingDots";
 import { Chip } from "../../../Chip";

package/src/components/InputOTP/enums/index.ts

@@ -1 +1,7 @@
-export * from "./information-status";
+export enum InformationStatusEnum {
+  DEFAULT = "default",
+  ERROR = "error",
+  SUCCESS = "success",
+  LOADING = "loading",
+  COOLDOWN = "cooldown",
+}

package/src/components/InputOTP/index.stories.tsx

@@ -3,6 +3,7 @@ import { InputOTP } from "./index";
 import { useState } from "react";
 import { Text, View } from "react-native";
 import { InformationStatusEnum } from "./enums";
+import { Typography } from "../Typography";
 
 const meta: Meta<typeof InputOTP> = {
   title: "Components/InputOTP",
@@ -106,12 +107,20 @@ export const WithCustomInformation: Story = {
       {...args}
       customInformation={
         <View>
-          <Text className="text-label_medium_700 text-blackberry-500">
+          <Typography
+            variant="label_medium"
+            weight="700"
+            className="text-blackberry-500"
+          >
             O código realmente é esse?
-          </Text>
-          <Text className="text-label_medium_700 text-chia-900">
+          </Typography>
+          <Typography
+            variant="label_medium"
+            weight="700"
+            className="text-chia-900"
+          >
             Tente novamente
-          </Text>
+          </Typography>
         </View>
       }
     />

package/src/components/Title/index.stories.tsx

@@ -78,8 +78,12 @@ export const WithCustomIcon: Story = {
           <HighlightedText
             text="Custom"
             highlightText="icon"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_700"
+            variant="headline_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_large",
+              weight: "700",
+            }}
           />
         </Title>
       </View>
@@ -102,14 +106,22 @@ export const Large2X: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_500"
+            variant="headline_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_500"
+            variant="headline_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
@@ -144,7 +156,7 @@ export const Large2X: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title 2x large with Headline, subtitle and multiples texts",
+        story: "Title 2x large with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -158,22 +170,34 @@ export const LargeX: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_medium_300"
-            highlightTextClassName="text-headline_medium_500"
+            variant="headline_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_medium_300"
-            highlightTextClassName="text-headline_medium_500"
+            variant="headline_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -200,7 +224,7 @@ export const LargeX: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title x large with Headline, subtitle and multiples texts",
+        story: "Title x large with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -214,22 +238,34 @@ export const Large: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_small_300"
-            highlightTextClassName="text-headline_small_500"
+            variant="headline_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_small_300"
-            highlightTextClassName="text-headline_small_500"
+            variant="headline_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -253,7 +289,7 @@ export const Large: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title large with Headline, subtitle and multiples texts",
+        story: "Title large with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -267,22 +303,34 @@ export const Medium: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_large_300"
-            highlightTextClassName="text-title_large_500"
+            variant="title_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_large_300"
-            highlightTextClassName="text-title_large_500"
+            variant="title_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -306,7 +354,7 @@ export const Medium: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title medium with Headline, subtitle and multiples texts",
+        story: "Title medium with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -320,22 +368,34 @@ export const Small: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_medium_300"
-            highlightTextClassName="text-title_medium_700"
+            variant="title_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_medium_300"
-            highlightTextClassName="text-title_medium_700"
+            variant="title_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -359,7 +419,7 @@ export const Small: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title small with Headline, subtitle and multiples texts",
+        story: "Title small with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -373,22 +433,34 @@ export const XSmall: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_small_300"
-            highlightTextClassName="text-title_small_700"
+            variant="title_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_small_300"
-            highlightTextClassName="text-title_small_700"
+            variant="title_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -412,7 +484,7 @@ export const XSmall: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title x small with Headline, subtitle and multiples texts",
+        story: "Title x small with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -424,42 +496,46 @@ export const MarkerSizesAndVariants: Story = {
       <View className="flex flex-column gap-400 mb-700">
         <HighlightedText
           text="Small"
-          className="text-label_small_700 text-center"
+          variant="label_small"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="blackberry" size="small" />}>
             <HighlightedText
               text="Blackberry"
-              className="text-label_small_700"
+              variant="label_small"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="chia" size="small" />}>
-            <HighlightedText text="Chia" className="text-label_small_700" />
+            <HighlightedText text="Chia" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="java" size="small" />}>
-            <HighlightedText text="Java" className="text-label_small_700" />
+            <HighlightedText text="Java" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="grape" size="small" />}>
-            <HighlightedText text="Grape" className="text-label_small_700" />
+            <HighlightedText text="Grape" variant="label_small" weight="700" />
           </Title>
         </View>
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="mango" size="small" />}>
-            <HighlightedText text="Mango" className="text-label_small_700" />
+            <HighlightedText text="Mango" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="tangerine" size="small" />}>
             <HighlightedText
               text="Tangerine"
-              className="text-label_small_700"
+              variant="label_small"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="pear" size="small" />}>
-            <HighlightedText text="Pear" className="text-label_small_700" />
+            <HighlightedText text="Pear" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="ghost" size="small" />}>
-            <HighlightedText text="Ghost" className="text-label_small_700" />
+            <HighlightedText text="Ghost" variant="label_small" weight="700" />
           </Title>
         </View>
       </View>
@@ -467,42 +543,46 @@ export const MarkerSizesAndVariants: Story = {
       <View className="flex flex-column gap-400">
         <HighlightedText
           text="Medium"
-          className="text-label_medium_700 text-center"
+          variant="label_medium"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="blackberry" />}>
             <HighlightedText
               text="Blackberry"
-              className="text-label_medium_700"
+              variant="label_medium"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="chia" />}>
-            <HighlightedText text="Chia" className="text-label_medium_700" />
+            <HighlightedText text="Chia" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="java" />}>
-            <HighlightedText text="Java" className="text-label_medium_700" />
+            <HighlightedText text="Java" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="grape" />}>
-            <HighlightedText text="Grape" className="text-label_medium_700" />
+            <HighlightedText text="Grape" variant="label_medium" weight="700" />
           </Title>
         </View>
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="mango" />}>
-            <HighlightedText text="Mango" className="text-label_medium_700" />
+            <HighlightedText text="Mango" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="tangerine" />}>
             <HighlightedText
               text="Tangerine"
-              className="text-label_medium_700"
+              variant="label_medium"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="pear" />}>
-            <HighlightedText text="Pear" className="text-label_medium_700" />
+            <HighlightedText text="Pear" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="ghost" />}>
-            <HighlightedText text="Ghost" className="text-label_medium_700" />
+            <HighlightedText text="Ghost" variant="label_medium" weight="700" />
           </Title>
         </View>
       </View>
@@ -524,27 +604,37 @@ export const IconSizesAndVariants: Story = {
       <View className="flex flex-column gap-300 mb-500">
         <HighlightedText
           text="Small"
-          className="text-label_small_700 text-center"
+          variant="label_small"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300">
           <Title head={<Title.Icon size="small" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" className="text-label_small_700" />
+            <HighlightedText text="add" variant="label_small" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="small" variants={IconVariants.WARNING} />}
           >
-            <HighlightedText text="warning" className="text-label_small_700" />
+            <HighlightedText
+              text="warning"
+              variant="label_small"
+              weight="700"
+            />
           </Title>
           <Title
             head={<Title.Icon size="small" variants={IconVariants.ERROR} />}
           >
-            <HighlightedText text="error" className="text-label_small_700" />
+            <HighlightedText text="error" variant="label_small" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
           >
-            <HighlightedText text="success" className="text-label_small_700" />
+            <HighlightedText
+              text="success"
+              variant="label_small"
+              weight="700"
+            />
           </Title>
         </View>
       </View>
@@ -552,29 +642,39 @@ export const IconSizesAndVariants: Story = {
       <View className="flex flex-column gap-300 mb-500">
         <HighlightedText
           text="Medium"
-          className="text-label_medium_700 text-center"
+          variant="label_medium"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300">
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.ADD} />}
           >
-            <HighlightedText text="add" className="text-label_medium_700" />
+            <HighlightedText text="add" variant="label_medium" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.WARNING} />}
           >
-            <HighlightedText text="warning" className="text-label_medium_700" />
+            <HighlightedText
+              text="warning"
+              variant="label_medium"
+              weight="700"
+            />
           </Title>
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.ERROR} />}
           >
-            <HighlightedText text="error" className="text-label_medium_700" />
+            <HighlightedText text="error" variant="label_medium" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.SUCCESS} />}
           >
-            <HighlightedText text="success" className="text-label_medium_700" />
+            <HighlightedText
+              text="success"
+              variant="label_medium"
+              weight="700"
+            />
           </Title>
         </View>
       </View>
@@ -582,27 +682,37 @@ export const IconSizesAndVariants: Story = {
       <View className="flex flex-column gap-300 mb-500">
         <HighlightedText
           text="Large"
-          className="text-label_large_700 text-center"
+          variant="label_large"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300">
           <Title head={<Title.Icon size="large" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" className="text-label_large_700" />
+            <HighlightedText text="add" variant="label_large" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="large" variants={IconVariants.WARNING} />}
           >
-            <HighlightedText text="warning" className="text-label_large_700" />
+            <HighlightedText
+              text="warning"
+              variant="label_large"
+              weight="700"
+            />
           </Title>
           <Title
             head={<Title.Icon size="large" variants={IconVariants.ERROR} />}
           >
-            <HighlightedText text="error" className="text-label_large_700" />
+            <HighlightedText text="error" variant="label_large" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
           >
-            <HighlightedText text="success" className="text-label_large_700" />
+            <HighlightedText
+              text="success"
+              variant="label_large"
+              weight="700"
+            />
           </Title>
         </View>
       </View>

package/src/components/Toggle/enums/variant.ts

@@ -1,4 +1,4 @@
-export enum VariantEnum {
+export enum ToggleVariantEnum {
   GRAPE = "grape",
   JAVA = "java",
   PEAR = "pear",