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

package/dist/typescript/iconography/Icons/index.d.ts

@@ -1,2 +1,3 @@
-import type { IconsProps } from './types';
-export declare function Icons(props: IconsProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import type { IconsProps } from "./types";
+export declare function Icons(props: IconsProps): React.JSX.Element;

package/dist/typescript/index.d.ts

@@ -1 +1,3 @@
 export * from "./components";
+export * from "./enums";
+export * from "./styles";

package/dist/typescript/storybook-utils/components/CodeBlock/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CodeBlockProps } from "./types";
+export declare function CodeBlock({ children, title, showLineNumbers, maxHeight, }: CodeBlockProps): React.JSX.Element;
+export default CodeBlock;

package/dist/typescript/storybook-utils/components/CodeBlock/types.d.ts

@@ -0,0 +1,6 @@
+export interface CodeBlockProps {
+    children: string;
+    title?: string;
+    showLineNumbers?: boolean;
+    maxHeight?: number;
+}

package/dist/typescript/storybook-utils/components/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Storybook Utilities - Documentation Components
+ *
+ * These components are NOT part of the design system.
+ * They are utility components specifically for Storybook documentation.
+ *
+ * DO NOT export these from the main components index.
+ * DO NOT create stories for these components.
+ */
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock/types";

package/dist/typescript/storybook-utils/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Storybook Utilities
+ *
+ * These are utility components and helpers specifically for Storybook documentation.
+ * They are NOT part of the design system and should not be exported from the main package.
+ */
+export * from "./components";

package/dist/typescript/styles/index.d.ts

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

package/dist/typescript/styles/mixins/index.d.ts

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

package/dist/typescript/styles/mixins/shadows/elevation-down-100.d.ts

@@ -0,0 +1 @@
+export declare const elevationDown100 = "1px 1px 2px 0 rgba(119, 128, 128, 0.02), 1px 1px 4px 0 rgba(119, 128, 128, 0.02), 2px 2px 6px 0 rgba(119, 128, 128, 0.02), 2px 2px 16px 0 rgba(119, 128, 128, 0.06)";

package/dist/typescript/styles/mixins/shadows/elevation-down-200.d.ts

@@ -0,0 +1 @@
+export declare const elevationDown200 = "2px 2px 4px 0 rgba(119, 128, 128, 0.08), 4px 4px 6px 0 rgba(119, 128, 128, 0.06), 6px 6px 8px 0 rgba(119, 128, 128, 0.04), 8px 8px 24px 0 rgba(119, 128, 128, 0.08)";

package/dist/typescript/styles/mixins/shadows/elevation-down-300.d.ts

@@ -0,0 +1 @@
+export declare const elevation300 = "4px 4px 4px 0 rgba(119, 128, 128, 0.08), 12px 12px 6px 0 rgba(119, 128, 128, 0.06), 18px 18px 16px 0 rgba(119, 128, 128, 0.04), 12px 12px 40px 0 rgba(119, 128, 128, 0.24)";

package/dist/typescript/styles/mixins/shadows/elevation-up-100.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp100 = "0 -2px 2px 0 rgba(119, 128, 128, 0.02), 0 -4px 4px 0 rgba(119, 128, 128, 0.02), 0 -8px 16px 0 rgba(119, 128, 128, 0.02), 0 -8px 32px 0 rgba(119, 128, 128, 0.08)";

package/dist/typescript/styles/mixins/shadows/elevation-up-200.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp200 = "0 -2px 2px 0 rgba(119, 128, 128, 0.04), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.06), 0 -12px 32px 0 rgba(119, 128, 128, 0.12)";

package/dist/typescript/styles/mixins/shadows/elevation-up-300.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp300 = "0 -2px 2px 0 rgba(119, 128, 128, 0.06), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.12), 0 -16px 48px 0 rgba(119, 128, 128, 0.24)";

package/dist/typescript/styles/mixins/shadows/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./elevation-down-100";
+export * from "./elevation-down-200";
+export * from "./elevation-down-300";
+export * from "./elevation-up-100";
+export * from "./elevation-up-200";
+export * from "./elevation-up-300";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -12,21 +12,29 @@
   },
   "homepage": "https://github.com/kivid-saude/butterfly/tree/main/packages/native-components#readme",
   "license": "MIT",
