Cursor

1import * as React from 'react';
2 
3import {
4  CursorProvider as CursorProviderPrimitive,
5  Cursor as CursorPrimitive,
6  CursorFollow as CursorFollowPrimitive,
7  CursorContainer as CursorContainerPrimitive,
8  type CursorProviderProps as CursorProviderPropsPrimitive,
9  type CursorContainerProps as CursorContainerPropsPrimitive,
10  type CursorProps as CursorPropsPrimitive,
11  type CursorFollowProps as CursorFollowPropsPrimitive,
12} from '@/components/animate-ui/primitives/animate/cursor';
13import { cn } from '@/lib/utils';
14 
15type CursorProviderProps = Omit<CursorProviderPropsPrimitive, 'children'> &
16  CursorContainerPropsPrimitive;
17 
18function CursorProvider({ global, ...props }: CursorProviderProps) {
19  return (
20    <CursorProviderPrimitive global={global}>
21      <CursorContainerPrimitive {...props} />
22    </CursorProviderPrimitive>
23  );
24}
25 
26type CursorProps = Omit<CursorPropsPrimitive, 'children' | 'asChild'>;
27 
28function Cursor({ className, ...props }: CursorProps) {
29  return (
30    <CursorPrimitive asChild {...props}>
31      <svg
32        className={cn('size-6 text-foreground', className)}
33        xmlns="http://www.w3.org/2000/svg"
34        viewBox="0 0 40 40"
35      >
36        <path
37          fill="currentColor"
38          d="M1.8 4.4 7 36.2c.3 1.8 2.6 2.3 3.6.8l3.9-5.7c1.7-2.5 4.5-4.1 7.5-4.3l6.9-.5c1.8-.1 2.5-2.4 1.1-3.5L5 2.5c-1.4-1.1-3.5 0-3.3 1.9Z"
39        />
40      </svg>
41    </CursorPrimitive>
42  );
43}
44 
45type CursorFollowProps = Omit<CursorFollowPropsPrimitive, 'asChild'>;
46 
47function CursorFollow({
48  className,
49  children,
50  sideOffset = 15,
51  alignOffset = 5,
52  ...props
53}: CursorFollowProps) {
54  return (
55    <CursorFollowPrimitive
56      sideOffset={sideOffset}
57      alignOffset={alignOffset}
58      asChild
59      {...props}
60    >
61      <div
62        className={cn(
63          'bg-foreground rounded-md text-background px-2 py-1 text-sm',
64          className,
65        )}
66      >
67        {children}
68      </div>
69    </CursorFollowPrimitive>
70  );
71}
72 
73export {
74  CursorProvider,
75  Cursor,
76  CursorFollow,
77  type CursorProviderProps,
78  type CursorProps,
79  type CursorFollowProps,
80};