@ryvora/react-primitive/README.md

🧱 Foundational React primitives with asChild support. Build flexible, composable UIs!

# Primitive 🧱

Hey there, Component Architect! 🏗️

The `primitive` module is the bedrock of your component library! It provides a set of base components (like `Primitive.div`, `Primitive.button`, `Primitive.span`, etc.) that act as enhanced versions of standard HTML elements.

Think of them as foundational Lego bricks 🧱 – simple, versatile, and essential for building more complex structures!

## Why Primitives?

- **`asChild` Prop:** This is a super cool feature! If you pass `asChild` to a primitive, it will merge its own props and behavior with its direct child component, instead of rendering its own DOM element. This is amazing for building highly composable and flexible component APIs.
- **Accessibility:** Primitives can help enforce accessibility best practices or add default ARIA roles/attributes.
- **Styling Consistency:** They can be a central place to apply base styling or integrate with your styling solution.
- **Event Composition:** Might include utilities like `composeEventHandlers` to easily merge multiple event handlers.

## Basic Usage

```tsx
import { Primitive } from '@ryvora/react-primitive';

// Standard usage:
const MyButton = (props) => {
  return <Primitive.button {...props} style={{ backgroundColor: 'blue', color: 'white' }} />;
};

// Using asChild:
const FancyLink = React.forwardRef(({ children, ...props }, ref) => {
  return (
    <Primitive.a {...props} ref={ref} style={{ textDecoration: 'underline', color: 'purple' }}>
      {children}
    </Primitive.a>
  );
});

const MyComponent = () => {
  return (
    <Primitive.div asChild style={{ padding: '10px', border: '1px solid red' }}>
      <FancyLink href="#">
        This will be a link, styled by both Primitive.div and FancyLink!
      </FancyLink>
    </Primitive.div>
  );
};
```

Build solid foundations for your UI with Primitives! 🛠️