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

package/src/components/MessageInput/index.tsx

@@ -0,0 +1,121 @@
+import { useRef } from "react";
+import { View, TextInput as RNTextInput, Pressable } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { MessageInputProps } from "./types";
+import {
+  messageInputContainerVariants,
+  messageInputContentVariants,
+  messageInputFieldVariants,
+} from "./assets/class-variants";
+import { EssentialSendStroke } from "@kivid/icons/native";
+import { IconButton } from "../IconButton";
+
+export function MessageInput({
+  value = "",
+  onChangeText,
+  disabled = false,
+  className = "",
+  inputClassName = "",
+  placeholder = "Type a message...",
+  accessibilityLabel,
+  containerTestID,
+  ref,
+  onSend,
+  sendButtonDisabled = false,
+  sendButtonAccessibilityLabel = "Send message",
+  multiline = false,
+  ...rest
+}: MessageInputProps) {
+  const inputRef = useRef<RNTextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+
+  const handleSend = () => {
+    if (!disabled && !sendButtonDisabled && onSend) {
+      onSend(value);
+    }
+  };
+
+  const getAccessibilityLabel = () => {
+    if (accessibilityLabel) return accessibilityLabel;
+
+    let labelText = "Message input";
+
+    if (disabled) labelText += ", disabled";
+
+    return labelText;
+  };
+
+  const isSendButtonDisabled = disabled || sendButtonDisabled;
+
+  return (
+    <Pressable
+      testID={containerTestID}
+      className={merge(
+        messageInputContainerVariants({
+          disabled,
+        }),
+        className
+      )}
+      onPress={() => {
+        if (!disabled) {
+          inputRef.current?.focus();
+        }
+      }}
+      disabled={disabled}
+      accessibilityRole="none"
+      accessibilityState={{
+        disabled,
+      }}
+    >
+      <View className={merge(messageInputContentVariants())}>
+        <RNTextInput
+          value={value}
+          onChangeText={handleChangeText}
+          editable={!disabled}
+          placeholder={placeholder}
+          multiline={multiline}
+          className={merge(
+            messageInputFieldVariants({
+              disabled,
+            }),
+            inputClassName
+          )}
+          accessibilityLabel={getAccessibilityLabel()}
+          accessibilityState={{
+            disabled,
+          }}
+          {...rest}
+          ref={(instance) => {
+            inputRef.current = instance;
+
+            if (ref) {
+              ref.current = instance;
+            }
+          }}
+        />
+      </View>
+
+      <IconButton
+        onPress={handleSend}
+        disabled={isSendButtonDisabled}
+        className="mr-400"
+        accessibilityRole="button"
+        accessibilityLabel={sendButtonAccessibilityLabel}
+        accessibilityState={{
+          disabled: isSendButtonDisabled,
+        }}
+        testID="send-button"
+        icon={
+          <EssentialSendStroke width={24} height={24} className="text-white" />
+        }
+      />
+    </Pressable>
+  );
+}
+
+MessageInput.displayName = "MessageInput";
+
+export default MessageInput;

package/src/components/MessageInput/types.ts

@@ -0,0 +1,18 @@
+import {
+  TextInputProps as RNTextInputProps,
+  TextInput as RNTextInput,
+} from "react-native";
+
+export interface MessageInputProps
+  extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+  value?: string;
+  disabled?: boolean;
+  className?: string;
+  inputClassName?: string;
+  containerTestID?: string;
+  onChangeText?: (text: string) => void;
+  onSend?: (text: string) => void;
+  ref?: React.RefObject<RNTextInput | null>;
+  sendButtonDisabled?: boolean;
+  sendButtonAccessibilityLabel?: string;
+}

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

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+
+export const inputVariants = cva(
+  "h-1000 flex-1 text-center text-3 font-bold leading-1300 border-100 bg-chia-100 placeholder-chia-400",
+  {
+    variants: {
+      rounded: {
+        true: "rounded-700",
+        false: "rounded-500",
+      },
+      disabled: {
+        true: "opacity-50",
+        false: "",
+      },
+      hasError: {
+        true: "border-blackberry-500 text-blackberry-500",
+        false: "border-chia-400 text-chia-900",
+      },
+    },
+  }
+);

