feat: Empty State component

[Samyssmile]

Summary

Add a ct-empty-state component for placeholder content when lists, tables, search results, or other data views have no items to display. Empty states are a critical UX pattern — without them, users see a blank void and wonder if something is broken. Every data-driven view needs one, making this a high-frequency component.

Requirements

Structure

• Centered layout (both horizontal and vertical centering)
• Stacked content: icon → title → description → action(s)
• All sub-elements are optional (flexible composition)

Elements

• ct-empty-state__icon — large illustrative icon or illustration (64px default, muted color)
• ct-empty-state__title — short headline ("No results found", "No projects yet")
• ct-empty-state__description — supporting text explaining why it's empty or what to do next
• ct-empty-state__actions — one or two CTAs (primary: "Create project", secondary: "Learn more")

Sizes

• ct-empty-state--sm — compact version for inline/card contexts (smaller icon, tighter spacing)
• default (md) — standard standalone use
• ct-empty-state--lg — full-page empty states (larger icon, more padding)

Variants

• Default — generic empty state
• ct-empty-state--search — optimized for "no search results" (suggests clearing filters)
• ct-empty-state--error — for failed data loads (uses danger color tokens, suggests retry)
• ct-empty-state--bordered — with a dashed border container (useful when placed inside other components like cards or table bodies)

Integration

• Should fit naturally inside ct-card__body, ct-data-table__table, and ct-modal__body
• max-width constraint to prevent overly wide text on large screens

Accessibility

• Container: role="status" for live-region announcements when content transitions from populated to empty
• Icon: aria-hidden="true" (decorative)
• Action buttons follow standard ct-button accessibility
• Meaningful title + description provide context for screen readers

Naming

.ct-empty-state
.ct-empty-state--sm / --lg
.ct-empty-state--search / --error / --bordered
.ct-empty-state__icon
.ct-empty-state__title
.ct-empty-state__description
.ct-empty-state__actions

Design Tokens

• --ct-empty-state-icon-size: 64px
• --ct-empty-state-icon-color: var(--color-text-muted)
• --ct-empty-state-max-width: 400px
• --ct-empty-state-padding: var(--space-8)
• --ct-empty-state-gap: var(--space-4)

Files

• components/components.css — component styles
• stories/EmptyState.stories.js — stories for all variants, sizes, inside card, inside data table, search variant, error variant