@hanzo/ui 5.3.25 → 5.3.28

package/dist/animation/animated-cursor.js

@@ -1,275 +0,0 @@
-"use client";
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var utils = require('@hanzo/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

@@ -1,270 +0,0 @@
-"use client";
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { cn } from '@hanzo/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 };