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

package/dist/module/components/TextInput/index.js

@@ -5,7 +5,7 @@ import { View, TextInput as RNTextInput, Pressable } from "react-native";
 import { merge } from "@kivid/tailwind-preset";
 import { Seal } from "../Seal/index.js";
 import { SealVariantEnum } from "../Seal/enums/index.js";
-import { TextInputCornersEnum } from "./enums.js";
+import { TextInputCornersEnum, TextInputSizeEnum } from "./enums.js";
 import { textInputContainerVariants, textInputContentVariants, textInputFieldVariants } from "./assets/class-variants.js";
 import Typography from "../Typography/index.js";
 import { SizeEnum } from "../../enums/index.js";
@@ -14,6 +14,7 @@ import { TooltipVariantEnum } from "../Tooltip/enum/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function TextInput({
   corners = TextInputCornersEnum.MEDIUM,
+  size = TextInputSizeEnum.LARGE,
   label,
   value,
   onChangeText,
@@ -30,12 +31,14 @@ export function TextInput({
   tooltipClassName = "",
   tooltipPointerClassName,
   tooltipContainerClassName,
+  leftIcon,
   rightIcon,
   ...rest
 }) {
   const inputRef = useRef(null);
   const hasLabel = !!label;
   const hasError = !!error;
+  const hasLeftIcon = !!leftIcon;
   const shouldShowSeal = error || isValid;
   const renderSeal = () => {
     if (!shouldShowSeal) return null;
@@ -78,9 +81,11 @@ export function TextInput({
       testID: containerTestID,
       className: merge(textInputContainerVariants({
         corners,
+        size,
         error: !!error,
         disabled,
-        showLabel: hasLabel
+        showLabel: hasLabel,
+        showLeftIcon: hasLeftIcon
       }), className),
       onPress: () => {
         if (!disabled) {
@@ -88,7 +93,10 @@ export function TextInput({
         }
       },
       disabled: disabled,
-      children: [/*#__PURE__*/_jsxs(View, {
+      children: [leftIcon && /*#__PURE__*/_jsx(View, {
+        className: "mr-400",
+        children: leftIcon
+      }), /*#__PURE__*/_jsxs(View, {
         className: merge(textInputContentVariants({
           showLabel: hasLabel
         })),
@@ -102,11 +110,13 @@ export function TextInput({
           onChangeText: handleChangeText,
           editable: !disabled,
           placeholder: placeholder,
+          textAlignVertical: "center",
           className: merge(textInputFieldVariants({
             disabled,
             isValid,
             error: hasError,
-            showLabel: hasLabel
+            showLabel: hasLabel,
+            size
           }), inputClassName),
           accessibilityLabel: getAccessibilityLabel(),
           accessibilityState: {

package/dist/module/components/TextInput/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","View","TextInput","RNTextInput","Pressable","merge","Seal","SealVariantEnum","TextInputCornersEnum","textInputContainerVariants","textInputContentVariants","textInputFieldVariants","Typography","SizeEnum","Tooltip","TooltipVariantEnum","jsx","_jsx","jsxs","_jsxs","corners","MEDIUM","label","value","onChangeText","disabled","error","isValid","className","inputClassName","labelClassName","placeholder","accessibilityLabel","containerTestID","ref","tooltipClassName","tooltipPointerClassName","tooltipContainerClassName","rightIcon","rest","inputRef","hasLabel","hasError","shouldShowSeal","renderSeal","testID","sealVariant","ERROR","SUCCESS","children","variant","size","renderRightIcon","handleChangeText","text","getAccessibilityLabel","labelText","isOpenedByVariantError","message","pointerClassName","containerClassName","showLabel","onPress","current","focus","weight","editable","accessibilityState","instance","displayName"],"sourceRoot":"../../../../src","sources":["components/TextInput/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useRef","View","TextInput","RNTextInput","Pressable","merge","Seal","SealVariantEnum","TextInputCornersEnum","TextInputSizeEnum","textInputContainerVariants","textInputContentVariants","textInputFieldVariants","Typography","SizeEnum","Tooltip","TooltipVariantEnum","jsx","_jsx","jsxs","_jsxs","corners","MEDIUM","size","LARGE","label","value","onChangeText","disabled","error","isValid","className","inputClassName","labelClassName","placeholder","accessibilityLabel","containerTestID","ref","tooltipClassName","tooltipPointerClassName","tooltipContainerClassName","leftIcon","rightIcon","rest","inputRef","hasLabel","hasError","hasLeftIcon","shouldShowSeal","renderSeal","testID","sealVariant","ERROR","SUCCESS","children","variant","renderRightIcon","handleChangeText","text","getAccessibilityLabel","labelText","isOpenedByVariantError","message","pointerClassName","containerClassName","showLabel","showLeftIcon","onPress","current","focus","weight","editable","textAlignVertical","accessibilityState","instance","displayName"],"sourceRoot":"../../../../src","sources":["components/TextInput/index.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/index.js

@@ -12,6 +12,7 @@ export * from "./CheckboxInput/index.js";
 export * from "./CheckboxInput/enums/index.js";
 export * from "./OtpInput/index.js";
 export * from "./OtpInput/enums/index.js";
+export * from "./MessageInput/index.js";
 export * from "./HighlightedText/index.js";
 export * from "./LoadingDots/index.js";
 export * from "./LoadingDots/types.js";
@@ -37,4 +38,5 @@ export * from "./IconButton/enums.js";
 export * from "./PasswordInput/index.js";
 export * from "./PageIndicators/index.js";
 export * from "./ActionButton/index.js";
+export * from "./MessageInput/index.js";
 //# sourceMappingURL=index.js.map

package/dist/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,mBAAU;AAGxB,cAAc,uBAAc;AAI5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,iBAAc;AAE5B,cAAc,8BAAqB;AACnC,cAAc,8BAA2B;AAGzC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AAGrC,cAAc,qBAAY;AAC1B,cAAc,2BAAkB;AAGhC,cAAc,4BAAmB;AAGjC,cAAc,wBAAe;AAC7B,cAAc,wBAAqB;AAEnC,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AAGvB,cAAc,mBAAU;AACxB,cAAc,yBAAgB;AAG9B,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAG7B,cAAc,oBAAW;AAGzB,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,sBAAa;AAC3B,cAAc,sBAAmB;AAGjC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AAGpC,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,uBAAc;AAC5B,cAAc,uBAAoB;AAGlC,cAAc,0BAAiB;AAG/B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,mBAAU;AAGxB,cAAc,uBAAc;AAI5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,iBAAc;AAE5B,cAAc,8BAAqB;AACnC,cAAc,8BAA2B;AAGzC,cAAc,0BAAiB;AAC/B,cAAc,gCAAuB;AAGrC,cAAc,qBAAY;AAC1B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,4BAAmB;AAGjC,cAAc,wBAAe;AAC7B,cAAc,wBAAqB;AAEnC,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AAGvB,cAAc,mBAAU;AACxB,cAAc,yBAAgB;AAG9B,cAAc,uBAAc;AAG5B,cAAc,kBAAS;AACvB,cAAc,wBAAe;AAG7B,cAAc,oBAAW;AAGzB,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,sBAAa;AAC3B,cAAc,sBAAmB;AAGjC,cAAc,yBAAgB;AAC9B,cAAc,+BAAsB;AAGpC,cAAc,uBAAc;AAC5B,cAAc,6BAAoB;AAGlC,cAAc,uBAAc;AAC5B,cAAc,uBAAoB;AAGlC,cAAc,0BAAiB;AAG/B,cAAc,2BAAkB;AAGhC,cAAc,yBAAgB;AAG9B,cAAc,yBAAgB","ignoreList":[]}

package/dist/typescript/components/ChatBubble/assets/class-variants.d.ts

@@ -4,5 +4,11 @@ export declare const chatBubbleBoxVariants: (props?: ({
     hasEar?: boolean | null | undefined;
     messageType?: "initial" | "followUp" | null | undefined;
     fullWidth?: boolean | null | undefined;
+    origin?: "user" | "assistant" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chatBubbleTimeVariants: (props?: ({
+    origin?: "user" | "assistant" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const chatBubbleContainerVariants: (props?: ({
+    origin?: "user" | "assistant" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const chatBubbleTimeVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

@@ -1,8 +1,3 @@
 import React from "react";
-import type { SvgProps } from "react-native-svg";
-interface ChatBubbleEarProps extends SvgProps {
-    type: "fill" | "outline";
-    color?: string;
-}
+import { ChatBubbleEarProps } from "./types";
 export declare const ChatBubbleEar: React.FC<ChatBubbleEarProps>;
-export {};

package/dist/typescript/components/ChatBubble/components/ChatBubbleEar/types.d.ts

@@ -0,0 +1,6 @@
+import { SvgProps } from "react-native-svg";
+export interface ChatBubbleEarProps extends SvgProps {
+    type: "fill" | "outline";
+    color?: string;
+    mirrored?: boolean;
+}

package/dist/typescript/components/ChatBubble/contexts/ChatBubbleContext/types.d.ts

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

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

@@ -10,6 +10,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/dist/typescript/components/MessageInput/assets/class-variants.d.ts

@@ -0,0 +1,7 @@
+export declare const messageInputContainerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const messageInputContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const messageInputFieldVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,6 @@
+import type { MessageInputProps } from "./types";
+export declare function MessageInput({ value, onChangeText, disabled, className, inputClassName, placeholder, accessibilityLabel, containerTestID, ref, onSend, sendButtonDisabled, sendButtonAccessibilityLabel, multiline, ...rest }: MessageInputProps): import("react").JSX.Element;
+export declare namespace MessageInput {
+    var displayName: string;
+}
+export default MessageInput;

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

@@ -0,0 +1,13 @@
+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/dist/typescript/components/TextInput/assets/class-variants.d.ts

@@ -1,6 +1,8 @@
 export declare const textInputContainerVariants: (props?: ({
     corners?: "small" | "medium" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
     showLabel?: boolean | null | undefined;
+    showLeftIcon?: boolean | null | undefined;
     error?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -12,4 +14,5 @@ export declare const textInputFieldVariants: (props?: ({
     isValid?: boolean | null | undefined;
     error?: boolean | null | undefined;
     showLabel?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/typescript/components/TextInput/enums.d.ts

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

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

@@ -1,5 +1,5 @@
 import type { TextInputProps } from "./types";
-export declare function TextInput({ corners, label, value, onChangeText, disabled, error, isValid, className, inputClassName, labelClassName, placeholder, accessibilityLabel, containerTestID, ref, tooltipClassName, tooltipPointerClassName, tooltipContainerClassName, rightIcon, ...rest }: TextInputProps): import("react").JSX.Element;
+export declare function TextInput({ corners, size, label, value, onChangeText, disabled, error, isValid, className, inputClassName, labelClassName, placeholder, accessibilityLabel, containerTestID, ref, tooltipClassName, tooltipPointerClassName, tooltipContainerClassName, leftIcon, rightIcon, ...rest }: TextInputProps): import("react").JSX.Element;
 export declare namespace TextInput {
     var displayName: string;
 }

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

@@ -1,8 +1,10 @@
 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;
@@ -15,6 +17,7 @@ export interface TextInputProps extends Omit<RNTextInputProps, "value" | "onChan
     tooltipClassName?: string;
     tooltipPointerClassName?: string;
     tooltipContainerClassName?: string;
+    leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     onChangeText?: (text: string) => void;
     ref?: React.RefObject<RNTextInput | null>;

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

@@ -16,6 +16,8 @@ export type * from "./CheckboxInput/types";
 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";
 export * from "./LoadingDots";
@@ -56,3 +58,5 @@ export * from "./PageIndicators";
 export type * from "./PageIndicators/types";
 export * from "./ActionButton";
 export type * from "./ActionButton/types";
+export * from "./MessageInput";
+export type * from "./MessageInput/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.21",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -53,45 +53,54 @@
       ]
     ]
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.28.5",
     "@babel/preset-env": "^7.25.4",
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "@react-native-community/cli": "^15.1.3",
     "@react-native/babel-preset": "^0.77.0",
+    "@react-native/eslint-config": "^0.77.0",
+    "@react-native/eslint-plugin": "^0.83.0",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^24.1.0",
     "@types/react": "19.0.14",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "class-variance-authority": "^0.7.1",
     "cross-env": "^7.0.3",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^5.0.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lottie-react-native": "^7.2.2",
     "prettier-plugin-tailwindcss": "^0.5.14",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
     "react-native-builder-bob": "^0.40.13",
     "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",
-    "@kivid/tailwind-preset": "1.0.0-alpha.20",
-    "@kivid/icons": "1.0.0-alpha.20"
+    "@kivid/tailwind-preset": "1.0.0-alpha.21",
+    "@kivid/icons": "1.0.0-alpha.21"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "class-variance-authority": "^0.7.1",
     "lottie-react-native": "^7.2.4",
     "nativewind": "4.1.23",
-    "react-native-svg": "^15.12.0",
-    "react-native": "0.79.5",
     "react": "19.0.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.20",
-    "@kivid/icons": "1.0.0-alpha.20"
+    "react-native": "0.79.5",
+    "react-native-svg": "^15.12.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.21",
+    "@kivid/icons": "1.0.0-alpha.21"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -100,6 +109,8 @@
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json && bob build && node postbuild.js",
     "dev": "tsc -p tsconfig.build.json --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage"

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

@@ -1,77 +1,141 @@
 import { cva } from "class-variance-authority";
 
-export const chatBubbleBoxVariants = cva("gap-400 px-600 py-500 min-h-1000", {
-  variants: {
-    variant: {
-      check: "",
-      alert: "",
-      error: "",
-      custom: "",
-    },
-    colorState: {
-      fill: "",
-      outline: "border border-chia-400",
-    },
-    hasEar: {
-      true: "",
-      false: "",
-    },
-    messageType: {
-      initial: "",
-      followUp: "",
-    },
-    fullWidth: {
-      true: "flex-row w-full",
-      false: "flex-row",
-    },
-  },
-  compoundVariants: [
-    {
-      variant: "check",
-      colorState: "fill",
-      className: "bg-pear-500",
-    },
-    {
-      variant: "alert",
-      colorState: "fill",
-      className: "bg-tangerine-500",
-    },
-    {
-      variant: "error",
-      colorState: "fill",
-      className: "bg-blackberry-500",
+export const chatBubbleBoxVariants = cva(
+  "gap-400 px-600 py-500 min-h-1000 shrink min-w-0",
+  {
+    variants: {
+      variant: {
+        check: "",
+        alert: "",
+        error: "",
+        custom: "",
+      },
+      colorState: {
+        fill: "",
+        outline: "border border-chia-400",
+      },
+      hasEar: {
+        true: "",
+        false: "",
+      },
+      messageType: {
+        initial: "",
+        followUp: "",
+      },
+      fullWidth: {
+        true: "flex-row w-full",
+        false: "flex-row",
+      },
+      origin: {
+        assistant: "",
+        user: "",
+      },
     },
-    {
-      variant: "custom",
+    compoundVariants: [
+      {
+        variant: "check",
+        colorState: "fill",
+        className: "bg-pear-500",
+      },
+      {
+        variant: "alert",
+        colorState: "fill",
+        className: "bg-tangerine-500",
+      },
+      {
+        variant: "error",
+        colorState: "fill",
+        className: "bg-blackberry-500",
+      },
+      {
+        variant: "custom",
+        colorState: "fill",
+        className: "bg-chia-100",
+      },
+      {
+        variant: "custom",
+        colorState: "outline",
+        className: "bg-chia-100",
+      },
+      {
+        colorState: "outline",
+        className: "bg-chia-100",
+      },
+      {
+        hasEar: true,
+        origin: "assistant",
+        className: "rounded-700 rounded-bl-100",
+      },
+      {
+        hasEar: false,
+        origin: "assistant",
+        className: "rounded-700 rounded-bl-300",
+      },
+      {
+        hasEar: true,
+        origin: "user",
+        className: "rounded-700 rounded-br-100",
+      },
+      {
+        hasEar: false,
+        origin: "user",
+        className: "rounded-700 rounded-br-300",
+      },
+      {
+        messageType: "followUp",
+        origin: "assistant",
+        className: "rounded-tl-300",
+      },
+      {
+        messageType: "followUp",
+        origin: "user",
+        className: "rounded-tr-300",
+      },
+      {
+        origin: "user",
+        variant: "custom",
+        colorState: "fill",
+        className: "bg-grape-500",
+      },
+      {
+        origin: "user",
+        variant: "custom",
+        colorState: "outline",
+        className: "",
+      },
+    ],
+    defaultVariants: {
       colorState: "fill",
-      className: "bg-chia-100",
+      messageType: "initial",
+      fullWidth: false,
+      origin: "assistant",
     },
-    {
-      variant: "custom",
-      colorState: "outline",
-      className: "bg-chia-100",
-    },
-    {
-      colorState: "outline",
-      className: "bg-chia-100",
+  }
+);
+
+export const chatBubbleTimeVariants = cva(
+  "flex-row items-center gap-400 pt-400",
+  {
+    variants: {
+      origin: {
+        assistant: "pl-400",
+        user: "pr-400",
+      },
     },
-    {
-      hasEar: true,
-      className: "rounded-700 rounded-bl-100",
+    defaultVariants: {
+      origin: "assistant",
     },
-    {
-      hasEar: false,
-      className: "rounded-700 rounded-bl-300",
+  }
+);
+
+export const chatBubbleContainerVariants = cva("flex", {
+  variants: {
+    origin: {
+      assistant: "items-start",
+      user: "items-end",
     },
-    { messageType: "followUp", className: "rounded-tl-300" },
-  ],
+  },
   defaultVariants: {
-    colorState: "fill",
-    messageType: "initial",
-    fullWidth: false,
+    origin: "assistant",
   },
 });
-
-export const chatBubbleTimeVariants = cva(
-  "flex-row items-center gap-400 pt-400 pl-400"
-);

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

@@ -1,40 +1,51 @@
 import React from "react";
 import Svg, { Path } from "react-native-svg";
-import type { SvgProps } from "react-native-svg";
-
-interface ChatBubbleEarProps extends SvgProps {
-  type: "fill" | "outline";
-  color?: string;
-}
+import { ChatBubbleEarProps } from "./types";
 
 export const ChatBubbleEar: React.FC<ChatBubbleEarProps> = ({
   type = "fill",
   color = "#F2F7F7",
+  mirrored = false,
   ...props
 }) => {
-  if (type === "outline") {
-    return (
-      <Svg width={12} height={10} viewBox="0 0 12 10" fill="none" {...props}>
-        <Path
-          d="M11.5 0.5V9.5H7.75098C2.95557 9.34303 1.06326 5.41102 0.511719 3.91016C0.476256 3.80748 0.523736 3.72138 0.575195 3.69141L0.576172 3.69043C0.597192 3.67831 0.616459 3.67593 0.632812 3.67773C0.649308 3.67957 0.669032 3.68628 0.688477 3.7041C1.18665 4.17051 2.2435 4.93738 3.79004 4.9375C6.23009 4.9375 8.23446 2.96737 8.47559 0.5H11.5Z"
-          fill={color}
-          stroke="#DEE7E7"
-          strokeMiterlimit={10}
-        />
-        <Path
-          d="M8 3.15144V9H12V0H9C9 1.47424 8.5 2.46333 8 3.15144Z"
-          fill={color}
-        />
-      </Svg>
-    );
-  }
+  const transform = mirrored ? [{ scaleX: -1 }] : undefined;
 
-  return (
-    <Svg width={12} height={10} viewBox="0 0 12 10" fill="none" {...props}>
+  function renderSvgContent() {
+    if (type === "outline") {
+      return (
+        <>
+          <Path
+            d="M11.5 0.5V9.5H7.75098C2.95557 9.34303 1.06326 5.41102 0.511719 3.91016C0.476256 3.80748 0.523736 3.72138 0.575195 3.69141L0.576172 3.69043C0.597192 3.67831 0.616459 3.67593 0.632812 3.67773C0.649308 3.67957 0.669032 3.68628 0.688477 3.7041C1.18665 4.17051 2.2435 4.93738 3.79004 4.9375C6.23009 4.9375 8.23446 2.96737 8.47559 0.5H11.5Z"
+            fill={color}
+            stroke="#DEE7E7"
+            strokeMiterlimit={10}
+          />
+          <Path
+            d="M8 3.15144V9H12V0H9C9 1.47424 8.5 2.46333 8 3.15144Z"
+            fill={color}
+          />
+        </>
+      );
+    }
+
+    return (
       <Path
         d="M12 10V3.55405e-05L8 0C8 2.4436 6.09369 4.43749 3.79039 4.43749C2.41431 4.43749 1.47239 3.75438 1.02718 3.3367C0.832174 3.15714 0.552541 3.12591 0.324419 3.25863C0.0484661 3.41867 -0.0692741 3.76609 0.0411073 4.07837C0.604052 5.61245 2.60563 9.83215 7.73469 10H12Z"
         fill={color}
       />
+    );
+  }
+
+  return (
+    <Svg
+      width={12}
+      height={10}
+      viewBox="0 0 12 10"
+      fill="none"
+      style={{ transform }}
+      {...props}
+    >
+      {renderSvgContent()}
     </Svg>
   );
 };

package/src/components/ChatBubble/components/ChatBubbleEar/types.ts

@@ -0,0 +1,7 @@
+import { SvgProps } from "react-native-svg";
+
+export interface ChatBubbleEarProps extends SvgProps {
+  type: "fill" | "outline";
+  color?: string;
+  mirrored?: boolean;
+}