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

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

@@ -0,0 +1,141 @@
+import { cva } from "class-variance-authority";
+
+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: "",
+      },
+    },
+    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",
+      messageType: "initial",
+      fullWidth: false,
+      origin: "assistant",
+    },
+  }
+);
+
+export const chatBubbleTimeVariants = cva(
+  "flex-row items-center gap-400 pt-400",
+  {
+    variants: {
+      origin: {
+        assistant: "pl-400",
+        user: "pr-400",
+      },
+    },
+    defaultVariants: {
+      origin: "assistant",
+    },
+  }
+);
+
+export const chatBubbleContainerVariants = cva("flex", {
+  variants: {
+    origin: {
+      assistant: "items-start",
+      user: "items-end",
+    },
+  },
+  defaultVariants: {
+    origin: "assistant",
+  },
+});

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { ChatBubbleContentProps } from "./types";
+
+/**
+ * Content container for the main bubble content (seal + text)
+ */
+export const ChatBubbleContent: React.FC<ChatBubbleContentProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className={merge("flex-row items-start gap-2", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+ChatBubbleContent.displayName = "ChatBubble.Content";

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

@@ -0,0 +1,6 @@
+import { ViewProps } from "react-native";
+
+export interface ChatBubbleContentProps extends Omit<ViewProps, "children"> {
+  className?: string;
+  children: React.ReactNode;
+}

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

@@ -0,0 +1,51 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+import { ChatBubbleEarProps } from "./types";
+
+export const ChatBubbleEar: React.FC<ChatBubbleEarProps> = ({
+  type = "fill",
+  color = "#F2F7F7",
+  mirrored = false,
+  ...props
+}) => {
+  const transform = mirrored ? [{ scaleX: -1 }] : undefined;
+
+  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;
+}

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

@@ -0,0 +1,25 @@
+import { ViewProps } from "react-native";
+import { LoadingDots } from "../../../LoadingDots";
+import { LoadingDotsProps } from "../../../LoadingDots/types";
+
+export interface ChatBubbleLoadingProps extends ViewProps {
+  loadingDotsProps?: LoadingDotsProps;
+}
+
+export const ChatBubbleLoading = (props: ChatBubbleLoadingProps) => {
+  const { loadingDotsProps, className, ...rest } = props;
+
+  return (
+    <LoadingDots
+      lottieViewStyle={{
+        width: 32,
+        height: 32,
+        marginTop: -5,
+        marginBottom: -5,
+      }}
+      {...loadingDotsProps}
+    />
+  );
+};
+
+ChatBubbleLoading.displayName = "ChatBubbleLoading";

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../../../Seal";
+
+import type { ChatBubbleSealProps } from "./types";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { SizeEnum } from "../../../../enums";
+import { useChatBubbleContext } from "../../contexts";
+
+export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
+  className,
+  ...props
+}) => {
+  const { variant, colorState } = useChatBubbleContext();
+
+  if (!variant || variant === "custom") {
+    return null;
+  }
+
+  const sealVariantMap = {
+    check: SealVariantEnum.SUCCESS,
+    alert: SealVariantEnum.ALERT,
+    error: SealVariantEnum.ERROR,
+  };
+
+  return (
+    <Seal
+      variant={sealVariantMap[variant]}
+      size={SizeEnum.MEDIUM}
+      inverted={colorState === "fill"}
+      className={merge("ml-[-6px]", className)}
+      {...props}
+    />
+  );
+};
+
+ChatBubbleSeal.displayName = "ChatBubble.Seal";

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

@@ -0,0 +1,5 @@
+import { SealProps } from "../../../Seal/types";
+
+export interface ChatBubbleSealProps extends Omit<SealProps, "variant"> {
+  className?: string;
+}

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

