import { FluxColor, FluxDirection } from '@flux-ui/types';
import { CSSProperties, Ref, ShallowRef, ComputedRef } from 'vue';
/**
 * The thin bar sits this many px inside the fill's edge, and never closer than
 * the same distance to the track sides — so at a very low value it parks at the
 * side, outside the (tiny) fill.
 */
export declare const FADER_BAR_INSET = 8;
/** The visible fill edge in px, clamped to the track. */
export declare function faderFillEdgePx(percent: number, width: number): number;
/** Clamp a bar's center so it never gets closer than FADER_BAR_INSET to either side. */
export declare function faderClampPark(centerPx: number, width: number): number;
/**
 * The CSS `left` for a bar riding a fill edge: `offset` is the signed px inset
 * into the fill (negative for a right edge, positive for a left edge), and the
 * clamp keeps the bar FADER_BAR_INSET from the track sides.
 */
export declare function faderBarLeft(percent: number, offset: number): string;
export declare function faderRoundToDecimals(value: number, digits: number): number;
/**
 * An interruptible 150ms tween of a numeric ref (easeOutCubic). Feeding it
 * `immediate` snaps instantly; otherwise the fill and the value read glide
 * together toward a committed value.
 */
export declare function createFaderAnimator(target: Ref<number>): {
    animate(value: number, immediate: boolean): void;
    stop(): void;
};
export type FaderBarState = 'isDodge' | 'isGrabbed' | 'isFocus' | null;
/** Bar states, in priority order: a bar dims under text even while grabbed. */
export declare function faderBarStateClass(dodge: boolean, dragging: boolean, focus: boolean): FaderBarState;
type FaderElementRef = Readonly<ShallowRef<HTMLElement | null>>;
type UseFaderOptions = {
    readonly rootRef: FaderElementRef;
    readonly labelRef: FaderElementRef;
    readonly valueRef: FaderElementRef;
    min(): number;
    max(): number;
    step(): number;
    color(): FluxColor;
    direction(): FluxDirection;
};
/**
 * Shared behavior for both fader variants: the value grammar (span, decimals,
 * snapping, snappy detents), text-zone measurement and the bar dodge that reads
 * from it, the accent color variables, and the elastic overdrag. The variant
 * owns its model, percentages, bars, pointer and keyboard.
 */
export declare function useFormFader(options: UseFaderOptions): {
    overdrag: {
        transform: ComputedRef<string>;
        transformOrigin: Ref<string, string>;
        update: (coord: number, rect: DOMRect) => void;
        reset: () => void;
        dispose: () => void;
    };
    trackLength: Ref<number, number>;
    span: ComputedRef<number>;
    isRangeValid: ComputedRef<boolean>;
    decimals: ComputedRef<number>;
    pageStep: ComputedRef<number>;
    isSnappy: ComputedRef<boolean>;
    colorVars: ComputedRef<CSSProperties>;
    snap: (value: number) => number;
    isDodging: (center: number) => boolean;
    measureZones: () => void;
};
export {};