@kivid/native-components 1.0.0-alpha.24 → 1.0.0-alpha.26

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { View, Pressable } from "react-native";
+import { Typography } from "../Typography";
+import type { DropdownProps } from "./types";
+import { ArrowChevronDownStroke } from "@kivid/icons/native";
+import { IconButton } from "../IconButton";
+import { IconButtonSizeEnum } from "../IconButton/enums";
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../enums";
+import { merge } from "@kivid/tailwind-preset";
+
+export function Dropdown(props: DropdownProps) {
+  const {
+    label,
+    value,
+    placeholder,
+    disabled = false,
+    className,
+    contentBoxClassName,
+    leftButtonText,
+    hidePlaceholder = false,
+    children,
+    iconButtonTrigger,
+    iconButtonAlign = "right",
+    size = SizeEnum.MEDIUM,
+    corner = SizeEnum.SMALL,
+    isActive = false,
+    onActiveChange,
+  } = props;
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    onActiveChange(!isActive);
+  };
+
+  const textStyle = cva("text-chia-900", {
+    variants: {
+      placeholder: {
+        true: "text-chia-600",
+        false: "text-chia-900",
+      },
+    },
+  });
+
+  const dropdownStyle = cva("bg-chia-100 border border-chia-400 px-500 ", {
+    variants: {
+      size: {
+        [SizeEnum.SMALL]: "py-400",
+        [SizeEnum.MEDIUM]: "py-600",
+      },
+      corner: {
+        [SizeEnum.SMALL]: "rounded-400",
+        [SizeEnum.MEDIUM]: "rounded-700",
+      },
+    },
+  });
+
+  const triggerStyle = merge(dropdownStyle({ size, corner }), className);
+  const boxStyle = merge("absolute top-full left-0 w-full mt-100 z-50 bg-white border border-gray-200 rounded-xl shadow-lg", contentBoxClassName);
+
+  const triggerPositionStyle = cva("flex-row w-full", {
+    variants: {
+      align: {
+        left: "justify-start",
+        right: "justify-end",
+        center: "justify-center",
+      },
+    },
+  });
+
+  function renderVariant() {
+    const displayPlaceholder = !!placeholder && !value;
+    if (hidePlaceholder) {
+      return null;
+    }
+
+    return (
+      <View className="flex-row justify-between gap-100">
+        <Typography
+          variant="label_large"
+          weight="700"
+          className={textStyle({ placeholder: displayPlaceholder })}
+        >
+          {displayPlaceholder ? placeholder : value}
+        </Typography>
+      </View>
+    );
+  }
+
+  function renderTrigger() {
+    if (iconButtonTrigger) {
+      return (
+        <View className={triggerPositionStyle({ align: iconButtonAlign })}>
+          <IconButton
+            onPress={handlePress}
+            disabled={disabled}
+            size={IconButtonSizeEnum.MEDIUM}
+            {...iconButtonTrigger}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        className={triggerStyle}
+      >
+        <View className="flex-row justify-between items-center">
+          <View className="">
+            <View className="flex-col">
+              {label && (
+                <Typography
+                  variant="label_small"
+                  weight="600"
+                  className="text-chia-900"
+                >
+                  {label}
+                </Typography>
+              )}
+            </View>
+
+            {renderVariant()}
+          </View>
+
+          <View className="flex-row items-center gap-400">
+            {leftButtonText && (
+              <Typography
+                variant="label_medium"
+                weight="700"
+              >
+                {leftButtonText}
+              </Typography>
+            )}
+            <View
+              style={{
+                transform: [{ rotate: isActive ? "180deg" : "0deg" }],
+              }}
+            >
+              <ArrowChevronDownStroke size={24} className="text-chia-900" />
+            </View>
+          </View>
+        </View>
+      </Pressable>
+    )
+  }
+
+  return (
+    <View className={className}>
+      <View className="relative">
+        {renderTrigger()}
+
+        {isActive && (
+          <>
+            <View className={boxStyle}>
+              {children}
+            </View>
+          </>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/Dropdown/types.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { IconButtonProps } from "../IconButton/types";
+import { SizeEnum } from "../../enums";
+
+export interface DropdownProps {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  contentBoxClassName?: string;
+  leftButtonText?: string;
+  hidePlaceholder?: boolean;
+  children: ReactNode;
+  iconButtonTrigger?: IconButtonProps;
+  iconButtonAlign?: "left" | "right" | "center";
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+  corner?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+  isActive: boolean;
+  onActiveChange: (isActive: boolean) => void;
+}

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

@@ -40,6 +40,10 @@ const buttonVariants = cva(
           "bg-chia-100 text-chia-900 border border-chia-400",
           "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
         ],
+        [ListButtonVariantEnum.GHOST]: [
+          "bg-transparent text-chia-900 border-0",
+          "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
+        ],
       },
       size: {
         [SizeEnum.SMALL]: "py-400 pr-400 pl-600",

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

@@ -499,4 +499,73 @@ export const listButtonShowcaseVariants: Record<
       iconRight: true,
     },
   ],
+  ghost: [
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
 };

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

@@ -6,4 +6,5 @@ export enum ListButtonVariantEnum {
   BLACKBERRY = "blackberry",
   CHIA = "chia",
   OUTLINE = "outline",
+  GHOST = "ghost",
 }

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

@@ -0,0 +1,83 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
+
+const tabContainerVariants = cva(["flex-row w-full"], {
+  variants: {
+    size: {
+      [SizeEnum.MEDIUM]: "",
+      [SizeEnum.SMALL]: "",
+    },
+  },
+  defaultVariants: {
+    size: SizeEnum.MEDIUM,
+  },
+});
+
+const dividerVariants = cva(
+  [
+    "w-full",
+  ],
+  {
+    variants: {
+      selected: {
+        true: "h-200 bg-grape-500",
+        false: "h-[1px] bg-chia-400",
+      },
+      size: {
+        [SizeEnum.MEDIUM]: "mt-500",
+        [SizeEnum.SMALL]: "mt-400",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+      size: SizeEnum.MEDIUM,
+    },
+  }
+);
+
+const tabLabelVariants = cva("", {
+  variants: {
+    selected: {
+      true: "text-chia-900",
+      false: "text-chia-700",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+const tabCountVariants = cva(
+  ["px-300 rounded-300 items-center justify-center ml-400"],
+  {
+    variants: {
+      selected: {
+        true: "bg-grape-500",
+        false: "bg-chia-400",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+);
+
+const tabCountTextVariants = cva("", {
+  variants: {
+    selected: {
+      true: "text-chia-100",
+      false: "text-chia-700",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+export {
+  tabContainerVariants,
+  dividerVariants,
+  tabLabelVariants,
+  tabCountVariants,
+  tabCountTextVariants,
+};

package/src/components/Tab/index.tsx

@@ -0,0 +1,92 @@
+import { Pressable, View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { TabProps } from "./types";
+import {
+  tabContainerVariants,
+  dividerVariants,
+  tabLabelVariants,
+  tabCountVariants,
+  tabCountTextVariants,
+} from "./assets/class-variants";
+import { Typography } from "../Typography";
+import { SizeEnum } from "../../enums";
+
+export function Tab(props: TabProps) {
+  const {
+    items,
+    onTabChange,
+    size = SizeEnum.MEDIUM,
+    className,
+    selectedTab,
+    customDividerColor,
+    customDividerComponent,
+  } = props;
+
+  const handleTabPress = (index: number) => {
+    onTabChange?.(index);
+  };
+
+  const containerStyle = merge(tabContainerVariants({ size }), className);
+
+  return (
+    <View className={containerStyle} accessibilityRole="tablist">
+      {items.map((item, index) => {
+        const selected = selectedTab === index;
+        const buttonStyle = merge("flex-1 flex-col items-center justify-center", className);
+        const labelStyle = tabLabelVariants({ selected });
+        const countTextStyle = tabCountTextVariants({ selected });
+
+        const dividerStyle = (selected && customDividerColor)
+          ? merge(dividerVariants({ selected, size }), customDividerColor)
+          : dividerVariants({ selected, size });
+
+        const countContainerStyle = (selected && customDividerColor)
+          ? merge(tabCountVariants({ selected }), customDividerColor)
+          : tabCountVariants({ selected });
+
+        const renderDivider = () => {
+          if (selected && customDividerComponent) {
+            return customDividerComponent;
+          }
+
+          return (
+            <View className={dividerStyle} />
+          )
+        };
+
+        return (
+          <Pressable
+            key={index}
+            testID={`tab-${index}`}
+            className={buttonStyle}
+            onPress={() => handleTabPress(index)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+          >
+            <View className="flex flex-row">
+              <Typography
+                variant={size === SizeEnum.MEDIUM ? "label_medium" : "label_small"}
+                weight="700"
+                className={labelStyle}
+              >
+                {item.label}
+              </Typography>
+              {item.count !== undefined && (
+                <View className={countContainerStyle}>
+                  <Typography
+                    variant="label_small"
+                    weight="700"
+                    className={countTextStyle}
+                  >
+                    {item.count}
+                  </Typography>
+                </View>
+              )}
+            </View>
+            {renderDivider()}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Tab/types.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { SizeEnum } from "../../enums";
+
+export type TabSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
+
+export interface TabItem {
+  label: string;
+  count?: number;
+}
+
+export interface TabProps{
+  items: TabItem[];
+  onTabChange: (index: number) => void;
+  size?: TabSize;
+  className?: string;
+  customDividerColor?: string;
+  customDividerComponent?: ReactNode;
+  selectedTab: number;
+  selected?: boolean;
+}

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

@@ -0,0 +1,96 @@
+import { cva } from "class-variance-authority";
+
+export const textInputContainerVariants = cva(
+  "flex-row px-600 py-500 border-b border-r border-l border-chia-400 bg-chia-100 min-h-[120px]",
+  {
+    variants: {
+      corners: {
+        small: "rounded-500",
+        medium: "rounded-700",
+      },
+      error: {
+        true: "border-blackberry-500",
+        false: "border-chia-400",
+      },
+      disabled: {
+        true: "opacity-40",
+        false: "",
+      },
+      insideLabel: {
+        true: "border-t-0 rounded-100",
+        false: "border-t",
+      },
+    },
+    compoundVariants: [
+      {
+        insideLabel: true,
+        corners: "small",
+        class: "rounded-bl-500 rounded-br-500",
+      },
+      {
+        insideLabel: true,
+        corners: "medium",
+        class: "rounded-bl-700 rounded-br-700",
+      },
+    ],
+    defaultVariants: {
+      corners: "medium",
+      error: false,
+      disabled: false,
+      insideLabel: false,
+    },
+  }
+);
+
+export const labelVariant = cva("flex-row w-full justify-between", {
+  variants: {
+    insideLabel: {
+      true: "border-t border-l border-r border-chia-400 bg-chia-100 px-600 pt-500",
+      false: "mb-400",
+    },
+    corners: {
+      small: "rounded-tl-500 rounded-tr-500",
+      medium: "rounded-tl-700 rounded-tr-700",
+    },
+  },
+  defaultVariants: {
+    insideLabel: false,
+    corners: "medium",
+  },
+})
+
+export const textInputFieldVariants = cva(
+  "flex-1 font-nunito-bold text-[16px] leading-[20px] placeholder:text-chia-600 android:p-0 min-w-0",
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: "",
+      },
+      isValid: {
+        true: "text-chia-900",
+        false: "",
+      },
+      error: {
+        true: "text-blackberry-500",
+        false: "",
+      },
+      showLabel: {
+        true: "min-h-700",
+        false: "min-h-800",
+      },
+      size: {
+        small: "ios:pt-[3px]",
+        medium: "ios:pt-[3px]",
+        large: "ios:pt-[2px]",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+      isValid: false,
+      error: false,
+      showLabel: false,
+      size: "large",
+    },
+  }
+);

package/src/components/TextAreaInput/enums.ts

@@ -0,0 +1,4 @@
+export enum TextAreaInputCornersEnum {
+  SMALL = "small",
+  MEDIUM = "medium",
+}

package/src/components/TextAreaInput/index.tsx

@@ -0,0 +1,119 @@
+import { View, TextInput as RNTextInput, Pressable } from 'react-native';
+
+import { TextAreaInputProps } from './types';
+import { Tooltip } from '../Tooltip';
+import { TooltipVariantEnum } from '../Tooltip/enum';
+import Typography from '../Typography';
+import { TextAreaInputCornersEnum } from './enums';
+import { labelVariant, textInputContainerVariants, textInputFieldVariants } from './assets/class-variants';
+import { merge } from '@kivid/tailwind-preset';
+import { useRef } from 'react';
+
+export function TextAreaInput(props: TextAreaInputProps) {
+  const {
+    value,
+    onChangeText,
+    onBlur,
+    placeholder,
+    label,
+    error,
+    maxLength = 200,
+    disabled = false,
+    corners = TextAreaInputCornersEnum.MEDIUM,
+    insideLabel = false,
+    className,
+    inputClassName,
+    labelClassName,
+    tooltipClassName,
+    tooltipPointerClassName,
+    tooltipContainerClassName,
+    showMaxLength = true,
+    containerTestID,
+    ...rest
+  } = props;
+  const currentLength = value?.length || 0;
+  const hasLabel = !!label;
+  const hasError = !!error;
+
+  const inputRef = useRef<RNTextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    if (text.length <= maxLength) {
+      onChangeText?.(text);
+    }
+  };
+
+  const formattedCurrentLength = currentLength.toString().padStart(3, '0');
+
+  return (
+    <Tooltip
+      isOpenedByVariantError={hasError}
+      message={error}
+      variant={TooltipVariantEnum.ERROR}
+      className={tooltipClassName}
+      pointerClassName={tooltipPointerClassName}
+      containerClassName={tooltipContainerClassName}
+    >
+      <View className={labelVariant({ insideLabel, corners })}>
+        {label && (
+          <Typography
+            variant="label_small"
+            weight="600"
+            className={merge("text-chia-900", labelClassName)}
+          >
+            {label}
+          </Typography>
+        )}
+
+        {showMaxLength && (
+          <Typography
+            variant="label_small"
+            weight="500"
+            className="text-chia-600"
+          >
+            {formattedCurrentLength}/{maxLength}
+          </Typography>
+        )}
+      </View>
+
+      <Pressable
+        testID={containerTestID}
+        className={merge(
+          textInputContainerVariants({
+            corners,
+            error: !!error,
+            disabled,
+            insideLabel,
+          }),
+          className
+        )}
+        onPress={() => {
+          if (!disabled) {
+            inputRef.current?.focus();
+          }
+        }}
+        disabled={disabled}
+      >
+        <RNTextInput
+          value={value}
+          onChangeText={handleChangeText}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          multiline
+          maxLength={maxLength}
+          placeholderTextColor="#9CA3AF"
+          textAlignVertical="top"
+          className={merge(
+            textInputFieldVariants({
+              disabled,
+              error: hasError,
+              showLabel: hasLabel,
+            }),
+            inputClassName
+          )}
+          {...rest}
+        />
+      </Pressable>
+    </Tooltip>
+  );
+}