// Basic usage with default semantic element
<Typography variant="h1">Main Heading</Typography>

// Custom element with as prop
<Typography variant="h2" as="h1">SEO Optimized Heading</Typography>

// With color variants
<Typography variant="body" color="muted">Secondary text</Typography>
<Typography variant="caption" color="danger">Error message</Typography>

// With truncation
<Typography variant="body" truncate>
  Long text that will be truncated with ellipsis...
</Typography>

// Multi-line clamp with title for accessibility
<Typography variant="body" lineClamp={3} showTitle>
  Long text that will be clamped to 3 lines with ellipsis
  and show full text on hover...
</Typography>

// With utility props
<Typography
  variant="h3"
  align="center"
  weight="semibold"
  transform="uppercase"
>
  Centered Uppercase Heading
</Typography>

// Works with translation utilities and automatic RTL
<Typography variant="body">{t('welcome.message')}</Typography>

// Manual RTL control for mixed content
<Typography variant="body" dir="rtl">
  טקסט בעברית עם English names מעורב
</Typography>

// Auto-detect direction based on content
<Typography variant="body" dir="auto">
  Mixed content with automatic direction
</Typography>