Skeleton Glass

1/**
2 * SkeletonGlass Component
3 *
4 * Glass-themed loading skeleton with:
5 * - Theme-aware styling (glass/light/aurora)
6 * - Shimmer animation
7 * - Variant presets (text, title, avatar, thumbnail, card)
8 */
9 
10import { forwardRef, type CSSProperties } from 'react';
11import { type VariantProps } from 'class-variance-authority';
12import { cn } from '@/lib/utils';
13import { skeletonVariants } from '@/lib/variants/skeleton-glass-variants';
14import '@/glass-theme.css';
15 
16// ========================================
17// PROPS INTERFACE
18// ========================================
19 
20export interface SkeletonGlassProps
21  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
22  readonly width?: string | number;
23  readonly height?: string | number;
24}
25 
26// ========================================
27// COMPONENT
28// ========================================
29 
30export const SkeletonGlass = forwardRef<HTMLDivElement, SkeletonGlassProps>(
31  ({ className, variant = 'text', width, height, style, ...props }, ref) => {
32    const skeletonStyles: CSSProperties = {
33      width,
34      height,
35      background:
36        'linear-gradient(90deg, var(--skeleton-bg) 25%, var(--skeleton-shine) 50%, var(--skeleton-bg) 75%)',
37      backgroundSize: '200% 100%',
38      animation: 'skeleton-loading 1.5s infinite',
39      ...style,
40    };
41 
42    return (
43      <div
44        ref={ref}
45        data-slot="skeleton"
46        className={cn(skeletonVariants({ variant }), className)}
47        style={skeletonStyles}
48        aria-hidden="true"
49        {...props}
50      />
51    );
52  }
53);
54 
55SkeletonGlass.displayName = 'SkeletonGlass';
56 
57// ========================================
58// SHADCN/UI COMPATIBLE ALIAS
59// ========================================
60 
61/**
62 * Skeleton - shadcn/ui compatible alias for SkeletonGlass
63 *
64 * @example
65 * ```tsx
66 * import { Skeleton } from 'shadcn-glass-ui'
67 *
68 * <Skeleton className="h-4 w-[200px]" />
69 * <Skeleton className="h-12 w-12 rounded-full" />
70 * ```
71 * @since v2.5.0
72 */
73export const Skeleton = SkeletonGlass;