ios-haptics 2.0.0 → 3.0.0

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,59 @@
+# 📳 ios-haptics
+
+javascript library for haptic feedback inside of safari on ios
+
+please note this only works on ios 17.4 to 26.4, as apple patched it in ios 26.5
+
+![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 { hapticTrigger } from 'ios-haptics'
+```
+
+
+vanilla
+```javascript
+const element = document.getElementById('element')
+
+hapticTrigger(element)
+```
+
+svelte
+```html
+<button {@attach hapticTrigger}>click me</button>
+```
+
+react
+```html
+<button ref={hapticTrigger}>click me</button>
+```
+
+vue
+```html
+<button :ref="hapticTrigger">click me</button>
+```
+
+
+## ⚙️ how it works
+
+this uses the `<input type="checkbox" switch />` (introduced in safari 17.4), which has haptic feedback when toggled
+
+`hapticTrigger` renders one of those on top of your element, so when the user taps it, safari triggers the native haptic feedback
+
+---
+
+feel free to send a pr or open an issue if you have suggestions or find
+improvements

package/dist/index.d.ts

@@ -1,32 +1,4 @@
-declare const supportsHaptics: boolean;
-interface haptic {
-    /** @deprecated */
-    apply: never;
-    /** @deprecated */
-    arguments: never;
-    /** @deprecated */
-    bind: never;
-    /** @deprecated */
-    call: never;
-    /** @deprecated */
-    caller: never;
-    /** @deprecated */
-    length: never;
-    /** @deprecated */
-    name: never;
-    /** @deprecated */
-    prototype: never;
-    /** @deprecated */
-    toString: never;
-    /** @deprecated */
-    Symbol: never;
-    /**  a single haptic */
-    (): void;
-    /** two rapid haptics */
-    confirm: () => void;
-    /** three rapid haptics */
-    error: () => void;
-}
-declare const __haptic: haptic;
-
-export { __haptic as haptic, supportsHaptics };
+//#region src/index.d.ts
+declare function hapticTrigger(element: HTMLElement | undefined | null): void;
+//#endregion
+export { hapticTrigger };

package/dist/index.js

@@ -1 +1,6 @@
-'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;
+/**
+* ios-haptics v3.0.0
+* tijn.dev
+* @license MIT
+**/
+function e(e){if(!e)return;let t=document.createElement(`input`);t.type=`checkbox`,t.setAttribute(`switch`,``),Object.assign(t.style,{position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,margin:0,opacity:0,cursor:`pointer`,clipPath:`inset(0 round 999px)`,touchAction:`manipulation`}),t.style.setProperty(`-webkit-tap-highlight-color`,`transparent`),e.style.position=`relative`,e.insertAdjacentElement(`beforeend`,t)}export{e as hapticTrigger};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "ios-haptics",
-  "version": "2.0.0",
+  "type": "module",
+  "version": "3.0.0",
   "description": "haptic feedback for ios safari",
+  "author": "tijnjh",
   "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",
@@ -18,86 +19,24 @@
     "safari",
     "vibrate"
   ],
-  "sideEffects": false,
   "exports": {
     ".": {
-   "types": {
-        "import": "./dist/react/index.d.mts",
-        "require": "./dist/react/index.d.ts"
-      },
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./react": {
-      "types": {
-        "import": "./dist/react/index.d.mts",
-        "require": "./dist/react/index.d.ts"
-      },
-      "import": "./dist/react/index.mjs",
-      "require": "./dist/react/index.js"
-    },
-    "./vue": {
-      "types": {
-        "import": "./dist/vue/index.d.mts",
-        "require": "./dist/vue/index.d.ts"
-      },
-      "import": "./dist/vue/index.mjs",
-      "require": "./dist/vue/index.js"
-    },
-    "./svelte": {
-      "types": {
-        "import": "./dist/svelte/index.d.mts",
-        "require": "./dist/svelte/index.d.ts"
-      },
-      "svelte": "./dist/svelte/index.mjs",
-      "import": "./dist/svelte/index.mjs",
-      "require": "./dist/svelte/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist/*"
+    "dist"
   ],
   "scripts": {
-    "build": "tsup && node scripts/build-svelte.mjs",
-    "dev": "tsup --watch"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "svelte": ">=5",
-    "vue": ">=3"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
+    "build": "tsdown"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.0.0",
-    "@eslint-react/eslint-plugin": "^5.6.0",
-    "@types/react": "^19.2.17",
-    "eslint": "^10.3.0",
-    "eslint-plugin-format": "^2.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-svelte": "^3.17.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "svelte": "^5.56.3",
-    "svelte-eslint-parser": "^1.6.1",
-    "tsup": "^8.5.1",
-    "typescript": "5",
-    "vue": "^3.5.38"
+    "eslint": "^10.5.0",
+    "tsdown": "latest"
   }
 }

package/dist/index.d.mts

@@ -1,32 +0,0 @@
-declare const supportsHaptics: boolean;
-interface haptic {
-    /** @deprecated */
-    apply: never;
-    /** @deprecated */
-    arguments: never;
-    /** @deprecated */
-    bind: never;
-    /** @deprecated */
-    call: never;
-    /** @deprecated */
-    caller: never;
-    /** @deprecated */
-    length: never;
-    /** @deprecated */
-    name: never;
-    /** @deprecated */
-    prototype: never;
-    /** @deprecated */
-    toString: never;
-    /** @deprecated */
-    Symbol: never;
-    /**  a single haptic */
-    (): void;
-    /** two rapid haptics */
-    confirm: () => void;
-    /** three rapid haptics */
-    error: () => void;
-}
-declare const __haptic: haptic;
-
-export { __haptic as haptic, supportsHaptics };

package/dist/index.mjs

@@ -1 +0,0 @@
-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};

package/dist/react/index.d.mts

@@ -1,11 +0,0 @@
-import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef } from 'react';
-
-type HapticTriggerProps<T extends ElementType> = {
-    as?: T;
-    onTap?: () => void;
-} & ComponentPropsWithoutRef<T>;
-
-declare function HapticTrigger<T extends ElementType>({ as, onTap, children, ...props }: HapticTriggerProps<T>): react.JSX.Element;
-
-export { HapticTrigger };

package/dist/react/index.d.ts

@@ -1,11 +0,0 @@
-import * as react from 'react';
-import { ElementType, ComponentPropsWithoutRef } from 'react';
-
-type HapticTriggerProps<T extends ElementType> = {
-    as?: T;
-    onTap?: () => void;
-} & ComponentPropsWithoutRef<T>;
-
-declare function HapticTrigger<T extends ElementType>({ as, onTap, children, ...props }: HapticTriggerProps<T>): react.JSX.Element;
-
-export { HapticTrigger };

package/dist/react/index.js

@@ -1 +0,0 @@
-'use strict';function t({as:e,onTap:i,children:r,...o}){return React.createElement(e??"button",{...o,style:{position:"relative",display:"inline-flex"}},r,React.createElement("input",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",margin:0,opacity:0,cursor:"pointer",clipPath:"inset(0 round 999px)",WebkitTapHighlightColor:"transparent",touchAction:"manipulation"},type:"checkbox",onChange:i,switch:""}))}exports.HapticTrigger=t;

package/dist/react/index.mjs

@@ -1 +0,0 @@
-function t({as:e,onTap:i,children:r,...o}){return React.createElement(e??"button",{...o,style:{position:"relative",display:"inline-flex"}},r,React.createElement("input",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",margin:0,opacity:0,cursor:"pointer",clipPath:"inset(0 round 999px)",WebkitTapHighlightColor:"transparent",touchAction:"manipulation"},type:"checkbox",onChange:i,switch:""}))}export{t as HapticTrigger};

package/dist/svelte/HapticTrigger.svelte

@@ -1,42 +0,0 @@
-<script lang='ts' generics="T extends keyof SvelteHTMLElements">
-  import type { SvelteHTMLElements } from 'svelte/elements'
-  import { HapticTriggerProps } from './types'
-
-  const {
-    as,
-    ontap,
-    children,
-    ...props
-  }: HapticTriggerProps<T> = $props()
-</script>
-
-<svelte:element
-  this={as ?? 'button'}
-  {...props}
-  style='
-    position: relative;
-    display: inline-flex;
-  '
->
-  {@render children?.()}
-
-  <input
-    style='
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      opacity: 0;
-      cursor: pointer;
-      clip-path: inset(0 round 999px);
-      -webkit-tap-highlight-color: transparent;
-      touch-action: manipulation;
-    '
-    type='checkbox'
-    onchange={ontap}
-    // @ts-expect-error - unrecognized attribute
-    switch
-  />
-</svelte:element>

package/dist/svelte/index.d.mts

@@ -1,10 +0,0 @@
-import { Component } from 'svelte';
-import { SvelteHTMLElements } from 'svelte/elements';
-
-type HapticTriggerProps<T extends keyof SvelteHTMLElements> = {
-    as?: T;
-    ontap?: () => void;
-} & SvelteHTMLElements[T];
-declare const HapticTrigger: Component<HapticTriggerProps<any>>;
-
-export { HapticTrigger, type HapticTriggerProps };

package/dist/svelte/index.d.ts

@@ -1,10 +0,0 @@
-import { Component } from 'svelte';
-import { SvelteHTMLElements } from 'svelte/elements';
-
-type HapticTriggerProps<T extends keyof SvelteHTMLElements> = {
-    as?: T;
-    ontap?: () => void;
-} & SvelteHTMLElements[T];
-declare const HapticTrigger: Component<HapticTriggerProps<any>>;
-
-export { HapticTrigger, type HapticTriggerProps };

package/dist/svelte/index.js

@@ -1 +0,0 @@
-export { default as HapticTrigger } from "./HapticTrigger.svelte";

package/dist/svelte/index.mjs

@@ -1 +0,0 @@
-export { default as HapticTrigger } from "./HapticTrigger.svelte";

package/dist/vue/index.d.mts

@@ -1,13 +0,0 @@
-import * as vue from 'vue';
-
-declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
-    as: StringConstructor;
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "tap"[], "tap", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    as: StringConstructor;
-}>> & Readonly<{
-    onTap?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-export { _default as HapticTrigger };

package/dist/vue/index.d.ts

@@ -1,13 +0,0 @@
-import * as vue from 'vue';
-
-declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
-    as: StringConstructor;
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "tap"[], "tap", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    as: StringConstructor;
-}>> & Readonly<{
-    onTap?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-export { _default as HapticTrigger };

package/dist/vue/index.js

@@ -1 +0,0 @@
-'use strict';var vue=require('vue');var n=vue.defineComponent({name:"HapticTrigger",props:{as:String},emits:["tap"],setup(i,{emit:e,slots:r,attrs:o}){return ()=>{let p=i.as??"button";return vue.h(p,{...o,style:{position:"relative",display:"inline-flex"}},[r.default?.(),vue.h("input",{type:"checkbox",switch:"",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",margin:0,opacity:0,cursor:"pointer",clipPath:"inset(0 round 999px)",WebkitTapHighlightColor:"transparent",touchAction:"manipulation"},onChange:e("tap")})])}}});exports.HapticTrigger=n;

package/dist/vue/index.mjs

@@ -1 +0,0 @@
-import {defineComponent,h}from'vue';var n=defineComponent({name:"HapticTrigger",props:{as:String},emits:["tap"],setup(i,{emit:e,slots:r,attrs:o}){return ()=>{let p=i.as??"button";return h(p,{...o,style:{position:"relative",display:"inline-flex"}},[r.default?.(),h("input",{type:"checkbox",switch:"",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",margin:0,opacity:0,cursor:"pointer",clipPath:"inset(0 round 999px)",WebkitTapHighlightColor:"transparent",touchAction:"manipulation"},onChange:e("tap")})])}}});export{n as HapticTrigger};