@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -1,133 +0,0 @@
-"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

@@ -1,99 +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 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

@@ -1,103 +0,0 @@
-"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/layout-panel-top.tsx

@@ -1,143 +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 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

@@ -1,92 +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 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

@@ -1,94 +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 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 };