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

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,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,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,36 @@
+import React 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 =
+    colorState === "fill" && variant !== "custom"
+      ? "text-chia-200"
+      : "text-chia-800";
+
+  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,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/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,11 @@
+import {
+  ChatBubbleColorState,
+  ChatBubbleMessageType,
+  ChatBubbleType,
+} from "../../types";
+
+export interface ChatBubbleContextValue {
+  variant?: ChatBubbleType;
+  colorState: ChatBubbleColorState;
+  messageType: ChatBubbleMessageType;
+}

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

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

package/src/components/ChatBubble/index.tsx

@@ -0,0 +1,125 @@
+import { View } from "react-native";
+import { ChatBubbleEar } from "./components";
+import {
+  ChatBubbleContent,
+  ChatBubbleSeal,
+  ChatBubbleText,
+  ChatBubbleTime,
+  ChatBubbleLoading,
+} from "./components";
+
+import { chatBubbleBoxVariants } 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,
+    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 = {
+    check: "#3DCC78",
+    alert: "#FF8B59",
+    error: "#E65245",
+    custom: "#FAFCFC",
+  };
+
+  const tailColor = colorState === "outline" ? "#FAFCFC" : colorMap[variant];
+
+  const contextInitialValue: ChatBubbleContextValue = {
+    variant,
+    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]" : "";
+  const bubbleRowClass = `relative flex-row items-end ${bubbleWithEarOffset}`;
+
+  const chatBubbleBoxStyle = merge(
+    chatBubbleBoxVariants({
+      variant,
+      colorState,
+      hasEar,
+      messageType,
+      fullWidth,
+    }),
+    chatBubbleBoxClassName
+  )
+
+  return (
+    <ChatBubbleContext.Provider value={contextInitialValue}>
+      <View
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabelMap[variant]}
+        accessible={true}
+        className={merge("flex", 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={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,18 @@
+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;
+  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: {

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/assets/class-variants.ts

@@ -5,8 +5,8 @@ export const chipVariants = cva(
   {
     variants: {
       size: {
-        medium: "min-w-[64px] max-h-700 h-full p-300 gap-300 rounded-500",
-        large: "min-w-[86px] max-h-800 h-full p-400 gap-400 rounded-600",
+        medium: "min-w-[64px] h-700 px-300 gap-300 rounded-500",
+        large: "min-w-[86px] h-800 px-400 gap-400 rounded-600",
       },
       variant: {
         filled: "",

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

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

package/src/components/Chip/index.tsx

@@ -1,24 +1,26 @@
 import { merge } from "@kivid/tailwind-preset";
-import type { ChipProps } from "./types";
+import type { ChipProps, ChipSize, ChipVariant } from "./types";
 import { chipVariants } from "./assets/class-variants";
 import { Seal } from "../Seal";
-import { Text, View } from "react-native";
+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 labelStyles = merge(
-    "mx-auto",
-    size === "medium" ? "text-label_small_700" : "text-label_medium_700",
-    variant === "filled" ? "text-chia-200" : "text-chia-900"
-  );
+  const typographyVariant =
+    size === SizeEnum.MEDIUM ? "label_small" : "label_medium";
+
+  const textColorClass =
+    variant === "filled" ? "text-chia-200" : "text-chia-900";
 
   return (
     <View
@@ -27,9 +29,17 @@ export function Chip(props: ChipProps) {
       <Seal
         variant={sealVariant}
         inverted={variant === "filled"}
-        size="small"
+        size={SizeEnum.SMALL}
       />
-      <Text className={labelStyles}>{label}</Text>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={merge("mx-auto", textColorClass)}
+      >
+        {label}
+      </Typography>
     </View>
   );
 }
+
+export { ChipProps, ChipSize, ChipVariant };

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/HighlightedText/index.tsx

@@ -1,38 +1,58 @@
 import type { HighlightedTextProps } from "./types";
-import { merge } from "@kivid/tailwind-preset";
-import { Text } from "react-native";
+import { Typography } from "../Typography";
 
 export function HighlightedText(props: HighlightedTextProps) {
   const {
     text,
     highlightText,
     className,
-    highlightTextClassName,
     reverse,
-    ref,
+    highlightedTextProps = {},
+    variant = "label_medium",
+    weight = "400",
     ...rest
   } = props;
 
-  const mergeClassName = merge("text-label_medium_300", className);
-  const mergeHighlightClassName = merge(
-    "text-label_medium_700",
-    highlightTextClassName
-  );
-
   if (reverse) {
     return (
-      <Text ref={ref} className={mergeClassName} {...rest}>
-        <Text className={mergeHighlightClassName}>{highlightText}</Text> {text}
-      </Text>
+      <Typography
+        variant={variant}
+        weight={weight}
+        className={className}
+        {...rest}
+      >
+        <Typography
+          variant={highlightedTextProps.variant}
+          weight={highlightedTextProps.weight}
+          {...highlightedTextProps}
+        >
+          {highlightText}
+        </Typography>{" "}
+        {text}
+      </Typography>
     );
   }
 
   return (
-    <Text ref={ref} className={mergeClassName} {...rest}>
-      {text} <Text className={mergeHighlightClassName}>{highlightText}</Text>
-    </Text>
+    <Typography
+      variant={variant}
+      weight={weight}
+      className={className}
+      {...rest}
+    >
+      {text}{" "}
+      <Typography
+        variant={highlightedTextProps.variant || "label_medium"}
+        weight={highlightedTextProps.weight || "700"}
+        {...highlightedTextProps}
+      >
+        {highlightText}
+      </Typography>
+    </Typography>
   );
 }
 
 HighlightedText.displayName = "HighlightedText";
 export default HighlightedText;
+
+export { HighlightedTextProps };

package/src/components/HighlightedText/types.ts

@@ -1,10 +1,16 @@
-import { Text, TextProps } from "react-native";
+import { TextProps } from "react-native";
+import type { TypographyProps } from "../Typography/types";
 
 export interface HighlightedTextProps extends TextProps {
   text: string;
   highlightText?: string;
-  highlightTextClassName?: string;
   className?: string;
-  ref?: React.RefObject<Text | null>;
   reverse?: boolean;
+  variant?: TypographyProps["variant"];
+  weight?: TypographyProps["weight"];
+  highlightedTextProps?: {
+    className?: string;
+    variant?: TypographyProps["variant"];
+    weight?: TypographyProps["weight"];
+  };
 }