1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
//! # Dioxus Components Library
//!
//! **Version: 0.1.1**
//!
//! A comprehensive collection of reusable Dioxus 0.7 components built with Tailwind CSS v4
//! and following Radix UI design patterns.
//!
//! ## Components (11 Total)
//!
//! - **Accordion** - Vertically stacked interactive headings with reveal sections
//! - **Avatar** - User avatar display with image loading and fallback support
//! - **Badge** - Flexible badge component with multiple style variants
//! - **Button** - Versatile button with 6 variants and 6 size options
//! - **Card** - Flexible card container with header, content, and footer sections
//! - **Checkbox** - Three-state checkbox (checked/unchecked/indeterminate)
//! - **Dialog** - Accessible modal dialogs with overlay, focus trap, and keyboard handling
//! - **Empty** - Empty state component for "no content" scenarios
//! - **Portal** - Render content outside the parent DOM hierarchy (modals, overlays)
//! - **Spinner** - Loading indicator with multiple sizes and colors
//! - **Tooltip** - Hover-triggered tooltips with flexible positioning
//!
//! ## Quick Start
//!
//! Add to your `Cargo.toml`:
//!
//! ```toml
//! [dependencies]
//! dioxus_components = "0.1.1"
//! dioxus = { version = "0.7.1", features = ["web"] }
//! ```
//!
//! ## Usage Example
//!
//! ```rust,no_run
//! use dioxus::prelude::*;
//! use dioxus_components::{Button, ButtonVariant, Spinner, SpinnerSize};
//!
//! #[component]
//! fn App() -> Element {
//! rsx! {
//! div {
//! class: "flex gap-4",
//! Button {
//! variant: ButtonVariant::Default,
//! "Click me"
//! }
//! Spinner {
//! size: SpinnerSize::Large,
//! color: "text-primary"
//! }
//! }
//! }
//! }
//! ```
//!
//! ## Styling
//!
//! All components use Tailwind CSS v4. Import the component styles in your `tailwind.css`:
//!
//!
//! For a complete example, see the `examples/` directory.
// Re-export commonly used items
pub use ;
pub use cn;