nfx-ui 0.17.0 → 0.22.0

package/src/animations/dino-icon.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DinoIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  ({ size = 24, className = "" }, ref) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(() => {
+      // 1. Tilt head to the sky
+      animate(
+        scope.current,
+        { rotate: -10 },
+        {
+          duration: 0.3,
+          ease: "easeOut",
+        },
+      );
+    }, [animate, scope]);
+
+    const stop = useCallback(() => {
+      animate(scope.current, { rotate: 0 }, { duration: 0.2, ease: "easeIn" });
+    }, [animate, scope]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    const cutoutColor = "var(--background)";
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 121 125"
+        className={`cursor-pointer ${className}`}
+        style={{ overflow: "visible", transformOrigin: "bottom center" }}
+      >
+        <motion.g className="dino-body">
+          {/* 1. Full Body Silhouette (Solid currentColor) */}
+          <path
+            d="M0 0 C10.23 0 20.46 0 31 0 C32.25 2.5 32.11 4.2 32.1 7 C32.09 8 32.09 9 32.09 10 C32.08 11.5 32.08 11.5 32.06 13.1 C32.06 14.1 32.05 15.2 32.05 16.3 C32.04 18.8 32.02 21.4 32 24 C30.68 24 29.36 24 28 24 C28 25.65 28 27.3 28 29 C26.35 29 24.7 29 23 29 C23 33 23 37 23 41 C21.02 41 19.04 41 17 41 C17 43.3 17 45.6 17 48 C16.01 48 15.02 48 14 48 C14 49.3 14 50.6 14 52 C13.01 52 12.02 52 11 52 C11 55 11 58 11 61 C6.38 61 1.76 61 -3 61 C-3 63.3 -3 65.6 -3 68 C-7.62 68 -12.24 68 -17 68 C-17 64.7 -17 61.4 -17 58 C-17.99 58 -18.98 58 -20 58 C-20 57.01 -20 56.02 -20 55 C-20.99 55 -21.98 55 -23 55 C-23 54.01 -23 53.02 -23 52 C-23.99 52 -24.98 52 -26 52 C-26 51.01 -26 50.02 -26 49 C-26.99 49 -27.98 49 -29 49 C-29 48.34 -29 47.68 -29 47 C-29.66 47 -30.32 47 -31 47 C-31 38.1 -31 29.2 -31 20 C-27.04 20 -23.08 20 -19 20 C-19 22 -19 24 -19 26 C-16.03 26 -13.06 26 -10 26 C-10 25 10 24 10 23 C-8.68 23 -7.36 23 -6 23 C-6 22.3 -6 21.7 -6 21 C-5 21 -4 21 -3 21 C-3 15 -3 9.1 -3 3 C-2 3 -1 3 0 3 C0 2 0 1 0 0 Z"
+            fill="currentColor"
+            transform="translate(57,35)"
+          />
+
+          {/* 2. Interior Cutouts (Fill with background) */}
+          <path
+            d="M5 5 C5 5.66 5 6.32 5 7 C4 7 3 7 2 7 C2 12.9 2 18.9 2 25 C1 25 0 25 -1 25 C-1 26 -1 27 -1 28 C-2.3 28 -3.6 28 -5 28 C-5 29 -5 30 -5 31 C-6.6 31 -8.3 31 -10 31 C-10 32 -10 33 -10 34 C-10.7 34 -11.3 34 -12 34 C-12 34.7 -12 35.3 -12 36 C-14 36 -16 36 -18 36 C-18 35 -18 34 -18 33 C-19 33 -20 33 -21 33 C-21 32.3 -21 31.7 -21 31 C-22 31 -23 31 -24 31 C-24 29 -24 27 -24 25 C-25 25 -26 25 -27 25 C-27 30.6 -27 36.2 -27 42 C-26 42 -25 42 -24 42 C-24 42.7 -24 43.3 -24 44 C-23 44 -22 44 -21 44 C-21 45 -21 46 -21 47 C-20 47 -19 47 -18 47 C-18 48 -18 49 -18 50 C-17 50 -16 50 -15 50 C-15 51 -15 52 -15 53 C-14.3 53 -13.7 53 -13 53 C-13 56.6 -13 60.3 -13 64 C-11 64 -9 64 -7 64 C-7 63 -7 62 -7 61 C-7.7 61 -8.3 61 -9 61 C-9 60.3 -9 59.7 -9 59 C-8.3 59 -7.7 59 -7 59 C-7 58 -7 57 -7 56 C-6 56 -5 56 -4 56 C-4 55 -4 54 -4 53 C-3 53 -2 53 -1 53 C-1 54 -1 55 -1 56 C1.7 57.4 4 57.1 7 57 C7 56 -7 55 -7 54 C6 54 5 54 4 54 C4 52.7 4 51.4 4 50 C5 50 6 50 7 50 C7 49 7 48 7 47 C7.7 47 8.3 47 9 47 C9 43.1 9 44.4 9 43 C10 43 11 43 12 43 C12 40 12 37.1 12 34 C13 34 14 34 15 34 C15 34.7 15 35.3 15 36 C16 36 17 36 18 36 C18 34.4 18 32.7 18 31 C16 31 14 31 12 31 C12 29 12 27 12 25 C16 25 19.9 25 24 25 C24 24 24 23 24 22 C21 22 18.1 22 15 22 C15 21 15 20 15 19 C19.6 19 24.2 19 29 19 C29 15 29 11.1 29 7 C28 7 27 7 26 7 C26 6.3 26 5.7 26 5 C19.1 5 12.1 5 5 5 Z"
+            fill={cutoutColor}
+            transform="translate(57,35)"
+          />
+
+          {/* 3. Head/Face segments: Solid currentColor */}
+          <path
+            d="M0 0 C1.65 0 3.3 0 5 0 C6.25 2.5 6.11 4.2 6.1 7 C6.09 8 6.09 9 6.09 10 C6.08 11 6.07 12.1 6.06 13.1 C6.06 14.2 6.05 15.2 6.05 16.3 C6.04 18.9 6.02 21.4 6 24 C5.24 23.8 4.47 23.7 3.69 23.5 C0.96 22.9 0.96 22.9 -2 23 C-3.56 22.8 -5.13 22.7 -6.69 22.5 C-7.9 22.4 -7.9 22.4 -9.14 22.2 C-9.75 22.1 -10.37 22.1 -11 22 C-11 21 -11 20 -11 19 C-6.38 19 -1.76 19 3 19 C3 15 3 11.1 3 7 C2 7 1 7 0 7 C0 6.3 0 5.7 0 5 C-6.93 5 -13.9 5 -21 5 C-21.3 5.7 -21.7 6.3 -22 7 C-22 6 -22 5 -22 4 C-15.4 4 -8.8 4 -2 4 C-1.34 2.7 -0.68 1.4 0 0 Z"
+            fill="currentColor"
+            transform="translate(83,35)"
+          />
+          <path
+            d="M0 0 C0.33 3.6 0.66 7.3 1 11 C-0.65 10.7 -2.3 10.3 -4 10 C-4 8 -4 6 -4 4 C-4.99 3.7 -5.98 3.3 -7 3 C-4.5 0 -4.26 0 0 0 Z"
+            fill="currentColor"
+            transform="translate(38,55)"
+          />
+
+          {/* 4. Eye Detail: User requested currentColor (Solid) */}
+          <path
+            d="M0 0 C1.98 0 3.96 0 6 0 C6 1.98 6 3.96 6 6 C4.02 6 2.04 6 0 6 C0 4.02 0 2.04 0 0 Z"
+            fill="currentColor"
+            transform="translate(64,44)"
+          />
+        </motion.g>
+
+        {/* Legs: Solid currentColor */}
+        <motion.g className="dino-leg-left">
+          <path
+            d="M0 0 C0.99 0 1.98 0 3 0 C3 0.66 3 1.32 3 2 C4 2.3 5 2.7 6 3 C5.01 4.5 5.01 4.5 4 6 C3.34 6 2.68 6 2 6 C1.67 7.3 1.34 8.6 1 10 C1 9 1 8 1 7 C0 7 -1 7 -2 7 C-1.34 4.7 -0.68 2.4 0 0 Z"
+            fill="currentColor"
+            transform="translate(30,77)"
+          />
+        </motion.g>
+
+        <motion.g className="dino-leg-right">
+          <path
+            d="M0 0 C0.33 0 0.66 0 1 0 C1 3.3 1 6.6 1 10 C1.66 10 2.32 10 3 10 C3.33 8.7 3.66 7.4 4 6 C4 6.7 4 7.3 4 8 C4.66 8 5.32 8 6 8 C6 8.99 6 9.98 6 11 C4.02 11 2.04 11 0 11 C0 7.37 0 3.74 0 0 Z"
+            fill="currentColor"
+            transform="translate(44,88)"
+          />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+DinoIcon.displayName = "DinoIcon";
+export default DinoIcon;

package/src/animations/discord-icon.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DiscordIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".eyes",
+        { scale: [1, 1.3, 1] },
+        { duration: 0.3, ease: "easeInOut" },
+      );
+      await animate(
+        ".mouth",
+        { scaleX: [1, 1.1, 1] },
+        { duration: 0.4, ease: "easeInOut" },
+      );
+      animate(".body", { y: [0, -1, 0] }, { duration: 0.5, ease: "easeInOut" });
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".eyes, .mouth, .body",
+        { x: 0, y: 0, scale: 1, scaleX: 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="eyes"
+          style={{ transformOrigin: "9 12" }}
+          d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"
+        />
+        <motion.path
+          className="eyes"
+          style={{ transformOrigin: "15 12" }}
+          d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"
+        />
+        <motion.path
+          className="mouth"
+          style={{ transformOrigin: "center" }}
+          d="M7 16.5c3.5 1 6.5 1 10 0"
+        />
+        <motion.path
+          className="body"
+          d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3"
+        />
+      </motion.svg>
+    );
+  },
+);
+
+DiscordIcon.displayName = "DiscordIcon";
+export default DiscordIcon;

