@kivid/native-components 1.0.0-alpha.1 → 1.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.4",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -15,8 +15,7 @@
   "main": "index.js",
   "files": [
     "dist",
-    "src",
-    "assets"
+    "src"
   ],
   "exports": {
     ".": {
@@ -50,21 +49,22 @@
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.4.1",
     "@react-native-community/slider": "4.5.6",
-    "expo": "~53.0.9",
     "expo-constants": "~17.1.6",
     "expo-font": "~13.3.2",
     "expo-splash-screen": "^0.30.10",
     "expo-status-bar": "~2.2.3",
+    "expo": "~53.0.9",
     "nativewind": "^4.1.23",
-    "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.5",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.5",
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "^15.11.2",
     "react-native-web": "^0.20.0",
-    "@butterfly/icons": "npm:@kivid/icons@1.0.0-alpha.1"
+    "react-native": "0.79.5",
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.4",
+    "@kivid/icons": "1.0.0-alpha.4"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -95,8 +95,7 @@
     "storybook": "^9",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "@butterfly/tailwind-preset": "npm:@kivid/tailwind-preset@1.0.0-alpha.1"
+    "vite": "^6.3.5"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -104,8 +103,7 @@
     "lottie-react-native": "^7.2.4",
     "react": "19.0.0",
     "react-native": "0.79.5",
-    "@butterfly/icons": "npm:@kivid/icons@1.0.0-alpha.1",
-    "@butterfly/tailwind-preset": "npm:@kivid/tailwind-preset@1.0.0-alpha.1"
+    "@kivid/icons": "1.0.0-alpha.4"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -121,8 +119,8 @@
     "storybook:web": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "storybook-generate": "sb-rn-get-stories",
-    "storybook": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start",
-    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --ios",
-    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --android"
+    "storybook": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo run",
+    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo run:ios",
+    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo  run:android"
   }
 }

package/src/components/Button/assets/class-variants.ts

