Update Aspect Ratio to Leptos 0.7

Cargo.toml

@@ -1,34 +1,56 @@
 [workspace]
-# Temporarily disabled to upgrade individual packages to Leptos 0.7.
-# members = [
-#     "book-examples/*/*",
-#     "packages/colors",
-#     "packages/icons/*",
-#     "packages/primitives/*/*",
-#     "packages/themes/*",
-#     "scripts",
-#     "stories/*",
-# ]
+# Temporarily disabled subcrates to be upgraded individually to Leptos 0.7.
+# Once a crate is ready, uncomment it here.
 members = [
     "book-examples/*/*",
     "packages/colors",
-    "packages/icons/*",
-    "packages/primitives/leptos/accessible-icon",
-    "packages/primitives/leptos/arrow",
+    "packages/icons/dioxus",
+    "packages/icons/yew",
+
+    # -- Leptos Primitives (commented until they're upgraded) --
+    # "packages/primitives/leptos/accessible-icon",
+    # "packages/primitives/leptos/arrow",
     "packages/primitives/leptos/aspect-ratio",
-    "packages/primitives/leptos/direction",
-    "packages/primitives/leptos/id",
-    "packages/primitives/leptos/label",
-    "packages/primitives/leptos/use-controllable-state",
-    "packages/primitives/leptos/use-escape-keydown",
-    "packages/primitives/leptos/use-previous",
-    "packages/primitives/leptos/use-size",
-    "packages/primitives/leptos/visually-hidden",
+    # "packages/primitives/leptos/avatar",
+    # "packages/primitives/leptos/checkbox",
+    # "packages/primitives/leptos/collection",
+    # "packages/primitives/leptos/compose-refs",
+    # "packages/primitives/leptos/direction",
+    # "packages/primitives/leptos/dismissable-layer",
+    # "packages/primitives/leptos/dropdown-menu",
+    # "packages/primitives/leptos/focus-guards",
+    # "packages/primitives/leptos/focus-scope",
+    # "packages/primitives/leptos/id",
+    # "packages/primitives/leptos/label",
+    # "packages/primitives/leptos/menu",
+    # "packages/primitives/leptos/popover",
+    # "packages/primitives/leptos/popper",
+    # "packages/primitives/leptos/portal",
+    # "packages/primitives/leptos/presence",
+    "packages/primitives/leptos/primitive",
+    # "packages/primitives/leptos/progress",
+    # "packages/primitives/leptos/roving-focus",
+    # "packages/primitives/leptos/select",
+    # "packages/primitives/leptos/separator",
+    # "packages/primitives/leptos/slot",
+    # "packages/primitives/leptos/switch",
+    # "packages/primitives/leptos/tabs",
+    # "packages/primitives/leptos/toggle",
+    # "packages/primitives/leptos/use-controllable-state",
+    # "packages/primitives/leptos/use-escape-keydown",
+    # "packages/primitives/leptos/use-previous",
+    # "packages/primitives/leptos/use-size",
+    # "packages/primitives/leptos/visually-hidden",
+
+    # -- Yew Primitives --
     "packages/primitives/yew/*",
+
+    # -- Themes, Scripts, and Stories --
     "packages/themes/yew",
     "scripts",
     "stories/*",
 ]
+
 resolver = "2"
 
 [workspace.package]
@@ -39,14 +61,17 @@ repository = "https://github.com/RustForWeb/radix"
 version = "0.0.2"
 
 [workspace.dependencies]
-console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
+console_log = "1.0.0"
 dioxus = "0.6.1"
 leptos = "0.7.2"
 leptos_dom = "0.7.2"
 leptos_router = "0.7.2"
 leptos-node-ref = "0.0.3"
+leptos-maybe-callback = "0.0.3"
 leptos-style = "0.0.3"
+leptos-typed-fallback-show = "0.0.3"
+leptos-use = "0.15.2"
 log = "0.4.22"
 send_wrapper = "0.6.0"
 serde = "1.0.198"
@@ -58,6 +83,43 @@ yew-router = "0.18.0"
 yew-struct-component = "0.1.4"
 yew-style = "0.1.4"
 
+# 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-accessible-icon.path = "./packages/primitives/leptos/accessible-icon"
+#radix-leptos-avatar.path = "./packages/primitives/leptos/avatar"
+#radix-leptos-checkbox.path = "./packages/primitives/leptos/checkbox"
+#radix-leptos-collection.path = "./packages/primitives/leptos/collection"
+#radix-leptos-compose-refs.path = "./packages/primitives/leptos/compose-refs"
+#radix-leptos-direction.path = "./packages/primitives/leptos/direction"
+#radix-leptos-dismissable-layer.path = "./packages/primitives/leptos/dismissable-layer"
+#radix-leptos-dropdown-menu.path = "./packages/primitives/leptos/dropdown-menu"
+#radix-leptos-focus-guards.path = "./packages/primitives/leptos/focus-guards"
+#radix-leptos-focus-scope.path = "./packages/primitives/leptos/focus-scope"
+#radix-leptos-id.path = "./packages/primitives/leptos/id"
+#radix-leptos-label.path = "./packages/primitives/leptos/label"
+#radix-leptos-menu.path = "./packages/primitives/leptos/menu"
+#radix-leptos-popper.path = "./packages/primitives/leptos/popper"
+#radix-leptos-portal.path = "./packages/primitives/leptos/portal"
+#radix-leptos-presence.path = "./packages/primitives/leptos/presence"
+radix-leptos-primitive.path = "./packages/primitives/leptos/primitive"
+#radix-leptos-progress.path = "./packages/primitives/leptos/progress"
+#radix-leptos-roving-focus.path = "./packages/primitives/leptos/roving-focus"
+#radix-leptos-select.path = "./packages/primitives/leptos/select"
+#radix-leptos-separator.path = "./packages/primitives/leptos/separator"
+#radix-leptos-slot.path = "./packages/primitives/leptos/slot"
+#radix-leptos-switch.path = "./packages/primitives/leptos/switch"
+#radix-leptos-tabs.path = "./packages/primitives/leptos/tabs"
+#radix-leptos-toggle.path = "./packages/primitives/leptos/toggle"
+#radix-leptos-use-controllable-state.path = "./packages/primitives/leptos/use-controllable-state"
+#radix-leptos-use-escape-keydown.path = "./packages/primitives/leptos/use-escape-keydown"
+#radix-leptos-use-previous.path = "./packages/primitives/leptos/use-previous"
+#radix-leptos-use-size.path = "./packages/primitives/leptos/use-size"
+#radix-leptos-visually-hidden.path = "./packages/primitives/leptos/visually-hidden"
+
 [patch.crates-io]
 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" }

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)
+
+```

packages/primitives/leptos/aspect-ratio/Cargo.toml

@@ -11,4 +11,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-leptos-style.workspace = true
+leptos-node-ref.workspace = true
+radix-leptos-primitive.workspace = true