@bearmenu/ui 0.1.0

package/src/hooks/use-haptic.ts

@@ -0,0 +1,118 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type HapticStyle = "light" | "medium" | "heavy" | "success" | "warning" | "error" | "selection";
+
+interface HapticAPI {
+  isSupported: boolean;
+  platform: "ios" | "android" | "desktop" | "unknown";
+  trigger: (style: HapticStyle) => void;
+}
+
+export const useHaptic = (): HapticAPI => {
+  const [platform, setPlatform] = useState<"ios" | "android" | "desktop" | "unknown">("unknown");
+  const [isSupported, setIsSupported] = useState(false);
+
+  useEffect(() => {
+    // Detect platform
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOS = /iphone|ipad|ipod/.test(userAgent);
+    const isAndroid = /android/.test(userAgent);
+
+    if (isIOS) {
+      setPlatform("ios");
+    } else if (isAndroid) {
+      setPlatform("android");
+    } else if (/windows|mac|linux/.test(userAgent)) {
+      setPlatform("desktop");
+    }
+
+    // Check if any haptic API is available
+    const hasVibration = "vibrate" in navigator;
+    const hasTelegram = typeof window !== "undefined" && window.Telegram?.WebApp?.HapticFeedback;
+
+    setIsSupported(hasVibration || !!hasTelegram);
+  }, []);
+
+  const trigger = (style: HapticStyle) => {
+    // Try Telegram API first (works on both iOS and Android in Telegram)
+    if (typeof window !== "undefined" && window.Telegram?.WebApp?.HapticFeedback) {
+      triggerTelegramHaptic(style);
+      return;
+    }
+
+    // Fallback to Vibration API (Android, some browsers)
+    if ("vibrate" in navigator) {
+      triggerVibrationAPI(style);
+      return;
+    }
+
+    // No haptic support - silently fail
+    console.debug("Haptic feedback not supported on this device");
+  };
+
+  return { isSupported, platform, trigger };
+};
+
+// Telegram Haptic API implementation
+function triggerTelegramHaptic(style: HapticStyle) {
+  const telegram = window.Telegram?.WebApp?.HapticFeedback;
+  if (!telegram) return;
+
+  switch (style) {
+    case "light":
+      telegram.impactOccurred("light");
+      break;
+    case "medium":
+      telegram.impactOccurred("medium");
+      break;
+    case "heavy":
+      telegram.impactOccurred("heavy");
+      break;
+    case "success":
+      telegram.notificationOccurred("success");
+      break;
+    case "warning":
+      telegram.notificationOccurred("warning");
+      break;
+    case "error":
+      telegram.notificationOccurred("error");
+      break;
+    case "selection":
+      telegram.selectionChanged();
+      break;
+  }
+}
+
+// Vibration API implementation (Android)
+function triggerVibrationAPI(style: HapticStyle) {
+  if (!("vibrate" in navigator)) return;
+
+  const patterns: Record<HapticStyle, number | number[]> = {
+    light: 10,
+    medium: 20,
+    heavy: 50,
+    success: [10, 50, 10],
+    warning: [20, 100, 20],
+    error: [50, 100, 50],
+    selection: 5,
+  };
+
+  navigator.vibrate(patterns[style]);
+}
+
+// Extend Window interface for TypeScript
+declare global {
+  interface Window {
+    Telegram?: {
+      WebApp?: {
+        HapticFeedback?: {
+          impactOccurred: (style: "light" | "medium" | "heavy") => void;
+          notificationOccurred: (type: "success" | "warning" | "error") => void;
+          selectionChanged: () => void;
+        };
+      };
+    };
+  }
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-mounted-theme.ts

@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from "react";
+import { useTheme } from "next-themes";
+
+// A stable no-op subscribe that never notifies — we only care about the snapshot
+const subscribe = () => () => {};
+
+// Client: always mounted
+const getClientSnapshot = () => true;
+
+// Server: never mounted
+const getServerSnapshot = () => false;
+
+export function useMountedTheme() {
+  const mounted = useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
+  const { resolvedTheme } = useTheme();
+  return {
+    mounted,
+    isDark: mounted && resolvedTheme === "dark",
+  };
+}

package/src/hooks/use-sticky.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Hook to detect when a sticky element becomes "stuck"
+ * Uses IntersectionObserver with a sentinel element to detect sticky state
+ *
+ * @returns An object with:
+ * - isSticky: boolean indicating if element is currently stuck
+ * - ref: ref to attach to the sticky element
+ * - sentinelRef: ref for the sentinel element (place 1px above sticky element)
+ */
+export function useSticky() {
+  const [isSticky, setIsSticky] = useState(false);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const stickyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // When sentinel is not visible (scrolled past), element is stuck
+        setIsSticky(!entry.isIntersecting);
+      },
+      {
+        threshold: [0],
+        // Negative top margin to detect when element reaches sticky position
+        rootMargin: "-1px 0px 0px 0px",
+      }
+    );
+
+    observer.observe(sentinel);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return {
+    isSticky,
+    ref: stickyRef,
+    sentinelRef,
+  };
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}