@ryvora/react-slot/README.md

🎰 Slot utility for composable React components. Pass props down and unlock asChild magic!

# Slot 🎰

Hey Component Customizer! 🛠️

The `slot` module (often providing a `Slot` component or a `useSlot` hook) is a clever utility that allows a component to "pass down" its props to its direct child element, effectively "slotting" the child into its own rendering logic. This is a key ingredient in making highly composable and flexible components, especially when used with the `asChild` prop pattern seen in `@ryvora/react-primitive`.

It's like having a special placeholder in your component that your users can fill with their own custom content, which then inherits the parent's behavior! 🧩➡️🎁

## The Magic of `asChild`

When a component like `Primitive.button` receives an `asChild` prop, it doesn't render its own `button` tag. Instead, it clones its _single React child element_, merging its own props (like event handlers or ARIA attributes) with the child's props. The `Slot` utility is often what powers this merging and cloning behavior internally.

## Conceptual Usage (Often Internal to Primitives)

```tsx
// Simplified example of how a Primitive might use Slot internally
import { Slot } from '@ryvora/react-slot'; // Or it might be an internal utility

const MyPrimitiveButton = React.forwardRef(({ asChild, children, ...props }, forwardedRef) => {
  const Comp = asChild ? Slot : 'button'; // If asChild, use Slot, else render a button
  return (
    <Comp ref={forwardedRef} {...props}>
      {children}
    </Comp>
  );
});

// User consuming MyPrimitiveButton with asChild:
function App() {
  return (
    <MyPrimitiveButton asChild onClick={() => console.log('Clicked wrapped link!')}>
      <a href="#">This link will behave like MyPrimitiveButton!</a>
    </MyPrimitiveButton>
  );
}
```

Unlock ultimate composability and flexibility in your component APIs! 🔗✨