upgrade: cursor package upgrade for Solid 2.0

.changeset/cursor-solid2-migration.md

@@ -0,0 +1,19 @@
+---
+"@solid-primitives/cursor": major
+---
+
+Migrate to Solid.js v2.0 and add new primitives
+
+## Breaking Changes
+
+**Peer dependency**: `solid-js@^2.0.0-beta.10` and `@solidjs/web@^2.0.0-beta.10` are now required.
+
+- `isServer` now imported from `@solidjs/web` (not `solid-js/web`)
+- `createElementCursor` and `createBodyCursor` updated to the split compute/apply effect pattern required by Solid 2.0 — cleanup is returned from the apply phase instead of using `onCleanup`
+
+## New Exports
+
+- `makeBodyCursor(cursor)` — sets cursor on body immediately, returns a cleanup function
+- `makeElementCursor(target, cursor)` — sets cursor on an element immediately, returns a cleanup function
+- `createDragCursor(target, options?)` — reactively sets `"grab"` on a target element and switches to `"grabbing"` on the body during pointer drag
+- `cursorRef(cursor)` — ref factory for inline JSX use: `<div ref={cursorRef("pointer")}>`

packages/cursor/README.md

@@ -8,10 +8,14 @@
 [![version](https://img.shields.io/npm/v/@solid-primitives/cursor?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/cursor)
 [![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
 
-Two simple primitives for setting cursor css property reactively.
+Utilities for setting the CSS cursor property via reactive primitives (`createBodyCursor`, `createElementCursor`) and imperative APIs (`makeBodyCursor`, `makeElementCursor`).
 
-- [`createElementCursor`](#createelementcursor) - Set provided cursor to given HTML Element styles reactively.
-- [`createBodyCursor`](#createbodycursor) - Set selected cursor to body element styles reactively.
+- [`makeBodyCursor`](#makebodycursor) - Set cursor on body immediately; returns a cleanup function.
+- [`makeElementCursor`](#makeelementcursor) - Set cursor on an element immediately; returns a cleanup function.
+- [`createBodyCursor`](#createbodycursor) - Set cursor on body reactively.
+- [`createElementCursor`](#createelementcursor) - Set cursor on a specific element reactively.
+- [`createDragCursor`](#createdragcursor) - Show `grab`/`grabbing` cursors during pointer drag.
+- [`cursorRef`](#cursorref) - Ref factory for inline JSX use.
 
 ## Installation
 
@@ -23,14 +27,50 @@ yarn add @solid-primitives/cursor
 pnpm add @solid-primitives/cursor
 ```
 
-## `createElementCursor`
+## `makeBodyCursor`
+
+Sets a cursor on the body element immediately and returns a cleanup function that restores the previous value. No reactive owner required.
+
+```ts
+import { makeBodyCursor } from "@solid-primitives/cursor";
+
+// Show a loading cursor during an async operation
+const restore = makeBodyCursor("wait");
+await doSomething();
+restore();
+```
+
+## `makeElementCursor`
+
+Sets a cursor on a specific element immediately and returns a cleanup function that restores the previous value. No reactive owner required.
+
+```ts
+import { makeElementCursor } from "@solid-primitives/cursor";
+
+const el = document.querySelector("#element")!;
+const restore = makeElementCursor(el, "not-allowed");
+// ... later
+restore();
+```
+
+## `createBodyCursor`
+
+Sets a cursor on the body element reactively. The cursor is removed when the owner is disposed or when the signal returns a falsy value.
+
+```ts
+import { createBodyCursor } from "@solid-primitives/cursor";
+
+const [cursor, setCursor] = createSignal("pointer");
+const [enabled, setEnabled] = createSignal(true);
+
+createBodyCursor(() => enabled() && cursor());
 
-Set provided cursor to given HTML Element styles reactively.
+setCursor("help");
+```
 
-It takes two arguments:
+## `createElementCursor`
 
-- `element` - HTMLElement or a reactive signal returning one. Returning falsy value will unset the cursor.
-- `cursor` - Cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc.
+Sets a cursor on a specific element reactively. Accepts an element or a signal returning one — returning a falsy value unsets the cursor.
 
 ```ts
 import { createElementCursor } from "@solid-primitives/cursor";
@@ -44,23 +84,39 @@ createElementCursor(() => enabled() && target, cursor);
 setCursor("help");
 ```
 
-## `createBodyCursor`
+## `createDragCursor`
+
+Shows `"grab"` on a target element and switches to `"grabbing"` on the body during a pointer drag. Setting `"grabbing"` on the body ensures the cursor renders correctly everywhere during drag, not just over the target element.
+
+```ts
+import { createDragCursor } from "@solid-primitives/cursor";
 
-Set selected cursor to body element styles reactively.
+const [ref, setRef] = createSignal<HTMLElement>();
 
-It takes only one argument:
+createDragCursor(ref);
 
-- `cursor` - Signal returing a cursor css property. E.g. "pointer", "grab", "zoom-in", "wait", etc. Returning falsy value will unset the cursor.
+<div ref={setRef}>Drag me</div>
+```
+
+Custom cursor values can be provided via options:
 
 ```ts
-import { createBodyCursor } from "@solid-primitives/cursor";
+createDragCursor(el, { grab: "crosshair", grabbing: "move" });
+```
 
-const [cursor, setCursor] = createSignal("pointer");
-const [enabled, setEnabled] = createSignal(true);
+## `cursorRef`
 
-createBodyCursor(() => enabled() && cursor());
+A ref factory for setting a cursor inline in JSX. Accepts a static cursor value or a reactive signal. The cursor is removed when the component unmounts.
 
-setCursor("help");
+```tsx
+import { cursorRef } from "@solid-primitives/cursor";
+
+// Static
+<div ref={cursorRef("pointer")}>...</div>;
+
+// Reactive
+const [cursor, setCursor] = createSignal<CursorProperty>("pointer");
+<div ref={cursorRef(cursor)}>...</div>;
 ```
 
 ## Changelog

packages/cursor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solid-primitives/cursor",
-  "version": "0.1.3",
-  "description": "Two simple primitives for setting cursor css property reactively.",
+  "version": "0.2.0",
+  "description": "Primitives for setting CSS cursor property reactively.",
   "author": "Damian Tarnawski <gthetarnav@gmail.com>",
   "contributors": [],
   "license": "MIT",
@@ -17,8 +17,12 @@
     "name": "cursor",
     "stage": 0,
     "list": [
+      "makeBodyCursor",
+      "makeElementCursor",
+      "createBodyCursor",
       "createElementCursor",
-      "createBodyCursor"
+      "createDragCursor",
+      "cursorRef"
     ],
     "category": "Utilities"
   },
@@ -55,10 +59,12 @@
     "@solid-primitives/utils": "workspace:^"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.12"
+    "@solidjs/web": "^2.0.0-beta.14",
+    "solid-js": "^2.0.0-beta.14"
   },
   "typesVersions": {},
   "devDependencies": {
-    "solid-js": "^1.9.7"
+    "@solidjs/web": "2.0.0-beta.14",
+    "solid-js": "2.0.0-beta.14"
   }
 }