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

package/src/components/ListButton/assets/design-system-showcase.ts

@@ -0,0 +1,502 @@
+import { ListButtonVariantEnum } from "../enums";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+interface ListButtonShowcaseProps {
+  variant: ListButtonVariantEnum;
+  size: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+  corners: CornersEnum.SMALL | CornersEnum.MEDIUM;
+  children: string;
+  iconColor: string;
+  disabled?: boolean;
+  iconLeft?: boolean;
+  iconRight?: boolean;
+}
+
+export const listButtonShowcaseVariants: Record<
+  string,
+  ListButtonShowcaseProps[]
+> = {
+  grape: [
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  java: [
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  pear: [
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  tangerine: [
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  blackberry: [
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  chia: [
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  outline: [
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+};

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

@@ -1,2 +1 @@
 export * from "./variant";
-export * from "./icon-color";

package/src/components/ListButton/index.tsx

@@ -1,29 +1,27 @@
 import { Animated, GestureResponderEvent, Pressable, View } from "react-native";
 import { Typography } from "../Typography";
-import { ListButtonIconColorEnum, ListButtonVariantEnum } from "./enums";
+import { 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 { ChevronRight } from "@kivid/icons/native";
+import { buttonVariants, 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,
+    iconLeft,
+    iconRight,
     children,
-    showChevronIcon = true,
     variant = ListButtonVariantEnum.GRAPE,
     size = SizeEnum.SMALL,
     corners = CornersEnum.SMALL,
     disabled = false,
     className,
+    iconLeftContainerClassName,
+    iconRightContainerClassName,
     accessibilityLabel,
+    numberOfLines = 1,
     onPressIn,
     onPressOut,
     ...rest
@@ -43,17 +41,6 @@ export function ListButton(props: ListButtonProps) {
 
   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,
@@ -74,50 +61,66 @@ 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">
+        <ChevronRight color={chevronIconColor} />
+      </View>
+    );
+  }
+
   return (
     <Animated.View
       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={iconButtonVariants({ showChevronIcon })}>
-          <View className="mr-400 flex items-center">
-            {icon ?? <ChatbubbleEllipses size={24} color={mappedIconColor} />}
-          </View>
-
+        <View className="flex flex-row items-center flex-1">
+          {renderLeftIcon()}
           <Typography
+            ellipsizeMode="tail"
             variant={typographyVariant}
             weight="700"
-            className={merge(textStyle, "truncate mr-700")}
+            className={merge(textStyle, "truncate flex-1 ")}
+            numberOfLines={numberOfLines}
           >
             {children}
           </Typography>
         </View>
 
-        {showChevronIcon && (
-          <View className="flex items-center">
-            <ChevronRight color={chevronIconColor} />
-          </View>
-        )}
+        {renderRightIcon()}
       </Pressable>
     </Animated.View>
   );

package/src/components/ListButton/types.ts

@@ -1,20 +1,22 @@
 import type { VariantProps } from "class-variance-authority";
 import type { buttonVariants } from "./assets/class-variants";
-import type { ListButtonIconColorEnum, ListButtonVariantEnum } from "./enums";
+import type { 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;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  iconLeftContainerClassName?: React.ReactNode;
+  iconRightContainerClassName?: React.ReactNode;
   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;
+  accessibilityLabel?: string;
+  numberOfLines?: number;
 }

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

@@ -1,7 +1,7 @@
 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",
+  "h-1000 flex-1 text-center text-3 font-bold leading-1300 border-100 bg-chia-100 placeholder-chia-400",
   {
     variants: {
       rounded: {