@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -1,109 +0,0 @@
-"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 ActivityIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface ActivityIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const VARIANTS: Variants = {
-  normal: {
-    opacity: 1,
-    pathLength: 1,
-    pathOffset: 0,
-    transition: {
-      duration: 0.4,
-      opacity: { duration: 0.1 },
-    },
-  },
-  animate: {
-    opacity: [0, 1],
-    pathLength: [0, 1],
-    pathOffset: [1, 0],
-    transition: {
-      duration: 0.6,
-      ease: "linear",
-      opacity: { duration: 0.1 },
-    },
-  },
-};
-
-const ActivityIcon = forwardRef<ActivityIconHandle, ActivityIconProps>(
-  ({ 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="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
-            initial="normal"
-            variants={VARIANTS}
-          />
-        </svg>
-      </div>
-    );
-  }
-);
-
-ActivityIcon.displayName = "ActivityIcon";
-
-export { ActivityIcon };

package/src/react/icons/lucide-animated/bell-electric.tsx

@@ -1,124 +0,0 @@
-"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 BellElectricIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface BellElectricIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const BellElectricIcon = forwardRef<
-  BellElectricIconHandle,
-  BellElectricIconProps
->(({ 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"
-        style={{ transformBox: "fill-box", transformOrigin: "50% 50%" }}
-        transition={{ duration: 0.9 }}
-        variants={{
-          normal: { rotate: 0, translateX: 0, translateY: 0 },
-          animate: {
-            rotate: [0, -12, 12, -8, 8, 0],
-            translateX: [0, -1.5, 1.5, -1, 1, 0],
-            translateY: [0, -1, 1, -0.5, 0.5, 0],
-          },
-        }}
-        viewBox="0 0 24 24"
-        width={size}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M18.518 17.347A7 7 0 0 1 14 19" />
-        <motion.path
-          animate={controls}
-          d="M18.8 4A11 11 0 0 1 20 9"
-          style={{ transformBox: "fill-box", originX: "50%", originY: "50%" }}
-          transition={{ duration: 0.9 }}
-          variants={{
-            normal: { translateX: 0, translateY: 0, rotate: 0 },
-            animate: {
-              translateX: [0, -0.8, 0.8, -0.6, 0.6, 0],
-              translateY: [0, -0.5, 0.5, -0.3, 0.3, 0],
-              rotate: [0, -6, 6, -4, 4, 0],
-            },
-          }}
-        />
-        <motion.path
-          animate={controls}
-          d="M9 9h.01"
-          style={{ transformBox: "fill-box", originX: "50%", originY: "50%" }}
-          transition={{ duration: 0.75 }}
-          variants={{
-            normal: { translateX: 0, translateY: 0, rotate: 0, scale: 1 },
-            animate: {
-              translateX: [0, -1.6, 1.6, -1.2, 1.2, 0],
-              translateY: [0, -1.2, 1.2, -0.8, 0.8, 0],
-              rotate: [0, -10, 10, -7, 7, 0],
-              scale: [1, 1.08, 0.95, 1.06, 0.98, 1],
-            },
-          }}
-        />
-        <circle cx="9" cy="9" r="7" />
-        <rect height="6" rx="2" width="10" x="4" y="16" />
-        <circle cx="20" cy="16" r="2" />
-      </motion.svg>
-    </div>
-  );
-});
-
-BellElectricIcon.displayName = "BellElectricIcon";
-
-export { BellElectricIcon };

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

@@ -1,93 +0,0 @@
-"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 BellIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface BellIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const SVG_VARIANTS: Variants = {
-  normal: { rotate: 0 },
-  animate: { rotate: [0, -10, 10, -10, 0] },
-};
-
-const BellIcon = forwardRef<BellIconHandle, BellIconProps>(
-  ({ 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: 0.5,
-            ease: "easeInOut",
-          }}
-          variants={SVG_VARIANTS}
-          viewBox="0 0 24 24"
-          width={size}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-        </motion.svg>
-      </div>
-    );
-  }
-);
-
-BellIcon.displayName = "BellIcon";
-
-export { BellIcon };

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

@@ -1,122 +0,0 @@
-"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 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/icons/lucide-animated/box.tsx

@@ -1,117 +0,0 @@
-"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 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/icons/lucide-animated/circle-check.tsx

@@ -1,107 +0,0 @@
-"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 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 };