import { FixedElementProps, LottieInstance } from "../animation/types.js";
import { LottieReadoutUnit } from "./LottieReadout.js";
//#region src/controls/LottieControls.d.ts
/** What this component owns. Every other prop belongs to the element. */
interface LottieControlsOwnProps {
  /** The animation to drive. Omit it inside a component that publishes one. */
  lottie?: LottieInstance;
  /** What the position is counted in. Frames unless you say otherwise. */
  unit?: LottieReadoutUnit;
  /** Added to the library's class rather than replacing it. */
  className?: string;
}
/** What {@link LottieControls} accepts. */
type LottieControlsProps = FixedElementProps<LottieControlsOwnProps, "div">;
/**
 * A bar of controls for driving an animation.
 *
 * Render it among the children of a component that publishes an animation, or
 * anywhere at all with the result of `useLottie`. It sits below the animation
 * rather than over it, because this control set is for inspecting a file and
 * covering the thing being inspected defeats it.
 *
 * ```jsx
 * <Lottie src="/hero.json">
 *   <LottieDisplay />
 *   <LottieControls />
 * </Lottie>
 * ```
 *
 * Left to right: play and stop, the seek bar, the position, looping and
 * direction, then the playback rate and fullscreen. That order follows what
 * every Lottie player that publishes one does, and it is why the rate sits away
 * from the transport controls rather than beside them.
 *
 * Three keys work while the animation holds focus, or while it is the thing
 * filling the screen: `k` plays and pauses, `l` loops, `f` fills the screen.
 * They belong to this bar, so a page that renders no controls has no key
 * listener either.
 *
 * Fullscreen takes this bar with the animation, since both sit inside the
 * element `<Lottie>` renders. On the hook path that element is yours, so the
 * button appears once something carries `setRootRef` and not before.
 *
 * While the animation is loading, and after a load has failed, every control is
 * disabled and so are the keys. Both are states in which an overlay covers this
 * bar, so leaving them usable would mean a keyboard could reach controls
 * nothing can see.
 *
 * It takes every attribute of the `div` it renders, and `ref` names that same
 * element. Its own rules are all zero-specificity, so any of them can be
 * replaced one property at a time from your own stylesheet, which is why there
 * is no theme prop. If your CSS lives in cascade layers, declare
 * `@layer lottie-react;` before your own styles so the library's layer ranks
 * below them.
 */
declare const LottieControls: import("react").ForwardRefExoticComponent<LottieControlsOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof LottieControlsOwnProps> & import("react").RefAttributes<HTMLDivElement>>;
//#endregion
export { LottieControls, LottieControlsProps };