@bearmenu/ui 0.8.14 → 0.8.16

package/README.md

@@ -48,7 +48,7 @@ import { Input } from "@bearmenu/ui/components/input";
 | Dropdown Menu | `@bearmenu/ui/components/dropdown-menu` |
 | Empty State | `@bearmenu/ui/components/empty-state` |
 | Form | `@bearmenu/ui/components/form` |
-| Haptic Button | `@bearmenu/ui/components/haptic-button` |
+| Haptic Switch | `@bearmenu/ui/components/haptic-switch` |
 | Input | `@bearmenu/ui/components/input` |
 | Input OTP | `@bearmenu/ui/components/input-otp` |
 | Label | `@bearmenu/ui/components/label` |

package/dist/{chunk-F76NCVVR.js → chunk-36KEHCET.js}

@@ -1,4 +1,5 @@
-import { useHaptic } from './chunk-R47NEOSI.js';
+import { HapticSwitch, isHapticSwitchTarget } from './chunk-RIH2IS7X.js';
+import { useHaptic } from './chunk-5YNIQ2BL.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -78,10 +79,11 @@ var Button = React.forwardRef(
       size,
       fullWidth,
       asChild = false,
-      haptic = true,
+      haptic = false,
       hapticStyle = "light",
       isLoading = false,
       disabled,
+      type,
       onClick,
       children
     } = _b, props = __objRest(_b, [
@@ -94,27 +96,34 @@ var Button = React.forwardRef(
       "hapticStyle",
       "isLoading",
       "disabled",
+      "type",
       "onClick",
       "children"
     ]);
     const Comp = asChild ? Slot : "button";
     const { trigger } = useHaptic();
     const [isMounted, setIsMounted] = React.useState(false);
+    const withSwitch = haptic && !asChild;
     React.useEffect(() => {
       setIsMounted(true);
     }, []);
     const handleClick = (event) => {
+      var _a2;
       if (haptic && isMounted) {
         trigger(hapticStyle);
       }
       onClick == null ? void 0 : onClick(event);
+      if (withSwitch && type === "submit" && !event.defaultPrevented && isHapticSwitchTarget(event.target)) {
+        (_a2 = event.currentTarget.form) == null ? void 0 : _a2.requestSubmit(event.currentTarget);
+      }
     };
     return /* @__PURE__ */ jsx(
       Comp,
       __spreadProps(__spreadValues({
         "data-slot": "button",
-        className: cn(buttonVariants({ variant, size, fullWidth, className })),
+        className: cn(buttonVariants({ variant, size, fullWidth, className }), withSwitch && "relative"),
         ref,
+        type,
         onClick: handleClick,
         disabled: disabled || isLoading,
         "aria-busy": isLoading || void 0
@@ -122,6 +131,9 @@ var Button = React.forwardRef(
         children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", "aria-hidden": "true" }),
           !asChild && children
+        ] }) : withSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          /* @__PURE__ */ jsx(HapticSwitch, { disabled })
         ] }) : children
       })
     );

package/dist/{chunk-R47NEOSI.js → chunk-5YNIQ2BL.js}

