@mks2508/mks-ui 0.1.4 → 0.2.0

package/src/react/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/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/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/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/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/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 };

package/src/react/icons/lucide-animated/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Lucide animated icons barrel export.
+ *
+ * @module @mks2508/mks-ui/react/icons/lucide-animated
+ */
+
+export * from './activity';
+export * from './arrow-down-to-line';
+export * from './arrow-up';
+export * from './bell';
+export * from './bell-electric';
+export * from './bot';
+export * from './box';
+export * from './check';
+export * from './circle-check';
+export * from './delete';
+export * from './download';
+export * from './edit-2';
+export * from './globe';
+export * from './home';
+export * from './layers';
+export * from './layout-panel-top';
+export * from './list';
+export * from './package';
+export * from './palette';
+export * from './plus';
+export * from './refresh-cw';
+export * from './rocket';
+export * from './save';
+export * from './search';
+export * from './settings';
+export * from './terminal';
+export * from './trash-2';
+export * from './trending-down';
+export * from './trending-up';
+export * from './type';
+export * from './upload';
+export * from './x';

package/src/react/icons/lucide-animated/layout-panel-top.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react/lib/utils";
+
+export interface LayoutPanelTopIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface LayoutPanelTopIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LayoutPanelTopIcon = forwardRef<
+  LayoutPanelTopIconHandle,
+  LayoutPanelTopIconProps
+>(({ 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.rect
+          animate={controls}
+          height="7"
+          initial="normal"
+          rx="1"
+          variants={{
+            normal: { opacity: 1, translateY: 0 },
+            animate: {
+              opacity: [0, 1],
+              translateY: [-5, 0],
+              transition: {
+                opacity: { duration: 0.5, times: [0.2, 1] },
+                duration: 0.5,
+              },
+            },
+          }}
+          width="18"
+          x="3"
+          y="3"
+        />
+        <motion.rect
+          animate={controls}
+          height="7"
+          initial="normal"
+          rx="1"
+          variants={{
+            normal: { opacity: 1, translateX: 0 },
+            animate: {
+              opacity: [0, 1],
+              translateX: [-10, 0],
+              transition: {
+                opacity: { duration: 0.7, times: [0.5, 1] },
+                translateX: { delay: 0.3 },
+                duration: 0.5,
+              },
+            },
+          }}
+          width="7"
+          x="3"
+          y="14"
+        />
+        <motion.rect
+          animate={controls}
+          height="7"
+          initial="normal"
+          rx="1"
+          variants={{
+            normal: { opacity: 1, translateX: 0 },
+            animate: {
+              opacity: [0, 1],
+              translateX: [10, 0],
+              transition: {
+                opacity: { duration: 0.8, times: [0.5, 1] },
+                translateX: { delay: 0.4 },
+                duration: 0.5,
+              },
+            },
+          }}
+          width="7"
+          x="14"
+          y="14"
+        />
+      </svg>
+    </div>
+  );
+});
+
+LayoutPanelTopIcon.displayName = "LayoutPanelTopIcon";
+
+export { LayoutPanelTopIcon };

package/src/react/icons/lucide-animated/plus.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react/lib/utils";
+
+export interface PlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PlusIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PlusIcon = forwardRef<PlusIconHandle, PlusIconProps>(
+  ({ 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}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          transition={{ type: "spring", stiffness: 100, damping: 15 }}
+          variants={{
+            normal: {
+              rotate: 0,
+            },
+            animate: {
+              rotate: 180,
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5 12h14" />
+          <path d="M12 5v14" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+PlusIcon.displayName = "PlusIcon";
+
+export { PlusIcon };

package/src/react/icons/lucide-animated/search.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { motion, useAnimation } from "framer-motion";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/react/lib/utils";
+
+export interface SearchIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SearchIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SearchIcon = forwardRef<SearchIconHandle, SearchIconProps>(
+  ({ 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}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          transition={{
+            duration: 1,
+            bounce: 0.3,
+          }}
+          variants={{
+            normal: { x: 0, y: 0 },
+            animate: {
+              x: [0, 0, -3, 0],
+              y: [0, -4, 0, 0],
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+SearchIcon.displayName = "SearchIcon";
+
+export { SearchIcon };