/**
 * @fileoverview Saasflare Skeleton — loading placeholder with shimmer effect.
 * @module packages/ui/components/ui/skeleton
 * @package ui
 *
 * Self-contained implementation. Shimmer keyframes defined in theme.css.
 * When reduced motion is preferred, shows a static gradient instead of shimmer.
 *
 * Radius via the optional `as` prop maps to the design-system scale so the
 * placeholder matches the component it stands in for. Without `as`, the
 * legacy `rounded-md` class is preserved (non-breaking).
 *
 * @example
 * import { Skeleton } from "@saasflare/ui";
 * <Skeleton as="text" className="h-4 w-48" />
 * <Skeleton as="avatar" className="h-12 w-12" />
 * <Skeleton as="card" className="h-40 w-full" />
 */
import * as React from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Component the skeleton imitates — drives radius from the design tokens. */
type SkeletonAs = "avatar" | "text" | "card";
/**
 * Props for {@link Skeleton}.
 *
 * Extends the native div props with {@link SaasflareComponentProps}; the
 * optional `as` prop snaps the placeholder's radius to the design-token scale
 * of the component it stands in for.
 */
interface SkeletonProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
    /**
     * Component shape to imitate. When set, radius follows the design-system
     * scale (and at `data-radius="pill"`, all variants collapse to fully rounded
     * automatically — see theme.css).
     *
     * - `avatar` → fully rounded
     * - `text`   → `--radius-sm`
     * - `card`   → `--radius-lg`
     *
     * Omit for legacy behavior (`rounded-md` Tailwind class).
     */
    as?: SkeletonAs;
}
/**
 * Skeleton loading placeholder with animated shimmer gradient.
 *
 * @component
 * @package ui
 */
declare function Skeleton({ as, className, style, surface, radius, animated, iconWeight, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
export { Skeleton, type SkeletonProps };