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

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.11",
   "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,45 @@
       ]
     ]
   },
-  "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-test-renderer": "19.0.0",
+    "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/icons": "1.0.0-alpha.10",
+    "@kivid/tailwind-preset": "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 +99,9 @@
   ],
   "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"
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
 }

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

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+import { CornersEnum } from "../../../enums";
+
+export const menuCardVariants = cva(
+  [
+    "flex-col justify-between items-start gap-400",
+    "relative",
+    "min-h-[120px]",
+  ],
+  {
+    variants: {
+      variant: {
+        grape: ["bg-grape-500", "disabled:bg-grape-200"],
+        java: ["bg-java-500", "disabled:bg-java-200"],
+        pear: ["bg-pear-500", "disabled:bg-pear-200"],
+        tangerine: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-200",
+        ],
+        blackberry: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-200",
+        ],
+        chia: ["bg-chia-700", "disabled:bg-chia-400"],
+        outline: [
+          "border-100 border-chia-400",
+          "disabled:border-chia-300",
+        ],
+      },
+      corners: {
+        [CornersEnum.SMALL]: "rounded-700",
+        [CornersEnum.MEDIUM]: "rounded-700",
+        [CornersEnum.LARGE]: "rounded-700",
+      },
+    },
+    defaultVariants: {
+      variant: "grape",
+      corners: CornersEnum.MEDIUM,
+    },
+  }
+);
+
+export const textVariants = cva("", {
+  variants: {
+    variant: {
+      grape: "text-chia-100",
+      java: "text-chia-100",
+      pear: "text-chia-100",
+      tangerine: "text-chia-100",
+      blackberry: "text-chia-100",
+      chia: "text-chia-100",
+      outline: "text-chia-900",
+    },
+  },
+  defaultVariants: {
+    variant: "grape",
+  },
+});

package/src/components/ActionButton/index.tsx

@@ -0,0 +1,127 @@
+import { merge } from "@kivid/tailwind-preset";
+import React from "react";
+import { Pressable, View } from "react-native";
+import { CornersEnum } from "../../enums";
+import { Typography } from "../Typography";
+import {
+  menuCardVariants,
+  textVariants,
+} from "./assets/class-variants";
+import type { ActionButtonProps } from "./types";
+
+export function ActionButton(props: ActionButtonProps) {
+  const {
+    icon,
+    label,
+    subtitle,
+    variant = "grape",
+    corners = CornersEnum.MEDIUM,
+    disabled = false,
+    className,
+    onPress,
+    accessibilityLabel,
+    ref,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  // Figma design system specifies Corner 400: 16px and Space 600: 16px for all ActionButton variants
+  const borderRadius = 16;
+  const padding = 16;
+
+  // Map pressed state colors according to Figma design (darker variants)
+  const pressedColorMap: Record<typeof variant, string> = {
+    grape: "bg-grape-700",
+    java: "bg-java-700",
+    pear: "bg-pear-700",
+    tangerine: "bg-tangerine-700",
+    blackberry: "bg-blackberry-700",
+    chia: "bg-chia-800",
+    outline: "border-chia-600",
+  };
+
+  const containerStyle = merge(
+    menuCardVariants({
+      variant,
+      corners,
+    }),
+    isPressed && !disabled && pressedColorMap[variant],
+    className
+  );
+
+  const textStyle = merge(textVariants({ variant }));
+
+  // Define icon colors based on variant
+  const iconColorMap = {
+    grape: "#FAFCFC", // chia-100
+    java: "#FAFCFC",
+    pear: "#FAFCFC",
+    tangerine: "#FAFCFC",
+    blackberry: "#FAFCFC",
+    chia: "#FAFCFC",
+    outline: "#393E3E", // chia-900
+  };
+
+  // Clone icon element to pass color prop
+  const iconWithColor = React.isValidElement(icon)
+    ? React.cloneElement(icon as React.ReactElement<any>, {
+        color: iconColorMap[variant],
+      })
+    : icon;
+
+  const handlePressIn = (event: any) => {
+    setIsPressed(true);
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: any) => {
+    setIsPressed(false);
+    onPressOut?.(event);
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={disabled}
+      className={containerStyle}
+      style={{
+        borderRadius,
+        padding,
+        overflow: 'hidden',
+      }}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel || `${label}${subtitle ? ` ${subtitle}` : ""}`}
+      accessibilityState={{
+        disabled: disabled,
+      }}
+      pointerEvents={disabled ? "none" : "auto"}
+      {...rest}
+    >
+      {/* Icon Container */}
+      <View className={merge("flex items-start shrink-0", disabled && "opacity-60")}>{iconWithColor}</View>
+
+      {/* Label Container */}
+      <View className="shrink-0">
+        <Typography variant="label_large" weight="500" className={merge(textStyle, disabled && "opacity-60")}>
+          {label}
+        </Typography>
+        {subtitle && (
+          <Typography variant="label_large" weight="500" className={merge(textStyle, disabled && "opacity-60")}>
+            {subtitle}
+          </Typography>
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+ActionButton.displayName = "ActionButton";
+
+export { ActionButtonCorners, ActionButtonProps, ActionButtonVariant } from "./types";
+

package/src/components/ActionButton/types.ts

@@ -0,0 +1,63 @@
+import type { VariantProps } from "class-variance-authority";
+import { PressableProps, View } from "react-native";
+import { CornersEnum } from "../../enums";
+import { menuCardVariants } from "./assets/class-variants";
+
+export type ActionButtonVariant =
+  | "grape"
+  | "java"
+  | "pear"
+  | "tangerine"
+  | "blackberry"
+  | "chia"
+  | "outline";
+
+export type ActionButtonCorners =
+  | CornersEnum.SMALL
+  | CornersEnum.MEDIUM
+  | CornersEnum.LARGE;
+
+export interface ActionButtonProps
+  extends VariantProps<typeof menuCardVariants>,
+    PressableProps {
+  /**
+   * The icon to display at the top of the card
+   */
+  icon: React.ReactNode;
+  /**
+   * The main label text
+   */
+  label: string;
+  /**
+   * The subtitle text below the label
+   */
+  subtitle?: string;
+  /**
+   * Visual style variant of the card
+   */
+  variant?: ActionButtonVariant;
+  /**
+   * Border radius of the card
+   */
+  corners?: ActionButtonCorners;
+  /**
+   * Whether the card is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional class names
+   */
+  className?: string;
+  /**
+   * Callback when card is pressed
+   */
+  onPress?: () => void;
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+  /**
+   * Reference to the card element
+   */
+  ref?: React.RefObject<View | null>;
+}

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",
+    },
   ],
 });