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

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 };