From 5cef6aefa9c5072b3bc1a0008c7a8f649cc32198 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 8 Jan 2025 17:06:47 +0200
Subject: [PATCH 1/2] Update Label to Leptos 0.7

---
 book/src/primitives/components/label.md       | 91 +++++++++---------
 packages/primitives/leptos/label/Cargo.toml   |  3 +
 packages/primitives/leptos/label/src/label.rs | 93 +++++++++----------
 stories/leptos/src/app.rs                     | 10 +-
 stories/leptos/src/primitives/label.rs        | 86 ++++++++++-------
 5 files changed, 153 insertions(+), 130 deletions(-)

diff --git a/book/src/primitives/components/label.md b/book/src/primitives/components/label.md
index f4e8786..f637f48 100644
--- a/book/src/primitives/components/label.md
+++ b/book/src/primitives/components/label.md
@@ -2,31 +2,12 @@
 
 Renders an accessible label associated with controls.
 
-{{#tabs global="framework" }}
-{{#tab name="Leptos" }}
-
-```toml,trunk
-package = "radix-leptos-book-primitives"
-features = ["label"]
-files = ["src/label.rs"]
-```
-
-{{#endtab }}
-{{#tab name="Yew" }}
-
-```toml,trunk
-package = "radix-yew-book-primitives"
-features = ["label"]
-files = ["src/label.rs"]
-```
-
-{{#endtab }}
-{{#endtabs }}
-
 ## Features
 
--   Text selection is prevented when double clicking label.
--   Supports nested controls.
+- Text selection is prevented when double-clicking label
+- Supports nested controls
+- Composable with other elements using `as_child`
+- Handles mouse events with proper focus management
 
 ## Installation
 
@@ -39,9 +20,9 @@ Install the component from your command line.
 cargo add radix-leptos-label
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-leptos-label)
--   [View on docs.rs](https://docs.rs/radix-leptos-label/latest/radix_leptos_label/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/label)
+- [View on crates.io](https://crates.io/crates/radix-leptos-label)
+- [View on docs.rs](https://docs.rs/radix-leptos-label/latest/radix_leptos_label/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/label)
 
 {{#endtab }}
 {{#tab name="Yew" }}
@@ -50,9 +31,9 @@ cargo add radix-leptos-label
 cargo add radix-yew-label
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-yew-label)
--   [View on docs.rs](https://docs.rs/radix-yew-label/latest/radix_yew_label/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/label)
+- [View on crates.io](https://crates.io/crates/radix-yew-label)
+- [View on docs.rs](https://docs.rs/radix-yew-label/latest/radix_yew_label/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/label)
 
 {{#endtab }}
 {{#endtabs }}
@@ -71,7 +52,9 @@ use radix_leptos_label::*;
 #[component]
 fn Anatomy() -> impl IntoView {
     view! {
-        <Label />
+        <Label>
+            "Label text"
+        </Label>
     }
 }
 ```
@@ -83,10 +66,12 @@ fn Anatomy() -> impl IntoView {
 use radix_yew_label::*;
 use yew::prelude::*;
 
-#[component]
-fn Anatomy() -> impl IntoView {
-    view! {
-        <Label />
+#[function_component]
+fn Anatomy() -> Html {
+    html! {
+        <Label>
+            {"Label text"}
+        </Label>
     }
 }
 ```
@@ -103,25 +88,45 @@ Contains the content for the label.
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop            | Type                           | Default |
-| --------------- | ------------------------------ | ------- |
-| `on_mouse_down` | `Option<Callback<MouseEvent>>` | -       |
+| Prop            | Type                                       | Default | Description                                                       |
+|-----------------|--------------------------------------------|---------|-------------------------------------------------------------------|
+| `children`      | `TypedChildrenFn<impl IntoView + 'static>` | -       | The content to be rendered inside the label                       |
+| `as_child`      | `MaybeProp<bool>`                          | `false` | Change the default rendered element for the one passed as a child |
+| `on_mouse_down` | `MaybeCallback<MouseEvent>`                | -       | Event handler for mousedown events                                |
+| `node_ref`      | `AnyNodeRef`                               | -       | A reference to the underlying DOM node                            |
 
 {{#endtab }}
 {{#tab name="Yew" }}
 
-| Prop            | Type                                      | Default |
-| --------------- | ----------------------------------------- | ------- |
-| `as_child`      | `Option<Callback<LabelChildProps, Html>>` | -       |
-| `on_mouse_down` | `Option<Callback<MouseEvent>>`            | -       |
+| Prop            | Type                                      | Default | Description                         |
+|-----------------|-------------------------------------------|---------|-------------------------------------|
+| `as_child`      | `Option<Callback<LabelChildProps, Html>>` | -       | Change the default rendered element |
+| `on_mouse_down` | `Option<Callback<MouseEvent>>`            | -       | Event handler for mousedown events  |
 
 {{#endtab }}
 {{#endtabs }}
 
+## Behavior
+
+The Label component includes the following built-in behaviors:
+
+- Prevents text selection when double-clicking
+- Ignores mousedown events on nested controls (button, input, select, textarea)
+- Supports composition via `as_child` prop
+- Can be associated with controls both by wrapping them or using the `for` attribute
+
 ## Accessibility
 
-This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping controls or using the `for` attribute. For your own custom controls to work correctly, ensure they use native elements such as `button` or `input` as a base.
+This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping
+controls or using the `for` attribute. For your own custom controls to work correctly, ensure they use native elements
+such as `button` or `input` as a base.
+
+When using custom components within labels:
+
+- Ensure they ultimately render to native form elements
+- Verify that click events properly propagate through to the underlying control
+- Test with screen readers to confirm proper label association
 
 ## See Also
 
--   [Radix documentation](https://www.radix-ui.com/primitives/docs/components/label)
+- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/label)
\ No newline at end of file
diff --git a/packages/primitives/leptos/label/Cargo.toml b/packages/primitives/leptos/label/Cargo.toml
index 78faa6a..59d4b4b 100644
--- a/packages/primitives/leptos/label/Cargo.toml
+++ b/packages/primitives/leptos/label/Cargo.toml
@@ -11,4 +11,7 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
+leptos-node-ref.workspace = true
+leptos-maybe-callback.workspace = true
+radix-leptos-primitive.workspace = true
 web-sys.workspace = true
diff --git a/packages/primitives/leptos/label/src/label.rs b/packages/primitives/leptos/label/src/label.rs
index eb186c9..b77e5f1 100644
--- a/packages/primitives/leptos/label/src/label.rs
+++ b/packages/primitives/leptos/label/src/label.rs
@@ -1,62 +1,55 @@
-use leptos::{ev::MouseEvent, prelude::*};
+use leptos::{ev::MouseEvent, html, prelude::*};
+use radix_leptos_primitive::Primitive;
+use leptos_maybe_callback::MaybeCallback;
+use leptos_node_ref::prelude::*;
 
-pub struct UseLabelProps {
-    on_mouse_down: Option<Callback<MouseEvent>>,
-}
-
-pub struct UseLabelAttrs {
-    on_mouse_down: Callback<MouseEvent>,
-}
-
-pub fn use_label(props: UseLabelProps) -> UseLabelAttrs {
-    UseLabelAttrs {
-        on_mouse_down: Callback::new(move |event: MouseEvent| {
-            // Only prevent text selection if clicking inside the label itself.
-            let target = event_target::<web_sys::Element>(&event);
-            if target
-                .closest("button, input, select, textarea")
-                .expect("Element should be able to query closest.")
-                .is_some()
-            {
-                return;
-            }
-
-            if let Some(on_mouse_down) = props.on_mouse_down {
-                on_mouse_down.run(event.clone());
-            }
+/* -------------------------------------------------------------------------------------------------
+ * Label
+ * -----------------------------------------------------------------------------------------------*/
 
-            // Prevent text selection when double clicking label.
-            if !event.default_prevented() && event.detail() > 1 {
-                event.prevent_default();
-            }
-        }),
-    }
-}
+#[allow(unused)]
+const NAME: &str = "Label";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn Label(
-    #[prop(into, optional)] on_mouse_down: Option<Callback<MouseEvent>>,
-    #[prop(optional)] children: Option<Children>,
+    children: TypedChildrenFn<impl IntoView + 'static>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] on_mouse_down: MaybeCallback<MouseEvent>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let UseLabelAttrs { on_mouse_down } = use_label(UseLabelProps { on_mouse_down });
-
     view! {
-        <label on:mousedown=move |event| on_mouse_down.run(event)>
-            {children.map(|children| children())}
-        </label>
+        <Primitive
+            children={children}
+            element=html::label
+            as_child=as_child
+            on:mousedown=move |event: MouseEvent| {
+                // only prevent text selection if clicking inside the label itself
+                let target: web_sys::Element = event_target(&event);
+                if target
+                    .closest("button, input, select, textarea")
+                    .expect("Element should be able to query closest.")
+                    .is_some()
+                {
+                    return;
+                }
+
+                // run callback if provided
+                on_mouse_down.run(event.clone());
+
+                // prevent text selection when double-clicking label
+                if !event.default_prevented() && event.detail() > 1 {
+                    event.prevent_default();
+                }
+            }
+            node_ref=node_ref
+        />
     }
 }
 
-#[component]
-pub fn LabelAsChild<R, RV>(
-    #[prop(into, optional)] on_mouse_down: Option<Callback<MouseEvent>>,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(UseLabelAttrs) -> RV,
-    RV: IntoView,
-{
-    let attrs = use_label(UseLabelProps { on_mouse_down });
+/* -----------------------------------------------------------------------------------------------*/
 
-    render(attrs)
+pub mod primitive {
+    pub use super::*;
+    pub use Label as Root;
 }
diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs
index 7d0b1dc..4ee62ce 100644
--- a/stories/leptos/src/app.rs
+++ b/stories/leptos/src/app.rs
@@ -106,9 +106,10 @@ pub fn App() -> impl IntoView {
                         Label
 
                         <ul class="list-none m-0 ms-4 p-0">
-                            <li><NavLink href="/label/styled">Styled</NavLink></li>
+                            <li><NavLink href="/label/basic">Basic</NavLink></li>
                             <li><NavLink href="/label/with-control">With Control</NavLink></li>
-                            <li><NavLink href="/label/with-input-number">With Input Number</NavLink></li>
+                            <li><NavLink href="/label/with-inputs">With Inputs</NavLink></li>
+                            <li><NavLink href="/label/with-events">With Events</NavLink></li>
                         </ul>
                     </li>
                     // <li>
@@ -239,9 +240,10 @@ pub fn App() -> impl IntoView {
                     // <Route path="/focus-scope/basic" view=focus_scope::Basic />
                     // <Route path="/focus-scope/multiple" view=focus_scope::Multiple />
 
-                    <Route path=path!("/label/styled") view=label::Styled />
+                    <Route path=path!("/label/basic") view=label::Basic />
                     <Route path=path!("/label/with-control") view=label::WithControl />
-                    <Route path=path!("/label/with-input-number") view=label::WithInputNumber />
+                    <Route path=path!("/label/with-inputs") view=label::WithInputs />
+                    <Route path=path!("/label/with-events") view=label::WithEvents />
 
                     // <Route path="/menu/styled" view=menu::Styled />
 
diff --git a/stories/leptos/src/primitives/label.rs b/stories/leptos/src/primitives/label.rs
index e351e8c..061076e 100644
--- a/stories/leptos/src/primitives/label.rs
+++ b/stories/leptos/src/primitives/label.rs
@@ -1,59 +1,79 @@
+use leptos::ev;
 use leptos::prelude::*;
 use radix_leptos_label::*;
-use tailwind_fuse::*;
 
+/// Styled example with a basic label
 #[component]
-pub fn Styled() -> impl IntoView {
-    let root_class = Memo::new(move |_| RootClass::default().to_class());
-
+pub fn Basic() -> impl IntoView {
     view! {
-        <Label attr:class=root_class>Label</Label>
+        <Label attr:class="inline-block align-middle cursor-default border border-solid border-gray-200 p-2">
+            "Basic Label"
+        </Label>
     }
 }
 
+/// Shows both wrapping and referencing controls
 #[component]
 pub fn WithControl() -> impl IntoView {
-    let control_class = Memo::new(move |_| ControlClass::default().to_class());
+    view! {
+        <div class="space-y-4">
+            <h2>"Wrapping control"</h2>
+            <Label attr:class="inline-flex gap-2">
+                <Control /> " Label with wrapped control"
+            </Label>
+
+            <h2>"Referencing control"</h2>
+            <Control attr:id="control" />
+            <Label attr:r#for="control" attr:class="ml-2">"Label referencing control"</Label>
+        </div>
+    }
+}
 
+/// Demonstrates using Label with various form inputs
+#[component]
+pub fn WithInputs() -> impl IntoView {
     view! {
-        <h1>Wrapping control</h1>
-        <Label>
-            <Control attr:class=control_class /> Label
-        </Label>
+        <div class="space-y-4">
+            <Label attr:class="flex items-center gap-2">
+                <span>"Name:"</span>
+                <input r#type="text" class="border p-1" />
+            </Label>
 
-        <h1>Referencing control</h1>
-        <Control attr:id="control" attr:class=control_class />
-        <Label attr:r#for="control">Label</Label>
+            <Label attr:class="flex items-center gap-2">
+                <span>"Quantity:"</span>
+                <input r#type="number" class="border p-1" />
+            </Label>
+        </div>
     }
 }
 
+/// Shows label with custom event handling
 #[component]
-pub fn WithInputNumber() -> impl IntoView {
+pub fn WithEvents() -> impl IntoView {
+    let (count, set_count) = signal(0);
+
     view! {
-        <Label>
-            <span>Name:</span>
-            <input type="number" />
-        </Label>
+        <div class="space-y-4">
+            <Label
+                attr:class="inline-block p-2 border"
+                on_mouse_down=move |_: ev::MouseEvent| set_count.update(|mut c| *c = *c + 1)
+            >
+                <span>"Click counter: "</span>
+                <span>{count}</span>
+            </Label>
+        </div>
     }
 }
 
+/// Helper component for the control examples
 #[component]
 fn Control() -> impl IntoView {
     view! {
-        <button on:click=move |_| window().alert_with_message("clicked").expect("Alert should be successful.")>
-            Control
+        <button
+            class="inline-flex border border-solid border-gray-200 p-2 hover:bg-red-100"
+            on:click=move |_| window().alert_with_message("clicked").expect("Alert should work")
+        >
+            "Control"
         </button>
     }
-}
-
-#[derive(TwClass, Default, Clone, Copy)]
-#[tw(
-    class = "inline-block align-middle cursor-default border-[1px] border-solid border-[gainsboro] p-[10px]"
-)]
-struct RootClass {}
-
-#[derive(TwClass, Default, Clone, Copy)]
-#[tw(
-    class = "inline-flex border-[1px] border-solid border-[gainsboro] p-[10px] align-middle m-[0px_10px] hover:bg-[red]"
-)]
-struct ControlClass {}
+}
\ No newline at end of file

From 120eec0a3d8184f08bd9a7e8f08268da8e26da9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABlle=20Huisman?= <danielle@huisman.me>
Date: Sun, 11 May 2025 12:46:24 +0200
Subject: [PATCH 2/2] Cleanup

---
 Cargo.lock                                    | 12 +++
 book/src/primitives/components/label.md       | 92 +++++++++----------
 packages/primitives/leptos/label/Cargo.toml   |  4 +-
 packages/primitives/leptos/label/src/label.rs | 34 ++-----
 stories/leptos/src/app.rs                     | 10 +-
 stories/leptos/src/primitives/label.rs        | 86 +++++++----------
 6 files changed, 104 insertions(+), 134 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 0969fad..0fa3baf 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2238,6 +2238,15 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "leptos-maybe-callback"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bff44378da0a611bd446e8354585fa0768206610b8e4b0ab8e6ce5988e06a0cc"
+dependencies = [
+ "leptos",
+]
+
 [[package]]
 name = "leptos-node-ref"
 version = "0.2.0"
@@ -3151,6 +3160,9 @@ name = "radix-leptos-label"
 version = "0.0.2"
 dependencies = [
  "leptos",
+ "leptos-maybe-callback",
+ "leptos-node-ref",
+ "radix-leptos-primitive",
  "web-sys",
 ]
 
diff --git a/book/src/primitives/components/label.md b/book/src/primitives/components/label.md
index f637f48..ff453ce 100644
--- a/book/src/primitives/components/label.md
+++ b/book/src/primitives/components/label.md
@@ -2,12 +2,31 @@
 
 Renders an accessible label associated with controls.
 
+{{#tabs global="framework" }}
+{{#tab name="Leptos" }}
+
+```toml,trunk
+package = "radix-leptos-book-primitives"
+features = ["label"]
+files = ["src/label.rs"]
+```
+
+{{#endtab }}
+{{#tab name="Yew" }}
+
+```toml,trunk
+package = "radix-yew-book-primitives"
+features = ["label"]
+files = ["src/label.rs"]
+```
+
+{{#endtab }}
+{{#endtabs }}
+
 ## Features
 
-- Text selection is prevented when double-clicking label
-- Supports nested controls
-- Composable with other elements using `as_child`
-- Handles mouse events with proper focus management
+-   Text selection is prevented when double clicking label.
+-   Supports nested controls.
 
 ## Installation
 
@@ -20,9 +39,9 @@ Install the component from your command line.
 cargo add radix-leptos-label
 ```
 
-- [View on crates.io](https://crates.io/crates/radix-leptos-label)
-- [View on docs.rs](https://docs.rs/radix-leptos-label/latest/radix_leptos_label/)
-- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/label)
+-   [View on crates.io](https://crates.io/crates/radix-leptos-label)
+-   [View on docs.rs](https://docs.rs/radix-leptos-label/latest/radix_leptos_label/)
+-   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/label)
 
 {{#endtab }}
 {{#tab name="Yew" }}
@@ -31,9 +50,9 @@ cargo add radix-leptos-label
 cargo add radix-yew-label
 ```
 
-- [View on crates.io](https://crates.io/crates/radix-yew-label)
-- [View on docs.rs](https://docs.rs/radix-yew-label/latest/radix_yew_label/)
-- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/label)
+-   [View on crates.io](https://crates.io/crates/radix-yew-label)
+-   [View on docs.rs](https://docs.rs/radix-yew-label/latest/radix_yew_label/)
+-   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/label)
 
 {{#endtab }}
 {{#endtabs }}
@@ -52,9 +71,7 @@ use radix_leptos_label::*;
 #[component]
 fn Anatomy() -> impl IntoView {
     view! {
-        <Label>
-            "Label text"
-        </Label>
+        <Label />
     }
 }
 ```
@@ -66,12 +83,10 @@ fn Anatomy() -> impl IntoView {
 use radix_yew_label::*;
 use yew::prelude::*;
 
-#[function_component]
-fn Anatomy() -> Html {
-    html! {
-        <Label>
-            {"Label text"}
-        </Label>
+#[component]
+fn Anatomy() -> impl IntoView {
+    view! {
+        <Label />
     }
 }
 ```
@@ -88,45 +103,26 @@ Contains the content for the label.
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop            | Type                                       | Default | Description                                                       |
-|-----------------|--------------------------------------------|---------|-------------------------------------------------------------------|
-| `children`      | `TypedChildrenFn<impl IntoView + 'static>` | -       | The content to be rendered inside the label                       |
-| `as_child`      | `MaybeProp<bool>`                          | `false` | Change the default rendered element for the one passed as a child |
-| `on_mouse_down` | `MaybeCallback<MouseEvent>`                | -       | Event handler for mousedown events                                |
-| `node_ref`      | `AnyNodeRef`                               | -       | A reference to the underlying DOM node                            |
+| Prop            | Type                        | Default |
+| --------------- | --------------------------- | ------- |
+| `as_child`      | `MaybeProp<bool>`           | `false` |
+| `on_mouse_down` | `MaybeCallback<MouseEvent>` | -       |
 
 {{#endtab }}
 {{#tab name="Yew" }}
 
-| Prop            | Type                                      | Default | Description                         |
-|-----------------|-------------------------------------------|---------|-------------------------------------|
-| `as_child`      | `Option<Callback<LabelChildProps, Html>>` | -       | Change the default rendered element |
-| `on_mouse_down` | `Option<Callback<MouseEvent>>`            | -       | Event handler for mousedown events  |
+| Prop            | Type                                      | Default |
+| --------------- | ----------------------------------------- | ------- |
+| `as_child`      | `Option<Callback<LabelChildProps, Html>>` | -       |
+| `on_mouse_down` | `Option<Callback<MouseEvent>>`            | -       |
 
 {{#endtab }}
 {{#endtabs }}
 
-## Behavior
-
-The Label component includes the following built-in behaviors:
-
-- Prevents text selection when double-clicking
-- Ignores mousedown events on nested controls (button, input, select, textarea)
-- Supports composition via `as_child` prop
-- Can be associated with controls both by wrapping them or using the `for` attribute
-
 ## Accessibility
 
-This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping
-controls or using the `for` attribute. For your own custom controls to work correctly, ensure they use native elements
-such as `button` or `input` as a base.
-
-When using custom components within labels:
-
-- Ensure they ultimately render to native form elements
-- Verify that click events properly propagate through to the underlying control
-- Test with screen readers to confirm proper label association
+This component is based on the native `label` element, it will automatically apply the correct labelling when wrapping controls or using the `for` attribute. For your own custom controls to work correctly, ensure they use native elements such as `button` or `input` as a base.
 
 ## See Also
 
-- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/label)
\ No newline at end of file
+-   [Radix documentation](https://www.radix-ui.com/primitives/docs/components/label)
diff --git a/packages/primitives/leptos/label/Cargo.toml b/packages/primitives/leptos/label/Cargo.toml
index 59d4b4b..9f0f79d 100644
--- a/packages/primitives/leptos/label/Cargo.toml
+++ b/packages/primitives/leptos/label/Cargo.toml
@@ -11,7 +11,7 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-leptos-node-ref.workspace = true
 leptos-maybe-callback.workspace = true
-radix-leptos-primitive.workspace = true
+leptos-node-ref.workspace = true
+radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
 web-sys.workspace = true
diff --git a/packages/primitives/leptos/label/src/label.rs b/packages/primitives/leptos/label/src/label.rs
index b77e5f1..792f860 100644
--- a/packages/primitives/leptos/label/src/label.rs
+++ b/packages/primitives/leptos/label/src/label.rs
@@ -1,31 +1,24 @@
 use leptos::{ev::MouseEvent, html, prelude::*};
-use radix_leptos_primitive::Primitive;
 use leptos_maybe_callback::MaybeCallback;
-use leptos_node_ref::prelude::*;
-
-/* -------------------------------------------------------------------------------------------------
- * Label
- * -----------------------------------------------------------------------------------------------*/
-
-#[allow(unused)]
-const NAME: &str = "Label";
+use leptos_node_ref::AnyNodeRef;
+use radix_leptos_primitive::Primitive;
 
 #[component]
-#[allow(non_snake_case)]
 pub fn Label(
-    children: TypedChildrenFn<impl IntoView + 'static>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
     #[prop(into, optional)] on_mouse_down: MaybeCallback<MouseEvent>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
     #[prop(into, optional)] node_ref: AnyNodeRef,
+    children: TypedChildrenFn<impl IntoView + 'static>,
 ) -> impl IntoView {
     view! {
         <Primitive
-            children={children}
             element=html::label
             as_child=as_child
+            node_ref=node_ref
+            children=children
             on:mousedown=move |event: MouseEvent| {
-                // only prevent text selection if clicking inside the label itself
-                let target: web_sys::Element = event_target(&event);
+                // Only prevent text selection if clicking inside the label itself.
+                let target = event_target::<web_sys::Element>(&event);
                 if target
                     .closest("button, input, select, textarea")
                     .expect("Element should be able to query closest.")
@@ -34,22 +27,13 @@ pub fn Label(
                     return;
                 }
 
-                // run callback if provided
                 on_mouse_down.run(event.clone());
 
-                // prevent text selection when double-clicking label
+                // Prevent text selection when double clicking label.
                 if !event.default_prevented() && event.detail() > 1 {
                     event.prevent_default();
                 }
             }
-            node_ref=node_ref
         />
     }
 }
-
-/* -----------------------------------------------------------------------------------------------*/
-
-pub mod primitive {
-    pub use super::*;
-    pub use Label as Root;
-}
diff --git a/stories/leptos/src/app.rs b/stories/leptos/src/app.rs
index 4ee62ce..7d0b1dc 100644
--- a/stories/leptos/src/app.rs
+++ b/stories/leptos/src/app.rs
@@ -106,10 +106,9 @@ pub fn App() -> impl IntoView {
                         Label
 
                         <ul class="list-none m-0 ms-4 p-0">
-                            <li><NavLink href="/label/basic">Basic</NavLink></li>
+                            <li><NavLink href="/label/styled">Styled</NavLink></li>
                             <li><NavLink href="/label/with-control">With Control</NavLink></li>
-                            <li><NavLink href="/label/with-inputs">With Inputs</NavLink></li>
-                            <li><NavLink href="/label/with-events">With Events</NavLink></li>
+                            <li><NavLink href="/label/with-input-number">With Input Number</NavLink></li>
                         </ul>
                     </li>
                     // <li>
@@ -240,10 +239,9 @@ pub fn App() -> impl IntoView {
                     // <Route path="/focus-scope/basic" view=focus_scope::Basic />
                     // <Route path="/focus-scope/multiple" view=focus_scope::Multiple />
 
-                    <Route path=path!("/label/basic") view=label::Basic />
+                    <Route path=path!("/label/styled") view=label::Styled />
                     <Route path=path!("/label/with-control") view=label::WithControl />
-                    <Route path=path!("/label/with-inputs") view=label::WithInputs />
-                    <Route path=path!("/label/with-events") view=label::WithEvents />
+                    <Route path=path!("/label/with-input-number") view=label::WithInputNumber />
 
                     // <Route path="/menu/styled" view=menu::Styled />
 
diff --git a/stories/leptos/src/primitives/label.rs b/stories/leptos/src/primitives/label.rs
index 061076e..e351e8c 100644
--- a/stories/leptos/src/primitives/label.rs
+++ b/stories/leptos/src/primitives/label.rs
@@ -1,79 +1,59 @@
-use leptos::ev;
 use leptos::prelude::*;
 use radix_leptos_label::*;
+use tailwind_fuse::*;
 
-/// Styled example with a basic label
 #[component]
-pub fn Basic() -> impl IntoView {
+pub fn Styled() -> impl IntoView {
+    let root_class = Memo::new(move |_| RootClass::default().to_class());
+
     view! {
-        <Label attr:class="inline-block align-middle cursor-default border border-solid border-gray-200 p-2">
-            "Basic Label"
-        </Label>
+        <Label attr:class=root_class>Label</Label>
     }
 }
 
-/// Shows both wrapping and referencing controls
 #[component]
 pub fn WithControl() -> impl IntoView {
-    view! {
-        <div class="space-y-4">
-            <h2>"Wrapping control"</h2>
-            <Label attr:class="inline-flex gap-2">
-                <Control /> " Label with wrapped control"
-            </Label>
-
-            <h2>"Referencing control"</h2>
-            <Control attr:id="control" />
-            <Label attr:r#for="control" attr:class="ml-2">"Label referencing control"</Label>
-        </div>
-    }
-}
+    let control_class = Memo::new(move |_| ControlClass::default().to_class());
 
-/// Demonstrates using Label with various form inputs
-#[component]
-pub fn WithInputs() -> impl IntoView {
     view! {
-        <div class="space-y-4">
-            <Label attr:class="flex items-center gap-2">
-                <span>"Name:"</span>
-                <input r#type="text" class="border p-1" />
-            </Label>
+        <h1>Wrapping control</h1>
+        <Label>
+            <Control attr:class=control_class /> Label
+        </Label>
 
-            <Label attr:class="flex items-center gap-2">
-                <span>"Quantity:"</span>
-                <input r#type="number" class="border p-1" />
-            </Label>
-        </div>
+        <h1>Referencing control</h1>
+        <Control attr:id="control" attr:class=control_class />
+        <Label attr:r#for="control">Label</Label>
     }
 }
 
-/// Shows label with custom event handling
 #[component]
-pub fn WithEvents() -> impl IntoView {
-    let (count, set_count) = signal(0);
-
+pub fn WithInputNumber() -> impl IntoView {
     view! {
-        <div class="space-y-4">
-            <Label
-                attr:class="inline-block p-2 border"
-                on_mouse_down=move |_: ev::MouseEvent| set_count.update(|mut c| *c = *c + 1)
-            >
-                <span>"Click counter: "</span>
-                <span>{count}</span>
-            </Label>
-        </div>
+        <Label>
+            <span>Name:</span>
+            <input type="number" />
+        </Label>
     }
 }
 
-/// Helper component for the control examples
 #[component]
 fn Control() -> impl IntoView {
     view! {
-        <button
-            class="inline-flex border border-solid border-gray-200 p-2 hover:bg-red-100"
-            on:click=move |_| window().alert_with_message("clicked").expect("Alert should work")
-        >
-            "Control"
+        <button on:click=move |_| window().alert_with_message("clicked").expect("Alert should be successful.")>
+            Control
         </button>
     }
-}
\ No newline at end of file
+}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(
+    class = "inline-block align-middle cursor-default border-[1px] border-solid border-[gainsboro] p-[10px]"
+)]
+struct RootClass {}
+
+#[derive(TwClass, Default, Clone, Copy)]
+#[tw(
+    class = "inline-flex border-[1px] border-solid border-[gainsboro] p-[10px] align-middle m-[0px_10px] hover:bg-[red]"
+)]
+struct ControlClass {}