0.0.1

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ["custom"],
+  settings: {
+    next: {
+      rootDir: ["apps/*/"],
+    },
+  },
+};

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+dist
+
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+pnpm-lock.yaml
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+/test-results/
+/playwright-report/
+/playwright/.cache/

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "jsxSingleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "semi": true,
+  "singleAttributePerLine": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "arie",
+  "version": "0.0.1",
+  "description": "A lightweight React library for presenting cursor movement and interaction.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "format": "prettier --write ."
+  },
+  "keywords": [
+    "react",
+    "cursor-position",
+    "user-position"
+  ],
+  "author": "chvndler",
+  "license": "MIT",
+  "packageManager": "[email protected]",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.45.0",
+    "prettier": "^3.0.0",
+    "tsup": "^7.1.0",
+    "turbo": "^1.10.12",
+    "typescript": "^5.1.6"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'www'
+  - '.'

src/index.ts

@@ -0,0 +1,8 @@
+export { useArie } from "./use-arie";
+export {
+  //..
+  type Cursor,
+  type EType,
+  type EventType,
+  type ScrollProps,
+} from "./types";

src/types.ts

@@ -0,0 +1,89 @@
+export type Cursor = {
+  /*
+   * Mouse position
+   */
+  position: {
+    /*
+     * Client position - browser rendered content
+     */
+    client: { x: number | null; y: number | null };
+    /*
+     * Screen position - monitor
+     */
+    screen: { x: number | null; y: number | null };
+    /*
+     * Page position - viewport
+     */
+    page: { x: number | null; y: number | null };
+  };
+  /*
+   * Mouse buttons
+   */
+  scroll: {
+    wheelDown: boolean | null;
+    wheelUp: boolean | null;
+  };
+  eventType: string | null;
+  selectedElement: SelectedElement;
+};
+
+export type SelectedElement = {
+  /*
+   * Mouse relative position to selected element
+   */
+  position: {
+    /*
+     * Angle between cursor and element : in degrees
+     */
+    angle: number | null;
+    /*
+     * Distance between cursor and element
+     */
+    x: number | null;
+    y: number | null;
+  };
+  /*
+   * Bounding rectangle of selected element
+   */
+  boundingRect: {
+    left: number | null;
+    top: number | null;
+    width: number | null;
+    height: number | null;
+  };
+  /*
+   * Cursor over selected element
+   */
+  isHover: boolean;
+};
+
+export interface CursorDot {
+  dotSize?: number; // useArieDot() hook
+}
+
+export interface CursorDotPosition {
+  // useArieDot() hook
+  x: number;
+  y: number;
+}
+
+export interface ScrollProps {
+  // useArieScroll() hook
+
+  /**
+   * The window object.
+   */
+  window: Window;
+  /**
+   * The document object.
+   */
+  document: Document;
+  /**
+   * className for custom styling..
+   */
+  className?: string;
+}
+
+export type EType = "mousemove" | "mousedown" | "mouseup" | "touchmove" | "touchstart" | "wheel";
+
+export type EventType = ["mousemove", "mousedown", "mouseup", "touchmove", "touchstart", "wheel"][number];