add radio

crates/core/src/lib.rs

@@ -10,3 +10,6 @@ pub mod checkbox;
 
 #[cfg(feature = "switch")]
 pub mod switch;
+
+#[cfg(feature = "radio")]
+pub mod radio;

crates/core/src/radio.rs

@@ -0,0 +1,210 @@
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    App, BoxShadow, ElementId, InteractiveElement as _, IntoElement, ParentElement as _,
+    RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Toggled, Window,
+    div, px,
+};
+use gpui_native_theme::ActiveTheme as _;
+
+use crate::common::{h_flex, v_flex};
+
+/// The group's change reporter, fired with the clicked radio's value.
+type ChangeHandler<V> = std::rc::Rc<dyn Fn(V, &mut Window, &mut App)>;
+
+/// Radio button.
+pub struct Radio<V> {
+    id: ElementId,
+    value: V,
+    label: Option<SharedString>,
+    disabled: bool,
+    a11y_label: Option<SharedString>,
+}
+
+impl<V> Radio<V>
+where
+    V: Clone + PartialEq + 'static,
+{
+    /// Creates a radio representing `value`.
+    pub fn new<I>(id: I, value: V) -> Self
+    where
+        I: Into<ElementId>,
+    {
+        Self {
+            id: id.into(),
+            value,
+            label: None,
+            disabled: false,
+            a11y_label: None,
+        }
+    }
+
+    /// Sets the visible label; clicking it selects the radio too.
+    pub fn label<L>(mut self, label: L) -> Self
+    where
+        L: Into<SharedString>,
+    {
+        self.label = Some(label.into());
+        self
+    }
+
+    /// Renders the radio inert, unfocusable, and dimmed.
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    /// Overrides the accessibility label, which defaults to the visible label.
+    pub fn accessibility_label<L>(mut self, label: L) -> Self
+    where
+        L: Into<SharedString>,
+    {
+        self.a11y_label = Some(label.into());
+        self
+    }
+}
+
+/// Group of radio buttons.
+#[derive(IntoElement)]
+pub struct RadioGroup<V>
+where
+    V: Clone + PartialEq + 'static,
+{
+    id: ElementId,
+    selected: Option<V>,
+    children: Vec<Radio<V>>,
+    a11y_label: Option<SharedString>,
+    on_change: Option<ChangeHandler<V>>,
+}
+
+impl<V> RadioGroup<V>
+where
+    V: Clone + PartialEq + 'static,
+{
+    /// Creates an empty group with nothing selected.
+    pub fn new<I>(id: I) -> Self
+    where
+        I: Into<ElementId>,
+    {
+        Self {
+            id: id.into(),
+            selected: None,
+            children: Vec::new(),
+            a11y_label: None,
+            on_change: None,
+        }
+    }
+
+    /// Sets the currently selected value.
+    pub fn selected(mut self, selected: Option<V>) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    /// Adds a radio to the group.
+    pub fn child(mut self, radio: Radio<V>) -> Self {
+        self.children.push(radio);
+        self
+    }
+
+    /// Sets the group's accessibility label.
+    pub fn accessibility_label<L>(mut self, label: L) -> Self
+    where
+        L: Into<SharedString>,
+    {
+        self.a11y_label = Some(label.into());
+        self
+    }
+
+    /// Sets the change handler.
+    pub fn on_change<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(V, &mut Window, &mut App) + 'static,
+    {
+        self.on_change = Some(std::rc::Rc::new(handler));
+        self
+    }
+}
+
+impl<V> RenderOnce for RadioGroup<V>
+where
+    V: Clone + PartialEq + 'static,
+{
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = theme.colors;
+        let ramps = theme.ramps;
+        let radius = theme.radius;
+        let selected = self.selected;
+        let on_change = self.on_change;
+        let group_label = self.a11y_label;
+
+        v_flex()
+            .id(self.id)
+            .gap_2()
+            .text_sm()
+            .role(Role::RadioGroup)
+            .when_some(group_label.clone(), |group, label| group.aria_label(label))
+            .children(self.children.into_iter().map(move |radio| {
+                let is_selected = selected.as_ref() == Some(&radio.value);
+                let disabled = radio.disabled;
+                let row_on_change = on_change.clone();
+
+                let a11y_label = radio
+                    .a11y_label
+                    .or(radio.label.clone())
+                    .or_else(|| group_label.clone());
+
+                h_flex()
+                    .id(radio.id)
+                    .gap_1p5()
+                    .role(Role::RadioButton)
+                    .when_some(a11y_label, |row, label| row.aria_label(label))
+                    .aria_toggled(Toggled::from(is_selected))
+                    .when(disabled, |row| row.opacity(0.5))
+                    .when(!disabled, move |row| {
+                        let value = radio.value.clone();
+                        row.cursor_pointer()
+                            .focusable()
+                            .tab_stop(true)
+                            .focus_visible(|style| {
+                                style.shadow(vec![
+                                    BoxShadow::new(px(0.), px(0.), colors.ring)
+                                        .spread_radius(px(3.)),
+                                ])
+                            })
+                            .when_some(row_on_change, |row, on_change| {
+                                row.on_click(move |_, window, cx| {
+                                    on_change(value.clone(), window, cx)
+                                })
+                            })
+                    })
+                    .child(
+                        h_flex()
+                            .justify_center()
+                            .flex_none()
+                            .size_4()
+                            .rounded(radius.full)
+                            .border_1()
+                            .when(is_selected, |indicator| {
+                                indicator
+                                    .bg(ramps.primary.base)
+                                    .border_color(ramps.primary.base)
+                                    .hover(|style| style.bg(ramps.primary.hover))
+                                    .child(
+                                        div()
+                                            .size_2()
+                                            .rounded(radius.full)
+                                            .bg(colors.primary_foreground),
+                                    )
+                            })
+                            .when(!is_selected, |indicator| {
+                                indicator
+                                    .bg(colors.input)
+                                    .border_color(colors.border)
+                                    .hover(|style| style.border_color(colors.muted_foreground))
+                            }),
+                    )
+                    .when_some(radio.label, |row, label| row.child(label))
+            }))
+    }
+}

