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

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

package/src/components/ListButton/types.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from "class-variance-authority";
+import type { buttonVariants } from "./assets/class-variants";
+import type { ListButtonIconColorEnum, 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;
+  children: React.ReactNode;
+  showChevronIcon?: boolean;
+  variant?: ListButtonVariantEnum;
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+  corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;
+  className?: string;
+  disabled?: boolean;
+  accessibilityLabel: string;
+}

package/src/components/LoadingDots/index.tsx

@@ -1,5 +1,4 @@
 import LottieView from "lottie-react-native";
-import { Ref } from "react";
 import type { LoadingDotsProps, LoadingDotsVariant } from "./types";
 import { View, ViewStyle } from "react-native";
 

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

@@ -12,6 +12,7 @@ import { Text } from "react-native";
 import { ChipVariantEnum } from "../../../Chip/enums";
 import { SealVariantEnum } from "../../../Seal/enums";
 import { InformationStatusEnum } from "../../enums";
+import { SizeEnum, CornersEnum } from "../../../../enums";
 
 export function InformationStatus(props: InformationStatusProps) {
   const {
@@ -28,10 +29,10 @@ export function InformationStatus(props: InformationStatusProps) {
         <>
           <Button
             variant="outline"
-            corners="medium"
+            corners={CornersEnum.MEDIUM}
             disabled={disabled}
             onPress={onPress}
-            size="small"
+            size={SizeEnum.SMALL}
           >
             Reenviar código
           </Button>
@@ -83,10 +84,10 @@ export function InformationStatus(props: InformationStatusProps) {
         <>
           <Button
             variant="outline"
-            corners="medium"
+            corners={CornersEnum.MEDIUM}
             disabled={disabled}
             onPress={onPress}
-            size="small"
+            size={SizeEnum.SMALL}
           >
             Reenviar código
           </Button>

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

@@ -8,18 +8,20 @@ import {
   TextInputFocusEventData,
   TextInputChangeEventData,
 } from "react-native";
-import type { InputOTPProps } from "./types";
+import type { OtpInputProps } from "./types";
 import { merge } from "@kivid/tailwind-preset";
 import { InformationStatus } from "./components";
 import { InformationStatusEnum } from "./enums";
+import { inputVariants } from "./assets/class-variant";
 
-export function InputOTP(props: InputOTPProps) {
+export function OtpInput(props: OtpInputProps) {
   const {
     status = InformationStatusEnum.DEFAULT,
     OTPInputsQuantity = 6,
     customInformation,
     rounded = false,
     disabled = false,
+    inputClassName,
     onChange,
     onPressRetryToken,
   } = props;
@@ -136,12 +138,8 @@ export function InputOTP(props: InputOTPProps) {
   }
 
   const inputStyle = merge(
-    "w-1000 h-1100 text-center text-3 font-bold leading-3 border-100 bg-chia-100 placeholder-chia-400",
-    rounded ? "rounded-700" : "rounded-500",
-    disabled ? "opacity-50" : "",
-    hasError
-      ? "border-blackberry-500 text-blackberry-500"
-      : "border-chia-400 text-chia-900"
+    inputVariants({ rounded, hasError, disabled }),
+    inputClassName
   );
 
   return (
@@ -174,4 +172,4 @@ export function InputOTP(props: InputOTPProps) {
   );
 }
 
-export default InputOTP;
+export default OtpInput;

package/src/components/{InputOTP → OtpInput}/types.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { InformationStatusEnum } from "./enums";
 
-export interface InputOTPProps {
+export interface OtpInputProps {
   OTPInputsQuantity?: number;
   rounded?: boolean;
   disabled?: boolean;
@@ -9,4 +9,5 @@ export interface InputOTPProps {
   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 (