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

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

@@ -0,0 +1,75 @@
+import { cva } from "class-variance-authority";
+
+export const chatBubbleBoxVariants = cva(
+  "flex-row gap-400 px-600 py-500 min-h-1000",
+  {
+    variants: {
+      contentType: {
+        check: "",
+        alert: "",
+        error: "",
+        custom: "",
+      },
+      colorState: {
+        fill: "",
+        outline: "border border-chia-400",
+      },
+      hasEar: {
+        true: "",
+        false: "",
+      },
+      messageType: {
+        initial: "",
+        followUp: "",
+      },
+    },
+    compoundVariants: [
+      {
+        contentType: "check",
+        colorState: "fill",
+        className: "bg-pear-500",
+      },
+      {
+        contentType: "alert",
+        colorState: "fill",
+        className: "bg-tangerine-500",
+      },
+      {
+        contentType: "error",
+        colorState: "fill",
+        className: "bg-blackberry-500",
+      },
+      {
+        contentType: "custom",
+        colorState: "fill",
+        className: "bg-chia-100",
+      },
+      {
+        contentType: "custom",
+        colorState: "outline",
+        className: "bg-chia-100",
+      },
+      {
+        colorState: "outline",
+        className: "bg-chia-100",
+      },
+      {
+        hasEar: true,
+        className: "rounded-700 rounded-bl-100",
+      },
+      {
+        hasEar: false,
+        className: "rounded-700 rounded-bl-300",
+      },
+      { messageType: "followUp", className: "rounded-tl-300" },
+    ],
+    defaultVariants: {
+      colorState: "fill",
+      messageType: "initial",
+    },
+  }
+);
+
+export const chatBubbleTimeVariants = cva(
+  "flex-row items-center gap-400 pt-400 pl-400"
+);

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-center 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,40 @@
+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;
+}
+
+export const ChatBubbleEar: React.FC<ChatBubbleEarProps> = ({
+  type = "fill",
+  color = "#F2F7F7",
+  ...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>
+    );
+  }
+
+  return (
+    <Svg width={12} height={10} viewBox="0 0 12 10" fill="none" {...props}>
+      <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}
+      />
+    </Svg>
+  );
+};

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,36 @@
+import React from "react";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../../../Seal";
+import { useChatBubbleContext } from "../../context";
+import type { ChatBubbleSealProps } from "./types";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { SizeEnum } from "../../../../enums";
+
+export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
+  className,
+  ...props
+}) => {
+  const { contentType, colorState } = useChatBubbleContext();
+
+  if (!contentType || contentType === "custom") {
+    return null;
+  }
+
+  const sealVariantMap = {
+    check: SealVariantEnum.SUCCESS,
+    alert: SealVariantEnum.ALERT,
+    error: SealVariantEnum.ERROR,
+  };
+
+  return (
+    <Seal
+      variant={sealVariantMap[contentType]}
+      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 "../../..";
+
+export interface ChatBubbleSealProps extends Omit<SealProps, "variant"> {
+  className?: string;
+}

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

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

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

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

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

@@ -0,0 +1,34 @@
+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";
+
+/**
+ * Time component for displaying message timestamp
+ */
+export const ChatBubbleTime: React.FC<ChatBubbleTimeProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className={chatBubbleTimeVariants()}
+      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/context.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext } from "react";
+import type {
+  ChatBubbleType,
+  ChatBubbleColorState,
+  ChatBubbleMessageType,
+} from "./types";
+
+export interface ChatBubbleContextValue {
+  contentType?: ChatBubbleType;
+  colorState: ChatBubbleColorState;
+  messageType: ChatBubbleMessageType;
+}
+
+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/index.tsx

@@ -0,0 +1,112 @@
+import { View } from "react-native";
+import { ChatBubbleEar } from "./components";
+import {
+  ChatBubbleContent,
+  ChatBubbleSeal,
+  ChatBubbleText,
+  ChatBubbleTime,
+  ChatBubbleLoading,
+} from "./components";
+import { ChatBubbleContext } from "./context";
+import { chatBubbleBoxVariants } from "./assets/class-variants";
+import type { ChatBubbleProps, ChatBubbleContextValue } from "./types";
+import { elevationDown100 } from "../../styles/mixins/shadows";
+import { merge } from "@kivid/tailwind-preset";
+
+export function ChatBubble(props: ChatBubbleProps) {
+  const {
+    contentType = "custom",
+    colorState = "outline",
+    hasEar = false,
+    className,
+    children,
+    time: timeFromProps,
+    messageType = "initial",
+    ...restOfProps
+  } = props;
+
+  const [hours, minutes] = new Date().toLocaleTimeString().split(":");
+  const time = timeFromProps ? timeFromProps : `${hours}:${minutes}`;
+
+  const colorMap = {
+    check: "#3DCC78",
+    alert: "#FF8B59",
+    error: "#E65245",
+    custom: "#FAFCFC",
+  };
+
+  const tailColor =
+    colorState === "outline" ? "#FAFCFC" : colorMap[contentType];
+
+  const contextInitialValue: ChatBubbleContextValue = {
+    contentType,
+    colorState,
+    messageType,
+  };
+
+  const accessibilityLabelMap = {
+    check: "Success message",
+    alert: "Warning message",
+    error: "Error message",
+    custom: "Custom message",
+  };
+
+  function renderChatBubbleEar() {
+    if (hasEar) {
+      return <ChatBubbleEar color={tailColor} type={colorState} />;
+    }
+
+    return null;
+  }
+
+  const bubbleWithEarOffset = hasEar ? "mr-[8.8px]" : "";
+
+  return (
+    <ChatBubbleContext.Provider value={contextInitialValue}>
+      <View
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabelMap[contentType]}
+        accessible={true}
+        className={merge("flex", className)}
+        {...restOfProps}
+      >
+        <View className={`relative flex-row items-end ${bubbleWithEarOffset}`}>
+          <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={merge(
+              chatBubbleBoxVariants({
+                contentType,
+                colorState,
+                hasEar,
+                messageType,
+              })
+            )}
+            style={{
+              boxShadow: elevationDown100,
+            }}
+            accessibilityRole="text"
+          >
+            {children}
+          </View>
+        </View>
+        <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,17 @@
+import type { ViewProps } from "react-native";
+
+export type { ChatBubbleContextValue } from "./context";
+
+export type ChatBubbleType = "check" | "alert" | "error" | "custom";
+export type ChatBubbleColorState = "fill" | "outline";
+export type ChatBubbleMessageType = "initial" | "followUp";
+
+export interface ChatBubbleProps extends Omit<ViewProps, "children"> {
+  contentType?: ChatBubbleType;
+  colorState?: ChatBubbleColorState;
+  hasEar?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  time?: string;
+  messageType?: ChatBubbleMessageType;
+}

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: {

package/src/components/{InputCheckbox → CheckboxInput}/index.tsx

@@ -1,20 +1,21 @@
-import type { InputCheckboxProps } from "./types";
+import type { CheckboxInputProps } from "./types";
 import { CheckboxVariantEnum, SelectVariantEnum } from "./enums";
-import { inputCheckboxVariants } from "./assets/class-variants";
+import { checkboxInputVariants } from "./assets/class-variants";
 import { TouchableOpacity, View } from "react-native";
 import { CheckIcon, IndeterminateIcon } from "./icons";
 
-export function InputCheckbox(props: InputCheckboxProps) {
+export function CheckboxInput(props: CheckboxInputProps) {
   const {
     isChecked = false,
     selectType = SelectVariantEnum.SELECTED,
     variant = CheckboxVariantEnum.JAVA,
     onChange,
-    disabled = false
+    disabled = false,
+    className,
   } = props;
 
   function handleChange() {
-    onChange(!isChecked);
+    onChange?.(!isChecked);
   }
 
   function renderIcon() {
@@ -37,12 +38,13 @@ export function InputCheckbox(props: InputCheckboxProps) {
         accessible
         accessibilityRole="checkbox"
         accessibilityState={{ checked: isChecked }}
+        className={className}
       >
         <View
-          className={inputCheckboxVariants({
+          className={checkboxInputVariants({
             variant,
             disabled,
-            isChecked
+            isChecked,
           })}
         >
           {renderIcon()}
@@ -50,4 +52,4 @@ export function InputCheckbox(props: InputCheckboxProps) {
       </TouchableOpacity>
     </View>
   );
-}
+}

package/src/components/{InputCheckbox → CheckboxInput}/types.ts

@@ -4,10 +4,11 @@ export type CheckboxVariant = CheckboxVariantEnum;
 
 export type CheckboxSelectType = SelectVariantEnum;
 
-export interface InputCheckboxProps {
+export interface CheckboxInputProps {
   isChecked?: boolean;
   selectType?: CheckboxSelectType;
   variant?: CheckboxVariant;
   disabled?: boolean;
-  onChange(value: boolean): void;
+  className?: string;
+  onChange?(value: boolean): void;
 }

package/src/components/Chip/enums/index.ts

@@ -1,2 +1 @@
 export * from "./chip-variant";
-export * from "./chip-size";

package/src/components/Chip/index.tsx

@@ -5,17 +5,19 @@ import { Seal } from "../Seal";
 import { View } from "react-native";
 import { SealVariantEnum } from "../Seal/enums";
 import { Typography } from "../Typography";
+import { SizeEnum } from "../../enums";
 
 export function Chip(props: ChipProps) {
   const {
     label,
     className,
     sealVariant = SealVariantEnum.ADD,
-    size = "medium",
+    size = SizeEnum.MEDIUM,
     variant = "outline",
   } = props;
 
-  const typographyVariant = size === "medium" ? "label_small" : "label_medium";
+  const typographyVariant =
+    size === SizeEnum.MEDIUM ? "label_small" : "label_medium";
 
   const textColorClass =
     variant === "filled" ? "text-chia-200" : "text-chia-900";
@@ -27,7 +29,7 @@ export function Chip(props: ChipProps) {
       <Seal
         variant={sealVariant}
         inverted={variant === "filled"}
-        size="small"
+        size={SizeEnum.SMALL}
       />
       <Typography
         variant={typographyVariant}

package/src/components/Chip/types.ts

@@ -1,7 +1,8 @@
 import type { SealVariant } from "../Seal/types";
-import { ChipSizeEnum, ChipVariantEnum } from "./enums";
+import { ChipVariantEnum } from "./enums";
+import { SizeEnum } from "../../enums";
 
-export type ChipSize = ChipSizeEnum;
+export type ChipSize = SizeEnum.MEDIUM | SizeEnum.LARGE;
 export type ChipVariant = ChipVariantEnum;
 
 export interface ChipProps {

package/src/components/InformationStatus/index.tsx

@@ -9,14 +9,21 @@ import { InformationStatusOptionsEnum } from "./enums";
 import { cva } from "class-variance-authority";
 import { merge } from "@kivid/tailwind-preset";
 import { View } from "react-native";
+import { SizeEnum } from "../../enums";
 
 export function InformationStatus(props: InformationStatusProps) {
-  const { status, size = "medium", square = false, className, style } = props;
+  const {
+    status,
+    size = SizeEnum.MEDIUM,
+    square = false,
+    className,
+    style,
+  } = props;
 
   const mappedIconSize = {
-    small: 16,
-    medium: 24,
-    large: 32,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
   }[size];
 
   const iconMap = {
@@ -45,9 +52,9 @@ export function InformationStatus(props: InformationStatusProps) {
           warning: "bg-tangerine-500",
         },
         size: {
-          small: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
-          medium: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
-          large: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
+          [SizeEnum.SMALL]: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
+          [SizeEnum.MEDIUM]: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
+          [SizeEnum.LARGE]: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
         },
         square: {
           true: "rounded-700",

package/src/components/InformationStatus/types.ts

@@ -1,10 +1,16 @@
 import { StyleProp, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { InformationStatusOptionsEnum } from "./enums";
+import { SizeEnum } from "../../enums";
+
+export type InformationStatusSize =
+  | SizeEnum.SMALL
+  | SizeEnum.MEDIUM
+  | SizeEnum.LARGE;
 
 export interface InformationStatusProps {
   status: InformationStatusOptionsEnum;
-  size?: "small" | "medium" | "large";
+  size?: InformationStatusSize;
   square?: boolean;
   className?: string;
   style?: StyleProp<ViewStyle>;