@vuer-ai/vuer-uikit 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuer-ai/vuer-uikit",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "React UI Kit components",
   "keywords": [
     "react",
@@ -27,7 +27,8 @@
   },
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --fix"

package/src/highlight-cursor/cursor-context.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+
+import type { CursorContextType } from "./types";
+
+const defaultDimensions = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+};
+
+const defaultContext: CursorContextType = {
+  mousePosition: { x: 0, y: 0 },
+  hoveredElementId: null,
+  elementDimensions: defaultDimensions,
+  registerHoveredElement: () => {},
+  unregisterHoveredElement: () => {},
+  updateElementDimensions: () => {},
+};
+
+export const CursorContext = createContext<CursorContextType>(defaultContext);
+
+export const useCursor = () => useContext(CursorContext);

package/src/highlight-cursor/cursor-provider.tsx

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { CursorContext } from "./cursor-context";
+import type { CursorProviderProps } from "./types";
+import { cn } from "../utils/cn";
+
+export const CursorProvider = ({
+  children,
+  maxOffsetX = 5,
+  maxOffsetY = 20,
+  cursorSize = 20,
+  transitionDuration = 100,
+  cursorClassName,
+  className,
+  as: Component = "div",
+  ...props
+}: CursorProviderProps) => {
+  // Check if we're in a browser environment
+  const [isClient, setIsClient] = useState(false);
+  const [isMouseInside, setIsMouseInside] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [hoveredElementId, setHoveredElementId] = useState<string | null>(null);
+  const [elementDimensions, setElementDimensions] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    right: 0,
+    bottom: 0,
+  });
+
+  const hoveredElementRef = useRef<HTMLElement | null>(null);
+
+  // Set isClient to true after component mounts (client-side only)
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isClient) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isClient]);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsMouseInside(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsMouseInside(false);
+    setHoveredElementId(null);
+    hoveredElementRef.current = null;
+  }, []);
+
+  const checkMouseInElement = useCallback(() => {
+    if (!hoveredElementRef.current || !hoveredElementId) {
+      return;
+    }
+
+    const rect = hoveredElementRef.current.getBoundingClientRect();
+
+    setElementDimensions({
+      width: rect.width,
+      height: rect.height,
+      x: rect.left,
+      y: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+    });
+
+    const isInside =
+      mousePosition.x >= rect.left &&
+      mousePosition.x <= rect.right &&
+      mousePosition.y >= rect.top &&
+      mousePosition.y <= rect.bottom;
+
+    if (!isInside) {
+      setHoveredElementId(null);
+      hoveredElementRef.current = null;
+    }
+  }, [mousePosition, hoveredElementId]);
+
+  useEffect(() => {
+    if (!isClient) return;
+
+    const handleScroll = () => {
+      checkMouseInElement();
+    };
+
+    document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+
+    return () => {
+      document.removeEventListener("scroll", handleScroll, { capture: true });
+    };
+  }, [checkMouseInElement, isClient]);
+
+  const registerHoveredElement = useCallback(
+    (id: string, dimensions: DOMRect, element?: HTMLElement) => {
+      setHoveredElementId(id);
+      setElementDimensions({
+        width: dimensions.width,
+        height: dimensions.height,
+        x: dimensions.left,
+        y: dimensions.top,
+        right: dimensions.right,
+        bottom: dimensions.bottom,
+      });
+
+      if (element) {
+        hoveredElementRef.current = element;
+      }
+    },
+    [],
+  );
+
+  const unregisterHoveredElement = useCallback(() => {
+    setHoveredElementId(null);
+    hoveredElementRef.current = null;
+  }, []);
+
+  const updateElementDimensions = useCallback(
+    (dimensions: DOMRect) => {
+      if (hoveredElementId) {
+        setElementDimensions({
+          width: dimensions.width,
+          height: dimensions.height,
+          x: dimensions.left,
+          y: dimensions.top,
+          right: dimensions.right,
+          bottom: dimensions.bottom,
+        });
+      }
+    },
+    [hoveredElementId],
+  );
+
+  const getCursorPosition = () => {
+    if (!hoveredElementId) {
+      return {
+        x: mousePosition.x - cursorSize / 2,
+        y: mousePosition.y - cursorSize / 2,
+      };
+    }
+
+    // Calculate the center of the element
+    const elementCenterX = elementDimensions.x + elementDimensions.width / 2;
+    const elementCenterY = elementDimensions.y + elementDimensions.height / 2;
+
+    // Calculate offset from center (with some dampening for smoothness)
+    const offsetX = (mousePosition.x - elementCenterX) * 0.1;
+    const offsetY = (mousePosition.y - elementCenterY) * 0.1;
+
+    // Apply bounds to keep cursor within reasonable limits
+    const boundedOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, offsetX));
+    const boundedOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, offsetY));
+
+    return {
+      x: elementDimensions.x + boundedOffsetX,
+      y: elementDimensions.y + boundedOffsetY,
+    };
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      // State values that change during component lifecycle
+      mousePosition,
+      hoveredElementId,
+      elementDimensions,
+
+      // Callbacks that should be stable references
+      registerHoveredElement,
+      unregisterHoveredElement,
+      updateElementDimensions,
+    }),
+    [
+      mousePosition,
+      hoveredElementId,
+      elementDimensions,
+      registerHoveredElement,
+      unregisterHoveredElement,
+      updateElementDimensions,
+    ],
+  );
+
+  const cursorPosition = getCursorPosition();
+
+  const cursorStyleObject = useMemo(
+    () => ({
+      left: cursorPosition.x,
+      top: cursorPosition.y,
+      width: hoveredElementId
+        ? elementDimensions.width > 0
+          ? elementDimensions.width
+          : cursorSize
+        : cursorSize,
+      height: hoveredElementId
+        ? elementDimensions.height > 0
+          ? elementDimensions.height
+          : cursorSize
+        : cursorSize,
+      willChange: "transform, width, height",
+    }),
+    [
+      cursorPosition.x,
+      cursorPosition.y,
+      hoveredElementId,
+      elementDimensions.width,
+      elementDimensions.height,
+      cursorSize,
+    ],
+  );
+
+  let styleClass;
+  if (hoveredElementId) {
+    styleClass = `opacity-[0.05] rounded-md transition-[width,height,left,top] duration-${transitionDuration} ease-out`;
+  } else {
+    styleClass = `opacity-90 rounded-xl z-10 transition-[width,height,left,top] duration-${transitionDuration} ease-out transition-opacity duration-${transitionDuration}`;
+  }
+
+  // Create cursor element to be portaled
+  const cursorElement = isClient && isMouseInside && (
+    <div
+      className={`pointer-events-none fixed ${styleClass} ${hoveredElementId ? "" : cursorClassName || ""}`}
+      style={{
+        ...cursorStyleObject,
+        backgroundColor: "var(--shadow-tertiary)",
+      }}
+    />
+  );
+
+  // Use React.Fragment at the top level to avoid any DOM structure that might affect layout
+  return (
+    <>
+      {/* Portal the cursor overlay to document.body to completely avoid layout impact */}
+      {isClient &&
+        typeof document !== "undefined" &&
+        document.body &&
+        cursorElement &&
+        createPortal(cursorElement, document.body)}
+      {/* Context provider with no DOM element */}
+      <CursorContext.Provider value={contextValue}>
+        {/* Use the Component directly with no extra wrappers */}
+        <Component
+          {...props}
+          className={cn(className)}
+          style={{
+            cursor: isMouseInside && !hoveredElementId ? "none" : "auto",
+            ...props.style,
+          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          {children}
+        </Component>
+      </CursorContext.Provider>
+    </>
+  );
+};

package/src/highlight-cursor/enhanced-components.tsx

@@ -0,0 +1,16 @@
+import { withCursor } from "./with-cursor";
+import { Button } from "../ui/button";
+import { InputRoot } from "../ui/input";
+import { SelectTrigger } from "../ui/select";
+import { Tabs } from "../ui/tabs";
+import { Textarea } from "../ui/textarea";
+
+export const CursorButton = withCursor(Button);
+
+export const CursorTabs = withCursor(Tabs);
+
+export const CursorInputRoot = withCursor(InputRoot);
+
+export const CursorSelectTrigger = withCursor(SelectTrigger) as typeof SelectTrigger;
+
+export const CursorTextarea = withCursor(Textarea) as typeof Textarea;

package/src/highlight-cursor/index.ts

@@ -0,0 +1,21 @@
+import { CursorProvider } from "./cursor-provider";
+import {
+  CursorButton,
+  CursorTabs,
+  CursorInputRoot,
+  CursorSelectTrigger,
+  CursorTextarea,
+} from "./enhanced-components";
+import { TabsCursorProvider } from "./tabs-cursor-context";
+import { withCursor } from "./with-cursor";
+
+export {
+  CursorProvider,
+  TabsCursorProvider,
+  withCursor,
+  CursorButton,
+  CursorTabs,
+  CursorInputRoot,
+  CursorSelectTrigger,
+  CursorTextarea,
+};

package/src/highlight-cursor/tabs-cursor-context.tsx

@@ -0,0 +1,121 @@
+import { motion } from "framer-motion";
+import {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+  type ReactNode,
+  type CSSProperties,
+} from "react";
+import { createPortal } from "react-dom";
+
+interface TabsCursorContextType {
+  setCursorTarget: (el: HTMLElement | null) => void;
+}
+
+const TabsCursorContext = createContext<TabsCursorContextType | null>(null);
+
+export const TabsCursorProvider = ({
+  children,
+  className,
+  ...props
+}: {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}) => {
+  const [isClient, setIsClient] = useState(false);
+  const [cursorTarget, setCursorTarget] = useState<HTMLElement | null>(null);
+  const [targetRect, setTargetRect] = useState<DOMRect | null>(null);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [isMouseInside, setIsMouseInside] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isClient) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isClient]);
+
+  useEffect(() => {
+    if (cursorTarget) {
+      setTargetRect(cursorTarget.getBoundingClientRect());
+    } else {
+      setTargetRect(null);
+    }
+  }, [cursorTarget]);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsMouseInside(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsMouseInside(false);
+    setCursorTarget(null);
+  }, []);
+
+  const contextValue = { setCursorTarget };
+
+  return (
+    <div
+      {...props}
+      className={className}
+      style={{
+        cursor: isMouseInside && !cursorTarget ? "none" : "auto",
+        ...props.style,
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <TabsCursorContext.Provider value={contextValue}>
+        {children}
+        {isClient &&
+          isMouseInside &&
+          typeof document !== "undefined" &&
+          document.body &&
+          createPortal(
+            <motion.div
+              className="pointer-events-none"
+              initial={false}
+              animate={{
+                x: targetRect ? targetRect.left : mousePosition.x - 8,
+                y: targetRect ? targetRect.top : mousePosition.y - 8,
+                width: targetRect ? targetRect.width : 16,
+                height: targetRect ? targetRect.height : 16,
+                borderRadius:
+                  targetRect && cursorTarget && typeof window !== "undefined"
+                    ? getComputedStyle(cursorTarget).borderRadius
+                    : "50%",
+              }}
+              transition={{ type: "spring", stiffness: 1000, damping: 60, mass: 1 }}
+              style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                backgroundColor: "var(--shadow-tertiary)",
+                zIndex: 9999,
+              }}
+            />,
+            document.body,
+          )}
+      </TabsCursorContext.Provider>
+    </div>
+  );
+};
+
+export const useTabsCursor = () => {
+  const context = useContext(TabsCursorContext);
+  if (!context) {
+    return { setCursorTarget: () => {} };
+  }
+  return context;
+};

