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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.5",
   "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",
-    "@kivid/icons": "1.0.0-alpha.2"
+    "react-native": "0.79.5",
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.5",
+    "@kivid/icons": "1.0.0-alpha.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -95,8 +95,7 @@
     "storybook": "^9",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "@kivid/tailwind-preset": "1.0.0-alpha.2"
+    "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",
-    "@kivid/tailwind-preset": "1.0.0-alpha.2",
-    "@kivid/icons": "1.0.0-alpha.2"
+    "@kivid/icons": "1.0.0-alpha.5"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -122,7 +120,7 @@
     "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:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start:ios",
+    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo  start:android"
   }
 }

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

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+import { AvatarSizeEnum } from "../enums";
+
+const avatarVariants = cva(
+  "border-[1px] border-chia-400 rounded-full items-center justify-center",
+  {
+    variants: {
+      size: {
+        [AvatarSizeEnum.XSMALL]: "w-[32px] h-[32px]",
+        [AvatarSizeEnum.SMALL]: "w-[40px] h-[40px]",
+        [AvatarSizeEnum.MEDIUM]: "w-[56px] h-[56px]",
+        [AvatarSizeEnum.LARGE]: "w-[72px] h-[72px]",
+        [AvatarSizeEnum.XLARGE]: "w-[96px] h-[96px]",
+      },
+    },
+    defaultVariants: {
+      size: AvatarSizeEnum.MEDIUM,
+    },
+  }
+);
+
+export { avatarVariants };

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

@@ -0,0 +1 @@
+export * from "./size";

package/src/components/Avatar/enums/size.ts

@@ -0,0 +1,7 @@
+export enum AvatarSizeEnum {
+  XSMALL = "xsmall",
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+  XLARGE = "xlarge",
+}

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Avatar } from "./index";
+import { AvatarSizeEnum } from "./enums";
+import { View, Image } from "react-native";
+
+const sizeOptions = Object.values(AvatarSizeEnum);
+
+const meta: Meta<typeof Avatar> = {
+  title: "Components/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    src: {
+      control: { type: "text" },
+      description: "URL da imagem do avatar",
+    },
+    size: {
+      control: { type: "select" },
+      options: sizeOptions,
+      description: "Tamanho do avatar",
+      table: {
+        type: { summary: sizeOptions.join(" | ") },
+      },
+    },
+    name: {
+      control: { type: "text" },
+      description: "Nome do usuário para exibir as iniciais caso a imagem não seja fornecida",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const localImageUri = Image.resolveAssetSource(require("./images/girl.jpg")).uri;
+
+export const Default: Story = {
+  args: {
+    src: localImageUri,
+    size: AvatarSizeEnum.MEDIUM,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <View className="flex flex-col gap-500">
+      <View className="flex flex-row gap-400 bg-chia-200">
+        {sizeOptions.map((size) => (
+          <Avatar
+            key={size}
+            src=""
+            size={size}
+            name="John Doe"
+          />
+        ))}
+      </View>
+      <View className="flex flex-row gap-400">
+        {sizeOptions.map((size) => (
+          <Avatar
+            key={size}
+            src=""
+            size={size}
+          />
+        ))}
+      </View>
+      <View className="flex flex-row gap-400 bg-chia-700">
+        {sizeOptions.map((size) => (
+          <Avatar
+            key={size}
+            src={localImageUri}
+            size={size}
+          />
+        ))}
+      </View>
+    </View>
+  ),
+  args: {
+    src: localImageUri,
+    size: AvatarSizeEnum.MEDIUM,
+  },
+};

package/src/components/Avatar/index.tsx

@@ -0,0 +1,98 @@
+import type { AvatarProps } from "./types";
+import { Person } from "@kivid/icons/native";
+import { View, Image } from "react-native";
+import { AvatarSizeEnum } from "./enums";
+import { avatarVariants } from "./assets/class-variants";
+import { merge } from "@kivid/tailwind-preset";
+import Typography from "../Typography";
+
+export function Avatar(props: AvatarProps) {
+  const { src, name, size = AvatarSizeEnum.MEDIUM } = props;
+
+  const mappedSize = {
+    [AvatarSizeEnum.XLARGE]: 96,
+    [AvatarSizeEnum.LARGE]: 72,
+    [AvatarSizeEnum.MEDIUM]: 56,
+    [AvatarSizeEnum.SMALL]: 40,
+    [AvatarSizeEnum.XSMALL]: 32,
+  }[size];
+
+  const avatarStyle = avatarVariants({ size });
+
+  const avatarTextStyleMap = {
+    [AvatarSizeEnum.XSMALL]: {
+      variant: "body_small" as const,
+      fontWeight: "700" as const,
+    },
+    [AvatarSizeEnum.SMALL]: {
+      variant: "title_small" as const,
+      fontWeight: "700" as const,
+    },
+    [AvatarSizeEnum.MEDIUM]: {
+      variant: "title_large" as const,
+      fontWeight: "700" as const,
+    },
+    [AvatarSizeEnum.LARGE]: {
+      variant: "headline_small" as const,
+      fontWeight: "700" as const,
+    },
+    [AvatarSizeEnum.XLARGE]: {
+      variant: "headline_medium" as const,
+      fontWeight: "700" as const,
+    },
+  };
+
+  const calulatedInsideImageContainerSize = mappedSize - 1;
+
+  function renderFallbackType() {
+    if (name && !!name.trim()) {
+      const [firstName, surname] = name.split(" ");
+
+      const hasSurname = !!surname;
+      const hasName = !!firstName;
+
+      const firstLetterOfFirstName = hasName ? firstName?.at(0) : "";
+      const firstLetterOfSurname = hasSurname ? surname?.at(0) : "";
+
+      const firstLetters =
+        `${firstLetterOfFirstName}${firstLetterOfSurname}`.toUpperCase();
+
+      return (
+        <View className={avatarStyle}>
+          <Typography
+            className={"text-chia-600"}
+            variant={avatarTextStyleMap[size].variant}
+            weight={avatarTextStyleMap[size].fontWeight}
+          >
+            {firstLetters}
+          </Typography>
+        </View>
+      );
+    }
+
+    return (
+      <View
+        className={merge(avatarStyle, "bg-chia-300 border-chia-400 max-h-fit")}
+      >
+        <Person color="#B6C2C2" size={mappedSize} />
+      </View>
+    );
+  }
+
+  if (!src) {
+    return renderFallbackType();
+  }
+
+  return (
+    <View className={merge(avatarStyle, "border-chia-100 relative")}>
+      <Image
+        source={{ uri: src }}
+        className="rounded-full"
+        style={{
+          width: calulatedInsideImageContainerSize,
+          height: calulatedInsideImageContainerSize,
+        }}
+      />
+    </View>
+  );
+}

package/src/components/Avatar/types.ts

@@ -0,0 +1,7 @@
+import type { AvatarSizeEnum } from "./enums";
+
+export interface AvatarProps {
+  src?: string | null;
+  name?: string;
+  size?: AvatarSizeEnum;
+}

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 { 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 "@kivid/tailwind-preset";
-import type { ChipProps } from "./types";
+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 "@kivid/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 };