nfx-ui 0.17.0 → 0.22.0

package/src/animations/plug-connected-icon.tsx

@@ -0,0 +1,112 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const PlugConnectedIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".plug-upper-part",
+        {
+          y: 2,
+          x: -2,
+        },
+        {
+          duration: 0.35,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".plug-lower-leg",
+        {
+          opacity: 0,
+        },
+        {
+          duration: 0.35,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".plug-lower-part",
+        {
+          y: -2,
+          x: 2,
+        },
+        {
+          duration: 0.35,
+          ease: "easeOut",
+        },
+      );
+    }, [animate]);
+
+    const stop = useCallback(async () => {
+      animate(
+        ".plug-upper-part, .plug-lower-leg, .plug-lower-part",
+        {
+          y: 0,
+          x: 0,
+          opacity: 1,
+        },
+        {
+          duration: 0.3,
+          ease: "easeInOut",
+        },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <motion.path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        {/* <motion.path d="M20 16l-4 4" /> */}
+        <motion.path
+          d="M7 12l5 5l-1.5 1.5a3.536 3.536 0 1 1 -5 -5l1.5 -1.5z"
+          className="plug-lower-part"
+        />
+        <motion.path
+          d="M17 12l-5 -5l1.5 -1.5a3.536 3.536 0 1 1 5 5l-1.5 1.5z"
+          className="plug-upper-part"
+        />
+        <motion.path d="M3 21l2.5 -2.5" className="plug-lower-part" />
+        <motion.path d="M18.5 5.5l2.5 -2.5" className="plug-upper-part" />
+        <motion.path
+          d="M10 11l-2 2"
+          className="plug-lower-part plug-lower-leg"
+        />
+        <motion.path
+          d="M13 14l-2 2"
+          className="plug-lower-part plug-lower-leg"
+        />
+        {/* <motion.path d="M16 16l4 4" /> */}
+      </motion.svg>
+    );
+  },
+);
+
+PlugConnectedIcon.displayName = "PlugConnectedIcon";
+export default PlugConnectedIcon;

package/src/animations/plug-connected-x-icon.tsx

@@ -0,0 +1,100 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const PlugConnectedXIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".plug-upper-part",
+        {
+          x: 2,
+        },
+        {
+          duration: 0.35,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".plug-lower-part",
+        {
+          y: -2,
+          x: 2,
+        },
+        {
+          duration: 0.35,
+          ease: "easeOut",
+        },
+      );
+    }, [animate]);
+
+    const stop = useCallback(async () => {
+      animate(
+        ".plug-upper-part, .plug-lower-leg, .plug-lower-part",
+        {
+          x: 0,
+          y: 0,
+          opacity: 1,
+        },
+        {
+          duration: 0.3,
+          ease: "easeInOut",
+        },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        ref={scope}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <motion.path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <motion.path d="M20 16l-4 4" />
+        <motion.path
+          d="M7 12l5 5l-1.5 1.5a3.536 3.536 0 1 1 -5 -5l1.5 -1.5z"
+          className="plug-lower-part"
+        />
+        <motion.path
+          d="M17 12l-5 -5l1.5 -1.5a3.536 3.536 0 1 1 5 5l-1.5 1.5z"
+          className="plug-upper-part"
+        />
+        <motion.path d="M3 21l2.5 -2.5" className="plug-lower-part" />
+        <motion.path d="M18.5 5.5l2.5 -2.5" className="plug-upper-part" />
+        <motion.path
+          d="M10 11l-2 2"
+          className="plug-lower-part plug-lower-leg"
+        />
+        <motion.path
+          d="M13 14l-2 2"
+          className="plug-lower-part plug-lower-leg"
+        />
+        <motion.path d="M16 16l4 4" />
+      </motion.svg>
+    );
+  },
+);
+
+PlugConnectedXIcon.displayName = "PlugConnectedXIcon";
+export default PlugConnectedXIcon;

package/src/animations/python-icon.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const PythonIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".snake-top",
+        { x: [0, -1, 1, 0], y: [0, -1, 1, 0] },
+        { duration: 0.6, ease: "easeInOut" },
+      );
+      animate(
+        ".snake-bottom",
+        { x: [0, 1, -1, 0], y: [0, 1, -1, 0] },
+        { duration: 0.6, ease: "easeInOut" },
+      );
+      await animate(
+        ".eyes",
+        { scale: [1, 1.5, 1] },
+        { duration: 0.4, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".snake-top, .snake-bottom, .eyes",
+        { x: 0, y: 0, scale: 1 },
+        { duration: 0.2, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <motion.path
+          className="snake-top"
+          d="M12 9h-7a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h3"
+        />
+        <motion.path
+          className="snake-top"
+          d="M12 15h7a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-3"
+        />
+        <motion.path
+          className="snake-top"
+          d="M8 9v-4a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v5a2 2 0 0 1 -2 2h-4a2 2 0 0 0 -2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2 -2v-4"
+        />
+        <motion.path
+          className="eyes"
+          style={{ transformOrigin: "11 6" }}
+          d="M11 6l0 .01"
+        />
+        <motion.path
+          className="eyes"
+          style={{ transformOrigin: "13 18" }}
+          d="M13 18l0 .01"
+        />
+      </motion.svg>
+    );
+  },
+);
+
+PythonIcon.displayName = "PythonIcon";
+export default PythonIcon;

package/src/animations/qrcode-icon.tsx

