demo2

app/hooks/useFocusTrap.ts

@@ -0,0 +1,63 @@
+import { useEffect, RefObject } from 'react';
+
+/**
+ * Hook to trap focus within a container element
+ * Useful for modals, drawers, and overlays
+ * 
+ * @param containerRef - Reference to the container element
+ * @param isActive - Whether the focus trap is active
+ */
+export function useFocusTrap(
+  containerRef: RefObject<HTMLElement>,
+  isActive: boolean
+) {
+  useEffect(() => {
+    if (!isActive || !containerRef.current) return;
+
+    const container = containerRef.current;
+    
+    // Get all focusable elements
+    const focusableElements = container.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    // Store the element that had focus before the trap
+    const previouslyFocusedElement = document.activeElement as HTMLElement;
+
+    // Focus the first element
+    firstElement.focus();
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+
+    container.addEventListener('keydown', handleTabKey);
+
+    // Cleanup: restore focus to previously focused element
+    return () => {
+      container.removeEventListener('keydown', handleTabKey);
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+      }
+    };
+  }, [containerRef, isActive]);
+}

app/hooks/useMediaQuery.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to detect media query matches
+ * @param query - CSS media query string
+ * @returns boolean indicating if the query matches
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    
+    // Set initial value
+    setMatches(mediaQuery.matches);
+
+    // Create event listener
+    const handler = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Add listener
+    mediaQuery.addEventListener('change', handler);
+
+    // Cleanup
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}
+
+/**
+ * Hook to detect current breakpoint
+ * @returns current breakpoint name
+ */
+export function useBreakpoint() {
+  const isXs = useMediaQuery('(max-width: 639px)');
+  const isSm = useMediaQuery('(min-width: 640px) and (max-width: 767px)');
+  const isMd = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
+  const isLg = useMediaQuery('(min-width: 1024px) and (max-width: 1279px)');
+  const isXl = useMediaQuery('(min-width: 1280px) and (max-width: 1535px)');
+  const is2Xl = useMediaQuery('(min-width: 1536px)');
+
+  if (isXs) return 'xs';
+  if (isSm) return 'sm';
+  if (isMd) return 'md';
+  if (isLg) return 'lg';
+  if (isXl) return 'xl';
+  if (is2Xl) return '2xl';
+  
+  return 'lg'; // default
+}
+
+/**
+ * Hook to detect if viewport is mobile size
+ * @returns boolean indicating if viewport is mobile
+ */
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 767px)');
+}
+
+/**
+ * Hook to detect if viewport is tablet size
+ * @returns boolean indicating if viewport is tablet
+ */
+export function useIsTablet(): boolean {
+  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
+}
+
+/**
+ * Hook to detect if viewport is desktop size
+ * @returns boolean indicating if viewport is desktop
+ */
+export function useIsDesktop(): boolean {
+  return useMediaQuery('(min-width: 1024px)');
+}