@@ -1,14 +1,17 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
+function isIos() {
+  if (typeof navigator === "undefined") return false;
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+}
 var useHaptic = () => {
   const [platform, setPlatform] = useState("unknown");
   const [isSupported, setIsSupported] = useState(false);
   useEffect(() => {
     var _a, _b;
     const userAgent = navigator.userAgent.toLowerCase();
-    const isIOS = /iphone|ipad|ipod/.test(userAgent);
     const isAndroid = /android/.test(userAgent);
-    if (isIOS) {
+    if (isIos()) {
       setPlatform("ios");
     } else if (isAndroid) {
       setPlatform("android");
@@ -17,9 +20,9 @@ var useHaptic = () => {
     }
     const hasVibration = "vibrate" in navigator;
     const hasTelegram = typeof window !== "undefined" && ((_b = (_a = window.Telegram) == null ? void 0 : _a.WebApp) == null ? void 0 : _b.HapticFeedback);
-    setIsSupported(hasVibration || !!hasTelegram);
+    setIsSupported(hasVibration || !!hasTelegram || isIos());
   }, []);
-  const trigger = (style) => {
+  const trigger = useCallback((style) => {
     var _a, _b;
     if (typeof window !== "undefined" && ((_b = (_a = window.Telegram) == null ? void 0 : _a.WebApp) == null ? void 0 : _b.HapticFeedback)) {
       triggerTelegramHaptic(style);
@@ -30,7 +33,7 @@ var useHaptic = () => {
       return;
     }
     console.debug("Haptic feedback not supported on this device");
-  };
+  }, []);
   return { isSupported, platform, trigger };
 };
 function triggerTelegramHaptic(style) {
@@ -75,4 +78,4 @@ function triggerVibrationAPI(style) {
   navigator.vibrate(patterns[style]);
 }
 
-export { useHaptic };
+export { isIos, useHaptic };

package/dist/chunk-RIH2IS7X.js

@@ -0,0 +1,29 @@
+import { isIos } from './chunk-5YNIQ2BL.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var HAPTIC_SWITCH_SLOT = "haptic-switch";
+function isHapticSwitchTarget(target) {
+  return target instanceof HTMLElement && target.dataset.slot === HAPTIC_SWITCH_SLOT;
+}
+function HapticSwitch({ disabled = false }) {
+  const [enabled, setEnabled] = React.useState(false);
+  React.useEffect(() => {
+    setEnabled(isIos());
+  }, []);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      ref: (el) => el == null ? void 0 : el.setAttribute("switch", ""),
+      "data-slot": HAPTIC_SWITCH_SLOT,
+      "aria-hidden": "true",
+      tabIndex: -1,
+      disabled,
+      className: "absolute inset-0 m-0 h-full w-full cursor-[inherit] rounded-[inherit] opacity-0 touch-manipulation [-webkit-tap-highlight-color:transparent]"
+    }
+  );
+}
+
+export { HAPTIC_SWITCH_SLOT, HapticSwitch, isHapticSwitchTarget };

package/dist/components/alert-dialog.js

@@ -1,5 +1,6 @@
-import { buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/button.d.ts

@@ -9,6 +9,14 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    /**
+     * Off by default. Haptics are for actions that change state — a save, a
+     * toggle, a destructive confirm — not for every button, so each site opts in.
+     *
+     * Android vibrates through `useHaptic`; iOS ticks through a `HapticSwitch`
+     * laid over the button, which needs a real element, so `asChild` gets the
+     * vibration only.
+     */
     haptic?: boolean;
     hapticStyle?: "light" | "medium" | "heavy";
     isLoading?: boolean;

package/dist/components/button.js

@@ -1,4 +1,5 @@
-export { Button, buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+export { Button, buttonVariants } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/calendar.js

@@ -1,5 +1,6 @@
-import { buttonVariants, Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants, Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues, __spreadProps } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/carousel.js

@@ -1,5 +1,6 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/combobox.js

@@ -1,8 +1,9 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
 import '../chunk-PDTPO6NG.js';
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

package/dist/components/empty-state.js

@@ -1,5 +1,6 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';

package/dist/components/event-detail-panel.js

@@ -2,8 +2,9 @@ import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues, __objRest } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/event-list-row-wide.js

@@ -3,8 +3,9 @@ import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { memo, useState } from 'react';

package/dist/components/haptic-switch.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const HAPTIC_SWITCH_SLOT = "haptic-switch";
+/** True when a click's target is the overlay switch rather than the host. */
+declare function isHapticSwitchTarget(target: EventTarget | null): boolean;
+type HapticSwitchProps = {
+    /** Mirror the host's disabled state; a disabled switch neither flips nor ticks. */
+    disabled?: boolean;
+};
+/**
+ * The only haptic iOS Safari has left.
+ *
+ * WebKit plays the system toggle haptic when an `<input type="checkbox" switch>`
+ * flips under the user's finger, and since iOS 26.5 under the finger is the
+ * only way — a programmatic click on the input or its label no longer counts
+ * (WebKit #65327). So the switch goes INSIDE the control, stretched over it and
+ * invisible, and the tap that lands on the control lands on the switch first.
+ * The click then bubbles to the host's own handler as usual.
+ *
+ * What the host must do:
+ * - be positioned (`relative` at least) so `inset-0` fills it;
+ * - not call `preventDefault()` on the click — that cancels the toggle, and
+ *   the toggle is the haptic;
+ * - if it is `type="submit"`, submit explicitly: the click target is the
+ *   switch, so the button's implicit submission never runs. `Button` does
+ *   this through `form.requestSubmit()`.
+ *
+ * Renders nothing on the server and on non-iOS clients (so the first client
+ * render matches SSR). Keyboard and assistive-tech activation land on the host,
+ * not the switch, and stay silent. `opacity: 0`, never `display: none` — a
+ * switch that is not rendered does not tick.
+ */
+declare function HapticSwitch({ disabled }: HapticSwitchProps): react_jsx_runtime.JSX.Element | null;
+
+export { HAPTIC_SWITCH_SLOT, HapticSwitch, isHapticSwitchTarget };

package/dist/components/haptic-switch.js

@@ -0,0 +1,3 @@
+export { HAPTIC_SWITCH_SLOT, HapticSwitch, isHapticSwitchTarget } from '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import '../chunk-MMUBH76A.js';

package/dist/components/link-button.js

@@ -1,5 +1,6 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/menu-family-block.js

@@ -3,8 +3,9 @@ import { HueChip } from '../chunk-CLLY6XB3.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { Wallet } from 'lucide-react';

package/dist/components/menu-index-list.js

@@ -1,7 +1,8 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/multi-select-combobox.js

@@ -2,8 +2,9 @@ import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
 import '../chunk-PDTPO6NG.js';
 import { Checkbox } from '../chunk-NMEVJT5Q.js';
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { Badge } from '../chunk-P43B3ONY.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/pagination.js

@@ -1,5 +1,6 @@
-import { buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues, __spreadProps } from '../chunk-MMUBH76A.js';
 import { ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, MoreHorizontalIcon } from 'lucide-react';

package/dist/components/searchable-select.js

@@ -1,8 +1,9 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
 import '../chunk-PDTPO6NG.js';
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/sliding-panels.js

@@ -1,5 +1,6 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-36KEHCET.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/switch.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /**
+     * Tick on iOS through a `HapticSwitch` laid over the control. Off by default;
+     * a switch that writes a persisted setting opts in.
+     */
+    haptic?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 
 export { Switch };

package/dist/components/switch.js

@@ -1,32 +1,41 @@
+import { HapticSwitch } from '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var Switch = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    SwitchPrimitive.Root,
-    __spreadProps(__spreadValues({
-      ref,
-      "data-slot": "switch",
-      className: cn(
-        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ jsx(
-        SwitchPrimitive.Thumb,
-        {
-          className: cn(
-            "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
-          )
-        }
-      )
-    })
-  );
-});
+var Switch = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, haptic = false, disabled } = _b, props = __objRest(_b, ["className", "haptic", "disabled"]);
+    return /* @__PURE__ */ jsxs(
+      SwitchPrimitive.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "switch",
+        disabled,
+        className: cn(
+          "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
+          haptic && "relative",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            SwitchPrimitive.Thumb,
+            {
+              className: cn(
+                "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
+              )
+            }
+          ),
+          haptic && /* @__PURE__ */ jsx(HapticSwitch, { disabled })
+        ]
+      })
+    );
+  }
+);
 Switch.displayName = SwitchPrimitive.Root.displayName;
 
 export { Switch };