-  "main": "index.js",
-  "files": [
-    "dist",
-    "src",
-    "assets"
-  ],
+  "main": "./dist/module/index.js",
+  "types": "./dist/typescript/index.d.ts",
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
-      "import": "./dist/module/index.js",
+      "source": "./src/index.ts",
+      "types": "./dist/typescript/index.d.ts",
+      "default": "./dist/module/index.js",
       "require": "./dist/commonjs/index.js",
-      "types": "./dist/typescript/index.d.ts"
+      "import": "./dist/module/index.js"
     },
-    "./styles": "./dist/styles.css"
+    "./package.json": "./package.json"
   },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.test.js",
+    "!**/*.test.tsx",
+    "!**/*.spec.tsx",
+    "!**/*.spec.js",
+    "!**/*.stories.tsx",
+    "!**/*.stories.js"
+  ],
   "react-native-builder-bob": {
     "source": "src",
     "output": "dist",
@@ -45,67 +53,44 @@
       ]
     ]
   },
-  "dependencies": {
-    "@gorhom/bottom-sheet": "^5.1.2",
-    "@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",
-    "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"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.25.4",
-    "@chromatic-com/storybook": "^4.0.0",
-    "@expo/metro-runtime": "~5.0.4",
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "@react-native-community/cli": "^15.1.3",
-    "@storybook/addon-docs": "^9",
-    "@storybook/addon-ondevice-actions": "^9",
-    "@storybook/addon-ondevice-backgrounds": "^9",
-    "@storybook/addon-ondevice-controls": "^9",
-    "@storybook/addon-ondevice-notes": "^9",
-    "@storybook/react": "^9",
-    "@storybook/react-native": "^9",
-    "@storybook/react-native-web-vite": "^9",
+    "@react-native/babel-preset": "^0.77.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.12",
     "@types/node": "^24.1.0",
     "@types/react": "19.0.14",
-    "autoprefixer": "^10.4.19",
+    "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "babel-plugin-react-docgen-typescript": "^1.5.1",
     "class-variance-authority": "^0.7.1",
     "cross-env": "^7.0.3",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^29.7.0",
     "lottie-react-native": "^7.2.2",
-    "postcss": "^8.4.40",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "react-native-builder-bob": "^0.40.13",
-    "storybook": "^9",
-    "tailwindcss": "^3.4.17",
+    "react-native-svg": "^15.12.0",
+    "react-native": "0.79.5",
+    "react": "19.0.0",
+    "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "@butterfly/tailwind-preset": "npm:@kivid/tailwind-preset@1.0.0-alpha.1"
+    "@kivid/tailwind-preset": "1.0.0-alpha.10",
+    "@kivid/icons": "1.0.0-alpha.10"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "class-variance-authority": "^0.7.1",
     "lottie-react-native": "^7.2.4",
-    "react": "19.0.0",
+    "nativewind": "4.1.23",
+    "react-native-svg": "^15.12.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"
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.10",
+    "@kivid/icons": "1.0.0-alpha.10"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -113,16 +98,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && bob build && node postbuild.js",
-    "start": "expo start",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
-    "development-build": "cross-env EXPO_USE_COMMUNITY_AUTOLINKING=0 expo prebuild --clean",
-    "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"
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
 }

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

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
+
+const avatarVariants = cva(
+  "border-[1px] border-chia-400 flex items-center justify-center bg-chia-300",
+  {
+    variants: {
+      size: {
+        [SizeEnum.XLARGE]: "w-[96px] h-[96px] rounded-1000",
+        [SizeEnum.LARGE]: "w-[72px] h-[72px] rounded-900",
+        [SizeEnum.MEDIUM]: "w-[56px] h-[56px] rounded-800",
+        [SizeEnum.SMALL]: "w-[40px] h-[40px] rounded-700",
+        [SizeEnum.XSMALL]: "w-[32px] h-[32px] rounded-600",
+        [SizeEnum.XXSMALL]: "w-[24px] h-[24px] rounded-600",
+      },
+    },
+    defaultVariants: {
+      size: SizeEnum.MEDIUM,
+    },
+  }
+);
+
+export { avatarVariants };

package/src/components/Avatar/index.tsx

