ios-haptics 2.0.1 → 3.0.0

package/README.md

@@ -2,6 +2,8 @@
 
 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)
@@ -18,25 +20,38 @@ npm i ios-haptics
 ## 🚀 usage
 
 ```javascript
-import { haptic } from 'ios-haptics'
+import { hapticTrigger } from 'ios-haptics'
+```
+
 
-// a single haptic
-haptic()
+vanilla
+```javascript
+const element = document.getElementById('element')
 
-// two rapid haptics
-haptic.confirm()
+hapticTrigger(element)
+```
 
-// three rapid haptics
-haptic.error()
+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
 
-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
+`hapticTrigger` renders one of those on top of your element, so when the user taps it, safari triggers the native haptic feedback
 
 ---
 

package/dist/index.d.ts

@@ -1,46 +1,4 @@
-declare const supportsHaptics: boolean;
-/** INTERNAL */
-declare function _triggerAndroidHaptic(): void;
-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;
-}
-/**
- * @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 { _triggerAndroidHaptic, __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 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;
+/**
+* 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,7 +1,9 @@
 {
   "name": "ios-haptics",
-  "version": "2.0.1",
+  "type": "module",
+  "version": "3.0.0",
   "description": "haptic feedback for ios safari",
+  "author": "tijnjh",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,86 +19,24 @@
     "safari",
     "vibrate"
   ],
-  "sideEffects": false,
   "exports": {
     ".": {
-      "types": {
-        "import": "./dist/index.d.mts",
-        "require": "./dist/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,46 +0,0 @@
-declare const supportsHaptics: boolean;
-/** INTERNAL */
-declare function _triggerAndroidHaptic(): void;
-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;
-}
-/**
- * @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 { _triggerAndroidHaptic, __haptic as haptic, supportsHaptics };

package/dist/index.mjs

@@ -1 +0,0 @@
-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/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,40 +0,0 @@
-<script>
-  /** @type {import("./types.ts").HapticTriggerProps<any>} */
-  const {
-    as,
-    ontap,
-    children,
-    ...props
-  } = $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};