@bearmenu/ui 0.8.14 → 0.8.15

package/README.md

@@ -48,7 +48,6 @@ 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` |
 | Input | `@bearmenu/ui/components/input` |
 | Input OTP | `@bearmenu/ui/components/input-otp` |
 | Label | `@bearmenu/ui/components/label` |

package/dist/{chunk-F76NCVVR.js → chunk-5FCC5L5F.js}

@@ -1,4 +1,4 @@
-import { useHaptic } from './chunk-R47NEOSI.js';
+import { useHaptic } from './chunk-V4E333QS.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -78,7 +78,7 @@ var Button = React.forwardRef(
       size,
       fullWidth,
       asChild = false,
-      haptic = true,
+      haptic = false,
       hapticStyle = "light",
       isLoading = false,
       disabled,

package/dist/{chunk-R47NEOSI.js → chunk-V4E333QS.js}

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 var useHaptic = () => {
   const [platform, setPlatform] = useState("unknown");
@@ -17,9 +17,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 || supportsSwitchHaptic());
   }, []);
-  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);
@@ -29,8 +29,12 @@ var useHaptic = () => {
       triggerVibrationAPI(style);
       return;
     }
+    if (supportsSwitchHaptic()) {
+      triggerSwitchHaptic();
+      return;
+    }
     console.debug("Haptic feedback not supported on this device");
-  };
+  }, []);
   return { isSupported, platform, trigger };
 };
 function triggerTelegramHaptic(style) {
@@ -74,5 +78,26 @@ function triggerVibrationAPI(style) {
   };
   navigator.vibrate(patterns[style]);
 }
+var hapticSwitch = null;
+function supportsSwitchHaptic() {
+  return typeof HTMLInputElement !== "undefined" && "switch" in HTMLInputElement.prototype;
+}
+function getHapticSwitch() {
+  if (hapticSwitch == null ? void 0 : hapticSwitch.isConnected) return hapticSwitch;
+  const label = document.createElement("label");
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.setAttribute("switch", "");
+  input.tabIndex = -1;
+  label.setAttribute("aria-hidden", "true");
+  label.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none";
+  label.appendChild(input);
+  document.body.appendChild(label);
+  hapticSwitch = label;
+  return label;
+}
+function triggerSwitchHaptic() {
+  getHapticSwitch().click();
+}
 
 export { useHaptic };

package/dist/components/alert-dialog.js

@@ -1,5 +1,5 @@
-import { buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,10 @@ 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.
+     */
     haptic?: boolean;
     hapticStyle?: "light" | "medium" | "heavy";
     isLoading?: boolean;

package/dist/components/button.js

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

package/dist/components/calendar.js

@@ -1,5 +1,5 @@
-import { buttonVariants, Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants, Button } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,5 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,8 @@
 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/empty-state.js

@@ -1,5 +1,5 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,8 @@ 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,8 @@ 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { memo, useState } from 'react';

package/dist/components/kitchen-dossier.js

@@ -1,5 +1,5 @@
-import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-ZQ53AGML.js';
 import { VenueQuotes } from '../chunk-43RC7MHY.js';
+import { DIMENSION_ORDER, VenueGradeDimensions } from '../chunk-ZQ53AGML.js';
 import { StoryProvider, StorySegments, StoryPanel } from '../chunk-F6FMZJDG.js';
 import { GlassGround } from '../chunk-ICOU5QHT.js';
 import { Separator } from '../chunk-NWZGSLPU.js';

package/dist/components/link-button.js

@@ -1,5 +1,5 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,8 @@ 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,7 @@
 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,8 @@ 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,5 @@
-import { buttonVariants } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { buttonVariants } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.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/place-card.js

@@ -1,6 +1,6 @@
-import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
+import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { GradeAtom } from '../chunk-DJD3EMPK.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';

package/dist/components/searchable-select.js

@@ -1,8 +1,8 @@
 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-5FCC5L5F.js';
+import '../chunk-V4E333QS.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,5 @@
-import { Button } from '../chunk-F76NCVVR.js';
-import '../chunk-R47NEOSI.js';
+import { Button } from '../chunk-5FCC5L5F.js';
+import '../chunk-V4E333QS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/hooks/use-haptic.js

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

package/package.json

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

package/src/components/button.tsx

@@ -79,6 +79,10 @@ 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.
+   */
   haptic?: boolean;
   hapticStyle?: "light" | "medium" | "heavy";
   isLoading?: boolean;
@@ -92,7 +96,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       size,
       fullWidth,
       asChild = false,
-      haptic = true,
+      haptic = false,
       hapticStyle = "light",
       isLoading = false,
       disabled,

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

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useHaptic } from "./use-haptic";
+
+const hapticSwitch = () => document.body.querySelector<HTMLInputElement>("input[type=checkbox][switch]");
+
+describe("useHaptic", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("on iOS Safari (no Vibration API, switch supported)", () => {
+    beforeEach(() => {
+      Object.defineProperty(HTMLInputElement.prototype, "switch", { value: false, configurable: true });
+    });
+
+    afterEach(() => {
+      Reflect.deleteProperty(HTMLInputElement.prototype, "switch");
+      hapticSwitch()?.parentElement?.remove();
+    });
+
+    it("reports support", () => {
+      const { result } = renderHook(() => useHaptic());
+      expect(result.current.isSupported).toBe(true);
+    });
+
+    it("toggles one hidden switch through its label on every trigger", () => {
+      const { result } = renderHook(() => useHaptic());
+
+      act(() => result.current.trigger("light"));
+      const input = hapticSwitch();
+      expect(input).not.toBeNull();
+      expect(input?.checked).toBe(true);
+      expect(input?.parentElement?.getAttribute("aria-hidden")).toBe("true");
+
+      act(() => result.current.trigger("light"));
+      expect(document.body.querySelectorAll("input[switch]")).toHaveLength(1);
+      expect(input?.checked).toBe(false);
+    });
+
+    it("collapses every style to the one tick WebKit has", () => {
+      const { result } = renderHook(() => useHaptic());
+
+      act(() => result.current.trigger("heavy"));
+      expect(hapticSwitch()?.checked).toBe(true);
+      act(() => result.current.trigger("success"));
+      expect(hapticSwitch()?.checked).toBe(false);
+    });
+  });
+
+  describe("without any haptic API", () => {
+    it("reports no support and renders no switch", () => {
+      const debug = vi.spyOn(console, "debug").mockImplementation(() => {});
+      const { result } = renderHook(() => useHaptic());
+
+      expect(result.current.isSupported).toBe(false);
+      act(() => result.current.trigger("light"));
+      expect(hapticSwitch()).toBeNull();
+      expect(debug).toHaveBeenCalled();
+    });
+  });
+
+  describe("with the Vibration API", () => {
+    afterEach(() => {
+      Reflect.deleteProperty(navigator, "vibrate");
+    });
+
+    it("prefers navigator.vibrate over the switch", () => {
+      const vibrate = vi.fn();
+      Object.defineProperty(navigator, "vibrate", { value: vibrate, configurable: true });
+      Object.defineProperty(HTMLInputElement.prototype, "switch", { value: false, configurable: true });
+      const { result } = renderHook(() => useHaptic());
+
+      act(() => result.current.trigger("medium"));
+      expect(vibrate).toHaveBeenCalledWith(20);
+      expect(hapticSwitch()).toBeNull();
+      Reflect.deleteProperty(HTMLInputElement.prototype, "switch");
+    });
+  });
+});

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";
 
@@ -32,10 +32,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 || supportsSwitchHaptic());
   }, []);
 
-  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 +48,15 @@ export const useHaptic = (): HapticAPI => {
       return;
     }
 
+    // iOS Safari has no Vibration API; the switch toggle is the only haptic it exposes
+    if (supportsSwitchHaptic()) {
+      triggerSwitchHaptic();
+      return;
+    }
+
     // No haptic support - silently fail
     console.debug("Haptic feedback not supported on this device");
-  };
+  }, []);
 
   return { isSupported, platform, trigger };
 };
@@ -102,6 +108,41 @@ function triggerVibrationAPI(style: HapticStyle) {
   navigator.vibrate(patterns[style]);
 }
 
+// Switch implementation (iOS 18+ Safari and home-screen PWAs)
+//
+// WebKit plays the system "toggle" haptic when an `<input type="checkbox" switch>`
+// flips through its label, and a programmatic `label.click()` counts. One hidden
+// switch appended to the body doubles as a haptic trigger. It is the only haptic
+// WebKit exposes, so every style collapses to that one tick here.
+// https://github.com/ionic-team/ionic-framework/issues/29942
+let hapticSwitch: HTMLLabelElement | null = null;
+
+function supportsSwitchHaptic(): boolean {
+  return typeof HTMLInputElement !== "undefined" && "switch" in HTMLInputElement.prototype;
+}
+
+function getHapticSwitch(): HTMLLabelElement {
+  if (hapticSwitch?.isConnected) return hapticSwitch;
+
+  const label = document.createElement("label");
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.setAttribute("switch", "");
+  input.tabIndex = -1;
+  label.setAttribute("aria-hidden", "true");
+  label.style.cssText =
+    "position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none";
+  label.appendChild(input);
+  document.body.appendChild(label);
+
+  hapticSwitch = label;
+  return label;
+}
+
+function triggerSwitchHaptic() {
+  getHapticSwitch().click();
+}
+
 // Extend Window interface for TypeScript
 declare global {
   interface Window {

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} />;
-}