@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,143 +0,0 @@
-"use client";
-
-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 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-ui/icons/lucide-animated/list.tsx

@@ -1,54 +0,0 @@
-/**
- * List Icon.
- *
- * Simple SVG icon for line numbers.
- *
- * @module components/icons/list
- */
-
-'use client';
-
-import type { HTMLAttributes } from 'react';
-
-export interface IListIconProps extends HTMLAttributes<SVGSVGElement> {
-  size?: number;
-}
-
-/**
- * List Icon component.
- *
- * Use for line numbers toggle.
- *
- * @example
- * ```tsx
- * <ListIcon className="w-4 h-4 text-primary" />
- * ```
- */
-export function ListIcon({
-  className,
-  size = 24,
-  ...props
-}: IListIconProps) {
-  return (
-    <svg
-      className={className}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <line x1="8" x2="21" y1="6" y2="6" />
-      <line x1="8" x2="21" y1="12" y2="12" />
-      <line x1="8" x2="21" y1="18" y2="18" />
-      <line x1="3" x2="3.01" y1="6" y2="6" />
-      <line x1="3" x2="3.01" y1="12" y2="12" />
-      <line x1="3" x2="3.01" y1="18" y2="18" />
-    </svg>
-  );
-}

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

@@ -1,24 +0,0 @@
-/**
- * Package Icon
- *
- * Package/box icon.
- */
-
-export function Package(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m7.5 4.27 9 5.15" />
-      <path 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" />
-      <path d="m3.3 7 8.7 5 8.7-5" />
-      <path d="M12 22v-9" />
-    </svg>
-  );
-}

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

@@ -1,25 +0,0 @@
-/**
- * Palette Icon
- *
- * Palette/colors icon.
- */
-
-export function Palette(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" />
-      <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
-      <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
-      <circle cx="6.5" cy="12.5" r="0.5" fill="currentColor" />
-      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
-    </svg>
-  );
-}

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

@@ -1,92 +0,0 @@
-"use client";
-
-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 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-ui/icons/lucide-animated/refresh-cw.tsx

@@ -1,24 +0,0 @@
-/**
- * RefreshCw Icon
- *
- * Refresh/rotate icon.
- */
-
-export function RefreshCw(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
-      <path d="M21 3v5h-5" />
-      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
-      <path d="M8 16H3v5" />
-    </svg>
-  );
-}

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

@@ -1,24 +0,0 @@
-/**
- * Rocket Icon
- *
- * Rocket/launch icon.
- */
-
-export function Rocket(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
-      <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
-      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
-      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
-    </svg>
-  );
-}

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

@@ -1,23 +0,0 @@
-/**
- * Save Icon
- *
- * Save/floppy disk icon.
- */
-
-export function Save(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
-      <polyline points="17 21 17 13 7 13 7 21" />
-      <polyline points="7 3 7 8 15 8" />
-    </svg>
-  );
-}

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

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

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

@@ -1,92 +0,0 @@
-"use client";
-
-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 SettingsIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface SettingsIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const SettingsIcon = forwardRef<SettingsIconHandle, SettingsIconProps>(
-  ({ 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: 50, damping: 10 }}
-          variants={{
-            normal: {
-              rotate: 0,
-            },
-            animate: {
-              rotate: 180,
-            },
-          }}
-          viewBox="0 0 24 24"
-          width={size}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
-          <circle cx="12" cy="12" r="3" />
-        </motion.svg>
-      </div>
-    );
-  }
-);
-
-SettingsIcon.displayName = "SettingsIcon";
-
-export { SettingsIcon };

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

@@ -1,46 +0,0 @@
-/**
- * Terminal icon component.
- *
- * Lucide icon for terminal/console display.
- *
- * @module components/icons/terminal
- */
-
-import type { SVGProps } from 'react';
-
-export function TerminalIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <polyline points="4 17 10 11 4 5" />
-      <line x1="12" x2="20" y1="19" y2="19" />
-      <rect width="20" height="14" x="2" y="3" rx="2" />
-    </svg>
-  );
-}
-
-/**
- * Terminal icon handle type for imperative access.
- */
-export type TerminalIconHandle = {
-  /** Icon element reference */
-  icon: 'terminal';
-};
-
-/**
- * Terminal icon props type for customization.
- */
-export interface TerminalIconProps extends SVGProps<SVGSVGElement> {
-  /** Optional size prop */
-  size?: number;
-}

package/src/react-ui/icons/lucide-animated/trash-2.tsx

@@ -1,25 +0,0 @@
-/**
- * Trash2 Icon
- *
- * Delete/trash icon.
- */
-
-export function Trash2(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="3 6 5 6 21 6" />
-      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-      <line x1="10" x2="10" y1="11" y2="17" />
-      <line x1="14" x2="14" y1="11" y2="17" />
-    </svg>
-  );
-}