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

package/src/components/ListButton/index.tsx

@@ -4,10 +4,7 @@ import { ListButtonVariantEnum } from "./enums";
 import { SizeEnum, CornersEnum } from "../../enums";
 import type { ListButtonProps } from "./types";
 import { ChevronRight } from "@kivid/icons/native";
-import {
-  buttonVariants,
-  textVariants,
-} from "./assets/class-variants";
+import { buttonVariants, textVariants } from "./assets/class-variants";
 import { merge } from "@kivid/tailwind-preset";
 import { useRef } from "react";
 
@@ -24,6 +21,7 @@ export function ListButton(props: ListButtonProps) {
     iconLeftContainerClassName,
     iconRightContainerClassName,
     accessibilityLabel,
+    numberOfLines = 1,
     onPressIn,
     onPressOut,
     ...rest
@@ -63,20 +61,24 @@ export function ListButton(props: ListButtonProps) {
     onPressOut?.(event);
   };
 
+  function renderLeftIcon() {
+    if (iconLeft) {
+      return <View className="mr-400">{iconLeft}</View>;
+    }
+
+    return null;
+  }
+
   function renderRightIcon() {
     if (iconRight) {
-      return (
-        <View className="ml-400">
-          {iconRight}
-        </View>
-      )
+      return <View className="ml-400">{iconRight}</View>;
     }
 
     return (
-      <View className="flex-1 items-end">
+      <View className="ml-400">
         <ChevronRight color={chevronIconColor} />
       </View>
-    )
+    );
   }
 
   return (
@@ -84,36 +86,35 @@ export function ListButton(props: ListButtonProps) {
       style={{
         opacity: animatedValue,
       }}
+      className={merge(
+        buttonVariants({
+          variant,
+          size,
+          corners,
+        }),
+        className
+      )}
     >
       <Pressable
-        className={merge(
-          buttonVariants({
-            variant,
-            size,
-            corners,
-          }),
-          className
-        )}
         disabled={disabled}
         accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel ?? (typeof children === "string" ? children : undefined)}
         accessibilityState={{
           disabled: disabled,
         }}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
+        className="flex-row"
         {...rest}
       >
-        <View className="flex flex-row items-center">
-          <View className="mr-400 flex">
-            {iconLeft}
-          </View>
-
+        <View className="flex flex-row items-center flex-1">
+          {renderLeftIcon()}
           <Typography
             ellipsizeMode="tail"
             variant={typographyVariant}
             weight="700"
-            className={merge(textStyle, "truncate min-w-fit")}
+            className={merge(textStyle, "truncate flex-1 ")}
+            numberOfLines={numberOfLines}
           >
             {children}
           </Typography>

package/src/components/ListButton/types.ts

@@ -17,5 +17,6 @@ export interface ListButtonProps
   corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;
   className?: string;
   disabled?: boolean;
-  accessibilityLabel: string;
+  accessibilityLabel?: string;
+  numberOfLines?: number;
 }

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 { Eye, EyeOff } 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 <Eye size={24} className="text-chia-900" />;
+    }
+
+    return <EyeOff 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/TextInput/assets/class-variants.ts

@@ -44,7 +44,7 @@ export const textInputContentVariants = cva("flex-1 flex-col text-chia-900", {
 });
 
 export const textInputFieldVariants = cva(
-  "font-semibold text-[16px] leading-[18px] placeholder:text-chia-600 pt-[3px]",
+  "font-nunito-bold text-[16px] leading-[18px] placeholder:text-chia-600 pt-[3px] android:pb-0 android:pl-0",
   {
     variants: {
       disabled: {

package/src/components/TextInput/index.tsx

@@ -31,6 +31,9 @@ export function TextInput({
   containerTestID,
   ref,
   tooltipClassName = "",
+  tooltipPointerClassName,
+  tooltipContainerClassName,
+  rightIcon,
   ...rest
 }: TextInputProps) {
   const inputRef = useRef<RNTextInput>(null);
@@ -52,6 +55,14 @@ export function TextInput({
     );
   };
 
+  const renderRightIcon = () => {
+    if (rightIcon) {
+      return rightIcon;
+    }
+
+    return renderSeal();
+  };
+
   const handleChangeText = (text: string) => {
     onChangeText?.(text);
   };
@@ -71,9 +82,11 @@ export function TextInput({
   return (
     <Tooltip
       isOpenedByVariantError={hasError}
-      message="This is a error"
+      message={error}
       variant={TooltipVariantEnum.ERROR}
       className={tooltipClassName}
+      pointerClassName={tooltipPointerClassName}
+      containerClassName={tooltipContainerClassName}
     >
       <Pressable
         testID={containerTestID}
@@ -134,7 +147,8 @@ export function TextInput({
             }}
           />
         </View>
-        {renderSeal()}
+
+        {renderRightIcon()}
       </Pressable>
     </Tooltip>
   );

package/src/components/TextInput/types.ts

@@ -19,6 +19,9 @@ export interface TextInputProps
   labelClassName?: string;
   containerTestID?: string;
   tooltipClassName?: string;
+  tooltipPointerClassName?: string;
+  tooltipContainerClassName?: string;
+  rightIcon?: React.ReactNode;
   onChangeText?: (text: string) => void;
   ref?: React.RefObject<RNTextInput | null>;
 }

package/src/components/Title/components/icon/types.ts

@@ -1,17 +1,9 @@
-import { SizeEnum } from "../../../../enums";
-
-export enum IconVariants {
-  SUCCESS = "success",
-  ERROR = "error",
-  WARNING = "warning",
-  ADD = "add",
-  CUSTOM = "custom",
-}
+import { StateVariantEnum, SizeEnum } from "../../../../enums";
 
 export type IconSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
 
 export interface IconProps {
-  variants: IconVariants;
+  variants: StateVariantEnum;
   size?: IconSize;
   customIcon?: React.ReactNode;
 }

package/src/components/Tooltip/types.ts

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

package/src/components/index.ts

@@ -68,3 +68,6 @@ export * from "./RadioInput/enums";
 export * from "./IconButton";
 export type * from "./IconButton/types";
 export * from "./IconButton/enums";
+
+export * from "./PasswordInput";
+export type * from "./PasswordInput/types";

package/src/enums/index.ts

@@ -1,2 +1,3 @@
 export * from "./size";
 export * from "./corners";
+export * from "./state-variant";

package/src/enums/state-variant.ts

@@ -0,0 +1,7 @@
+export enum StateVariantEnum {
+  SUCCESS = "success",
+  ERROR = "error",
+  WARNING = "warning",
+  ADD = "add",
+  CUSTOM = "custom",
+}