@@ -0,0 +1,39 @@
+import React, { useMemo } from "react";
+import { merge } from "@kivid/tailwind-preset";
+import { Typography } from "../../../Typography";
+
+import type { ChatBubbleTextProps } from "./types";
+import { useChatBubbleContext } from "../../contexts";
+
+/**
+ * Typography component for bubble text content
+ */
+export const ChatBubbleText: React.FC<ChatBubbleTextProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { colorState, variant } = useChatBubbleContext();
+
+  // Text color based on bubble colorState
+  const textColorClass = useMemo(() => {
+    if (colorState === "fill") {
+      return "text-chia-200";
+    }
+
+    return "text-chia-800";
+  }, [colorState, variant]);
+
+  return (
+    <Typography
+      variant="body_large"
+      weight="600"
+      className={merge(textColorClass, "flex-shrink", className)}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};
+
+ChatBubbleText.displayName = "ChatBubble.Text";

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

@@ -0,0 +1,6 @@
+import { TypographyProps } from "../../../Typography/types";
+
+export interface ChatBubbleTextProps
+  extends Omit<TypographyProps, "variant" | "weight"> {
+  className?: string;
+}

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { View } from "react-native";
+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
+ */
+export const ChatBubbleTime: React.FC<ChatBubbleTimeProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { origin } = useChatBubbleContext();
+
+  return (
+    <View
+      className={chatBubbleTimeVariants({ origin })}
+      accessibilityLabel={`Message time: ${children}`}
+      accessibilityRole="text"
+    >
+      <Typography
+        variant="label_small"
+        weight="600"
+        className={merge("text-chia-600", className)}
+        {...props}
+      >
+        {children}
+      </Typography>
+    </View>
+  );
+};
+
+ChatBubbleTime.displayName = "ChatBubble.Time";

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

@@ -0,0 +1,6 @@
+import { TextProps } from "react-native";
+
+export interface ChatBubbleTimeProps extends Omit<TextProps, "children"> {
+  className?: string;
+  children: React.ReactNode;
+}

package/src/components/ChatBubble/components/index.ts

@@ -0,0 +1,6 @@
+export { ChatBubbleEar } from "./ChatBubbleEar";
+export { ChatBubbleContent } from "./ChatBubbleContent";
+export { ChatBubbleSeal } from "./ChatBubbleSeal";
+export { ChatBubbleText } from "./ChatBubbleText";
+export { ChatBubbleTime } from "./ChatBubbleTime";
+export { ChatBubbleLoading } from "./ChatBubbleLoading";

package/src/components/ChatBubble/contexts/ChatBubbleContext/index.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+import type { ChatBubbleContextValue } from "./types";
+
+export const ChatBubbleContext = createContext<ChatBubbleContextValue | null>(
+  null
+);
+
+export const useChatBubbleContext = () => {
+  const context = useContext(ChatBubbleContext);
+  if (!context) {
+    throw new Error(
+      "ChatBubble compound components must be used within a ChatBubble"
+    );
+  }
+  return context;
+};

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

@@ -0,0 +1,12 @@
+import {
+  ChatBubbleColorState,
+  ChatBubbleMessageType,
+  ChatBubbleType,
+} from "../../types";
+
+export interface ChatBubbleContextValue {
+  variant?: ChatBubbleType;
+  colorState: ChatBubbleColorState;
+  messageType: ChatBubbleMessageType;
+  origin: "user" | "assistant";
+}

package/src/components/ChatBubble/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./ChatBubbleContext";

package/src/components/ChatBubble/index.tsx

