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

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

@@ -8,14 +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;
@@ -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 → 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,116 @@
+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,
+    onChange,
+    onPressRetryToken,
+
+  } = props;
+  const hasError = status === OTPInputInformationStatusEnum.ERROR;
+
+  const [code, setCode] = useState('');
+
+  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)
+  }
+
+  function handleChangeText(text: string) {
+    const textInputQuantity = text.replace(/\s+/g, '').slice(0, length);
+    setCode(textInputQuantity);
+
+    if (textInputQuantity.length === length) {
+      onChange?.(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 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;

package/src/components/OtpInput/types.ts

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

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

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

@@ -1,12 +1,13 @@
 import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
 
 export const sealVariants = cva(
   "flex items-center justify-center transition ease-in-out pointer-events-none w-fit stroke-none",
   {
     variants: {
       size: {
-        small: "w-600 h-600 rounded-300",
-        medium: "w-700 h-700 rounded-500",
+        [SizeEnum.SMALL]: "w-600 h-600 rounded-300",
+        [SizeEnum.MEDIUM]: "w-700 h-700 rounded-500",
       },
       variant: {
         add: "bg-grape-500",

package/src/components/Seal/components/AddIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const AddIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const AddIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/AlertIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const AlertIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const AlertIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/ErrorIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const ErrorIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const ErrorIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/LeftIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const LeftIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const LeftIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/MinusIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const MinusIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const MinusIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/RightIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const RightIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const RightIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/SuccessIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const SuccessIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const SuccessIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/index.tsx

@@ -14,12 +14,14 @@ import {
 } from "./components";
 import { merge } from "@kivid/tailwind-preset";
 import { sealVariants } from "./assets/class-variants";
+import { SizeEnum } from "../../enums";
 
 export const Seal: React.FC<SealProps> = ({
   variant,
-  size = "medium",
+  size = SizeEnum.MEDIUM,
   inverted = false,
   className = "",
+  testID,
 }) => {
   const mappedColorByVariant = {
     add: inverted ? "#7A50D9" : "#F2F7F7",
@@ -46,6 +48,7 @@ export const Seal: React.FC<SealProps> = ({
   return (
     <View
       className={merge(sealVariants({ size, variant, inverted }), className)}
+      testID={testID}
     >
       <Icon size={size} color={mappedColorByVariant[variant]} />
     </View>

package/src/components/Seal/types.ts

@@ -1,18 +1,20 @@
 import type { SvgProps } from "react-native-svg";
 import { SealVariantEnum } from "./enums";
+import { SizeEnum } from "../../enums";
 
 export type SealVariant = SealVariantEnum;
 
+export type SealSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
+
 export interface SealIconProps extends SvgProps {
   size?: SealSize;
 }
 
-export type SealSize = "small" | "medium";
-
 export interface SealProps {
   variant: SealVariant;
   size?: SealSize;
   inverted?: boolean;
   disabled?: boolean;
   className?: string;
+  testID?: string;
 }

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

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+const buttonVariants = cva(["flex-row items-center justify-start gap-400"], {
+  variants: {
+    size: {
+      [SizeEnum.SMALL]: ["pl-400 pr-600 py-400"],
+      [SizeEnum.MEDIUM]: ["pl-400 pr-600 py-500"],
+      [SizeEnum.LARGE]: ["pl-400 pr-700 py-600"],
+    },
+    corners: {
+      [CornersEnum.SMALL]: "rounded-500",
+      [CornersEnum.MEDIUM]: "rounded-700",
+    },
+    selected: {
+      true: "bg-grape-100 disabled:bg-grape-100 disabled:opacity-30 border border-grape-200",
+      false:
+        "bg-chia-100 border-100 border-chia-400 disabled:bg-chia-200 disabled:opacity-50",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+    size: SizeEnum.MEDIUM,
+    corners: CornersEnum.MEDIUM,
+  },
+});
+
+export { buttonVariants };

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

@@ -0,0 +1,4 @@
+export enum SelectButtonVariantEnum {
+  RADIO = "radio",
+  CHECKBOX = "checkbox",
+}