package/dist/hooks/use-haptic.d.ts

@@ -4,6 +4,14 @@ interface HapticAPI {
     platform: "ios" | "android" | "desktop" | "unknown";
     trigger: (style: HapticStyle) => void;
 }
+/**
+ * iOS Safari, including iPadOS masquerading as a Mac. Haptics there come from
+ * `HapticSwitch`, not from `trigger`: WebKit has no Vibration API, and since
+ * iOS 26.5 the only haptic it plays is a native switch flipping under the
+ * user's own finger — a programmatic click on the switch or its label no
+ * longer counts (WebKit #65327).
+ */
+declare function isIos(): boolean;
 declare const useHaptic: () => HapticAPI;
 declare global {
     interface Window {
@@ -19,4 +27,4 @@ declare global {
     }
 }
 
-export { useHaptic };
+export { isIos, useHaptic };

package/dist/hooks/use-haptic.js

@@ -1,2 +1,2 @@
-export { useHaptic } from '../chunk-R47NEOSI.js';
+export { isIos, useHaptic } from '../chunk-5YNIQ2BL.js';
 import '../chunk-MMUBH76A.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/button.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { useHaptic } from "../hooks/use-haptic";
+import { HapticSwitch, isHapticSwitchTarget } from "./haptic-switch";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
@@ -79,6 +80,14 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  /**
+   * Off by default. Haptics are for actions that change state — a save, a
+   * toggle, a destructive confirm — not for every button, so each site opts in.
+   *
+   * Android vibrates through `useHaptic`; iOS ticks through a `HapticSwitch`
+   * laid over the button, which needs a real element, so `asChild` gets the
+   * vibration only.
+   */
   haptic?: boolean;
   hapticStyle?: "light" | "medium" | "heavy";
   isLoading?: boolean;
@@ -92,10 +101,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       size,
       fullWidth,
       asChild = false,
-      haptic = true,
+      haptic = false,
       hapticStyle = "light",
       isLoading = false,
       disabled,
+      type,
       onClick,
       children,
       ...props
@@ -105,6 +115,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     const { trigger } = useHaptic();
     const [isMounted, setIsMounted] = React.useState(false);
+    const withSwitch = haptic && !asChild;
 
     React.useEffect(() => {
       setIsMounted(true);
@@ -115,13 +126,25 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         trigger(hapticStyle);
       }
       onClick?.(event);
+      // On iOS the tap lands on the overlay switch, so the button's own
+      // implicit submission never runs; forward it once the handler has had
+      // its say.
+      if (
+        withSwitch &&
+        type === "submit" &&
+        !event.defaultPrevented &&
+        isHapticSwitchTarget(event.target)
+      ) {
+        event.currentTarget.form?.requestSubmit(event.currentTarget);
+      }
     };
 
     return (
       <Comp
         data-slot="button"
-        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
+        className={cn(buttonVariants({ variant, size, fullWidth, className }), withSwitch && "relative")}
         ref={ref}
+        type={type}
         onClick={handleClick}
         disabled={disabled || isLoading}
         aria-busy={isLoading || undefined}
@@ -132,6 +155,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <Loader2 className="animate-spin" aria-hidden="true" />
             {!asChild && children}
           </>
+        ) : withSwitch ? (
+          <>
+            {children}
+            <HapticSwitch disabled={disabled} />
+          </>
         ) : (
           children
         )}

