@usefy/screen-recorder 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,1092 @@
+import * as react from 'react';
+import { ReactNode, FC } from 'react';
+import { ClassValue } from 'clsx';
+
+/**
+ * Possible states of the screen recording process
+ */
+type RecordingState$1 = "idle" | "requesting" | "countdown" | "recording" | "paused" | "stopped" | "error";
+/**
+ * Error codes for screen recording errors
+ */
+type ScreenRecorderErrorCode = "PERMISSION_DENIED" | "NOT_SUPPORTED" | "MEDIA_RECORDER_ERROR" | "STREAM_ENDED" | "NO_STREAM" | "ENCODING_ERROR" | "UNKNOWN";
+/**
+ * Error object for screen recording errors
+ */
+interface ScreenRecorderError {
+    /** Error code for programmatic handling */
+    code: ScreenRecorderErrorCode;
+    /** Human-readable error message */
+    message: string;
+    /** Original error if available */
+    originalError?: Error;
+}
+/**
+ * Result of a completed recording
+ */
+interface RecordingResult {
+    /** Recorded video blob */
+    blob: Blob;
+    /** Blob URL for preview/playback */
+    url: string;
+    /** Duration in seconds */
+    duration: number;
+    /** File size in bytes */
+    size: number;
+    /** MIME type */
+    mimeType: string;
+    /** Recording timestamp */
+    timestamp: Date;
+    /** Whether audio was included */
+    hasAudio: boolean;
+}
+/**
+ * Quality preset configuration
+ */
+interface QualityPreset {
+    /** Video bitrate in bits per second */
+    videoBitsPerSecond: number;
+    /** Video width (optional, uses source resolution if not specified) */
+    width?: number;
+    /** Video height (optional, uses source resolution if not specified) */
+    height?: number;
+    /** Frame rate */
+    frameRate?: number;
+}
+/**
+ * Quality option - can be a preset name or custom configuration
+ */
+type QualityOption = "low" | "medium" | "high" | QualityPreset;
+/**
+ * Audio configuration options
+ */
+interface AudioConfig {
+    /** Capture system/tab audio */
+    system?: boolean;
+    /** Capture microphone input */
+    microphone?: boolean;
+}
+/**
+ * Audio option - can be boolean or detailed configuration
+ */
+type AudioOption = boolean | AudioConfig;
+/**
+ * Position of the floating trigger button
+ */
+type TriggerPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/**
+ * Theme setting for the component
+ */
+type ThemeOption = "light" | "dark" | "system";
+/**
+ * Render mode for floating UI elements
+ */
+type RenderMode = "portal" | "inline";
+/**
+ * Props for the ScreenRecorder component
+ */
+interface ScreenRecorderProps {
+    /**
+     * Maximum recording duration in seconds
+     * Set to Infinity for unlimited duration
+     * @default 300 (5 minutes)
+     */
+    maxDuration?: number;
+    /**
+     * Countdown seconds before recording starts
+     * Set to false to disable countdown
+     * @default 3
+     */
+    countdown?: number | false;
+    /**
+     * Include audio in recording
+     * @default false
+     */
+    audio?: AudioOption;
+    /**
+     * Video quality settings
+     * @default 'medium'
+     */
+    quality?: QualityOption;
+    /**
+     * Output format
+     * @default 'webm'
+     */
+    format?: "webm" | "mp4";
+    /**
+     * MIME type for MediaRecorder
+     * @default 'video/webm;codecs=vp9'
+     */
+    mimeType?: string;
+    /**
+     * Position of the floating trigger button
+     * @default 'bottom-right'
+     */
+    position?: TriggerPosition;
+    /**
+     * Custom trigger button content
+     */
+    triggerContent?: ReactNode;
+    /**
+     * Show preview modal after recording
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Show timer during recording
+     * @default true
+     */
+    showTimer?: boolean;
+    /**
+     * Z-index for floating elements
+     * @default 9999
+     */
+    zIndex?: number;
+    /**
+     * Theme override
+     * @default 'system'
+     */
+    theme?: ThemeOption;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Default filename for download (without extension)
+     * Can be a string or a function that receives the timestamp
+     * @default 'screen-recording'
+     */
+    filename?: string | ((timestamp: Date) => string);
+    /**
+     * Called when recording starts
+     */
+    onRecordingStart?: () => void;
+    /**
+     * Called when recording stops with the result
+     */
+    onRecordingStop?: (result: RecordingResult) => void;
+    /**
+     * Called when recording is paused
+     */
+    onPause?: () => void;
+    /**
+     * Called when recording is resumed
+     */
+    onResume?: () => void;
+    /**
+     * Called when user downloads the recording
+     */
+    onDownload?: (result: RecordingResult) => void;
+    /**
+     * Called when an error occurs
+     */
+    onError?: (error: ScreenRecorderError) => void;
+    /**
+     * Called when user denies screen share permission
+     */
+    onPermissionDenied?: () => void;
+    /**
+     * Called on each recording tick (every second)
+     */
+    onTick?: (elapsed: number, remaining: number | null) => void;
+    /**
+     * Auto-download after recording stops
+     * @default false
+     */
+    autoDownload?: boolean;
+    /**
+     * Disable the component
+     */
+    disabled?: boolean;
+    /**
+     * Render mode for floating UI
+     * @default 'portal'
+     */
+    renderMode?: RenderMode;
+}
+/**
+ * Options for the useScreenRecorder hook
+ */
+interface UseScreenRecorderOptions {
+    /**
+     * Maximum recording duration in seconds
+     * Set to Infinity for unlimited duration
+     * @default 300 (5 minutes)
+     */
+    maxDuration?: number;
+    /**
+     * Countdown seconds before recording starts
+     * Set to false to disable countdown
+     * @default 3
+     */
+    countdown?: number | false;
+    /**
+     * Include audio in recording
+     * @default false
+     */
+    audio?: AudioOption;
+    /**
+     * Video quality settings
+     * @default 'medium'
+     */
+    quality?: QualityOption;
+    /**
+     * MIME type for MediaRecorder
+     * @default 'video/webm;codecs=vp9'
+     */
+    mimeType?: string;
+    /**
+     * Called when an error occurs
+     */
+    onError?: (error: ScreenRecorderError) => void;
+}
+/**
+ * Return type for the useScreenRecorder hook
+ */
+interface UseScreenRecorderReturn {
+    /** Current recording state */
+    state: RecordingState$1;
+    /** Whether currently recording */
+    isRecording: boolean;
+    /** Whether recording is paused */
+    isPaused: boolean;
+    /** Whether in countdown phase */
+    isCountingDown: boolean;
+    /** Current countdown value (null when not counting) */
+    countdownValue: number | null;
+    /** Elapsed recording time in seconds */
+    elapsed: number;
+    /** Remaining time if maxDuration set (null if no limit) */
+    remaining: number | null;
+    /** Formatted elapsed time (MM:SS) */
+    elapsedFormatted: string;
+    /** Recording result after stop (null until recording completes) */
+    result: RecordingResult | null;
+    /** Current error if any */
+    error: ScreenRecorderError | null;
+    /** Whether browser supports screen recording */
+    isSupported: boolean;
+    /** Start screen recording (opens browser picker) */
+    start: () => Promise<void>;
+    /** Stop recording */
+    stop: () => void;
+    /** Pause recording */
+    pause: () => void;
+    /** Resume paused recording */
+    resume: () => void;
+    /** Toggle pause/resume */
+    togglePause: () => void;
+    /** Download the recording */
+    download: (filename?: string) => void;
+    /** Reset state for new recording */
+    reset: () => void;
+    /** Get blob URL for preview */
+    getPreviewUrl: () => string | null;
+    /** Revoke blob URL (cleanup) */
+    revokePreviewUrl: () => void;
+}
+/**
+ * Browser support detection result
+ */
+interface BrowserSupport {
+    /** Whether screen recording is fully supported */
+    isSupported: boolean;
+    /** Whether getDisplayMedia is available */
+    hasDisplayMedia: boolean;
+    /** Whether MediaRecorder is available */
+    hasMediaRecorder: boolean;
+    /** List of supported MIME types */
+    supportedMimeTypes: string[];
+}
+
+/**
+ * ScreenRecorder component for capturing screen recordings
+ *
+ * A complete UI solution for screen recording with floating trigger,
+ * recording controls, countdown, and preview modal.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <div>
+ *       <h1>My Application</h1>
+ *       <ScreenRecorder
+ *         onRecordingStop={(result) => {
+ *           console.log('Recording complete:', result);
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bug report integration
+ * function BugReportForm() {
+ *   const [recording, setRecording] = useState<RecordingResult | null>(null);
+ *
+ *   return (
+ *     <form>
+ *       <textarea placeholder="Describe the bug..." />
+ *       <ScreenRecorder
+ *         position="bottom-left"
+ *         maxDuration={60}
+ *         onRecordingStop={setRecording}
+ *         triggerContent={
+ *           recording ? "✓ Recording attached" : "📹 Record screen"
+ *         }
+ *       />
+ *       <button type="submit">Submit</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+declare const ScreenRecorder: react.ForwardRefExoticComponent<ScreenRecorderProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Main hook for screen recording functionality
+ *
+ * Combines display media capture, media recording, timer, and countdown
+ * into a unified state machine for screen recording.
+ *
+ * @param options - Configuration options
+ * @returns Screen recorder state and controls
+ *
+ * @example
+ * ```tsx
+ * function CustomRecorder() {
+ *   const {
+ *     state,
+ *     isRecording,
+ *     elapsed,
+ *     elapsedFormatted,
+ *     result,
+ *     start,
+ *     stop,
+ *     pause,
+ *     resume,
+ *     download,
+ *     reset,
+ *     isSupported,
+ *     error,
+ *   } = useScreenRecorder({
+ *     maxDuration: 120,
+ *     audio: true,
+ *     countdown: 3,
+ *   });
+ *
+ *   if (!isSupported) {
+ *     return <p>Screen recording is not supported.</p>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>State: {state}</p>
+ *       <p>Time: {elapsedFormatted}</p>
+ *       {state === 'idle' && <button onClick={start}>Start</button>}
+ *       {isRecording && <button onClick={stop}>Stop</button>}
+ *       {result && <video src={result.url} controls />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useScreenRecorder(options?: UseScreenRecorderOptions): UseScreenRecorderReturn;
+
+/**
+ * Predefined quality presets for recording
+ */
+declare const QUALITY_PRESETS: Record<"low" | "medium" | "high", QualityPreset>;
+/**
+ * Default values for screen recorder options
+ */
+declare const DEFAULT_OPTIONS: {
+    /** Default maximum recording duration (5 minutes) */
+    readonly maxDuration: 300;
+    /** Default countdown duration (3 seconds) */
+    readonly countdown: 3;
+    /** Default audio setting */
+    readonly audio: false;
+    /** Default quality preset */
+    readonly quality: "medium";
+    /** Default output format */
+    readonly format: "webm";
+    /** Default MIME type for recording */
+    readonly mimeType: "video/webm;codecs=vp9";
+    /** Default filename */
+    readonly filename: "screen-recording";
+    /** Default position */
+    readonly position: "bottom-right";
+    /** Default z-index */
+    readonly zIndex: 9999;
+    /** Default theme */
+    readonly theme: "system";
+    /** Default render mode */
+    readonly renderMode: "portal";
+    /** Default show preview */
+    readonly showPreview: true;
+    /** Default show timer */
+    readonly showTimer: true;
+    /** Default auto download */
+    readonly autoDownload: false;
+};
+/**
+ * MIME types to check for browser support, in order of preference
+ */
+declare const SUPPORTED_MIME_TYPES: readonly ["video/webm;codecs=vp9,opus", "video/webm;codecs=vp9", "video/webm;codecs=vp8,opus", "video/webm;codecs=vp8", "video/webm", "video/mp4"];
+/**
+ * Human-readable error messages for each error code
+ */
+declare const ERROR_MESSAGES: Record<ScreenRecorderErrorCode, string>;
+/**
+ * Timer warning threshold (30 seconds remaining)
+ */
+declare const TIMER_WARNING_THRESHOLD = 30;
+/**
+ * Timer critical threshold (10 seconds remaining)
+ */
+declare const TIMER_CRITICAL_THRESHOLD = 10;
+
+/**
+ * Gets the best supported MIME type
+ */
+declare function getBestMimeType(): string | null;
+/**
+ * Hook to detect browser support for screen recording
+ *
+ * @returns Browser support information
+ *
+ * @example
+ * ```tsx
+ * function RecorderComponent() {
+ *   const { isSupported, hasDisplayMedia, supportedMimeTypes } = useBrowserSupport();
+ *
+ *   if (!isSupported) {
+ *     return <p>Screen recording is not supported</p>;
+ *   }
+ *
+ *   return <button>Start Recording</button>;
+ * }
+ * ```
+ */
+declare function useBrowserSupport(): BrowserSupport;
+/**
+ * Checks browser support without React hooks (for one-time checks)
+ */
+declare function checkBrowserSupport(): BrowserSupport;
+
+interface UseDisplayMediaOptions {
+    /**
+     * Audio configuration
+     */
+    audio?: AudioOption;
+    /**
+     * Called when an error occurs
+     */
+    onError?: (error: ScreenRecorderError) => void;
+    /**
+     * Called when the stream ends (user stops sharing via browser)
+     */
+    onStreamEnded?: () => void;
+}
+interface UseDisplayMediaReturn {
+    /** Current media stream (null if not capturing) */
+    stream: MediaStream | null;
+    /** Whether stream is active */
+    isStreaming: boolean;
+    /** Request screen capture from user */
+    requestStream: () => Promise<MediaStream | null>;
+    /** Stop the current stream */
+    stopStream: () => void;
+    /** Current error if any */
+    error: ScreenRecorderError | null;
+    /** Whether audio is being captured */
+    hasAudio: boolean;
+}
+/**
+ * Hook to manage screen capture using getDisplayMedia API
+ *
+ * @param options - Configuration options
+ * @returns Display media state and controls
+ *
+ * @example
+ * ```tsx
+ * function ScreenCapture() {
+ *   const { stream, requestStream, stopStream, error } = useDisplayMedia({
+ *     audio: true,
+ *     onStreamEnded: () => console.log('User stopped sharing'),
+ *   });
+ *
+ *   return (
+ *     <button onClick={stream ? stopStream : requestStream}>
+ *       {stream ? 'Stop' : 'Start'} Sharing
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useDisplayMedia(options?: UseDisplayMediaOptions): UseDisplayMediaReturn;
+
+interface UseMediaRecorderOptions {
+    /**
+     * Quality preset or custom configuration
+     */
+    quality?: QualityOption;
+    /**
+     * MIME type for recording
+     */
+    mimeType?: string;
+    /**
+     * Time slice for data events (ms)
+     * @default 1000
+     */
+    timeslice?: number;
+    /**
+     * Called when recording data is available
+     */
+    onDataAvailable?: (data: Blob) => void;
+    /**
+     * Called when recording starts
+     */
+    onStart?: () => void;
+    /**
+     * Called when recording stops
+     */
+    onStop?: (blob: Blob) => void;
+    /**
+     * Called when an error occurs
+     */
+    onError?: (error: ScreenRecorderError) => void;
+}
+interface UseMediaRecorderReturn {
+    /** MediaRecorder instance */
+    recorder: MediaRecorder | null;
+    /** Current recording state */
+    state: RecordingState;
+    /** Start recording */
+    start: () => void;
+    /** Stop recording */
+    stop: () => void;
+    /** Pause recording */
+    pause: () => void;
+    /** Resume recording */
+    resume: () => void;
+    /** Recorded blob (available after stop) */
+    blob: Blob | null;
+    /** MIME type being used */
+    mimeType: string;
+    /** Current error if any */
+    error: ScreenRecorderError | null;
+}
+/**
+ * Hook to manage MediaRecorder for video recording
+ *
+ * @param stream - MediaStream to record
+ * @param options - Configuration options
+ * @returns MediaRecorder state and controls
+ *
+ * @example
+ * ```tsx
+ * function Recorder({ stream }) {
+ *   const { state, start, stop, pause, resume, blob } = useMediaRecorder(stream, {
+ *     quality: 'high',
+ *     onStop: (blob) => console.log('Recording complete:', blob),
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <p>State: {state}</p>
+ *       <button onClick={start}>Start</button>
+ *       <button onClick={stop}>Stop</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMediaRecorder(stream: MediaStream | null, options?: UseMediaRecorderOptions): UseMediaRecorderReturn;
+
+interface UseTimerOptions {
+    /**
+     * Maximum duration in seconds (timer will auto-stop at this limit)
+     */
+    maxDuration?: number;
+    /**
+     * Callback fired every second with elapsed time
+     */
+    onTick?: (elapsed: number, remaining: number | null) => void;
+    /**
+     * Callback fired when max duration is reached
+     */
+    onComplete?: () => void;
+}
+interface UseTimerReturn {
+    /** Elapsed time in seconds */
+    elapsed: number;
+    /** Formatted elapsed time (MM:SS) */
+    elapsedFormatted: string;
+    /** Remaining time if maxDuration set (null if no limit) */
+    remaining: number | null;
+    /** Whether timer is currently running */
+    isRunning: boolean;
+    /** Start the timer */
+    start: () => void;
+    /** Stop the timer */
+    stop: () => void;
+    /** Pause the timer (keeps elapsed time) */
+    pause: () => void;
+    /** Resume a paused timer */
+    resume: () => void;
+    /** Reset the timer to zero */
+    reset: () => void;
+}
+/**
+ * Format seconds as MM:SS
+ */
+declare function formatTime(seconds: number): string;
+/**
+ * Hook to manage a timer for recording duration
+ *
+ * @param options - Configuration options
+ * @returns Timer state and controls
+ *
+ * @example
+ * ```tsx
+ * function RecordingTimer() {
+ *   const { elapsed, elapsedFormatted, remaining, start, stop, reset, isRunning } = useTimer({
+ *     maxDuration: 60,
+ *     onTick: (elapsed) => console.log(`Recording: ${elapsed}s`),
+ *     onComplete: () => console.log('Max duration reached'),
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <p>{elapsedFormatted}</p>
+ *       <button onClick={isRunning ? stop : start}>
+ *         {isRunning ? 'Stop' : 'Start'}
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useTimer(options?: UseTimerOptions): UseTimerReturn;
+
+interface UseCountdownOptions {
+    /**
+     * Initial countdown value in seconds
+     * @default 3
+     */
+    initialValue?: number;
+    /**
+     * Called when countdown completes
+     */
+    onComplete?: () => void;
+    /**
+     * Called on each tick of the countdown
+     */
+    onTick?: (value: number) => void;
+}
+interface UseCountdownReturn {
+    /** Current countdown value (null when not counting) */
+    value: number | null;
+    /** Whether countdown is active */
+    isActive: boolean;
+    /** Start the countdown */
+    start: (onComplete?: () => void) => void;
+    /** Cancel the countdown */
+    cancel: () => void;
+}
+/**
+ * Hook to manage a countdown timer (e.g., 3-2-1 before recording)
+ *
+ * @param options - Configuration options
+ * @returns Countdown state and controls
+ *
+ * @example
+ * ```tsx
+ * function RecordingCountdown() {
+ *   const { value, isActive, start, cancel } = useCountdown({
+ *     initialValue: 3,
+ *     onComplete: () => console.log('Countdown finished!'),
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {isActive && <div className="countdown">{value}</div>}
+ *       <button onClick={() => start()}>Start Countdown</button>
+ *       <button onClick={cancel}>Cancel</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useCountdown(options?: UseCountdownOptions): UseCountdownReturn;
+
+/**
+ * Utility function to merge Tailwind CSS classes with clsx
+ *
+ * Combines clsx's conditional class merging with tailwind-merge's
+ * intelligent Tailwind class deduplication.
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ *
+ * @example
+ * ```ts
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * cn('bg-red-500', isActive && 'bg-blue-500') // => 'bg-blue-500' (if isActive)
+ * ```
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Download a blob as a file
+ *
+ * @param blob - The blob to download
+ * @param filename - The filename to save as
+ *
+ * @example
+ * ```ts
+ * const blob = new Blob(['hello'], { type: 'text/plain' });
+ * downloadBlob(blob, 'hello.txt');
+ * ```
+ */
+declare function downloadBlob(blob: Blob, filename: string): void;
+/**
+ * Generate a default filename for recordings
+ *
+ * @param timestamp - The recording timestamp
+ * @param extension - The file extension (default: 'webm')
+ * @returns Generated filename
+ *
+ * @example
+ * ```ts
+ * generateFilename(new Date()) // => 'screen-recording-2024-01-15-143052.webm'
+ * ```
+ */
+declare function generateFilename(timestamp?: Date, extension?: string): string;
+/**
+ * Format bytes to human-readable size
+ *
+ * @param bytes - Size in bytes
+ * @param decimals - Number of decimal places
+ * @returns Formatted size string
+ *
+ * @example
+ * ```ts
+ * formatBytes(1024) // => '1 KB'
+ * formatBytes(1048576) // => '1 MB'
+ * formatBytes(1536, 1) // => '1.5 KB'
+ * ```
+ */
+declare function formatBytes(bytes: number, decimals?: number): string;
+
+interface TriggerProps {
+    /**
+     * Position of the trigger button
+     */
+    position?: TriggerPosition;
+    /**
+     * Custom content for the trigger button
+     */
+    children?: ReactNode;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Z-index for positioning
+     */
+    zIndex?: number;
+}
+/**
+ * Floating trigger button to start screen recording
+ */
+declare const Trigger: FC<TriggerProps>;
+
+interface TriggerIconProps {
+    className?: string;
+}
+/**
+ * Recording trigger icon (video camera with record dot)
+ */
+declare const TriggerIcon: FC<TriggerIconProps>;
+/**
+ * Recording state icon (pulsing red dot)
+ */
+declare const RecordingIcon: FC<TriggerIconProps>;
+/**
+ * Stop icon (square)
+ */
+declare const StopIcon: FC<TriggerIconProps>;
+/**
+ * Pause icon (two vertical bars)
+ */
+declare const PauseIcon: FC<TriggerIconProps>;
+/**
+ * Play/Resume icon (triangle)
+ */
+declare const PlayIcon: FC<TriggerIconProps>;
+/**
+ * Download icon
+ */
+declare const DownloadIcon: FC<TriggerIconProps>;
+/**
+ * Close/X icon
+ */
+declare const CloseIcon: FC<TriggerIconProps>;
+/**
+ * Refresh/Re-record icon
+ */
+declare const RefreshIcon: FC<TriggerIconProps>;
+/**
+ * Check/Done icon
+ */
+declare const CheckIcon: FC<TriggerIconProps>;
+/**
+ * Warning/Error icon
+ */
+declare const WarningIcon: FC<TriggerIconProps>;
+
+interface TimerProps {
+    /**
+     * Elapsed time in seconds
+     */
+    elapsed: number;
+    /**
+     * Formatted elapsed time (MM:SS)
+     */
+    elapsedFormatted: string;
+    /**
+     * Remaining time (null if no limit)
+     */
+    remaining?: number | null;
+    /**
+     * Maximum duration (for calculating remaining)
+     */
+    maxDuration?: number;
+    /**
+     * Whether recording is paused
+     */
+    isPaused?: boolean;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Timer display component showing elapsed recording time
+ */
+declare const Timer: FC<TimerProps>;
+
+interface RecordingControlsProps {
+    /**
+     * Elapsed time in seconds
+     */
+    elapsed: number;
+    /**
+     * Formatted elapsed time (MM:SS)
+     */
+    elapsedFormatted: string;
+    /**
+     * Remaining time if maxDuration set
+     */
+    remaining?: number | null;
+    /**
+     * Maximum duration
+     */
+    maxDuration?: number;
+    /**
+     * Whether recording is paused
+     */
+    isPaused?: boolean;
+    /**
+     * Whether recording is active (not paused)
+     */
+    isRecording?: boolean;
+    /**
+     * Pause handler
+     */
+    onPause?: () => void;
+    /**
+     * Resume handler
+     */
+    onResume?: () => void;
+    /**
+     * Stop handler
+     */
+    onStop?: () => void;
+    /**
+     * Position of controls
+     */
+    position?: TriggerPosition;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Z-index for positioning
+     */
+    zIndex?: number;
+}
+/**
+ * Recording controls bar with timer, pause, and stop buttons
+ */
+declare const RecordingControls: FC<RecordingControlsProps>;
+
+interface CountdownProps {
+    /**
+     * Current countdown value
+     */
+    value: number;
+    /**
+     * Cancel handler
+     */
+    onCancel?: () => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Z-index for overlay
+     */
+    zIndex?: number;
+}
+/**
+ * Fullscreen countdown overlay (3-2-1 before recording)
+ */
+declare const Countdown: FC<CountdownProps>;
+
+interface VideoPlayerProps {
+    /**
+     * Video source URL
+     */
+    src: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Whether to show controls
+     */
+    showControls?: boolean;
+    /**
+     * Auto-play on mount
+     */
+    autoPlay?: boolean;
+    /**
+     * Known duration in seconds (fallback for WebM files where duration may be Infinity)
+     */
+    knownDuration?: number;
+}
+interface VideoPlayerRef {
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+}
+/**
+ * Video player component with custom controls
+ */
+declare const VideoPlayer: react.ForwardRefExoticComponent<VideoPlayerProps & react.RefAttributes<VideoPlayerRef>>;
+
+interface PreviewModalProps {
+    /**
+     * Recording result to preview
+     */
+    result: RecordingResult;
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Download handler
+     */
+    onDownload?: () => void;
+    /**
+     * Re-record handler
+     */
+    onReRecord?: () => void;
+    /**
+     * Done/Close handler
+     */
+    onClose?: () => void;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Z-index for modal
+     */
+    zIndex?: number;
+    /**
+     * Use portal for rendering
+     */
+    usePortal?: boolean;
+    /**
+     * Theme for the modal
+     */
+    theme?: ThemeOption;
+}
+/**
+ * Preview modal for recorded video
+ */
+declare const PreviewModal: FC<PreviewModalProps>;
+
+interface StatusBadgeProps {
+    /**
+     * Current recording state
+     */
+    state: RecordingState$1;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * Status badge showing current recording state
+ */
+declare const StatusBadge: FC<StatusBadgeProps>;
+
+interface ErrorMessageProps {
+    /**
+     * Error to display
+     */
+    error: ScreenRecorderError;
+    /**
+     * Retry handler
+     */
+    onRetry?: () => void;
+    /**
+     * Dismiss handler
+     */
+    onDismiss?: () => void;
+    /**
+     * Position of the error message
+     */
+    position?: TriggerPosition;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Z-index for positioning
+     */
+    zIndex?: number;
+}
+/**
+ * Error message component for screen recording errors
+ */
+declare const ErrorMessage: FC<ErrorMessageProps>;
+
+export { type AudioConfig, type AudioOption, type BrowserSupport, CheckIcon, CloseIcon, Countdown, type CountdownProps, DEFAULT_OPTIONS, DownloadIcon, ERROR_MESSAGES, ErrorMessage, type ErrorMessageProps, PauseIcon, PlayIcon, PreviewModal, type PreviewModalProps, QUALITY_PRESETS, type QualityOption, type QualityPreset, RecordingControls, type RecordingControlsProps, RecordingIcon, type RecordingResult, type RecordingState$1 as RecordingState, RefreshIcon, type RenderMode, SUPPORTED_MIME_TYPES, ScreenRecorder, type ScreenRecorderError, type ScreenRecorderErrorCode, type ScreenRecorderProps, StatusBadge, type StatusBadgeProps, StopIcon, TIMER_CRITICAL_THRESHOLD, TIMER_WARNING_THRESHOLD, type ThemeOption, Timer, type TimerProps, Trigger, TriggerIcon, type TriggerPosition, type TriggerProps, type UseCountdownOptions, type UseCountdownReturn, type UseDisplayMediaOptions, type UseDisplayMediaReturn, type UseMediaRecorderOptions, type UseMediaRecorderReturn, type UseScreenRecorderOptions, type UseScreenRecorderReturn, type UseTimerOptions, type UseTimerReturn, VideoPlayer, type VideoPlayerProps, type VideoPlayerRef, WarningIcon, checkBrowserSupport, cn, downloadBlob, formatBytes, formatTime, generateFilename, getBestMimeType, useBrowserSupport, useCountdown, useDisplayMedia, useMediaRecorder, useScreenRecorder, useTimer };