extend native element attributes, remove redundant prop declarations

Author: Shane98c

src/button.tsx

@@ -7,7 +7,12 @@ import getSxColor from './utils/get-sx-color'
 const hasCustomHover = (comp: unknown): comp is { hover: ThemeUIStyleObject } =>
   comp != null && typeof comp === 'object' && 'hover' in comp
 
-export interface ButtonProps extends Omit<BoxProps, 'prefix'> {
+export interface ButtonProps
+  extends Omit<BoxProps, 'prefix'>,
+    Omit<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      keyof BoxProps | 'prefix'
+    > {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   align?:
     | 'baseline'

src/callout.tsx

@@ -3,12 +3,15 @@ import { Box, ThemeUIStyleObject } from 'theme-ui'
 import { Arrow } from '@carbonplan/icons'
 import Link from './link'
 
-export interface CalloutProps extends React.AnchorHTMLAttributes<HTMLElement> {
+export interface CalloutProps
+  extends React.AnchorHTMLAttributes<HTMLElement>,
+    Omit<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      keyof React.AnchorHTMLAttributes<HTMLElement>
+    > {
   label: ReactNode
   children: ReactNode
   inverted?: boolean
-  color?: string
-  href?: string
   internal?: boolean
   sx?: ThemeUIStyleObject
 }

src/colorbar.tsx

@@ -29,7 +29,6 @@ export interface ColorbarProps extends FlexProps {
   discrete?: boolean
   horizontal?: boolean
   bottom?: boolean
-  sx?: ThemeUIStyleObject
   sxClim?: ThemeUIStyleObject
 }
 const styles = {

src/colors.tsx

@@ -1,8 +1,7 @@
 import React, { ReactNode } from 'react'
-import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
+import { Box, BoxProps } from 'theme-ui'
 
 interface InlineColorProps extends BoxProps {
-  sx?: ThemeUIStyleObject
   color: string
   children: ReactNode
 }

src/input.tsx

@@ -1,12 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Input as ThemedInput, ThemeUIStyleObject } from 'theme-ui'
+import { Input as ThemedInput } from 'theme-ui'
 import getSizeStyles from './utils/get-size-styles'
 
 export interface InputProps
   extends Omit<React.ComponentPropsWithRef<typeof ThemedInput>, 'size'> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   inverted?: boolean
-  sx?: ThemeUIStyleObject
 }
 
 const Input = (

src/select.tsx

@@ -1,14 +1,18 @@
-import React, { ReactNode, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Box, BoxProps, ThemeUIStyleObject } from 'theme-ui'
 import { Arrow } from '@carbonplan/icons'
 import getSizeStyles from './utils/get-size-styles'
 import getSxColor from './utils/get-sx-color'
 
-export interface SelectProps extends Omit<BoxProps, 'onChange'> {
+export interface SelectProps
+  extends Omit<BoxProps, 'onChange'>,
+    Omit<
+      React.SelectHTMLAttributes<HTMLSelectElement>,
+      keyof BoxProps | 'onChange' | 'size'
+    > {
   size?: 'xs' | 'sm' | 'md'
   sxSelect?: ThemeUIStyleObject
   onChange?: React.ChangeEventHandler<HTMLSelectElement>
-  children: ReactNode
 }
 
 const Select = ({

src/tag.tsx

@@ -2,7 +2,12 @@ import React from 'react'
 import { Box, BoxProps } from 'theme-ui'
 import getSxColor from './utils/get-sx-color'
 
-export interface TagProps extends BoxProps {
+export interface TagProps
+  extends BoxProps,
+    Omit<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      keyof BoxProps | 'value'
+    > {
   label: BoxProps['aria-label']
   value?: boolean
 }

src/toggle.tsx

@@ -3,10 +3,13 @@ import { Box, BoxProps } from 'theme-ui'
 import { transparentize } from '@theme-ui/color'
 import getSxColor from './utils/get-sx-color'
 
-export interface ToggleProps extends Omit<BoxProps, 'value'> {
+export interface ToggleProps
+  extends Omit<BoxProps, 'value'>,
+    Omit<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      keyof BoxProps | 'value'
+    > {
   value?: boolean
-  onClick?: React.MouseEventHandler<HTMLElement>
-  disabled?: boolean
 }
 
 const Toggle = (