add web haptic

bun.lock

@@ -8,6 +8,7 @@
         "@tsdown/css": "^0.21.10",
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.5.0",
+        "web-haptics": "^0.0.6",
       },
       "devDependencies": {
         "@biomejs/biome": "^2.4.13",
@@ -1189,6 +1190,8 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
+    "web-haptics": ["web-haptics@0.0.6", "", { "peerDependencies": { "react": ">=18", "react-dom": ">=18", "svelte": ">=4", "vue": ">=3" }, "optionalPeers": ["react", "react-dom", "svelte", "vue"] }, "sha512-eCzcf1LDi20+Fr0x9V3OkX92k0gxEQXaHajmhXHitsnk6SxPeshv8TBtBRqxyst8HI1uf2FyFVE7QS3jo1gkrw=="],
+
     "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
 
     "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@avocadi/ui",
 	"type": "module",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "ui elements for avocadi",
 	"private": false,
 	"files": [
@@ -67,7 +67,8 @@
 	"dependencies": {
 		"@tsdown/css": "^0.21.10",
 		"clsx": "^2.1.1",
-		"tailwind-merge": "^3.5.0"
+		"tailwind-merge": "^3.5.0",
+		"web-haptics": "^0.0.6"
 	},
 	"inlinedDependencies": {
 		"@radix-ui/primitive": "1.1.3",

src/hooks/useInterfaceSound.ts

@@ -1,4 +1,5 @@
 import { useSound } from "use-sound";
+import { useWebHaptics } from "web-haptics/react";
 import z from "zod";
 
 import clickSmallSound from "../assets/sounds/clickSmall.wav";
@@ -8,6 +9,8 @@ import uploadSuccessSound from "../assets/sounds/uploadSuccess.wav";
 export const InterfaceSounds = z.enum(["clickSmall", "hover", "uploadSuccess"]);
 
 export default function useInterfaceSound() {
+	const { trigger } = useWebHaptics();
+
 	const [playHover] = useSound(hoverSound);
 
 	const [playClickSmall] = useSound(clickSmallSound);
@@ -15,6 +18,7 @@ export default function useInterfaceSound() {
 	const [playUploadSuccess] = useSound(uploadSuccessSound);
 
 	const play = ({ id }: { id: z.output<typeof InterfaceSounds> }) => {
+		trigger();
 		switch (id) {
 			case "clickSmall":
 				playClickSmall();