@@ -0,0 +1,247 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { scaledStrokeWidth } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const QrcodeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
+
+    const start = async () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
+      animate(".qr-scan", { opacity: 0, y: 0 }, { duration: 0 });
+      animate(".corner-rect", { pathLength: 0, opacity: 0 }, { duration: 0 });
+      animate(".inner-element", { opacity: 0, scale: 0.8 }, { duration: 0 });
+      animate(".center-dot", { scale: 0, opacity: 0 }, { duration: 0 });
+
+      await animate(
+        ".corner-rect",
+        { pathLength: [0, 1], opacity: [0, 1] },
+        { duration: 0.4, ease: "easeOut", delay: (i) => i * 0.1 },
+      );
+
+      animationControls.current.push(
+        animate(
+          ".qr-scan",
+          { opacity: [0, 1, 1, 0], y: [0, 30, 0, 0] },
+          {
+            duration: 1.5,
+            ease: "easeInOut",
+            repeat: Infinity,
+            repeatDelay: 0.3,
+          },
+        ),
+      );
+
+      await animate(
+        ".inner-element",
+        { opacity: [0, 1], scale: [0.8, 1] },
+        { duration: 0.3, ease: "easeOut", delay: (i) => i * 0.05 },
+      );
+
+      animate(
+        ".center-dot",
+        { scale: [0, 1.2, 1], opacity: [0, 1] },
+        { duration: 0.3, ease: "easeOut", delay: (i) => i * 0.08 },
+      );
+    };
+
+    const stop = () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
+      animate(
+        ".qr-scan, .corner-rect, .inner-element, .center-dot",
+        { opacity: 1, pathLength: 1, scale: 1, y: 0 },
+        { duration: 0.2 },
+      );
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        xmlns="http://www.w3.org/2000/svg"
+        x="0px"
+        y="0px"
+        width={size}
+        height={size}
+        viewBox="0 0 32 32"
+        className={`qr-code ${className} cursor-pointer`}
+        style={{ overflow: "visible" }}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <motion.rect
+          className="qr-scan"
+          x="2"
+          y="0"
+          width="28"
+          height="2"
+          fill="currentColor"
+          opacity="0"
+          style={{ filter: "drop-shadow(0 0 4px currentColor)" }}
+        />
+
+        <motion.rect
+          className="corner-rect"
+          x="3"
+          y="3"
+          width="9"
+          height="9"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          initial={{ pathLength: 1 }}
+        />
+
+        <motion.rect
+          className="corner-rect"
+          x="3"
+          y="20"
+          width="9"
+          height="9"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          initial={{ pathLength: 1 }}
+        />
+
+        <motion.rect
+          className="corner-rect"
+          x="20"
+          y="3"
+          width="9"
+          height="9"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          initial={{ pathLength: 1 }}
+        />
+
+        <motion.rect
+          className="inner-element"
+          x="27"
+          y="20"
+          width="2"
+          height="2"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.rect
+          className="inner-element"
+          x="16"
+          y="27"
+          width="2"
+          height="2"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.path
+          className="inner-element"
+          d="M3 16H7"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          strokeLinecap="square"
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.path
+          className="inner-element"
+          d="M13 16H18M22 16V23H29M22 16H26M22 16H18M18 16V20H16"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          strokeLinecap="square"
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.path
+          className="inner-element"
+          d="M16 7V10"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          strokeLinecap="square"
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.path
+          className="inner-element"
+          d="M16 25V29H23V27"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          strokeLinecap="square"
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.path
+          className="inner-element"
+          d="M29.01 29H29"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          strokeLinecap="square"
+          fill="none"
+          style={{ transformOrigin: "center" }}
+        />
+
+        <motion.rect
+          className="center-dot"
+          x="24"
+          y="7"
+          width="1"
+          height="1"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          style={{ transformOrigin: "24.5px 7.5px" }}
+        />
+
+        <motion.rect
+          className="center-dot"
+          x="7"
+          y="7"
+          width="1"
+          height="1"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          style={{ transformOrigin: "7.5px 7.5px" }}
+        />
+
+        <motion.rect
+          className="center-dot"
+          x="7"
+          y="24"
+          width="1"
+          height="1"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 32)}
+          fill="none"
+          style={{ transformOrigin: "7.5px 24.5px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+QrcodeIcon.displayName = "QrcodeIcon";
+export default QrcodeIcon;

package/src/animations/question-mark.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const QuestionMark = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      await animate(
+        ".question-mark",
+        { pathLength: [0, 1] },
+        { duration: 0.4, ease: "easeInOut" },
+      );
+
+      await animate(
+        ".question-mark-dot",
+        {
+          pathLength: [0, 1],
+          y: [0, -3, 0],
+        },
+        { duration: 0.3, ease: "easeOut" },
+      );
+
+      animate(
+        ".question-group",
+        { scale: [1, 1.05, 1] },
+        { duration: 0.2, ease: "easeOut" },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".question-mark, .question-mark-dot, .question-group",
+        { pathLength: 1, y: 0, scale: 1 },
+        { duration: 0.2, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.div ref={scope} onHoverStart={start} onHoverEnd={stop}>
+        <motion.svg
+          className={`question-group cursor-pointer ${className}`}
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path
+            className="question-mark"
+            d="M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4"
+          />
+          <path className="question-mark-dot" d="M12 19l0 .01" />
+        </motion.svg>
+      </motion.div>
+    );
+  },
+);
+
+QuestionMark.displayName = "QuestionMark";
+export default QuestionMark;