package/src/components/haptic-switch.test.tsx

@@ -0,0 +1,134 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { HapticSwitch, isHapticSwitchTarget } from "./haptic-switch";
+import { Button } from "./button";
+import { Switch } from "./switch";
+
+const IOS_UA =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Mobile/15E148 Safari/604.1";
+
+function pretendIos() {
+  vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IOS_UA);
+}
+
+const overlay = () => document.querySelector<HTMLInputElement>('input[data-slot="haptic-switch"]');
+
+describe("HapticSwitch", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders nothing off iOS", () => {
+    render(<HapticSwitch />);
+    expect(overlay()).toBeNull();
+  });
+
+  it("renders an invisible native switch on iOS, out of the tab order and the a11y tree", () => {
+    pretendIos();
+    render(<HapticSwitch />);
+    const input = overlay();
+    expect(input).not.toBeNull();
+    expect(input?.type).toBe("checkbox");
+    expect(input?.hasAttribute("switch")).toBe(true);
+    expect(input?.getAttribute("aria-hidden")).toBe("true");
+    expect(input?.tabIndex).toBe(-1);
+    expect(input?.className).toContain("opacity-0");
+  });
+
+  it("mirrors the host's disabled state", () => {
+    pretendIos();
+    render(<HapticSwitch disabled />);
+    expect(overlay()?.disabled).toBe(true);
+  });
+
+  it("identifies its own click target", () => {
+    pretendIos();
+    render(<HapticSwitch />);
+    expect(isHapticSwitchTarget(overlay())).toBe(true);
+    expect(isHapticSwitchTarget(document.body)).toBe(false);
+    expect(isHapticSwitchTarget(null)).toBe(false);
+  });
+});
+
+describe("Button haptic on iOS", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("lays the switch over the button and still runs onClick when the switch is tapped", async () => {
+    pretendIos();
+    const onClick = vi.fn();
+    render(
+      <Button haptic onClick={onClick}>
+        Save
+      </Button>
+    );
+    const button = screen.getByRole("button", { name: "Save" });
+    expect(button.className).toContain("relative");
+    const input = overlay();
+    expect(input?.parentElement).toBe(button);
+
+    await userEvent.click(input!);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(input?.checked).toBe(true);
+  });
+
+  it("does not render the switch without haptic, or with asChild", () => {
+    pretendIos();
+    const { rerender } = render(<Button>Plain</Button>);
+    expect(overlay()).toBeNull();
+    rerender(
+      <Button haptic asChild>
+        <a href="/x">Link</a>
+      </Button>
+    );
+    expect(overlay()).toBeNull();
+  });
+
+  it("forwards a submit tapped through the switch to the form", async () => {
+    pretendIos();
+    const onSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
+    render(
+      <form onSubmit={onSubmit}>
+        <Button type="submit" haptic>
+          Send
+        </Button>
+      </form>
+    );
+    await userEvent.click(overlay()!);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not forward the submit when the click handler cancelled it", async () => {
+    pretendIos();
+    const onSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
+    render(
+      <form onSubmit={onSubmit}>
+        <Button type="submit" haptic onClick={(e) => e.preventDefault()}>
+          Send
+        </Button>
+      </form>
+    );
+    await userEvent.click(overlay()!);
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});
+
+describe("Switch haptic on iOS", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("toggles through a tap on the overlay", async () => {
+    pretendIos();
+    const onCheckedChange = vi.fn();
+    render(<Switch haptic aria-label="Precise" onCheckedChange={onCheckedChange} />);
+    const root = screen.getByRole("switch", { name: "Precise" });
+    expect(root.className).toContain("relative");
+    expect(overlay()?.parentElement).toBe(root);
+
+    await userEvent.click(overlay()!);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/haptic-switch.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import * as React from "react";
+import { isIos } from "../hooks/use-haptic";
+
+export const HAPTIC_SWITCH_SLOT = "haptic-switch";
+
+/** True when a click's target is the overlay switch rather than the host. */
+export function isHapticSwitchTarget(target: EventTarget | null): boolean {
+  return target instanceof HTMLElement && target.dataset.slot === HAPTIC_SWITCH_SLOT;
+}
+
+type HapticSwitchProps = {
+  /** Mirror the host's disabled state; a disabled switch neither flips nor ticks. */
+  disabled?: boolean;
+};
+
+/**
+ * The only haptic iOS Safari has left.
+ *
+ * WebKit plays the system toggle haptic when an `<input type="checkbox" switch>`
+ * flips under the user's finger, and since iOS 26.5 under the finger is the
+ * only way — a programmatic click on the input or its label no longer counts
+ * (WebKit #65327). So the switch goes INSIDE the control, stretched over it and
+ * invisible, and the tap that lands on the control lands on the switch first.
+ * The click then bubbles to the host's own handler as usual.
+ *
+ * What the host must do:
+ * - be positioned (`relative` at least) so `inset-0` fills it;
+ * - not call `preventDefault()` on the click — that cancels the toggle, and
+ *   the toggle is the haptic;
+ * - if it is `type="submit"`, submit explicitly: the click target is the
+ *   switch, so the button's implicit submission never runs. `Button` does
+ *   this through `form.requestSubmit()`.
+ *
+ * Renders nothing on the server and on non-iOS clients (so the first client
+ * render matches SSR). Keyboard and assistive-tech activation land on the host,
+ * not the switch, and stay silent. `opacity: 0`, never `display: none` — a
+ * switch that is not rendered does not tick.
+ */
+export function HapticSwitch({ disabled = false }: HapticSwitchProps) {
+  const [enabled, setEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    setEnabled(isIos());
+  }, []);
+
+  if (!enabled) return null;
+
+  return (
+    <input
+      type="checkbox"
+      // WebKit's non-standard attribute; React's input types do not know it.
+      ref={(el) => el?.setAttribute("switch", "")}
+      data-slot={HAPTIC_SWITCH_SLOT}
+      aria-hidden="true"
+      tabIndex={-1}
+      disabled={disabled}
+      className="absolute inset-0 m-0 h-full w-full cursor-[inherit] rounded-[inherit] opacity-0 touch-manipulation [-webkit-tap-highlight-color:transparent]"
+    />
+  );
+}

package/src/components/switch.tsx

@@ -3,27 +3,38 @@
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "../lib/utils";
+import { HapticSwitch } from "./haptic-switch";
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitive.Root
-    ref={ref}
-    data-slot="switch"
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
-      className
-    )}
-    {...props}
-  >
-    <SwitchPrimitive.Thumb
+type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
+  /**
+   * Tick on iOS through a `HapticSwitch` laid over the control. Off by default;
+   * a switch that writes a persisted setting opts in.
+   */
+  haptic?: boolean;
+};
+
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
+  ({ className, haptic = false, disabled, ...props }, ref) => (
+    <SwitchPrimitive.Root
+      ref={ref}
+      data-slot="switch"
+      disabled={disabled}
       className={cn(
-        "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
+        haptic && "relative",
+        className
       )}
-    />
-  </SwitchPrimitive.Root>
-));
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
+        )}
+      />
+      {haptic && <HapticSwitch disabled={disabled} />}
+    </SwitchPrimitive.Root>
+  )
+);
 Switch.displayName = SwitchPrimitive.Root.displayName;
 
 export { Switch };

