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

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;
+}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { merge } from "@kivid/tailwind-preset";
 import { Typography } from "../../../Typography";
 
@@ -16,10 +16,13 @@ export const ChatBubbleText: React.FC<ChatBubbleTextProps> = ({
   const { colorState, variant } = useChatBubbleContext();
 
   // Text color based on bubble colorState
-  const textColorClass =
-    colorState === "fill" && variant !== "custom"
-      ? "text-chia-200"
-      : "text-chia-800";
+  const textColorClass = useMemo(() => {
+    if (colorState === "fill") {
+      return "text-chia-200";
+    }
+
+    return "text-chia-800";
+  }, [colorState, variant]);
 
   return (
     <Typography

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

@@ -4,6 +4,7 @@ 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
@@ -13,9 +14,11 @@ export const ChatBubbleTime: React.FC<ChatBubbleTimeProps> = ({
   children,
   ...props
 }) => {
+  const { origin } = useChatBubbleContext();
+
   return (
     <View
-      className={chatBubbleTimeVariants()}
+      className={chatBubbleTimeVariants({ origin })}
       accessibilityLabel={`Message time: ${children}`}
       accessibilityRole="text"
     >

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

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

package/src/components/ChatBubble/index.tsx

@@ -7,8 +7,12 @@ import {
   ChatBubbleTime,
   ChatBubbleLoading,
 } from "./components";
+import { cva } from "class-variance-authority";
 
-import { chatBubbleBoxVariants } from "./assets/class-variants";
+import {
+  chatBubbleBoxVariants,
+  chatBubbleContainerVariants,
+} from "./assets/class-variants";
 import type { ChatBubbleProps } from "./types";
 import { elevationDown100 } from "../../styles/mixins/shadows";
 import { merge } from "@kivid/tailwind-preset";
@@ -25,6 +29,7 @@ export function ChatBubble(props: ChatBubbleProps) {
     children,
     time: timeFromProps,
     shouldDisplayTime = true,
+    origin = "assistant",
     messageType = "initial",
     chatBubbleBoxClassName,
     fullWidth = false,
@@ -37,19 +42,29 @@ export function ChatBubble(props: ChatBubbleProps) {
     return `${hours}:${minutes}`;
   }, [timeFromProps]);
 
-  const colorMap = {
-    check: "#3DCC78",
-    alert: "#FF8B59",
-    error: "#E65245",
-    custom: "#FAFCFC",
-  };
+  const colorMap = useMemo(
+    () => ({
+      check: "#3DCC78",
+      alert: "#FF8B59",
+      error: "#E65245",
+      custom: origin === "user" ? "#7A50D9" : "#FAFCFC",
+    }),
+    [origin]
+  );
+
+  const tailColor = useMemo(() => {
+    if (colorState === "outline") {
+      return "#FAFCFC";
+    }
 
-  const tailColor = colorState === "outline" ? "#FAFCFC" : colorMap[variant];
+    return colorMap[variant];
+  }, [colorMap, colorState, variant]);
 
   const contextInitialValue: ChatBubbleContextValue = {
     variant,
     colorState,
     messageType,
+    origin,
   };
 
   const accessibilityLabelMap = {
@@ -61,14 +76,58 @@ export function ChatBubble(props: ChatBubbleProps) {
 
   function renderChatBubbleEar() {
     if (hasEar) {
-      return <ChatBubbleEar color={tailColor} type={colorState} />;
+      return (
+        <ChatBubbleEar
+          color={tailColor}
+          type={colorState}
+          mirrored={origin === "user"}
+        />
+      );
     }
 
     return null;
   }
 
-  const bubbleWithEarOffset = hasEar ? "mr-[8.8px]" : "";
-  const bubbleRowClass = `relative flex-row items-end ${bubbleWithEarOffset}`;
+  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({
@@ -77,9 +136,10 @@ export function ChatBubble(props: ChatBubbleProps) {
       hasEar,
       messageType,
       fullWidth,
+      origin,
     }),
     chatBubbleBoxClassName
-  )
+  );
 
   return (
     <ChatBubbleContext.Provider value={contextInitialValue}>
@@ -87,19 +147,19 @@ export function ChatBubble(props: ChatBubbleProps) {
         accessibilityRole="text"
         accessibilityLabel={accessibilityLabelMap[variant]}
         accessible={true}
-        className={merge("flex", className)}
+        className={merge(chatBubbleContainerVariants({ origin }), 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={bubbleRowClass({ origin })}>
+          {hasEar && (
+            <View
+              className={bubbleEarContainerClass({ origin })}
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+            >
+              {renderChatBubbleEar()}
+            </View>
+          )}
 
           <View
             className={chatBubbleBoxStyle}

package/src/components/ChatBubble/types.ts

@@ -12,6 +12,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/src/components/DatePicker/assets/theme.ts

@@ -0,0 +1,92 @@
+export const defaultTheme = {
+  backgroundColor: "#FAFCFC",
+  calendarBackground: "#FAFCFC",
+  textSectionTitleColor: "#6B7280",
+  textSectionTitleDisabledColor: "#D1D5DB",
+  selectedDayBackgroundColor: "#EAE0FF",
+  selectedDayTextColor: "#1F2937",
+  todayTextColor: "#1F2937",
+  dayTextColor: "#1F2937",
+  textDisabledColor: "#D1D5DB",
+  dotColor: "#1F2937",
+  selectedDotColor: "#1F2937",
+  arrowColor: "#1F2937",
+  disabledArrowColor: "#D1D5DB",
+  monthTextColor: "#1F2937",
+  indicatorColor: "#1F2937",
+  textDayFontFamily: "System",
+  textMonthFontFamily: "System",
+  textDayHeaderFontFamily: "System",
+  textDayFontWeight: "500" as const,
+  textMonthFontWeight: "600" as const,
+  textDayHeaderFontWeight: "700" as const,
+  textDayFontSize: 16,
+  textMonthFontSize: 18,
+  textDayHeaderFontSize: 13.5,
+  "stylesheet.calendar.header": {
+    header: {
+      flexDirection: "row" as const,
+      justifyContent: "space-between" as const,
+      alignItems: "center" as const,
+      backgroundColor: "#FAFCFC",
+      borderBottomWidth: 1,
+      borderBottomColor: "#DEE7E7",
+    },
+    monthText: {
+      fontSize: 18,
+      fontWeight: "600" as const,
+      color: "#1F2937",
+    },
+    arrow: {
+      padding: 0,
+    },
+    arrowImage: {
+      tintColor: "#1F2937",
+    },
+    week: {
+      marginTop: 16,
+      marginBottom: 8,
+      flexDirection: "row" as const,
+      justifyContent: "space-around" as const,
+    },
+  },
+  "stylesheet.day.basic": {
+    base: {
+      width: 40,
+      height: 35,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+      borderWidth: 1,
+      borderColor: "#DEE7E7",
+      borderRadius: 8,
+      paddingTop: 6,
+      paddingBottom: 4,
+    },
+    text: {
+      fontSize: 16,
+      fontWeight: "500" as const,
+      color: "#1F2937",
+    },
+    selected: {
+      backgroundColor: "#EAE0FF",
+      borderWidth: 1,
+      borderColor: "#B9A0F2",
+    },
+    today: {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: "#DEE7E7",
+    },
+    todayText: {
+      color: "#1F2937",
+      fontWeight: "600" as const,
+    },
+    disabled: {
+      opacity: 0.3,
+      borderWidth: 0,
+    },
+    disabledText: {
+      color: "#D1D5DB",
+    },
+  },
+};