@@ -69,11 +69,6 @@ const textVariants = cva("", {
       glass: "text-chia-900",
       ghost: "text-chia-900",
     },
-    size: {
-      small: "text-label_small_700",
-      medium: "text-label_medium_700",
-      large: "text-label_large_700",
-    },
     selected: {
       true: "",
     },

package/src/components/Button/index.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-import { Text, Pressable, Animated, GestureResponderEvent } from "react-native";
-import { merge } from "@butterfly/tailwind-preset";
+import { Pressable, Animated, GestureResponderEvent } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
 import { LoadingDots } from "../LoadingDots";
 import { LoadingDotsVariant } from "../LoadingDots/types";
-import { ButtonProps, ButtonVariant } from "./types";
+import type {
+  ButtonCorners,
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+} from "./types";
+import { Typography } from "../Typography";
 import {
   textVariants,
   buttonVariants,
@@ -43,11 +49,18 @@ export function Button(props: ButtonProps) {
     ghost: "grape",
   };
 
+  const typographyVariantMap = {
+    small: "label_small" as const,
+    medium: "label_medium" as const,
+    large: "label_large" as const,
+  };
+
+  const typographyVariant = typographyVariantMap[size ?? "medium"];
+
   function renderContent() {
     const textStyle = merge(
       textVariants({
         variant,
-        size,
         selected: selected && (variant === "outline" || variant === "ghost"),
       })
     );
@@ -63,9 +76,14 @@ export function Button(props: ButtonProps) {
     }
 
     return (
-      <Text className={textStyle} numberOfLines={1}>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={textStyle}
+        numberOfLines={1}
+      >
         {children}
-      </Text>
+      </Typography>
     );
   }
 
@@ -134,4 +152,4 @@ export function Button(props: ButtonProps) {
 
 Button.displayName = "Button";
 
-export default Button;
+export { ButtonProps, ButtonVariant, ButtonSize, ButtonCorners };

package/src/components/Chip/index.tsx

@@ -1,9 +1,10 @@
-import { merge } from "@butterfly/tailwind-preset";
-import type { ChipProps } from "./types";
+import { merge } from "@kivid/tailwind-preset";
+import type { ChipProps, ChipSize, ChipVariant } from "./types";
 import { chipVariants } from "./assets/class-variants";
 import { Seal } from "../Seal";
-import { Text, View } from "react-native";
+import { View } from "react-native";
 import { SealVariantEnum } from "../Seal/enums";
+import { Typography } from "../Typography";
 
 export function Chip(props: ChipProps) {
   const {
@@ -14,11 +15,10 @@ export function Chip(props: ChipProps) {
     variant = "outline",
   } = props;
 
-  const labelStyles = merge(
-    "mx-auto",
-    size === "medium" ? "text-label_small_700" : "text-label_medium_700",
-    variant === "filled" ? "text-chia-200" : "text-chia-900"
-  );
+  const typographyVariant = size === "medium" ? "label_small" : "label_medium";
+
+  const textColorClass =
+    variant === "filled" ? "text-chia-200" : "text-chia-900";
 
   return (
     <View
@@ -29,7 +29,15 @@ export function Chip(props: ChipProps) {
         inverted={variant === "filled"}
         size="small"
       />
-      <Text className={labelStyles}>{label}</Text>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={merge("mx-auto", textColorClass)}
+      >
+        {label}
+      </Typography>
     </View>
   );
 }
+
+export { ChipProps, ChipSize, ChipVariant };

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

@@ -15,10 +15,33 @@ const meta = {
     highlightText: {
       control: "text",
     },
-    className: {
-      control: "text",
+    variant: {
+      control: "select",
+      options: [
+        "label_small",
+        "label_medium",
+        "label_large",
+        "body_small",
+        "body_medium",
+        "body_large",
+        "title_small",
+        "title_medium",
+        "title_large",
+        "headline_small",
+        "headline_medium",
+        "headline_large",
+        "display_small",
+        "display_medium",
+        "display_large",
+      ],
+      description: "Typography variant for the base text",
     },
-    highlightTextClassName: {
+    weight: {
+      control: "select",
+      options: ["400", "500", "600", "700"],
+      description: "Typography weight for the base text",
+    },
+    className: {
       control: "text",
     },
     reverse: {
@@ -26,6 +49,11 @@ const meta = {
       description:
         "If true, the highlighted text will be displayed before the regular text.",
     },
+    highlightedTextProps: {
+      control: "object",
+      description:
+        "Props for the highlighted text Typography component (className, variant, weight)",
+    },
   },
 } satisfies Meta<typeof HighlightedText>;
 
@@ -49,8 +77,12 @@ export const LabelVariant: Story = {
   args: {
     text: "Label text",
     highlightText: "important",
-    className: "text-label_medium_300",
-    highlightTextClassName: "text-label_medium_700",
+    variant: "label_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "label_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -58,8 +90,12 @@ export const BodyVariant: Story = {
   args: {
     text: "Body text content",
     highlightText: "highlighted part",
-    className: "text-body_medium_300",
-    highlightTextClassName: "text-body_medium_700",
+    variant: "body_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "body_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -67,17 +103,25 @@ export const TitleVariant: Story = {
   args: {
     text: "Title text content",
     highlightText: "highlighted part",
-    className: "text-title_medium_300",
-    highlightTextClassName: "text-title_medium_700",
+    variant: "title_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "title_medium",
+      weight: "700",
+    },
   },
 };
 
-export const HeadlineVariant: Story = {
+export const HeadingVariant: Story = {
   args: {
-    text: "Headline text content",
+    text: "Heading text content",
     highlightText: "highlighted part",
-    className: "text-headline_medium_300",
-    highlightTextClassName: "text-headline_medium_700",
+    variant: "headline_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "headline_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -85,8 +129,12 @@ export const DisplayVariant: Story = {
   args: {
     text: "Display text content",
     highlightText: "highlighted part",
-    className: "text-display_medium_300",
-    highlightTextClassName: "text-display_medium_700",
+    variant: "display_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "display_medium",
+      weight: "700",
+    },
   },
 };
 
@@ -94,8 +142,14 @@ export const WithCustomClasses: Story = {
   args: {
     text: "Styled text",
     highlightText: "with custom styling",
+    variant: "body_medium",
+    weight: "400",
     className: "text-tangerine-900",
-    highlightTextClassName: "text-mango-900 underline",
+    highlightedTextProps: {
+      variant: "body_medium",
+      weight: "600",
+      className: "text-mango-900 underline",
+    },
   },
 };
 
@@ -103,8 +157,53 @@ export const ReverseHighlight: Story = {
   args: {
     text: "text with reverse highlight",
     highlightText: "Highlighted first",
+    variant: "label_medium",
+    weight: "400",
     reverse: true,
-    className: "text-label_medium_300",
-    highlightTextClassName: "text-label_medium_700",
+    highlightedTextProps: {
+      variant: "label_medium",
+      weight: "700",
+    },
+  },
+};
+
+export const WeightVariations: Story = {
+  args: {
+    text: "Different weight for",
+    highlightText: "highlighted text",
+    variant: "body_medium",
+    weight: "400",
+    highlightedTextProps: {
+      variant: "body_medium",
+      weight: "600",
+    },
+  },
+};
+
+export const MixedStyling: Story = {
+  args: {
+    text: "Typography props with",
+    highlightText: "custom classes",
+    variant: "body_medium",
+    weight: "400",
+    className: "text-blue-600",
+    highlightedTextProps: {
+      variant: "title_small",
+      weight: "700",
+      className: "text-red-500 underline",
+    },
+  },
+};
+
+export const BaseTextVariations: Story = {
+  args: {
+    text: "Large title base text with",
+    highlightText: "small label highlight",
+    variant: "title_large",
+    weight: "600",
+    highlightedTextProps: {
+      variant: "label_small",
+      weight: "700",
+    },
   },
 };

package/src/components/HighlightedText/index.tsx

@@ -1,38 +1,58 @@
 import type { HighlightedTextProps } from "./types";
-import { merge } from "@butterfly/tailwind-preset";
-import { Text } from "react-native";
+import { Typography } from "../Typography";
 
 export function HighlightedText(props: HighlightedTextProps) {
   const {
     text,
     highlightText,
     className,
-    highlightTextClassName,
     reverse,
-    ref,
+    highlightedTextProps = {},
+    variant = "label_medium",
+    weight = "400",
     ...rest
   } = props;
 
-  const mergeClassName = merge("text-label_medium_300", className);
-  const mergeHighlightClassName = merge(
-    "text-label_medium_700",
-    highlightTextClassName
-  );
-
   if (reverse) {
     return (
-      <Text ref={ref} className={mergeClassName} {...rest}>
-        <Text className={mergeHighlightClassName}>{highlightText}</Text> {text}
-      </Text>
+      <Typography
+        variant={variant}
+        weight={weight}
+        className={className}
+        {...rest}
+      >
+        <Typography
+          variant={highlightedTextProps.variant}
+          weight={highlightedTextProps.weight}
+          {...highlightedTextProps}
+        >
+          {highlightText}
+        </Typography>{" "}
+        {text}
+      </Typography>
     );
   }
 
   return (
-    <Text ref={ref} className={mergeClassName} {...rest}>
-      {text} <Text className={mergeHighlightClassName}>{highlightText}</Text>
-    </Text>
+    <Typography
+      variant={variant}
+      weight={weight}
+      className={className}
+      {...rest}
+    >
+      {text}{" "}
+      <Typography
+        variant={highlightedTextProps.variant || "label_medium"}
+        weight={highlightedTextProps.weight || "700"}
+        {...highlightedTextProps}
+      >
+        {highlightText}
+      </Typography>
+    </Typography>
   );
 }
 
 HighlightedText.displayName = "HighlightedText";
 export default HighlightedText;
+
+export { HighlightedTextProps };

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/InformationStatus/index.tsx

@@ -7,7 +7,7 @@ import {
 import type { InformationStatusProps } from "./types";
 import { InformationStatusOptionsEnum } from "./enums";
 import { cva } from "class-variance-authority";
-import { merge } from "@butterfly/tailwind-preset";
+import { merge } from "@kivid/tailwind-preset";
 import { View } from "react-native";
 
 export function InformationStatus(props: InformationStatusProps) {

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

@@ -3,8 +3,8 @@
 import { useMemo } from "react";
 import type { InformationStatusProps } from "./types";
 
-import { merge } from "@butterfly/tailwind-preset";
-import Button from "../../../Button";
+import { merge } from "@kivid/tailwind-preset";
+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/InputOTP/index.tsx

@@ -9,7 +9,7 @@ import {
   TextInputChangeEventData,
 } from "react-native";
 import type { InputOTPProps } from "./types";
-import { merge } from "@butterfly/tailwind-preset";
+import { merge } from "@kivid/tailwind-preset";
 import { InformationStatus } from "./components";
 import { InformationStatusEnum } from "./enums";
 

package/src/components/Seal/index.tsx

@@ -12,7 +12,7 @@ import {
   LeftIcon,
   AlertIcon,
 } from "./components";
-import { merge } from "@butterfly/tailwind-preset";
+import { merge } from "@kivid/tailwind-preset";
 import { sealVariants } from "./assets/class-variants";
 
 export const Seal: React.FC<SealProps> = ({