@wandelbots/wandelbots-js-react-components/dist/components/CycleTimer.d.ts

React UI toolkit for building applications on top of the Wandelbots platform

export interface CycleTimerProps {
    /**
     * Callback that receives the timer control functions:
     * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
     * - `pause()` - Pause the countdown while preserving remaining time
     * - `resume()` - Resume countdown from where it was paused
     * - `isPaused()` - Check current pause state
     */
    onCycleComplete: (controls: {
        startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void;
        pause: () => void;
        resume: () => void;
        isPaused: () => boolean;
    }) => void;
    /** Callback fired when a cycle actually completes (reaches zero) */
    onCycleEnd?: () => void;
    /** Whether the timer should start automatically when maxTime is set */
    autoStart?: boolean;
    /** Visual variant of the timer */
    variant?: "default" | "small";
    /** For small variant: whether to show remaining time details (compact hides them) */
    compact?: boolean;
    /** Additional CSS classes */
    className?: string;
}
/**
 * A circular gauge timer component that shows the remaining time of a cycle
 *
 * Features:
 * - Circular gauge with 264px diameter and 40px thickness
 * - Shows remaining time prominently in the center (60px font)
 * - Displays "remaining time" label at top and total time at bottom
 * - Automatically counts down and triggers callback when reaching zero
 * - Full timer control: start, pause, resume functionality
 * - Support for starting with elapsed time (resume mid-cycle)
 * - Smooth spring-based progress animations for all state transitions
 * - Fully localized with i18next
 * - Material-UI theming integration
 * - Small variant with animated progress icon (gauge border only) next to text
 *
 * @param onCycleComplete - Callback that receives timer control functions
 * @param onCycleEnd - Optional callback fired when a cycle actually completes (reaches zero)
 * @param autoStart - Whether to start timer automatically (default: true)
 * @param variant - Visual variant: "default" (large gauge) or "small" (animated icon with text)
 * @param compact - For small variant: whether to hide remaining time details
 * @param className - Additional CSS classes
 *
 * Usage:
 * ```tsx
 * <CycleTimer
 *   onCycleComplete={(controls) => {
 *     // Start a 5-minute cycle
 *     controls.startNewCycle(300)
 *
 *     // Or start a 5-minute cycle with 2 minutes already elapsed
 *     controls.startNewCycle(300, 120)
 *
 *     // Pause the timer
 *     controls.pause()
 *
 *     // Resume the timer
 *     controls.resume()
 *
 *     // Check if paused
 *     const paused = controls.isPaused()
 *   }}
 *   onCycleEnd={() => console.log('Cycle completed!')}
 * />
 * ```
 *
 * Control Functions:
 * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
 * - `pause()` - Pause the countdown while preserving remaining time
 * - `resume()` - Resume countdown from where it was paused
 * - `isPaused()` - Check current pause state
 */
export declare const CycleTimer: (({ onCycleComplete, onCycleEnd, autoStart, variant, compact, className, }: CycleTimerProps) => import("react/jsx-runtime").JSX.Element) & {
    displayName: string;
};
//# sourceMappingURL=CycleTimer.d.ts.map