package/src/highlight-cursor/types.ts

@@ -0,0 +1,40 @@
+import type { ReactNode, ComponentType, HTMLAttributes, ElementType, MouseEvent } from "react";
+
+export interface CursorContextType {
+  mousePosition: { x: number; y: number };
+  hoveredElementId: string | null;
+  elementDimensions: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    right?: number;
+    bottom?: number;
+  };
+  registerHoveredElement: (id: string, dimensions: DOMRect, element?: HTMLElement) => void;
+  unregisterHoveredElement: () => void;
+  updateElementDimensions: (dimensions: DOMRect) => void;
+}
+
+export interface CursorProviderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  maxOffsetX?: number;
+  maxOffsetY?: number;
+  cursorSize?: number;
+  transitionDuration?: number;
+  cursorClassName?: string;
+  as?: ElementType;
+}
+
+export interface WithCursorProps {
+  id?: string;
+  onMouseEnter?: (event: MouseEvent<HTMLElement>) => void;
+  onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
+  onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
+}
+
+export type EnhancedComponentProps<P> = P & WithCursorProps;
+
+export type EnhancedComponent<P = Record<string, unknown>> = ComponentType<
+  EnhancedComponentProps<P>
+>;

package/src/highlight-cursor/with-cursor.tsx

@@ -0,0 +1,144 @@
+import { forwardRef, useRef, useId, type ComponentType } from "react";
+
+import { useCursor } from "./cursor-context";
+import type { EnhancedComponentProps } from "./types";
+
+/**
+ * Helper function to determine the visible portion of an element within scrollable containers
+ * @param element The DOM element we want to check visibility for
+ * @param elementRect The original bounding client rect of the element
+ * @returns A DOMRect representing only the visible portion of the element
+ */
+const getVisibleRect = (element: HTMLElement, elementRect: DOMRect): DOMRect => {
+  // Find all scrollable parent containers
+  let parent = element.parentElement;
+  let visibleRect = {
+    ...elementRect,
+    left: elementRect.left,
+    right: elementRect.right,
+    top: elementRect.top,
+    bottom: elementRect.bottom,
+    width: elementRect.width,
+    height: elementRect.height,
+    x: elementRect.x,
+    y: elementRect.y,
+  };
+
+  // Traverse up through parent elements to find scrollable containers
+  while (parent) {
+    if (typeof window === "undefined") break;
+
+    const style = window.getComputedStyle(parent);
+    const hasOverflow = [style.overflowY, style.overflowX].some((overflow) =>
+      ["auto", "scroll", "hidden"].includes(overflow),
+    );
+
+    if (hasOverflow) {
+      const parentRect = parent.getBoundingClientRect();
+
+      // Calculate the intersection between the element and its scrollable parent
+      const newLeft = Math.max(visibleRect.left, parentRect.left);
+      const newTop = Math.max(visibleRect.top, parentRect.top);
+      const newRight = Math.min(visibleRect.right, parentRect.right);
+      const newBottom = Math.min(visibleRect.bottom, parentRect.bottom);
+
+      // Update the visible rect dimensions
+      visibleRect = {
+        ...visibleRect,
+        left: newLeft,
+        top: newTop,
+        right: newRight,
+        bottom: newBottom,
+        width: Math.max(0, newRight - newLeft),
+        height: Math.max(0, newBottom - newTop),
+        x: newLeft,
+        y: newTop,
+      };
+
+      // If element is completely outside the viewport of the parent, return empty rect
+      if (visibleRect.width <= 0 || visibleRect.height <= 0) {
+        return new DOMRect(0, 0, 0, 0);
+      }
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return DOMRect.fromRect(visibleRect);
+};
+
+export function withCursor<P extends object>(Component: ComponentType<P>) {
+  // Create a display name for the enhanced component
+  const displayName = Component.displayName || Component.name || "Component";
+
+  const EnhancedComponent = forwardRef<HTMLElement, EnhancedComponentProps<P>>(
+    ({ id: propId, onMouseEnter, onMouseMove, onMouseLeave, ...props }, ref) => {
+      const { registerHoveredElement, unregisterHoveredElement, updateElementDimensions } =
+        useCursor();
+
+      const generatedId = useId();
+      const id = propId || `cursor-element-${generatedId}`;
+      const elementRef = useRef<HTMLElement>(null);
+
+      const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+        if (elementRef.current) {
+          const elementRect = elementRef.current.getBoundingClientRect();
+          const visibleRect = getVisibleRect(elementRef.current, elementRect);
+          registerHoveredElement(id, visibleRect, elementRef.current);
+        }
+        onMouseEnter?.(event);
+      };
+
+      const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {
+        if (elementRef.current) {
+          const elementRect = elementRef.current.getBoundingClientRect();
+          const visibleRect = getVisibleRect(elementRef.current, elementRect);
+          updateElementDimensions(visibleRect);
+        }
+        onMouseMove?.(event);
+      };
+
+      const handleMouseOut = (event: React.MouseEvent<HTMLElement>) => {
+        const rect = elementRef.current?.getBoundingClientRect();
+        if (rect) {
+          const { clientX, clientY } = event;
+          const isOutside =
+            clientX < rect.left ||
+            clientX > rect.right ||
+            clientY < rect.top ||
+            clientY > rect.bottom;
+
+          if (isOutside) {
+            unregisterHoveredElement();
+          }
+        } else {
+          unregisterHoveredElement();
+        }
+        onMouseLeave?.(event);
+      };
+
+      return (
+        <Component
+          {...(props as P)}
+          id={id}
+          ref={(node: HTMLElement) => {
+            // Handle both function and object refs
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            elementRef.current = node;
+          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseOut={handleMouseOut}
+        />
+      );
+    },
+  );
+
+  EnhancedComponent.displayName = `withCursor(${displayName})`;
+
+  return EnhancedComponent;
+}

package/src/index.css

@@ -0,0 +1,5 @@
+@import "tw-animate-css";
+
+@import "./styles/variables.css";
+@import "./styles/theme.css";
+@import "./styles/toast.css";

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./ui";
+
+export * from "./utils";
+
+export * from "./highlight-cursor";