@supermousejs/icon 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @supermousejs/icon
+
+## 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,20 @@
+import { SupermousePlugin } from '../../core/src/index.ts';
+import { ValueOrGetter } from '../../core/src/index.ts';
+
+export declare const Icon: (options: IconOptions) => SupermousePlugin;
+
+export declare interface IconOptions {
+    name?: string;
+    isEnabled?: boolean;
+    /** SVG Content String */
+    svg: string;
+    /** Size in pixels (default 24) */
+    size?: ValueOrGetter<number>;
+    /** CSS Color (default black) */
+    color?: ValueOrGetter<string>;
+    opacity?: ValueOrGetter<number>;
+    /** Offset [x, y] from cursor center */
+    offset?: [number, number];
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,23 @@
+import { normalize as o, definePlugin as g, dom as s, Layers as d } from "@supermousejs/utils";
+const x = (e) => {
+  const n = o(e.size, 24), l = o(e.opacity, 1), y = o(e.color, "black"), [a, i] = e.offset || [0, 0];
+  return g({
+    name: e.name || "icon",
+    create: () => {
+      const t = s.createActor("div");
+      return t.style.zIndex = d.CURSOR, t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center", t.innerHTML = e.svg, t;
+    },
+    styles: {
+      color: "color"
+    },
+    update: (t, c) => {
+      const r = n(t.state);
+      s.setStyle(c, "width", `${r}px`), s.setStyle(c, "height", `${r}px`), s.setStyle(c, "opacity", String(l(t.state))), s.setStyle(c, "color", y(t.state));
+      const { x: f, y: m } = t.state.smooth;
+      s.setTransform(c, f + a, m + i, 0);
+    }
+  }, e);
+};
+export {
+  x as Icon
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@supermousejs/utils")):typeof define=="function"&&define.amd?define(["exports","@supermousejs/utils"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.SupermouseIcon={},o.SupermouseUtils))})(this,(function(o,e){"use strict";const c=n=>{const d=e.normalize(n.size,24),f=e.normalize(n.opacity,1),i=e.normalize(n.color,"black"),[m,y]=n.offset||[0,0];return e.definePlugin({name:n.name||"icon",create:()=>{const t=e.dom.createActor("div");return t.style.zIndex=e.Layers.CURSOR,t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.innerHTML=n.svg,t},styles:{color:"color"},update:(t,s)=>{const r=d(t.state);e.dom.setStyle(s,"width",`${r}px`),e.dom.setStyle(s,"height",`${r}px`),e.dom.setStyle(s,"opacity",String(f(t.state))),e.dom.setStyle(s,"color",i(t.state));const{x:a,y:l}=t.state.smooth;e.dom.setTransform(s,a+m,l+y,0)}},n)};o.Icon=c,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/meta.json

@@ -0,0 +1,16 @@
+
+{
+  "id": "icon",
+  "name": "Icon",
+  "package": "@supermousejs/icon",
+  "description": "Renders a static SVG icon at the cursor position.",
+  "code": "app.use(Icon({ svg: '<svg>...</svg>', size: 24 }));",
+  "icon": "context",
+  "options": [
+    { "name": "svg", "type": "string", "default": "undefined", "description": "SVG content string. (Required)", "reactive": false },
+    { "name": "size", "type": "number", "default": "24", "description": "Size of the icon container.", "reactive": true },
+    { "name": "color", "type": "string", "default": "'black'", "description": "CSS color (currentColor).", "reactive": true },
+    { "name": "opacity", "type": "number", "default": "1", "description": "Opacity level (0-1).", "reactive": true },
+    { "name": "offset", "type": "[number, number]", "default": "[0, 0]", "description": "Fixed [x, y] offset from cursor center.", "reactive": false }
+  ]
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@supermousejs/icon",
+  "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,52 @@
+import type { ValueOrGetter } from '@supermousejs/core';
+import { definePlugin, normalize, dom, Layers } from '@supermousejs/utils';
+
+export interface IconOptions {
+  name?: string;
+  isEnabled?: boolean;
+  /** SVG Content String */
+  svg: string;
+  /** Size in pixels (default 24) */
+  size?: ValueOrGetter<number>;
+  /** CSS Color (default black) */
+  color?: ValueOrGetter<string>;
+  opacity?: ValueOrGetter<number>;
+  /** Offset [x, y] from cursor center */
+  offset?: [number, number];
+}
+
+export const Icon = (options: IconOptions) => {
+  const getSize = normalize(options.size, 24);
+  const getOpacity = normalize(options.opacity, 1);
+  const getColor = normalize(options.color, 'black');
+  const [offX, offY] = options.offset || [0, 0];
+
+  return definePlugin<HTMLDivElement, IconOptions>({
+    name: options.name || 'icon',
+    
+    create: () => {
+      const el = dom.createActor('div') as HTMLDivElement;
+      el.style.zIndex = Layers.CURSOR;
+      el.style.display = 'flex';
+      el.style.alignItems = 'center';
+      el.style.justifyContent = 'center';
+      el.innerHTML = options.svg;
+      return el;
+    },
+
+    styles: {
+      color: 'color'
+    },
+
+    update: (app, el) => {
+      const size = getSize(app.state);
+      dom.setStyle(el, 'width', `${size}px`);
+      dom.setStyle(el, 'height', `${size}px`);
+      dom.setStyle(el, 'opacity', String(getOpacity(app.state)));
+      dom.setStyle(el, 'color', getColor(app.state));
+
+      const { x, y } = app.state.smooth;
+      dom.setTransform(el, x + offX, y + offY, 0);
+    }
+  }, 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,26 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'SupermouseIcon',
+      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 })]
+});