@@ -0,0 +1,185 @@
+import { View } from "react-native";
+import { ChatBubbleEar } from "./components";
+import {
+  ChatBubbleContent,
+  ChatBubbleSeal,
+  ChatBubbleText,
+  ChatBubbleTime,
+  ChatBubbleLoading,
+} from "./components";
+import { cva } from "class-variance-authority";
+
+import {
+  chatBubbleBoxVariants,
+  chatBubbleContainerVariants,
+} from "./assets/class-variants";
+import type { ChatBubbleProps } from "./types";
+import { elevationDown100 } from "../../styles/mixins/shadows";
+import { merge } from "@kivid/tailwind-preset";
+import { ChatBubbleContext } from "./contexts";
+import type { ChatBubbleContextValue } from "./contexts/ChatBubbleContext/types";
+import { useMemo } from "react";
+
+export function ChatBubble(props: ChatBubbleProps) {
+  const {
+    variant = "custom",
+    colorState = "outline",
+    hasEar = true,
+    className,
+    children,
+    time: timeFromProps,
+    shouldDisplayTime = true,
+    origin = "assistant",
+    messageType = "initial",
+    chatBubbleBoxClassName,
+    fullWidth = false,
+    ...restOfProps
+  } = props;
+
+  const time = useMemo(() => {
+    if (timeFromProps) return timeFromProps;
+    const [hours, minutes] = new Date().toLocaleTimeString().split(":");
+    return `${hours}:${minutes}`;
+  }, [timeFromProps]);
+
+  const colorMap = useMemo(
+    () => ({
+      check: "#3DCC78",
+      alert: "#FF8B59",
+      error: "#E65245",
+      custom: origin === "user" ? "#7A50D9" : "#FAFCFC",
+    }),
+    [origin]
+  );
+
+  const tailColor = useMemo(() => {
+    if (colorState === "outline") {
+      return "#FAFCFC";
+    }
+
+    return colorMap[variant];
+  }, [colorMap, colorState, variant]);
+
+  const contextInitialValue: ChatBubbleContextValue = {
+    variant,
+    colorState,
+    messageType,
+    origin,
+  };
+
+  const accessibilityLabelMap = {
+    check: "Success message",
+    alert: "Warning message",
+    error: "Error message",
+    custom: "Custom message",
+  };
+
+  function renderChatBubbleEar() {
+    if (hasEar) {
+      return (
+        <ChatBubbleEar
+          color={tailColor}
+          type={colorState}
+          mirrored={origin === "user"}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  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({
+      variant,
+      colorState,
+      hasEar,
+      messageType,
+      fullWidth,
+      origin,
+    }),
+    chatBubbleBoxClassName
+  );
+
+  return (
+    <ChatBubbleContext.Provider value={contextInitialValue}>
+      <View
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabelMap[variant]}
+        accessible={true}
+        className={merge(chatBubbleContainerVariants({ origin }), className)}
+        {...restOfProps}
+      >
+        <View className={bubbleRowClass({ origin })}>
+          {hasEar && (
+            <View
+              className={bubbleEarContainerClass({ origin })}
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+            >
+              {renderChatBubbleEar()}
+            </View>
+          )}
+
+          <View
+            className={chatBubbleBoxStyle}
+            style={{
+              boxShadow: elevationDown100,
+            }}
+            accessibilityRole="text"
+          >
+            {children}
+          </View>
+        </View>
+        {shouldDisplayTime && <ChatBubbleTime>{time}</ChatBubbleTime>}
+      </View>
+    </ChatBubbleContext.Provider>
+  );
+}
+
+ChatBubble.Content = ChatBubbleContent;
+ChatBubble.Seal = ChatBubbleSeal;
+ChatBubble.Text = ChatBubbleText;
+ChatBubble.Loading = ChatBubbleLoading;
+
+ChatBubble.displayName = "ChatBubble";

package/src/components/ChatBubble/types.ts

@@ -0,0 +1,19 @@
+import type { ViewProps } from "react-native";
+
+export type ChatBubbleType = "check" | "alert" | "error" | "custom";
+export type ChatBubbleColorState = "fill" | "outline";
+export type ChatBubbleMessageType = "initial" | "followUp";
+
+export interface ChatBubbleProps extends Omit<ViewProps, "children"> {
+  variant?: ChatBubbleType;
+  colorState?: ChatBubbleColorState;
+  hasEar?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  time?: string;
+  shouldDisplayTime?: boolean;
+  origin?: "user" | "assistant";
+  messageType?: ChatBubbleMessageType;
+  chatBubbleBoxClassName?: string;
+  fullWidth?: boolean;
+}

package/src/components/{InputCheckbox → CheckboxInput}/assets/class-variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 import { CheckboxVariantEnum } from "../enums";
 
-export const inputCheckboxVariants = cva(
+export const checkboxInputVariants = cva(
   "flex items-center justify-center w-[20px] h-[20px] rounded-500 border transition-all duration-200",
   {
     variants: {