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

package/src/components/ListButton/index.tsx

@@ -1,12 +1,11 @@
 import { Animated, GestureResponderEvent, Pressable, View } from "react-native";
 import { Typography } from "../Typography";
-import { ListButtonIconColorEnum, ListButtonVariantEnum } from "./enums";
+import { ListButtonVariantEnum } from "./enums";
 import { SizeEnum, CornersEnum } from "../../enums";
 import type { ListButtonProps } from "./types";
-import { ChatbubbleEllipses, ChevronRight } from "@kivid/icons/native";
+import { ChevronRight } from "@kivid/icons/native";
 import {
   buttonVariants,
-  iconButtonVariants,
   textVariants,
 } from "./assets/class-variants";
 import { merge } from "@kivid/tailwind-preset";
@@ -14,15 +13,16 @@ import { useRef } from "react";
 
 export function ListButton(props: ListButtonProps) {
   const {
-    icon,
-    iconColor = ListButtonIconColorEnum.GHOST,
+    iconLeft,
+    iconRight,
     children,
-    showChevronIcon = true,
     variant = ListButtonVariantEnum.GRAPE,
     size = SizeEnum.SMALL,
     corners = CornersEnum.SMALL,
     disabled = false,
     className,
+    iconLeftContainerClassName,
+    iconRightContainerClassName,
     accessibilityLabel,
     onPressIn,
     onPressOut,
@@ -43,17 +43,6 @@ export function ListButton(props: ListButtonProps) {
 
   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,
@@ -74,6 +63,22 @@ export function ListButton(props: ListButtonProps) {
     onPressOut?.(event);
   };
 
+  function renderRightIcon() {
+    if (iconRight) {
+      return (
+        <View className="ml-400">
+          {iconRight}
+        </View>
+      )
+    }
+
+    return (
+      <View className="flex-1 items-end">
+        <ChevronRight color={chevronIconColor} />
+      </View>
+    )
+  }
+
   return (
     <Animated.View
       style={{
@@ -99,25 +104,22 @@ export function ListButton(props: ListButtonProps) {
         onPressOut={handlePressOut}
         {...rest}
       >
-        <View className={iconButtonVariants({ showChevronIcon })}>
-          <View className="mr-400 flex items-center">
-            {icon ?? <ChatbubbleEllipses size={24} color={mappedIconColor} />}
+        <View className="flex flex-row items-center">
+          <View className="mr-400 flex">
+            {iconLeft}
           </View>
 
           <Typography
+            ellipsizeMode="tail"
             variant={typographyVariant}
             weight="700"
-            className={merge(textStyle, "truncate mr-700")}
+            className={merge(textStyle, "truncate min-w-fit")}
           >
             {children}
           </Typography>
         </View>
 
-        {showChevronIcon && (
-          <View className="flex items-center">
-            <ChevronRight color={chevronIconColor} />
-          </View>
-        )}
+        {renderRightIcon()}
       </Pressable>
     </Animated.View>
   );

package/src/components/ListButton/types.ts

@@ -1,16 +1,17 @@
 import type { VariantProps } from "class-variance-authority";
 import type { buttonVariants } from "./assets/class-variants";
-import type { ListButtonIconColorEnum, ListButtonVariantEnum } from "./enums";
+import type { ListButtonVariantEnum } from "./enums";
 import { PressableProps } from "react-native";
 import { SizeEnum, CornersEnum } from "../../enums";
 
 export interface ListButtonProps
   extends PressableProps,
     VariantProps<typeof buttonVariants> {
-  icon?: React.ReactNode;
-  iconColor?: ListButtonIconColorEnum;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  iconLeftContainerClassName?: React.ReactNode;
+  iconRightContainerClassName?: React.ReactNode;
   children: React.ReactNode;
-  showChevronIcon?: boolean;
   variant?: ListButtonVariantEnum;
   size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;

package/src/components/OtpInput/assets/class-variant.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const inputVariants = cva(
-  "h-1000 flex-1 text-center text-3 font-bold leading-600 border-100 bg-chia-100 placeholder-chia-400",
+  "h-1000 flex-1 text-center text-3 font-bold leading-1300 border-100 bg-chia-100 placeholder-chia-400",
   {
     variants: {
       rounded: {

package/src/components/OtpInput/components/InformationStatus/index.tsx

@@ -8,15 +8,15 @@ import { Button } from "../../../Button";
 import { HighlightedText } from "../../../HighlightedText";
 import LoadingDots from "../../../LoadingDots";
 import { Chip } from "../../../Chip";
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 import { ChipVariantEnum } from "../../../Chip/enums";
 import { SealVariantEnum } from "../../../Seal/enums";
-import { InformationStatusEnum } from "../../enums";
+import { OTPInputInformationStatusEnum } from "../../enums";
 import { SizeEnum, CornersEnum } from "../../../../enums";
 
 export function InformationStatus(props: InformationStatusProps) {
   const {
-    status = InformationStatusEnum.DEFAULT,
+    status = OTPInputInformationStatusEnum.DEFAULT,
     disabled = false,
     onPress,
   } = props;
@@ -24,7 +24,7 @@ export function InformationStatus(props: InformationStatusProps) {
   const renderInformation = useMemo(() => {
     const textStyle = merge("", disabled && "opacity-50");
 
-    if (status === InformationStatusEnum.DEFAULT) {
+    if (status === OTPInputInformationStatusEnum.DEFAULT) {
       return (
         <>
           <Button
@@ -47,7 +47,7 @@ export function InformationStatus(props: InformationStatusProps) {
       );
     }
 
-    if (status === InformationStatusEnum.LOADING) {
+    if (status === OTPInputInformationStatusEnum.LOADING) {
       return (
         <>
           <LoadingDots variant="dark" />
@@ -61,25 +61,26 @@ export function InformationStatus(props: InformationStatusProps) {
       );
     }
 
-    if (status === InformationStatusEnum.SUCCESS) {
+    if (status === OTPInputInformationStatusEnum.SUCCESS) {
       return (
-        <>
-          <Chip
-            variant={ChipVariantEnum.OUTLINE}
-            sealVariant={SealVariantEnum.SUCCESS}
-            label="Confirmado"
-          />
+        <View className="flex flex-col mt-600 gap-600 items-center">
           <HighlightedText
             highlightText="Código validado"
             text="com sucesso."
             reverse
             className={textStyle}
           />
-        </>
+          <Chip
+            variant={ChipVariantEnum.OUTLINE}
+            sealVariant={SealVariantEnum.SUCCESS}
+            label="Confirmado"
+            className="max-w-fit"
+          />
+        </View>
       );
     }
 
-    if (status === InformationStatusEnum.ERROR) {
+    if (status === OTPInputInformationStatusEnum.ERROR) {
       return (
         <>
           <Button

package/src/components/OtpInput/components/InformationStatus/types.ts

@@ -1,6 +1,6 @@
-import type { InformationStatusEnum } from "../../enums";
+import type { OTPInputInformationStatusEnum } from "../../enums";
 export interface InformationStatusProps {
-  status: InformationStatusEnum;
+  status: OTPInputInformationStatusEnum;
   disabled?: boolean;
   onPress?: () => void;
 }

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

@@ -1,7 +1,6 @@
-export enum InformationStatusEnum {
+export enum OTPInputInformationStatusEnum {
   DEFAULT = "default",
   ERROR = "error",
   SUCCESS = "success",
   LOADING = "loading",
-  COOLDOWN = "cooldown",
 }

package/src/components/OtpInput/index.tsx

@@ -1,175 +1,116 @@
 import { useRef, useState } from "react";
-import {
-  View,
-  TextInput,
-  NativeSyntheticEvent,
-  TextInputKeyPressEventData,
-  Platform,
-  TextInputFocusEventData,
-  TextInputChangeEventData,
-} from "react-native";
-import type { OtpInputProps } from "./types";
+import { OTPInputInformationStatusEnum } from "./enums";
+import { OtpInputProps } from "./types";
+import { TextInput, Text, View, Platform } from "react-native";
 import { merge } from "@kivid/tailwind-preset";
-import { InformationStatus } from "./components";
-import { InformationStatusEnum } from "./enums";
 import { inputVariants } from "./assets/class-variant";
+import { InformationStatus } from "./components";
 
 export function OtpInput(props: OtpInputProps) {
   const {
-    status = InformationStatusEnum.DEFAULT,
-    OTPInputsQuantity = 6,
+    status = OTPInputInformationStatusEnum.DEFAULT,
+    length = 6,
     customInformation,
     rounded = false,
     disabled = false,
     inputClassName,
     onChange,
     onPressRetryToken,
+
   } = props;
+  const hasError = status === OTPInputInformationStatusEnum.ERROR;
+
+  const [code, setCode] = useState('');
 
-  const inputsRef = useRef<Array<TextInput | null>>([]);
-  const [inputValues, setInputValues] = useState<string[]>(
-    Array(OTPInputsQuantity).fill("")
+  const textInputRef = useRef<TextInput>(null)
+  const codeDigitsArray = new Array(length).fill(0)
+
+  const inputStyle = merge(
+    inputVariants({ rounded, hasError, disabled }),
+    inputClassName
   );
-  const hasError = status === InformationStatusEnum.ERROR;
 
-  function handlePress() {
-    const values = [...inputValues];
-    const inputRefValuesJoined = values.join("");
+  const [inputContainerIsFocused, setInputContainerIsFocused] = useState(false)
 
-    if (inputRefValuesJoined.length === OTPInputsQuantity) {
-      onPressRetryToken?.(inputRefValuesJoined);
-    }
+  function handleOnPress() {
+    setInputContainerIsFocused(true)
+    textInputRef.current?.focus()
   }
 
-  const handleChange = (
-    event: NativeSyntheticEvent<TextInputChangeEventData>,
-    index: number
-  ) => {
-    const text = event.nativeEvent.text;
-    const newValues = [...inputValues];
-
-    if (text.length > 1) {
-      const chars = text.split("");
-      let targetIndex = index;
-      chars.forEach((char) => {
-        if (targetIndex < OTPInputsQuantity) {
-          newValues[targetIndex] = char;
-          targetIndex++;
-        }
-      });
-      setInputValues(newValues);
-      onChange?.(newValues.join(""));
-
-      const nextEmptyIndex = newValues.findIndex((value) => !value);
-      if (nextEmptyIndex !== -1) {
-        inputsRef.current[nextEmptyIndex]?.focus();
-      } else {
-        inputsRef.current[OTPInputsQuantity - 1]?.focus();
-      }
-      return;
-    }
+  function handleOnBlur() {
+    setInputContainerIsFocused(false)
+  }
 
-    newValues[index] = text;
-    setInputValues(newValues);
-    onChange?.(newValues.join(""));
+  function handleChangeText(text: string) {
+    const textInputQuantity = text.replace(/\s+/g, '').slice(0, length);
+    setCode(textInputQuantity);
 
-    if (text && index < OTPInputsQuantity - 1) {
-      const nextEmptyIndex = newValues.findIndex((v, i) => i > index && !v);
-      if (nextEmptyIndex !== -1) {
-        inputsRef.current[nextEmptyIndex]?.focus();
-      }
-    }
-  };
-
-  const handleKeyDown = (
-    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
-    index: number
-  ) => {
-    if (e.nativeEvent.key === "Backspace") {
-      const hasValueAhead = inputValues.slice(index + 1).some((value) => value);
-
-      if (hasValueAhead) {
-        const lastFilledIndex = [...inputValues]
-          .map((value, i) => (value ? i : -1))
-          .filter((i) => i !== -1)
-          .pop();
-
-        if (lastFilledIndex !== undefined) {
-          inputsRef.current[lastFilledIndex]?.focus();
-        }
-        return;
-      }
-
-      if (inputValues[index]) {
-        const newValues = [...inputValues];
-        newValues[index] = "";
-        setInputValues(newValues);
-      }
-      if (index > 0) {
-        inputsRef.current[index - 1]?.focus();
-      }
-    }
-  };
-
-  const handleFocus = (
-    event: NativeSyntheticEvent<TextInputFocusEventData>,
-    index: number
-  ) => {
-    const firstEmptyIndex = inputValues.findIndex((value) => !value);
-
-    if (firstEmptyIndex !== -1 && index > firstEmptyIndex) {
-      inputsRef.current[firstEmptyIndex]?.focus();
-      event.preventDefault();
-      return;
+    if (textInputQuantity.length === length) {
+      onChange?.(textInputQuantity);
     }
+  }
 
-    if (firstEmptyIndex === -1 && index < OTPInputsQuantity - 1) {
-      inputsRef.current[OTPInputsQuantity - 1]?.focus();
-      event.preventDefault();
+  function handleInformationStatusOnPress() {
+    if (code.length === length) {
+      onPressRetryToken?.(code);
     }
-  };
+  }
+
 
   function renderInformationStatus() {
     if (customInformation) {
       return <>{customInformation}</>;
     }
 
-    return <InformationStatus status={status} onPress={handlePress} />;
+    return <InformationStatus status={status} onPress={handleInformationStatusOnPress} />;
   }
 
-  const inputStyle = merge(
-    inputVariants({ rounded, hasError, disabled }),
-    inputClassName
-  );
+  function renderDigit(_value: string, index: number) {
+    const isCurrentDigit = index === code.length;
+    const isLastDigit = index === length - 1;
+    const isCodeFull = code.length === length;
+
+    const isDigitFocused = isCurrentDigit && inputContainerIsFocused || (isLastDigit && isCodeFull && inputContainerIsFocused)
+
+    return (
+      <Text
+        key={index}
+        className={inputStyle}
+        style={{
+          ...(isDigitFocused ? { borderColor: '#98A3A3' } : {}),
+          ...(code[index] ? {} : { color: '#98A3A3' })
+        }}
+      >
+        {code[index] ?? "•"}
+      </Text>
+    )
+  }
 
   return (
-    <View className="flex flex-col items-center gap-600">
-      <View className="flex-row gap-300 max-w-[280px] items-center justify-between">
-        {Array.from({ length: OTPInputsQuantity }).map((_, i) => (
-          <TextInput
-            ref={(ref) => {
-              inputsRef.current[i] = ref;
-            }}
-            key={`otp-input-${i}`}
-            textContentType="oneTimeCode"
-            placeholder="_"
-            className={inputStyle}
-            autoComplete={
-              Platform.OS === "android" ? "sms-otp" : "one-time-code"
-            }
-            placeholderTextColor="#DEE7E7"
-            editable={!disabled}
-            value={inputValues[i]}
-            onChange={(e) => handleChange(e, i)}
-            onKeyPress={(e) => handleKeyDown(e, i)}
-            onFocus={(e) => handleFocus(e, i)}
-          />
-        ))}
+    <View className='flex-col gap-300 max-w-[280px] items-center justify-between'>
+      <View className='w-full flex-row justify-around gap-400'>
+        {codeDigitsArray.map(renderDigit)}
       </View>
-
+      <TextInput
+        className='w-full h-1000 absolute text-transparent'
+        value={code}
+        onChangeText={handleChangeText}
+        maxLength={length}
+        editable={!disabled}
+        returnKeyType="done"
+        textContentType='oneTimeCode'
+        ref={textInputRef}
+        onBlur={handleOnBlur}
+        onPress={handleOnPress}
+        caretHidden={true}
+        autoComplete={
+          Platform.OS === "android" ? "sms-otp" : "one-time-code"
+        }
+      />
       {renderInformationStatus()}
     </View>
-  );
+
+  )
 }
 
-export default OtpInput;
+export default OtpInput;

package/src/components/OtpInput/types.ts

@@ -1,13 +1,13 @@
 import type React from "react";
-import type { InformationStatusEnum } from "./enums";
+import { OTPInputInformationStatusEnum } from "./enums";
 
 export interface OtpInputProps {
-  OTPInputsQuantity?: number;
+  length?: number;
   rounded?: boolean;
   disabled?: boolean;
-  status?: InformationStatusEnum;
+  status?: OTPInputInformationStatusEnum;
   customInformation?: React.ReactNode;
-  onChange: (value: string) => void;
+  onChange: (value?: string) => void;
   onPressRetryToken?: (value: string) => void;
   inputClassName?: string;
 }

package/src/components/TextInput/index.tsx

@@ -70,7 +70,7 @@ export function TextInput({
 
   return (
     <Tooltip
-      isVisible={hasError}
+      isOpenedByVariantError={hasError}
       message="This is a error"
       variant={TooltipVariantEnum.ERROR}
       className={tooltipClassName}

package/src/components/Tooltip/components/Content/types.ts

@@ -11,4 +11,5 @@ export interface ContentProps {
   onLayout?: (event: LayoutChangeEvent) => void;
   translateX?: number;
   pointerOffset?: TooltipPointerOffsetEnum;
+  onChangeVisibility?: (isVisible: boolean) => void;
 }

package/src/components/Tooltip/index.tsx

@@ -1,38 +1,90 @@
-import { View } from "react-native";
+import { View, Pressable } from "react-native";
 import { Content } from "./components";
 import { useTooltipPosition } from "./hooks";
 import { TooltipProps } from "./types";
 
 import { TooltipVariantEnum } from "./enum";
+import { useState, useCallback, cloneElement, isValidElement, ReactElement } from "react";
 
 export function Tooltip(props: TooltipProps) {
   const {
     children,
     message,
     variant = TooltipVariantEnum.TRIGGER,
-    isVisible,
     className,
     containerClassName,
     pointerClassName,
+    isOpenedByVariantError,
+    onChangeVisibility
   } = props;
   const { positionData, onTriggerLayout, onTooltipLayout } =
     useTooltipPosition();
 
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleVisibilityChange = useCallback((visible: boolean) => {
+    setIsVisible(visible);
+    onChangeVisibility?.(visible);
+  }, [onChangeVisibility]);
+
+  const handleToggleVisibility = useCallback(() => {
+    const newVisibility = !isVisible;
+    handleVisibilityChange(newVisibility);
+  }, [isVisible, handleVisibilityChange]);
+
+  const renderTriggerContent = () => {
+    if (variant !== TooltipVariantEnum.TRIGGER) {
+      return children;
+    }
+
+    if (isValidElement(children)) {
+      const child = children as ReactElement;
+      const childProps = child.props as any;
+
+      const componentType = child.type as any;
+      const componentName = (typeof componentType === 'function'
+        ? componentType.displayName || componentType.name
+        : componentType) || '';
+      const isButton = componentName === 'Button' ||
+        componentName === 'Pressable' ||
+        componentName === 'TouchableOpacity';
+
+      if (isButton || (childProps && typeof childProps.onPress === 'function')) {
+        return cloneElement(child, {
+          ...childProps,
+          onPress: (...args: any[]) => {
+            if (typeof childProps.onPress === 'function') {
+              childProps.onPress(...args);
+              handleToggleVisibility();
+            }
+          }
+        })
+      }
+    }
+
+    return (
+      <Pressable onPress={handleToggleVisibility}>
+        {children}
+      </Pressable>
+    );
+  };
+
   return (
     <View className="relative" onLayout={onTriggerLayout}>
-      {children}
+      {renderTriggerContent()}
 
       <Content
         message={message}
         variant={variant}
-        isVisible={isVisible}
+        isVisible={variant === TooltipVariantEnum.TRIGGER ? isVisible : !!isOpenedByVariantError}
         onLayout={onTooltipLayout}
         translateX={positionData.adjustedPosition.translateX}
         pointerOffset={positionData.pointerOffset}
         className={className}
         containerClassName={containerClassName}
         pointerClassName={pointerClassName}
+        onChangeVisibility={handleVisibilityChange}
       />
     </View>
   );
-}
+}

package/src/components/Tooltip/types.ts

@@ -8,6 +8,8 @@ export interface TooltipProps {
   className?: string;
   pointerClassName?: string;
   containerClassName?: string;
-  isVisible: boolean;
+  triggerButtonClassName?: string;
   style?: ViewStyle;
+  onChangeVisibility?: (isVisible: boolean) => void;
+  isOpenedByVariantError?: boolean;
 }

package/src/components/index.ts

@@ -4,6 +4,7 @@ export type * from "./Button/types";
 
 export * from "./ChatBubble";
 export type * from "./ChatBubble/types";
+export type * from "./ChatBubble/contexts/ChatBubbleContext/types";
 
 export * from "./Chip";
 export * from "./Chip/types";
@@ -63,3 +64,7 @@ export * from "./SelectButton/enums";
 export * from "./RadioInput";
 export type * from "./RadioInput/types";
 export * from "./RadioInput/enums";
+
+export * from "./IconButton";
+export type * from "./IconButton/types";
+export * from "./IconButton/enums";

package/src/iconography/Icons/index.tsx

@@ -5,7 +5,6 @@ import {
   Alert,
   FlatList,
   Pressable,
-  SafeAreaView,
   Text,
   TextInput,
   View,
@@ -36,7 +35,7 @@ export function Icons(props: IconsProps) {
   }
 
   return (
-    <SafeAreaView className="m-16">
+    <View className="m-16">
       <TextInput
         placeholder="Pesquisar ícones..."
         placeholderTextColor="#98A3A3"
@@ -90,6 +89,6 @@ export function Icons(props: IconsProps) {
           </View>
         )}
       />
-    </SafeAreaView>
+    </View>
   );
 }

package/dist/commonjs/components/ChatBubble/context.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","ChatBubbleContext","exports","createContext","useChatBubbleContext","context","useContext","Error"],"sourceRoot":"../../../../src","sources":["components/ChatBubble/context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAaO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,oBAAa,EAC5C,IACF,CAAC;AAEM,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACL,iBAAiB,CAAC;EAC7C,IAAI,CAACI,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CACb,iEACF,CAAC;EACH;EACA,OAAOF,OAAO;AAChB,CAAC;AAACH,OAAA,CAAAE,oBAAA,GAAAA,oBAAA","ignoreList":[]}