@hapticjs/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+var react = require('react');
+var core = require('@hapticjs/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/hooks/use-haptic.ts
+var HapticContext = react.createContext(null);
+function HapticProvider({ config, engine, children }) {
+  const value = react.useMemo(() => {
+    if (engine) return { engine };
+    return { engine: core.HapticEngine.create(config) };
+  }, [engine, config]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HapticContext.Provider, { value, children });
+}
+function useHapticEngine() {
+  const context = react.useContext(HapticContext);
+  if (context) return context.engine;
+  return core.HapticEngine.create();
+}
+
+// src/hooks/use-haptic.ts
+function useHaptic(effect) {
+  const engine = useHapticEngine();
+  const trigger = react.useCallback(async () => {
+    if (!effect) return;
+    if (effect in engine) {
+      const method = engine[effect];
+      if (typeof method === "function") {
+        await method.call(engine);
+        return;
+      }
+    }
+    await engine.play(effect);
+  }, [engine, effect]);
+  const actions = react.useMemo(
+    () => ({
+      tap: (intensity) => engine.tap(intensity),
+      doubleTap: (intensity) => engine.doubleTap(intensity),
+      longPress: (intensity) => engine.longPress(intensity),
+      success: () => engine.success(),
+      warning: () => engine.warning(),
+      error: () => engine.error(),
+      selection: () => engine.selection(),
+      toggle: (on) => engine.toggle(on),
+      play: (pattern) => engine.play(pattern),
+      vibrate: (duration, intensity) => engine.vibrate(duration, intensity),
+      isSupported: engine.isSupported
+    }),
+    [engine]
+  );
+  if (effect === void 0) {
+    return actions;
+  }
+  return {
+    trigger,
+    isSupported: engine.isSupported,
+    engine
+  };
+}
+function useHapticGesture(config) {
+  const engine = useHapticEngine();
+  const pressTimer = react.useRef(null);
+  const isLongPress = react.useRef(false);
+  const threshold = config.longPressThreshold ?? 500;
+  const playEffect = react.useCallback(
+    async (effect) => {
+      if (effect in engine) {
+        const method = engine[effect];
+        if (typeof method === "function") {
+          await method.call(engine);
+          return;
+        }
+      }
+      await engine.play(effect);
+    },
+    [engine]
+  );
+  const onPointerDown = react.useCallback(() => {
+    isLongPress.current = false;
+    if (config.onLongPress) {
+      pressTimer.current = setTimeout(() => {
+        isLongPress.current = true;
+        if (config.onLongPress) {
+          playEffect(config.onLongPress);
+        }
+      }, threshold);
+    }
+  }, [config.onLongPress, threshold, playEffect]);
+  const onPointerUp = react.useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+    if (!isLongPress.current && config.onTap) {
+      playEffect(config.onTap);
+    }
+  }, [config.onTap, playEffect]);
+  const onPointerCancel = react.useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+  }, []);
+  const onPointerEnter = react.useCallback(() => {
+    if (config.onHover) {
+      playEffect(config.onHover);
+    }
+  }, [config.onHover, playEffect]);
+  return {
+    onPointerDown,
+    onPointerUp,
+    onPointerCancel,
+    ...config.onHover ? { onPointerEnter } : {}
+  };
+}
+function HapticButton({
+  effect = "tap",
+  pattern,
+  onClick,
+  children,
+  ...props
+}) {
+  const { trigger } = useHaptic(pattern ?? effect);
+  const handleClick = async (e) => {
+    await trigger();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClick, ...props, children });
+}
+
+exports.HapticButton = HapticButton;
+exports.HapticProvider = HapticProvider;
+exports.useHaptic = useHaptic;
+exports.useHapticEngine = useHapticEngine;
+exports.useHapticGesture = useHapticGesture;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/haptic-provider.tsx","../src/hooks/use-haptic.ts","../src/hooks/use-haptic-gesture.ts","../src/components/haptic-button.tsx"],"names":["createContext","useMemo","HapticEngine","jsx","useContext","useCallback","useRef"],"mappings":"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","file":"index.cjs","sourcesContent":["import { createContext, useContext, useMemo } from 'react';\nimport { HapticEngine } from '@hapticjs/core';\nimport type { HapticConfig } from '@hapticjs/core';\n\nexport interface HapticContextValue {\n  engine: HapticEngine;\n}\n\nconst HapticContext = createContext<HapticContextValue | null>(null);\n\nexport interface HapticProviderProps {\n  config?: Partial<HapticConfig>;\n  engine?: HapticEngine;\n  children: React.ReactNode;\n}\n\n/**\n * Provides a shared HapticEngine to all child components.\n *\n * Usage:\n *   <HapticProvider config={{ intensity: 0.8 }}>\n *     <App />\n *   </HapticProvider>\n */\nexport function HapticProvider({ config, engine, children }: HapticProviderProps) {\n  const value = useMemo<HapticContextValue>(() => {\n    if (engine) return { engine };\n    return { engine: HapticEngine.create(config) };\n  }, [engine, config]);\n\n  return (\n    <HapticContext.Provider value={value}>\n      {children}\n    </HapticContext.Provider>\n  );\n}\n\n/** Get the HapticEngine from context, or create a default one */\nexport function useHapticEngine(): HapticEngine {\n  const context = useContext(HapticContext);\n  if (context) return context.engine;\n\n  // No provider — return the default singleton\n  return HapticEngine.create();\n}\n","import { useCallback, useMemo } from 'react';\nimport type { HapticPattern, HapticStep, SemanticEffect } from '@hapticjs/core';\nimport { useHapticEngine } from '../context/haptic-provider';\n\nexport interface UseHapticReturn {\n  /** Trigger the specified effect */\n  trigger: () => Promise<void>;\n  /** Whether haptics are supported on this device */\n  isSupported: boolean;\n  /** The underlying engine instance */\n  engine: ReturnType<typeof useHapticEngine>;\n}\n\nexport interface UseHapticActions {\n  tap: (intensity?: number) => Promise<void>;\n  doubleTap: (intensity?: number) => Promise<void>;\n  longPress: (intensity?: number) => Promise<void>;\n  success: () => Promise<void>;\n  warning: () => Promise<void>;\n  error: () => Promise<void>;\n  selection: () => Promise<void>;\n  toggle: (on: boolean) => Promise<void>;\n  play: (pattern: string | HapticPattern | HapticStep[]) => Promise<void>;\n  vibrate: (duration: number, intensity?: number) => Promise<void>;\n  isSupported: boolean;\n}\n\n/**\n * React hook for haptic feedback.\n *\n * With a preset:\n *   const { trigger, isSupported } = useHaptic('success');\n *   <button onClick={trigger}>Yay!</button>\n *\n * Without preset (full API):\n *   const haptic = useHaptic();\n *   haptic.tap();\n *   haptic.play('~~..##');\n */\nexport function useHaptic(): UseHapticActions;\nexport function useHaptic(effect: SemanticEffect | string): UseHapticReturn;\nexport function useHaptic(effect?: SemanticEffect | string): UseHapticReturn | UseHapticActions {\n  const engine = useHapticEngine();\n\n  const trigger = useCallback(async () => {\n    if (!effect) return;\n\n    // Check if it's a semantic effect\n    if (effect in engine) {\n      const method = engine[effect as keyof typeof engine];\n      if (typeof method === 'function') {\n        await (method as () => Promise<void>).call(engine);\n        return;\n      }\n    }\n\n    // Try as HPL pattern\n    await engine.play(effect);\n  }, [engine, effect]);\n\n  const actions = useMemo<UseHapticActions>(\n    () => ({\n      tap: (intensity?: number) => engine.tap(intensity),\n      doubleTap: (intensity?: number) => engine.doubleTap(intensity),\n      longPress: (intensity?: number) => engine.longPress(intensity),\n      success: () => engine.success(),\n      warning: () => engine.warning(),\n      error: () => engine.error(),\n      selection: () => engine.selection(),\n      toggle: (on: boolean) => engine.toggle(on),\n      play: (pattern: string | HapticPattern | HapticStep[]) => engine.play(pattern),\n      vibrate: (duration: number, intensity?: number) => engine.vibrate(duration, intensity),\n      isSupported: engine.isSupported,\n    }),\n    [engine],\n  );\n\n  if (effect === undefined) {\n    return actions;\n  }\n\n  return {\n    trigger,\n    isSupported: engine.isSupported,\n    engine,\n  };\n}\n","import { useCallback, useRef } from 'react';\nimport type { SemanticEffect } from '@hapticjs/core';\nimport { useHapticEngine } from '../context/haptic-provider';\n\nexport interface HapticGestureConfig {\n  /** Effect to play on tap/click */\n  onTap?: SemanticEffect | string;\n  /** Effect to play on long press (>500ms) */\n  onLongPress?: SemanticEffect | string;\n  /** Effect to play on pointer enter (hover) */\n  onHover?: SemanticEffect | string;\n  /** Long press threshold in ms */\n  longPressThreshold?: number;\n}\n\n/**\n * Hook that binds haptic feedback to pointer/touch gestures.\n *\n * Usage:\n *   const gestureProps = useHapticGesture({\n *     onTap: 'tap',\n *     onLongPress: 'heavy',\n *   });\n *   <div {...gestureProps}>Press me</div>\n */\nexport function useHapticGesture(config: HapticGestureConfig) {\n  const engine = useHapticEngine();\n  const pressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isLongPress = useRef(false);\n  const threshold = config.longPressThreshold ?? 500;\n\n  const playEffect = useCallback(\n    async (effect: SemanticEffect | string) => {\n      if (effect in engine) {\n        const method = engine[effect as keyof typeof engine];\n        if (typeof method === 'function') {\n          await (method as () => Promise<void>).call(engine);\n          return;\n        }\n      }\n      await engine.play(effect);\n    },\n    [engine],\n  );\n\n  const onPointerDown = useCallback(() => {\n    isLongPress.current = false;\n\n    if (config.onLongPress) {\n      pressTimer.current = setTimeout(() => {\n        isLongPress.current = true;\n        if (config.onLongPress) {\n          playEffect(config.onLongPress);\n        }\n      }, threshold);\n    }\n  }, [config.onLongPress, threshold, playEffect]);\n\n  const onPointerUp = useCallback(() => {\n    if (pressTimer.current) {\n      clearTimeout(pressTimer.current);\n      pressTimer.current = null;\n    }\n\n    if (!isLongPress.current && config.onTap) {\n      playEffect(config.onTap);\n    }\n  }, [config.onTap, playEffect]);\n\n  const onPointerCancel = useCallback(() => {\n    if (pressTimer.current) {\n      clearTimeout(pressTimer.current);\n      pressTimer.current = null;\n    }\n  }, []);\n\n  const onPointerEnter = useCallback(() => {\n    if (config.onHover) {\n      playEffect(config.onHover);\n    }\n  }, [config.onHover, playEffect]);\n\n  return {\n    onPointerDown,\n    onPointerUp,\n    onPointerCancel,\n    ...(config.onHover ? { onPointerEnter } : {}),\n  };\n}\n","import type { SemanticEffect } from '@hapticjs/core';\nimport { useHaptic } from '../hooks/use-haptic';\n\nexport interface HapticButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Haptic effect to trigger on click */\n  effect?: SemanticEffect | string;\n  /** HPL pattern string to play on click */\n  pattern?: string;\n}\n\n/**\n * Button component with built-in haptic feedback.\n *\n * Usage:\n *   <HapticButton effect=\"tap\">Click me</HapticButton>\n *   <HapticButton pattern=\"~~..##\">Custom feel</HapticButton>\n */\nexport function HapticButton({\n  effect = 'tap',\n  pattern,\n  onClick,\n  children,\n  ...props\n}: HapticButtonProps) {\n  const { trigger } = useHaptic(pattern ?? effect);\n\n  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    await trigger();\n    onClick?.(e);\n  };\n\n  return (\n    <button onClick={handleClick} {...props}>\n      {children}\n    </button>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,102 @@
+import { HapticEngine, HapticConfig, HapticPattern, HapticStep, SemanticEffect } from '@hapticjs/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HapticContextValue {
+    engine: HapticEngine;
+}
+interface HapticProviderProps {
+    config?: Partial<HapticConfig>;
+    engine?: HapticEngine;
+    children: React.ReactNode;
+}
+/**
+ * Provides a shared HapticEngine to all child components.
+ *
+ * Usage:
+ *   <HapticProvider config={{ intensity: 0.8 }}>
+ *     <App />
+ *   </HapticProvider>
+ */
+declare function HapticProvider({ config, engine, children }: HapticProviderProps): react_jsx_runtime.JSX.Element;
+/** Get the HapticEngine from context, or create a default one */
+declare function useHapticEngine(): HapticEngine;
+
+interface UseHapticReturn {
+    /** Trigger the specified effect */
+    trigger: () => Promise<void>;
+    /** Whether haptics are supported on this device */
+    isSupported: boolean;
+    /** The underlying engine instance */
+    engine: ReturnType<typeof useHapticEngine>;
+}
+interface UseHapticActions {
+    tap: (intensity?: number) => Promise<void>;
+    doubleTap: (intensity?: number) => Promise<void>;
+    longPress: (intensity?: number) => Promise<void>;
+    success: () => Promise<void>;
+    warning: () => Promise<void>;
+    error: () => Promise<void>;
+    selection: () => Promise<void>;
+    toggle: (on: boolean) => Promise<void>;
+    play: (pattern: string | HapticPattern | HapticStep[]) => Promise<void>;
+    vibrate: (duration: number, intensity?: number) => Promise<void>;
+    isSupported: boolean;
+}
+/**
+ * React hook for haptic feedback.
+ *
+ * With a preset:
+ *   const { trigger, isSupported } = useHaptic('success');
+ *   <button onClick={trigger}>Yay!</button>
+ *
+ * Without preset (full API):
+ *   const haptic = useHaptic();
+ *   haptic.tap();
+ *   haptic.play('~~..##');
+ */
+declare function useHaptic(): UseHapticActions;
+declare function useHaptic(effect: SemanticEffect | string): UseHapticReturn;
+
+interface HapticGestureConfig {
+    /** Effect to play on tap/click */
+    onTap?: SemanticEffect | string;
+    /** Effect to play on long press (>500ms) */
+    onLongPress?: SemanticEffect | string;
+    /** Effect to play on pointer enter (hover) */
+    onHover?: SemanticEffect | string;
+    /** Long press threshold in ms */
+    longPressThreshold?: number;
+}
+/**
+ * Hook that binds haptic feedback to pointer/touch gestures.
+ *
+ * Usage:
+ *   const gestureProps = useHapticGesture({
+ *     onTap: 'tap',
+ *     onLongPress: 'heavy',
+ *   });
+ *   <div {...gestureProps}>Press me</div>
+ */
+declare function useHapticGesture(config: HapticGestureConfig): {
+    onPointerEnter?: (() => void) | undefined;
+    onPointerDown: () => void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+};
+
+interface HapticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Haptic effect to trigger on click */
+    effect?: SemanticEffect | string;
+    /** HPL pattern string to play on click */
+    pattern?: string;
+}
+/**
+ * Button component with built-in haptic feedback.
+ *
+ * Usage:
+ *   <HapticButton effect="tap">Click me</HapticButton>
+ *   <HapticButton pattern="~~..##">Custom feel</HapticButton>
+ */
+declare function HapticButton({ effect, pattern, onClick, children, ...props }: HapticButtonProps): react_jsx_runtime.JSX.Element;
+
+export { HapticButton, type HapticButtonProps, type HapticContextValue, type HapticGestureConfig, HapticProvider, type HapticProviderProps, type UseHapticActions, type UseHapticReturn, useHaptic, useHapticEngine, useHapticGesture };

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import { HapticEngine, HapticConfig, HapticPattern, HapticStep, SemanticEffect } from '@hapticjs/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HapticContextValue {
+    engine: HapticEngine;
+}
+interface HapticProviderProps {
+    config?: Partial<HapticConfig>;
+    engine?: HapticEngine;
+    children: React.ReactNode;
+}
+/**
+ * Provides a shared HapticEngine to all child components.
+ *
+ * Usage:
+ *   <HapticProvider config={{ intensity: 0.8 }}>
+ *     <App />
+ *   </HapticProvider>
+ */
+declare function HapticProvider({ config, engine, children }: HapticProviderProps): react_jsx_runtime.JSX.Element;
+/** Get the HapticEngine from context, or create a default one */
+declare function useHapticEngine(): HapticEngine;
+
+interface UseHapticReturn {
+    /** Trigger the specified effect */
+    trigger: () => Promise<void>;
+    /** Whether haptics are supported on this device */
+    isSupported: boolean;
+    /** The underlying engine instance */
+    engine: ReturnType<typeof useHapticEngine>;
+}
+interface UseHapticActions {
+    tap: (intensity?: number) => Promise<void>;
+    doubleTap: (intensity?: number) => Promise<void>;
+    longPress: (intensity?: number) => Promise<void>;
+    success: () => Promise<void>;
+    warning: () => Promise<void>;
+    error: () => Promise<void>;
+    selection: () => Promise<void>;
+    toggle: (on: boolean) => Promise<void>;
+    play: (pattern: string | HapticPattern | HapticStep[]) => Promise<void>;
+    vibrate: (duration: number, intensity?: number) => Promise<void>;
+    isSupported: boolean;
+}
+/**
+ * React hook for haptic feedback.
+ *
+ * With a preset:
+ *   const { trigger, isSupported } = useHaptic('success');
+ *   <button onClick={trigger}>Yay!</button>
+ *
+ * Without preset (full API):
+ *   const haptic = useHaptic();
+ *   haptic.tap();
+ *   haptic.play('~~..##');
+ */
+declare function useHaptic(): UseHapticActions;
+declare function useHaptic(effect: SemanticEffect | string): UseHapticReturn;
+
+interface HapticGestureConfig {
+    /** Effect to play on tap/click */
+    onTap?: SemanticEffect | string;
+    /** Effect to play on long press (>500ms) */
+    onLongPress?: SemanticEffect | string;
+    /** Effect to play on pointer enter (hover) */
+    onHover?: SemanticEffect | string;
+    /** Long press threshold in ms */
+    longPressThreshold?: number;
+}
+/**
+ * Hook that binds haptic feedback to pointer/touch gestures.
+ *
+ * Usage:
+ *   const gestureProps = useHapticGesture({
+ *     onTap: 'tap',
+ *     onLongPress: 'heavy',
+ *   });
+ *   <div {...gestureProps}>Press me</div>
+ */
+declare function useHapticGesture(config: HapticGestureConfig): {
+    onPointerEnter?: (() => void) | undefined;
+    onPointerDown: () => void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+};
+
+interface HapticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Haptic effect to trigger on click */
+    effect?: SemanticEffect | string;
+    /** HPL pattern string to play on click */
+    pattern?: string;
+}
+/**
+ * Button component with built-in haptic feedback.
+ *
+ * Usage:
+ *   <HapticButton effect="tap">Click me</HapticButton>
+ *   <HapticButton pattern="~~..##">Custom feel</HapticButton>
+ */
+declare function HapticButton({ effect, pattern, onClick, children, ...props }: HapticButtonProps): react_jsx_runtime.JSX.Element;
+
+export { HapticButton, type HapticButtonProps, type HapticContextValue, type HapticGestureConfig, HapticProvider, type HapticProviderProps, type UseHapticActions, type UseHapticReturn, useHaptic, useHapticEngine, useHapticGesture };

