@kivid/native-components 1.0.0-alpha.20 → 1.0.0-alpha.21

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { merge } from "@kivid/tailwind-preset";
 import { Typography } from "../../../Typography";
 
@@ -16,10 +16,13 @@ export const ChatBubbleText: React.FC<ChatBubbleTextProps> = ({
   const { colorState, variant } = useChatBubbleContext();
 
   // Text color based on bubble colorState
-  const textColorClass =
-    colorState === "fill" && variant !== "custom"
-      ? "text-chia-200"
-      : "text-chia-800";
+  const textColorClass = useMemo(() => {
+    if (colorState === "fill") {
+      return "text-chia-200";
+    }
+
+    return "text-chia-800";
+  }, [colorState, variant]);
 
   return (
     <Typography

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

@@ -4,6 +4,7 @@ import { merge } from "@kivid/tailwind-preset";
 import { Typography } from "../../../Typography";
 import { chatBubbleTimeVariants } from "../../assets/class-variants";
 import type { ChatBubbleTimeProps } from "./types";
+import { useChatBubbleContext } from "../../contexts/ChatBubbleContext";
 
 /**
  * Time component for displaying message timestamp
@@ -13,9 +14,11 @@ export const ChatBubbleTime: React.FC<ChatBubbleTimeProps> = ({
   children,
   ...props
 }) => {
+  const { origin } = useChatBubbleContext();
+
   return (
     <View
-      className={chatBubbleTimeVariants()}
+      className={chatBubbleTimeVariants({ origin })}
       accessibilityLabel={`Message time: ${children}`}
       accessibilityRole="text"
     >

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

@@ -8,4 +8,5 @@ export interface ChatBubbleContextValue {
   variant?: ChatBubbleType;
   colorState: ChatBubbleColorState;
   messageType: ChatBubbleMessageType;
+  origin: "user" | "assistant";
 }

package/src/components/ChatBubble/index.tsx

@@ -7,8 +7,12 @@ import {
   ChatBubbleTime,
   ChatBubbleLoading,
 } from "./components";
+import { cva } from "class-variance-authority";
 
-import { chatBubbleBoxVariants } from "./assets/class-variants";
+import {
+  chatBubbleBoxVariants,
+  chatBubbleContainerVariants,
+} from "./assets/class-variants";
 import type { ChatBubbleProps } from "./types";
 import { elevationDown100 } from "../../styles/mixins/shadows";
 import { merge } from "@kivid/tailwind-preset";
@@ -25,6 +29,7 @@ export function ChatBubble(props: ChatBubbleProps) {
     children,
     time: timeFromProps,
     shouldDisplayTime = true,
+    origin = "assistant",
     messageType = "initial",
     chatBubbleBoxClassName,
     fullWidth = false,
@@ -37,19 +42,29 @@ export function ChatBubble(props: ChatBubbleProps) {
     return `${hours}:${minutes}`;
   }, [timeFromProps]);
 
-  const colorMap = {
-    check: "#3DCC78",
-    alert: "#FF8B59",
-    error: "#E65245",
-    custom: "#FAFCFC",
-  };
+  const colorMap = useMemo(
+    () => ({
+      check: "#3DCC78",
+      alert: "#FF8B59",
+      error: "#E65245",
+      custom: origin === "user" ? "#7A50D9" : "#FAFCFC",
+    }),
+    [origin]
+  );
+
+  const tailColor = useMemo(() => {
+    if (colorState === "outline") {
+      return "#FAFCFC";
+    }
 
-  const tailColor = colorState === "outline" ? "#FAFCFC" : colorMap[variant];
+    return colorMap[variant];
+  }, [colorMap, colorState, variant]);
 
   const contextInitialValue: ChatBubbleContextValue = {
     variant,
     colorState,
     messageType,
+    origin,
   };
 
   const accessibilityLabelMap = {
@@ -61,14 +76,58 @@ export function ChatBubble(props: ChatBubbleProps) {
 
   function renderChatBubbleEar() {
     if (hasEar) {
-      return <ChatBubbleEar color={tailColor} type={colorState} />;
+      return (
+        <ChatBubbleEar
+          color={tailColor}
+          type={colorState}
+          mirrored={origin === "user"}
+        />
+      );
     }
 
     return null;
   }
 
-  const bubbleWithEarOffset = hasEar ? "mr-[8.8px]" : "";
-  const bubbleRowClass = `relative flex-row items-end ${bubbleWithEarOffset}`;
+  const bubbleWithEarOffset = useMemo(() => {
+    if (origin === "user") {
+      if (!hasEar) {
+        return "mr-[8px]";
+      }
+
+      return "";
+    }
+
+    if (origin === "assistant") {
+      if (!hasEar) {
+        return "ml-[8px]";
+      }
+
+      return "";
+    }
+
+    return "";
+  }, [hasEar, origin]);
+
+  const bubbleRowClass = cva("relative flex-row items-end ", {
+    variants: {
+      origin: {
+        user: `flex-row-reverse ${bubbleWithEarOffset}`,
+        assistant: bubbleWithEarOffset,
+      },
+    },
+  });
+
+  const bubbleEarContainerClass = cva(
+    "w-[12px] h-[10px] pb-[0.2px] z-10 items-center justify-center",
+    {
+      variants: {
+        origin: {
+          user: "ml-[-4px]",
+          assistant: "mr-[-4px]",
+        },
+      },
+    }
+  );
 
   const chatBubbleBoxStyle = merge(
     chatBubbleBoxVariants({
@@ -77,9 +136,10 @@ export function ChatBubble(props: ChatBubbleProps) {
       hasEar,
       messageType,
       fullWidth,
+      origin,
     }),
     chatBubbleBoxClassName
-  )
+  );
 
   return (
     <ChatBubbleContext.Provider value={contextInitialValue}>
@@ -87,19 +147,19 @@ export function ChatBubble(props: ChatBubbleProps) {
         accessibilityRole="text"
         accessibilityLabel={accessibilityLabelMap[variant]}
         accessible={true}
-        className={merge("flex", className)}
+        className={merge(chatBubbleContainerVariants({ origin }), className)}
         {...restOfProps}
       >
-        <View className={bubbleRowClass}>
-          <View
-            className={
-              "w-[11px] h-[9px] mr-[-3.2px] pb-[1.2px] z-10 items-center justify-center"
-            }
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-          >
-            {renderChatBubbleEar()}
-          </View>
+        <View className={bubbleRowClass({ origin })}>
+          {hasEar && (
+            <View
+              className={bubbleEarContainerClass({ origin })}
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+            >
+              {renderChatBubbleEar()}
+            </View>
+          )}
 
           <View
             className={chatBubbleBoxStyle}

package/src/components/ChatBubble/types.ts

@@ -12,6 +12,7 @@ export interface ChatBubbleProps extends Omit<ViewProps, "children"> {
   children?: React.ReactNode;
   time?: string;
   shouldDisplayTime?: boolean;
+  origin?: "user" | "assistant";
   messageType?: ChatBubbleMessageType;
   chatBubbleBoxClassName?: string;
   fullWidth?: boolean;

package/src/components/IconButton/index.tsx

@@ -106,6 +106,7 @@ export function IconButton(props: IconButtonProps) {
       }}
       disabled={disabled}
       accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
       accessibilityState={{
         disabled: disabled,
         selected: selected,

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

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+
+export const messageInputContainerVariants = cva(
+  "flex-row items-center border border-chia-400 bg-chia-100 rounded-700 min-h-[48px]",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-40",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }
+);
+
+export const messageInputContentVariants = cva(
+  "flex-1 flex-col text-chia-900 px-600"
+);
+
+export const messageInputFieldVariants = cva(
+  "font-nunito-bold text-[16px] leading-[20px] placeholder:text-chia-600 ios:pt-[3px] android:p-0",
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }
+);

package/src/components/MessageInput/index.tsx

@@ -0,0 +1,121 @@
+import { useRef } from "react";
+import { View, TextInput as RNTextInput, Pressable } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { MessageInputProps } from "./types";
+import {
+  messageInputContainerVariants,
+  messageInputContentVariants,
+  messageInputFieldVariants,
+} from "./assets/class-variants";
+import { EssentialSendStroke } from "@kivid/icons/native";
+import { IconButton } from "../IconButton";
+
+export function MessageInput({
+  value = "",
+  onChangeText,
+  disabled = false,
+  className = "",
+  inputClassName = "",
+  placeholder = "Type a message...",
+  accessibilityLabel,
+  containerTestID,
+  ref,
+  onSend,
+  sendButtonDisabled = false,
+  sendButtonAccessibilityLabel = "Send message",
+  multiline = false,
+  ...rest
+}: MessageInputProps) {
+  const inputRef = useRef<RNTextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+
+  const handleSend = () => {
+    if (!disabled && !sendButtonDisabled && onSend) {
+      onSend(value);
+    }
+  };
+
+  const getAccessibilityLabel = () => {
+    if (accessibilityLabel) return accessibilityLabel;
+
+    let labelText = "Message input";
+
+    if (disabled) labelText += ", disabled";
+
+    return labelText;
+  };
+
+  const isSendButtonDisabled = disabled || sendButtonDisabled;
+
+  return (
+    <Pressable
+      testID={containerTestID}
+      className={merge(
+        messageInputContainerVariants({
+          disabled,
+        }),
+        className
+      )}
+      onPress={() => {
+        if (!disabled) {
+          inputRef.current?.focus();
+        }
+      }}
+      disabled={disabled}
+      accessibilityRole="none"
+      accessibilityState={{
+        disabled,
+      }}
+    >
+      <View className={merge(messageInputContentVariants())}>
+        <RNTextInput
+          value={value}
+          onChangeText={handleChangeText}
+          editable={!disabled}
+          placeholder={placeholder}
+          multiline={multiline}
+          className={merge(
+            messageInputFieldVariants({
+              disabled,
+            }),
+            inputClassName
+          )}
+          accessibilityLabel={getAccessibilityLabel()}
+          accessibilityState={{
+            disabled,
+          }}
+          {...rest}
+          ref={(instance) => {
+            inputRef.current = instance;
+
+            if (ref) {
+              ref.current = instance;
+            }
+          }}
+        />
+      </View>
+
+      <IconButton
+        onPress={handleSend}
+        disabled={isSendButtonDisabled}
+        className="mr-400"
+        accessibilityRole="button"
+        accessibilityLabel={sendButtonAccessibilityLabel}
+        accessibilityState={{
+          disabled: isSendButtonDisabled,
+        }}
+        testID="send-button"
+        icon={
+          <EssentialSendStroke width={24} height={24} className="text-white" />
+        }
+      />
+    </Pressable>
+  );
+}
+
+MessageInput.displayName = "MessageInput";
+
+export default MessageInput;

package/src/components/MessageInput/types.ts

@@ -0,0 +1,18 @@
+import {
+  TextInputProps as RNTextInputProps,
+  TextInput as RNTextInput,
+} from "react-native";
+
+export interface MessageInputProps
+  extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+  value?: string;
+  disabled?: boolean;
+  className?: string;
+  inputClassName?: string;
+  containerTestID?: string;
+  onChangeText?: (text: string) => void;
+  onSend?: (text: string) => void;
+  ref?: React.RefObject<RNTextInput | null>;
+  sendButtonDisabled?: boolean;
+  sendButtonAccessibilityLabel?: string;
+}

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

@@ -1,22 +1,30 @@
 import { cva } from "class-variance-authority";
 
 export const textInputContainerVariants = cva(
-  "flex-row items-center border border-chia-400 bg-chia-100 h-[64px]",
+  "flex-row items-center border border-chia-400 bg-chia-100",
   {
     variants: {
       corners: {
         small: "rounded-500",
         medium: "rounded-700",
       },
+      size: {
+        small: "h-[48px]",
+        medium: "h-[56px]",
+        large: "h-[64px]",
+      },
       showLabel: {
         true: "gap-400 px-600 py-500",
         false: "px-600 py-500",
       },
+      showLeftIcon: {
+        true: "",
+        false: "",
+      },
       error: {
         true: "border-blackberry-500",
         false: "border-chia-400",
       },
-
       disabled: {
         true: "opacity-40",
         false: "",
@@ -24,27 +32,32 @@ export const textInputContainerVariants = cva(
     },
     defaultVariants: {
       corners: "medium",
+      size: "large",
       showLabel: false,
+      showLeftIcon: false,
       error: false,
       disabled: false,
     },
   }
 );
 
-export const textInputContentVariants = cva("flex-1 flex-col text-chia-900", {
-  variants: {
-    showLabel: {
-      true: "gap-0",
-      false: "",
+export const textInputContentVariants = cva(
+  "flex-1 flex-col text-chia-900 shrink min-w-0",
+  {
+    variants: {
+      showLabel: {
+        true: "gap-0",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      showLabel: false,
     },
-  },
-  defaultVariants: {
-    showLabel: false,
-  },
-});
+  }
+);
 
 export const textInputFieldVariants = cva(
-  "font-nunito-bold text-[16px] leading-[18px] text-chia-900 placeholder:text-chia-600 ios:pt-[3px] android:p-0",
+  "flex-1 font-nunito-bold text-[16px] leading-[20px] placeholder:text-chia-600 android:p-0 min-w-0",
   {
     variants: {
       disabled: {
@@ -63,12 +76,18 @@ export const textInputFieldVariants = cva(
         true: "min-h-700",
         false: "min-h-800",
       },
+      size: {
+        small: "ios:pt-[3px]",
+        medium: "ios:pt-[3px]",
+        large: "ios:pt-[2px]",
+      },
     },
     defaultVariants: {
       disabled: false,
       isValid: false,
       error: false,
       showLabel: false,
+      size: "large",
     },
   }
 );

package/src/components/TextInput/enums.ts

@@ -2,3 +2,9 @@ export enum TextInputCornersEnum {
   SMALL = "small",
   MEDIUM = "medium",
 }
+
+export enum TextInputSizeEnum {
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+}

package/src/components/TextInput/index.tsx

@@ -4,7 +4,7 @@ import { merge } from "@kivid/tailwind-preset";
 import { Seal } from "../Seal";
 import { SealVariantEnum } from "../Seal/enums";
 import type { TextInputProps } from "./types";
-import { TextInputCornersEnum } from "./enums";
+import { TextInputCornersEnum, TextInputSizeEnum } from "./enums";
 import {
   textInputContainerVariants,
   textInputContentVariants,
@@ -17,6 +17,7 @@ import { TooltipVariantEnum } from "../Tooltip/enum";
 
 export function TextInput({
   corners = TextInputCornersEnum.MEDIUM,
+  size = TextInputSizeEnum.LARGE,
   label,
   value,
   onChangeText,
@@ -33,12 +34,14 @@ export function TextInput({
   tooltipClassName = "",
   tooltipPointerClassName,
   tooltipContainerClassName,
+  leftIcon,
   rightIcon,
   ...rest
 }: TextInputProps) {
   const inputRef = useRef<RNTextInput>(null);
   const hasLabel = !!label;
   const hasError = !!error;
+  const hasLeftIcon = !!leftIcon;
 
   const shouldShowSeal = error || isValid;
 
@@ -93,9 +96,11 @@ export function TextInput({
         className={merge(
           textInputContainerVariants({
             corners,
+            size,
             error: !!error,
             disabled,
             showLabel: hasLabel,
+            showLeftIcon: hasLeftIcon,
           }),
           className
         )}
@@ -106,6 +111,7 @@ export function TextInput({
         }}
         disabled={disabled}
       >
+        {leftIcon && <View className="mr-400">{leftIcon}</View>}
         <View
           className={merge(textInputContentVariants({ showLabel: hasLabel }))}
         >
@@ -124,12 +130,14 @@ export function TextInput({
             onChangeText={handleChangeText}
             editable={!disabled}
             placeholder={placeholder}
+            textAlignVertical="center"
             className={merge(
               textInputFieldVariants({
                 disabled,
                 isValid,
                 error: hasError,
                 showLabel: hasLabel,
+                size,
               }),
               inputClassName
             )}

package/src/components/TextInput/types.ts

@@ -2,13 +2,15 @@ import {
   TextInputProps as RNTextInputProps,
   TextInput as RNTextInput,
 } from "react-native";
-import { TextInputCornersEnum } from "./enums";
+import { TextInputCornersEnum, TextInputSizeEnum } from "./enums";
 
 export type TextInputCorners = TextInputCornersEnum;
+export type TextInputSize = TextInputSizeEnum;
 
 export interface TextInputProps
   extends Omit<RNTextInputProps, "value" | "onChangeText"> {
   corners?: TextInputCorners;
+  size?: TextInputSize;
   label?: string;
   value?: string;
   disabled?: boolean;
@@ -21,6 +23,7 @@ export interface TextInputProps
   tooltipClassName?: string;
   tooltipPointerClassName?: string;
   tooltipContainerClassName?: string;
+  leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   onChangeText?: (text: string) => void;
   ref?: React.RefObject<RNTextInput | null>;

package/src/components/index.ts

@@ -22,6 +22,9 @@ export * from "./OtpInput";
 export * from "./OtpInput/enums";
 export type * from "./OtpInput/types";
 
+export * from "./MessageInput";
+export type * from "./MessageInput/types";
+
 export * from "./HighlightedText";
 export type * from "./HighlightedText/types";
 
@@ -78,3 +81,5 @@ export type * from "./PageIndicators/types";
 export * from "./ActionButton";
 export type * from "./ActionButton/types";
 
+export * from "./MessageInput";
+export type * from "./MessageInput/types";