import * as React from 'react';
/** One tick, in ms. The Figma storyboard advances exactly one second per frame. */
export declare const CALL_TIMER_TICK_MS = 1000;
/**
 * Elapsed seconds as `mm:ss`, growing to `h:mm:ss` past an hour.
 *
 * Figma's eight frames are `00:01`..`00:08` and never roll over, so the design specifies the
 * zero-padded two-segment form and is silent past 59:59. Hours are added as a segment rather than
 * overflowing the minutes (`62:33` would be the alternative) and are not zero-padded, which is the
 * convention every platform call timer uses.
 *
 * Negative and fractional input is clamped and floored rather than rejected: this formats a
 * monotonic clock, and a caller computing `now - startedAt` can legitimately produce -0.4 on the
 * first frame.
 */
export declare function formatDuration(totalSeconds: number): string;
/**
 * The pill, measured off `.timer` (22:4034) and `.timer-animation` (22:4272).
 *
 * 32px tall, and that height is *derived*: 20px of leading plus 6px of vertical padding twice,
 * which is why `gap-150` (6px) appears as the padding step rather than a `padding-vertical-*` one —
 * the vertical scale jumps 4px → 8px and has no 6px member.
 *
 * 14/20 (`figma-14`), not Badge's 12/18. That divergence is the reason this is its own pattern:
 * `Badge` hard-codes `[&>svg]:size-3`, so a 16px glyph in a 32px pill cannot be expressed by it.
 *
 * **THE INK WAS A SUBSTITUTION AGAINST THIS COMPONENT'S OWN BINDING.** It drew
 * `--color-text-secondary` #c5d0e3; `.timer`'s binding states the atom holds "a 16px stopwatch glyph
 * and the literal text `00:00`, **both inked `color/gray/gray-300`**", and records the same value
 * again under `variants.(only)` as `ink` and `icon`. #9aa0b4 measures **7.43:1** on Figma's page, so
 * this is a clean revert with no conflict to log — `--color-text-subtle-figma` already carries the
 * literal for the fifteen atoms that share it.
 *
 * Nothing pinned it. The one test naming `text-text-secondary` asserts a **`cn()` override** — that a
 * caller's `text-text-primary` wins — which passes whatever the default is, because `cn()` strips the
 * loser either way. A test that mentions a token is not a test that pins it.
 *
 * One ink covers both, because the glyph is `currentColor`: the icon slot sets no colour of its own,
 * so the root's ink is what paints the stopwatch too. That is why the binding names one value for two
 * layers and why one class here is the whole fix.
 */
declare const callTimerStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
export interface CallTimerProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
    /**
     * Elapsed seconds. Pass it alone for a controlled readout, or as the starting value for a timer
     * that advances itself when `isRunning` is true.
     * @default 0
     */
    seconds?: number;
    /**
     * Advance once a second from `seconds`. False holds the displayed value.
     * @default false
     */
    isRunning?: boolean;
    /**
     * Fires on each tick with the new value, so a caller can lift the elapsed time without
     * re-rendering this component from outside on every second.
     */
    onTick?: (seconds: number) => void;
    /**
     * Leading glyph. The Figma atoms disagree — `.timer` draws a stopwatch, `.timer-animation` draws
     * the Twilio voice handset — and the handset is the default because the animation is the one that
     * establishes this as a *call* duration.
     * @default <CallIcon />
     */
    icon?: React.ReactNode;
    /** Hide the glyph entirely, for a bare readout. */
    hideIcon?: boolean;
    /**
     * Accessible name, describing *what* is being timed.
     *
     * The digits themselves are hidden from assistive technology and there is deliberately no live
     * region — see the component docblock.
     * @default 'Call duration'
     */
    label?: string;
}
/**
 * Elapsed call duration as a pill, from Figma's `.timer` and `.timer-animation`.
 *
 * **`.timer-animation` was previously declined as "the caller's state, not a design".** Read in Dev
 * Mode, its eight frames are `00:01`..`00:08` — one second per frame, so the frame interval *is* the
 * specification, and the thing that had been dismissed as eight arbitrary strings is a tick. Its
 * glyph is also the voice handset rather than `.timer`'s stopwatch, which is what marks this as a
 * call duration rather than a generic clock.
 *
 * **Not `Badge`.** Both atoms were mapped to `Badge size="small"` with two divergences filed as
 * deferred: a 14/20 label against Badge's 12/18, and a 32px pill against the 22px Badge derives from
 * its own ramp. Badge also forces `[&>svg]:size-3`, so its icon slot cannot hold the 16px glyph
 * these atoms draw. That binding guessed the cause correctly — this is not a badge in the design
 * author's head — so it is its own pattern rather than three overrides on a badge.
 *
 * **The accessibility decision is the substantive one, and the design cannot express it.** A value
 * that changes every second must not be announced every second: an `aria-live="polite"` region
 * ticking once a second is a screen-reader denial of service. So the digits carry `aria-hidden` and
 * there is no live region at all. The element is a `role="timer"` with an accessible name, which a
 * screen reader reads *on demand* — the same reasoning that makes `AudioVisualizer` decorative by
 * default, because the state lives in the application rather than in the graphic.
 *
 * Reduced motion is deliberately **not** honoured here: a clock is information, not decoration, and
 * stopping it would withhold the thing the component exists to report. That is why the tick is a
 * `setInterval` over a value rather than a CSS animation on a token.
 *
 * @example <CallTimer seconds={247} />
 * @example <CallTimer isRunning onTick={setElapsed} label="Time on call" />
 */
export declare const CallTimer: React.ForwardRefExoticComponent<CallTimerProps & React.RefAttributes<HTMLSpanElement>>;
export { callTimerStyles };
//# sourceMappingURL=call-timer.d.ts.map