ios-haptics 0.0.7 → 0.0.9

package/README.md

@@ -1,57 +1,42 @@
 # ios-haptics
 
-A small JavaScript utility for triggering subtle haptic feedback on iOS devices,
-using a clever browser-specific quirk.
+javascript library for haptic feedback inside of safari on ios
 
-try it here: https://codepen.io/tijnjh/pen/KwpgPqB
+![GitHub last commit](https://img.shields.io/github/last-commit/tijnjh/ios-haptics)
+[![npm version](https://img.shields.io/npm/v/tsuite.svg)](https://npmjs.com/package/ios-haptics)
+![NPM Downloads](https://img.shields.io/npm/dm/ios-haptics)
+![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/ios-haptics)
 
-## 🚀 Installation
+demo: [ios-haptics demo](https://wg.tijn.dev?h=s0kqLSnJz1PITLFVykgsKMlMVrKD0Db6ECk7Lkw1zvl5aZlFuTClCskQPj4trkVF%7EUVwDakgHlw5AA&c=UwAA&j=hYwxDsIwDEX3nMLKBAPJTsQC6sAxUJqSiDqObDMgxN1RlY6Vun3pv_cKNmKFL%7ERH0xLhBxMTgs2qTc7eJ0En2ReSUyfEBmNGim9MVd0z6TCnZV4_9_FgO2OPjmqcS3zBZQ2HPedGdSqMG6qL_dpNDMzEW4G0HMH8AQ)
+
+## installation
 
 ```sh
 npm i ios-haptics
 ```
 
-## 📦 Usage
-
-Just call these functions on any event where you want haptic feedback:
+## usage
 
 ```javascript
-import { haptic } from "ios-haptics";
+import { haptic } from 'ios-haptics'
 
-// A single haptic "click"
-haptic();
+// a single haptic
+haptic()
 
-// Two rapid haptics (good for confirmation)
-haptic.confirm();
+// two rapid haptics (good for confirmation)
+haptic.confirm()
 
-// Three rapid haptics (useful for errors)
-haptic.error();
+// three rapid haptics (useful for errors)
+haptic.error()
 ```
 
-## ⚙️ How it works (The Trick)
-
-This library leverages a clever workaround that became possible with the
-introduction of the HTML `switch` control in Safari 17.4. These native controls
-gained haptic feedback on iOS.
-
-The method involves dynamically creating a temporary, hidden `<label>` element
-containing an `<input type="checkbox" switch />`. Programmatically "clicking"
-this label triggers the native iOS haptic feedback associated with the switch
-control. Immediately after, these temporary elements are removed from the DOM.
-
-**I found this technique on [cobalt.tools](https://cobalt.tools). This library
-is largely a port and package of their solution.**
+## how it works
 
-## ⚠️ Notes
+this uses the `<input type="checkbox" switch />` (introduced in safari 17.4), which has haptic feedback when toggled
 
-- **iOS Specific:** This only works on iOS devices where the `switch` input type
-  has haptic feedback.
-- **Best Effort:** The haptics are system-defined; you can't customize intensity
-  or pattern beyond what's provided.
-- **Temporary:** This is a neat trick, but it might stop working if Apple
-  changes its internal handling of these controls.
+every `haptic` call, it will create one of those in the background, toggle it (which has haptic feedback), then remove it
 
-## 🤝 Contributions
+---
 
 Feel free to send a PR or open an issue if you have suggestions or find
 improvements.

package/dist/index.cjs

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * ios-haptics v0.0.9
+ * tijn.dev
+ * @license MIT
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.haptic = haptic;
+function haptic() {
+    try {
+        const labelEl = document.createElement('label');
+        labelEl.ariaHidden = 'true';
+        labelEl.style.display = 'none';
+        const inputEl = document.createElement('input');
+        inputEl.type = 'checkbox';
+        inputEl.setAttribute('switch', '');
+        labelEl.appendChild(inputEl);
+        document.head.appendChild(labelEl);
+        labelEl.click();
+        document.head.removeChild(labelEl);
+    }
+    catch {
+        // do nothing
+    }
+}
+;
+haptic.confirm = () => {
+    haptic();
+    setTimeout(() => haptic(), 120);
+};
+haptic.error = () => {
+    haptic();
+    setTimeout(() => haptic(), 120);
+    setTimeout(() => haptic(), 240);
+};

package/dist/index.d.cts

@@ -0,0 +1,11 @@
+/**
+ * ios-haptics v0.0.9
+ * tijn.dev
+ * @license MIT
+ */
+declare function haptic(): void;
+declare namespace haptic {
+    var confirm: () => void;
+    var error: () => void;
+}
+export { haptic };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ios-haptics v0.0.9
+ * tijn.dev
+ * @license MIT
+ */
+declare function haptic(): void;
+declare namespace haptic {
+    var confirm: () => void;
+    var error: () => void;
+}
+export { haptic };

package/dist/index.js

@@ -0,0 +1,33 @@
+/**
+ * ios-haptics v0.0.9
+ * tijn.dev
+ * @license MIT
+ */
+function haptic() {
+    try {
+        const labelEl = document.createElement('label');
+        labelEl.ariaHidden = 'true';
+        labelEl.style.display = 'none';
+        const inputEl = document.createElement('input');
+        inputEl.type = 'checkbox';
+        inputEl.setAttribute('switch', '');
+        labelEl.appendChild(inputEl);
+        document.head.appendChild(labelEl);
+        labelEl.click();
+        document.head.removeChild(labelEl);
+    }
+    catch {
+        // do nothing
+    }
+}
+;
+haptic.confirm = () => {
+    haptic();
+    setTimeout(() => haptic(), 120);
+};
+haptic.error = () => {
+    haptic();
+    setTimeout(() => haptic(), 120);
+    setTimeout(() => haptic(), 240);
+};
+export { haptic };

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "ios-haptics",
-  "version": "0.0.7",
+  "type": "module",
+  "version": "0.0.9",
   "description": "haptic feedback for ios safari",
+  "author": "tijnjh",
+  "license": "MIT",
+  "repository": "tijnjh/ios-haptics",
   "keywords": [
     "haptic",
     "ios",
@@ -11,25 +15,24 @@
     "safari",
     "vibrate"
   ],
-  "repository": "tijnjh/ios-haptics",
-  "license": "MIT",
-  "author": "tijnjh",
-  "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
+    ".": {
+      "types": "./dist/index.d.cts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.cts",
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsdown"
-  },
   "devDependencies": {
-    "tsdown": "latest",
-    "typescript": "^5.8.3"
-  }
+    "@antfu/eslint-config": "^4.16.2",
+    "eslint": "^9.31.0",
+    "typescript": "^5.8.3",
+    "zshy": "^0.2.3"
+  },
+  "zshy": "./src/index.ts"
 }