```tsx
import { Primitive } from '@gentleduck/primitives/primitive-elements'
```

## Usage

```tsx
// Renders a native <button>
<Primitive.button onClick={handleClick}>Click me</Primitive.button>

// Renders YOUR element with the button's forwarded props
<Primitive.button asChild>
  <a href="/next">Navigate</a>
</Primitive.button>
```

## Available elements

}>
  `Primitive.a`, `Primitive.button`, `Primitive.div`, `Primitive.form`, `Primitive.h2`, `Primitive.h3`, `Primitive.img`, `Primitive.input`, `Primitive.label`, `Primitive.li`, `Primitive.nav`, `Primitive.ol`, `Primitive.p`, `Primitive.span`, `Primitive.svg`, `Primitive.ul`

  Each accepts all native HTML props for that element type, plus `asChild`.

## `dispatchDiscreteCustomEvent`

A utility that dispatches a custom event inside `flushSync` to ensure React processes the resulting state update synchronously. Used internally by primitives that need synchronous event processing for discrete user interactions.

```tsx
import { dispatchDiscreteCustomEvent } from '@gentleduck/primitives/primitive-elements'
```

## Building custom primitives

}>
  When building your own primitives, use `Primitive.*` elements as the base to get `asChild` support for free.

```tsx
const MyButton = React.forwardRef((props, ref) => {
  return <Primitive.button {...props} ref={ref} />
})
```