package/src/animations/docker-icon.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DockerIcon = 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 = [];
+
+      animationControls.current.push(
+        animate(
+          ".whale",
+          { x: [0, 2, 0] },
+          { duration: 1.2, ease: "easeInOut", repeat: Infinity },
+        ),
+      );
+      animationControls.current.push(
+        animate(
+          ".containers",
+          { y: [0, -1, 0] },
+          { duration: 0.8, ease: "easeInOut", repeat: Infinity },
+        ),
+      );
+      animate(
+        ".dot",
+        { scale: [1, 1.3, 1] },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animationControls.current.forEach((control) => control.stop());
+      animationControls.current = [];
+
+      animate(".whale", { x: 0 }, { duration: 0.3 });
+      animate(".containers", { y: 0 }, { duration: 0.3 });
+      animate(".dot", { scale: 1 }, { duration: 0.3 });
+    };
+
+    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="whale"
+          d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+        />
+        <motion.path className="containers" d="M5 10h3v3h-3z" />
+        <motion.path className="containers" d="M8 10h3v3h-3z" />
+        <motion.path className="containers" d="M11 10h3v3h-3z" />
+        <motion.path className="containers" d="M8 7h3v3h-3z" />
+        <motion.path className="containers" d="M11 7h3v3h-3z" />
+        <motion.path className="containers" d="M11 4h3v3h-3z" />
+        <motion.path
+          className="whale"
+          d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78"
+        />
+        <motion.path
+          className="dot"
+          style={{ transformOrigin: "10 16" }}
+          d="M10 16l0 .01"
+        />
+      </motion.svg>
+    );
+  },
+);
+
+DockerIcon.displayName = "DockerIcon";
+export default DockerIcon;

