chore: web-haptics

app/client/components/ui/checkbox.tsx

@@ -1,10 +1,13 @@
-import type * as React from "react";
+import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 
+import { useWebHaptics } from "web-haptics/react";
 import { cn } from "~/client/lib/utils";
 
 function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	const trigger = useWebHaptics().trigger;
+
 	return (
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
@@ -12,6 +15,10 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
 				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
+			onCheckedChange={(checked) => {
+				void trigger("nudge");
+				props.onCheckedChange?.(checked);
+			}}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator

app/client/components/ui/switch.tsx

@@ -1,9 +1,12 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import type * as React from "react";
+import * as React from "react";
 
+import { useWebHaptics } from "web-haptics/react";
 import { cn } from "~/client/lib/utils";
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	const trigger = useWebHaptics().trigger;
+
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
@@ -11,6 +14,10 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
 				"cursor-pointer peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
+			onCheckedChange={(checked) => {
+				void trigger("nudge");
+				props.onCheckedChange?.(checked);
+			}}
 			{...props}
 		>
 			<SwitchPrimitive.Thumb

app/client/components/ui/tabs.tsx

@@ -1,6 +1,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import type * as React from "react";
 
+import { useWebHaptics } from "web-haptics/react";
 import { cn } from "~/client/lib/utils";
 
 function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
@@ -17,7 +18,14 @@ function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimi
 	);
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, onClick, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	const { trigger } = useWebHaptics();
+
+	const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+		void trigger("nudge");
+		onClick?.(event);
+	};
+
 	return (
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
@@ -36,6 +44,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 				"after:absolute after:left-0 after:-top-px after:w-2 after:h-0.5 after:bg-[#5D6570] after:transition-colors data-[state=active]:after:bg-[#FF453A]",
 				className,
 			)}
+			onClick={handleClick}
 			{...props}
 		>
 			<span className="relative z-10">{props.children}</span>

bun.lock

@@ -68,6 +68,7 @@
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tiny-typed-emitter": "^2.1.0",
+        "web-haptics": "^0.0.6",
         "yaml": "^2.8.2",
       },
       "devDependencies": {
@@ -1859,6 +1860,8 @@
 
     "wait-for-expect": ["wait-for-expect@4.0.0", "", {}, "sha512-mcH2HYUUHhdFGHVJkgwkBxRihZO4VSuPyh6xhYHz7LEnYkcaLbTAEEsTpYiFw4UY45XdTZYYIaquuMucw9wWMw=="],
 
+    "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=="],
+
     "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],
 
     "webidl-conversions": ["webidl-conversions@7.0.0", "", {}, "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g=="],

package.json

@@ -89,6 +89,7 @@
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.5.0",
 		"tiny-typed-emitter": "^2.1.0",
+		"web-haptics": "^0.0.6",
 		"yaml": "^2.8.2"
 	},
 	"devDependencies": {