@neasg/design-system 0.1.3 → 0.2.0

package/dist/animated-icons/paperclip.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { rotate: 0 },
+    animate: {
+        rotate: [0, -10, 10, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const PaperclipIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }) }));
+});
+PaperclipIcon.displayName = "PaperclipIcon";
+export { PaperclipIcon };

package/dist/animated-icons/pencil.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface PencilIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface PencilIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const PencilIcon: import("react").ForwardRefExoticComponent<PencilIconProps & import("react").RefAttributes<PencilIconHandle>>;
+export { PencilIcon };

package/dist/animated-icons/pencil.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { rotate: 0, scale: 1 },
+    animate: {
+        rotate: [-5, 5, -5, 0],
+        scale: [1, 1.1, 1.1, 1],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const PencilIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 16, ...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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }), _jsx("path", { d: "m15 5 4 4" })] }) }));
+});
+PencilIcon.displayName = "PencilIcon";
+export { PencilIcon };

package/dist/animated-icons/plus.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface PlusIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface PlusIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const PlusIcon: import("react").ForwardRefExoticComponent<PlusIconProps & import("react").RefAttributes<PlusIconHandle>>;
+export { PlusIcon };

package/dist/animated-icons/plus.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const PlusIcon = forwardRef(({ 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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(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", children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M12 5v14" })] }) }));
+});
+PlusIcon.displayName = "PlusIcon";
+export { PlusIcon };

package/dist/animated-icons/search.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface SearchIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface SearchIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const SearchIcon: import("react").ForwardRefExoticComponent<SearchIconProps & import("react").RefAttributes<SearchIconHandle>>;
+export { SearchIcon };

package/dist/animated-icons/search.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SearchIcon = forwardRef(({ 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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(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", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }) }));
+});
+SearchIcon.displayName = "SearchIcon";
+export { SearchIcon };

package/dist/animated-icons/send.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface SendIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface SendIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const SendIcon: import("react").ForwardRefExoticComponent<SendIconProps & import("react").RefAttributes<SendIconHandle>>;
+export { SendIcon };

package/dist/animated-icons/send.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { x: 0, y: 0 },
+    animate: {
+        x: [0, 3, 0],
+        y: [0, -3, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const SendIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "m22 2-7 20-4-9-9-4Z" }), _jsx("path", { d: "M22 2 11 13" })] }) }));
+});
+SendIcon.displayName = "SendIcon";
+export { SendIcon };

package/dist/animated-icons/settings.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface SettingsIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface SettingsIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const SettingsIcon: import("react").ForwardRefExoticComponent<SettingsIconProps & import("react").RefAttributes<SettingsIconHandle>>;
+export { SettingsIcon };

package/dist/animated-icons/settings.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SettingsIcon = forwardRef(({ 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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(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", children: [_jsx("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" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }) }));
+});
+SettingsIcon.displayName = "SettingsIcon";
+export { SettingsIcon };

package/dist/animated-icons/shield.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface ShieldIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface ShieldIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const ShieldIcon: import("react").ForwardRefExoticComponent<ShieldIconProps & import("react").RefAttributes<ShieldIconHandle>>;
+export { ShieldIcon };

package/dist/animated-icons/shield.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    normal: { scale: 1 },
+    animate: {
+        scale: [1, 1.1, 1],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const ShieldIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) }) }));
+});
+ShieldIcon.displayName = "ShieldIcon";
+export { ShieldIcon };

package/dist/animated-icons/strikethrough.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface StrikethroughIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface StrikethroughIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const StrikethroughIcon: import("react").ForwardRefExoticComponent<StrikethroughIconProps & import("react").RefAttributes<StrikethroughIconHandle>>;
+export { StrikethroughIcon };

package/dist/animated-icons/strikethrough.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const LINE_VARIANTS = {
+    normal: { scaleX: 1 },
+    animate: {
+        scaleX: [0, 1],
+        transition: {
+            duration: 0.3,
+            ease: "easeInOut",
+        },
+    },
+};
+const StrikethroughIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("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", children: [_jsx("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }), _jsx("path", { d: "M14 12a4 4 0 0 1 0 8H6" }), _jsx(motion.line, { animate: controls, style: { originX: 0 }, variants: LINE_VARIANTS, x1: "4", x2: "20", y1: "12", y2: "12" })] }) }));
+});
+StrikethroughIcon.displayName = "StrikethroughIcon";
+export { StrikethroughIcon };

package/dist/animated-icons/timer.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface TimerIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface TimerIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const TimerIcon: import("react").ForwardRefExoticComponent<TimerIconProps & import("react").RefAttributes<TimerIconHandle>>;
+export { TimerIcon };

package/dist/animated-icons/timer.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const HAND_VARIANTS = {
+    normal: {
+        rotate: 0,
+        originX: "0%",
+        originY: "100%",
+        transition: {
+            duration: 0.6,
+            ease: [0.4, 0, 0.2, 1],
+        },
+    },
+    animate: {
+        rotate: 300,
+        originX: "0%",
+        originY: "100%",
+        transition: {
+            delay: 0.1,
+            duration: 0.6,
+            ease: [0.4, 0, 0.2, 1],
+        },
+    },
+};
+const BUTTON_VARIANTS = {
+    normal: {
+        scale: 1,
+        y: 0,
+    },
+    animate: {
+        scale: [0.9, 1],
+        y: [0, 1, 0],
+        transition: {
+            duration: 0.3,
+            ease: [0.4, 0, 0.2, 1],
+        },
+    },
+};
+const TimerIcon = forwardRef(({ 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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("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", children: [_jsx(motion.line, { animate: controls, variants: BUTTON_VARIANTS, x1: "10", x2: "14", y1: "2", y2: "2" }), _jsx(motion.line, { animate: controls, initial: "normal", variants: HAND_VARIANTS, x1: "12", x2: "15", y1: "14", y2: "11" }), _jsx("circle", { cx: "12", cy: "14", r: "8" })] }) }));
+});
+TimerIcon.displayName = "TimerIcon";
+export { TimerIcon };

package/dist/animated-icons/trash.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface TrashIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface TrashIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const TrashIcon: import("react").ForwardRefExoticComponent<TrashIconProps & import("react").RefAttributes<TrashIconHandle>>;
+export { TrashIcon };

package/dist/animated-icons/trash.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const LID_VARIANTS = {
+    normal: { y: 0, rotate: 0 },
+    animate: {
+        y: [-1, -2, -1, 0],
+        rotate: [0, -3, 3, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const BIN_VARIANTS = {
+    normal: { scale: 1 },
+    animate: {
+        scale: [1, 1.05, 1],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const TrashIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 16, ...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) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("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", children: [_jsx(motion.path, { animate: controls, d: "M3 6h18", variants: LID_VARIANTS }), _jsxs(motion.g, { animate: controls, variants: BIN_VARIANTS, children: [_jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), _jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), _jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }), _jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })] })] }) }));
+});
+TrashIcon.displayName = "TrashIcon";
+export { TrashIcon };

package/dist/animated-icons/trending-down.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface TrendingDownIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface TrendingDownIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const TrendingDownIcon: import("react").ForwardRefExoticComponent<TrendingDownIconProps & import("react").RefAttributes<TrendingDownIconHandle>>;
+export { TrendingDownIcon };