feat: change the type of dir in ConfigProvider

demo/src/app.rs

@@ -16,9 +16,10 @@ pub fn App() -> impl IntoView {
     provide_meta_context();
     // let (read_theme, _, _) = use_local_storage::<String, FromToStringCodec>("theme");
     // let theme = RwSignal::new(Theme::from(read_theme.get_untracked()));
+    let dir = RwSignal::new(ConfigDirection::Ltr);
 
     view! {
-        <ConfigProvider>
+        <ConfigProvider dir=dir>
             <ToasterProvider>
                 <LoadingBarProvider>
                     <TheRouter />

demo/src/components/site_header.rs

@@ -9,6 +9,7 @@ use thaw::*;
 pub fn SiteHeader() -> impl IntoView {
     let navigate = use_navigate();
     let navigate_signal = RwSignal::new(use_navigate());
+    let dir = ConfigInjection::expect_context().dir;
     let theme = Theme::use_rw_theme();
     let theme_name = Memo::new(move |_| {
         theme.with(|theme| {
@@ -221,6 +222,32 @@ pub fn SiteHeader() -> impl IntoView {
                     >
                         {move || theme_name.get()}
                     </Button>
+                    <Button
+                        on_click=move |_| {
+                            let Some(dir) = dir else {
+                                return;
+                            };
+                            dir.update(move |dir| {
+                                *dir = match dir {
+                                    ConfigDirection::Auto => ConfigDirection::Ltr,
+                                    ConfigDirection::Ltr => ConfigDirection::Rtl,
+                                    ConfigDirection::Rtl => ConfigDirection::Ltr,
+                                };
+                            });
+                        }
+                    >
+                        {move || {
+                            let Some(dir) = dir else {
+                                return None;
+                            };
+
+                            match dir.get() {
+                                ConfigDirection::Auto => Some("Auto"),
+                                ConfigDirection::Ltr => Some("LTR"),
+                                ConfigDirection::Rtl => Some("RTL"),
+                            }
+                        }}
+                    </Button>
                     <Button
                         icon=icondata::BiDiscordAlt
                         on_click=move |_| {

thaw/src/back_top/mod.rs

@@ -91,7 +91,7 @@ pub fn BackTop(
                 >
                     <div
                         class=class_list!["thaw-config-provider thaw-back-top", class]
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                         node_ref=back_top_ref
                         style=move || {
                             display

thaw/src/button/button.css

@@ -124,7 +124,7 @@
 }
 
 .thaw-button:not(.thaw-button--only-icon) .thaw-button__icon {
-    margin-right: var(--spacingHorizontalSNudge);
+    margin-inline-end: var(--spacingHorizontalSNudge);
 }
 
 .thaw-button__icon {

thaw/src/color_picker/mod.rs

@@ -155,7 +155,7 @@ pub fn ColorPicker(
                         class="thaw-config-provider thaw-color-picker-popover"
                         node_ref=popover_ref
                         style=move || display.get().unwrap_or_default()
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                     >
 
                         <ColorPanel hue=hue.read_only() sv />

thaw/src/combobox/listbox.rs

@@ -43,7 +43,7 @@ pub fn Listbox(
                 <div
                     class=format!("thaw-config-provider thaw-listbox {class}")
                     style=move || display.get().unwrap_or_default()
-                    data-thaw-id=config_provider.id().clone()
+                    data-thaw-id=config_provider.id()
                     node_ref=listbox_ref
                     role="listbox"
                     on:mousedown=|e| e.prevent_default()

thaw/src/config_provider/mod.rs

@@ -10,7 +10,7 @@ pub fn ConfigProvider(
     theme: Option<RwSignal<Theme>>,
     /// Sets the direction of text & generated styles.
     #[prop(optional, into)]
-    dir: RwSignal<Option<ConfigDirection>>,
+    dir: Option<RwSignal<ConfigDirection>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("config-provider", include_str!("./config-provider.css"));
@@ -39,18 +39,14 @@ pub fn ConfigProvider(
         }
     });
 
-    let config_injection = ConfigInjection {
+    let config_injection = ConfigInjection { theme, dir, id };
-        theme,
-        dir,
-        id: id.get_value(),
-    };
 
     view! {
         <Provider value=config_injection>
             <div
                 class=class_list!["thaw-config-provider", class]
                 data-thaw-id=id.get_value()
-                dir=move || dir.get().map(move |dir| dir.as_str())
+                dir=move || dir.map(move |dir| dir.get().as_str())
             >
                 {children()}
             </div>
@@ -61,13 +57,13 @@ pub fn ConfigProvider(
 #[derive(Clone)]
 pub struct ConfigInjection {
     pub theme: RwSignal<Theme>,
-    pub dir: RwSignal<Option<ConfigDirection>>,
+    pub dir: Option<RwSignal<ConfigDirection>>,
-    id: String,
+    id: StoredValue<String>,
 }
 
 impl ConfigInjection {
-    pub fn id(&self) -> &String {
+    pub fn id(&self) -> String {
-        &self.id
+        self.id.get_value()
     }
 
     pub fn expect_context() -> Self {
@@ -75,10 +71,11 @@ impl ConfigInjection {
     }
 }
 
-#[derive(Clone)]
+#[derive(Debug, Clone, Copy, Default)]
 pub enum ConfigDirection {
     Ltr,
     Rtl,
+    #[default]
     Auto,
 }
 

thaw/src/date_picker/panel/mod.rs

@@ -73,7 +73,7 @@ pub fn Panel(
         >
             <div
                 class="thaw-config-provider thaw-date-picker-panel"
-                data-thaw-id=config_provider.id().clone()
+                data-thaw-id=config_provider.id()
                 style=move || display.get().unwrap_or_default()
                 node_ref=panel_ref
                 on:mousedown=|e| e.prevent_default()

thaw/src/dialog/dialog.rs

@@ -35,7 +35,7 @@ pub fn Dialog(
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
                 <div
                     class=class_list!["thaw-config-provider thaw-dialog", class]
-                    data-thaw-id=config_provider.id().clone()
+                    data-thaw-id=config_provider.id()
                 >
                     <CSSTransition
                         node_ref=mask_ref

thaw/src/drawer/overlay_drawer.rs

@@ -58,7 +58,7 @@ pub fn OverlayDrawer(
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
                 <div
                     class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
-                    data-thaw-id=config_provider.id().clone()
+                    data-thaw-id=config_provider.id()
                 >
                     <CSSTransition
                         node_ref=mask_ref

thaw/src/loading_bar/mod.rs

@@ -100,7 +100,7 @@ fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl I
     view! {
         <div
             class="thaw-config-provider thaw-loading-bar-container"
-            data-thaw-id=config_provider.id().clone()
+            data-thaw-id=config_provider.id()
             style="display: none"
             node_ref=container_ref
         >

thaw/src/menu/mod.rs

@@ -128,7 +128,7 @@ pub fn Menu(
                                 move || appearance.get().map(|a| format!("thaw-menu--{}", a.as_str())),
                                 class
                             ]
-                            data-thaw-id=config_provider.id().clone()
+                            data-thaw-id=config_provider.id()
                             style=move || display.get().unwrap_or_default()
                             node_ref=menu_ref
                             on:mouseenter=on_mouse_enter

thaw/src/popover/mod.rs

@@ -138,7 +138,7 @@ pub fn Popover(
                             move || appearance.get().map(|a| format!("thaw-popover-surface--{}", a.as_str())),
                             class
                         ]
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                         style=move || display.get().unwrap_or_default()
 
                         node_ref=popover_ref

thaw/src/time_picker/mod.rs

@@ -255,7 +255,7 @@ fn Panel(
         >
             <div
                 class="thaw-config-provider thaw-time-picker-panel"
-                data-thaw-id=config_provider.id().clone()
+                data-thaw-id=config_provider.id()
                 style=move || display.get().unwrap_or_default()
                 node_ref=panel_ref
                 on:mousedown=|e| e.prevent_default()

thaw/src/toast/toaster.rs

@@ -68,7 +68,7 @@ pub fn Toaster(
         <Teleport>
             <div
                 class="thaw-config-provider thaw-toaster-wrapper"
-                data-thaw-id=config_provider.id().clone()
+                data-thaw-id=config_provider.id()
             >
                 <div class="thaw-toaster thaw-toaster--top">
                     <For each=move || top_id_list.get() key=|id| id.clone() let:id>

thaw/src/tooltip/tooltip.rs

@@ -80,7 +80,7 @@ pub fn Tooltip(
                             "thaw-config-provider thaw-tooltip-content",
                             move || format!("thaw-tooltip-content--{}", appearance.get().as_str())
                         ]
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                         style=move || display.get().unwrap_or_default()
                         role="tooltip"
                         node_ref=content_ref