ios-haptics 0.1.5 → 2.0.1

package/README.md

@@ -2,8 +2,6 @@
 
 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)
@@ -36,9 +34,6 @@ haptic.error()
 
 this uses the `<input type="checkbox" switch />` (introduced in safari 17.4), which has haptic feedback when toggled
 
-> [!IMPORTANT]
-> apple patched the bug this library used for haptic feedback in ios 26.5. you can no longer trigger haptic feedback programmatically by calling `.click()` on a `<label>` that is `for` an `<input type="checkbox" switch />`. haptic feedback still works when the user directly clicks the checkbox switch themselves, but it can no longer be done programmatically.
-
 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

package/dist/index.d.mts

@@ -0,0 +1,46 @@
+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.d.ts

@@ -1,33 +1,46 @@
-//#region src/index.d.ts
 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 */
+    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;
-//#endregion
-export { __haptic as haptic, supportsHaptics };
+
+export { _triggerAndroidHaptic, __haptic as haptic, supportsHaptics };

package/dist/index.js

@@ -1,57 +1 @@
-/**
-* ios-haptics v0.1.4
-* tijn.dev
-* @license MIT
-**/
-//#region src/index.ts
-const supportsHaptics = typeof window === "undefined" || typeof window.matchMedia !== "function" ? false : window.matchMedia("(pointer: coarse)").matches;
-function _haptic() {
-	try {
-		if (navigator.vibrate) {
-			navigator.vibrate(50);
-			return;
-		}
-		if (!supportsHaptics) return;
-		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 {}
-}
-_haptic.confirm = () => {
-	if (navigator.vibrate) {
-		navigator.vibrate([
-			50,
-			70,
-			50
-		]);
-		return;
-	}
-	_haptic();
-	setTimeout(() => _haptic(), 120);
-};
-_haptic.error = () => {
-	if (navigator.vibrate) {
-		navigator.vibrate([
-			50,
-			70,
-			50,
-			70,
-			50
-		]);
-		return;
-	}
-	_haptic();
-	setTimeout(() => _haptic(), 120);
-	setTimeout(() => _haptic(), 240);
-};
-const __haptic = _haptic;
-
-//#endregion
-export { __haptic as haptic, supportsHaptics };
+'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

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

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

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

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

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

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

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

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

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

package/dist/svelte/index.mjs

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

package/dist/vue/index.d.mts

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

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

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

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

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "ios-haptics",
-  "type": "module",
-  "version": "0.1.5",
+  "version": "2.0.1",
   "description": "haptic feedback for ios safari",
-  "author": "tijnjh",
   "license": "MIT",
-  "repository": "tijnjh/ios-haptics",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tijnjh/ios-haptics.git"
+  },
   "keywords": [
     "haptic",
+    "haptics",
     "ios",
     "feedback",
     "haptic-feedback",
@@ -15,23 +17,86 @@
     "safari",
     "vibrate"
   ],
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "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"
     }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist/*"
   ],
   "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch"
+    "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
+    }
   },
   "devDependencies": {
-    "tsdown": "latest"
+    "@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"
   }
 }