@kivid/native-components 1.0.0-alpha.1 → 1.0.0-alpha.11

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

@@ -0,0 +1 @@
+export * from "./variant";

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,128 @@
+import { Animated, GestureResponderEvent, Pressable, View } from "react-native";
+import { Typography } from "../Typography";
+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 { merge } from "@kivid/tailwind-preset";
+import { useRef } from "react";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function ListButton(props: ListButtonProps) {
+  const {
+    iconLeft,
+    iconRight,
+    children,
+    variant = ListButtonVariantEnum.GRAPE,
+    size = SizeEnum.SMALL,
+    corners = CornersEnum.SMALL,
+    disabled = false,
+    className,
+    iconLeftContainerClassName,
+    iconRightContainerClassName,
+    accessibilityLabel,
+    numberOfLines = 1,
+    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 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);
+  };
+
+  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 (
+    <AnimatedPressable
+      className={merge(
+        buttonVariants({
+          variant,
+          size,
+          corners,
+        }),
+        className
+      )}
+      style={{
+        opacity: animatedValue,
+      }}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={
+        accessibilityLabel ??
+        (typeof children === "string" ? children : undefined)
+      }
+      accessibilityState={{
+        disabled: disabled,
+      }}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      {...rest}
+    >
+      <View className="flex flex-row items-center flex-1">
+        {renderLeftIcon()}
+        <Typography
+          ellipsizeMode="tail"
+          variant={typographyVariant}
+          weight="700"
+          className={merge(textStyle, "truncate flex-1 ")}
+          numberOfLines={numberOfLines}
+        >
+          {children}
+        </Typography>
+      </View>
+
+      {renderRightIcon()}
+    </AnimatedPressable>
+  );
+}

package/src/components/ListButton/types.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from "class-variance-authority";
+import type { buttonVariants } from "./assets/class-variants";
+import type { ListButtonVariantEnum } from "./enums";
+import { PressableProps } from "react-native";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+export interface ListButtonProps
+  extends PressableProps,
+    VariantProps<typeof buttonVariants> {
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  iconLeftContainerClassName?: React.ReactNode;
+  iconRightContainerClassName?: React.ReactNode;
+  children: React.ReactNode;
+  variant?: ListButtonVariantEnum;
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+  corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;
+  className?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  numberOfLines?: number;
+}

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