Slottable pattern

[javialon26]

Hi, is there a way to achieve the same functionality as Slottable component in Radix:

example:

// your-button.jsx
import React from "react";
import { Slot, Slottable } from "@radix-ui/react-slot";

function Button({ asChild, children, leftElement, rightElement, ...props }) {
	const Comp = asChild ? Slot : "button";
	return (
		<Comp {...props}>
			{leftElement}
			<Slottable>{children}</Slottable>
			{rightElement}
		</Comp>
	);
}

I need to build a component with more elements than only a children, if I use the composition example (https://ark-ui.com/react/docs/guides/composition), I got an error, because my component have more than a children:

Component:
return (
    <ark.div className={classes.link} {...props}>
      <Icon>
        <LucideIcon />
      </Icon>
      {children}
    </ark.div>
  );

Usage:
<SidebarMenuItem icon={UserRound} asChild>
  <NavLink to="/">Participans</NavLink>
</SidebarMenuItem>

Thanks

[cschroeter]

@javialon26

Thanks mate for reaching out - You should be able to achieve this. Here is the Button example in Chakra that also renders different kind and amount of children:

import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react'
import { AbsoluteCenter, Button as ChakraButton, Span, Spinner } from '@chakra-ui/react'
import { forwardRef } from 'react'

interface ButtonLoadingProps {
  loading?: boolean
  loadingText?: React.ReactNode
}

export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
  const { loading, disabled, loadingText, children, ...rest } = props
  return (
    <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
      {loading && !loadingText ? (
        <>
          <AbsoluteCenter display="inline-flex">
            <Spinner size="inherit" color="inherit" />
          </AbsoluteCenter>
          <Span opacity={0}>{children}</Span>
        </>
      ) : loading && loadingText ? (
        <>
          <Spinner size="inherit" color="inherit" />
          {loadingText}
        </>
      ) : (
        children
      )}
    </ChakraButton>
  )
})

And later I can use it like this

<Button asChild size={{ base: 'xl', md: '2xl' }}>
  <NextLink href="/blocks">
    View Blocks <LuArrowRight />
  </NextLink>
</Button>

[carloitaben]

What about this? (taken from Radix docs)

import { Slot } from "radix-ui";

function Button({ asChild, children, leftElement, rightElement, ...props }) {
	const Comp = asChild ? Slot.Root : "button";
	return (
		<Comp {...props}>
			{leftElement}
			<Slot.Slottable>{children}</Slot.Slottable>
			{rightElement}
		</Comp>
	);
}

// usage
<Button asChild>
  <a href="/contact">Contact</a>
</Button>

Could something like this be done with Ark? If I build it like so

import { ark } from "@ark-ui/react/factory"

function Button({ asChild, children, leftElement, rightElement, ...props }) {
	return (
		<ark.button>
			{leftElement}
			{children}
			{rightElement}
		</ark.button>
	)
}

It throws with React.Children.only expected to receive a single React element child.