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

package/dist/typescript/components/Tooltip/types.d.ts

@@ -0,0 +1,12 @@
+import { ViewStyle } from "react-native";
+import { TooltipVariantEnum } from "./enum";
+export interface TooltipProps {
+    children?: React.ReactNode;
+    message: React.ReactNode;
+    variant?: TooltipVariantEnum;
+    className?: string;
+    pointerClassName?: string;
+    containerClassName?: string;
+    isVisible: boolean;
+    style?: ViewStyle;
+}

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

@@ -1,18 +1,20 @@
 export * from "./Avatar";
 export * from "./Button";
 export type * from "./Button/types";
+export * from "./ChatBubble";
+export type * from "./ChatBubble/types";
 export * from "./Chip";
 export * from "./Chip/types";
 export * from "./Chip/enums";
 export * from "./InformationStatus";
 export type * from "./InformationStatus/types";
 export * from "./InformationStatus/enums";
-export * from "./InputCheckbox";
-export type * from "./InputCheckbox/types";
-export * from "./InputCheckbox/enums";
-export * from "./InputOTP";
-export type * from "./InputOTP/types";
-export * from "./InputOTP/enums";
+export * from "./CheckboxInput";
+export type * from "./CheckboxInput/types";
+export * from "./CheckboxInput/enums";
+export * from "./OtpInput";
+export type * from "./OtpInput/types";
+export * from "./OtpInput/enums";
 export * from "./HighlightedText";
 export type * from "./HighlightedText/types";
 export * from "./LoadingDots";
@@ -27,3 +29,20 @@ export type * from "./Toggle/types";
 export * from "./Toggle/enums";
 export * from "./Typography";
 export type * from "./Typography/types";
+export * from "./Toast";
+export type * from "./Toast/types";
+export * from "./Toast/enums";
+export * from "./Tooltip";
+export type * from "./Tooltip/types";
+export * from "./ListButton";
+export type * from "./ListButton/types";
+export * from "./ListButton/enums";
+export * from "./TextInput";
+export type * from "./TextInput/types";
+export * from "./TextInput/enums";
+export * from "./SelectButton";
+export type * from "./SelectButton/types";
+export * from "./SelectButton/enums";
+export * from "./RadioInput";
+export type * from "./RadioInput/types";
+export * from "./RadioInput/enums";

package/dist/typescript/{components/Avatar/enums/size.d.ts → enums/corners.d.ts}

@@ -1,5 +1,4 @@
-export declare enum AvatarSizeEnum {
-    XSMALL = "xsmall",
+export declare enum CornersEnum {
     SMALL = "small",
     MEDIUM = "medium",
     LARGE = "large",

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

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

package/dist/typescript/enums/size.d.ts

@@ -0,0 +1,10 @@
+export declare enum SizeEnum {
+    XXSMALL = "xxsmall",
+    XSMALL = "xsmall",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XLARGE = "xlarge",
+    XXLARGE = "xxlarge",
+    XXXLARGE = "xxxlarge"
+}

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

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

package/dist/typescript/index.d.ts

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

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.5",
+  "version": "1.0.0-alpha.6",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -12,20 +12,29 @@
   },
   "homepage": "https://github.com/kivid-saude/butterfly/tree/main/packages/native-components#readme",
   "license": "MIT",
-  "main": "index.js",
-  "files": [
-    "dist",
-    "src"
-  ],
+  "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",
@@ -44,66 +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-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-dom": "19.0.0",
-    "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",
-    "react-native": "0.79.5",
-    "react": "19.0.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.5",
-    "@kivid/icons": "1.0.0-alpha.5"
-  },
+  "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"
+    "@kivid/tailwind-preset": "1.0.0-alpha.6",
+    "@kivid/icons": "1.0.0-alpha.6"
   },
   "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",
-    "@kivid/icons": "1.0.0-alpha.5"
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.6",
+    "@kivid/icons": "1.0.0-alpha.6"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -111,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

@@ -1,20 +1,21 @@
 import { cva } from "class-variance-authority";
-import { AvatarSizeEnum } from "../enums";
+import { SizeEnum } from "../../../enums";
 
 const avatarVariants = cva(
-  "border-[1px] border-chia-400 rounded-full items-center justify-center",
+  "border-[1px] border-chia-400 flex items-center justify-center bg-chia-300",
   {
     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]",
+        [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: AvatarSizeEnum.MEDIUM,
+      size: SizeEnum.MEDIUM,
     },
   }
 );

package/src/components/Avatar/index.tsx

@@ -1,48 +1,66 @@
 import type { AvatarProps } from "./types";
 import { Person } from "@kivid/icons/native";
 import { View, Image } from "react-native";
