refactor(ui): share one base props type across Mosaic components

Heading, Text and Badge each derived their props differently: two base types
(`React.ComponentPropsWithRef` vs headless `ComponentProps`), two things omitted
(`color` vs `render`), the render union restated inline in one and imported in
the other, and two ways of narrowing `color` — `Omit` then redeclare in the
interfaces, silent intersection in the type alias.

Collapse all of it into `MosaicComponentProps<Tag>`, mirroring Base UI's
`BaseUIComponentProps`. `color` is omitted once, so the next component to expose
it as a variant inherits the narrowing instead of rediscovering it.

Type-only: all three components resolve to the same props as before.

Author: alexcarpenter

.changeset/mosaic-component-props.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/mosaic/components/badge/badge.tsx

@@ -1,13 +1,13 @@
-import { type ComponentProps, type RenderProp, useRender } from '@clerk/headless/utils';
+import { useRender } from '@clerk/headless/utils';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { colors, styles } from './badge.styles';
 
-export type BadgeProps = Omit<ComponentProps<'span'>, 'render'> & {
+export type BadgeProps = MosaicComponentProps<'span'> & {
   color?: 'primary' | 'neutral' | 'warning' | 'negative' | 'positive';
-  render?: RenderProp<React.ComponentPropsWithRef<'span'>> | React.ReactElement;
 };
 
 /**

packages/ui/src/mosaic/components/heading/heading.tsx

@@ -1,19 +1,17 @@
-import type { RenderPropOrElement } from '@clerk/headless/utils';
 import { useRender } from '@clerk/headless/utils';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { useContextProps } from '../../utils/context';
 import type { TypographyColor, TypographySize } from '../typography.styles';
 import { colors, sizes } from '../typography.styles';
 import { styles } from './heading.styles';
 
-// `color` replaces the legacy HTML `color` attribute, whose `string` type would widen the variant.
-export interface HeadingProps extends Omit<React.ComponentPropsWithRef<'h2'>, 'color'> {
+export interface HeadingProps extends MosaicComponentProps<'h2'> {
   size?: TypographySize;
   color?: TypographyColor;
-  render?: RenderPropOrElement<'h2'>;
 }
 
 export const HeadingContext = React.createContext<Partial<HeadingProps> | null>(null);

packages/ui/src/mosaic/components/text/text.tsx

@@ -1,18 +1,16 @@
-import type { RenderPropOrElement } from '@clerk/headless/utils';
 import { useRender } from '@clerk/headless/utils';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { useContextProps } from '../../utils/context';
 import type { TypographyColor, TypographySize } from '../typography.styles';
 import { colors, sizes } from '../typography.styles';
 
-// `color` replaces the legacy HTML `color` attribute, whose `string` type would widen the variant.
-export interface TextProps extends Omit<React.ComponentPropsWithRef<'p'>, 'color'> {
+export interface TextProps extends MosaicComponentProps<'p'> {
   size?: TypographySize;
   color?: TypographyColor;
-  render?: RenderPropOrElement<'p'>;
 }
 
 export const TextContext = React.createContext<Partial<TextProps> | null>(null);

packages/ui/src/mosaic/props.ts

@@ -1,5 +1,21 @@
+import type { RenderPropOrElement } from '@clerk/headless/utils';
 import type React from 'react';
 
+/**
+ * The base props every Mosaic component accepts: the native props for its default
+ * tag, plus the `render` escape hatch that swaps the rendered element.
+ *
+ * `color` is omitted because it is a non-standard HTML attribute typed `string`,
+ * which would widen any component that exposes `color` as a variant. Omitting it
+ * here rather than per component means a new component inherits the narrowing.
+ */
+export type MosaicComponentProps<Tag extends keyof React.JSX.IntrinsicElements> = Omit<
+  React.ComponentPropsWithRef<Tag>,
+  'color'
+> & {
+  render?: RenderPropOrElement<Tag>;
+};
+
 // The public styling contract, emitted onto a component's root element:
 //   1. `--cl-*` vars      — from `tokens.stylex.ts` (`:root { --cl-color-primary: … }`)
 //   2. `.cl-<slot>` class — from `themeProps` (`.cl-button { … }`)