Cursor

import { Cursor } from '@hanzo/ui'

export function Default() {
  return (
    <Cursor>
      <YStack
        minH={200}
        items="center"
        justify="center"
        rounded="$4"
        bg="$color2"
      >
        <Paragraph>Move your mouse over this area</Paragraph>
      </YStack>
    </Cursor>
  )
}

export function WithLabel() {
  return (
    <Cursor cursorText="✨" cursorSize={32}>
      <YStack
        minH={200}
        items="center"
        justify="center"
        rounded="$4"
        bg="$color2"
      >
        <Paragraph>Hover for a labeled cursor</Paragraph>
      </YStack>
    </Cursor>
  )
}

export function SmallDot() {
  return (
    <Cursor cursorSize={12}>
      <YStack
        minH={200}
        items="center"
        justify="center"
        rounded="$4"
        bg="$color2"
      >
        <Paragraph>A smaller tracking dot</Paragraph>
      </YStack>
    </Cursor>
  )
}

Types

export type CursorPosition = { x: number; y: number }

export type CursorProps = {
  children: ReactNode
  /** Short label shown inside the dot. */
  cursorText?: string
  /** Diameter of the dot, in px. */
  cursorSize?: number
  /** Class notation for the frame. */
  className?: string
}

Exports