/**
 * @file Spinner.tsx
 * @input Uses React, StyleX, canvas rendering
 * @output Exports Spinner component, SpinnerProps, SpinnerSize, SpinnerShade types
 * @position Core implementation of spinner loading indicator
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Spinner/Spinner.doc.mjs
 * - /packages/core/src/Spinner/Spinner.test.tsx
 * - /packages/core/src/Spinner/index.ts
 * - /apps/storybook/stories/Spinner.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
declare const SIZES: {
    sm: {
        diameter: number;
        border: number;
    };
    md: {
        diameter: number;
        border: number;
    };
    lg: {
        diameter: number;
        border: number;
    };
    xl: {
        diameter: number;
        border: number;
    };
};
export type SpinnerSize = keyof typeof SIZES;
export type SpinnerShade = 'default' | 'onMedia' | 'subtle' | 'inherit';
export interface SpinnerProps extends BaseProps<HTMLSpanElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLSpanElement>;
    /**
     * Spinner size.
     * - 'sm': 10px diameter
     * - 'md': 14px diameter
     * - 'lg': 18px diameter
     * - 'xl': 36px diameter
     * @default 'md'
     */
    size?: SpinnerSize;
    /**
     * Color shade.
     * - 'default': accent color on light backgrounds
     * - 'onMedia': white on dark/accent backgrounds
     * - 'subtle': secondary text color, less prominent — for inline use in lists
     * - 'inherit': inherits the parent's `currentColor` (with a translucent
     *   track) — use inside colored elements like buttons so the ring matches
     *   the resolved foreground regardless of theme/variant
     * @default 'default'
     */
    shade?: SpinnerShade;
    /**
     * Visible content displayed below the spinner.
     * Accepts a string or ReactNode for rich content.
     *
     * When `label` is a string, the visible text also provides the accessible
     * name of the status element (via aria-labelledby, avoiding a duplicate
     * announcement) unless `aria-label` is explicitly set.
     *
     * @example
     * ```
     * <Spinner label="Loading..." />
     * <Spinner label={<><strong>Fetching data</strong><br/>This may take a moment</>} aria-label="Fetching data" />
     * ```
     */
    label?: ReactNode;
    /**
     * Test ID for the root element.
     */
    'data-testid'?: string;
}
/**
 * An animated loading indicator. Available in three sizes and two color shades.
 *
 * @example
 * ```
 * <Spinner />
 * <Spinner size="sm" />
 * <Spinner size="lg" shade="onMedia" />
 * <Spinner label="Loading..." />
 * <Spinner aria-label="Loading data" />
 * ```
 */
export declare function Spinner({ size, shade, label, xstyle, className, style, 'aria-label': ariaLabel, 'data-testid': testId, ref, ...restProps }: SpinnerProps): import("react").JSX.Element;
export declare namespace Spinner {
    var displayName: string;
}
export {};
//# sourceMappingURL=Spinner.d.ts.map