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

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 (

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",
+}

package/src/components/SelectButton/index.tsx

@@ -0,0 +1,133 @@
+import { useRef } from "react";
+import { Pressable, Animated, GestureResponderEvent } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { SelectButtonProps } from "./types";
+import { Typography } from "../Typography";
+import { buttonVariants } from "./assets/class-variants";
+import { RadioInput } from "../RadioInput";
+import { RadioInputVariantEnum } from "../RadioInput/enums";
+import { CheckboxInput } from "../CheckboxInput";
+import { CheckboxVariantEnum } from "../CheckboxInput/enums";
+import { SelectButtonVariantEnum } from "./enums";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+export function SelectButton(props: SelectButtonProps) {
+  const {
+    variant = SelectButtonVariantEnum.CHECKBOX,
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
+    isSelected,
+    disabled = false,
+    className,
+    children,
+    onPress,
+    accessibilityLabel,
+    ref,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(1)).current;
+
+  const typographyVariantMap = {
+    [SizeEnum.SMALL]: "label_small",
+    [SizeEnum.MEDIUM]: "label_medium",
+    [SizeEnum.LARGE]: "label_large",
+  } as const;
+
+  const typographyVariant = typographyVariantMap[size];
+
+  function handlePress() {
+    onPress?.();
+  }
+
+  function renderContent() {
+    if (variant === SelectButtonVariantEnum.RADIO) {
+      return (
+        <RadioInput
+          variant={RadioInputVariantEnum.GRAPE}
+          isSelected={isSelected}
+          disabled={disabled}
+        />
+      );
+    }
+
+    return (
+      <CheckboxInput
+        variant={CheckboxVariantEnum.GRAPE}
+        isChecked={isSelected}
+        disabled={disabled}
+        className="pointer-events-none"
+      />
+    );
+  }
+
+  const buttonStyle = merge(
+    buttonVariants({
+      size,
+      corners,
+      selected: isSelected,
+    }),
+    className
+  );
+
+  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
+        ref={ref}
+        className={buttonStyle}
+        disabled={disabled}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        accessibilityRole="button"
+        accessibilityLabel={
+          accessibilityLabel ||
+          (typeof children === "string" ? children : "Button")
+        }
+        accessibilityState={{
+          disabled: disabled,
+          selected: isSelected,
+        }}
+        pointerEvents={disabled ? "none" : "auto"}
+        {...rest}
+      >
+        {renderContent()}
+
+        <Typography
+          variant={typographyVariant}
+          weight="700"
+          className="text-chia-900"
+          numberOfLines={1}
+        >
+          {children}
+        </Typography>
+      </Pressable>
+    </Animated.View>
+  );
+}