@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,117 +0,0 @@
-"use client";
-
-import type { Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-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/check.tsx

@@ -1,21 +0,0 @@
-/**
- * Check Icon
- *
- * Checkmark/tick icon.
- */
-
-export function Check(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );
-}

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

@@ -1,107 +0,0 @@
-"use client";
-
-import type { Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-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

@@ -1,133 +0,0 @@
-"use client";
-
-import type { Transition, Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-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

@@ -1,99 +0,0 @@
-"use client";
-
-import type { Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-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/edit-2.tsx

@@ -1,21 +0,0 @@
-/**
- * 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/react-ui/icons/lucide-animated/globe.tsx

@@ -1,23 +0,0 @@
-/**
- * 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/react-ui/icons/lucide-animated/home.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import type { Transition, Variants } from "motion/react";
-import { motion, useAnimation } from "motion/react";
-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 };

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

@@ -1,38 +0,0 @@
-/**
- * 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-ui/icons/lucide-animated/layers.tsx

@@ -1,23 +0,0 @@
-/**
- * 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>
-  );
-}