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

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

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

@@ -0,0 +1,87 @@
+import { cva } from "class-variance-authority";
+import { ListButtonVariantEnum } from "../enums";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+const buttonVariants = cva(
+  [
+    "flex flex-row items-center justify-center max-w-fit",
+    "font-bold",
+    "disabled:cursor-not-allowed",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        [ListButtonVariantEnum.GRAPE]: [
+          "bg-grape-500",
+          "disabled:bg-grape-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.JAVA]: [
+          "bg-java-500",
+          "disabled:bg-java-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.PEAR]: [
+          "bg-pear-500",
+          "disabled:bg-pear-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.TANGERINE]: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.BLACKBERRY]: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.CHIA]: [
+          "bg-chia-700",
+          "disabled:bg-chia-700 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.OUTLINE]: [
+          "bg-chia-100 text-chia-900 border border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
+        ],
+      },
+      size: {
+        [SizeEnum.SMALL]: "py-400 pr-400 pl-600",
+        [SizeEnum.MEDIUM]: "py-500 pr-400 pl-600",
+        [SizeEnum.LARGE]: "py-600 pr-400 pl-600",
+      },
+      corners: {
+        [CornersEnum.SMALL]: "rounded-500",
+        [CornersEnum.MEDIUM]: "rounded-700",
+      },
+    },
+    defaultVariants: {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+    },
+  }
+);
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      grape: "text-chia-100",
+      java: "text-chia-100",
+      pear: "text-chia-100",
+      tangerine: "text-chia-100",
+      blackberry: "text-chia-100",
+      chia: "text-chia-100",
+      outline: "text-chia-900",
+      glass: "text-chia-900",
+      ghost: "text-chia-900",
+    },
+  },
+});
+
+const iconButtonVariants = cva("flex flex-row items-center ", {
+  variants: {
+    showChevronIcon: {
+      true: "flex-1",
+      false: "",
+    },
+  },
+});
+
+export { buttonVariants, textVariants, iconButtonVariants };

package/src/components/ListButton/enums/icon-color.ts

@@ -0,0 +1,10 @@
+export enum ListButtonIconColorEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  PITAYA = "pitaya",
+  BLACKBERRY = "blackberry",
+  CHIA = "chia",
+  GHOST = "ghost",
+}

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

@@ -0,0 +1,2 @@
+export * from "./variant";
+export * from "./icon-color";

package/src/components/ListButton/enums/variant.ts

@@ -0,0 +1,9 @@
+export enum ListButtonVariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  BLACKBERRY = "blackberry",
+  CHIA = "chia",
+  OUTLINE = "outline",
+}

package/src/components/ListButton/index.tsx

@@ -0,0 +1,124 @@
+import { Animated, GestureResponderEvent, Pressable, View } from "react-native";
+import { Typography } from "../Typography";
+import { ListButtonIconColorEnum, ListButtonVariantEnum } from "./enums";
+import { SizeEnum, CornersEnum } from "../../enums";
+import type { ListButtonProps } from "./types";
+import { ChatbubbleEllipses, ChevronRight } from "@kivid/icons/native";
+import {
+  buttonVariants,
+  iconButtonVariants,
+  textVariants,
+} from "./assets/class-variants";
+import { merge } from "@kivid/tailwind-preset";
+import { useRef } from "react";
+
+export function ListButton(props: ListButtonProps) {
+  const {
+    icon,
+    iconColor = ListButtonIconColorEnum.GHOST,
+    children,
+    showChevronIcon = true,
+    variant = ListButtonVariantEnum.GRAPE,
+    size = SizeEnum.SMALL,
+    corners = CornersEnum.SMALL,
+    disabled = false,
+    className,
+    accessibilityLabel,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const typographyVariantMap = {
+    small: "label_small",
+    medium: "label_medium",
+    large: "label_large",
+  } as const;
+
+  const typographyVariant = typographyVariantMap[size];
+
+  const chevronIconColor =
+    variant === ListButtonVariantEnum.OUTLINE ? "#393E3E" : "#FAFCFC";
+  const textStyle = textVariants({ variant });
+
+  const animatedValue = useRef(new Animated.Value(1)).current;
+
+  const mappedIconColor = {
+    [ListButtonIconColorEnum.GHOST]: "#FAFCFC",
+    [ListButtonIconColorEnum.GRAPE]: "#7A50D9",
+    [ListButtonIconColorEnum.JAVA]: "#43C1E0",
+    [ListButtonIconColorEnum.PITAYA]: "#E64595",
+    [ListButtonIconColorEnum.PEAR]: "#3DCC78",
+    [ListButtonIconColorEnum.TANGERINE]: "#FF8B59",
+    [ListButtonIconColorEnum.BLACKBERRY]: "#E65245",
+    [ListButtonIconColorEnum.CHIA]: "#393E3E",
+  }[iconColor];
+
+  const handlePressIn = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 0.7,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressOut?.(event);
+  };
+
+  return (
+    <Animated.View
+      style={{
+        opacity: animatedValue,
+      }}
+    >
+      <Pressable
+        className={merge(
+          buttonVariants({
+            variant,
+            size,
+            corners,
+          }),
+          className
+        )}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{
+          disabled: disabled,
+        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...rest}
+      >
+        <View className={iconButtonVariants({ showChevronIcon })}>
+          <View className="mr-400 flex items-center">
+            {icon ?? <ChatbubbleEllipses size={24} color={mappedIconColor} />}
+          </View>
+
+          <Typography
+            variant={typographyVariant}
+            weight="700"
+            className={merge(textStyle, "truncate mr-700")}
+          >
+            {children}
+          </Typography>
+        </View>
+
+        {showChevronIcon && (
+          <View className="flex items-center">
+            <ChevronRight color={chevronIconColor} />
+          </View>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}