package/dist/index.js

@@ -0,0 +1,132 @@
+import { createContext, useMemo, useContext, useCallback, useRef } from 'react';
+import { HapticEngine } from '@hapticjs/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/hooks/use-haptic.ts
+var HapticContext = createContext(null);
+function HapticProvider({ config, engine, children }) {
+  const value = useMemo(() => {
+    if (engine) return { engine };
+    return { engine: HapticEngine.create(config) };
+  }, [engine, config]);
+  return /* @__PURE__ */ jsx(HapticContext.Provider, { value, children });
+}
+function useHapticEngine() {
+  const context = useContext(HapticContext);
+  if (context) return context.engine;
+  return HapticEngine.create();
+}
+
+// src/hooks/use-haptic.ts
+function useHaptic(effect) {
+  const engine = useHapticEngine();
+  const trigger = useCallback(async () => {
+    if (!effect) return;
+    if (effect in engine) {
+      const method = engine[effect];
+      if (typeof method === "function") {
+        await method.call(engine);
+        return;
+      }
+    }
+    await engine.play(effect);
+  }, [engine, effect]);
+  const actions = useMemo(
+    () => ({
+      tap: (intensity) => engine.tap(intensity),
+      doubleTap: (intensity) => engine.doubleTap(intensity),
+      longPress: (intensity) => engine.longPress(intensity),
+      success: () => engine.success(),
+      warning: () => engine.warning(),
+      error: () => engine.error(),
+      selection: () => engine.selection(),
+      toggle: (on) => engine.toggle(on),
+      play: (pattern) => engine.play(pattern),
+      vibrate: (duration, intensity) => engine.vibrate(duration, intensity),
+      isSupported: engine.isSupported
+    }),
+    [engine]
+  );
+  if (effect === void 0) {
+    return actions;
+  }
+  return {
+    trigger,
+    isSupported: engine.isSupported,
+    engine
+  };
+}
+function useHapticGesture(config) {
+  const engine = useHapticEngine();
+  const pressTimer = useRef(null);
+  const isLongPress = useRef(false);
+  const threshold = config.longPressThreshold ?? 500;
+  const playEffect = useCallback(
+    async (effect) => {
+      if (effect in engine) {
+        const method = engine[effect];
+        if (typeof method === "function") {
+          await method.call(engine);
+          return;
+        }
+      }
+      await engine.play(effect);
+    },
+    [engine]
+  );
+  const onPointerDown = useCallback(() => {
+    isLongPress.current = false;
+    if (config.onLongPress) {
+      pressTimer.current = setTimeout(() => {
+        isLongPress.current = true;
+        if (config.onLongPress) {
+          playEffect(config.onLongPress);
+        }
+      }, threshold);
+    }
+  }, [config.onLongPress, threshold, playEffect]);
+  const onPointerUp = useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+    if (!isLongPress.current && config.onTap) {
+      playEffect(config.onTap);
+    }
+  }, [config.onTap, playEffect]);
+  const onPointerCancel = useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+  }, []);
+  const onPointerEnter = useCallback(() => {
+    if (config.onHover) {
+      playEffect(config.onHover);
+    }
+  }, [config.onHover, playEffect]);
+  return {
+    onPointerDown,
+    onPointerUp,
+    onPointerCancel,
+    ...config.onHover ? { onPointerEnter } : {}
+  };
+}
+function HapticButton({
+  effect = "tap",
+  pattern,
+  onClick,
+  children,
+  ...props
+}) {
+  const { trigger } = useHaptic(pattern ?? effect);
+  const handleClick = async (e) => {
+    await trigger();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx("button", { onClick: handleClick, ...props, children });
+}
+
+export { HapticButton, HapticProvider, useHaptic, useHapticEngine, useHapticGesture };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/haptic-provider.tsx","../src/hooks/use-haptic.ts","../src/hooks/use-haptic-gesture.ts","../src/components/haptic-button.tsx"],"names":["useMemo","useCallback","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext, useContext, useMemo } from 'react';\nimport { HapticEngine } from '@hapticjs/core';\nimport type { HapticConfig } from '@hapticjs/core';\n\nexport interface HapticContextValue {\n  engine: HapticEngine;\n}\n\nconst HapticContext = createContext<HapticContextValue | null>(null);\n\nexport interface HapticProviderProps {\n  config?: Partial<HapticConfig>;\n  engine?: HapticEngine;\n  children: React.ReactNode;\n}\n\n/**\n * Provides a shared HapticEngine to all child components.\n *\n * Usage:\n *   <HapticProvider config={{ intensity: 0.8 }}>\n *     <App />\n *   </HapticProvider>\n */\nexport function HapticProvider({ config, engine, children }: HapticProviderProps) {\n  const value = useMemo<HapticContextValue>(() => {\n    if (engine) return { engine };\n    return { engine: HapticEngine.create(config) };\n  }, [engine, config]);\n\n  return (\n    <HapticContext.Provider value={value}>\n      {children}\n    </HapticContext.Provider>\n  );\n}\n\n/** Get the HapticEngine from context, or create a default one */\nexport function useHapticEngine(): HapticEngine {\n  const context = useContext(HapticContext);\n  if (context) return context.engine;\n\n  // No provider — return the default singleton\n  return HapticEngine.create();\n}\n","import { useCallback, useMemo } from 'react';\nimport type { HapticPattern, HapticStep, SemanticEffect } from '@hapticjs/core';\nimport { useHapticEngine } from '../context/haptic-provider';\n\nexport interface UseHapticReturn {\n  /** Trigger the specified effect */\n  trigger: () => Promise<void>;\n  /** Whether haptics are supported on this device */\n  isSupported: boolean;\n  /** The underlying engine instance */\n  engine: ReturnType<typeof useHapticEngine>;\n}\n\nexport interface UseHapticActions {\n  tap: (intensity?: number) => Promise<void>;\n  doubleTap: (intensity?: number) => Promise<void>;\n  longPress: (intensity?: number) => Promise<void>;\n  success: () => Promise<void>;\n  warning: () => Promise<void>;\n  error: () => Promise<void>;\n  selection: () => Promise<void>;\n  toggle: (on: boolean) => Promise<void>;\n  play: (pattern: string | HapticPattern | HapticStep[]) => Promise<void>;\n  vibrate: (duration: number, intensity?: number) => Promise<void>;\n  isSupported: boolean;\n}\n\n/**\n * React hook for haptic feedback.\n *\n * With a preset:\n *   const { trigger, isSupported } = useHaptic('success');\n *   <button onClick={trigger}>Yay!</button>\n *\n * Without preset (full API):\n *   const haptic = useHaptic();\n *   haptic.tap();\n *   haptic.play('~~..##');\n */\nexport function useHaptic(): UseHapticActions;\nexport function useHaptic(effect: SemanticEffect | string): UseHapticReturn;\nexport function useHaptic(effect?: SemanticEffect | string): UseHapticReturn | UseHapticActions {\n  const engine = useHapticEngine();\n\n  const trigger = useCallback(async () => {\n    if (!effect) return;\n\n    // Check if it's a semantic effect\n    if (effect in engine) {\n      const method = engine[effect as keyof typeof engine];\n      if (typeof method === 'function') {\n        await (method as () => Promise<void>).call(engine);\n        return;\n      }\n    }\n\n    // Try as HPL pattern\n    await engine.play(effect);\n  }, [engine, effect]);\n\n  const actions = useMemo<UseHapticActions>(\n    () => ({\n      tap: (intensity?: number) => engine.tap(intensity),\n      doubleTap: (intensity?: number) => engine.doubleTap(intensity),\n      longPress: (intensity?: number) => engine.longPress(intensity),\n      success: () => engine.success(),\n      warning: () => engine.warning(),\n      error: () => engine.error(),\n      selection: () => engine.selection(),\n      toggle: (on: boolean) => engine.toggle(on),\n      play: (pattern: string | HapticPattern | HapticStep[]) => engine.play(pattern),\n      vibrate: (duration: number, intensity?: number) => engine.vibrate(duration, intensity),\n      isSupported: engine.isSupported,\n    }),\n    [engine],\n  );\n\n  if (effect === undefined) {\n    return actions;\n  }\n\n  return {\n    trigger,\n    isSupported: engine.isSupported,\n    engine,\n  };\n}\n","import { useCallback, useRef } from 'react';\nimport type { SemanticEffect } from '@hapticjs/core';\nimport { useHapticEngine } from '../context/haptic-provider';\n\nexport interface HapticGestureConfig {\n  /** Effect to play on tap/click */\n  onTap?: SemanticEffect | string;\n  /** Effect to play on long press (>500ms) */\n  onLongPress?: SemanticEffect | string;\n  /** Effect to play on pointer enter (hover) */\n  onHover?: SemanticEffect | string;\n  /** Long press threshold in ms */\n  longPressThreshold?: number;\n}\n\n/**\n * Hook that binds haptic feedback to pointer/touch gestures.\n *\n * Usage:\n *   const gestureProps = useHapticGesture({\n *     onTap: 'tap',\n *     onLongPress: 'heavy',\n *   });\n *   <div {...gestureProps}>Press me</div>\n */\nexport function useHapticGesture(config: HapticGestureConfig) {\n  const engine = useHapticEngine();\n  const pressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isLongPress = useRef(false);\n  const threshold = config.longPressThreshold ?? 500;\n\n  const playEffect = useCallback(\n    async (effect: SemanticEffect | string) => {\n      if (effect in engine) {\n        const method = engine[effect as keyof typeof engine];\n        if (typeof method === 'function') {\n          await (method as () => Promise<void>).call(engine);\n          return;\n        }\n      }\n      await engine.play(effect);\n    },\n    [engine],\n  );\n\n  const onPointerDown = useCallback(() => {\n    isLongPress.current = false;\n\n    if (config.onLongPress) {\n      pressTimer.current = setTimeout(() => {\n        isLongPress.current = true;\n        if (config.onLongPress) {\n          playEffect(config.onLongPress);\n        }\n      }, threshold);\n    }\n  }, [config.onLongPress, threshold, playEffect]);\n\n  const onPointerUp = useCallback(() => {\n    if (pressTimer.current) {\n      clearTimeout(pressTimer.current);\n      pressTimer.current = null;\n    }\n\n    if (!isLongPress.current && config.onTap) {\n      playEffect(config.onTap);\n    }\n  }, [config.onTap, playEffect]);\n\n  const onPointerCancel = useCallback(() => {\n    if (pressTimer.current) {\n      clearTimeout(pressTimer.current);\n      pressTimer.current = null;\n    }\n  }, []);\n\n  const onPointerEnter = useCallback(() => {\n    if (config.onHover) {\n      playEffect(config.onHover);\n    }\n  }, [config.onHover, playEffect]);\n\n  return {\n    onPointerDown,\n    onPointerUp,\n    onPointerCancel,\n    ...(config.onHover ? { onPointerEnter } : {}),\n  };\n}\n","import type { SemanticEffect } from '@hapticjs/core';\nimport { useHaptic } from '../hooks/use-haptic';\n\nexport interface HapticButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Haptic effect to trigger on click */\n  effect?: SemanticEffect | string;\n  /** HPL pattern string to play on click */\n  pattern?: string;\n}\n\n/**\n * Button component with built-in haptic feedback.\n *\n * Usage:\n *   <HapticButton effect=\"tap\">Click me</HapticButton>\n *   <HapticButton pattern=\"~~..##\">Custom feel</HapticButton>\n */\nexport function HapticButton({\n  effect = 'tap',\n  pattern,\n  onClick,\n  children,\n  ...props\n}: HapticButtonProps) {\n  const { trigger } = useHaptic(pattern ?? effect);\n\n  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    await trigger();\n    onClick?.(e);\n  };\n\n  return (\n    <button onClick={handleClick} {...props}>\n      {children}\n    </button>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@hapticjs/react",
+  "version": "0.1.0",
+  "description": "React hooks and components for Feelback haptic engine",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "@hapticjs/core": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@hapticjs/core": "0.1.0"
+  },
+  "keywords": [
+    "haptics",
+    "react",
+    "hooks",
+    "vibration",
+    "haptic-feedback"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}