@supermousejs/magnetic 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/magnetic
+
+## 2.0.0
+
+### Major Changes
+
+- Initial v2.0.0 release
+
+### Patch Changes
+
+- Updated dependencies
+  - @supermousejs/utils@2.0.0
+  - @supermousejs/core@2.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sijibomi Olusunmbola
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+import { ValueOrGetter } from '../../core/src/index.ts';
+
+export declare const Magnetic: (options?: MagneticOptions) => SupermousePlugin;
+
+export declare interface MagneticOptions {
+    name?: string;
+    isEnabled?: boolean;
+    attraction?: ValueOrGetter<number>;
+    distance?: ValueOrGetter<number>;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,30 @@
+import { normalize as u, definePlugin as h, dom as v, math as o } from "@supermousejs/utils";
+const b = (i = {}) => {
+  let a = null, n = { x: 0, y: 0 }, s = !1;
+  const f = u(i.attraction, 0.3), y = u(i.distance, 100);
+  return h({
+    name: "magnetic",
+    priority: -10,
+    install(t) {
+      t.registerHoverTarget("[data-supermouse-magnetic]");
+    },
+    update(t) {
+      const c = t.state.hoverTarget, r = t.state.interaction.magnetic, l = r === !0 || r === "true" || typeof r == "number" && r > 0;
+      if (l && c !== a) {
+        a = c;
+        const e = v.projectRect(c, t.container);
+        n.x = e.left + e.width / 2, n.y = e.top + e.height / 2, s = !0;
+      } else !l && a && (a = null, s = !1);
+      if (s && a) {
+        const { x: e, y: g } = t.state.pointer, d = o.dist(e, g, n.x, n.y), x = y(t.state);
+        if (d < x) {
+          const m = typeof r == "number" ? r : f(t.state);
+          t.state.target.x = o.lerp(e, n.x, m), t.state.target.y = o.lerp(g, n.y, m);
+        }
+      }
+    }
+  }, i);
+};
+export {
+  b as Magnetic
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.SupermouseMagnetic={},n.SupermouseUtils))})(this,(function(n,e){"use strict";const l=(a={})=>{let o=null,r={x:0,y:0},c=!1;const d=e.normalize(a.attraction,.3),y=e.normalize(a.distance,100);return e.definePlugin({name:"magnetic",priority:-10,install(t){t.registerHoverTarget("[data-supermouse-magnetic]")},update(t){const u=t.state.hoverTarget,s=t.state.interaction.magnetic,f=s===!0||s==="true"||typeof s=="number"&&s>0;if(f&&u!==o){o=u;const i=e.dom.projectRect(u,t.container);r.x=i.left+i.width/2,r.y=i.top+i.height/2,c=!0}else!f&&o&&(o=null,c=!1);if(c&&o){const{x:i,y:g}=t.state.pointer,h=e.math.dist(i,g,r.x,r.y),x=y(t.state);if(h<x){const m=typeof s=="number"?s:d(t.state);t.state.target.x=e.math.lerp(i,r.x,m),t.state.target.y=e.math.lerp(g,r.y,m)}}}},a)};n.Magnetic=l,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,14 @@
+
+{
+  "id": "magnetic",
+  "name": "Magnetic",
+  "package": "@supermousejs/magnetic",
+  "description": "Attracts the cursor to interactive elements using physics-based magnetism.",
+  "code": "app.use(Magnetic({ attraction: 0.4, distance: 100 }));",
+  "recipeId": "magnetic-button",
+  "icon": "magnetic",
+  "options": [
+    { "name": "attraction", "type": "number", "default": "0.3", "description": "Strength of the pull (0-1).", "reactive": true },
+    { "name": "distance", "type": "number", "default": "100", "description": "Radius in pixels where attraction begins.", "reactive": true }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/magnetic",
+  "version": "2.0.0",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@supermousejs/core": "2.0.0",
+    "@supermousejs/utils": "2.0.0"
+  },
+  "devDependencies": {},
+  "peerDependencies": {},
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/index.ts

@@ -0,0 +1,57 @@
+import type { ValueOrGetter } from '@supermousejs/core';
+import { definePlugin, normalize, math, dom } from '@supermousejs/utils';
+
+export interface MagneticOptions {
+  name?: string;
+  isEnabled?: boolean;
+  attraction?: ValueOrGetter<number>;
+  distance?: ValueOrGetter<number>;
+}
+
+export const Magnetic = (options: MagneticOptions = {}) => {
+  let lastTarget: HTMLElement | null = null;
+  let magnetCenter = { x: 0, y: 0 };
+  let isActive = false;
+
+  const getAttraction = normalize(options.attraction, 0.3);
+  const getDistance = normalize(options.distance, 100);
+
+  return definePlugin({
+    name: "magnetic",
+    priority: -10,
+
+    install(app) {
+      app.registerHoverTarget("[data-supermouse-magnetic]");
+    },
+
+    update(app) {
+      const target = app.state.hoverTarget;
+      const val = app.state.interaction.magnetic;
+      const isMagnetic = val === true || val === 'true' || (typeof val === 'number' && val > 0);
+
+      if (isMagnetic && target !== lastTarget) {
+        lastTarget = target!;
+        const rect = dom.projectRect(target!, app.container);
+        magnetCenter.x = rect.left + rect.width / 2;
+        magnetCenter.y = rect.top + rect.height / 2;
+        isActive = true;
+      }
+      else if (!isMagnetic && lastTarget) {
+        lastTarget = null;
+        isActive = false;
+      }
+
+      if (isActive && lastTarget) {
+        const { x, y } = app.state.pointer;
+        const dist = math.dist(x, y, magnetCenter.x, magnetCenter.y);
+        const range = getDistance(app.state);
+
+        if (dist < range) {
+          const attraction = typeof val === 'number' ? val : getAttraction(app.state);
+          app.state.target.x = math.lerp(x, magnetCenter.x, attraction);
+          app.state.target.y = math.lerp(y, magnetCenter.y, attraction);
+        }
+      }
+    },
+  }, options);
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "src"
+  ],
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@supermousejs/core": [
+        "../core/src/index.ts"
+      ],
+      "@supermousejs/utils": [
+        "../utils/src/index.ts"
+      ]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import path from 'path';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'SupermouseMagnetic',
+      fileName: (format) => format === 'es' ? 'index.mjs' : 'index.umd.js',
+    },
+    rollupOptions: {
+      external: ['@supermousejs/core', '@supermousejs/utils'],
+      output: {
+        globals: {
+          '@supermousejs/core': 'SupermouseCore'
+        , '@supermousejs/utils': 'SupermouseUtils'}
+      }
+    }
+  },
+  plugins: [dts({ rollupTypes: true })]
+});