@papernote/ui/dist/hooks/useResponsive.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

/**
 * Tailwind breakpoint values in pixels
 */
export declare const BREAKPOINTS: {
    readonly xs: 0;
    readonly sm: 640;
    readonly md: 768;
    readonly lg: 1024;
    readonly xl: 1280;
    readonly '2xl': 1536;
};
export type Breakpoint = keyof typeof BREAKPOINTS;
/**
 * Viewport size state
 */
export interface ViewportSize {
    width: number;
    height: number;
}
/**
 * Orientation type
 */
export type Orientation = 'portrait' | 'landscape';
/**
 * useViewportSize - Returns current viewport dimensions
 *
 * Updates on window resize with debouncing for performance.
 * SSR-safe with sensible defaults.
 *
 * @example
 * const { width, height } = useViewportSize();
 * console.log(`Viewport: ${width}x${height}`);
 */
export declare function useViewportSize(): ViewportSize;
/**
 * useBreakpoint - Returns the current Tailwind breakpoint
 *
 * Automatically updates when viewport crosses breakpoint thresholds.
 *
 * @example
 * const breakpoint = useBreakpoint();
 * // Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 */
export declare function useBreakpoint(): Breakpoint;
/**
 * useMediaQuery - React hook for CSS media queries
 *
 * SSR-safe implementation that returns false during SSR and
 * updates reactively when media query match state changes.
 *
 * @param query - CSS media query string (e.g., '(max-width: 768px)')
 * @returns boolean indicating if the media query matches
 *
 * @example
 * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 * const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 * const isPortrait = useMediaQuery('(orientation: portrait)');
 */
export declare function useMediaQuery(query: string): boolean;
/**
 * useIsMobile - Returns true when viewport is mobile-sized (< 768px)
 *
 * @example
 * const isMobile = useIsMobile();
 * return isMobile ? <MobileNav /> : <DesktopNav />;
 */
export declare function useIsMobile(): boolean;
/**
 * useIsTablet - Returns true when viewport is tablet-sized (768px - 1023px)
 *
 * @example
 * const isTablet = useIsTablet();
 */
export declare function useIsTablet(): boolean;
/**
 * useIsDesktop - Returns true when viewport is desktop-sized (>= 1024px)
 *
 * @example
 * const isDesktop = useIsDesktop();
 */
export declare function useIsDesktop(): boolean;
/**
 * useIsTouchDevice - Detects if the device supports touch input
 *
 * Uses multiple detection methods for reliability:
 * - Touch event support
 * - Pointer coarse media query
 * - Max touch points
 *
 * @example
 * const isTouchDevice = useIsTouchDevice();
 * // Show swipe hints on touch devices
 */
export declare function useIsTouchDevice(): boolean;
/**
 * useOrientation - Returns current screen orientation
 *
 * @returns 'portrait' | 'landscape'
 *
 * @example
 * const orientation = useOrientation();
 * // Adjust layout based on orientation
 */
export declare function useOrientation(): Orientation;
/**
 * useBreakpointValue - Returns different values based on breakpoint
 *
 * Mobile-first: Returns the value for the current breakpoint or the
 * closest smaller breakpoint that has a value defined.
 *
 * @param values - Object mapping breakpoints to values
 * @param defaultValue - Fallback value if no breakpoint matches
 *
 * @example
 * const columns = useBreakpointValue({ xs: 1, sm: 2, lg: 4 }, 1);
 * // Returns 1 on xs, 2 on sm/md, 4 on lg/xl/2xl
 *
 * const padding = useBreakpointValue({ xs: 'p-2', md: 'p-4', xl: 'p-8' });
 */
export declare function useBreakpointValue<T>(values: Partial<Record<Breakpoint, T>>, defaultValue?: T): T | undefined;
/**
 * useResponsiveCallback - Returns a memoized callback that receives responsive info
 *
 * Useful for callbacks that need to behave differently based on viewport.
 *
 * @example
 * const handleClick = useResponsiveCallback((isMobile) => {
 *   if (isMobile) {
 *     openBottomSheet();
 *   } else {
 *     openModal();
 *   }
 * });
 */
export declare function useResponsiveCallback<T extends (...args: any[]) => any>(callback: (isMobile: boolean, isTablet: boolean, isDesktop: boolean) => T): T;
/**
 * useSafeAreaInsets - Returns safe area insets for notched devices
 *
 * Uses CSS environment variables (env(safe-area-inset-*)) to get
 * safe area dimensions for devices with notches or home indicators.
 *
 * @example
 * const { top, bottom } = useSafeAreaInsets();
 * // Add padding-bottom for home indicator
 */
export declare function useSafeAreaInsets(): {
    top: number;
    right: number;
    bottom: number;
    left: number;
};
/**
 * usePrefersMobile - Checks if user prefers reduced data/animations (mobile-friendly)
 *
 * Combines multiple preferences that might indicate mobile/low-power usage.
 */
export declare function usePrefersMobile(): boolean;
//# sourceMappingURL=useResponsive.d.ts.map