crates/core/tests/radio.rs

@@ -0,0 +1,121 @@
+use std::{cell::RefCell, rc::Rc};
+
+use gpui::{
+    AnyWindowHandle, AppContext as _, Context, IntoElement, KeyDownEvent, KeyUpEvent, Keystroke,
+    Modifiers, ParentElement as _, Render, Styled as _, TestAppContext, VisualTestContext, Window,
+    div, point, px,
+};
+use gpui_native_core::radio::{Radio, RadioGroup};
+use gpui_native_theme::Theme;
+
+struct Harness {
+    changes: Rc<RefCell<Vec<&'static str>>>,
+    selected: Option<&'static str>,
+}
+
+impl Render for Harness {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let changes = self.changes.clone();
+        let view = cx.entity();
+        div().size_full().flex().flex_col().child(
+            RadioGroup::new("test-group")
+                .selected(self.selected)
+                .on_change(move |value, _, cx| {
+                    changes.borrow_mut().push(value);
+                    view.update(cx, |harness, cx| {
+                        harness.selected = Some(value);
+                        cx.notify();
+                    });
+                })
+                .child(Radio::new("radio-a", "a").label("Option A"))
+                .child(Radio::new("radio-b", "b").label("Option B"))
+                .child(
+                    Radio::new("radio-off", "c")
+                        .label("Disabled")
+                        .disabled(true),
+                ),
+        )
+    }
+}
+
+/// A maximized window whose radio rows sit at the top-left: row 1 spans
+/// roughly y 0..21, row 2 y 29..50, so `(8, 10)` and `(8, 40)` hit them.
+fn group_window(
+    selected: Option<&'static str>,
+) -> (
+    VisualTestContext,
+    AnyWindowHandle,
+    Rc<RefCell<Vec<&'static str>>>,
+) {
+    let mut cx = TestAppContext::single();
+    cx.update(Theme::init);
+    let changes = Rc::new(RefCell::new(Vec::new()));
+    let harness_changes = changes.clone();
+    let window = cx.add_window(move |_, _| Harness {
+        changes: harness_changes,
+        selected,
+    });
+    let window = window.into();
+    cx.update_window(window, |_, window, cx| {
+        window.draw(cx).clear(cx);
+    })
+    .unwrap();
+    (VisualTestContext::from_window(window, &cx), window, changes)
+}
+
+fn draw(cx: &mut VisualTestContext, window: AnyWindowHandle) {
+    cx.update_window(window, |_, window, cx| {
+        window.draw(cx).clear(cx);
+    })
+    .unwrap();
+}
+
+#[test]
+fn clicking_reports_values_through_the_controlled_loop() {
+    let (mut cx, _window, changes) = group_window(None);
+    cx.simulate_click(point(px(8.), px(10.)), Modifiers::default());
+    assert_eq!(*changes.borrow(), vec!["a"]);
+    cx.simulate_click(point(px(8.), px(40.)), Modifiers::default());
+    assert_eq!(*changes.borrow(), vec!["a", "b"]);
+}
+
+#[test]
+fn clicking_the_selected_radio_never_unchecks_it() {
+    let (mut cx, _window, changes) = group_window(Some("a"));
+    cx.simulate_click(point(px(8.), px(10.)), Modifiers::default());
+    assert_eq!(*changes.borrow(), vec!["a"], "re-reports the same value");
+}
+
+#[test]
+fn disabled_radio_does_not_report_changes() {
+    let (mut cx, _window, changes) = group_window(None);
+    cx.simulate_click(point(px(8.), px(70.)), Modifiers::default());
+    assert!(changes.borrow().is_empty());
+}
+
+#[test]
+fn enter_and_space_report_the_focused_radio_value() {
+    let (mut cx, window, changes) = group_window(None);
+    cx.simulate_click(point(px(8.), px(10.)), Modifiers::default());
+    assert_eq!(
+        *changes.borrow(),
+        vec!["a"],
+        "the pointer click itself selects"
+    );
+
+    // Repaint with the first radio focused so its Enter/Space handlers register.
+    draw(&mut cx, window);
+
+    for key in ["enter", "space"] {
+        cx.simulate_event(KeyDownEvent {
+            keystroke: Keystroke::parse(key).unwrap(),
+            is_held: false,
+            prefer_character_input: false,
+        });
+        cx.simulate_event(KeyUpEvent {
+            keystroke: Keystroke::parse(key).unwrap(),
+        });
+    }
+
+    assert_eq!(*changes.borrow(), vec!["a", "a", "a"]);
+}

