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

package/src/components/IconButton/index.tsx

@@ -0,0 +1,123 @@
+import { Animated, GestureResponderEvent, Pressable, View } from "react-native";
+import type { IconButtonProps } from "./types";
+import { buttonVariants } from "./assets/class-variants";
+import { merge } from "@kivid/tailwind-preset";
+import { useRef } from "react";
+import { LoadingDotsVariant } from "../LoadingDots/types";
+import LoadingDots from "../LoadingDots";
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "./enums";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function IconButton(props: IconButtonProps) {
+  const {
+    icon,
+    loading = false,
+    variant = IconButtonVariantEnum.GRAPE,
+    size = IconButtonSizeEnum.SMALL,
+    corners = IconButtonCornersEnum.SMALL,
+    disabled = false,
+    className,
+    accessibilityLabel,
+    selected = false,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(1)).current;
+
+  const loadingDotsVariantsMap: Record<
+    IconButtonVariantEnum,
+    LoadingDotsVariant
+  > = {
+    [IconButtonVariantEnum.GRAPE]: "light",
+    [IconButtonVariantEnum.JAVA]: "light",
+    [IconButtonVariantEnum.PEAR]: "light",
+    [IconButtonVariantEnum.TANGERINE]: "light",
+    [IconButtonVariantEnum.PITAYA]: "light",
+    [IconButtonVariantEnum.BLACKBERRY]: "light",
+    [IconButtonVariantEnum.CHIA]: "light",
+    [IconButtonVariantEnum.OUTLINE]: "dark",
+    [IconButtonVariantEnum.GHOST]: "dark",
+  };
+
+  const mappedLoadingStyleBySize: Record<IconButtonSizeEnum, number> = {
+    [IconButtonSizeEnum.SMALL]: 24,
+    [IconButtonSizeEnum.MEDIUM]: 24,
+    [IconButtonSizeEnum.LARGE]: 32,
+    [IconButtonSizeEnum.XLARGE]: 32,
+    [IconButtonSizeEnum.XXLARGE]: 32,
+  };
+
+  const handlePressIn = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 0.7,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressOut?.(event);
+  };
+
+  function renderContent() {
+    if (loading) {
+      return (
+        <LoadingDots
+          variant={loadingDotsVariantsMap[variant]}
+          lottieViewStyle={{
+            width: mappedLoadingStyleBySize[size],
+            height: mappedLoadingStyleBySize[size],
+          }}
+        />
+      );
+    }
+
+    return <>{icon}</>;
+  }
+
+  return (
+    <AnimatedPressable
+      className={merge(
+        buttonVariants({
+          variant,
+          size,
+          corners,
+          selected,
+        }),
+        className
+      )}
+      style={{
+        opacity: disabled ? 0.3 : animatedValue,
+      }}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{
+        disabled: disabled,
+        selected: selected,
+        busy: loading,
+      }}
+      pointerEvents={loading || disabled ? "none" : "auto"}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      {...rest}
+    >
+      <View className="flex items-center">{renderContent()}</View>
+    </AnimatedPressable>
+  );
+}

