@libreapps/ui 5.4.1

package/dist/animation/animated-cursor.js

@@ -0,0 +1,275 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@libreapps/ui/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var INTERACTIVE_SELECTORS = [
+  "a",
+  "button",
+  "input",
+  "textarea",
+  "select",
+  '[role="button"]',
+  '[role="link"]',
+  '[tabindex]:not([tabindex="-1"])',
+  ".cursor-pointer",
+  '[data-cursor="pointer"]'
+].join(", ");
+var TEXT_SELECTORS = [
+  'input[type="text"]',
+  'input[type="email"]',
+  'input[type="password"]',
+  'input[type="search"]',
+  "textarea",
+  '[contenteditable="true"]',
+  '[data-cursor="text"]'
+].join(", ");
+var GRAB_SELECTORS = ['[data-cursor="grab"]', ".cursor-grab"].join(", ");
+var GRABBING_SELECTORS = [
+  '[data-cursor="grabbing"]',
+  ".cursor-grabbing"
+].join(", ");
+function isTouchDevice() {
+  if (typeof window === "undefined") return false;
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || // @ts-ignore
+  navigator.msMaxTouchPoints > 0;
+}
+__name(isTouchDevice, "isTouchDevice");
+function useCursorState() {
+  const [cursorState, setCursorState] = react.useState({
+    position: { x: 0, y: 0 },
+    isHovering: false,
+    isClicking: false,
+    cursorType: "default"
+  });
+  const updatePosition = react.useCallback((x, y) => {
+    setCursorState((prev) => ({
+      ...prev,
+      position: { x, y }
+    }));
+  }, []);
+  const updateHoverState = react.useCallback(
+    (isHovering, cursorType = "default") => {
+      setCursorState((prev) => ({
+        ...prev,
+        isHovering,
+        cursorType
+      }));
+    },
+    []
+  );
+  const updateClickState = react.useCallback((isClicking) => {
+    setCursorState((prev) => ({
+      ...prev,
+      isClicking
+    }));
+  }, []);
+  return {
+    cursorState,
+    updatePosition,
+    updateHoverState,
+    updateClickState
+  };
+}
+__name(useCursorState, "useCursorState");
+function useCursorTrail(trailLength, position) {
+  const [trail, setTrail] = react.useState([]);
+  const trailRef = react.useRef([]);
+  react.useEffect(() => {
+    trailRef.current.push(position);
+    if (trailRef.current.length > trailLength) {
+      trailRef.current.shift();
+    }
+    setTrail([...trailRef.current]);
+  }, [position, trailLength]);
+  return trail;
+}
+__name(useCursorTrail, "useCursorTrail");
+function AnimatedCursor({
+  isVisible = true,
+  size = 20,
+  color = "#000000",
+  trailColor = "#00000050",
+  animationDuration = 200,
+  showTrail = true,
+  trailLength = 8,
+  blendMode = "normal",
+  hoverScale = 1.5,
+  hideOnTouch = true,
+  className,
+  clickAnimationDuration = 100,
+  zIndex = 9999
+}) {
+  const { cursorState, updatePosition, updateHoverState, updateClickState } = useCursorState();
+  const trail = useCursorTrail(trailLength, cursorState.position);
+  const [isTouch, setIsTouch] = react.useState(false);
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setIsTouch(isTouchDevice());
+    setMounted(true);
+  }, []);
+  react.useEffect(() => {
+    if (!mounted || hideOnTouch && isTouch) return;
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      try {
+        requestAnimationFrame(() => {
+          updatePosition(e.clientX, e.clientY);
+        });
+      } catch (error) {
+        console.warn("AnimatedCursor: Error updating position", error);
+      }
+    }, "handleMouseMove");
+    const handleMouseOver = /* @__PURE__ */ __name((e) => {
+      try {
+        const target = e.target;
+        if (target?.closest?.(INTERACTIVE_SELECTORS)) {
+          updateHoverState(true, "pointer");
+        } else if (target?.closest?.(TEXT_SELECTORS)) {
+          updateHoverState(true, "text");
+        } else if (target?.closest?.(GRAB_SELECTORS)) {
+          updateHoverState(true, "grab");
+        } else if (target?.closest?.(GRABBING_SELECTORS)) {
+          updateHoverState(true, "grabbing");
+        } else {
+          updateHoverState(false, "default");
+        }
+      } catch (error) {
+        console.warn("AnimatedCursor: Error handling mouse over", error);
+        updateHoverState(false, "default");
+      }
+    }, "handleMouseOver");
+    const handleMouseDown = /* @__PURE__ */ __name(() => {
+      updateClickState(true);
+    }, "handleMouseDown");
+    const handleMouseUp = /* @__PURE__ */ __name(() => {
+      updateClickState(false);
+    }, "handleMouseUp");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => {
+      updateHoverState(false, "default");
+    }, "handleMouseLeave");
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [
+    mounted,
+    hideOnTouch,
+    isTouch,
+    updatePosition,
+    updateHoverState,
+    updateClickState
+  ]);
+  react.useEffect(() => {
+    if (!mounted || hideOnTouch && isTouch) return;
+    try {
+      const originalCursor = document.body.style.cursor;
+      document.body.style.cursor = "none";
+      return () => {
+        try {
+          document.body.style.cursor = originalCursor;
+        } catch (error) {
+          console.warn("AnimatedCursor: Error restoring cursor style", error);
+        }
+      };
+    } catch (error) {
+      console.warn("AnimatedCursor: Error hiding cursor", error);
+    }
+  }, [mounted, hideOnTouch, isTouch]);
+  if (!mounted || !isVisible || hideOnTouch && isTouch) {
+    return null;
+  }
+  const currentScale = cursorState.isHovering ? hoverScale : 1;
+  const clickScale = cursorState.isClicking ? 0.8 : 1;
+  const finalScale = currentScale * clickScale;
+  const getCursorShape = /* @__PURE__ */ __name(() => {
+    switch (cursorState.cursorType) {
+      case "text":
+        return "h-6 w-0.5";
+      case "grab":
+      case "grabbing":
+        return "rounded-md";
+      default:
+        return "rounded-full";
+    }
+  }, "getCursorShape");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("pointer-events-none fixed inset-0", className), children: [
+    showTrail && trail.map((point, index) => {
+      const opacity = (index + 1) / trail.length * 0.5;
+      const scale = (index + 1) / trail.length * 0.8;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute",
+          style: {
+            left: point.x - size / 2,
+            top: point.y - size / 2,
+            width: size,
+            height: size,
+            backgroundColor: trailColor,
+            borderRadius: "50%",
+            opacity,
+            transform: `scale(${scale})`,
+            zIndex: zIndex - index - 1,
+            mixBlendMode: blendMode
+          }
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn(
+          "absolute transition-transform duration-100 ease-out",
+          getCursorShape()
+        ),
+        style: {
+          left: cursorState.position.x - size / 2,
+          top: cursorState.position.y - size / 2,
+          width: cursorState.cursorType === "text" ? 2 : size,
+          height: cursorState.cursorType === "text" ? 24 : size,
+          backgroundColor: color,
+          transform: `scale(${finalScale})`,
+          transitionDuration: `${animationDuration}ms`,
+          zIndex,
+          mixBlendMode: blendMode
+        }
+      }
+    ),
+    cursorState.isHovering && cursorState.cursorType !== "text" && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute rounded-full border-2 transition-all duration-200 ease-out",
+        style: {
+          left: cursorState.position.x - size * hoverScale / 2,
+          top: cursorState.position.y - size * hoverScale / 2,
+          width: size * hoverScale,
+          height: size * hoverScale,
+          borderColor: color,
+          opacity: 0.3,
+          zIndex: zIndex - 1,
+          mixBlendMode: blendMode
+        }
+      }
+    )
+  ] });
+}
+__name(AnimatedCursor, "AnimatedCursor");
+var cursor_default = AnimatedCursor;
+
+exports.AnimatedCursor = AnimatedCursor;
+exports.default = cursor_default;

