/**
 * @file Skeleton.tsx
 * @input Uses React, StyleX keyframes and tokens
 * @output Exports Skeleton component, SkeletonProps, SkeletonRadius types
 * @position Core implementation of skeleton loading placeholder
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Skeleton/Skeleton.doc.mjs
 * - /packages/core/src/Skeleton/index.ts
 * - /apps/storybook/stories/Skeleton.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Skeleton/ (showcase blocks)
 */
import type { BaseProps } from '../BaseProps';
import * as stylex from '@stylexjs/stylex';
declare const radiusStyles: Readonly<{
    readonly none: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
    }>;
    readonly 0: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "0px">;
    }>;
    readonly 1: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "4px">;
    }>;
    readonly 2: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "8px">;
    }>;
    readonly 3: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "12px">;
    }>;
    readonly 4: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "12px">;
    }>;
    readonly rounded: Readonly<{
        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "9999px">;
    }>;
}>;
export type SkeletonRadius = keyof typeof radiusStyles;
export interface SkeletonProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Width of the skeleton.
     * Accepts a number (pixels) or string (any CSS value).
     * @default '100%'
     */
    width?: number | string;
    /**
     * Height of the skeleton.
     * Accepts a number (pixels) or string (any CSS value).
     * @default '100%'
     */
    height?: number | string;
    /**
     * Border radius of the skeleton, using design token scale.
     * - 'none': No border radius (sharp corners)
     * - 0: radius-0 token (0px)
     * - 1: radius-1 token (4px)
     * - 2: radius-2 token (8px)
     * - 3: radius-3 token (12px, default)
     * - 4: radius-4 token (16px)
     * - 'rounded': Fully rounded (for avatars, pills)
     * @default 3
     */
    radius?: SkeletonRadius;
    /**
     * Index for staggered animation timing.
     * Use sequential indices (0, 1, 2, ...) for multiple skeletons
     * to create a wave effect.
     * @default 0
     */
    index?: number;
    /**
     * Test ID for testing purposes.
     */
    'data-testid'?: string;
}
/**
 * A placeholder shape that indicates content is loading.
 * Renders a pulsing block with configurable width, height, and border radius.
 * Use the `index` prop to stagger animation timing across multiple skeletons.
 *
 * @example
 * ```
 * <Skeleton width={200} height={20} />
 * <Skeleton width={40} height={40} radius="rounded" />
 * <Skeleton width={300} height={16} index={0} />
 * <Skeleton width={280} height={16} index={1} />
 * ```
 */
export declare function Skeleton({ width, height, radius: radiusProp, index, 'data-testid': testId, xstyle, className, style, ref, ...props }: SkeletonProps): import("react").JSX.Element;
export declare namespace Skeleton {
    var displayName: string;
}
export {};
//# sourceMappingURL=Skeleton.d.ts.map