@papernote/ui/dist/context/MobileContext.d.ts

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

import React, { ReactNode } from 'react';
import { Breakpoint, Orientation, ViewportSize } from '../hooks/useResponsive';
/**
 * Mobile context value interface
 *
 * Provides comprehensive responsive state for the entire application.
 */
export interface MobileContextValue {
    /** True when viewport width < 768px */
    isMobile: boolean;
    /** True when viewport width is 768px - 1023px */
    isTablet: boolean;
    /** True when viewport width >= 1024px */
    isDesktop: boolean;
    /** True when device supports touch input */
    isTouchDevice: boolean;
    /** Current Tailwind breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' */
    breakpoint: Breakpoint;
    /** Current orientation: 'portrait' | 'landscape' */
    orientation: Orientation;
    /** Current viewport dimensions */
    viewport: ViewportSize;
    /** Safe area insets for notched devices */
    safeAreaInsets: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    /** True when mobile OR touch device (useful for UI decisions) */
    useMobileUI: boolean;
}
/**
 * Mobile context
 */
declare const MobileContext: React.Context<MobileContextValue>;
/**
 * MobileProvider props
 */
export interface MobileProviderProps {
    /** Child components that will have access to mobile context */
    children: ReactNode;
    /**
     * Force mobile UI mode regardless of device detection.
     * Useful for testing or forcing mobile layout on tablets.
     */
    forceMobileUI?: boolean;
    /**
     * Force desktop UI mode regardless of device detection.
     * Useful for testing or forcing desktop layout on mobile.
     */
    forceDesktopUI?: boolean;
}
/**
 * MobileProvider - Provides responsive state to the entire application
 *
 * Wrap your application with MobileProvider to enable auto-responsive
 * behavior in notebook-ui components.
 *
 * @example Basic usage
 * ```tsx
 * import { MobileProvider } from 'notebook-ui';
 *
 * function App() {
 *   return (
 *     <MobileProvider>
 *       <YourApplication />
 *     </MobileProvider>
 *   );
 * }
 * ```
 *
 * @example Force mobile UI for testing
 * ```tsx
 * <MobileProvider forceMobileUI>
 *   <YourApplication />
 * </MobileProvider>
 * ```
 */
export declare function MobileProvider({ children, forceMobileUI, forceDesktopUI, }: MobileProviderProps): import("react/jsx-runtime").JSX.Element;
/**
 * useMobileContext - Hook to access mobile responsive state
 *
 * Must be used within a MobileProvider. Returns comprehensive
 * responsive state for making UI decisions.
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const { isMobile, useMobileUI, breakpoint } = useMobileContext();
 *
 *   return useMobileUI ? <MobileView /> : <DesktopView />;
 * }
 * ```
 */
export declare function useMobileContext(): MobileContextValue;
/**
 * withMobileContext - HOC to inject mobile context as props
 *
 * For class components or when you prefer props over hooks.
 *
 * @example
 * ```tsx
 * interface Props {
 *   mobile: MobileContextValue;
 * }
 *
 * class MyComponent extends React.Component<Props> {
 *   render() {
 *     const { isMobile } = this.props.mobile;
 *     return isMobile ? <Mobile /> : <Desktop />;
 *   }
 * }
 *
 * export default withMobileContext(MyComponent);
 * ```
 */
export declare function withMobileContext<P extends {
    mobile: MobileContextValue;
}>(Component: React.ComponentType<P>): {
    (props: Omit<P, "mobile">): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
/**
 * MobileOnly - Renders children only on mobile devices
 *
 * @example
 * ```tsx
 * <MobileOnly>
 *   <BottomNavigation items={navItems} />
 * </MobileOnly>
 * ```
 */
export declare function MobileOnly({ children }: {
    children: ReactNode;
}): import("react/jsx-runtime").JSX.Element | null;
/**
 * DesktopOnly - Renders children only on desktop devices
 *
 * @example
 * ```tsx
 * <DesktopOnly>
 *   <Sidebar items={navItems} />
 * </DesktopOnly>
 * ```
 */
export declare function DesktopOnly({ children }: {
    children: ReactNode;
}): import("react/jsx-runtime").JSX.Element | null;
/**
 * Responsive - Renders different content based on device type
 *
 * @example
 * ```tsx
 * <Responsive
 *   mobile={<MobileNavigation />}
 *   tablet={<TabletNavigation />}
 *   desktop={<DesktopNavigation />}
 * />
 * ```
 */
export declare function Responsive({ mobile, tablet, desktop, }: {
    mobile?: ReactNode;
    tablet?: ReactNode;
    desktop?: ReactNode;
}): import("react/jsx-runtime").JSX.Element;
export default MobileContext;
//# sourceMappingURL=MobileContext.d.ts.map