nfx-ui 0.20.0 → 0.23.0

package/src/animations/arrow-narrow-left-dashed-icon.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const ArrowNarrowLeftDashedIcon = forwardRef<
+  AnimatedIconHandle,
+  AnimatedIconProps
+>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".arrow-group",
+        { x: [0, -4, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".arrow-group", { x: 0 }, { duration: 0.2, ease: "easeOut" });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+      >
+        <svg
+          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"
+        >
+          <motion.g className="arrow-group">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M5 12h6m3 0h1.5m3 0h.5" />
+            <path d="M5 12l4 4" />
+            <path d="M5 12l4 -4" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+ArrowNarrowLeftDashedIcon.displayName = "ArrowNarrowLeftDashedIcon";
+
+export default ArrowNarrowLeftDashedIcon;

package/src/animations/arrow-narrow-left-icon.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const ArrowNarrowLeftIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".arrow-group",
+        { x: [0, -4, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".arrow-group", { x: 0 }, { duration: 0.2, ease: "easeOut" });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+      >
+        <svg
+          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"
+        >
+          <motion.g className="arrow-group">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M5 12l14 0" />
+            <path d="M5 12l4 4" />
+            <path d="M5 12l4 -4" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+ArrowNarrowLeftIcon.displayName = "ArrowNarrowLeftIcon";
+
+export default ArrowNarrowLeftIcon;

package/src/animations/arrow-narrow-right-dashed-icon.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const ArrowNarrowRightDashedIcon = forwardRef<
+  AnimatedIconHandle,
+  AnimatedIconProps
+>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".arrow-group",
+        { x: [0, 4, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".arrow-group", { x: 0 }, { duration: 0.2, ease: "easeOut" });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+      >
+        <svg
+          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"
+        >
+          <motion.g className="arrow-group">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M5 12h.5m3 0h1.5m3 0h6" />
+            <path d="M15 16l4 -4" />
+            <path d="M15 8l4 4" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+ArrowNarrowRightDashedIcon.displayName = "ArrowNarrowRightDashedIcon";
+
+export default ArrowNarrowRightDashedIcon;

package/src/animations/arrow-narrow-right-icon.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const ArrowNarrowRightIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".arrow-group",
+        { x: [0, 4, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".arrow-group", { x: 0 }, { duration: 0.2, ease: "easeOut" });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+      >
+        <svg
+          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"
+        >
+          <motion.g className="arrow-group">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M5 12l14 0" />
+            <path d="M15 16l4 -4" />
+            <path d="M15 8l4 4" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+ArrowNarrowRightIcon.displayName = "ArrowNarrowRightIcon";
+
+export default ArrowNarrowRightIcon;

package/src/animations/arrow-narrow-up-dashed-icon.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const ArrowNarrowUpDashedIcon = forwardRef<
+  AnimatedIconHandle,
+  AnimatedIconProps
+>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".arrow-group",
+        { y: [0, -4, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".arrow-group", { y: 0 }, { duration: 0.2, ease: "easeOut" });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+      >
+        <svg
+          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"
+        >
+          <motion.g className="arrow-group">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M12 5v6m0 3v1.5m0 3v.5" />
+            <path d="M16 9l-4 -4" />
+            <path d="M8 9l4 -4" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+ArrowNarrowUpDashedIcon.displayName = "ArrowNarrowUpDashedIcon";
+
+export default ArrowNarrowUpDashedIcon;

package/src/animations/arrow-narrow-up-icon.tsx

@@ -0,0 +1,71 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const ArrowNarrowUpIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".arrow-group",
+        { y: [0, -4, 0] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".arrow-group", { y: 0 }, { duration: 0.2, ease: "easeOut" });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+      >
+        <svg
+          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"
+        >
+          <motion.g className="arrow-group">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M12 5l0 14" />
+            <path d="M16 9l-4 -4" />
+            <path d="M8 9l4 -4" />
+          </motion.g>
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+ArrowNarrowUpIcon.displayName = "ArrowNarrowUpIcon";
+
+export default ArrowNarrowUpIcon;

package/src/animations/at-sign-icon.tsx

@@ -0,0 +1,95 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const AtSignIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      animate(".draw", { pathLength: 0, opacity: 0 }, { duration: 0 });
+
+      await animate(
+        ".outer",
+        { pathLength: [0, 1], opacity: [0, 1] },
+        { duration: 0.45, ease: "easeOut" },
+      );
+
+      await animate(
+        ".path",
+        { pathLength: [0, 1], opacity: [0, 1] },
+        { duration: 0.6, ease: "easeOut" },
+      );
+
+      animate(
+        ".inner",
+        { pathLength: [0, 1], opacity: [0, 1] },
+        { duration: 0.3, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".draw", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        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}`}
+      >
+        <motion.circle
+          className="draw inner"
+          cx="12"
+          cy="12"
+          r="4"
+          initial={{ pathLength: 1, opacity: 1 }}
+        />
+        <motion.path
+          className="draw path"
+          d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"
+          initial={{ pathLength: 1, opacity: 1 }}
+        />
+        <motion.circle
+          className="draw outer"
+          cx="12"
+          cy="12"
+          r="10"
+          initial={{ pathLength: 1, opacity: 1 }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+AtSignIcon.displayName = "AtSignIcon";
+
+export default AtSignIcon;

package/src/animations/banana-icon.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BananaIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      animate(
+        ".peel",
+        { pathLength: [0, 1], opacity: [0, 1] },
+        { duration: 0.5, ease: "easeOut" },
+      );
+      await animate(
+        ".banana",
+        { rotate: [0, -5, 5, -5, 0], y: [0, -2, 0] },
+        { duration: 0.6, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".peel", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        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}`}
+      >
+        <motion.path
+          className="peel"
+          d="M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5"
+          initial={{ pathLength: 1, opacity: 1 }}
+        />
+        <motion.path
+          className="banana"
+          style={{ transformOrigin: "center" }}
+          d="M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z"
+        />
+      </motion.svg>
+    );
+  },
+);
+
+BananaIcon.displayName = "BananaIcon";
+
+export default BananaIcon;