airyhooks 0.1.0-beta.0

package/dist/utils/get-hook-template.js

@@ -0,0 +1,1096 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// Generated by: pnpm --filter @airyhooks/hooks build:templates
+// Source: packages/hooks/src/*/use*.ts
+const templates = {
+    useBoolean: `import { useCallback, useState } from "react";
+
+/**
+ * Alias for useToggle with boolean semantics.
+ *
+ * @param initialValue - Initial boolean value (default: false)
+ * @returns Tuple of [value, { setTrue, setFalse, toggle }]
+ *
+ * @example
+ * const [isEnabled, handlers] = useBoolean(false);
+ *
+ * return (
+ *   <>
+ *     <button onClick={handlers.toggle}>Toggle</button>
+ *     <button onClick={handlers.setTrue}>Enable</button>
+ *     <button onClick={handlers.setFalse}>Disable</button>
+ *   </>
+ * );
+ */
+export function useBoolean(initialValue = false): [
+  boolean,
+  {
+    setFalse: () => void;
+    setTrue: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, toggle, setValue] = useToggle(initialValue);
+
+  return [
+    value,
+    {
+      setFalse: useCallback(() => {
+        setValue(false);
+      }, [setValue]),
+      setTrue: useCallback(() => {
+        setValue(true);
+      }, [setValue]),
+      toggle,
+    },
+  ];
+}
+
+/**
+ * Toggle a boolean value with a callback.
+ *
+ * @param initialValue - Initial boolean value (default: false)
+ * @returns Tuple of [value, toggle, setValue]
+ *
+ * @example
+ * const [isOpen, toggle] = useToggle(false);
+ *
+ * return (
+ *   <>
+ *     <button onClick={toggle}>Toggle</button>
+ *     {isOpen && <div>Content</div>}
+ *   </>
+ * );
+ */
+export function useToggle(
+  initialValue = false,
+): [boolean, () => void, (value: boolean) => void] {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+
+  return [value, toggle, setValue];
+}
+`,
+    useClickAway: `import { useEffect } from "react";
+
+/**
+ * Detects clicks outside of a target element.
+ *
+ * @param ref - React ref to the target element
+ * @param callback - Function to call when click outside is detected
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * useClickAway(ref, () => {
+ *   setIsOpen(false);
+ * });
+ *
+ * return <div ref={ref}>Content</div>;
+ */
+export function useClickAway<T extends HTMLElement>(
+  ref: React.RefObject<null | T>,
+  callback: () => void,
+): void {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const element = ref.current;
+      if (element && !element.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, callback]);
+}
+`,
+    useCounter: `import { useCallback, useState } from "react";
+
+/**
+ * Manages numeric state with increment, decrement, reset, and set methods.
+ *
+ * @param initialValue - Initial numeric value (default: 0)
+ * @returns Tuple of [value, { increment, decrement, reset, set }]
+ *
+ * @example
+ * const [count, { increment, decrement, reset }] = useCounter(0);
+ *
+ * return (
+ *   <>
+ *     <p>Count: {count}</p>
+ *     <button onClick={() => increment()}>+1</button>
+ *     <button onClick={() => decrement()}>-1</button>
+ *     <button onClick={() => increment(5)}>+5</button>
+ *     <button onClick={() => reset()}>Reset</button>
+ *   </>
+ * );
+ */
+export function useCounter(
+  initialValue = 0,
+): [
+  number,
+  {
+    increment: (amount?: number) => void;
+    decrement: (amount?: number) => void;
+    reset: () => void;
+    set: (value: number | ((prev: number) => number)) => void;
+  },
+] {
+  const [count, setCount] = useState<number>(initialValue);
+
+  const increment = useCallback((amount = 1) => {
+    setCount((prev) => prev + amount);
+  }, []);
+
+  const decrement = useCallback((amount = 1) => {
+    setCount((prev) => prev - amount);
+  }, []);
+
+  const reset = useCallback(() => {
+    setCount(initialValue);
+  }, [initialValue]);
+
+  const set = useCallback((value: number | ((prev: number) => number)) => {
+    setCount(value);
+  }, []);
+
+  return [
+    count,
+    {
+      increment,
+      decrement,
+      reset,
+      set,
+    },
+  ];
+}
+`,
+    useDebounce: `import { useEffect, useState } from "react";
+
+/**
+ * Debounces a value by delaying updates until after the specified delay.
+ *
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (default: 500ms)
+ * @returns The debounced value
+ *
+ * @example
+ * const [search, setSearch] = useState("");
+ * const debouncedSearch = useDebounce(search, 300);
+ *
+ * useEffect(() => {
+ *   // This effect runs 300ms after the user stops typing
+ *   fetchResults(debouncedSearch);
+ * }, [debouncedSearch]);
+ */
+export function useDebounce<T>(value: T, delay = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+`,
+    useHover: `import { useCallback, useRef, useState } from "react";
+
+/**
+ * Tracks mouse hover state on a DOM element via ref.
+ *
+ * @returns Tuple of [isHovered, ref]
+ *
+ * @example
+ * const [isHovered, ref] = useHover();
+ *
+ * return (
+ *   <div
+ *     ref={ref}
+ *     style={{
+ *       backgroundColor: isHovered ? "blue" : "gray",
+ *     }}
+ *   >
+ *     Hover me!
+ *   </div>
+ * );
+ */
+export function useHover<T extends HTMLElement = HTMLElement>(): [
+  boolean,
+  React.RefObject<T>,
+] {
+  const ref = useRef<T>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  // Attach event listeners to the ref
+  const setRef = useCallback(
+    (element: T | null) => {
+      if (ref.current) {
+        ref.current.removeEventListener("mouseenter", handleMouseEnter);
+        ref.current.removeEventListener("mouseleave", handleMouseLeave);
+      }
+
+      if (element) {
+        element.addEventListener("mouseenter", handleMouseEnter);
+        element.addEventListener("mouseleave", handleMouseLeave);
+      }
+
+      (ref as React.MutableRefObject<T | null>).current = element;
+    },
+    [handleMouseEnter, handleMouseLeave],
+  );
+
+  // Return a proxy ref that updates the internal ref
+  return [
+    isHovered,
+    {
+      current: ref.current,
+      get current() {
+        return ref.current;
+      },
+      set current(element: T | null) {
+        setRef(element);
+      },
+    } as React.RefObject<T>,
+  ];
+}
+`,
+    useInterval: `import { useEffect } from "react";
+
+/**
+ * Re-renders component at specified interval.
+ *
+ * @param callback - Function to call on each interval
+ * @param delay - Interval delay in milliseconds (null to pause)
+ *
+ * @example
+ * useInterval(() => {
+ *   setTime(new Date());
+ * }, 1000);
+ */
+export function useInterval(callback: () => void, delay: null | number): void {
+  useEffect(() => {
+    if (delay === null) return;
+
+    const interval = setInterval(callback, delay);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [callback, delay]);
+}
+
+/**
+ * Re-renders component after a timeout.
+ *
+ * @param callback - Function to call after timeout
+ * @param delay - Timeout delay in milliseconds
+ *
+ * @example
+ * useTimeout(() => {
+ *   console.log("Timeout completed");
+ * }, 2000);
+ */
+export function useTimeout(callback: () => void, delay: number): void {
+  useEffect(() => {
+    const timeout = setTimeout(callback, delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [callback, delay]);
+}
+`,
+    useKeyPress: `import { useEffect, useState } from "react";
+
+/**
+ * Detects if a specific keyboard key is currently pressed.
+ *
+ * @param targetKey - The key to detect (e.g., "Enter", "ArrowUp", " " for space)
+ * @returns Whether the key is currently pressed
+ *
+ * @example
+ * const isEnterPressed = useKeyPress("Enter");
+ * const isArrowUpPressed = useKeyPress("ArrowUp");
+ *
+ * return (
+ *   <div>
+ *     <p>Enter pressed: {isEnterPressed ? "Yes" : "No"}</p>
+ *     <p>Arrow Up pressed: {isArrowUpPressed ? "Yes" : "No"}</p>
+ *   </div>
+ * );
+ */
+export function useKeyPress(targetKey: string): boolean {
+  const [isKeyPressed, setIsKeyPressed] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === targetKey) {
+        setIsKeyPressed(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === targetKey) {
+        setIsKeyPressed(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [targetKey]);
+
+  return isKeyPressed;
+}
+`,
+    useLocalStorage: `import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Syncs state with localStorage, persisting across browser sessions.
+ *
+ * @param key - The localStorage key
+ * @param initialValue - The initial value (used if no stored value exists)
+ * @returns A tuple of [value, setValue, removeValue]
+ *
+ * @example
+ * const [theme, setTheme, removeTheme] = useLocalStorage("theme", "light");
+ *
+ * // Update the theme (automatically persisted)
+ * setTheme("dark");
+ *
+ * // Remove from localStorage
+ * removeTheme();
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: ((prev: T) => T) | T) => void, () => void] {
+  // Get initial value from localStorage or use provided initial value
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.warn(\`Error reading localStorage key "\${key}":\`, error);
+      return initialValue;
+    }
+  });
+
+  // Update localStorage when value changes
+  const setValue = useCallback(
+    (value: ((prev: T) => T) | T) => {
+      try {
+        setStoredValue((prev) => {
+          const valueToStore = value instanceof Function ? value(prev) : value;
+          if (typeof window !== "undefined") {
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+          return valueToStore;
+        });
+      } catch (error) {
+        console.warn(\`Error setting localStorage key "\${key}":\`, error);
+      }
+    },
+    [key],
+  );
+
+  // Remove from localStorage
+  const removeValue = useCallback(() => {
+    try {
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.warn(\`Error removing localStorage key "\${key}":\`, error);
+    }
+  }, [key, initialValue]);
+
+  // Listen for changes in other tabs/windows
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key && event.newValue !== null) {
+        try {
+          setStoredValue(JSON.parse(event.newValue) as T);
+        } catch (error) {
+          console.warn(\`Error parsing localStorage key "\${key}":\`, error);
+        }
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key]);
+
+  return [storedValue, setValue, removeValue];
+}
+`,
+    useMedia: `import { useEffect, useState } from "react";
+
+/**
+ * Reacts to CSS media query changes.
+ *
+ * @param query - CSS media query string (e.g., "(max-width: 768px)")
+ * @returns Whether the media query matches
+ *
+ * @example
+ * const isMobile = useMedia("(max-width: 768px)");
+ * const isDarkMode = useMedia("(prefers-color-scheme: dark)");
+ *
+ * return (
+ *   <div>
+ *     <p>Is mobile: {isMobile ? "Yes" : "No"}</p>
+ *     <p>Dark mode: {isDarkMode ? "Yes" : "No"}</p>
+ *   </div>
+ * );
+ */
+export function useMedia(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    // Check if window is defined (SSR safety)
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    try {
+      const mediaQueryList = window.matchMedia(query);
+
+      // Set initial value
+      setMatches(mediaQueryList.matches);
+
+      // Create listener function
+      const handleChange = (e: MediaQueryListEvent) => {
+        setMatches(e.matches);
+      };
+
+      // Modern browsers use addEventListener
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.addEventListener("change", handleChange);
+        return () => {
+          mediaQueryList.removeEventListener("change", handleChange);
+        };
+      } else {
+        // Fallback for older browsers
+        mediaQueryList.addListener(handleChange);
+        return () => {
+          mediaQueryList.removeListener(handleChange);
+        };
+      }
+    } catch (error) {
+      console.warn(\`Invalid media query: "\${query}"\`, error);
+      return;
+    }
+  }, [query]);
+
+  return matches;
+}
+`,
+    useMount: `import { useEffect, useRef } from "react";
+
+/**
+ * Calls a callback on component mount.
+ *
+ * @param callback - Function to call on mount
+ *
+ * @example
+ * useMount(() => {
+ *   console.log("Component mounted");
+ *   // Initialize resources
+ * });
+ */
+export function useMount(callback: () => void): void {
+  useEffect(callback, []);
+}
+
+/**
+ * Calls a callback on component unmount.
+ *
+ * @param callback - Function to call on unmount
+ *
+ * @example
+ * useUnmount(() => {
+ *   console.log("Component unmounting");
+ *   // Cleanup resources
+ * });
+ */
+export function useUnmount(callback: () => void): void {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    return () => {
+      callbackRef.current();
+    };
+  }, []);
+}
+`,
+    usePrevious: `import { useEffect, useRef } from "react";
+
+/**
+ * Tracks the previous value or prop.
+ *
+ * @param value - The current value to track
+ * @returns The previous value from the last render
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePrevious(count);
+ *
+ * useEffect(() => {
+ *   console.log(\`Current: \${count}, Previous: \${prevCount}\`);
+ * }, [count, prevCount]);
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>(undefined);
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
+`,
+    useScroll: `import { useCallback, useEffect, useRef, useState } from "react";
+
+interface ScrollPosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * Tracks scroll position of an element or the window.
+ *
+ * @param ref - Optional ref to an element. If not provided, tracks window scroll
+ * @returns Object with x and y scroll positions
+ *
+ * @example
+ * // Track window scroll
+ * const windowScroll = useScroll();
+ * console.log(windowScroll.x, windowScroll.y);
+ *
+ * // Track element scroll
+ * const [ref, elementScroll] = useScroll<HTMLDivElement>();
+ * return <div ref={ref}>Content</div>;
+ */
+export function useScroll(
+  ref?: React.RefObject<HTMLElement>,
+): ScrollPosition {
+  const [scroll, setScroll] = useState<ScrollPosition>({ x: 0, y: 0 });
+  const internalRef = useRef<HTMLElement | null>(null);
+
+  const handleScroll = useCallback(() => {
+    if (ref?.current) {
+      setScroll({
+        x: ref.current.scrollLeft,
+        y: ref.current.scrollTop,
+      });
+    } else if (typeof window !== "undefined") {
+      setScroll({
+        x: window.scrollX,
+        y: window.scrollY,
+      });
+    }
+  }, [ref]);
+
+  useEffect(() => {
+    // Set initial scroll position
+    handleScroll();
+
+    if (ref?.current) {
+      // Listen to element scroll
+      const target = ref.current;
+      target.addEventListener("scroll", handleScroll);
+      return () => {
+        target.removeEventListener("scroll", handleScroll);
+      };
+    } else if (typeof window !== "undefined") {
+      // Listen to window scroll
+      window.addEventListener("scroll", handleScroll);
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [ref, handleScroll]);
+
+  return scroll;
+}
+
+/**
+ * Tracks scroll position with ref attachment for element scroll.
+ *
+ * @returns Tuple of [ref, scrollPosition]
+ *
+ * @example
+ * const [ref, scroll] = useScrollElement<HTMLDivElement>();
+ *
+ * return (
+ *   <div
+ *     ref={ref}
+ *     style={{ height: "200px", overflow: "auto" }}
+ *   >
+ *     <p>Scroll position: X: {scroll.x}, Y: {scroll.y}</p>
+ *     {/* long content */}
+ *   </div>
+ * );
+ */
+export function useScrollElement<T extends HTMLElement = HTMLElement>(): [
+  React.RefObject<T>,
+  ScrollPosition,
+] {
+  const ref = useRef<T>(null);
+  const scroll = useScroll(ref);
+
+  return [ref, scroll];
+}
+`,
+    useScrollElement: `import { useCallback, useEffect, useRef, useState } from "react";
+
+interface ScrollPosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * Tracks scroll position of an element or the window.
+ *
+ * @param ref - Optional ref to an element. If not provided, tracks window scroll
+ * @returns Object with x and y scroll positions
+ *
+ * @example
+ * // Track window scroll
+ * const windowScroll = useScroll();
+ * console.log(windowScroll.x, windowScroll.y);
+ *
+ * // Track element scroll
+ * const [ref, elementScroll] = useScroll<HTMLDivElement>();
+ * return <div ref={ref}>Content</div>;
+ */
+export function useScroll(
+  ref?: React.RefObject<HTMLElement>,
+): ScrollPosition {
+  const [scroll, setScroll] = useState<ScrollPosition>({ x: 0, y: 0 });
+  const internalRef = useRef<HTMLElement | null>(null);
+
+  const handleScroll = useCallback(() => {
+    if (ref?.current) {
+      setScroll({
+        x: ref.current.scrollLeft,
+        y: ref.current.scrollTop,
+      });
+    } else if (typeof window !== "undefined") {
+      setScroll({
+        x: window.scrollX,
+        y: window.scrollY,
+      });
+    }
+  }, [ref]);
+
+  useEffect(() => {
+    // Set initial scroll position
+    handleScroll();
+
+    if (ref?.current) {
+      // Listen to element scroll
+      const target = ref.current;
+      target.addEventListener("scroll", handleScroll);
+      return () => {
+        target.removeEventListener("scroll", handleScroll);
+      };
+    } else if (typeof window !== "undefined") {
+      // Listen to window scroll
+      window.addEventListener("scroll", handleScroll);
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [ref, handleScroll]);
+
+  return scroll;
+}
+
+/**
+ * Tracks scroll position with ref attachment for element scroll.
+ *
+ * @returns Tuple of [ref, scrollPosition]
+ *
+ * @example
+ * const [ref, scroll] = useScrollElement<HTMLDivElement>();
+ *
+ * return (
+ *   <div
+ *     ref={ref}
+ *     style={{ height: "200px", overflow: "auto" }}
+ *   >
+ *     <p>Scroll position: X: {scroll.x}, Y: {scroll.y}</p>
+ *     {/* long content */}
+ *   </div>
+ * );
+ */
+export function useScrollElement<T extends HTMLElement = HTMLElement>(): [
+  React.RefObject<T>,
+  ScrollPosition,
+] {
+  const ref = useRef<T>(null);
+  const scroll = useScroll(ref);
+
+  return [ref, scroll];
+}
+`,
+    useSessionStorage: `import { useCallback, useState } from "react";
+
+/**
+ * Syncs state with sessionStorage, persisting only for the current session.
+ *
+ * @param key - The sessionStorage key
+ * @param initialValue - The initial value (used if no stored value exists)
+ * @returns A tuple of [value, setValue, removeValue]
+ *
+ * @example
+ * const [sessionData, setSessionData, removeSessionData] = useSessionStorage("session", "default");
+ *
+ * // Update the session data (automatically persisted)
+ * setSessionData("newData");
+ *
+ * // Remove from sessionStorage
+ * removeSessionData();
+ */
+export function useSessionStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: ((prev: T) => T) | T) => void, () => void] {
+  // Get initial value from sessionStorage or use provided initial value
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.sessionStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.warn(\`Error reading sessionStorage key "\${key}":\`, error);
+      return initialValue;
+    }
+  });
+
+  // Update sessionStorage when value changes
+  const setValue = useCallback(
+    (value: ((prev: T) => T) | T) => {
+      try {
+        setStoredValue((prev) => {
+          const valueToStore = value instanceof Function ? value(prev) : value;
+          if (typeof window !== "undefined") {
+            window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+          return valueToStore;
+        });
+      } catch (error) {
+        console.warn(\`Error setting sessionStorage key "\${key}":\`, error);
+      }
+    },
+    [key],
+  );
+
+  // Remove from sessionStorage
+  const removeValue = useCallback(() => {
+    try {
+      if (typeof window !== "undefined") {
+        window.sessionStorage.removeItem(key);
+      }
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.warn(\`Error removing sessionStorage key "\${key}":\`, error);
+    }
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}
+`,
+    useThrottle: `import { useEffect, useRef, useState } from "react";
+
+/**
+ * Throttles a value to update at most once per specified interval.
+ *
+ * @param value - The value to throttle
+ * @param interval - The throttle interval in milliseconds (default: 500ms)
+ * @returns The throttled value
+ *
+ * @example
+ * const [position, setPosition] = useState({ x: 0, y: 0 });
+ * const throttledPosition = useThrottle(position, 100);
+ *
+ * useEffect(() => {
+ *   // This effect runs at most every 100ms
+ *   updateCursor(throttledPosition);
+ * }, [throttledPosition]);
+ */
+export function useThrottle<T>(value: T, interval = 500): T {
+  const [throttledValue, setThrottledValue] = useState<T>(value);
+  const lastUpdated = useRef<number>(Date.now());
+
+  useEffect(() => {
+    const now = Date.now();
+    const elapsed = now - lastUpdated.current;
+
+    if (elapsed >= interval) {
+      lastUpdated.current = now;
+      setThrottledValue(value);
+    } else {
+      const timer = setTimeout(() => {
+        lastUpdated.current = Date.now();
+        setThrottledValue(value);
+      }, interval - elapsed);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [value, interval]);
+
+  return throttledValue;
+}
+`,
+    useTimeout: `import { useEffect } from "react";
+
+/**
+ * Re-renders component at specified interval.
+ *
+ * @param callback - Function to call on each interval
+ * @param delay - Interval delay in milliseconds (null to pause)
+ *
+ * @example
+ * useInterval(() => {
+ *   setTime(new Date());
+ * }, 1000);
+ */
+export function useInterval(callback: () => void, delay: null | number): void {
+  useEffect(() => {
+    if (delay === null) return;
+
+    const interval = setInterval(callback, delay);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [callback, delay]);
+}
+
+/**
+ * Re-renders component after a timeout.
+ *
+ * @param callback - Function to call after timeout
+ * @param delay - Timeout delay in milliseconds
+ *
+ * @example
+ * useTimeout(() => {
+ *   console.log("Timeout completed");
+ * }, 2000);
+ */
+export function useTimeout(callback: () => void, delay: number): void {
+  useEffect(() => {
+    const timeout = setTimeout(callback, delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [callback, delay]);
+}
+`,
+    useToggle: `import { useCallback, useState } from "react";
+
+/**
+ * Alias for useToggle with boolean semantics.
+ *
+ * @param initialValue - Initial boolean value (default: false)
+ * @returns Tuple of [value, { setTrue, setFalse, toggle }]
+ *
+ * @example
+ * const [isEnabled, handlers] = useBoolean(false);
+ *
+ * return (
+ *   <>
+ *     <button onClick={handlers.toggle}>Toggle</button>
+ *     <button onClick={handlers.setTrue}>Enable</button>
+ *     <button onClick={handlers.setFalse}>Disable</button>
+ *   </>
+ * );
+ */
+export function useBoolean(initialValue = false): [
+  boolean,
+  {
+    setFalse: () => void;
+    setTrue: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, toggle, setValue] = useToggle(initialValue);
+
+  return [
+    value,
+    {
+      setFalse: useCallback(() => {
+        setValue(false);
+      }, [setValue]),
+      setTrue: useCallback(() => {
+        setValue(true);
+      }, [setValue]),
+      toggle,
+    },
+  ];
+}
+
+/**
+ * Toggle a boolean value with a callback.
+ *
+ * @param initialValue - Initial boolean value (default: false)
+ * @returns Tuple of [value, toggle, setValue]
+ *
+ * @example
+ * const [isOpen, toggle] = useToggle(false);
+ *
+ * return (
+ *   <>
+ *     <button onClick={toggle}>Toggle</button>
+ *     {isOpen && <div>Content</div>}
+ *   </>
+ * );
+ */
+export function useToggle(
+  initialValue = false,
+): [boolean, () => void, (value: boolean) => void] {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+
+  return [value, toggle, setValue];
+}
+`,
+    useUnmount: `import { useEffect, useRef } from "react";
+
+/**
+ * Calls a callback on component mount.
+ *
+ * @param callback - Function to call on mount
+ *
+ * @example
+ * useMount(() => {
+ *   console.log("Component mounted");
+ *   // Initialize resources
+ * });
+ */
+export function useMount(callback: () => void): void {
+  useEffect(callback, []);
+}
+
+/**
+ * Calls a callback on component unmount.
+ *
+ * @param callback - Function to call on unmount
+ *
+ * @example
+ * useUnmount(() => {
+ *   console.log("Component unmounting");
+ *   // Cleanup resources
+ * });
+ */
+export function useUnmount(callback: () => void): void {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    return () => {
+      callbackRef.current();
+    };
+  }, []);
+}
+`,
+    useWindowSize: `import { useEffect, useState } from "react";
+
+interface WindowSize {
+  height: number | undefined;
+  width: number | undefined;
+}
+
+/**
+ * Tracks window dimensions.
+ *
+ * @returns Object with width and height of the window
+ *
+ * @example
+ * const { width, height } = useWindowSize();
+ *
+ * return (
+ *   <div>
+ *     Window size: {width}x{height}
+ *   </div>
+ * );
+ */
+export function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    height: undefined,
+    width: undefined,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    };
+
+    // Call once on mount
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowSize;
+}
+`,
+};
+export function getHookTemplate(hookName) {
+    const template = templates[hookName];
+    if (!template) {
+        throw new Error(`Template for hook "${hookName}" not found`);
+    }
+    return template;
+}
+//# sourceMappingURL=get-hook-template.js.map