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

package/src/components/{InputCheckbox → CheckboxInput}/index.tsx

@@ -1,20 +1,21 @@
-import type { InputCheckboxProps } from "./types";
+import type { CheckboxInputProps } from "./types";
 import { CheckboxVariantEnum, SelectVariantEnum } from "./enums";
-import { inputCheckboxVariants } from "./assets/class-variants";
+import { checkboxInputVariants } from "./assets/class-variants";
 import { TouchableOpacity, View } from "react-native";
 import { CheckIcon, IndeterminateIcon } from "./icons";
 
-export function InputCheckbox(props: InputCheckboxProps) {
+export function CheckboxInput(props: CheckboxInputProps) {
   const {
     isChecked = false,
     selectType = SelectVariantEnum.SELECTED,
     variant = CheckboxVariantEnum.JAVA,
     onChange,
-    disabled = false
+    disabled = false,
+    className,
   } = props;
 
   function handleChange() {
-    onChange(!isChecked);
+    onChange?.(!isChecked);
   }
 
   function renderIcon() {
@@ -37,12 +38,13 @@ export function InputCheckbox(props: InputCheckboxProps) {
         accessible
         accessibilityRole="checkbox"
         accessibilityState={{ checked: isChecked }}
+        className={className}
       >
         <View
-          className={inputCheckboxVariants({
+          className={checkboxInputVariants({
             variant,
             disabled,
-            isChecked
+            isChecked,
           })}
         >
           {renderIcon()}
@@ -50,4 +52,4 @@ export function InputCheckbox(props: InputCheckboxProps) {
       </TouchableOpacity>
     </View>
   );
-}
+}

package/src/components/{InputCheckbox → CheckboxInput}/types.ts

@@ -4,10 +4,11 @@ export type CheckboxVariant = CheckboxVariantEnum;
 
 export type CheckboxSelectType = SelectVariantEnum;
 
-export interface InputCheckboxProps {
+export interface CheckboxInputProps {
   isChecked?: boolean;
   selectType?: CheckboxSelectType;
   variant?: CheckboxVariant;
   disabled?: boolean;
-  onChange(value: boolean): void;
+  className?: string;
+  onChange?(value: boolean): void;
 }

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

@@ -5,8 +5,8 @@ export const chipVariants = cva(
   {
     variants: {
       size: {
-        medium: "min-w-[64px] max-h-700 h-full p-300 gap-300 rounded-500",
-        large: "min-w-[86px] max-h-800 h-full p-400 gap-400 rounded-600",
+        medium: "min-w-[64px] h-700 px-300 gap-300 rounded-500",
+        large: "min-w-[86px] h-800 px-400 gap-400 rounded-600",
       },
       variant: {
         filled: "",

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

@@ -1,2 +1 @@
 export * from "./chip-variant";
-export * from "./chip-size";

package/src/components/Chip/index.tsx

@@ -1,24 +1,26 @@
 import { merge } from "@kivid/tailwind-preset";
-import type { ChipProps } from "./types";
+import type { ChipProps, ChipSize, ChipVariant } from "./types";
 import { chipVariants } from "./assets/class-variants";
 import { Seal } from "../Seal";
-import { Text, View } from "react-native";
+import { View } from "react-native";
 import { SealVariantEnum } from "../Seal/enums";
+import { Typography } from "../Typography";
+import { SizeEnum } from "../../enums";
 
 export function Chip(props: ChipProps) {
   const {
     label,
     className,
     sealVariant = SealVariantEnum.ADD,
-    size = "medium",
+    size = SizeEnum.MEDIUM,
     variant = "outline",
   } = props;
 
-  const labelStyles = merge(
-    "mx-auto",
-    size === "medium" ? "text-label_small_700" : "text-label_medium_700",
-    variant === "filled" ? "text-chia-200" : "text-chia-900"
-  );
+  const typographyVariant =
+    size === SizeEnum.MEDIUM ? "label_small" : "label_medium";
+
+  const textColorClass =
+    variant === "filled" ? "text-chia-200" : "text-chia-900";
 
   return (
     <View
@@ -27,9 +29,17 @@ export function Chip(props: ChipProps) {
       <Seal
         variant={sealVariant}
         inverted={variant === "filled"}
-        size="small"
+        size={SizeEnum.SMALL}
       />
-      <Text className={labelStyles}>{label}</Text>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={merge("mx-auto", textColorClass)}
+      >
+        {label}
+      </Typography>
     </View>
   );
 }
+
+export { ChipProps, ChipSize, ChipVariant };

package/src/components/Chip/types.ts

@@ -1,7 +1,8 @@
 import type { SealVariant } from "../Seal/types";
-import { ChipSizeEnum, ChipVariantEnum } from "./enums";
+import { ChipVariantEnum } from "./enums";
+import { SizeEnum } from "../../enums";
 
-export type ChipSize = ChipSizeEnum;
+export type ChipSize = SizeEnum.MEDIUM | SizeEnum.LARGE;
 export type ChipVariant = ChipVariantEnum;
 
 export interface ChipProps {

package/src/components/HighlightedText/index.tsx

@@ -1,38 +1,58 @@
 import type { HighlightedTextProps } from "./types";
-import { merge } from "@kivid/tailwind-preset";
-import { Text } from "react-native";
+import { Typography } from "../Typography";
 
 export function HighlightedText(props: HighlightedTextProps) {
   const {
     text,
     highlightText,
     className,
-    highlightTextClassName,
     reverse,
-    ref,
+    highlightedTextProps = {},
+    variant = "label_medium",
+    weight = "400",
     ...rest
   } = props;
 
-  const mergeClassName = merge("text-label_medium_300", className);
-  const mergeHighlightClassName = merge(
-    "text-label_medium_700",
-    highlightTextClassName
-  );
-
   if (reverse) {
     return (
-      <Text ref={ref} className={mergeClassName} {...rest}>
-        <Text className={mergeHighlightClassName}>{highlightText}</Text> {text}
-      </Text>
+      <Typography
+        variant={variant}
+        weight={weight}
+        className={className}
+        {...rest}
+      >
+        <Typography
+          variant={highlightedTextProps.variant}
+          weight={highlightedTextProps.weight}
+          {...highlightedTextProps}
+        >
+          {highlightText}
+        </Typography>{" "}
+        {text}
+      </Typography>
     );
   }
 
   return (
-    <Text ref={ref} className={mergeClassName} {...rest}>
-      {text} <Text className={mergeHighlightClassName}>{highlightText}</Text>
-    </Text>
+    <Typography
+      variant={variant}
+      weight={weight}
+      className={className}
+      {...rest}
+    >
+      {text}{" "}
+      <Typography
+        variant={highlightedTextProps.variant || "label_medium"}
+        weight={highlightedTextProps.weight || "700"}
+        {...highlightedTextProps}
+      >
+        {highlightText}
+      </Typography>
+    </Typography>
   );
 }
 
 HighlightedText.displayName = "HighlightedText";
 export default HighlightedText;
+
+export { HighlightedTextProps };

package/src/components/HighlightedText/types.ts

@@ -1,10 +1,16 @@
-import { Text, TextProps } from "react-native";
+import { TextProps } from "react-native";
+import type { TypographyProps } from "../Typography/types";
 
 export interface HighlightedTextProps extends TextProps {
   text: string;
   highlightText?: string;
-  highlightTextClassName?: string;
   className?: string;
-  ref?: React.RefObject<Text | null>;
   reverse?: boolean;
+  variant?: TypographyProps["variant"];
+  weight?: TypographyProps["weight"];
+  highlightedTextProps?: {
+    className?: string;
+    variant?: TypographyProps["variant"];
+    weight?: TypographyProps["weight"];
+  };
 }

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

@@ -0,0 +1,126 @@
+import { cva } from "class-variance-authority";
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "../enums";
+
+const buttonVariants = cva(
+  [
+    "flex flex-row items-center justify-center max-w-fit",
+    "disabled:cursor-not-allowed",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        [IconButtonVariantEnum.GRAPE]: [
+          "bg-grape-500",
+          "disabled:bg-grape-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.JAVA]: [
+          "bg-java-500",
+          "disabled:bg-java-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.PEAR]: [
+          "bg-pear-500",
+          "disabled:bg-pear-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.TANGERINE]: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.PITAYA]: [
+          "bg-pitaya-500 border border-pitaya-500",
+          "disabled:bg-pitaya-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.BLACKBERRY]: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.CHIA]: [
+          "bg-chia-700",
+          "disabled:bg-chia-700 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.OUTLINE]: [
+          "bg-chia-100 border-100 border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50",
+        ],
+        [IconButtonVariantEnum.GHOST]: [
+          "bg-transparent",
+          "disabled:opacity-30",
+        ],
+      },
+      size: {
+        [IconButtonSizeEnum.SMALL]: "px-400 py-300",
+        [IconButtonSizeEnum.MEDIUM]: "px-500 py-400",
+        [IconButtonSizeEnum.LARGE]: "px-600 py-400",
+        [IconButtonSizeEnum.XLARGE]: "px-700 py-500",
+        [IconButtonSizeEnum.XXLARGE]: "px-800 py-600",
+      },
+      corners: {
+        [IconButtonCornersEnum.SMALL]: "rounded-500",
+        [IconButtonCornersEnum.MEDIUM]: "rounded-700",
+      },
+      selected: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: IconButtonVariantEnum.GRAPE,
+        selected: true,
+        className: "bg-grape-600",
+      },
+      {
+        variant: IconButtonVariantEnum.JAVA,
+        selected: true,
+        className: "bg-java-600",
+      },
+      {
+        variant: IconButtonVariantEnum.PEAR,
+        selected: true,
+        className: "bg-pear-600",
+      },
+      {
+        variant: IconButtonVariantEnum.TANGERINE,
+        selected: true,
+        className: "bg-tangerine-600",
+      },
+      {
+        variant: IconButtonVariantEnum.BLACKBERRY,
+        selected: true,
+        className: "bg-blackberry-600",
+      },
+      {
+        variant: IconButtonVariantEnum.CHIA,
+        selected: true,
+        className: "bg-chia-600",
+      },
+      {
+        variant: IconButtonVariantEnum.OUTLINE,
+        selected: true,
+        className: "bg-outline-600",
+      },
+      {
+        variant: IconButtonVariantEnum.PITAYA,
+        selected: true,
+        className: "bg-pitaya-600",
+      },
+      {
+        variant: IconButtonVariantEnum.GHOST,
+        selected: true,
+        className: "bg-grape-100 border-100 border-grape-300",
+      },
+    ],
+    defaultVariants: {
+      variant: IconButtonVariantEnum.GRAPE,
+      size: IconButtonSizeEnum.MEDIUM,
+      corners: IconButtonCornersEnum.MEDIUM,
+      selected: false,
+    },
+  }
+);
+
+export { buttonVariants };

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

@@ -0,0 +1,246 @@
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "../enums";
+
+interface DesignSystemShowcaseItem {
+  size: IconButtonSizeEnum;
+  variant: IconButtonVariantEnum;
+  corners: IconButtonCornersEnum;
+  disabled?: boolean;
+  selected?: boolean;
+  loading?: boolean;
+}
+
+interface DesignSystemShowcaseButtonProps {
+  title: string;
+  buttons: {
+    [key: string]: DesignSystemShowcaseItem[];
+  };
+}
+
+const makeVariantSet = (
+  size: IconButtonSizeEnum,
+  variant: IconButtonVariantEnum
+): DesignSystemShowcaseItem[] => [
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, selected: true },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, disabled: true },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, loading: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, selected: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, disabled: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, loading: true },
+];
+
+export const designSystemShowcase: Record<
+  IconButtonSizeEnum,
+  DesignSystemShowcaseButtonProps
+> = {
+  [IconButtonSizeEnum.SMALL]: {
+    title: "Small Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.MEDIUM]: {
+    title: "Medium Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.LARGE]: {
+    title: "Large Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.XLARGE]: {
+    title: "XLarge Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.XXLARGE]: {
+    title: "2x Large Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+} as const;

package/src/components/IconButton/enums.ts

@@ -0,0 +1,26 @@
+import { CornersEnum, SizeEnum } from "../../enums";
+
+export enum IconButtonVariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  PITAYA = "pitaya",
+  BLACKBERRY = "blackberry",
+  CHIA = "chia",
+  OUTLINE = "outline",
+  GHOST = "ghost",
+}
+
+export enum IconButtonSizeEnum {
+  SMALL = SizeEnum.SMALL,
+  MEDIUM = SizeEnum.MEDIUM,
+  LARGE = SizeEnum.LARGE,
+  XLARGE = SizeEnum.XLARGE,
+  XXLARGE = SizeEnum.XXLARGE,
+}
+
+export enum IconButtonCornersEnum {
+  SMALL = CornersEnum.SMALL,
+  MEDIUM = CornersEnum.MEDIUM,
+}