@kivid/native-components 1.0.0-alpha.1 → 1.0.0-alpha.11

package/src/components/Button/index.tsx

@@ -1,20 +1,29 @@
 import React from "react";
-import { Text, Pressable, Animated, GestureResponderEvent } from "react-native";
-import { merge } from "@butterfly/tailwind-preset";
+import { Pressable, Animated, GestureResponderEvent } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
 import { LoadingDots } from "../LoadingDots";
 import { LoadingDotsVariant } from "../LoadingDots/types";
-import { ButtonProps, ButtonVariant } from "./types";
+import type {
+  ButtonCorners,
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+} from "./types";
+import { Typography } from "../Typography";
 import {
   textVariants,
   buttonVariants,
   selectedVariants,
 } from "./assets/class-variants";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export function Button(props: ButtonProps) {
   const {
     variant = "grape",
-    size = "large",
-    corners = "medium",
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
     fullWidth = false,
     loading = false,
     selected = false,
@@ -43,12 +52,20 @@ export function Button(props: ButtonProps) {
     ghost: "grape",
   };
 
+  const typographyVariantMap = {
+    small: "label_small",
+    medium: "label_medium",
+    large: "label_large",
+  } as const;
+
+  const typographyVariant = typographyVariantMap[size ?? SizeEnum.MEDIUM];
+
   function renderContent() {
     const textStyle = merge(
       textVariants({
         variant,
-        size,
         selected: selected && (variant === "outline" || variant === "ghost"),
+        disabled,
       })
     );
 
@@ -63,9 +80,14 @@ export function Button(props: ButtonProps) {
     }
 
     return (
-      <Text className={textStyle} numberOfLines={1}>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={textStyle}
+        numberOfLines={1}
+      >
         {children}
-      </Text>
+      </Typography>
     );
   }
 
@@ -101,37 +123,34 @@ export function Button(props: ButtonProps) {
   };
 
   return (
-    <Animated.View
+    <AnimatedPressable
+      ref={ref}
+      disabled={disabled}
+      className={buttonStyle}
       style={{
         opacity: animatedValue,
       }}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={
+        accessibilityLabel ||
+        (typeof children === "string" ? children : "Button")
+      }
+      accessibilityState={{
+        disabled: disabled,
+        selected: selected,
+        busy: loading,
+      }}
+      pointerEvents={loading || disabled ? "none" : "auto"}
+      {...rest}
     >
-      <Pressable
-        ref={ref}
-        className={buttonStyle}
-        disabled={disabled}
-        onPress={onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        accessibilityRole="button"
-        accessibilityLabel={
-          accessibilityLabel ||
-          (typeof children === "string" ? children : "Button")
-        }
-        accessibilityState={{
-          disabled: disabled,
-          selected: selected,
-          busy: loading,
-        }}
-        pointerEvents={loading || disabled ? "none" : "auto"}
-        {...rest}
-      >
-        {renderContent()}
-      </Pressable>
-    </Animated.View>
+      {renderContent()}
+    </AnimatedPressable>
   );
 }
 
 Button.displayName = "Button";
 
-export default Button;
+export { ButtonProps, ButtonVariant, ButtonSize, ButtonCorners };

package/src/components/Button/types.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import { buttonVariants } from "./assets/class-variants";
 import { PressableProps, View } from "react-native";
+import { SizeEnum, CornersEnum } from "../../enums";
 
 export type ButtonVariant =
   | "grape"
@@ -13,9 +14,9 @@ export type ButtonVariant =
   | "glass"
   | "ghost";
 
-export type ButtonSize = "small" | "medium" | "large";
+export type ButtonSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
 
-export type ButtonCorners = "small" | "medium";
+export type ButtonCorners = CornersEnum.SMALL | CornersEnum.MEDIUM;
 
 export interface ButtonProps
   extends VariantProps<typeof buttonVariants>,

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: {
+      variant: {
+        check: "",
+        alert: "",
+        error: "",
+        custom: "",
+      },
+      colorState: {
+        fill: "",
+        outline: "border border-chia-400",
+      },
+      hasEar: {
+        true: "",
+        false: "",
+      },
+      messageType: {
+        initial: "",
+        followUp: "",
+      },
+    },
+    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,
+        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,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, 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,122 @@
+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,
+    ...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 chatBubbleBoxStyle = merge(
+    chatBubbleBoxVariants({
+      variant,
+      colorState,
+      hasEar,
+      messageType,
+    }),
+    chatBubbleBoxClassName
+  )
+
+  return (
+    <ChatBubbleContext.Provider value={contextInitialValue}>
+      <View
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabelMap[variant]}
+        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={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,17 @@
+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;
+}

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