@@ -0,0 +1,119 @@
+import type { AvatarProps } from "./types";
+import { Person } from "@kivid/icons/native";
+import { View, Image } from "react-native";
+import { SizeEnum } 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 = SizeEnum.MEDIUM, className } = props;
+
+  const personMappedSize = {
+    [SizeEnum.XLARGE]: 56,
+    [SizeEnum.LARGE]: 48,
+    [SizeEnum.MEDIUM]: 40,
+    [SizeEnum.SMALL]: 32,
+    [SizeEnum.XSMALL]: 24,
+    [SizeEnum.XXSMALL]: 16,
+  }[size];
+
+  const personMappedStrokeWidth = {
+    [SizeEnum.XLARGE]: 1.6,
+    [SizeEnum.LARGE]: 1.6,
+    [SizeEnum.MEDIUM]: 1.6,
+    [SizeEnum.SMALL]: 1.6,
+    [SizeEnum.XSMALL]: 1.5,
+    [SizeEnum.XXSMALL]: 1.125,
+  }[size];
+
+  const avatarStyle = avatarVariants({ size });
+
+  const avatarTextStyleMap = {
+    [SizeEnum.XXSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[15px]",
+    },
+    [SizeEnum.XSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[16px]",
+    },
+    [SizeEnum.SMALL]: {
+      variant: "title_small",
+      fontWeight: "700",
+      className: "h-[18px]",
+    },
+    [SizeEnum.MEDIUM]: {
+      variant: "title_large",
+      fontWeight: "700",
+      className: "h-[18px]",
+    },
+    [SizeEnum.LARGE]: {
+      variant: "headline_small",
+      fontWeight: "700",
+      className: "h-[29px]",
+    },
+    [SizeEnum.XLARGE]: {
+      variant: "headline_medium",
+      fontWeight: "700",
+      className: "h-[30px]",
+    },
+  } as const;
+
+  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();
+
+      //TODO: line height add spaces on font, and element cant be centered
+      return (
+        <View className={merge(avatarStyle, className)}>
+          <Typography
+            className={merge(
+              avatarTextStyleMap[size].className,
+              "text-chia-600"
+            )}
+            variant={avatarTextStyleMap[size].variant}
+            weight={avatarTextStyleMap[size].fontWeight}
+          >
+            {firstLetters}
+          </Typography>
+        </View>
+      );
+    }
+
+    return (
+      <View className={merge(avatarStyle, className)}>
+        <Person
+          color="#B6C2C2"
+          size={personMappedSize}
+          strokeWidth={personMappedStrokeWidth}
+        />
+      </View>
+    );
+  }
+
+  if (!src) {
+    return renderFallbackType();
+  }
+
+  return (
+    <View className={merge(avatarStyle, "overflow-hidden", className)}>
+      <Image
+        source={{ uri: src }}
+        className={"object-cover w-full h-full"}
+        accessibilityLabel="Profile Avatar"
+      />
+    </View>
+  );
+}

package/src/components/Avatar/types.ts

@@ -0,0 +1,16 @@
+import { SizeEnum } from "../../enums";
+
+export type AvatarSize =
+  | SizeEnum.XXSMALL
+  | SizeEnum.XSMALL
+  | SizeEnum.SMALL
+  | SizeEnum.MEDIUM
+  | SizeEnum.LARGE
+  | SizeEnum.XLARGE;
+
+export interface AvatarProps {
+  src?: string | null;
+  name?: string;
+  size?: AvatarSize;
+  className?: string;
+}

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

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
+import { SizeEnum, CornersEnum } from "../../../enums";
 
 const buttonVariants = cva(
   [
-    "flex-row items-center justify-center",
+    "flex-row justify-center items-center",
     "font-bold",
     "relative overflow-hidden",
   ],
@@ -32,13 +33,13 @@ const buttonVariants = cva(
         ghost: ["bg-transparent", "disabled:opacity-30"],
       },
       size: {
-        small: ["px-400 h-800"],
-        medium: ["px-600 h-900"],
-        large: ["px-600 h-1000"],
+        [SizeEnum.SMALL]: ["px-400 h-800"],
+        [SizeEnum.MEDIUM]: ["px-600 h-900"],
+        [SizeEnum.LARGE]: ["px-600 h-1000"],
       },
       corners: {
-        small: "rounded-500",
-        medium: "rounded-700",
+        [CornersEnum.SMALL]: "rounded-500",
+        [CornersEnum.MEDIUM]: "rounded-700",
       },
       fullWidth: {
         true: "w-full",
@@ -49,8 +50,8 @@ const buttonVariants = cva(
     },
     defaultVariants: {
       variant: "grape",
-      size: "medium",
-      corners: "medium",
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
       fullWidth: false,
     },
   }
@@ -69,14 +70,12 @@ 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: "",
     },
