@kivid/native-components 1.0.0-alpha.7 → 1.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -78,8 +78,8 @@
     "react": "19.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "@kivid/tailwind-preset": "1.0.0-alpha.7",
-    "@kivid/icons": "1.0.0-alpha.7"
+    "@kivid/icons": "1.0.0-alpha.8",
+    "@kivid/tailwind-preset": "1.0.0-alpha.8"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -89,8 +89,8 @@
     "react-native-svg": "^15.12.0",
     "react-native": "0.79.5",
     "react": "19.0.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.7",
-    "@kivid/icons": "1.0.0-alpha.7"
+    "@kivid/tailwind-preset": "1.0.0-alpha.8",
+    "@kivid/icons": "1.0.0-alpha.8"
   },
   "eslintIgnore": [
     "node_modules/",

package/src/components/Avatar/index.tsx

@@ -7,7 +7,7 @@ import { merge } from "@kivid/tailwind-preset";
 import Typography from "../Typography";
 
 export function Avatar(props: AvatarProps) {
-  const { src, name, size = SizeEnum.MEDIUM } = props;
+  const { src, name, size = SizeEnum.MEDIUM, className } = props;
 
   const personMappedSize = {
     [SizeEnum.XLARGE]: 56,
@@ -77,7 +77,7 @@ export function Avatar(props: AvatarProps) {
 
       //TODO: line height add spaces on font, and element cant be centered
       return (
-        <View className={avatarStyle}>
+        <View className={merge(avatarStyle, className)}>
           <Typography
             className={merge(
               avatarTextStyleMap[size].className,
@@ -93,7 +93,7 @@ export function Avatar(props: AvatarProps) {
     }
 
     return (
-      <View className={avatarStyle}>
+      <View className={merge(avatarStyle, className)}>
         <Person
           color="#B6C2C2"
           size={personMappedSize}
@@ -108,7 +108,7 @@ export function Avatar(props: AvatarProps) {
   }
 
   return (
-    <View className={merge(avatarStyle, "overflow-hidden")}>
+    <View className={merge(avatarStyle, "overflow-hidden", className)}>
       <Image
         source={{ uri: src }}
         className={"object-cover w-full h-full"}

package/src/components/Avatar/types.ts

@@ -12,4 +12,5 @@ export interface AvatarProps {
   src?: string | null;
   name?: string;
   size?: AvatarSize;
+  className?: string;
 }

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

@@ -4,7 +4,7 @@ export const chatBubbleBoxVariants = cva(
   "flex-row gap-400 px-600 py-500 min-h-1000",
   {
     variants: {
-      contentType: {
+      variant: {
         check: "",
         alert: "",
         error: "",
@@ -25,27 +25,27 @@ export const chatBubbleBoxVariants = cva(
     },
     compoundVariants: [
       {
-        contentType: "check",
+        variant: "check",
         colorState: "fill",
         className: "bg-pear-500",
       },
       {
-        contentType: "alert",
+        variant: "alert",
         colorState: "fill",
         className: "bg-tangerine-500",
       },
       {
-        contentType: "error",
+        variant: "error",
         colorState: "fill",
         className: "bg-blackberry-500",
       },
       {
-        contentType: "custom",
+        variant: "custom",
         colorState: "fill",
         className: "bg-chia-100",
       },
       {
-        contentType: "custom",
+        variant: "custom",
         colorState: "outline",
         className: "bg-chia-100",
       },

package/src/components/ChatBubble/components/ChatBubbleSeal/index.tsx

@@ -11,9 +11,9 @@ export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
   className,
   ...props
 }) => {
-  const { contentType, colorState } = useChatBubbleContext();
+  const { variant, colorState } = useChatBubbleContext();
 
-  if (!contentType || contentType === "custom") {
+  if (!variant || variant === "custom") {
     return null;
   }
 
@@ -25,7 +25,7 @@ export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
 
   return (
     <Seal
-      variant={sealVariantMap[contentType]}
+      variant={sealVariantMap[variant]}
       size={SizeEnum.MEDIUM}
       inverted={colorState === "fill"}
       className={merge("ml-[-6px]", className)}

package/src/components/ChatBubble/components/ChatBubbleText/index.tsx

@@ -13,11 +13,11 @@ export const ChatBubbleText: React.FC<ChatBubbleTextProps> = ({
   children,
   ...props
 }) => {
-  const { colorState, contentType } = useChatBubbleContext();
+  const { colorState, variant } = useChatBubbleContext();
 
   // Text color based on bubble colorState
   const textColorClass =
-    colorState === "fill" && contentType !== "custom"
+    colorState === "fill" && variant !== "custom"
       ? "text-chia-200"
       : "text-chia-800";
 

package/src/components/ChatBubble/contexts/ChatBubbleContext/types.ts

@@ -5,7 +5,7 @@ import {
 } from "../../types";
 
 export interface ChatBubbleContextValue {
-  contentType?: ChatBubbleType;
+  variant?: ChatBubbleType;
   colorState: ChatBubbleColorState;
   messageType: ChatBubbleMessageType;
 }

package/src/components/ChatBubble/index.tsx

@@ -15,15 +15,15 @@ import { merge } from "@kivid/tailwind-preset";
 import { ChatBubbleContext } from "./contexts";
 import type { ChatBubbleContextValue } from "./contexts/ChatBubbleContext/types";
 
-
 export function ChatBubble(props: ChatBubbleProps) {
   const {
-    contentType = "custom",
+    variant = "custom",
     colorState = "outline",
-    hasEar = false,
+    hasEar = true,
     className,
     children,
     time: timeFromProps,
+    shouldDisplayTime = true,
     messageType = "initial",
     ...restOfProps
   } = props;
@@ -38,11 +38,10 @@ export function ChatBubble(props: ChatBubbleProps) {
     custom: "#FAFCFC",
   };
 
-  const tailColor =
-    colorState === "outline" ? "#FAFCFC" : colorMap[contentType];
+  const tailColor = colorState === "outline" ? "#FAFCFC" : colorMap[variant];
 
   const contextInitialValue: ChatBubbleContextValue = {
-    contentType,
+    variant,
     colorState,
     messageType,
   };
@@ -68,7 +67,7 @@ export function ChatBubble(props: ChatBubbleProps) {
     <ChatBubbleContext.Provider value={contextInitialValue}>
       <View
         accessibilityRole="text"
-        accessibilityLabel={accessibilityLabelMap[contentType]}
+        accessibilityLabel={accessibilityLabelMap[variant]}
         accessible={true}
         className={merge("flex", className)}
         {...restOfProps}
@@ -87,7 +86,7 @@ export function ChatBubble(props: ChatBubbleProps) {
           <View
             className={merge(
               chatBubbleBoxVariants({
-                contentType,
+                variant,
                 colorState,
                 hasEar,
                 messageType,
@@ -101,7 +100,7 @@ export function ChatBubble(props: ChatBubbleProps) {
             {children}
           </View>
         </View>
-        <ChatBubbleTime>{time}</ChatBubbleTime>
+        {shouldDisplayTime && <ChatBubbleTime>{time}</ChatBubbleTime>}
       </View>
     </ChatBubbleContext.Provider>
   );

package/src/components/ChatBubble/types.ts

@@ -5,11 +5,12 @@ export type ChatBubbleColorState = "fill" | "outline";
 export type ChatBubbleMessageType = "initial" | "followUp";
 
 export interface ChatBubbleProps extends Omit<ViewProps, "children"> {
-  contentType?: ChatBubbleType;
+  variant?: ChatBubbleType;
   colorState?: ChatBubbleColorState;
   hasEar?: boolean;
   className?: string;
   children?: React.ReactNode;
   time?: string;
+  shouldDisplayTime?: boolean;
   messageType?: ChatBubbleMessageType;
 }

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

@@ -4,7 +4,7 @@ import { SizeEnum, CornersEnum } from "../../../enums";
 
 const buttonVariants = cva(
   [
-    "flex flex-row items-center justify-between w-full",
+    "flex flex-row items-center justify-between",
     "font-bold",
     "disabled:cursor-not-allowed",
     "relative overflow-hidden",

package/src/components/ListButton/index.tsx

@@ -4,10 +4,7 @@ import { ListButtonVariantEnum } from "./enums";
 import { SizeEnum, CornersEnum } from "../../enums";
 import type { ListButtonProps } from "./types";
 import { ChevronRight } from "@kivid/icons/native";
-import {
-  buttonVariants,
-  textVariants,
-} from "./assets/class-variants";
+import { buttonVariants, textVariants } from "./assets/class-variants";
 import { merge } from "@kivid/tailwind-preset";
 import { useRef } from "react";
 
@@ -24,6 +21,7 @@ export function ListButton(props: ListButtonProps) {
     iconLeftContainerClassName,
     iconRightContainerClassName,
     accessibilityLabel,
+    numberOfLines = 1,
     onPressIn,
     onPressOut,
     ...rest
@@ -63,20 +61,24 @@ export function ListButton(props: ListButtonProps) {
     onPressOut?.(event);
   };
 
+  function renderLeftIcon() {
+    if (iconLeft) {
+      return <View className="mr-400">{iconLeft}</View>;
+    }
+
+    return null;
+  }
+
   function renderRightIcon() {
     if (iconRight) {
-      return (
-        <View className="ml-400">
-          {iconRight}
-        </View>
-      )
+      return <View className="ml-400">{iconRight}</View>;
     }
 
     return (
-      <View className="flex-1 items-end">
+      <View className="ml-400">
         <ChevronRight color={chevronIconColor} />
       </View>
-    )
+    );
   }
 
   return (
@@ -84,36 +86,35 @@ export function ListButton(props: ListButtonProps) {
       style={{
         opacity: animatedValue,
       }}
+      className={merge(
+        buttonVariants({
+          variant,
+          size,
+          corners,
+        }),
+        className
+      )}
     >
       <Pressable
-        className={merge(
-          buttonVariants({
-            variant,
-            size,
-            corners,
-          }),
-          className
-        )}
         disabled={disabled}
         accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel ?? (typeof children === "string" ? children : undefined)}
         accessibilityState={{
           disabled: disabled,
         }}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
+        className="flex-row"
         {...rest}
       >
-        <View className="flex flex-row items-center">
-          <View className="mr-400 flex">
-            {iconLeft}
-          </View>
-
+        <View className="flex flex-row items-center flex-1">
+          {renderLeftIcon()}
           <Typography
             ellipsizeMode="tail"
             variant={typographyVariant}
             weight="700"
-            className={merge(textStyle, "truncate min-w-fit")}
+            className={merge(textStyle, "truncate flex-1 ")}
+            numberOfLines={numberOfLines}
           >
             {children}
           </Typography>

package/src/components/ListButton/types.ts

@@ -17,5 +17,6 @@ export interface ListButtonProps
   corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;
   className?: string;
   disabled?: boolean;
-  accessibilityLabel: string;
+  accessibilityLabel?: string;
+  numberOfLines?: number;
 }

package/src/components/PasswordInput/index.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import TextInput from "../TextInput";
+import { IconButton } from "../IconButton";
+import { PasswordInputProps } from "./types";
+import { Eye, EyeOff } from "@kivid/icons/native";
+import { IconButtonVariantEnum } from "../IconButton/enums";
+
+export function PasswordInput(props: PasswordInputProps) {
+  const [shouldHidePassword, setShouldHidePassword] = useState(true);
+
+  function toogleHidePassword() {
+    setShouldHidePassword(!shouldHidePassword);
+  }
+
+  function renderIcon() {
+    if (shouldHidePassword) {
+      return <Eye size={24} className="text-chia-900" />;
+    }
+
+    return <EyeOff size={24} className="text-chia-900" />;
+  }
+
+  return (
+    <TextInput
+      {...props}
+      secureTextEntry={shouldHidePassword}
+      rightIcon={
+        <IconButton
+          onPress={toogleHidePassword}
+          accessibilityLabel="Toggle Password Visibility"
+          variant={IconButtonVariantEnum.GHOST}
+          icon={renderIcon()}
+        />
+      }
+    />
+  );
+}

package/src/components/PasswordInput/types.ts

@@ -0,0 +1,4 @@
+import { TextInputProps } from "../TextInput/types";
+
+export interface PasswordInputProps
+  extends Omit<TextInputProps, "secureTextEntry"> {}

package/src/components/TextInput/index.tsx

@@ -31,6 +31,9 @@ export function TextInput({
   containerTestID,
   ref,
   tooltipClassName = "",
+  tooltipPointerClassName,
+  tooltipContainerClassName,
+  rightIcon,
   ...rest
 }: TextInputProps) {
   const inputRef = useRef<RNTextInput>(null);
@@ -52,6 +55,14 @@ export function TextInput({
     );
   };
 
+  const renderRightIcon = () => {
+    if (rightIcon) {
+      return rightIcon;
+    }
+
+    return renderSeal();
+  };
+
   const handleChangeText = (text: string) => {
     onChangeText?.(text);
   };
@@ -71,9 +82,11 @@ export function TextInput({
   return (
     <Tooltip
       isOpenedByVariantError={hasError}
-      message="This is a error"
+      message={error}
       variant={TooltipVariantEnum.ERROR}
       className={tooltipClassName}
+      pointerClassName={tooltipPointerClassName}
+      containerClassName={tooltipContainerClassName}
     >
       <Pressable
         testID={containerTestID}
@@ -134,7 +147,8 @@ export function TextInput({
             }}
           />
         </View>
-        {renderSeal()}
+
+        {renderRightIcon()}
       </Pressable>
     </Tooltip>
   );

package/src/components/TextInput/types.ts

@@ -19,6 +19,9 @@ export interface TextInputProps
   labelClassName?: string;
   containerTestID?: string;
   tooltipClassName?: string;
+  tooltipPointerClassName?: string;
+  tooltipContainerClassName?: string;
+  rightIcon?: React.ReactNode;
   onChangeText?: (text: string) => void;
   ref?: React.RefObject<RNTextInput | null>;
 }

package/src/components/Tooltip/types.ts

@@ -8,7 +8,6 @@ export interface TooltipProps {
   className?: string;
   pointerClassName?: string;
   containerClassName?: string;
-  triggerButtonClassName?: string;
   style?: ViewStyle;
   onChangeVisibility?: (isVisible: boolean) => void;
   isOpenedByVariantError?: boolean;

package/src/components/index.ts

@@ -68,3 +68,6 @@ export * from "./RadioInput/enums";
 export * from "./IconButton";
 export type * from "./IconButton/types";
 export * from "./IconButton/enums";
+
+export * from "./PasswordInput";
+export type * from "./PasswordInput/types";