shadow_design/
lib.rs

1//! # Shadow Design
2//!
3//! A modular, high-performance UI component library for **Dioxus 0.7** applications (Web, Desktop, and Mobile).
4//! Built with Mantine-inspired themes, tactile craft surfaces, dark aesthetics, and zero external runtime dependencies.
5//!
6//! ## 🎨 Zero-Tooling Style Integration (`STYLES`)
7//!
8//! Shadow Design uses a **100% Pure SCSS** architecture bundled directly inside the crate.
9//! You do **not** need Node.js, npm, Tailwind CLI, or external bundlers/watchers in your application.
10//!
11//! The compiled stylesheet is exposed as a Dioxus [`Asset`] via [`STYLES`]. Dioxus's native asset pipeline
12//! automatically processes and bundles the SCSS stylesheet at compile time.
13//!
14//! ### Quick Setup
15//!
16//! In your root application component, link [`STYLES`] directly using `document::Link`:
17//!
18//! ```rust,no_run
19//! use dioxus::prelude::*;
20//! use shadow_design::prelude::*;
21//!
22//! fn main() {
23//!     dioxus::launch(App);
24//! }
25//!
26//! #[component]
27//! fn App() -> Element {
28//!     rsx! {
29//!         // 1. Link the master stylesheet directly from the crate
30//!         document::Link { rel: "stylesheet", href: STYLES }
31//!
32//!         // 2. Wrap with NotificationProvider if using toast notifications
33//!         NotificationProvider {
34//!             MainView {}
35//!         }
36//!     }
37//! }
38//!
39//! #[component]
40//! fn MainView() -> Element {
41//!     rsx! {
42//!         Card {
43//!             title: "Welcome to Shadow Design".to_string(),
44//!             shadow: CardShadow::Md,
45//!             p { "High-performance Dioxus UI components with pure SCSS styling." }
46//!             Button {
47//!                 variant: ButtonVariant::Primary,
48//!                 onclick: move |_| println!("Clicked!"),
49//!                 "Get Started"
50//!             }
51//!         }
52//!     }
53//! }
54//! ```
55//!
56//! Alternatively, you can alias or re-export the stylesheet constant:
57//!
58//! ```rust,no_run
59//! use dioxus::prelude::*;
60//!
61//! pub const STYLES: Asset = shadow_design::STYLES;
62//! ```
63//!
64//! ### What [`STYLES`] Includes
65//!
66//! - **CSS Preflight Reset**: Normalizes browser default styles (`button`, `input`, `select`, etc.) to eliminate native browser artifacts.
67//! - **Elevation Layers & Z-Index Stack**: Mathematically sound z-index scale (`_zindex.scss`) preventing dropdown, modal, drawer, or tooltip clipping.
68//! - **Built-in Theme Presets**: Design tokens for 5 core presets:
69//!   - `Ultraviolet Shadow` (Default): Deep black (`#000000`) with purple accents and specular highlights.
70//!   - `Obsidian Titanium`: Strict monochrome silver and titanium finish.
71//!   - `Crimson Phoenix`: Deep black with vibrant phoenix crimson glow.
72//!   - `Cyber Cyan`: High-contrast electric cyan aesthetic.
73//!   - `Emerald Matrix`: Crisp emerald green telemetry style.
74//! - **Micro-Interactions**: Tactile button press feedback, smooth hover states, and ambient glow matrix.
75//! - **Keyframe Animations**: Smooth slide-in toast notifications, dialog zoom scaling, accordion unrolls, and indeterminate loaders.
76//!
77//! ## 🧩 Feature Flags
78//!
79//! Shadow Design is built with a zero-bloat architecture. Each component is isolated behind its own Cargo feature:
80//!
81//! | Feature Flag | Module | Description |
82//! | :--- | :--- | :--- |
83//! | `all` | *All modules* | Enables the complete suite of components and theming |
84//! | `button` | [`button`] | Buttons with BEM variants, sizes, loading spinners, and tactile active states |
85//! | `card` | [`card`] | Container cards with elevated, interactive, and metric variants |
86//! | `input` | [`input`] | Reactive text inputs with clickable icons, clear buttons, and signal binding |
87//! | `checkbox` | [`checkbox`] | Tactile checkboxes with indeterminate and error states |
88//! | `badge` | [`badge`] | Status labels, pill badges, and pulsating live dots |
89//! | `navbar` | [`navbar`] | Responsive navigation bars with brand and action slots |
90//! | `modal` | [`modal`] | Overlay dialog modals with animated backdrop and signal control |
91//! | `alert` | [`alert`] | Callout banners with semantic variants and dismiss handlers |
92//! | `theme` | [`theme`] | Mantine-style reactive theme engine (`ThemeProvider`, `use_theme`) |
93//! | `icon` | [`icon`] | Zero-dependency native SVG icons (1.5px stroke) |
94//! | `typography` | [`typography`] | Typography primitives (`Heading`, `Text`, `Kbd`, `Code`) |
95//! | `notification` | [`notification`] | Global toast notification system (`NotificationProvider`, `use_notification`) |
96//! | `tabs` | [`tabs`] | Horizontal tab navigation (`TabList`, `Tab`, `TabPanel`) |
97//! | `switch` | [`switch`] | Precision tactile toggle switches |
98//! | `tooltip` | [`tooltip`] | Floating hover tooltips with 4-directional placement |
99//! | `drawer` | [`drawer`] | Slide-over side panels from left or right with backdrop |
100//! | `dropdown` | [`dropdown`] | Trigger-anchored context menus with auto-dismiss |
101//! | `animation` | [`animation`] | Optical transitions and micro-animation wrappers |
102//!
103//! ## 🎨 Reactive Theming vs. Zero-Cost Static Fallback
104//!
105//! Shadow Design components support dual execution paths:
106//!
107//! 1. **With `theme` feature enabled**: Components reactively read the current theme from Dioxus Context via [`theme::use_theme()`]. When you switch palettes, radius scale, or glow mode at runtime, every mounted component updates immediately.
108//! 2. **Without `theme` feature enabled**: Components fall back transparently to optimized, hardcoded static classes, incurring zero context lookup or runtime overhead.
109//!
110//! Or enable the `all` feature to include the entire suite.
111
112use dioxus::prelude::*;
113
114/// Master SCSS stylesheet asset provided by the Shadow Design library.
115///
116/// This asset points to `/scss/main.scss` packaged inside the crate and is processed
117/// natively by Dioxus 0.7's [`asset!`] macro. It contains the complete styling engine:
118/// preflight reset, typography, theme color variables, surface elevation layers,
119/// component classes (`.sd-btn`, `.sd-card`, `.sd-input`, etc.), and keyframe animations.
120///
121/// ### Usage in Dioxus
122///
123/// Include it directly in your application's root component head:
124///
125/// ```rust,no_run
126/// use dioxus::prelude::*;
127/// use shadow_design::prelude::*;
128///
129/// #[component]
130/// fn App() -> Element {
131///     rsx! {
132///         // Embed the compiled stylesheet
133///         document::Link { rel: "stylesheet", href: STYLES }
134///
135///         // Your UI components
136///         Button { "Click me" }
137///     }
138/// }
139/// ```
140///
141/// Downstream projects do not need Node.js, npm, or Tailwind CLI; Dioxus bundles
142/// the SCSS stylesheet automatically.
143pub const STYLES: Asset = asset!("/scss/main.scss");
144
145#[cfg(feature = "alert")]
146pub mod alert;
147#[cfg(feature = "animation")]
148pub mod animation;
149#[cfg(feature = "badge")]
150pub mod badge;
151#[cfg(feature = "button")]
152pub mod button;
153#[cfg(feature = "card")]
154pub mod card;
155#[cfg(feature = "checkbox")]
156pub mod checkbox;
157#[cfg(feature = "drawer")]
158pub mod drawer;
159#[cfg(feature = "dropdown")]
160pub mod dropdown;
161#[cfg(feature = "icon")]
162pub mod icon;
163#[cfg(feature = "input")]
164pub mod input;
165#[cfg(feature = "modal")]
166pub mod modal;
167#[cfg(feature = "navbar")]
168pub mod navbar;
169#[cfg(feature = "notification")]
170pub mod notification;
171#[cfg(feature = "switch")]
172pub mod switch;
173#[cfg(feature = "tabs")]
174pub mod tabs;
175#[cfg(feature = "theme")]
176pub mod theme;
177#[cfg(feature = "tooltip")]
178pub mod tooltip;
179#[cfg(feature = "typography")]
180pub mod typography;
181
182pub mod prelude {
183    #[cfg(feature = "alert")]
184    pub use crate::alert::*;
185    #[cfg(feature = "animation")]
186    pub use crate::animation::*;
187    #[cfg(feature = "badge")]
188    pub use crate::badge::*;
189    #[cfg(feature = "button")]
190    pub use crate::button::*;
191    #[cfg(feature = "card")]
192    pub use crate::card::*;
193    #[cfg(feature = "checkbox")]
194    pub use crate::checkbox::*;
195    #[cfg(feature = "drawer")]
196    pub use crate::drawer::*;
197    #[cfg(feature = "dropdown")]
198    pub use crate::dropdown::*;
199    #[cfg(feature = "icon")]
200    pub use crate::icon::*;
201    #[cfg(feature = "input")]
202    pub use crate::input::*;
203    #[cfg(feature = "modal")]
204    pub use crate::modal::*;
205    #[cfg(feature = "navbar")]
206    pub use crate::navbar::*;
207    #[cfg(feature = "notification")]
208    pub use crate::notification::*;
209    #[cfg(feature = "switch")]
210    pub use crate::switch::*;
211    #[cfg(feature = "tabs")]
212    pub use crate::tabs::*;
213    #[cfg(feature = "theme")]
214    pub use crate::theme::*;
215    #[cfg(feature = "tooltip")]
216    pub use crate::tooltip::*;
217    #[cfg(feature = "typography")]
218    pub use crate::typography::*;
219    pub use crate::STYLES;
220}
shadow_design/lib.rs

shadow_design/
lib.rs
