import type React from "react"; interface UnifiedSkeletonProps extends React.HTMLAttributes { className?: string; variant?: 'default' | 'text' | 'circular' | 'rectangular'; width?: string | number; height?: string | number; /** * Disable animation for users who prefer reduced motion */ animate?: boolean; /** * Accessibility label for screen readers */ 'aria-label'?: string; } /** * UnifiedSkeleton Component * * Base skeleton component with consistent styling across the application. * * Design Specifications: * - Color: #2A2A2A base with #3A3A3A pulse highlight * - Animation: 1.5s pulse duration, ease-in-out timing * - Responsive: Mobile-first approach with proper scaling * - Accessibility: ARIA labels and reduced motion support * * @param variant - Shape variant: default (rounded), text (rounded-sm), circular, rectangular * @param width - Custom width (defaults to full width) * @param height - Custom height (defaults to auto based on variant) * @param animate - Enable/disable animation (respects prefers-reduced-motion) * @param aria-label - Accessibility label for screen readers */ export declare function UnifiedSkeleton({ className, variant, width, height, animate, 'aria-label': ariaLabel, ...props }: UnifiedSkeletonProps): React.JSX.Element; /** * Text skeleton variants for consistent typography loading */ export declare const TextSkeleton: { /** * Large heading skeleton (h1, h2) */ Heading: ({ className, ...props }: Omit) => React.JSX.Element; /** * Medium heading skeleton (h3, h4) */ Subheading: ({ className, ...props }: Omit) => React.JSX.Element; /** * Body text skeleton */ Body: ({ className, ...props }: Omit) => React.JSX.Element; /** * Small text skeleton (captions, metadata) */ Caption: ({ className, ...props }: Omit) => React.JSX.Element; }; /** * Interactive element skeletons */ export declare const InteractiveSkeleton: { /** * Button skeleton with proper touch targets */ Button: ({ className, ...props }: Omit) => React.JSX.Element; /** * Input field skeleton */ Input: ({ className, ...props }: Omit) => React.JSX.Element; /** * Filter chip skeleton */ Chip: ({ className, ...props }: Omit) => React.JSX.Element; }; /** * Media skeletons for images and icons */ export declare const MediaSkeleton: { /** * Avatar/profile image skeleton */ Avatar: ({ size, className, ...props }: Omit & { size?: "sm" | "md" | "lg"; }) => React.JSX.Element; /** * Card image skeleton (1200×630 OG aspect — matches entity-cards default * so loading state never causes a height shift when card data arrives) */ CardImage: ({ className, ...props }: Omit) => React.JSX.Element; /** * Icon skeleton */ Icon: ({ size, className, ...props }: Omit & { size?: "sm" | "md" | "lg"; }) => React.JSX.Element; }; export {}; //# sourceMappingURL=unified-skeleton.d.ts.map