@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.21

package/src/components/ActionButton/index.tsx

@@ -0,0 +1,147 @@
+import { merge } from "@kivid/tailwind-preset";
+import React from "react";
+import { Pressable, View } from "react-native";
+import { CornersEnum, FontWeightEnum } from "../../enums";
+import { Typography } from "../Typography";
+import { menuCardVariants, textVariants } from "./assets/class-variants";
+import type { ActionButtonProps } from "./types";
+
+export function ActionButton(props: ActionButtonProps) {
+  const {
+    icon,
+    primaryText,
+    secondaryText,
+    primaryTextProps = {},
+    secondaryTextProps = {},
+    variant = "grape",
+    corners = CornersEnum.MEDIUM,
+    disabled = false,
+    className,
+    iconContainerClassName,
+    onPress,
+    accessibilityLabel,
+    ref,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  // Map pressed state colors according to Figma design (darker variants)
+  const pressedColorMap: Record<typeof variant, string> = {
+    grape: "bg-grape-700",
+    java: "bg-java-700",
+    pear: "bg-pear-700",
+    tangerine: "bg-tangerine-700",
+    blackberry: "bg-blackberry-700",
+    chia: "bg-chia-800",
+    outline: "border-chia-600",
+  };
+
+  const containerStyle = merge(
+    menuCardVariants({
+      variant,
+      corners,
+    }),
+    isPressed && !disabled && pressedColorMap[variant],
+    className
+  );
+
+  // Define icon colors based on variant
+  const iconColorMap = {
+    grape: "text-chia-100", // 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", // chia-900
+  };
+
+  // Clone icon element to pass color prop
+  const iconWithColor = React.isValidElement(icon)
+    ? React.cloneElement(icon as React.ReactElement<any>, {
+        className: merge(
+          iconColorMap[variant],
+          (icon as React.ReactElement<any>).props?.className || ""
+        ),
+      })
+    : icon;
+
+  const handlePressIn = (event: any) => {
+    setIsPressed(true);
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: any) => {
+    setIsPressed(false);
+    onPressOut?.(event);
+  };
+
+  const textStyle = merge(textVariants({ variant }));
+
+  const mergedPrimaryTextProps = {
+    variant: "label_large" as const,
+    weight: FontWeightEnum.MEDIUM as const,
+    ...primaryTextProps,
+    className: merge(
+      textStyle,
+      disabled && "opacity-60",
+      primaryTextProps.className
+    ),
+  };
+
+  const mergedSecondaryTextProps = {
+    variant: "label_large" as const,
+    weight: FontWeightEnum.BOLD as const,
+    ...secondaryTextProps,
+    className: merge(
+      textStyle,
+      disabled && "opacity-60",
+      secondaryTextProps.className
+    ),
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={disabled}
+      className={containerStyle}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={
+        accessibilityLabel ||
+        `${primaryText}${secondaryText ? ` ${secondaryText}` : ""}`
+      }
+      accessibilityState={{
+        disabled: disabled,
+      }}
+      pointerEvents={disabled ? "none" : "auto"}
+      {...rest}
+    >
+      {/* Icon Container */}
+      <View
+        className={merge(
+          "flex items-start shrink-0",
+          disabled && "opacity-60",
+          iconContainerClassName
+        )}
+      >
+        {iconWithColor}
+      </View>
+
+      {/* Label Container */}
+      <View className="shrink-0">
+        <Typography {...mergedPrimaryTextProps}>{primaryText}</Typography>
+        {secondaryText && (
+          <Typography {...mergedSecondaryTextProps}>{secondaryText}</Typography>
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+ActionButton.displayName = "ActionButton";

package/src/components/ActionButton/types.ts

@@ -0,0 +1,76 @@
+import type { VariantProps } from "class-variance-authority";
+import { PressableProps, View } from "react-native";
+import { CornersEnum } from "../../enums";
+import { TypographyProps } from "../Typography/types";
+import { menuCardVariants } from "./assets/class-variants";
+
+export type ActionButtonVariant =
+  | "grape"
+  | "java"
+  | "pear"
+  | "tangerine"
+  | "blackberry"
+  | "chia"
+  | "outline";
+
+export type ActionButtonCorners =
+  | CornersEnum.SMALL
+  | CornersEnum.MEDIUM
+  | CornersEnum.LARGE;
+
+export interface ActionButtonProps
+  extends VariantProps<typeof menuCardVariants>,
+    PressableProps {
+  /**
+   * The icon to display at the top of the card
+   */
+  icon: React.ReactNode;
+  /**
+   * The primary text (main label)
+   */
+  primaryText: string;
+  /**
+   * The secondary text below the primary text
+   */
+  secondaryText?: string;
+  /**
+   * Props to pass to the primary text Typography component
+   */
+  primaryTextProps?: Omit<TypographyProps, "children">;
+  /**
+   * Props to pass to the secondary text Typography component
+   */
+  secondaryTextProps?: Omit<TypographyProps, "children">;
+  /**
+   * Visual style variant of the card
+   */
+  variant?: ActionButtonVariant;
+  /**
+   * Border radius of the card
+   */
+  corners?: ActionButtonCorners;
+  /**
+   * Whether the card is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Additional class names for the main container
+   */
+  className?: string;
+  /**
+   * Additional class names for the icon container
+   */
+  iconContainerClassName?: string;
+  /**
+   * Callback when card is pressed
+   */
+  onPress?: () => void;
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+  /**
+   * Reference to the card element
+   */
+  ref?: React.RefObject<View | null>;
+}

package/src/components/Avatar/assets/class-variants.ts

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
+
+const avatarVariants = cva(
+  "border-[1px] border-chia-400 flex items-center justify-center bg-chia-300",
+  {
+    variants: {
+      size: {
+        [SizeEnum.XLARGE]: "w-[96px] h-[96px] rounded-1000",
+        [SizeEnum.LARGE]: "w-[72px] h-[72px] rounded-900",
+        [SizeEnum.MEDIUM]: "w-[56px] h-[56px] rounded-800",
+        [SizeEnum.SMALL]: "w-[40px] h-[40px] rounded-700",
+        [SizeEnum.XSMALL]: "w-[32px] h-[32px] rounded-600",
+        [SizeEnum.XXSMALL]: "w-[24px] h-[24px] rounded-600",
+      },
+    },
+    defaultVariants: {
+      size: SizeEnum.MEDIUM,
+    },
+  }
+);
+
+export { avatarVariants };

package/src/components/Avatar/index.tsx

@@ -0,0 +1,119 @@
+import type { AvatarProps } from "./types";
+import { ProfileUserStroke } from "@kivid/icons/native";
+import { View, Image } from "react-native";
+import { SizeEnum } from "../../enums";
+import { avatarVariants } from "./assets/class-variants";
+import { merge } from "@kivid/tailwind-preset";
+import Typography from "../Typography";
+
+export function Avatar(props: AvatarProps) {
+  const { src, name, size = SizeEnum.MEDIUM, className } = props;
+
+  const personMappedSize = {
+    [SizeEnum.XLARGE]: 56,
+    [SizeEnum.LARGE]: 48,
+    [SizeEnum.MEDIUM]: 40,
+    [SizeEnum.SMALL]: 32,
+    [SizeEnum.XSMALL]: 24,
+    [SizeEnum.XXSMALL]: 16,
+  }[size];
+
+  const personMappedStrokeWidth = {
+    [SizeEnum.XLARGE]: 1.6,
+    [SizeEnum.LARGE]: 1.6,
+    [SizeEnum.MEDIUM]: 1.6,
+    [SizeEnum.SMALL]: 1.6,
+    [SizeEnum.XSMALL]: 1.5,
+    [SizeEnum.XXSMALL]: 1.125,
+  }[size];
+
+  const avatarStyle = avatarVariants({ size });
+
+  const avatarTextStyleMap = {
+    [SizeEnum.XXSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[15px]",
+    },
+    [SizeEnum.XSMALL]: {
+      variant: "body_small",
+      fontWeight: "700",
+      className: "h-[16px]",
+    },
+    [SizeEnum.SMALL]: {
+      variant: "title_small",
+      fontWeight: "700",
+      className: "h-[18px]",
+    },
+    [SizeEnum.MEDIUM]: {
+      variant: "title_large",
+      fontWeight: "700",
+      className: "h-[18px]",
+    },
+    [SizeEnum.LARGE]: {
+      variant: "headline_small",
+      fontWeight: "700",
+      className: "h-[29px]",
+    },
+    [SizeEnum.XLARGE]: {
+      variant: "headline_medium",
+      fontWeight: "700",
+      className: "h-[30px]",
+    },
+  } as const;
+
+  function renderFallbackType() {
+    if (name && !!name.trim()) {
+      const [firstName, surname] = name.split(" ");
+
+      const hasSurname = !!surname;
+      const hasName = !!firstName;
+
+      const firstLetterOfFirstName = hasName ? firstName?.at(0) : "";
+      const firstLetterOfSurname = hasSurname ? surname?.at(0) : "";
+
+      const firstLetters =
+        `${firstLetterOfFirstName}${firstLetterOfSurname}`.toUpperCase();
+
+      //TODO: line height add spaces on font, and element cant be centered
+      return (
+        <View className={merge(avatarStyle, className)}>
+          <Typography
+            className={merge(
+              avatarTextStyleMap[size].className,
+              "text-chia-600"
+            )}
+            variant={avatarTextStyleMap[size].variant}
+            weight={avatarTextStyleMap[size].fontWeight}
+          >
+            {firstLetters}
+          </Typography>
+        </View>
+      );
+    }
+
+    return (
+      <View className={merge(avatarStyle, className)}>
+        <ProfileUserStroke
+          color="#B6C2C2"
+          size={personMappedSize}
+          strokeWidth={personMappedStrokeWidth}
+        />
+      </View>
+    );
+  }
+
+  if (!src) {
+    return renderFallbackType();
+  }
+
+  return (
+    <View className={merge(avatarStyle, "overflow-hidden", className)}>
+      <Image
+        source={{ uri: src }}
+        className={"object-cover w-full h-full"}
+        accessibilityLabel="Profile Avatar"
+      />
+    </View>
+  );
+}

package/src/components/Avatar/types.ts

@@ -0,0 +1,16 @@
+import { SizeEnum } from "../../enums";
+
+export type AvatarSize =
+  | SizeEnum.XXSMALL
+  | SizeEnum.XSMALL
+  | SizeEnum.SMALL
+  | SizeEnum.MEDIUM
+  | SizeEnum.LARGE
+  | SizeEnum.XLARGE;
+
+export interface AvatarProps {
+  src?: string | null;
+  name?: string;
+  size?: AvatarSize;
+  className?: string;
+}

package/src/components/Button/assets/class-variants.ts

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
+import { SizeEnum, CornersEnum } from "../../../enums";
 
 const buttonVariants = cva(
   [
-    "flex-row items-center justify-center",
+    "flex-row justify-center items-center",
     "font-bold",
     "relative overflow-hidden",
   ],
@@ -32,13 +33,13 @@ const buttonVariants = cva(
         ghost: ["bg-transparent", "disabled:opacity-30"],
       },
       size: {
-        small: ["px-400 h-800"],
-        medium: ["px-600 h-900"],
-        large: ["px-600 h-1000"],
+        [SizeEnum.SMALL]: ["px-400 h-800"],
+        [SizeEnum.MEDIUM]: ["px-600 h-900"],
+        [SizeEnum.LARGE]: ["px-600 h-1000"],
       },
       corners: {
-        small: "rounded-500",
-        medium: "rounded-700",
+        [CornersEnum.SMALL]: "rounded-600",
+        [CornersEnum.MEDIUM]: "rounded-700",
       },
       fullWidth: {
         true: "w-full",
@@ -49,8 +50,8 @@ const buttonVariants = cva(
     },
     defaultVariants: {
       variant: "grape",
-      size: "medium",
-      corners: "medium",
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
       fullWidth: false,
     },
   }
@@ -69,14 +70,12 @@ const textVariants = cva("", {
       glass: "text-chia-900",
       ghost: "text-chia-900",
     },
-    size: {
-      small: "text-label_small_700",
-      medium: "text-label_medium_700",
-      large: "text-label_large_700",
-    },
     selected: {
       true: "",
     },
+    disabled: {
+      true: "",
+    },
   },
   compoundVariants: [
     {
@@ -89,6 +88,21 @@ const textVariants = cva("", {
       selected: true,
       class: "text-chia-900",
     },
+    {
+      variant: "outline",
+      disabled: true,
+      class: "text-chia-700",
+    },
+    {
+      variant: "glass",
+      disabled: true,
+      class: "text-chia-700",
+    },
+    {
+      variant: "ghost",
+      disabled: true,
+      class: "text-chia-700",
+    },
   ],
 });
 

package/src/components/Button/index.tsx

@@ -1,20 +1,29 @@
 import React from "react";
-import { Text, Pressable, Animated, GestureResponderEvent } from "react-native";
+import { Pressable, Animated, GestureResponderEvent } from "react-native";
 import { merge } from "@kivid/tailwind-preset";
 import { LoadingDots } from "../LoadingDots";
 import { LoadingDotsVariant } from "../LoadingDots/types";
-import { ButtonProps, ButtonVariant } from "./types";
+import type {
+  ButtonCorners,
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+} from "./types";
+import { Typography } from "../Typography";
 import {
   textVariants,
   buttonVariants,
   selectedVariants,
 } from "./assets/class-variants";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export function Button(props: ButtonProps) {
   const {
     variant = "grape",
-    size = "large",
-    corners = "medium",
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
     fullWidth = false,
     loading = false,
     selected = false,
@@ -43,12 +52,20 @@ export function Button(props: ButtonProps) {
     ghost: "grape",
   };
 
+  const typographyVariantMap = {
+    small: "label_small",
+    medium: "label_medium",
+    large: "label_large",
+  } as const;
+
+  const typographyVariant = typographyVariantMap[size ?? SizeEnum.MEDIUM];
+
   function renderContent() {
     const textStyle = merge(
       textVariants({
         variant,
-        size,
         selected: selected && (variant === "outline" || variant === "ghost"),
+        disabled,
       })
     );
 
@@ -63,9 +80,14 @@ export function Button(props: ButtonProps) {
     }
 
     return (
-      <Text className={textStyle} numberOfLines={1}>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={textStyle}
+        numberOfLines={1}
+      >
         {children}
-      </Text>
+      </Typography>
     );
   }
 
@@ -101,37 +123,34 @@ export function Button(props: ButtonProps) {
   };
 
   return (
-    <Animated.View
+    <AnimatedPressable
+      ref={ref}
+      disabled={disabled}
+      className={buttonStyle}
       style={{
-        opacity: animatedValue,
+        opacity: disabled ? 0.3 : animatedValue,
+      }}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={
+        accessibilityLabel ||
+        (typeof children === "string" ? children : "Button")
+      }
+      accessibilityState={{
+        disabled: disabled,
+        selected: selected,
+        busy: loading,
       }}
+      pointerEvents={loading || disabled ? "none" : "auto"}
+      {...rest}
     >
-      <Pressable
-        ref={ref}
-        className={buttonStyle}
-        disabled={disabled}
-        onPress={onPress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
-        accessibilityRole="button"
-        accessibilityLabel={
-          accessibilityLabel ||
-          (typeof children === "string" ? children : "Button")
-        }
-        accessibilityState={{
-          disabled: disabled,
-          selected: selected,
-          busy: loading,
-        }}
-        pointerEvents={loading || disabled ? "none" : "auto"}
-        {...rest}
-      >
-        {renderContent()}
-      </Pressable>
-    </Animated.View>
+      {renderContent()}
+    </AnimatedPressable>
   );
 }
 
 Button.displayName = "Button";
 
-export default Button;
+export { ButtonProps, ButtonVariant, ButtonSize, ButtonCorners };

package/src/components/Button/types.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import { buttonVariants } from "./assets/class-variants";
 import { PressableProps, View } from "react-native";
+import { SizeEnum, CornersEnum } from "../../enums";
 
 export type ButtonVariant =
   | "grape"
@@ -13,9 +14,9 @@ export type ButtonVariant =
   | "glass"
   | "ghost";
 
-export type ButtonSize = "small" | "medium" | "large";
+export type ButtonSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
 
-export type ButtonCorners = "small" | "medium";
+export type ButtonCorners = CornersEnum.SMALL | CornersEnum.MEDIUM;
 
 export interface ButtonProps
   extends VariantProps<typeof buttonVariants>,