import { type HTMLAttributes } from 'react';
import { type VariantProps } from 'class-variance-authority';
declare const skeletonVariants: (props?: ({
    variant?: "text" | "rounded" | "rectangular" | "circular" | null | undefined;
    size?: "sm" | "md" | "lg" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * Put this on the REAL content that replaces a skeleton, so it settles in
 * instead of snapping. Opacity only; none under reduced motion, and none in
 * the accessible theme, whose `--animation-duration` is 0ms.
 */
export declare const CONTENT_ENTER_CLASS = "ds:animate-[content-enter_var(--animation-duration)_var(--ease-out)] ds:motion-reduce:animate-none";
export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'style'>, VariantProps<typeof skeletonVariants> {
    variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
    size?: 'sm' | 'md' | 'lg';
    /** Number of stacked text lines — only applies when variant='text' */
    lines?: number;
    /**
     * Width override — accepts any CSS value.
     * Exception to constraint §4: skeleton dimensions are consumer-specified
     * and cannot be expressed as static Tailwind classes.
     */
    width?: string;
    /**
     * Height override — accepts any CSS value.
     * Exception to constraint §4: skeleton dimensions are consumer-specified
     * and cannot be expressed as static Tailwind classes.
     */
    height?: string;
    /** Whether to animate the pulse */
    animate?: boolean;
    /**
     * Position in a wave. Atoms with rising steps (0, 1, 2…) pulse one after
     * another instead of all at once. With `lines`, each line takes the next
     * step by itself. Omit and nothing is staggered, as before.
     */
    stagger?: number;
}
export type SkeletonPreset = 'figure' | 'line-chart' | 'bar-chart' | 'table' | 'heatmap' | 'list';
export interface SkeletonPresetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'style' | 'children' | 'tabIndex'> {
    /**
     * Pulse the shapes. Defaults to true. There is never a pulse under
     * reduced motion, in forced colours, or in the accessible themes,
     * whatever this says.
     */
    animate?: boolean;
}
export interface SkeletonBarChartProps extends SkeletonPresetProps {
    /** Number of bars, 2 to 12. Defaults to 6. */
    bars?: number;
}
export interface SkeletonTableProps extends SkeletonPresetProps {
    /** Body rows under the header, 1 to 20. Defaults to 4. */
    rows?: number;
    /** Columns, 1 to 8. Defaults to 3. */
    columns?: number;
}
export interface SkeletonHeatmapProps extends SkeletonPresetProps {
    /** Rows, 1 to 12. Defaults to 5. */
    rows?: number;
    /** Columns, 1 to 12. Defaults to 7, one week. */
    columns?: number;
}
export interface SkeletonListProps extends SkeletonPresetProps {
    /** Items, 1 to 10. Defaults to 3. */
    items?: number;
}
/**
 * Placeholder shapes. `<Skeleton>` is one atom (a line, a circle, a
 * block); the members are presets shaped like a whole widget.
 */
export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>> & {
    Figure: import("react").ForwardRefExoticComponent<SkeletonPresetProps & import("react").RefAttributes<HTMLDivElement>>;
    LineChart: import("react").ForwardRefExoticComponent<SkeletonPresetProps & import("react").RefAttributes<HTMLDivElement>>;
    BarChart: import("react").ForwardRefExoticComponent<SkeletonBarChartProps & import("react").RefAttributes<HTMLDivElement>>;
    Table: import("react").ForwardRefExoticComponent<SkeletonTableProps & import("react").RefAttributes<HTMLDivElement>>;
    Heatmap: import("react").ForwardRefExoticComponent<SkeletonHeatmapProps & import("react").RefAttributes<HTMLDivElement>>;
    List: import("react").ForwardRefExoticComponent<SkeletonListProps & import("react").RefAttributes<HTMLDivElement>>;
};
export {};
//# sourceMappingURL=skeleton.d.ts.map