@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react-ui/icons/lucide-animated/bot.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface BotIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+export interface BotIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BotIcon = forwardRef<BotIconHandle, BotIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 8V4H8" />
+          <rect height="12" rx="2" width="16" x="4" y="8" />
+          <path d="M2 14h2" />
+          <path d="M20 14h2" />
+
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={{
+              normal: { y1: 13, y2: 15 },
+              animate: {
+                y1: [13, 14, 13],
+                y2: [15, 14, 15],
+                transition: {
+                  duration: 0.5,
+                  ease: "easeInOut",
+                  delay: 0.2,
+                },
+              },
+            }}
+            x1={15}
+            x2={15}
+          />
+
+          <motion.line
+            animate={controls}
+            initial="normal"
+            variants={{
+              normal: { y1: 13, y2: 15 },
+              animate: {
+                y1: [13, 14, 13],
+                y2: [15, 14, 15],
+                transition: {
+                  duration: 0.5,
+                  ease: "easeInOut",
+                  delay: 0.2,
+                },
+              },
+            }}
+            x1={9}
+            x2={9}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BotIcon.displayName = "Bot";
+
+export { BotIcon };

package/src/react-ui/icons/lucide-animated/box.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface BoxIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BoxIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const BoxIcon = forwardRef<BoxIconHandle, BoxIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m3.3 7 8.7 5 8.7-5"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 22V12"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+BoxIcon.displayName = "BoxIcon";
+
+export { BoxIcon };

package/src/react-ui/icons/lucide-animated/circle-check.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface CircleCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CircleCheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.3,
+      opacity: { duration: 0.1 },
+    },
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 },
+    },
+  },
+};
+
+const CircleCheckIcon = forwardRef<CircleCheckIconHandle, CircleCheckIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <motion.path
+            animate={controls}
+            d="m9 12 2 2 4-4"
+            initial="normal"
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CircleCheckIcon.displayName = "CircleCheckIcon";
+
+export { CircleCheckIcon };

package/src/react-ui/icons/lucide-animated/delete.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import type { Transition, Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface DeleteIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DeleteIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LID_VARIANTS: Variants = {
+  normal: { y: 0 },
+  animate: { y: -1.1 },
+};
+
+const SPRING_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 500,
+  damping: 30,
+};
+
+const DeleteIcon = forwardRef<DeleteIconHandle, DeleteIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.g
+            animate={controls}
+            transition={SPRING_TRANSITION}
+            variants={LID_VARIANTS}
+          >
+            <path d="M3 6h18" />
+            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+          </motion.g>
+          <motion.path
+            animate={controls}
+            d="M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8"
+            transition={SPRING_TRANSITION}
+            variants={{
+              normal: { d: "M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8" },
+              animate: { d: "M19 9v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V9" },
+            }}
+          />
+          <motion.line
+            animate={controls}
+            transition={SPRING_TRANSITION}
+            variants={{
+              normal: { y1: 11, y2: 17 },
+              animate: { y1: 11.5, y2: 17.5 },
+            }}
+            x1="10"
+            x2="10"
+            y1="11"
+            y2="17"
+          />
+          <motion.line
+            animate={controls}
+            transition={SPRING_TRANSITION}
+            variants={{
+              normal: { y1: 11, y2: 17 },
+              animate: { y1: 11.5, y2: 17.5 },
+            }}
+            x1="14"
+            x2="14"
+            y1="11"
+            y2="17"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+DeleteIcon.displayName = "DeleteIcon";
+
+export { DeleteIcon };

package/src/react-ui/icons/lucide-animated/download.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface DownloadIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface DownloadIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: { y: 0 },
+  animate: {
+    y: 2,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 10,
+      mass: 1,
+    },
+  },
+};
+
+const DownloadIcon = forwardRef<DownloadIconHandle, DownloadIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <motion.g animate={controls} variants={ARROW_VARIANTS}>
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" x2="12" y1="15" y2="3" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+DownloadIcon.displayName = "DownloadIcon";
+
+export { DownloadIcon };

package/src/react-ui/icons/lucide-animated/home.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import type { Transition, Variants } from "framer-motion";
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react-ui/lib/utils";
+
+export interface HomeIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface HomeIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  duration: 0.6,
+  opacity: { duration: 0.2 },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+  },
+};
+
+const HomeIcon = forwardRef<HomeIconHandle, HomeIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <motion.path
+            animate={controls}
+            d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+            transition={DEFAULT_TRANSITION}
+            variants={PATH_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+HomeIcon.displayName = "HomeIcon";
+
+export { HomeIcon };