+    disabled: {
+      true: "",
+    },
   },
   compoundVariants: [
     {
@@ -89,6 +88,21 @@ const textVariants = cva("", {
       selected: true,
       class: "text-chia-900",
     },
+    {
+      variant: "outline",
+      disabled: true,
+      class: "text-chia-700",
+    },
+    {
+      variant: "glass",
+      disabled: true,
+      class: "text-chia-700",
+    },
+    {
+      variant: "ghost",
+      disabled: true,
+      class: "text-chia-700",
+    },
   ],
 });
 

package/src/components/Button/index.tsx

@@ -1,20 +1,29 @@
 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,
   selectedVariants,
 } from "./assets/class-variants";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export function Button(props: ButtonProps) {
   const {
     variant = "grape",
-    size = "large",
-    corners = "medium",
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
     fullWidth = false,
     loading = false,
     selected = false,
@@ -43,12 +52,20 @@ export function Button(props: ButtonProps) {
     ghost: "grape",
   };
 
+  const typographyVariantMap = {
+    small: "label_small",
+    medium: "label_medium",
+    large: "label_large",
+  } as const;
+
+  const typographyVariant = typographyVariantMap[size ?? SizeEnum.MEDIUM];
+
   function renderContent() {
     const textStyle = merge(
       textVariants({
         variant,
-        size,
         selected: selected && (variant === "outline" || variant === "ghost"),
+        disabled,
       })
     );
 
@@ -63,9 +80,14 @@ export function Button(props: ButtonProps) {
     }
 
     return (
-      <Text className={textStyle} numberOfLines={1}>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={textStyle}
+        numberOfLines={1}
+      >
         {children}
-      </Text>
+      </Typography>
     );
   }
 
@@ -101,37 +123,34 @@ export function Button(props: ButtonProps) {
   };
 
   return (
-    <Animated.View
+    <AnimatedPressable
+      ref={ref}
+      disabled={disabled}
+      className={buttonStyle}
       style={{
         opacity: animatedValue,
       }}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={
+        accessibilityLabel ||
+        (typeof children === "string" ? children : "Button")
+      }
+      accessibilityState={{
+        disabled: disabled,
+        selected: selected,
+        busy: loading,
+      }}
+      pointerEvents={loading || disabled ? "none" : "auto"}
+      {...rest}
     >
-      <Pressable
-        ref={ref}
-        className={buttonStyle}
-        disabled={disabled}
-        onPress={onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        accessibilityRole="button"
-        accessibilityLabel={
-          accessibilityLabel ||
-          (typeof children === "string" ? children : "Button")
-        }
-        accessibilityState={{
-          disabled: disabled,
-          selected: selected,
-          busy: loading,
-        }}
-        pointerEvents={loading || disabled ? "none" : "auto"}
-        {...rest}
-      >
-        {renderContent()}
-      </Pressable>
-    </Animated.View>
+      {renderContent()}
+    </AnimatedPressable>
   );
 }
 
 Button.displayName = "Button";
 
-export default Button;
+export { ButtonProps, ButtonVariant, ButtonSize, ButtonCorners };

package/src/components/Button/types.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import { buttonVariants } from "./assets/class-variants";
 import { PressableProps, View } from "react-native";
+import { SizeEnum, CornersEnum } from "../../enums";
 
 export type ButtonVariant =
   | "grape"
@@ -13,9 +14,9 @@ export type ButtonVariant =
   | "glass"
   | "ghost";
 
-export type ButtonSize = "small" | "medium" | "large";
+export type ButtonSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
 
-export type ButtonCorners = "small" | "medium";
+export type ButtonCorners = CornersEnum.SMALL | CornersEnum.MEDIUM;
 
 export interface ButtonProps
   extends VariantProps<typeof buttonVariants>,