# Card Components

Zestaw komponentów do tworzenia kart z opcjonalnym nagłówkiem, menu i stopką.

## Komponenty

- `ui-card` - główny kontener karty
- `ui-card-title` - tytuł karty (standalone komponent)
- `ui-card-menu` - menu/przyciski w nagłówku (standalone komponent)  
- `ui-card-footer` - stopka karty (standalone komponent)

## Użycie

### Podstawowe użycie z tytułem jako Input

```html
<ui-card title="Tytuł karty">
  <p>Zawartość karty</p>
</ui-card>
```

### Użycie z komponentem ui-card-title

```html
<ui-card>
  <ui-card-title>
    <h2>Niestandardowy tytuł</h2>
    <span class="badge">Nowy</span>
  </ui-card-title>
  <p>Zawartość karty</p>
</ui-card>
```

### Pełne użycie z wszystkimi komponentami

```html
<ui-card title="Statystyki">
  <ui-card-menu>
    <button class="btn btn-sm">Edytuj</button>
    <button class="btn btn-sm">Usuń</button>
  </ui-card-menu>
  
  <div class="stats">
    <div class="stat-item">
      <span class="value">123</span>
      <span class="label">Użytkownicy</span>
    </div>
    <div class="stat-item">
      <span class="value">456</span>
      <span class="label">Zamówienia</span>
    </div>
  </div>
  
  <ui-card-footer>
    <small class="text-muted">Ostatnia aktualizacja: dziś</small>
  </ui-card-footer>
</ui-card>
```

### Użycie z komponentami ui-card-title i ui-card-menu

```html
<ui-card>
  <ui-card-title>
    <div class="d-flex align-items-center">
      <i class="icon-chart"></i>
      <span>Raporty sprzedaży</span>
    </div>
  </ui-card-title>
  
  <ui-card-menu>
    <div class="stats-mini">
      <span class="text-success">+12%</span>
    </div>
    <button class="btn btn-outline-primary btn-sm">Szczegóły</button>
  </ui-card-menu>
  
  <div class="chart-container">
    <!-- wykres -->
  </div>
  
  <ui-card-footer>
    <div class="d-flex justify-content-between">
      <span>Okres: ostatnie 30 dni</span>
      <a href="#" class="text-primary">Zobacz więcej</a>
    </div>
  </ui-card-footer>
</ui-card>
```

## API

### CardComponent (`ui-card`)

**Inputs:**
| Właściwość | Typ | Domyślna | Opis |
|------------|-----|----------|------|
| `title` | `string` | `undefined` | Tytuł karty wyświetlany w nagłówku |

**Content Projection:**
| Selektor | Opis |
|----------|------|
| `ui-card-title` | Komponent tytułu karty |
| `ui-card-menu` | Komponent menu w nagłówku |
| (default) | Główna zawartość karty |
| `ui-card-footer` | Komponent stopki karty |

### CardTitleComponent (`ui-card-title`)

**Opis:** Standalone komponent do wyświetlania tytułu karty z własnymi stylami.

### CardMenuComponent (`ui-card-menu`)

**Opis:** Standalone komponent do wyświetlania menu/przycisków w nagłówku karty.

### CardFooterComponent (`ui-card-footer`)

**Opis:** Standalone komponent do wyświetlania stopki karty z własnymi stylami.

## Zmienne CSS

Komponent używa następujących zmiennych CSS z systemu motywów:

### Kolory
- `--ui-color-card-bg` - tło karty
- `--ui-color-card-border` - kolor obramowania
- `--ui-color-card-title` - kolor tytułu
- `--ui-color-card-text` - kolor tekstu
- `--ui-color-card-footer-bg` - tło stopki

### Spacing
- `--ui-spacing-xs` (4px) - małe odstępy
- `--ui-spacing-sm` (8px) - średnie odstępy  
- `--ui-spacing-md` (16px) - standardowe padding
- `--ui-spacing-lg` (24px) - duże odstępy

### Layout
- `--ui-border-radius` (8px) - zaokrąglenie rogów
- `--ui-font-size-lg` (18px) - rozmiar czcionki tytułu
- `--ui-font-weight-semibold` (600) - grubość czcionki tytułu
- `--ui-card-header-min-height` (40px) - minimalna wysokość nagłówka

### Cienie
- `--ui-shadow-card` - standardowy cień karty
- `--ui-shadow-card-hover` - cień przy hover

## Responsywność

Na urządzeniach mobilnych (max-width: 768px):
- Nagłówek karty zmienia się na układ kolumnowy
- Menu wyrównuje się do prawej strony
- Zachowane są wszystkie funkcjonalności

## Przykłady stylizacji

### Karta z kolorowym nagłówkiem

```scss
.custom-card {
  .ui-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: -16px -16px 0;
    padding: 16px;
  }
  
  .ui-card-title {
    color: white;
  }
}
```

### Karta z ikoną

```html
<ui-card>
  <ui-card-title>
    <div class="d-flex align-items-center gap-2">
      <i class="icon-settings"></i>
      <span>Ustawienia</span>
    </div>
  </ui-card-title>
  
  <!-- zawartość -->
</ui-card>
```