<!-- source-hash: 541fa933e52d5b0660ec117e43e3c037 -->
A comprehensive React skeleton loading component library that provides animated placeholders for various UI elements during content loading states. The components use a pulsing animation to simulate loading content.

## Key Components

- **`Skeleton`** - Base skeleton component with pulse animation
- **`SkeletonText`** - Multi-line text placeholder with configurable line count
- **`SkeletonCard`** - Card-style placeholder with optional image area
- **`SkeletonGrid`** - Responsive grid layout of skeleton cards
- **`SkeletonButton`** - Button placeholder with size variants (sm, default, lg)
- **`SkeletonHeading`** - Heading placeholder with 6 size levels
- **`SkeletonList`** - List items with avatar and text placeholders
- **`SkeletonNavigation`** - Horizontal navigation bar placeholder

## Usage Example

```typescript
import { 
  Skeleton, 
  SkeletonText, 
  SkeletonCard, 
  SkeletonGrid 
} from './skeleton'

// Basic skeleton
<Skeleton className="w-32 h-4" />

// Multi-line text placeholder
<SkeletonText lines={3} />

// Card with image placeholder
<SkeletonCard showImage={true} />

// Grid of loading cards
<SkeletonGrid 
  columns={3} 
  items={6} 
  showImages={true} 
/>

// Different button sizes
<SkeletonButton size="lg" />

// Loading list with avatars
<SkeletonList items={5} />
```

All components are built with `React.forwardRef` for ref forwarding and use the `cn` utility for className merging. They leverage Tailwind CSS classes with the `ods-border` design system color and include responsive breakpoints for optimal display across devices.