import { TNode, Value } from '@tempots/dom';
import { ThemeColorName } from '../../tokens';
/**
 * Position of the navigation progress bar within the viewport.
 */
export type NavigationProgressPosition = 'top' | 'bottom';
/**
 * Configuration options for the {@link NavigationProgress} component.
 */
export interface NavigationProgressOptions {
    /** Theme color for the progress bar fill. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Height of the progress bar in pixels. @default 3 @min 1 @max 10 @step 1 */
    height?: Value<number>;
    /** Position of the bar in the viewport. @default 'top' */
    position?: Value<NavigationProgressPosition>;
    /** Whether to show a spinner indicator alongside the bar. @default false */
    showSpinner?: Value<boolean>;
    /** Trickle speed in milliseconds (interval for auto-increment). @default 200 @min 50 @max 1000 @step 50 */
    trickleSpeed?: Value<number>;
    /** Minimum display duration in milliseconds to prevent flash. @default 300 @min 0 @max 2000 @step 100 */
    minimumDuration?: Value<number>;
    /** Animation speed for CSS transitions in milliseconds. @default 200 @min 50 @max 1000 @step 50 */
    animationSpeed?: Value<number>;
}
/**
 * Controller returned by {@link NavigationProgress} for programmatic control.
 */
export interface NavigationProgressController {
    /** Start the progress bar (resets to initial value and begins trickling). */
    start: () => void;
    /** Set progress to a specific value (0–100). */
    set: (value: number) => void;
    /** Complete the progress bar (animates to 100% then hides). */
    done: () => void;
    /** Reset the progress bar to hidden state without animation. */
    reset: () => void;
    /** Whether the progress bar is currently active. */
    isActive: Value<boolean>;
}
/**
 * A thin progress bar fixed to the top or bottom of the viewport,
 * indicating navigation or loading progress. Inspired by NProgress.
 *
 * Returns a tuple of `[TNode, NavigationProgressController]` so the
 * caller can programmatically control the bar.
 *
 * @param options - Configuration for color, height, position, and behavior
 * @returns A tuple of the progress bar element and its controller
 *
 * @example
 * ```typescript
 * const [bar, progress] = NavigationProgress({ color: 'primary' })
 * // Mount the bar
 * html.div(bar)
 * // Start loading
 * progress.start()
 * // Complete when done
 * progress.done()
 * ```
 *
 * @example
 * ```typescript
 * // With spinner and bottom position
 * const [bar, ctrl] = NavigationProgress({
 *   position: 'bottom',
 *   showSpinner: true,
 *   color: 'info',
 * })
 * ```
 */
export declare function NavigationProgress(options?: NavigationProgressOptions): [TNode, NavigationProgressController];