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

package/src/components/InformationStatus/components/GradientCheck/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Svg, {
   Path,
   Defs,
@@ -8,68 +9,119 @@ import Svg, {
   FeOffset,
   FeGaussianBlur,
   FeComposite,
-  G,
-  SvgProps,
-} from "react-native-svg";
-import { GradientCheckProps } from "./types";
+  G
+} from 'react-native-svg';
+import { GradientCheckProps } from './types';
+import { SizeEnum } from '../../../../enums';
+import { View } from 'react-native';
 
 export function GradientCheck(props: GradientCheckProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+  const { size = SizeEnum.MEDIUM, color = 'currentColor', style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      path: "M12.8985 4.39037C13.4574 4.93089 13.4806 5.83095 12.9504 6.40072L7.97736 11.5567C7.71389 11.8398 7.34787 12.0001 6.96506 12C6.58225 11.9999 6.2163 11.8394 5.95297 11.5562L3.04912 8.40463C2.51919 7.8346 2.54288 6.93454 3.10203 6.3943C3.66118 5.85406 4.54404 5.87821 5.07397 6.44825L6.96589 8.51126L10.9265 4.44334C11.4567 3.87357 12.3396 3.84985 12.8985 4.39037Z",
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_3359_12276",
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16"
+      }
+    },
+    [SizeEnum.MEDIUM]: {
+
+      path: "M19.3477 6.58556C20.186 7.39633 20.2209 8.74643 19.4256 9.60108L11.966 17.335C11.5708 17.7597 11.0218 18.0001 10.4476 18C9.87337 17.9999 9.32445 17.7591 8.92946 17.3342L4.57368 12.6069C3.77879 11.7519 3.81432 10.4018 4.65304 9.59146C5.49176 8.7811 6.81606 8.81732 7.61095 9.67237L10.4488 12.7669L16.3897 6.66501C17.185 5.81035 18.5094 5.77478 19.3477 6.58556Z",
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_259",
+        x: "4",
+        y: "6",
+        width: "17",
+        height: "13",
+      },
+    },
+
+    [SizeEnum.LARGE]: {
+      path: "M25.7969 8.78074C26.9147 9.86178 26.9612 11.6619 25.9008 12.8014L15.9547 23.1133C15.4278 23.6796 14.6957 24.0002 13.9301 24C13.1645 23.9998 12.4326 23.6789 11.9059 23.1123L6.09823 16.8093C5.03838 15.6692 5.08576 13.8691 6.20406 12.7886C7.32235 11.7081 9.08808 11.7564 10.1479 12.8965L13.9318 17.0225L21.853 8.88667C22.9134 7.74713 24.6791 7.69971 25.7969 8.78074Z",
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_249",
+        x: "5.33333",
+        y: "8",
+        width: "22.3333",
+        height: "17",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size];
+  const filterId = config.filter.id;
+  const sizeMapped = SIZE_MAP[size];
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12276)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12.8985 4.39037C13.4574 4.93089 13.4806 5.83095 12.9504 6.40072L7.97736 11.5567C7.71389 11.8398 7.34787 12.0001 6.96506 12C6.58225 11.9999 6.2163 11.8394 5.95297 11.5562L3.04912 8.40463C2.51919 7.8346 2.54288 6.93454 3.10203 6.3943C3.66118 5.85406 4.54404 5.87821 5.07397 6.44825L6.96589 8.51126L10.9265 4.44334C11.4567 3.87357 12.3396 3.84985 12.8985 4.39037Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12276"
-          x="2.66667"
-          y="4"
-          width="11.6667"
-          height="9"
-          filterUnits="userSpaceOnUse"
-        >
-          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
-          <FeBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <FeColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <FeOffset dx="1" dy="1" />
-          <FeGaussianBlur stdDeviation="1" />
-          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <FeColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.215686 0 0 0 0 0.886275 0 0 0 0 0.439216 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12276"
+    <View style={[{ width: sizeMapped, height: sizeMapped }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={config.viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={config.path}
+            fill="currentColor"
           />
-        </Filter>
-      </Defs>
-    </Svg>
+        </G>
+        <Defs>
+          <Filter
+            id={filterId}
+            x={config.filter.x}
+            y={config.filter.y}
+            width={config.filter.width}
+            height={config.filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <FeColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <FeOffset dx="1" dy="1" />
+            <FeGaussianBlur stdDeviation="1" />
+            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <FeColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.215686 0 0 0 0 0.886275 0 0 0 0 0.439216 0 0 0 0.4 0"
+            />
+            <FeBlend
+              mode="normal"
+              in2="shape"
+              result={`effect1_innerShadow_${filterId}`}
+            />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
-}
+}

package/src/components/InformationStatus/components/GradientCheck/types.ts

@@ -1,6 +1,6 @@
 import { SvgProps } from "react-native-svg";
-
-export interface GradientCheckProps extends SvgProps {
-  size?: number;
+import { SizeEnum } from "../../../../enums";
+export interface GradientCheckProps extends Omit<SvgProps, "width" | "height"> {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   color?: string;
 }

package/src/components/InformationStatus/components/GradientClose/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg, {
   Path,
   Defs,
@@ -9,65 +10,117 @@ import Svg, {
   FeGaussianBlur,
   FeComposite,
   G,
-  SvgProps,
 } from "react-native-svg";
 import { GradientCloseProps } from "./types";
+import { SizeEnum } from "../../../../enums";
+import { View } from "react-native";
 
 export function GradientClose(props: GradientCloseProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+  const { size = SizeEnum.MEDIUM, color = "currentColor", style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      path: "M12.1996 5.86579C12.7827 5.28276 12.7929 4.34777 12.2226 3.77745C11.6523 3.20709 10.7173 3.21738 10.1342 3.80041L8.02294 5.91172L5.86576 3.75449C5.29541 3.18417 4.36043 3.19442 3.7774 3.77745C3.19439 4.36048 3.18411 5.29547 3.75446 5.86579L5.91166 8.02297L3.80036 10.1343C3.21733 10.7173 3.20705 11.6523 3.7774 12.2227C4.34774 12.793 5.28272 12.7827 5.86576 12.1997L7.97706 10.0884L10.1342 12.2456C10.7046 12.8159 11.6396 12.8056 12.2226 12.2227C12.8056 11.6396 12.8159 10.7046 12.2455 10.1343L10.0883 7.97709L12.1996 5.86579Z",
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_8151_1841",
+        x: "3.33333",
+        y: "3.33337",
+        width: "10.3333",
+        height: "10.3334",
+      },
+    },
+    [SizeEnum.MEDIUM]: {
+      path: "M18.2995 8.79862C19.174 7.92408 19.1894 6.5216 18.3339 5.66612C17.4784 4.81057 16.0759 4.82601 15.2014 5.70056L12.0344 8.86751L8.79864 5.63167C7.94313 4.77619 6.54065 4.79157 5.6661 5.66612C4.79159 6.54067 4.77618 7.94314 5.63169 8.79862L8.86749 12.0344L5.70054 15.2013C4.826 16.0759 4.81058 17.4784 5.6661 18.3339C6.52162 19.1894 7.92409 19.174 8.79864 18.2995L11.9656 15.1325L15.2014 18.3683C16.0569 19.2238 17.4594 19.2084 18.3339 18.3339C19.2084 17.4594 19.2238 16.0569 18.3683 15.2013L15.1325 11.9656L18.2995 8.79862Z",
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_1845",
+        x: "5",
+        y: "5",
+        width: "15",
+        height: "15",
+      },
+    },
+    [SizeEnum.LARGE]: {
+      path: "M24.3993 11.7315C25.5653 10.5654 25.5859 8.69543 24.4452 7.55478C23.3045 6.41405 21.4346 6.43464 20.2685 7.60071L16.0459 11.8233L11.7315 7.50886C10.5908 6.36822 8.72087 6.38872 7.55481 7.55478C6.38879 8.72085 6.36824 10.5908 7.50893 11.7315L11.8233 16.0458L7.60073 20.2684C6.43467 21.4345 6.41412 23.3044 7.55481 24.4452C8.69549 25.5858 10.5655 25.5653 11.7315 24.3993L15.9541 20.1767L20.2685 24.491C21.4092 25.6318 23.2791 25.6112 24.4452 24.4452C25.6112 23.2791 25.6318 21.4092 24.4911 20.2684L20.1767 15.9541L24.3993 11.7315Z",
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_1851",
+        x: "6.66667",
+        y: "6.66663",
+        width: "19.6667",
+        height: "19.6666",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size] || ICON_CONFIG[SizeEnum.MEDIUM];
+  const filterId = config.filter.id;
+  const iconSize = SIZE_MAP[size] || 24;
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12279)">
-        <Path
-          d="M12.1996 5.86591C12.7827 5.28288 12.7929 4.3479 12.2226 3.77757C11.6523 3.20721 10.7173 3.2175 10.1342 3.80054L8.02294 5.91184L5.86576 3.75461C5.29541 3.18429 4.36043 3.19454 3.7774 3.77757C3.19439 4.36061 3.18411 5.29559 3.75446 5.86591L5.91166 8.02309L3.80036 10.1344C3.21733 10.7174 3.20705 11.6524 3.7774 12.2228C4.34774 12.7931 5.28272 12.7828 5.86576 12.1998L7.97706 10.0885L10.1342 12.2457C10.7046 12.8161 11.6396 12.8058 12.2226 12.2228C12.8056 11.6397 12.8159 10.7048 12.2455 10.1344L10.0883 7.97721L12.1996 5.86591Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12279"
-          x="3.33333"
-          y="3.3335"
-          width="10.3333"
-          height="10.3335"
-          filterUnits="userSpaceOnUse"
-        >
-          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
-          <FeBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <FeColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
+    <View style={[{ width: iconSize, height: iconSize }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={config.viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={config.path}
+            fill="currentColor"
           />
-          <FeOffset dx="1" dy="1" />
-          <FeGaussianBlur stdDeviation="1" />
-          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <FeColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.898039 0 0 0 0 0.270588 0 0 0 0 0.270588 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12279"
-          />
-        </Filter>
-      </Defs>
-    </Svg>
+        </G>
+        <Defs>
+          <Filter
+            id={filterId}
+            x={config.filter.x}
+            y={config.filter.y}
+            width={config.filter.width}
+            height={config.filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <FeColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <FeOffset dx="1" dy="1" />
+            <FeGaussianBlur stdDeviation="1" />
+            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <FeColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.898039 0 0 0 0 0.270588 0 0 0 0 0.270588 0 0 0 0.4 0"
+            />
+            <FeBlend
+              mode="normal"
+              in2="shape"
+              result={`effect1_innerShadow_${filterId}`}
+            />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
 }
+

package/src/components/InformationStatus/components/GradientClose/types.ts

@@ -1,6 +1,7 @@
 import { SvgProps } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export interface GradientCloseProps extends SvgProps {
-  size?: number;
+export interface GradientCloseProps extends Omit<SvgProps, "width" | "height"> {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   color?: string;
 }

package/src/components/InformationStatus/index.tsx

@@ -9,28 +9,29 @@ import { InformationStatusOptionsEnum } from "./enums";
 import { cva } from "class-variance-authority";
 import { merge } from "@kivid/tailwind-preset";
 import { View } from "react-native";
+import { SizeEnum } from "../../enums";
 
 export function InformationStatus(props: InformationStatusProps) {
-  const { status, size = "medium", square = false, className, style } = props;
-
-  const mappedIconSize = {
-    small: 16,
-    medium: 24,
-    large: 32,
-  }[size];
+  const {
+    status,
+    size = SizeEnum.MEDIUM,
+    square = false,
+    className,
+    style,
+  } = props;
 
   const iconMap = {
     [InformationStatusOptionsEnum.SUCCESS]: () => (
-      <GradientCheck size={mappedIconSize} color="#F2F7F7" />
+      <GradientCheck size={size} color="#F2F7F7" />
     ),
     [InformationStatusOptionsEnum.ERROR]: () => (
-      <GradientClose size={mappedIconSize} color="#F2F7F7" />
+      <GradientClose size={size} color="#F2F7F7" />
     ),
     [InformationStatusOptionsEnum.WARNING]: () => (
-      <GradientAlert size={mappedIconSize} color="#F2F7F7" />
+      <GradientAlert size={size} color="#F2F7F7" />
     ),
     [InformationStatusOptionsEnum.ADD]: () => (
-      <GradientAdd size={mappedIconSize} color="#F2F7F7" />
+      <GradientAdd size={size} color="#F2F7F7" />
     ),
   };
 
@@ -45,9 +46,9 @@ export function InformationStatus(props: InformationStatusProps) {
           warning: "bg-tangerine-500",
         },
         size: {
-          small: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
-          medium: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
-          large: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
+          [SizeEnum.SMALL]: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
+          [SizeEnum.MEDIUM]: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
+          [SizeEnum.LARGE]: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
         },
         square: {
           true: "rounded-700",

package/src/components/InformationStatus/types.ts

@@ -1,10 +1,16 @@
 import { StyleProp, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { InformationStatusOptionsEnum } from "./enums";
+import { SizeEnum } from "../../enums";
+
+export type InformationStatusSize =
+  | SizeEnum.SMALL
+  | SizeEnum.MEDIUM
+  | SizeEnum.LARGE;
 
 export interface InformationStatusProps {
   status: InformationStatusOptionsEnum;
-  size?: "small" | "medium" | "large";
+  size?: InformationStatusSize;
   square?: boolean;
   className?: string;
   style?: StyleProp<ViewStyle>;

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

@@ -0,0 +1,78 @@
+import { cva } from "class-variance-authority";
+import { ListButtonVariantEnum } from "../enums";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+const buttonVariants = cva(
+  [
+    "flex flex-row items-center justify-between w-full",
+    "font-bold",
+    "disabled:cursor-not-allowed",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        [ListButtonVariantEnum.GRAPE]: [
+          "bg-grape-500",
+          "disabled:bg-grape-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.JAVA]: [
+          "bg-java-500",
+          "disabled:bg-java-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.PEAR]: [
+          "bg-pear-500",
+          "disabled:bg-pear-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.TANGERINE]: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.BLACKBERRY]: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.CHIA]: [
+          "bg-chia-700",
+          "disabled:bg-chia-700 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.OUTLINE]: [
+          "bg-chia-100 text-chia-900 border border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
+        ],
+      },
+      size: {
+        [SizeEnum.SMALL]: "py-400 pr-400 pl-600",
+        [SizeEnum.MEDIUM]: "py-500 pr-400 pl-600",
+        [SizeEnum.LARGE]: "py-600 pr-400 pl-600",
+      },
+      corners: {
+        [CornersEnum.SMALL]: "rounded-500",
+        [CornersEnum.MEDIUM]: "rounded-700",
+      },
+    },
+    defaultVariants: {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+    },
+  }
+);
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      grape: "text-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",
+      glass: "text-chia-900",
+      ghost: "text-chia-900",
+    },
+  },
+});
+
+export { buttonVariants, textVariants };