nfx-ui 0.17.0 → 0.22.0

package/src/animations/letter-q-icon.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterQIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Tail wag animation
+      animate(
+        ".q-body",
+        { rotate: [0, 2, -2, 1, 0] },
+        { duration: 0.4, ease: "easeOut" },
+      );
+      animate(
+        ".q-tail",
+        { rotate: [0, 20, -15, 10, 0] },
+        { duration: 0.5, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".q-body, .q-tail", { rotate: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path
+          className="q-body"
+          d="M18 9a5 5 0 0 0 -5 -5h-2a5 5 0 0 0 -5 5v6a5 5 0 0 0 5 5h2a5 5 0 0 0 5 -5v-6"
+          style={{ transformOrigin: "12px 12px" }}
+        />
+        <motion.path
+          className="q-tail"
+          d="M13 15l5 5"
+          style={{ transformOrigin: "13px 15px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+LetterQIcon.displayName = "LetterQIcon";
+export default LetterQIcon;

package/src/animations/letter-r-icon.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterRIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Leg kick animation
+      animate(".r-body", { x: [0, 1, 0] }, { duration: 0.3, ease: "easeOut" });
+      animate(
+        ".r-leg",
+        { rotate: [0, 15, 0], x: [0, 2, 0] },
+        { duration: 0.3, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".r-body, .r-leg", { rotate: 0, x: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path className="r-body" d="M7 20v-16h5.5a4 4 0 0 1 0 9h-5.5" />
+        <motion.path
+          className="r-leg"
+          d="M12 13l5 7"
+          style={{ transformOrigin: "12px 13px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+LetterRIcon.displayName = "LetterRIcon";
+export default LetterRIcon;

package/src/animations/letter-s-icon.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterSIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Snake slither - wiggles in serpentine motion
+      animate(
+        ".s-shape",
+        {
+          x: [0, 2, -2, 2, -1, 0],
+          rotate: [0, 3, -3, 2, -1, 0],
+        },
+        { duration: 0.5, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".s-shape", { x: 0, rotate: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path
+          className="s-shape"
+          d="M18 6C18 6 16 4 12 4C8 4 6 6 6 8C6 10 8 11 12 12C16 13 18 14 18 16C18 18 16 20 12 20C8 20 6 18 6 18"
+          style={{ transformOrigin: "12px 12px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+LetterSIcon.displayName = "LetterSIcon";
+export default LetterSIcon;

package/src/animations/letter-t-icon.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterTIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Hammer strike - T falls down and strikes
+      await animate(
+        ".t-shape",
+        { rotate: [0, -15, 5, -2, 0], y: [0, -2, 3, 0] },
+        { duration: 0.4, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".t-shape", { rotate: 0, y: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.g className="t-shape" style={{ transformOrigin: "12px 4px" }}>
+          {/* Top bar (hammer head) */}
+          <motion.path d="M4 4H20" />
+
+          {/* Stem (handle) */}
+          <motion.path d="M12 4V20" />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+LetterTIcon.displayName = "LetterTIcon";
+export default LetterTIcon;

package/src/animations/letter-u-icon.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterUIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Cup fill - liquid fills up from bottom
+      animate(
+        ".u-fill",
+        {
+          pathLength: [0, 1],
+          opacity: [0.5, 1],
+        },
+        { duration: 0.6, ease: "easeOut" },
+      );
+
+      // Slight scale on the U shape
+      animate(
+        ".u-shape",
+        { scaleY: [1, 1.02, 1] },
+        { duration: 0.4, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".u-fill", { pathLength: 1, opacity: 1 }, { duration: 0.2 });
+      animate(".u-shape", { scaleY: 1 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path
+          className="u-shape u-fill"
+          d="M6 4V14C6 17.3137 8.68629 20 12 20C15.3137 20 18 17.3137 18 14V4"
+          style={{ transformOrigin: "12px 20px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+LetterUIcon.displayName = "LetterUIcon";
+export default LetterUIcon;

package/src/animations/letter-v-icon.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterVIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Victory thrust - shoots upward like a victory gesture
+      animate(
+        ".v-shape",
+        {
+          y: [0, -5, 0],
+          scale: [1, 1.1, 1],
+          rotate: [0, 5, -5, 0],
+        },
+        { duration: 0.4, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".v-shape", { y: 0, scale: 1, rotate: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.g className="v-shape" style={{ transformOrigin: "12px 20px" }}>
+          {/* Left arm */}
+          <motion.path d="M4 4L12 20" />
+
+          {/* Right arm */}
+          <motion.path d="M12 20L20 4" />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+LetterVIcon.displayName = "LetterVIcon";
+export default LetterVIcon;

package/src/animations/letter-w-icon.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterWIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Water wave - peaks ripple like water waves
+      animate(
+        ".peak-1",
+        { y: [0, -3, 0] },
+        { duration: 0.4, ease: "easeInOut" },
+      );
+
+      animate(
+        ".peak-2",
+        { y: [0, -3, 0] },
+        { duration: 0.4, ease: "easeInOut", delay: 0.1 },
+      );
+
+      animate(
+        ".peak-3",
+        { y: [0, -3, 0] },
+        { duration: 0.4, ease: "easeInOut", delay: 0.2 },
+      );
+    };
+
+    const stop = () => {
+      animate(".peak-1, .peak-2, .peak-3", { y: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        {/* First down stroke */}
+        <motion.path
+          className="peak-1"
+          d="M4 4L8 20"
+          style={{ transformOrigin: "4px 4px" }}
+        />
+
+        {/* First valley to peak */}
+        <motion.path
+          className="peak-2"
+          d="M8 20L12 8"
+          style={{ transformOrigin: "12px 8px" }}
+        />
+
+        {/* Second peak to valley */}
+        <motion.path
+          className="peak-3"
+          d="M12 8L16 20"
+          style={{ transformOrigin: "12px 8px" }}
+        />
+
+        {/* Last up stroke */}
+        <motion.path d="M16 20L20 4" />
+      </motion.svg>
+    );
+  },
+);
+
+LetterWIcon.displayName = "LetterWIcon";
+export default LetterWIcon;

package/src/animations/letter-x-icon.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterXIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // X-ray flash animation
+      animate(
+        ".x-stroke-1",
+        { opacity: [1, 0.3, 1], scale: [1, 1.05, 1] },
+        { duration: 0.3, ease: "easeOut" },
+      );
+      animate(
+        ".x-stroke-2",
+        { opacity: [1, 0.3, 1], scale: [1, 1.05, 1] },
+        { duration: 0.3, ease: "easeOut", delay: 0.05 },
+      );
+    };
+
+    const stop = () => {
+      animate(
+        ".x-stroke-1, .x-stroke-2",
+        { opacity: 1, scale: 1 },
+        { duration: 0.2 },
+      );
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path
+          className="x-stroke-1"
+          d="M7 4l10 16"
+          style={{ transformOrigin: "12px 12px" }}
+        />
+        <motion.path
+          className="x-stroke-2"
+          d="M17 4l-10 16"
+          style={{ transformOrigin: "12px 12px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+LetterXIcon.displayName = "LetterXIcon";
+export default LetterXIcon;

package/src/animations/letter-y-icon.tsx

@@ -0,0 +1,60 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterYIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Yoyo drop animation
+      animate(
+        ".y-stem",
+        { scaleY: [1, 1.2, 0.9, 1.1, 1] },
+        { duration: 0.4, ease: "easeOut" },
+      );
+      animate(".y-arms", { y: [0, -2, 0] }, { duration: 0.3, ease: "easeOut" });
+    };
+
+    const stop = () => {
+      animate(".y-stem, .y-arms", { scaleY: 1, y: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path className="y-arms" d="M7 4l5 9l5 -9" />
+        <motion.path
+          className="y-stem"
+          d="M12 13l0 7"
+          style={{ transformOrigin: "12px 13px" }}
+        />
+      </motion.svg>
+    );
+  },
+);
+
+LetterYIcon.displayName = "LetterYIcon";
+export default LetterYIcon;

package/src/animations/letter-z-icon.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const LetterZIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      // Zigzag zap animation
+      animate(
+        ".z-shape",
+        { x: [0, 2, -2, 1, 0] },
+        { duration: 0.3, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".z-shape", { x: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        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}`}
+        style={{ overflow: "visible" }}
+      >
+        <motion.path className="z-shape" d="M7 4h10l-10 16h10" />
+      </motion.svg>
+    );
+  },
+);
+
+LetterZIcon.displayName = "LetterZIcon";
+export default LetterZIcon;