package/src/components/IconButton/types.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from "class-variance-authority";
+import type { buttonVariants } from "./assets/class-variants";
+import { PressableProps } from "react-native";
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "./enums";
+
+export interface IconButtonProps
+  extends PressableProps,
+    VariantProps<typeof buttonVariants> {
+  selected?: boolean;
+  icon: React.ReactNode;
+  loading?: boolean;
+  variant?: IconButtonVariantEnum;
+  size?: IconButtonSizeEnum;
+  corners?: IconButtonCornersEnum;
+  className?: string;
+  disabled?: boolean;
+  accessibilityLabel: string;
+}

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

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg, {
   Path,
   Defs,
@@ -11,64 +12,114 @@ import Svg, {
   G,
 } from "react-native-svg";
 import { GradientAddProps } from "./types";
+import { SizeEnum } from "../../../../enums";
+import { View } from "react-native";
 
-export function GradientAdd(props: GradientAddProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+export const GradientAdd = React.forwardRef((props: GradientAddProps, ref?: React.Ref<Svg>) => {
+  const { size = SizeEnum.MEDIUM, color = "currentColor", style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      path: "M7.99999 2.66663C8.72036 2.66663 9.30434 3.26358 9.30434 3.99996V6.66663H12.029C12.7493 6.66663 13.3333 7.26358 13.3333 7.99996C13.3333 8.73634 12.7493 9.33329 12.029 9.33329H9.30434V12C9.30434 12.7363 8.72036 13.3333 7.99999 13.3333C7.27962 13.3333 6.69564 12.7363 6.69564 12V9.33329H3.971C3.25063 9.33329 2.66666 8.73634 2.66666 7.99996C2.66666 7.26358 3.25063 6.66663 3.971 6.66663H6.69564V3.99996C6.69564 3.26358 7.27962 2.66663 7.99999 2.66663Z",
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_8151_1877",
+        x: "2.66666",
+        y: "2.66663",
+        width: "11.6667",
+        height: "11.6666",
+      },
+    },
+    [SizeEnum.MEDIUM]: {
+      path: "M12 4C13.0806 4 13.9565 4.89543 13.9565 6V10H18.0435C19.124 10 20 10.8954 20 12C20 13.1046 19.124 14 18.0435 14H13.9565V18C13.9565 19.1046 13.0806 20 12 20C10.9194 20 10.0435 19.1046 10.0435 18V14H5.95652C4.87596 14 4 13.1046 4 12C4 10.8954 4.87596 10 5.95652 10H10.0435V6C10.0435 4.89543 10.9194 4 12 4Z",
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_1873",
+        x: "4",
+        y: "4",
+        width: "17",
+        height: "17",
+      },
+    },
+    [SizeEnum.LARGE]: {
+      path: "M16 5.33337C17.4408 5.33337 18.6087 6.52728 18.6087 8.00004V13.3334H24.058C25.4987 13.3334 26.6667 14.5273 26.6667 16C26.6667 17.4728 25.4987 18.6667 24.058 18.6667H18.6087V24C18.6087 25.4728 17.4408 26.6667 16 26.6667C14.5593 26.6667 13.3913 25.4728 13.3913 24V18.6667H7.94204C6.5013 18.6667 5.33334 17.4728 5.33334 16C5.33334 14.5273 6.5013 13.3334 7.94204 13.3334H13.3913V8.00004C13.3913 6.52728 14.5593 5.33337 16 5.33337Z",
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_1881",
+        x: "5.33334",
+        y: "5.33337",
+        width: "22.3333",
+        height: "22.3334",
+      },
+    },
+  };
+
+  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_12285)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.99999 2.6665C8.72036 2.6665 9.30434 3.26346 9.30434 3.99984V6.6665H12.029C12.7493 6.6665 13.3333 7.26346 13.3333 7.99984C13.3333 8.73622 12.7493 9.33317 12.029 9.33317H9.30434V11.9998C9.30434 12.7362 8.72036 13.3332 7.99999 13.3332C7.27962 13.3332 6.69564 12.7362 6.69564 11.9998V9.33317H3.971C3.25063 9.33317 2.66666 8.73622 2.66666 7.99984C2.66666 7.26346 3.25063 6.6665 3.971 6.6665H6.69564V3.99984C6.69564 3.26346 7.27962 2.6665 7.99999 2.6665Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12285"
-          x="2.66666"
-          y="2.6665"
-          width="11.6667"
-          height="11.6665"
-          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.447059 0 0 0 0 0.403922 0 0 0 0 0.894118 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12285"
+    <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"
           />
