elegance/lib.rs
1//! Elegance — opinionated, beautiful widgets for egui.
2//!
3//! Elegance is a small companion crate to [`egui`] that provides a cohesive
4//! design system inspired by modern web UIs: chunky rounded buttons in a
5//! handful of accent colors, crisp inputs with a focus ring, pill-shaped
6//! status indicators, cards, tabs, segmented buttons, and a matching colour
7//! palette. Four palettes ship built-in — two dark
8//! ([`Theme::slate`] and [`Theme::charcoal`]) and two light
9//! ([`Theme::frost`] and [`Theme::paper`]) — paired so you can toggle without
10//! a layout shift.
11//!
12//! # Getting started
13//!
14//! ```no_run
15//! use eframe::egui;
16//! use elegance::{Theme, Button, Card, Accent};
17//!
18//! fn main() -> eframe::Result<()> {
19//! eframe::run_ui_native(
20//! "elegance demo",
21//! eframe::NativeOptions::default(),
22//! |ui, _| {
23//! Theme::slate().install(ui.ctx());
24//! egui::CentralPanel::default().show_inside(ui, |ui| {
25//! Card::new().heading("Hello").show(ui, |ui| {
26//! if ui.add(Button::new("Click me").accent(Accent::Blue))
27//! .clicked()
28//! {
29//! println!("clicked!");
30//! }
31//! });
32//! });
33//! },
34//! )
35//! }
36//! ```
37//!
38//! # Design
39//!
40//! All visuals are driven by a [`Theme`] value. Calling [`Theme::install`]
41//! once at startup configures [`egui::Style`] so that built-in widgets
42//! (labels, sliders, etc.) inherit the elegance look, and it stores the
43//! theme in `ctx` memory so elegance widgets can pick it up automatically.
44
45#![warn(missing_debug_implementations)]
46#![deny(missing_docs)]
47
48mod accordion;
49mod badge;
50mod browser_tabs;
51mod button;
52mod callout;
53mod card;
54mod checkbox;
55mod collapsing;
56mod color_picker;
57mod drawer;
58mod file_drop_zone;
59mod flash;
60mod indicator;
61mod input;
62mod knob;
63mod log_bar;
64mod menu;
65mod menu_bar;
66mod modal;
67mod multi_terminal;
68mod pairing;
69mod pill;
70mod popover;
71mod progress_bar;
72mod progress_ring;
73mod range_slider;
74mod segmented;
75mod select;
76mod slider;
77mod spinner;
78mod steps;
79mod switch;
80mod tabs;
81mod text_area;
82mod theme;
83mod theme_switcher;
84mod toast;
85mod tooltip;
86
87pub use accordion::{Accordion, AccordionItem, AccordionUi};
88pub use badge::{Badge, BadgeTone};
89pub use browser_tabs::{BrowserTab, BrowserTabs, BrowserTabsEvent};
90pub use button::{Button, ButtonSize};
91pub use callout::{Callout, CalloutTone};
92pub use card::Card;
93pub use checkbox::Checkbox;
94pub use collapsing::CollapsingSection;
95pub use color_picker::ColorPicker;
96pub use drawer::{Drawer, DrawerSide};
97pub use file_drop_zone::{FileDropResponse, FileDropZone};
98pub use flash::{flash_error, flash_success, FlashKind, ResponseFlashExt, FLASH_DURATION};
99pub use indicator::{Indicator, IndicatorState};
100pub use input::TextInput;
101pub use knob::{Knob, KnobScale, KnobSize};
102pub use log_bar::{LogBar, LogEntry, LogKind};
103pub use menu::{Menu, MenuItem, SubMenuItem};
104pub use menu_bar::{MenuBar, MenuBarUi};
105pub use modal::Modal;
106pub use multi_terminal::{
107 LineKind, MultiTerminal, TerminalEvent, TerminalLine, TerminalPane, TerminalStatus,
108};
109pub use pairing::{PairItem, Pairing};
110pub use pill::StatusPill;
111pub use popover::{Popover, PopoverSide};
112pub use progress_bar::ProgressBar;
113pub use progress_ring::ProgressRing;
114pub use range_slider::RangeSlider;
115pub use segmented::SegmentedButton;
116pub use select::Select;
117pub use slider::Slider;
118pub use spinner::Spinner;
119pub use steps::{Steps, StepsStyle};
120pub use switch::Switch;
121pub use tabs::TabBar;
122pub use text_area::TextArea;
123pub use theme::{Accent, BuiltInTheme, Palette, Theme, Typography};
124pub use theme_switcher::ThemeSwitcher;
125pub use toast::{Toast, Toasts};
126pub use tooltip::{Tooltip, TooltipSide};
127
128/// Re-export of [`egui`] for convenience.
129pub use egui;
130
131/// Stable codepoints for the icon glyphs bundled in the Elegance Symbols
132/// font. All icons are sourced from [Lucide](https://lucide.dev) and are
133/// kept in sync via `scripts/update_lucide_glyphs.py`. Use these in
134/// [`egui::RichText`] when you want one of elegance's icons in your own
135/// UI.
136///
137/// ```no_run
138/// # use elegance::glyphs;
139/// # egui::__run_test_ui(|ui| {
140/// ui.label(egui::RichText::new(glyphs::UPLOAD).size(24.0));
141/// # });
142/// ```
143pub mod glyphs {
144 /// Upload-tray icon. Source: [Lucide `upload`](https://lucide.dev/icons/upload).
145 pub const UPLOAD: char = '\u{E000}';
146 /// Download-tray icon. Source: [Lucide `download`](https://lucide.dev/icons/download).
147 pub const DOWNLOAD: char = '\u{E001}';
148 /// Search / magnifier icon. Source: [Lucide `search`](https://lucide.dev/icons/search).
149 pub const SEARCH: char = '\u{E002}';
150 /// Pin icon. Source: [Lucide `pin`](https://lucide.dev/icons/pin).
151 pub const PIN: char = '\u{E003}';
152 /// Copy / duplicate icon. Source: [Lucide `copy`](https://lucide.dev/icons/copy).
153 pub const COPY: char = '\u{E004}';
154 /// Circular alert icon. Source: [Lucide `circle-alert`](https://lucide.dev/icons/circle-alert).
155 pub const CIRCLE_ALERT: char = '\u{E005}';
156 /// Network / hub icon. Source: [Lucide `network`](https://lucide.dev/icons/network).
157 pub const NETWORK: char = '\u{E006}';
158 /// Zoom-in (magnifier with `+`) icon. Source: [Lucide `zoom-in`](https://lucide.dev/icons/zoom-in).
159 pub const ZOOM_IN: char = '\u{E007}';
160 /// Zoom-out (magnifier with `-`) icon. Source: [Lucide `zoom-out`](https://lucide.dev/icons/zoom-out).
161 pub const ZOOM_OUT: char = '\u{E008}';
162 /// Power icon. Source: [Lucide `power`](https://lucide.dev/icons/power).
163 pub const POWER: char = '\u{E009}';
164 /// Check / done mark, mapped at standard U+2713 so plain `'✓'` literals
165 /// also pick up the elegance treatment.
166 /// Source: [Lucide `check`](https://lucide.dev/icons/check).
167 pub const CHECK: char = '\u{2713}';
168 /// Cross / dismiss mark, mapped at standard U+2717 so plain `'✗'` literals
169 /// also pick up the elegance treatment.
170 /// Source: [Lucide `x`](https://lucide.dev/icons/x).
171 pub const X: char = '\u{2717}';
172}
173
174/// Request a repaint such that the next paint comes ~`1/hz` seconds from now,
175/// independent of display refresh rate.
176///
177/// [`egui::Context::request_repaint_after`] internally subtracts `predicted_dt`
178/// from the requested delay to budget for the paint taking time. On a 60 Hz
179/// integration (egui's default) that subtraction is ~16.7 ms, so a naive
180/// `request_repaint_after(1/30 s)` lands on the very next vsync and produces
181/// ~60 Hz — double the rate you asked for. This helper adds `predicted_dt`
182/// back in so the effective cadence lands near `1/hz` on any refresh rate.
183///
184/// Typical use: throttle continuously-animating widgets (spinners, progress
185/// fills) to 20–30 Hz so they don't burn a full vsync budget on motion the
186/// eye can't resolve.
187#[track_caller]
188pub fn request_repaint_at_rate(ctx: &egui::Context, hz: f32) {
189 let pd = ctx.input(|i| i.predicted_dt);
190 if let Ok(d) = std::time::Duration::try_from_secs_f32(1.0 / hz + pd) {
191 ctx.request_repaint_after(d);
192 }
193}