crates/theme/src/resolve.rs

@@ -1,8 +1,3 @@
-//! The resolve pipeline: platform snapshot + preset definition + mode
-//! override -> fully populated tokens.
-//!
-//! Pure and unit-testable without a GUI.
-
 use crate::definition::ThemeDefinition;
 use crate::ramps::{AccentShades, Oklch, contrast_foreground, derive_shades, mix};
 use crate::system::SystemTheme;

docs/PLAN.md

@@ -148,6 +148,14 @@ graph TD
 
 Omarchy `colors.toml` maps almost 1:1: `lighter_background` → `surface`, `dark_background`/`darker_background` → elevation depth, `dark_foreground` → muted foreground, `accent` → `primary`/`accent`/`ring`, `red` → `destructive`, `green`/`yellow`/`orange` → success/warning. Every mapping lives in one module; never literals. Tests assert finite, distinct, semantically sane tokens for every preset × mode.
 
+The set stays role-minimal and grows one concept at a time, driven by the unit that needs it. Known planned additions:
+
+- **Overlay scrim + shadow/elevation tokens** — with the overlay units (Popover/Dialog/Menu, unit 11+); §5.5's popup elevation promise. No current role covers the modality backdrop.
+- **`success` / `warning` roles** — with the first severity-bearing component (Toast, badges, validation); the Omarchy mapping above already anticipates them.
+- **`knob` / control-fill role** — only if Slider (unit 7) confirms the Switch's borrowed roles (`primary_foreground` thumb, `border` off-track) as a second consumer; until then no expansion.
+
+Controls through unit 10 paint from existing roles and ramps.
+
 ### 5.3 Platform matrix
 
 | Target | Detection | Sources read | Live changes |

examples/gallery/src/main.rs

@@ -7,6 +7,7 @@ use gpui::{
 use gpui_native_core::button::{Button, ButtonVariant};
 use gpui_native_core::checkbox::Checkbox;
 use gpui_native_core::common::{h_flex, v_flex};
+use gpui_native_core::radio::{Radio, RadioGroup};
 use gpui_native_core::switch::Switch;
 use gpui_native_icons::{IconAssets, IconRole, icon};
 use gpui_native_theme::{ActiveTheme as _, Theme};
@@ -16,6 +17,7 @@ struct Gallery {
     button_clicks: usize,
     checkbox_checked: bool,
     switch_checked: bool,
+    plan: SharedString,
 }
 
 impl Render for Gallery {
@@ -268,6 +270,32 @@ impl Render for Gallery {
                         ),
                     ),
             )
+            .child(
+                v_flex()
+                    .gap_2()
+                    .child(section_label(
+                        "radio · native refs — NSButton (radio), WinUI RadioButton, Adwaita CheckButton (radio), Breeze",
+                        colors,
+                    ))
+                    .child({
+                        let gallery = gallery.clone();
+                        RadioGroup::new("gallery-radio-group")
+                            .selected(Some(self.plan.clone()))
+                            .on_change(move |plan, _, cx| {
+                                gallery.update(cx, |gallery, cx| {
+                                    gallery.plan = plan;
+                                    cx.notify();
+                                });
+                            })
+                            .child(Radio::new("radio-starter", SharedString::from("starter")).label("Starter"))
+                            .child(Radio::new("radio-pro", SharedString::from("pro")).label("Pro"))
+                            .child(
+                                Radio::new("radio-team", SharedString::from("team"))
+                                    .label("Team")
+                                    .disabled(true),
+                            )
+                    }),
+            )
             .child(
                 div()
                     .flex()
@@ -421,6 +449,7 @@ fn main() {
                     button_clicks: 0,
                     checkbox_checked: false,
                     switch_checked: true,
+                    plan: SharedString::from("starter"),
                 })
             },
         ) {