package/src/components/{InputOTP → OtpInput}/components/InformationStatus/index.tsx

@@ -4,18 +4,19 @@ import { useMemo } from "react";
 import type { InformationStatusProps } from "./types";
 
 import { merge } from "@kivid/tailwind-preset";
-import Button from "../../../Button";
+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;
@@ -23,15 +24,15 @@ export function InformationStatus(props: InformationStatusProps) {
   const renderInformation = useMemo(() => {
     const textStyle = merge("", disabled && "opacity-50");
 
-    if (status === InformationStatusEnum.DEFAULT) {
+    if (status === OTPInputInformationStatusEnum.DEFAULT) {
       return (
         <>
           <Button
             variant="outline"
-            corners="medium"
+            corners={CornersEnum.MEDIUM}
             disabled={disabled}
             onPress={onPress}
-            size="small"
+            size={SizeEnum.SMALL}
           >
             Reenviar código
           </Button>
@@ -46,7 +47,7 @@ export function InformationStatus(props: InformationStatusProps) {
       );
     }
 
-    if (status === InformationStatusEnum.LOADING) {
+    if (status === OTPInputInformationStatusEnum.LOADING) {
       return (
         <>
           <LoadingDots variant="dark" />
@@ -60,33 +61,34 @@ 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
             variant="outline"
-            corners="medium"
+            corners={CornersEnum.MEDIUM}
             disabled={disabled}
             onPress={onPress}
-            size="small"
+            size={SizeEnum.SMALL}
           >
             Reenviar código
           </Button>

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

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

package/src/components/{InputOTP/enums/information-status.ts → 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

@@ -0,0 +1,129 @@
+import { useRef, useState } from "react";
+import { OTPInputInformationStatusEnum } from "./enums";
+import { OtpInputProps } from "./types";
+import { TextInput, Text, View, Platform } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { inputVariants } from "./assets/class-variant";
+import { InformationStatus } from "./components";
+
+export function OtpInput(props: OtpInputProps) {
+  const {
+    status = OTPInputInformationStatusEnum.DEFAULT,
+    length = 6,
+    customInformation,
+    rounded = false,
+    disabled = false,
+    inputClassName,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    onComplete,
+    onPressRetryToken,
+  } = props;
+  const hasError = status === OTPInputInformationStatusEnum.ERROR;
+
+  const [internalCode, setInternalCode] = useState("");
+  const isControlled = controlledValue !== undefined;
+  const code = isControlled ? controlledValue : internalCode;
+
+  const textInputRef = useRef<TextInput>(null);
+  const codeDigitsArray = new Array(length).fill(0);
+
+  const inputStyle = merge(
+    inputVariants({ rounded, hasError, disabled }),
+    inputClassName
+  );
+
+  const [inputContainerIsFocused, setInputContainerIsFocused] = useState(false);
+
+  function handleOnPress() {
+    setInputContainerIsFocused(true);
+    textInputRef.current?.focus();
+  }
+
+  function handleOnBlur() {
+    setInputContainerIsFocused(false);
+    onBlur?.();
+  }
+
+  function handleChangeText(text: string) {
+    const textInputQuantity = text.replace(/\s+/g, "").slice(0, length);
+
+    if (!isControlled) {
+      setInternalCode(textInputQuantity);
+    }
+
+    onChange?.(textInputQuantity);
+
+    if (textInputQuantity.length === length) {
+      onComplete?.(textInputQuantity);
+    }
+  }
+
+  function handleInformationStatusOnPress() {
+    if (code.length === length) {
+      onPressRetryToken?.(code);
+    }
+  }
+
+  function renderInformationStatus() {
+    if (customInformation) {
+      return <>{customInformation}</>;
+    }
+
+    return (
+      <InformationStatus
+        status={status}
+        onPress={handleInformationStatusOnPress}
+      />
+    );
+  }
+
+  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-col gap-300 items-center justify-between">
+      <View className="flex-row gap-400">
+        {codeDigitsArray.map(renderDigit)}
+      </View>
+      <TextInput
+        className="w-full h-1000 absolute text-transparent android:opacity-0"
+        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;

package/src/components/OtpInput/types.ts

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

package/src/components/PageIndicators/index.tsx

@@ -0,0 +1,36 @@
+import { View } from "react-native";
+import { PageIndicatorsProps } from "./types";
+import { cva } from "class-variance-authority";
+
+export function PageIndicators(props: PageIndicatorsProps) {
+  const { totalPages, isCurrentPage } = props;
+
+  const indicatorVariantStyle = cva("rounded-300", {
+    variants: {
+      active: {
+        true: "w-600 h-400 bg-chia-700",
+        false: "w-400 h-400 bg-chia-500",
+      },
+    },
+    defaultVariants: {
+      active: false,
+    },
+  });
+
+  const indicators = Array.from({ length: totalPages }, (_, index) => {
+    const isActive = isCurrentPage(index);
+
+    return (
+      <View
+        key={index}
+        className={indicatorVariantStyle({ active: isActive })}
+      />
+    );
+  });
+
+  return (
+    <View className="flex-row gap-2 items-center justify-center">
+      {indicators}
+    </View>
+  );
+}

package/src/components/PageIndicators/types.ts

@@ -0,0 +1,4 @@
+export interface PageIndicatorsProps {
+  totalPages: number;
+  isCurrentPage: (pageIndex: number) => boolean;
+}

package/src/components/PasswordInput/index.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import TextInput from "../TextInput";
+import { IconButton } from "../IconButton";
+import { PasswordInputProps } from "./types";
+import { EssentialEyeStroke, EssentialEyeOffStroke } from "@kivid/icons/native";
+import { IconButtonVariantEnum } from "../IconButton/enums";
+
+export function PasswordInput(props: PasswordInputProps) {
+  const [shouldHidePassword, setShouldHidePassword] = useState(true);
+
+  function toogleHidePassword() {
+    setShouldHidePassword(!shouldHidePassword);
+  }
+
+  function renderIcon() {
+    if (shouldHidePassword) {
+      return <EssentialEyeStroke size={24} className="text-chia-900" />;
+    }
+
+    return <EssentialEyeOffStroke size={24} className="text-chia-900" />;
+  }
+
+  return (
+    <TextInput
+      {...props}
+      secureTextEntry={shouldHidePassword}
+      rightIcon={
+        <IconButton
+          onPress={toogleHidePassword}
+          accessibilityLabel="Toggle Password Visibility"
+          variant={IconButtonVariantEnum.GHOST}
+          icon={renderIcon()}
+        />
+      }
+    />
+  );
+}

package/src/components/PasswordInput/types.ts

@@ -0,0 +1,4 @@
+import { TextInputProps } from "../TextInput/types";
+
+export interface PasswordInputProps
+  extends Omit<TextInputProps, "secureTextEntry"> {}

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

@@ -0,0 +1,112 @@
+import { cva } from "class-variance-authority";
+import { RadioInputVariantEnum } from "../enums";
+
+export const radioInputVariants = cva(
+  "w-[20px] h-[20px] rounded-full border-200 flex items-center justify-center",
+  {
+    variants: {
+      variant: {
+        [RadioInputVariantEnum.GRAPE]: ["bg-chia-200 border-chia-400"],
+        [RadioInputVariantEnum.JAVA]: ["bg-chia-200 border-chia-400"],
+        [RadioInputVariantEnum.PEAR]: ["bg-chia-200 border-chia-400"],
+        [RadioInputVariantEnum.TANGERINE]: ["bg-chia-200 border-chia-400"],
+        [RadioInputVariantEnum.CHIA]: ["bg-chia-200 border-chia-400"],
+        [RadioInputVariantEnum.PITAYA]: ["bg-chia-200 border-chia-400"],
+        [RadioInputVariantEnum.MANGO]: ["bg-chia-200 border-chia-400"],
+      },
+      isSelected: {
+        true: null,
+        false: "bg-chia-100 border-chia-400",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "cursor-pointer",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: RadioInputVariantEnum.GRAPE,
+        isSelected: true,
+        class: "bg-grape-500 border-grape-500",
+      },
+      {
+        variant: RadioInputVariantEnum.JAVA,
+        isSelected: true,
+        class: "bg-java-500 border-java-500",
+      },
+      {
+        variant: RadioInputVariantEnum.PEAR,
+        isSelected: true,
+        class: "bg-pear-500 border-pear-500",
+      },
+      {
+        variant: RadioInputVariantEnum.TANGERINE,
+        isSelected: true,
+        class: "bg-tangerine-500 border-tangerine-500",
+      },
+      {
+        variant: RadioInputVariantEnum.CHIA,
+        isSelected: true,
+        class: "bg-chia-600 border-chia-600",
+      },
+      {
+        variant: RadioInputVariantEnum.PITAYA,
+        isSelected: true,
+        class: "bg-pitaya-500 border-pitaya-500",
+      },
+      {
+        variant: RadioInputVariantEnum.MANGO,
+        isSelected: true,
+        class: "bg-mango-500 border-mango-500",
+      },
+      // Compound variants para disabled + selected para manter cores mais claras apenas quando selecionado
+      {
+        variant: RadioInputVariantEnum.GRAPE,
+        isSelected: true,
+        disabled: true,
+        class: "bg-grape-300 border-grape-300",
+      },
+      {
+        variant: RadioInputVariantEnum.JAVA,
+        isSelected: true,
+        disabled: true,
+        class: "bg-java-300 border-java-300",
+      },
+      {
+        variant: RadioInputVariantEnum.PEAR,
+        isSelected: true,
+        disabled: true,
+        class: "bg-pear-300 border-pear-300",
+      },
+      {
+        variant: RadioInputVariantEnum.TANGERINE,
+        isSelected: true,
+        disabled: true,
+        class: "bg-tangerine-300 border-tangerine-300",
+      },
+      {
+        variant: RadioInputVariantEnum.CHIA,
+        isSelected: true,
+        disabled: true,
+        class: "bg-chia-300 border-chia-300",
+      },
+      {
+        variant: RadioInputVariantEnum.PITAYA,
+        isSelected: true,
+        disabled: true,
+        class: "bg-pitaya-300 border-pitaya-300",
+      },
+      {
+        variant: RadioInputVariantEnum.MANGO,
+        isSelected: true,
+        disabled: true,
+        class: "bg-mango-300 border-mango-300",
+      },
+    ],
+    defaultVariants: {
+      variant: RadioInputVariantEnum.JAVA,
+      isSelected: false,
+      disabled: false,
+    },
+  }
+);

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

@@ -0,0 +1,9 @@
+export enum RadioInputVariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  CHIA = "chia",
+  PITAYA = "pitaya",
+  MANGO = "mango",
+}

package/src/components/RadioInput/index.tsx

@@ -0,0 +1,36 @@
+import type { RadioInputProps } from "./types";
+
+import { TouchableOpacity, View } from "react-native";
+import { RadioInputVariantEnum } from "./enums";
+import { radioInputVariants } from "./assets/class-variants";
+import { merge } from "@kivid/tailwind-preset";
+
+export function RadioInput(props: RadioInputProps) {
+  const {
+    isSelected = false,
+    variant = RadioInputVariantEnum.JAVA,
+    onChange,
+    disabled = false,
+    className,
+  } = props;
+
+  function handleChange() {
+    onChange?.(!isSelected);
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={handleChange}
+      disabled={disabled}
+      accessible
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected }}
+      className={merge(
+        radioInputVariants({ variant, isSelected, disabled }),
+        className
+      )}
+    >
+      {isSelected && <View className="w-400 h-400 rounded-full bg-white" />}
+    </TouchableOpacity>
+  );
+}

package/src/components/RadioInput/types.ts

@@ -0,0 +1,9 @@
+import { RadioInputVariantEnum } from "./enums";
+
+export interface RadioInputProps {
+  isSelected?: boolean;
+  variant?: RadioInputVariantEnum;
+  disabled?: boolean;
+  className?: string;
+  onChange?(value: boolean): void;
+}