package/src/animations/dots-horizontal-icon.tsx

@@ -0,0 +1,105 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DotsHorizontalIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".dot-left",
+        {
+          x: [-2, 0],
+          scale: [1, 1.2, 1],
+        },
+        {
+          duration: 0.3,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".dot-center",
+        {
+          scale: [1, 1.3, 1],
+        },
+        {
+          duration: 0.3,
+          delay: 0.1,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".dot-right",
+        {
+          x: [2, 0],
+          scale: [1, 1.2, 1],
+        },
+        {
+          duration: 0.3,
+          delay: 0.2,
+          ease: "easeOut",
+        },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".dot-left, .dot-center, .dot-right",
+        { x: 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
+          d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          className="dot-left"
+          style={{ transformOrigin: "50% 50%" }}
+        />
+
+        <motion.path
+          d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          className="dot-center"
+          style={{ transformOrigin: "50% 50%" }}
+        />
+
+        <motion.path
+          d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          className="dot-right"
+          style={{ transformOrigin: "50% 50%" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+DotsHorizontalIcon.displayName = "DotsHorizontalIcon";
+export default DotsHorizontalIcon;

package/src/animations/dots-vertical-icon.tsx

@@ -0,0 +1,105 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DotsVerticalIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      animate(
+        ".dot-top",
+        {
+          y: [-2, 0],
+          scale: [1, 1.2, 1],
+        },
+        {
+          duration: 0.3,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".dot-middle",
+        {
+          scale: [1, 1.3, 1],
+        },
+        {
+          duration: 0.3,
+          delay: 0.1,
+          ease: "easeOut",
+        },
+      );
+
+      animate(
+        ".dot-bottom",
+        {
+          y: [2, 0],
+          scale: [1, 1.2, 1],
+        },
+        {
+          duration: 0.3,
+          delay: 0.2,
+          ease: "easeOut",
+        },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".dot-top, .dot-middle, .dot-bottom",
+        { 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
+          d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          className="dot-middle"
+          style={{ transformOrigin: "50% 50%" }}
+        />
+
+        <motion.path
+          d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          className="dot-bottom"
+          style={{ transformOrigin: "50% 50%" }}
+        />
+
+        <motion.path
+          d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+          className="dot-top"
+          style={{ transformOrigin: "50% 50%" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+DotsVerticalIcon.displayName = "DotsVerticalIcon";
+export default DotsVerticalIcon;

package/src/animations/double-check-icon.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { scaledStrokeWidth } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DoubleCheckIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      await animate(
+        ".check-first",
+        {
+          pathLength: [0, 1],
+          opacity: [0, 1],
+        },
+        {
+          duration: 0.5,
+          ease: "easeInOut",
+        },
+      );
+
+      await animate(
+        ".check-second",
+        {
+          pathLength: [0, 1],
+          opacity: [0, 1],
+        },
+        {
+          duration: 0.5,
+          ease: "easeInOut",
+        },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".check-first, .check-second",
+        { pathLength: 1, opacity: 1 },
+        { duration: 0.2, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.div
+        ref={scope}
+        className={`inline-flex cursor-pointer ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 48)}
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        >
+          <motion.path
+            className="check-first"
+            style={{ transformOrigin: "19px 25px" }}
+            d="M3 26.4L11.8846 39L35 11"
+          />
+
+          <motion.path
+            className="check-second"
+            style={{ transformOrigin: "33px 25px" }}
+            d="M45 11L21.8847 39L20.2098 36.6248"
+          />
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+DoubleCheckIcon.displayName = "DoubleCheckIcon";
+export default DoubleCheckIcon;

package/src/animations/down-chevron.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const DownChevron = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(async () => {
+      await animate(
+        ".chevron-down",
+        {
+          y: [0, 6, 0],
+        },
+        {
+          duration: 0.8,
+          ease: "easeInOut",
+        },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(".chevron-down", { y: 0 }, { duration: 0.2, ease: "easeInOut" });
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.div
+        ref={scope}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <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"
+          className="chevron-down"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M6 9l6 6l6 -6" />
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+DownChevron.displayName = "DownChevron";
+export default DownChevron;