[Slot] Add support for nested children (#1825)

[ayloncarrijo]

Description

This PR modifies the way Slottable works, adding support for nested children without the need to parse them.

Fixes #1825

Example

import React from 'react';
import { Slot, Slottable } from '@radix-ui/react-slot';

function Button({ asChild, children, ...props }) {
  const Component = asChild ? Slot : "button";

  return (
    <Component {...props}>
      <Slottable child={children}>
        {(child) => (
          <div>
            <div>icon</div>
            <div>{child}</div>
            <div>icon</div>
          </div>
        )}
      </Slottable>
    </Component>
  );
}

[jjenzz]

i really like this 👍 it might be good to add a test that verifies a deeply nested tree works if you don’t mind @ayloncarrijo?

it will help flag an error in future if anyone tries to refactor and remove the child as func pattern.

[mskelton]

This PR is awesome, I copied this into a project of mine which needed this behavior. Anything I can do to help this PR move forward and get merged?

[ahmadghoniem]

any updates on this?

[rrmesquita]

I also copied this into a project and it works very nicely. I'm looking forward to seeing this merged. Thanks @ayloncarrijo !

[joe-bell]

Swinging by to say thanks @ayloncarrijo: this worked a treat!

[mehdibha]

Any updates on this PR?