-import { AvatarSizeEnum } from "./enums";
+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 = AvatarSizeEnum.MEDIUM } = props;
+  const { src, name, size = SizeEnum.MEDIUM } = props;
 
-  const mappedSize = {
-    [AvatarSizeEnum.XLARGE]: 96,
-    [AvatarSizeEnum.LARGE]: 72,
-    [AvatarSizeEnum.MEDIUM]: 56,
-    [AvatarSizeEnum.SMALL]: 40,
-    [AvatarSizeEnum.XSMALL]: 32,
+  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 = {
-    [AvatarSizeEnum.XSMALL]: {
-      variant: "body_small" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.XXSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[15px]",
     },
-    [AvatarSizeEnum.SMALL]: {
-      variant: "title_small" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.XSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[16px]",
     },
-    [AvatarSizeEnum.MEDIUM]: {
-      variant: "title_large" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.SMALL]: {
+      variant: "title_small",
+      fontWeight: "700",
+      className: "h-[18px]",
     },
-    [AvatarSizeEnum.LARGE]: {
-      variant: "headline_small" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.MEDIUM]: {
+      variant: "title_large",
+      fontWeight: "700",
+      className: "h-[18px]",
     },
-    [AvatarSizeEnum.XLARGE]: {
-      variant: "headline_medium" as const,
-      fontWeight: "700" as const,
+    [SizeEnum.LARGE]: {
+      variant: "headline_small",
+      fontWeight: "700",
+      className: "h-[29px]",
     },
-  };
-
-  const calulatedInsideImageContainerSize = mappedSize - 1;
+    [SizeEnum.XLARGE]: {
+      variant: "headline_medium",
+      fontWeight: "700",
+      className: "h-[30px]",
+    },
+  } as const;
 
   function renderFallbackType() {
     if (name && !!name.trim()) {
@@ -57,10 +75,14 @@ export function Avatar(props: AvatarProps) {
       const firstLetters =
         `${firstLetterOfFirstName}${firstLetterOfSurname}`.toUpperCase();
 
+      //TODO: line height add spaces on font, and element cant be centered
       return (
         <View className={avatarStyle}>
           <Typography
-            className={"text-chia-600"}
+            className={merge(
+              avatarTextStyleMap[size].className,
+              "text-chia-600"
+            )}
             variant={avatarTextStyleMap[size].variant}
             weight={avatarTextStyleMap[size].fontWeight}
           >
@@ -71,10 +93,12 @@ export function Avatar(props: AvatarProps) {
     }
 
     return (
-      <View
-        className={merge(avatarStyle, "bg-chia-300 border-chia-400 max-h-fit")}
-      >
-        <Person color="#B6C2C2" size={mappedSize} />
+      <View className={avatarStyle}>
+        <Person
+          color="#B6C2C2"
+          size={personMappedSize}
+          strokeWidth={personMappedStrokeWidth}
+        />
       </View>
     );
   }
@@ -84,14 +108,11 @@ export function Avatar(props: AvatarProps) {
   }
 
   return (
-    <View className={merge(avatarStyle, "border-chia-100 relative")}>
+    <View className={merge(avatarStyle, "overflow-hidden")}>
       <Image
         source={{ uri: src }}
-        className="rounded-full"
-        style={{
-          width: calulatedInsideImageContainerSize,
-          height: calulatedInsideImageContainerSize,
-        }}
+        className={"object-cover w-full h-full"}
+        accessibilityLabel="Profile Avatar"
       />
     </View>
   );

package/src/components/Avatar/types.ts

@@ -1,7 +1,15 @@
-import type { AvatarSizeEnum } from "./enums";
+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?: AvatarSizeEnum;
+  size?: AvatarSize;
 }

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

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { SizeEnum, CornersEnum } from "../../../enums";
 
 const buttonVariants = cva(
   [
@@ -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,
     },
   }

package/src/components/Button/index.tsx

@@ -15,12 +15,13 @@ import {
   buttonVariants,
   selectedVariants,
 } from "./assets/class-variants";
+import { SizeEnum, CornersEnum } from "../../enums";
 
 export function Button(props: ButtonProps) {
   const {
     variant = "grape",
-    size = "large",
-    corners = "medium",
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
     fullWidth = false,
     loading = false,
     selected = false,
@@ -50,12 +51,12 @@ export function Button(props: ButtonProps) {
   };
 
   const typographyVariantMap = {
-    small: "label_small" as const,
-    medium: "label_medium" as const,
-    large: "label_large" as const,
-  };
+    small: "label_small",
+    medium: "label_medium",
+    large: "label_large",
+  } as const;
 
-  const typographyVariant = typographyVariantMap[size ?? "medium"];
+  const typographyVariant = typographyVariantMap[size ?? SizeEnum.MEDIUM];
 
   function renderContent() {
     const textStyle = merge(

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>,