Update Aspect Ratio to Leptos 0.7

Author: geoffreygarrett

Cargo.toml

@@ -10,7 +10,7 @@ members = [
     # -- Leptos Primitives (commented until they're upgraded) --
     # "packages/primitives/leptos/accessible-icon",
     # "packages/primitives/leptos/arrow",
-    # "packages/primitives/leptos/aspect-ratio",
+    "packages/primitives/leptos/aspect-ratio",
     # "packages/primitives/leptos/avatar",
     # "packages/primitives/leptos/checkbox",
     # "packages/primitives/leptos/collection",
@@ -82,13 +82,12 @@ yew = "0.21.0"
 yew-router = "0.18.0"
 yew-struct-component = "0.1.4"
 yew-style = "0.1.4"
-radix-leptos-primitive.version = "0.0.2"
 
 # Subcrate packages (paths remain the same; you can comment out any subcrate not yet upgraded).
 # We centralize shared dependencies in [workspace.dependencies] for a single source of truth,
 # reducing duplication, preventing version drift, and keeping the Cargo.lock consistent.
 #radix-leptos-arrow.path = "./packages/primitives/leptos/arrow"
-#radix-leptos-aspect-ratio.path = "./packages/primitives/leptos/aspect-ratio"
+radix-leptos-aspect-ratio.path = "./packages/primitives/leptos/aspect-ratio"
 #radix-leptos-accessible-icon.path = "./packages/primitives/leptos/accessible-icon"
 #radix-leptos-avatar.path = "./packages/primitives/leptos/avatar"
 #radix-leptos-checkbox.path = "./packages/primitives/leptos/checkbox"
@@ -124,4 +123,3 @@ radix-leptos-primitive.path = "./packages/primitives/leptos/primitive"
 yew = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
 yew-router = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
 leptos-node-ref = { git = "https://github.com/geoffreygarrett/leptos-utils", branch = "feature/any-node-ref" }
-radix-leptos-primitive = { git = "https://github.com/geoffreygarrett/radix", branch = "update/leptos-0.7-primitive" }

book/src/primitives/components/aspect-ratio.md

@@ -2,121 +2,146 @@
 
 Displays content within a desired ratio.
 
-{{#tabs global="framework" }}
-{{#tab name="Leptos" }}
+{{#tabs global="framework"}}
+{{#tab name="Leptos"}}
 
 ```toml,trunk
 package = "radix-leptos-book-primitives"
 features = ["aspect-ratio"]
 files = ["src/aspect_ratio.rs"]
 ```
 
-{{#endtab }}
-{{#tab name="Yew" }}
+{{#endtab}}
+{{#tab name="Yew"}}
 
 ```toml,trunk
 package = "radix-yew-book-primitives"
 features = ["aspect-ratio"]
 files = ["src/aspect_ratio.rs"]
 ```
 
-{{#endtab }}
-{{#endtabs }}
+{{#endtab}}
+{{#endtabs}}
 
 ## Features
 
--   Accepts any custom ratio.
+- Accepts any custom ratio.
 
 ## Installation
 
 Install the component from your command line.
 
-{{#tabs global="framework" }}
-{{#tab name="Leptos" }}
+{{#tabs global="framework"}}
+{{#tab name="Leptos"}}
 
 ```shell
 cargo add radix-leptos-aspect-ratio
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-leptos-aspect-ratio)
--   [View on docs.rs](https://docs.rs/radix-leptos-aspect-ratio/latest/radix_leptos_aspect_ratio/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/aspect-ratio)
+- [View on crates.io](https://crates.io/crates/radix-leptos-aspect-ratio)
+- [View on docs.rs](https://docs.rs/radix-leptos-aspect-ratio/latest/radix_leptos_aspect_ratio/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/leptos/aspect-ratio)
 
-{{#endtab }}
-{{#tab name="Yew" }}
+{{#endtab}}
+{{#tab name="Yew"}}
 
 ```shell
 cargo add radix-yew-aspect-ratio
 ```
 
--   [View on crates.io](https://crates.io/crates/radix-yew-aspect-ratio)
--   [View on docs.rs](https://docs.rs/radix-yew-aspect-ratio/latest/radix_yew_aspect_ratio/)
--   [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/aspect-ratio)
+- [View on crates.io](https://crates.io/crates/radix-yew-aspect-ratio)
+- [View on docs.rs](https://docs.rs/radix-yew-aspect-ratio/latest/radix_yew_aspect_ratio/)
+- [View source](https://github.com/RustForWeb/radix/tree/main/packages/primitives/yew/aspect-ratio)
 
-{{#endtab }}
-{{#endtabs }}
+{{#endtab}}
+{{#endtabs}}
 
 ## Anatomy
 
-Import the component.
-
-{{#tabs global="framework" }}
-{{#tab name="Leptos" }}
+{{#tabs global="framework"}}
+{{#tab name="Leptos"}}
 
 ```rust,ignore
 use leptos::*;
-use radix_leptos_aspect_ratio::*;
+use radix_leptos_aspect_ratio as AspectRatio;
 
 #[component]
 fn Anatomy() -> impl IntoView {
     view! {
-        <AspectRatio />
+        <AspectRatio::Root ratio=16.0/9.0>
+            <div>"Constrained within the 16:9 ratio!"</div>
+        </AspectRatio::Root>
     }
 }
 ```
 
-{{#endtab }}
-{{#tab name="Yew" }}
+{{#endtab}}
+{{#tab name="Yew"}}
 
 ```rust,ignore
 use radix_yew_aspect_ratio::*;
-use yew::prelude::::*;
+use yew::prelude::*;
 
 #[function_component]
 fn Anatomy() -> Html {
     html! {
-        <AspectRatio />
+        <AspectRatio>
+            {"Constrained within the desired ratio!"}
+        </AspectRatio>
     }
 }
 ```
 
-{{#endtab }}
-{{#endtabs }}
+{{#endtab}}
+{{#endtabs}}
 
 ## API Reference
 
 ### Root
 
 Contains the content you want to constrain to a given ratio.
 
-{{#tabs global="framework" }}
-{{#tab name="Leptos" }}
+{{#tabs global="framework"}}
+{{#tab name="Leptos"}}
+
+| Prop       | Type              | Default |
+|------------|-------------------|---------|
+| `as_child` | `MaybeProp<bool>` | `false` |
+| `ratio`    | `MaybeProp<f64>`  | `1.0`   |
+| `node_ref` | `AnyNodeRef`      | -       |
+
+### Usage
+
+To use the `Root` alias for the `AspectRatio` component, import it and use `AspectRatio::Root` in your view.
+
+```rust,ignore
+use leptos::*;
+use radix_leptos_aspect_ratio as AspectRatio;
+
+#[component]
+fn Example() -> impl IntoView {
+    view! {
+        <AspectRatio::Root ratio=4.0/3.0>
+            <img src="path/to/image.jpg" alt="Example Image" />
+        </AspectRatio::Root>
+    }
+}
+```
 
-| Prop    | Type             | Default |
-| ------- | ---------------- | ------- |
-| `ratio` | `MaybeProp<f64>` | `1.0`   |
+{{#endtab}}
+{{#tab name="Yew"}}
 
-{{#endtab }}
-{{#tab name="Yew" }}
+<!-- TODO: Add or update Yew-specific props if needed -->
 
-| Prop       | Type                                            | Default |
-| ---------- | ----------------------------------------------- | ------- |
-| `as_child` | `Option<Callback<AspectRatioChildProps, Html>>` | -       |
-| `ratio`    | `f64`                                           | `1.0`   |
+| Prop    | Type  | Default |
+|---------|-------|---------|
+| `ratio` | `f64` | `1.0`   |
 
-{{#endtab }}
-{{#endtabs }}
+{{#endtab}}
+{{#endtabs}}
 
 ## See Also
 
--   [Radix documentation](https://www.radix-ui.com/primitives/docs/components/aspect-ratio)
+- [Radix documentation](https://www.radix-ui.com/primitives/docs/components/aspect-ratio)
+
+```