ncore-ui-kit 1.0.0-pre-alpha.0

package/src/assets/svg/eyeOpenedIcon/index.tsx

@@ -0,0 +1,50 @@
+import {
+    NCoreUIKitTheme
+} from "../../../core/hooks";
+import {
+    type INCoreUIKitIconProps
+} from "../../../types";
+import {
+    Path,
+    Svg
+} from "react-native-svg";
+
+const SvgEyeOpened = ({
+    color = "default",
+    customColor,
+    size = 30,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const pathScale = 20 / size;
+
+    const finalColor = customColor ? customColor : colors.content.icon[color];
+
+    return <Svg
+        height={size}
+        width={size}
+        fill="none"
+        {...props}
+    >
+        <Path
+            d="M1.732 10.293a.833.833 0 0 1 0-.58 8.958 8.958 0 0 1 16.563 0c.07.187.07.393 0 .58a8.958 8.958 0 0 1-16.563 0Z"
+            transform={`scale(${1 / pathScale})`}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+            stroke={finalColor}
+            strokeWidth={1.167}
+        />
+        <Path
+            d="M10.014 12.503a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
+            transform={`scale(${1 / pathScale})`}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+            stroke={finalColor}
+            strokeWidth={1.167}
+        />
+    </Svg>;
+};
+export default SvgEyeOpened;

package/src/assets/svg/index.ts

@@ -0,0 +1,39 @@
+export {
+    default as LoadingIcon
+} from "./loadingIcon";
+
+export {
+    default as CleanIcon
+} from "./cleanIcon";
+
+export {
+    default as ChevronRightIcon
+} from "./chevronRightIcon";
+
+export {
+    default as EyeClosedIcon
+} from "./eyeClosedIcon";
+
+export {
+    default as EyeOpenedIcon
+} from "./eyeOpenedIcon";
+
+export {
+    default as BadgeInfoIcon
+} from "./badgeInfoIcon";
+
+export {
+    default as BadgeDangerIcon
+} from "./badgeDangerIcon";
+
+export {
+    default as BadgeSuccessIcon
+} from "./badgeSuccessIcon";
+
+export {
+    default as BadgeQuestionMarkIcon
+} from "./badgeQuestionMarkIcon";
+
+export {
+    default as BadgeAlertIcon
+} from "./badgeAlertIcon";

package/src/assets/svg/loadingIcon/index.tsx

@@ -0,0 +1,95 @@
+import {
+    useEffect,
+    useRef
+} from "react";
+import {
+    Animated,
+    Easing,
+    View
+} from "react-native";
+import {
+    NCoreUIKitTheme
+} from "../../../core/hooks";
+import {
+    type INCoreUIKitIconProps
+} from "../../../types";
+import {
+    Path,
+    Svg
+} from "react-native-svg";
+
+const SvgLoadingIcon = ({
+    color = "emphasized",
+    customColor,
+    size = 22,
+    ...props
+}: INCoreUIKitIconProps) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const animValue = useRef(new Animated.Value(0)).current;
+
+    const pathScale = 38 / size;
+
+    useEffect(() => {
+        const animation = Animated.loop(
+            Animated.timing(animValue, {
+                toValue: 1,
+                duration: 2000,
+                easing: Easing.linear,
+                useNativeDriver: true
+            })
+        );
+
+        animation.start();
+
+        return () => animation.stop();
+    }, [animValue]);
+
+    const rotate = animValue.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            "0deg",
+            "-360deg"
+        ]
+    });
+
+    return <View
+        style={{
+            height: size,
+            width: size,
+            ...props?.style
+        }}
+    >
+        <Animated.View
+            style={{
+                transform: [{
+                    rotate: rotate
+                }]
+            }}
+        >
+            <Svg
+                height={size}
+                width={size}
+                fill="none"
+                style={props.style}
+                {...props}
+            >
+                <Path
+                    d="M11.885 7.303 19 3.194l7.115 4.109v8.215l7.095 4.09v8.215l-7.115 4.108-7.076-4.108-7.114 4.108-7.115-4.108v-8.216l7.095-4.089V7.303Z"
+                    stroke={customColor ? customColor : colors.content.icon[color]}
+                    transform={`scale(${1 / pathScale})`}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                    clipRule="evenodd"
+                    strokeWidth={3}
+                />
+            </Svg>
+        </Animated.View>
+    </View>;
+};
+export default SvgLoadingIcon;