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

[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):

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

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)

shadow-design 0.1.0