package/src/hooks/use-haptic.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { isIos, useHaptic } from "./use-haptic";
+
+const IOS_UA =
+  "Mozilla/5.0 (iPhone; CPU iPhone OS 26_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Mobile/15E148 Safari/604.1";
+const IPAD_AS_MAC_UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15";
+
+describe("isIos", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("is false in jsdom", () => {
+    expect(isIos()).toBe(false);
+  });
+
+  it("matches an iPhone user agent", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IOS_UA);
+    expect(isIos()).toBe(true);
+  });
+
+  it("matches an iPad presenting as a Mac by its touch points", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IPAD_AS_MAC_UA);
+    vi.spyOn(navigator, "platform", "get").mockReturnValue("MacIntel");
+    Object.defineProperty(navigator, "maxTouchPoints", { value: 5, configurable: true });
+    expect(isIos()).toBe(true);
+    Reflect.deleteProperty(navigator, "maxTouchPoints");
+  });
+});
+
+describe("useHaptic", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Reflect.deleteProperty(navigator, "vibrate");
+  });
+
+  it("reports support on iOS without adding anything to the DOM — the switch lives in the control", () => {
+    vi.spyOn(navigator, "userAgent", "get").mockReturnValue(IOS_UA);
+    const debug = vi.spyOn(console, "debug").mockImplementation(() => {});
+    const { result } = renderHook(() => useHaptic());
+
+    expect(result.current.isSupported).toBe(true);
+    expect(result.current.platform).toBe("ios");
+    act(() => result.current.trigger("light"));
+    expect(document.body.querySelector("input[switch]")).toBeNull();
+    expect(debug).toHaveBeenCalled();
+  });
+
+  it("reports no support without any haptic API", () => {
+    const debug = vi.spyOn(console, "debug").mockImplementation(() => {});
+    const { result } = renderHook(() => useHaptic());
+
+    expect(result.current.isSupported).toBe(false);
+    act(() => result.current.trigger("light"));
+    expect(debug).toHaveBeenCalled();
+  });
+
+  it("vibrates through navigator.vibrate where it exists", () => {
+    const vibrate = vi.fn();
+    Object.defineProperty(navigator, "vibrate", { value: vibrate, configurable: true });
+    const { result } = renderHook(() => useHaptic());
+
+    act(() => result.current.trigger("medium"));
+    expect(vibrate).toHaveBeenCalledWith(20);
+  });
+
+  it("keeps trigger referentially stable across renders", () => {
+    const { result, rerender } = renderHook(() => useHaptic());
+    const first = result.current.trigger;
+    rerender();
+    expect(result.current.trigger).toBe(first);
+  });
+});