package/dist/animation/animated-cursor.mjs

@@ -0,0 +1,270 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { cn } from '@libreapps/ui/lib/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var INTERACTIVE_SELECTORS = [
+  "a",
+  "button",
+  "input",
+  "textarea",
+  "select",
+  '[role="button"]',
+  '[role="link"]',
+  '[tabindex]:not([tabindex="-1"])',
+  ".cursor-pointer",
+  '[data-cursor="pointer"]'
+].join(", ");
+var TEXT_SELECTORS = [
+  'input[type="text"]',
+  'input[type="email"]',
+  'input[type="password"]',
+  'input[type="search"]',
+  "textarea",
+  '[contenteditable="true"]',
+  '[data-cursor="text"]'
+].join(", ");
+var GRAB_SELECTORS = ['[data-cursor="grab"]', ".cursor-grab"].join(", ");
+var GRABBING_SELECTORS = [
+  '[data-cursor="grabbing"]',
+  ".cursor-grabbing"
+].join(", ");
+function isTouchDevice() {
+  if (typeof window === "undefined") return false;
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || // @ts-ignore
+  navigator.msMaxTouchPoints > 0;
+}
+__name(isTouchDevice, "isTouchDevice");
+function useCursorState() {
+  const [cursorState, setCursorState] = useState({
+    position: { x: 0, y: 0 },
+    isHovering: false,
+    isClicking: false,
+    cursorType: "default"
+  });
+  const updatePosition = useCallback((x, y) => {
+    setCursorState((prev) => ({
+      ...prev,
+      position: { x, y }
+    }));
+  }, []);
+  const updateHoverState = useCallback(
+    (isHovering, cursorType = "default") => {
+      setCursorState((prev) => ({
+        ...prev,
+        isHovering,
+        cursorType
+      }));
+    },
+    []
+  );
+  const updateClickState = useCallback((isClicking) => {
+    setCursorState((prev) => ({
+      ...prev,
+      isClicking
+    }));
+  }, []);
+  return {
+    cursorState,
+    updatePosition,
+    updateHoverState,
+    updateClickState
+  };
+}
+__name(useCursorState, "useCursorState");
+function useCursorTrail(trailLength, position) {
+  const [trail, setTrail] = useState([]);
+  const trailRef = useRef([]);
+  useEffect(() => {
+    trailRef.current.push(position);
+    if (trailRef.current.length > trailLength) {
+      trailRef.current.shift();
+    }
+    setTrail([...trailRef.current]);
+  }, [position, trailLength]);
+  return trail;
+}
+__name(useCursorTrail, "useCursorTrail");
+function AnimatedCursor({
+  isVisible = true,
+  size = 20,
+  color = "#000000",
+  trailColor = "#00000050",
+  animationDuration = 200,
+  showTrail = true,
+  trailLength = 8,
+  blendMode = "normal",
+  hoverScale = 1.5,
+  hideOnTouch = true,
+  className,
+  clickAnimationDuration = 100,
+  zIndex = 9999
+}) {
+  const { cursorState, updatePosition, updateHoverState, updateClickState } = useCursorState();
+  const trail = useCursorTrail(trailLength, cursorState.position);
+  const [isTouch, setIsTouch] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setIsTouch(isTouchDevice());
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!mounted || hideOnTouch && isTouch) return;
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      try {
+        requestAnimationFrame(() => {
+          updatePosition(e.clientX, e.clientY);
+        });
+      } catch (error) {
+        console.warn("AnimatedCursor: Error updating position", error);
+      }
+    }, "handleMouseMove");
+    const handleMouseOver = /* @__PURE__ */ __name((e) => {
+      try {
+        const target = e.target;
+        if (target?.closest?.(INTERACTIVE_SELECTORS)) {
+          updateHoverState(true, "pointer");
+        } else if (target?.closest?.(TEXT_SELECTORS)) {
+          updateHoverState(true, "text");
+        } else if (target?.closest?.(GRAB_SELECTORS)) {
+          updateHoverState(true, "grab");
+        } else if (target?.closest?.(GRABBING_SELECTORS)) {
+          updateHoverState(true, "grabbing");
+        } else {
+          updateHoverState(false, "default");
+        }
+      } catch (error) {
+        console.warn("AnimatedCursor: Error handling mouse over", error);
+        updateHoverState(false, "default");
+      }
+    }, "handleMouseOver");
+    const handleMouseDown = /* @__PURE__ */ __name(() => {
+      updateClickState(true);
+    }, "handleMouseDown");
+    const handleMouseUp = /* @__PURE__ */ __name(() => {
+      updateClickState(false);
+    }, "handleMouseUp");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => {
+      updateHoverState(false, "default");
+    }, "handleMouseLeave");
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [
+    mounted,
+    hideOnTouch,
+    isTouch,
+    updatePosition,
+    updateHoverState,
+    updateClickState
+  ]);
+  useEffect(() => {
+    if (!mounted || hideOnTouch && isTouch) return;
+    try {
+      const originalCursor = document.body.style.cursor;
+      document.body.style.cursor = "none";
+      return () => {
+        try {
+          document.body.style.cursor = originalCursor;
+        } catch (error) {
+          console.warn("AnimatedCursor: Error restoring cursor style", error);
+        }
+      };
+    } catch (error) {
+      console.warn("AnimatedCursor: Error hiding cursor", error);
+    }
+  }, [mounted, hideOnTouch, isTouch]);
+  if (!mounted || !isVisible || hideOnTouch && isTouch) {
+    return null;
+  }
+  const currentScale = cursorState.isHovering ? hoverScale : 1;
+  const clickScale = cursorState.isClicking ? 0.8 : 1;
+  const finalScale = currentScale * clickScale;
+  const getCursorShape = /* @__PURE__ */ __name(() => {
+    switch (cursorState.cursorType) {
+      case "text":
+        return "h-6 w-0.5";
+      case "grab":
+      case "grabbing":
+        return "rounded-md";
+      default:
+        return "rounded-full";
+    }
+  }, "getCursorShape");
+  return /* @__PURE__ */ jsxs("div", { className: cn("pointer-events-none fixed inset-0", className), children: [
+    showTrail && trail.map((point, index) => {
+      const opacity = (index + 1) / trail.length * 0.5;
+      const scale = (index + 1) / trail.length * 0.8;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute",
+          style: {
+            left: point.x - size / 2,
+            top: point.y - size / 2,
+            width: size,
+            height: size,
+            backgroundColor: trailColor,
+            borderRadius: "50%",
+            opacity,
+            transform: `scale(${scale})`,
+            zIndex: zIndex - index - 1,
+            mixBlendMode: blendMode
+          }
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute transition-transform duration-100 ease-out",
+          getCursorShape()
+        ),
+        style: {
+          left: cursorState.position.x - size / 2,
+          top: cursorState.position.y - size / 2,
+          width: cursorState.cursorType === "text" ? 2 : size,
+          height: cursorState.cursorType === "text" ? 24 : size,
+          backgroundColor: color,
+          transform: `scale(${finalScale})`,
+          transitionDuration: `${animationDuration}ms`,
+          zIndex,
+          mixBlendMode: blendMode
+        }
+      }
+    ),
+    cursorState.isHovering && cursorState.cursorType !== "text" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute rounded-full border-2 transition-all duration-200 ease-out",
+        style: {
+          left: cursorState.position.x - size * hoverScale / 2,
+          top: cursorState.position.y - size * hoverScale / 2,
+          width: size * hoverScale,
+          height: size * hoverScale,
+          borderColor: color,
+          opacity: 0.3,
+          zIndex: zIndex - 1,
+          mixBlendMode: blendMode
+        }
+      }
+    )
+  ] });
+}
+__name(AnimatedCursor, "AnimatedCursor");
+var cursor_default = AnimatedCursor;
+
+export { AnimatedCursor, cursor_default as default };