import { ComponentProps } from "react";
//#region src/components/loader.d.ts
/**
 * The indeterminate loading indicator for a control or a row: a plain
 * spinner. Inline (`sm`) next to a control that is busy, `md` in a row or a
 * small panel. A whole region with no content yet is `LoaderState` (the only
 * place the Stella mark breathes). Content with a known shape gets a
 * `Skeleton` instead, never a loader.
 */
declare const Loader: ({ label, variant, size, animation, className, ...props }: LoaderProps) => import("react").JSX.Element;
/**
 * A region whose content has no shape yet (an empty screen while a job runs or
 * a first fetch lands): the Stella mark breathing, one line saying what is
 * happening, and at most one line of detail.
 * Progress is stated in the detail text, never drawn as a bar that guesses.
 */
declare const LoaderState: ({ label, detail, hint, className }: LoaderStateProps) => import("react").JSX.Element;
declare const LOADER_SIZE: {
  readonly sm: "size-4";
  readonly md: "size-6";
  readonly lg: "size-8";
};
type LoaderSize = keyof typeof LOADER_SIZE;
type LoaderProps = Omit<ComponentProps<"span">, "children" | "role" | "aria-label" | "aria-hidden" | "aria-busy"> & {
  size?: LoaderSize;
  animation?: "none" | "spin";
} & ({
  variant?: "status";
  /** What is pending, for assistive technology ("Loading matters"). */
  label: string;
} | {
  /** The surrounding control or text announces the pending state. */
  variant: "decorative";
  label?: never;
});
type LoaderStateProps = {
  /** What is happening, shown as the title and announced. */
  label: string;
  /** A short line under the title: a name, a fraction, a percentage. */
  detail?: string | undefined;
  /** Expectation-setting copy, kept small. */
  hint?: string | undefined;
  className?: string | undefined;
};
//#endregion
export { Loader, LoaderState };