UI Cursor

1"use client";
2 
3import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type CursorVariant = "arrow" | "pointer";
6 
7export interface CursorStyle {
8  x: number;
9  y: number;
10  scale: number;
11  rippleOpacity: number;
12  rippleScale: number;
13  pressScale?: number;
14}
15 
16export interface CursorProps {
17  style?: CursorStyle;
18  variant?: CursorVariant;
19  size?: number;
20  theme?: Partial<RemocnTheme>;
21  rippleColor?: string;
22  className?: string;
23}
24 
25const REST: CursorStyle = {
26  x: 0,
27  y: 0,
28  scale: 1,
29  rippleOpacity: 0,
30  rippleScale: 0,
31};
32 
33const ARROW_PATH =
34  "M1 1 L1 18.5 L5.6 14.4 L8.7 21.6 L11.6 20.4 L8.5 13.2 L14.5 13.2 Z";
35const POINTER_PATH =
36  "M8 2.2 C8 1.3 8.7 0.7 9.5 0.7 C10.3 0.7 11 1.3 11 2.2 L11 9 " +
37  "C11 9 11.3 8.4 12.2 8.4 C13 8.4 13.4 9 13.4 9.6 " +
38  "C13.4 9.6 13.9 9.1 14.7 9.1 C15.5 9.1 15.9 9.7 15.9 10.3 " +
39  "C15.9 10.3 16.4 9.9 17.1 9.9 C17.9 9.9 18.3 10.5 18.3 11.2 " +
40  "L18.3 16.8 C18.3 19.8 16.3 22.3 12.8 22.3 L11.4 22.3 " +
41  "C9 22.3 7.9 21.2 6.6 19.2 L4 15.2 C3.5 14.4 3.7 13.4 4.5 12.9 " +
42  "C5.1 12.5 5.9 12.6 6.4 13.2 L8 15 Z";
43 
44export function Cursor({
45  style,
46  variant = "arrow",
47  size = 28,
48  theme: themeOverride,
49  rippleColor,
50  className,
51}: CursorProps) {
52  const theme = useRemocnTheme(themeOverride, "light");
53  const v = style ?? REST;
54 
55  const press = v.pressScale ?? 1;
56  const pressedScale = v.scale * (0.9 + 0.1 * press);
57 
58  const ring = rippleColor ?? theme.primary;
59  const fill = theme.foreground;
60  const stroke = theme.background;
61  const rippleSize = size * 1.8;
62 
63  return (
64    <div
65      className={className}
66      style={{
67        position: "absolute",
68        left: 0,
69        top: 0,
70        transform: `translate(${v.x}px, ${v.y}px)`,
71        pointerEvents: "none",
72      }}
73    >
74      {}
75      <div
76        style={{
77          position: "absolute",
78          left: -rippleSize / 2,
79          top: -rippleSize / 2,
80          width: rippleSize,
81          height: rippleSize,
82          borderRadius: "50%",
83          border: `2px solid ${ring}`,
84          opacity: v.rippleOpacity,
85          transform: `scale(${v.rippleScale})`,
86          transformOrigin: "center",
87        }}
88      />
89      {}
90      <svg
91        width={size}
92        height={size}
93        viewBox="0 0 24 24"
94        fill="none"
95        style={{
96          position: "absolute",
97          left: 0,
98          top: 0,
99          transform: `scale(${pressedScale})`,
100          transformOrigin: "0 0",
101// … truncated