package/src/hooks/use-haptic.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 type HapticStyle = "light" | "medium" | "heavy" | "success" | "warning" | "error" | "selection";
 
@@ -10,6 +10,21 @@ interface HapticAPI {
   trigger: (style: HapticStyle) => void;
 }
 
+/**
+ * iOS Safari, including iPadOS masquerading as a Mac. Haptics there come from
+ * `HapticSwitch`, not from `trigger`: WebKit has no Vibration API, and since
+ * iOS 26.5 the only haptic it plays is a native switch flipping under the
+ * user's own finger — a programmatic click on the switch or its label no
+ * longer counts (WebKit #65327).
+ */
+export function isIos(): boolean {
+  if (typeof navigator === "undefined") return false;
+  return (
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  );
+}
+
 export const useHaptic = (): HapticAPI => {
   const [platform, setPlatform] = useState<"ios" | "android" | "desktop" | "unknown">("unknown");
   const [isSupported, setIsSupported] = useState(false);
@@ -17,10 +32,9 @@ export const useHaptic = (): HapticAPI => {
   useEffect(() => {
     // Detect platform
     const userAgent = navigator.userAgent.toLowerCase();
-    const isIOS = /iphone|ipad|ipod/.test(userAgent);
     const isAndroid = /android/.test(userAgent);
 
-    if (isIOS) {
+    if (isIos()) {
       setPlatform("ios");
     } else if (isAndroid) {
       setPlatform("android");
@@ -32,10 +46,10 @@ export const useHaptic = (): HapticAPI => {
     const hasVibration = "vibrate" in navigator;
     const hasTelegram = typeof window !== "undefined" && window.Telegram?.WebApp?.HapticFeedback;
 
-    setIsSupported(hasVibration || !!hasTelegram);
+    setIsSupported(hasVibration || !!hasTelegram || isIos());
   }, []);
 
-  const trigger = (style: HapticStyle) => {
+  const trigger = useCallback((style: HapticStyle) => {
     // Try Telegram API first (works on both iOS and Android in Telegram)
     if (typeof window !== "undefined" && window.Telegram?.WebApp?.HapticFeedback) {
       triggerTelegramHaptic(style);
@@ -48,9 +62,10 @@ export const useHaptic = (): HapticAPI => {
       return;
     }
 
+    // iOS: nothing to call — see HapticSwitch, which sits inside the control
     // No haptic support - silently fail
     console.debug("Haptic feedback not supported on this device");
-  };
+  }, []);
 
   return { isSupported, platform, trigger };
 };

package/dist/components/haptic-button.d.ts

@@ -1,12 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from './button.js';
-import 'class-variance-authority/types';
-import 'react';
-import 'class-variance-authority';
-
-interface HapticButtonProps extends ButtonProps {
-    hapticStyle?: "light" | "medium" | "heavy";
-}
-declare function HapticButton({ hapticStyle, onClick, ...props }: HapticButtonProps): react_jsx_runtime.JSX.Element;
-
-export { HapticButton };

package/dist/components/haptic-button.js

@@ -1,17 +0,0 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import { useHaptic } from '../chunk-R47NEOSI.js';
-import '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
-import { jsx } from 'react/jsx-runtime';
-
-function HapticButton(_a) {
-  var _b = _a, { hapticStyle = "light", onClick } = _b, props = __objRest(_b, ["hapticStyle", "onClick"]);
-  const { trigger } = useHaptic();
-  const handleClick = (e) => {
-    trigger(hapticStyle);
-    onClick == null ? void 0 : onClick(e);
-  };
-  return /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, props), { onClick: handleClick, haptic: false }));
-}
-
-export { HapticButton };

package/src/components/haptic-button.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { HapticButton } from "./haptic-button";
-
-const meta = {
-  title: "Components/HapticButton",
-  component: HapticButton,
-  tags: ["autodocs"],
-} satisfies Meta<typeof HapticButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Light: Story = {
-  render: () => <HapticButton hapticStyle="light">Light Haptic</HapticButton>,
-};
-
-export const Medium: Story = {
-  render: () => (
-    <HapticButton hapticStyle="medium" variant="secondary">
-      Medium Haptic
-    </HapticButton>
-  ),
-};
-
-export const Heavy: Story = {
-  render: () => (
-    <HapticButton hapticStyle="heavy" variant="destructive">
-      Heavy Haptic
-    </HapticButton>
-  ),
-};
-
-export const AllStyles: Story = {
-  render: () => (
-    <div className="flex gap-3">
-      <HapticButton hapticStyle="light">Light</HapticButton>
-      <HapticButton hapticStyle="medium" variant="secondary">Medium</HapticButton>
-      <HapticButton hapticStyle="heavy" variant="outline">Heavy</HapticButton>
-    </div>
-  ),
-};

package/src/components/haptic-button.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { Button, type ButtonProps } from "./button";
-import { useHaptic } from "../hooks/use-haptic";
-
-interface HapticButtonProps extends ButtonProps {
-  hapticStyle?: "light" | "medium" | "heavy";
-}
-
-export function HapticButton({ hapticStyle = "light", onClick, ...props }: HapticButtonProps) {
-  const { trigger } = useHaptic();
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    trigger(hapticStyle);
-    onClick?.(e);
-  };
-
-  return <Button {...props} onClick={handleClick} haptic={false} />;
-}