-        </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.447059 0 0 0 0 0.403922 0 0 0 0 0.894118 0 0 0 0.4 0"
+            />
+            <FeBlend
+              mode="normal"
+              in2="shape"
+              result={`effect1_innerShadow_${filterId}`}
+            />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
-}
+});

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

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

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

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg, {
   Path,
   Defs,
@@ -9,73 +10,126 @@ import Svg, {
   FeGaussianBlur,
   FeComposite,
   G,
-  SvgProps,
 } from "react-native-svg";
 import { GradientAlertProps } from "./types";
+import { SizeEnum } from "../../../../enums";
+import { View } from "react-native";
 
 export function GradientAlert(props: GradientAlertProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+  const { size = SizeEnum.MEDIUM, color = "currentColor", style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      paths: [
+        "M8.00001 2C8.73638 2 9.33334 2.58216 9.33334 3.30028V9.36639C9.33334 10.0845 8.73638 10.6667 8.00001 10.6667C7.26363 10.6667 6.66667 10.0845 6.66667 9.36639V3.30028C6.66667 2.58216 7.26363 2 8.00001 2Z",
+        "M8.00001 11.3333C8.73638 11.3333 9.33334 11.9154 9.33334 12.6336V12.6997C9.33334 13.4178 8.73638 14 8.00001 14C7.26363 14 6.66667 13.4178 6.66667 12.6997V12.6336C6.66667 11.9154 7.26363 11.3333 8.00001 11.3333Z",
+      ],
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_8151_1867",
+        x: "6.66667",
+        y: "2",
+        width: "3.66667",
+        height: "13",
+        colorMatrix:
+          "0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0",
+      },
+    },
+
+    [SizeEnum.MEDIUM]: {
+      paths: [
+        "M12 3C13.1046 3 14 3.87323 14 4.95042V14.0496C14 15.1268 13.1046 16 12 16C10.8954 16 10 15.1268 10 14.0496V4.95042C10 3.87323 10.8954 3 12 3Z",
+        "M12 16.9999C13.1046 16.9999 14 17.8732 14 18.9503V19.0495C14 20.1267 13.1046 20.9999 12 20.9999C10.8954 20.9999 10 20.1267 10 19.0495V18.9503C10 17.8732 10.8954 16.9999 12 16.9999Z",
+      ],
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_1859",
+        x: "10",
+        y: "3",
+        width: "5",
+        height: "18.9999",
+        colorMatrix:
+          "0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0",
+      },
+    },
+
+    [SizeEnum.LARGE]: {
+      paths: [
+        "M16 4C17.4728 4 18.6667 5.16431 18.6667 6.60056V18.7328C18.6667 20.169 17.4728 21.3333 16 21.3333C14.5272 21.3333 13.3333 20.169 13.3333 18.7328V6.60056C13.3333 5.16431 14.5272 4 16 4Z",
+        "M16 22.6666C17.4728 22.6666 18.6667 23.8309 18.6667 25.2671V25.3993C18.6667 26.8356 17.4728 27.9999 16 27.9999C14.5272 27.9999 13.3333 26.8356 13.3333 25.3993V25.2671C13.3333 23.8309 14.5272 22.6666 16 22.6666Z",
+      ],
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_1869",
+        x: "13.3333",
+        y: "4",
+        width: "6.33333",
+        height: "24.9999",
+        colorMatrix:
+          "0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size] || ICON_CONFIG[SizeEnum.MEDIUM];
+  const { paths, viewBox, filter } = config;
+  const iconSize = SIZE_MAP[size] || 24;
+  const filterId = filter.id;
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12282)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M8.00001 2C8.73638 2 9.33334 2.58216 9.33334 3.30028V9.36639C9.33334 10.0845 8.73638 10.6667 8.00001 10.6667C7.26363 10.6667 6.66667 10.0845 6.66667 9.36639V3.30028C6.66667 2.58216 7.26363 2 8.00001 2Z"
-          fill="currentColor"
-        />
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M8.00001 11.3333C8.73638 11.3333 9.33334 11.9154 9.33334 12.6336V12.6997C9.33334 13.4178 8.73638 14 8.00001 14C7.26363 14 6.66667 13.4178 6.66667 12.6997V12.6336C6.66667 11.9154 7.26363 11.3333 8.00001 11.3333Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12282"
-          x="6.66667"
-          y="2"
-          width="3.66667"
-          height="13"
-          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.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12282"
-          />
-        </Filter>
-      </Defs>
-    </Svg>
+    <View style={[{ width: iconSize, height: iconSize }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          {paths.map((d, i) => (
+            <Path
+              key={i}
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d={d}
+              fill="currentColor"
+            />
+          ))}
+        </G>
+
+        <Defs>
+          <Filter
+            id={filter.id}
+            x={filter.x}
+            y={filter.y}
+            width={filter.width}
+            height={filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend 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={filter.colorMatrix} />
+            <FeBlend mode="normal" in2="shape" result="effect1_innerShadow" />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
 }

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

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