@luxfi/ui 8.0.0 → 8.1.0

package/dist/animated-cursor.cjs

@@ -0,0 +1,269 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+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;
+}
+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
+  };
+}
+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;
+}
+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 = (e) => {
+      try {
+        requestAnimationFrame(() => {
+          updatePosition(e.clientX, e.clientY);
+        });
+      } catch (error) {
+        console.warn("AnimatedCursor: Error updating position", error);
+      }
+    };
+    const handleMouseOver = (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");
+      }
+    };
+    const handleMouseDown = () => {
+      updateClickState(true);
+    };
+    const handleMouseUp = () => {
+      updateClickState(false);
+    };
+    const handleMouseLeave = () => {
+      updateHoverState(false, "default");
+    };
+    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 = () => {
+    switch (cursorState.cursorType) {
+      case "text":
+        return "h-6 w-0.5";
+      case "grab":
+      case "grabbing":
+        return "rounded-md";
+      default:
+        return "rounded-full";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.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(
+        ui.Box,
+        {
+          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(
+      ui.Box,
+      {
+        className: ui.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(
+      ui.Box,
+      {
+        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
+        }
+      }
+    )
+  ] });
+}
+var animated_cursor_default = AnimatedCursor;
+
+exports.AnimatedCursor = AnimatedCursor;
+exports.default = animated_cursor_default;

package/dist/animated-cursor.d.ts

@@ -0,0 +1,70 @@
+export interface AnimatedCursorProps {
+    /**
+     * Whether the cursor is visible
+     */
+    isVisible?: boolean;
+    /**
+     * Cursor size in pixels
+     */
+    size?: number;
+    /**
+     * Main cursor color
+     */
+    color?: string;
+    /**
+     * Trail cursor color
+     */
+    trailColor?: string;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration?: number;
+    /**
+     * Whether to show trail effect
+     */
+    showTrail?: boolean;
+    /**
+     * Number of trail elements
+     */
+    trailLength?: number;
+    /**
+     * Blend mode for cursor
+     */
+    blendMode?: "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion";
+    /**
+     * Scale factor on hover
+     */
+    hoverScale?: number;
+    /**
+     * Whether to hide on touch devices
+     */
+    hideOnTouch?: boolean;
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+    /**
+     * Click animation duration
+     */
+    clickAnimationDuration?: number;
+    /**
+     * Z-index for cursor
+     */
+    zIndex?: number;
+}
+export interface CursorPosition {
+    x: number;
+    y: number;
+}
+export interface CursorState {
+    position: CursorPosition;
+    isHovering: boolean;
+    isClicking: boolean;
+    cursorType: "default" | "pointer" | "text" | "grab" | "grabbing";
+}
+/**
+ * AnimatedCursor component providing customizable animated cursor with trail effects
+ */
+export declare function AnimatedCursor({ isVisible, size, color, trailColor, animationDuration, showTrail, trailLength, blendMode, hoverScale, hideOnTouch, className, clickAnimationDuration, zIndex, }: AnimatedCursorProps): import("react/jsx-runtime").JSX.Element | null;
+export default AnimatedCursor;
+//# sourceMappingURL=animated-cursor.d.ts.map

package/dist/animated-cursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-cursor.d.ts","sourceRoot":"","sources":["../src/animated-cursor.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EACN,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,SAAS,GACT,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,CAAA;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,cAAc,CAAA;IACxB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAA;CACjE;AAiHD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAgB,EAChB,IAAS,EACT,KAAiB,EACjB,UAAwB,EACxB,iBAAuB,EACvB,SAAgB,EAChB,WAAe,EACf,SAAoB,EACpB,UAAgB,EAChB,WAAkB,EAClB,SAAS,EACT,sBAA4B,EAC5B,MAAa,GACd,EAAE,mBAAmB,kDA6LrB;AAED,eAAe,cAAc,CAAA"}

package/dist/animated-cursor.js

@@ -0,0 +1,264 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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;
+}
+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
+  };
+}
+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;
+}
+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 = (e) => {
+      try {
+        requestAnimationFrame(() => {
+          updatePosition(e.clientX, e.clientY);
+        });
+      } catch (error) {
+        console.warn("AnimatedCursor: Error updating position", error);
+      }
+    };
+    const handleMouseOver = (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");
+      }
+    };
+    const handleMouseDown = () => {
+      updateClickState(true);
+    };
+    const handleMouseUp = () => {
+      updateClickState(false);
+    };
+    const handleMouseLeave = () => {
+      updateHoverState(false, "default");
+    };
+    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 = () => {
+    switch (cursorState.cursorType) {
+      case "text":
+        return "h-6 w-0.5";
+      case "grab":
+      case "grabbing":
+        return "rounded-md";
+      default:
+        return "rounded-full";
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { 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(
+        Box,
+        {
+          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(
+      Box,
+      {
+        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(
+      Box,
+      {
+        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
+        }
+      }
+    )
+  ] });
+}
+var animated_cursor_default = AnimatedCursor;
+
+export { AnimatedCursor, animated_cursor_default as default };