Primitive

npm install @radix-ui/react-primitive

import { Primitive } from '@radix-ui/react-primitive';

function Button() {
  return (
    <Primitive.button
      type="button"
      onClick={() => console.log('clicked')}
    >
      Click me
    </Primitive.button>
  );
}

import { Primitive } from '@radix-ui/react-primitive';
import Link from 'next/link';

function NavigationItem({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <Primitive.a asChild>
      <Link href={href}>
        {children}
      </Link>
    </Primitive.a>
  );
}

import { Primitive } from '@radix-ui/react-primitive';

interface ButtonProps extends React.ComponentPropsWithRef<typeof Primitive.button> {
  variant?: 'primary' | 'secondary';
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', className, ...props }, ref) => {
    return (
      <Primitive.button
        ref={ref}
        className={`button button-${variant} ${className}`}
        {...props}
      />
    );
  }
);

import { Primitive } from '@radix-ui/react-primitive';

interface TextProps extends React.ComponentPropsWithRef<typeof Primitive.span> {
  asChild?: boolean;
}

const Text = React.forwardRef<HTMLSpanElement, TextProps>(
  ({ asChild, ...props }, ref) => {
    return (
      <Primitive.span asChild={asChild} ref={ref} {...props} />
    );
  }
);

// Use as span
<Text>Hello</Text>

// Use as heading
<Text asChild>
  <h1>Hello</h1>
</Text>

// Use as link
<Text asChild>
  <a href="/home">Hello</a>
</Text>

type PrimitivePropsWithRef<E extends React.ElementType> = 
  React.ComponentPropsWithRef<E> & {
    asChild?: boolean;
  }

interface PrimitiveForwardRefComponent<E extends React.ElementType>
  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}

function dispatchDiscreteCustomEvent<E extends CustomEvent>(
  target: E['target'], 
  event: E
): void

import { dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';

function Component() {
  const handlePointerDown = (event: React.PointerEvent) => {
    // Dispatch custom event with proper React batching
    dispatchDiscreteCustomEvent(
      event.currentTarget,
      new CustomEvent('customEvent', { detail: { value: 'data' } })
    );
  };

  return <div onPointerDown={handlePointerDown}>Interactive element</div>;
}