@mks2508/mks-ui 0.1.0

package/src/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 "@/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/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 "@/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/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 "@/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/icons/lucide-animated/edit-2.tsx

@@ -0,0 +1,21 @@
+/**
+ * Edit2 Icon
+ *
+ * Edit/pencil icon.
+ */
+
+export function Edit2(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+    </svg>
+  );
+}

package/src/icons/lucide-animated/globe.tsx

@@ -0,0 +1,23 @@
+/**
+ * Globe Icon
+ *
+ * Globe/world icon.
+ */
+
+export function Globe(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}

package/src/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 "@/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/icons/lucide-animated/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Lucide animated icons barrel export
+ *
+ * @module @mks2508/mks-ui/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/icons/lucide-animated/layers.tsx

@@ -0,0 +1,23 @@
+/**
+ * Layers Icon
+ *
+ * Layers/stack icon.
+ */
+
+export function Layers(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon points="12 2 2 7 12 12 22 7 12 2" />
+      <polyline points="2 17 12 22 22 17" />
+      <polyline points="2 12 12 17 22 12" />
+    </svg>
+  );
+}

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