@supermousejs/ring 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/ring
+
+## 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,16 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+import { ValueOrGetter } from '../../core/src/index.ts';
+
+export declare const Ring: (options?: RingOptions) => SupermousePlugin;
+
+export declare interface RingOptions {
+    name?: string;
+    isEnabled?: boolean;
+    size?: ValueOrGetter<number>;
+    color?: ValueOrGetter<string>;
+    borderWidth?: ValueOrGetter<number>;
+    opacity?: ValueOrGetter<number>;
+    mixBlendMode?: string;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,28 @@
+import { normalize as s, definePlugin as m, dom as r, Layers as S } from "@supermousejs/utils";
+const x = (o = {}) => {
+  const i = s(o.size, 20), c = s(o.color, "#ffffff"), d = s(o.borderWidth, 2), l = s(o.opacity, 1);
+  return m({
+    name: o.name || "ring",
+    selector: "[data-supermouse-color]",
+    create: (t) => {
+      const e = r.createCircle(i(t.state), "transparent");
+      return r.applyStyles(e, {
+        zIndex: S.FOLLOWER,
+        mixBlendMode: o.mixBlendMode || "difference",
+        borderStyle: "solid",
+        transition: "opacity 0.2s ease",
+        boxSizing: "border-box"
+      }), e;
+    },
+    update: (t, e) => {
+      const n = i(t.state);
+      let a = c(t.state);
+      t.state.interaction.color && (a = t.state.interaction.color), r.setStyle(e, "width", `${n}px`), r.setStyle(e, "height", `${n}px`), r.setStyle(e, "borderRadius", "50%"), r.setStyle(e, "borderColor", a), r.setStyle(e, "borderWidth", `${d(t.state)}px`), r.setStyle(e, "opacity", String(l(t.state)));
+      const { x: y, y: f } = t.state.smooth;
+      r.setTransform(e, y, f);
+    }
+  }, o);
+};
+export {
+  x as Ring
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.SupermouseRing={},r.SupermouseUtils))})(this,(function(r,e){"use strict";const c=(n={})=>{const d=e.normalize(n.size,20),a=e.normalize(n.color,"#ffffff"),m=e.normalize(n.borderWidth,2),f=e.normalize(n.opacity,1);return e.definePlugin({name:n.name||"ring",selector:"[data-supermouse-color]",create:o=>{const t=e.dom.createCircle(d(o.state),"transparent");return e.dom.applyStyles(t,{zIndex:e.Layers.FOLLOWER,mixBlendMode:n.mixBlendMode||"difference",borderStyle:"solid",transition:"opacity 0.2s ease",boxSizing:"border-box"}),t},update:(o,t)=>{const s=d(o.state);let i=a(o.state);o.state.interaction.color&&(i=o.state.interaction.color),e.dom.setStyle(t,"width",`${s}px`),e.dom.setStyle(t,"height",`${s}px`),e.dom.setStyle(t,"borderRadius","50%"),e.dom.setStyle(t,"borderColor",i),e.dom.setStyle(t,"borderWidth",`${m(o.state)}px`),e.dom.setStyle(t,"opacity",String(f(o.state)));const{x:y,y:S}=o.state.smooth;e.dom.setTransform(t,y,S)}},n)};r.Ring=c,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,17 @@
+
+{
+  "id": "ring",
+  "name": "Ring",
+  "package": "@supermousejs/ring",
+  "description": "Adds a lagging outer ring. Simple and performant.",
+  "code": "app.use(Ring({ size: 32, color: '#000' }));",
+  "recipeId": "magnetic-button",
+  "icon": "ring",
+  "options": [
+    { "name": "size", "type": "number", "default": "20", "description": "Diameter of the ring in pixels.", "reactive": true },
+    { "name": "color", "type": "string", "default": "'#ffffff'", "description": "Border color.", "reactive": true },
+    { "name": "borderWidth", "type": "number", "default": "2", "description": "Stroke width in pixels.", "reactive": true },
+    { "name": "opacity", "type": "number", "default": "1", "description": "Opacity level (0-1).", "reactive": true },
+    { "name": "mixBlendMode", "type": "string", "default": "'difference'", "description": "CSS blend mode.", "reactive": false }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/ring",
+  "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,56 @@
+import type { ValueOrGetter } from '@supermousejs/core';
+import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
+
+export interface RingOptions {
+  name?: string;
+  isEnabled?: boolean;
+  size?: ValueOrGetter<number>;
+  color?: ValueOrGetter<string>;
+  borderWidth?: ValueOrGetter<number>;
+  opacity?: ValueOrGetter<number>;
+  mixBlendMode?: string;
+}
+
+export const Ring = (options: RingOptions = {}) => {
+  const getSize = normalize(options.size, 20);
+  const getColor = normalize(options.color, '#ffffff');
+  const getBorder = normalize(options.borderWidth, 2);
+  const getOpacity = normalize(options.opacity, 1);
+
+  return definePlugin<HTMLDivElement, RingOptions>({
+    name: options.name || 'ring',
+    selector: '[data-supermouse-color]',
+
+    create: (app) => {
+      const el = dom.createCircle(getSize(app.state), 'transparent');
+      dom.applyStyles(el, {
+        zIndex: Layers.FOLLOWER,
+        mixBlendMode: options.mixBlendMode || 'difference',
+        borderStyle: 'solid',
+        transition: 'opacity 0.2s ease',
+        boxSizing: 'border-box'
+      });
+      return el;
+    },
+
+    update: (app, el) => {
+      const size = getSize(app.state);
+      let color = getColor(app.state);
+      
+      // Basic interaction override for color only
+      if (app.state.interaction.color) {
+        color = app.state.interaction.color;
+      }
+
+      dom.setStyle(el, 'width', `${size}px`);
+      dom.setStyle(el, 'height', `${size}px`);
+      dom.setStyle(el, 'borderRadius', '50%');
+      dom.setStyle(el, 'borderColor', color);
+      dom.setStyle(el, 'borderWidth', `${getBorder(app.state)}px`);
+      dom.setStyle(el, 'opacity', String(getOpacity(app.state)));
+
+      const { x, y } = app.state.smooth;
+      dom.setTransform(el, x, y);
+    }
+  }, 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: 'SupermouseRing',
+      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 })]
+});