ios-haptics 2.0.0 → 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 tijn
+
+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
+(including the next paragraph) 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/README.md

@@ -0,0 +1,44 @@
+# 📳 ios-haptics
+
+javascript library for haptic feedback inside of safari on ios
+
+![GitHub last commit](https://img.shields.io/github/last-commit/tijnjh/ios-haptics)
+[![npm version](https://img.shields.io/npm/v/ios-haptics.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)
+
+demo: [ios-haptics demo](https://codepen.io/tijnjh/pen/KwpgPqB)
+
+## 📦 installation
+
+```sh
+npm i ios-haptics
+```
+
+## 🚀 usage
+
+```javascript
+import { haptic } from 'ios-haptics'
+
+// a single haptic
+haptic()
+
+// two rapid haptics
+haptic.confirm()
+
+// three rapid haptics
+haptic.error()
+```
+
+## ⚙️ how it works
+
+this uses the `<input type="checkbox" switch />` (introduced in safari 17.4), which has haptic feedback when toggled
+
+every `haptic` call, it will create one of those in the background, toggle it, then remove it
+
+on devices that support it, `navigator.vibrate()` is called instead, so it works on android too
+
+---
+
+feel free to send a pr or open an issue if you have suggestions or find
+improvements

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 declare const supportsHaptics: boolean;
+/** INTERNAL */
+declare function _triggerAndroidHaptic(): void;
 interface haptic {
     /** @deprecated */
     apply: never;
@@ -27,6 +29,18 @@ interface haptic {
     /** three rapid haptics */
     error: () => void;
 }
+/**
+ * @deprecated no longer works in newer ios versions, use the component instead
+ *
+ * @example
+ * ```tsx
+ *  import { HapticTrigger } from 'ios-haptics/(react|svelte|vue)'
+ *
+ * <HapticTrigger>
+ *  click me
+ * </HapticTrigger>
+ *
+ */
 declare const __haptic: haptic;
 
-export { __haptic as haptic, supportsHaptics };
+export { _triggerAndroidHaptic, __haptic as haptic, supportsHaptics };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 declare const supportsHaptics: boolean;
+/** INTERNAL */
+declare function _triggerAndroidHaptic(): void;
 interface haptic {
     /** @deprecated */
     apply: never;
@@ -27,6 +29,18 @@ interface haptic {
     /** three rapid haptics */
     error: () => void;
 }
+/**
+ * @deprecated no longer works in newer ios versions, use the component instead
+ *
+ * @example
+ * ```tsx
+ *  import { HapticTrigger } from 'ios-haptics/(react|svelte|vue)'
+ *
+ * <HapticTrigger>
+ *  click me
+ * </HapticTrigger>
+ *
+ */
 declare const __haptic: haptic;
 
-export { __haptic as haptic, supportsHaptics };
+export { _triggerAndroidHaptic, __haptic as haptic, supportsHaptics };

package/dist/index.js

@@ -1 +1 @@
-'use strict';var r=typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(pointer: coarse)").matches;function e(){try{if(navigator.vibrate){navigator.vibrate(50);return}if(!r)return;let t=document.createElement("label");t.ariaHidden="true",t.style.display="none";let n=document.createElement("input");n.type="checkbox",n.setAttribute("switch",""),t.appendChild(n),document.head.appendChild(t),t.click(),document.head.removeChild(t);}catch{}}e.confirm=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50]);return}e(),setTimeout(e,120);};e.error=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50,70,50]);return}e(),setTimeout(e,120),setTimeout(e,240);};var i=e;exports.haptic=i;exports.supportsHaptics=r;
+'use strict';var i=typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(pointer: coarse)").matches;function n(){try{if(!i)return;navigator.vibrate&&navigator.vibrate(50);}catch{}}function e(){try{if(navigator.vibrate){navigator.vibrate(50);return}if(!i)return;let t=document.createElement("label");t.ariaHidden="true",t.style.display="none";let r=document.createElement("input");r.type="checkbox",r.setAttribute("switch",""),t.appendChild(r),document.head.appendChild(t),t.click(),document.head.removeChild(t);}catch{}}e.confirm=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50]);return}e(),setTimeout(e,120);};e.error=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50,70,50]);return}e(),setTimeout(e,120),setTimeout(e,240);};var a=e;exports._triggerAndroidHaptic=n;exports.haptic=a;exports.supportsHaptics=i;

package/dist/index.mjs

@@ -1 +1 @@
-var r=typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(pointer: coarse)").matches;function e(){try{if(navigator.vibrate){navigator.vibrate(50);return}if(!r)return;let t=document.createElement("label");t.ariaHidden="true",t.style.display="none";let n=document.createElement("input");n.type="checkbox",n.setAttribute("switch",""),t.appendChild(n),document.head.appendChild(t),t.click(),document.head.removeChild(t);}catch{}}e.confirm=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50]);return}e(),setTimeout(e,120);};e.error=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50,70,50]);return}e(),setTimeout(e,120),setTimeout(e,240);};var i=e;export{i as haptic,r as supportsHaptics};
+var i=typeof window>"u"||typeof window.matchMedia!="function"?false:window.matchMedia("(pointer: coarse)").matches;function n(){try{if(!i)return;navigator.vibrate&&navigator.vibrate(50);}catch{}}function e(){try{if(navigator.vibrate){navigator.vibrate(50);return}if(!i)return;let t=document.createElement("label");t.ariaHidden="true",t.style.display="none";let r=document.createElement("input");r.type="checkbox",r.setAttribute("switch",""),t.appendChild(r),document.head.appendChild(t),t.click(),document.head.removeChild(t);}catch{}}e.confirm=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50]);return}e(),setTimeout(e,120);};e.error=()=>{if(navigator.vibrate){navigator.vibrate([50,70,50,70,50]);return}e(),setTimeout(e,120),setTimeout(e,240);};var a=e;export{n as _triggerAndroidHaptic,a as haptic,i as supportsHaptics};

package/dist/svelte/HapticTrigger.svelte

@@ -1,13 +1,11 @@
-<script lang='ts' generics="T extends keyof SvelteHTMLElements">
-  import type { SvelteHTMLElements } from 'svelte/elements'
-  import { HapticTriggerProps } from './types'
-
+<script>
+  /** @type {import("./types.ts").HapticTriggerProps<any>} */
   const {
     as,
     ontap,
     children,
     ...props
-  }: HapticTriggerProps<T> = $props()
+  } = $props()
 </script>
 
 <svelte:element

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "ios-haptics",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "haptic feedback for ios safari",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tijnjh/ios-haptics.git",
-    "directory": "packages/ios-haptics"
+    "url": "git+https://github.com/tijnjh/ios-haptics.git"
   },
   "keywords": [
     "haptic",
@@ -21,9 +20,9 @@
   "sideEffects": false,
   "exports": {
     ".": {
-   "types": {
-        "import": "./dist/react/index.d.mts",
-        "require": "./dist/react/index.d.ts"
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.ts"
       },
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"