Box.tsx

gistfile1.txt

type Records<Keys extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> = {
  [P in Keys]: CSSProperties & JSX.IntrinsicElements[P] & { tag: P; };
}[Keys];

const Box: FC<Records> = ({tag, children, ...rest}): JSX.Element => {
  const {styles, attributes} = splitProps(rest);
  const Tag = tag as string;
  return <Tag  style={styles} {...attributes}>{children}</Tag>
}

const Test: FC = () => (
  <Box tag='button' type="submit" onSubmit={console.warn}/>
)

couples tag with attributes to match e.g. and not