shadow-design 0.1.0

# Shadow Design (`shadow-design`)

Libreria di componenti UI modulare e ad alte prestazioni per **Dioxus 0.7**, costruita su architettura **100% Pure SCSS** nativa, senza dipendenze npm o Tailwind CLI.

---

## 📦 Installazione in Cargo.toml

```toml
[dependencies]
# Importa solo ciò che ti serve:
shadow-design = { version = "0.1.0", features = ["button", "card", "theme"] }

# Oppure l'intera suite:
# shadow-design = { version = "0.1.0", features = ["all"] }
```

---

## 🎨 Integrazione Diretta Asset SCSS in Dioxus 0.7

`shadow-design` fornisce direttamente il foglio di stile SCSS compilato nativamente dalla pipeline asset di Dioxus. **Non richiede comandi aggiuntivi, nessun watcher e nessun compilatore esterno.**

Nel tuo file `main.rs` (o nel componente radice `App`):

```rust
use dioxus::prelude::*;
use shadow_design::prelude::*;

pub const STYLES: Asset = shadow_design::STYLES;

#[component]
fn App() -> Element {
    rsx! {
        // Inclusione automatica del foglio di stile
        document::Link { rel: "stylesheet", href: STYLES }

        NotificationProvider {
            MyContent {}
        }
    }
}
```

---

## 🧩 Feature Flags Disponibili

| Feature | Componente | Descrizione |
|---|---|---|
| `button` | `Button`, `ButtonVariant`, `ButtonSize` | Pulsanti con varianti BEM, dimensioni, loading spinner |
| `card` | `Card`, `CardShadow`, `CardVariant` | Schede contenitore con varianti, ombre e footer |
| `input` | `TextInput` | Input di testo reattivi con icone cliccabili e clear button |
| `checkbox` | `Checkbox`, `CheckboxSize` | Caselle di spunta tattili con stati indeterminato ed errore |
| `badge` | `Badge`, `BadgeVariant` | Etichette, pillole di stato e dot pulsante |
| `navbar` | `Navbar` | Barra di navigazione responsive con specular highlight |
| `modal` | `Modal` | Finestre di dialogo in overlay con backdrop click-to-close |
| `alert` | `Alert`, `AlertVariant` | Riquadri di notifica con icone semantiche e dismiss |
| `notification` | `NotificationProvider`, `use_notification` | Sistema Toast globale a comparsa |
| `tabs` | `TabList`, `Tab`, `TabPanel` | Navigazione a schede orizzontali |
| `switch` | `Switch` | Interruttori a scatto tattili ad alta precisione |
| `tooltip` | `Tooltip`, `TooltipPosition` | Micro-etichette fluttuanti su hover a 4 direzioni |
| `drawer` | `Drawer`, `DrawerPosition`, `DrawerSize` | Pannelli laterali a scomparsa da sinistra o destra |
| `dropdown` | `Dropdown`, `DropdownItem`, `DropdownPlacement` | Menu a tendina ancorati al trigger |
| `icon` | Native SVG Icons | Icone vettoriali ad alta nitidezza senza dipendenze esterne |
| `typography` | `Heading`, `Text`, `Kbd`, `Code` | Componenti tipografici con scala Geist |
| `animation` | Optical Transitions | Transizioni ottiche e micro-animazioni Dioxus |
| `theme` | `ThemeProvider`, `use_theme`, `Theme` | Engine reattivo Mantine con 5 preset cromatici |
| `all` | *Tutti i componenti* | Abilita l'intera suite |

---

## 💻 Esempio d'Uso

```rust
use dioxus::prelude::*;
use shadow_design::prelude::*;

#[component]
pub fn MyView() -> Element {
    rsx! {
        Alert {
            title: "Operazione completata".to_string(),
            variant: AlertVariant::Success,
            "Tutti i componenti sono sincronizzati correttamente in puro SCSS!"
        }

        Card {
            title: "Scheda di Esempio".to_string(),
            shadow: CardShadow::Md,
            p { "Contenuto del corpo della scheda." }
            Button {
                variant: ButtonVariant::Primary,
                onclick: move |_| println!("Pulsante premuto!"),
                "Conferma"
            }
        }
    }
}
```

---

## 🎨 Sistema del Tema Mantine (`theme`)

Con la feature `theme` attiva, puoi commutare dinamicamente il colore primario, il raggio di curvatura e il micro-glow su tutti i componenti senza duplicare stili:

- **Preset inclusi**:
  - `Theme::shadow()`: Ultraviolet Shadow (Default viola profondo)
  - `Theme::obsidian()`: Obsidian Titanium (Monocromatico rigoroso)
  - `Theme::crimson()`: Crimson Phoenix (Rosso fenice)
  - `Theme::cyan()`: Cyber Cyan (Ciano elettrico)
  - `Theme::emerald()`: Emerald Matrix (Verde smeraldo)