type def fixes

src/components/Buttons/Button.d.ts

@@ -2,12 +2,7 @@ import * as React from 'react'
 import { RadiumStyles, ElementAttributes } from '../..'
 import { WithThemeInjectedProps, ApplyWithTheme } from '../../styles/themer/withTheme'
 
-export interface ButtonProps
-  extends WithThemeInjectedProps,
-    Pick<
-      React.ComponentPropsWithoutRef<'button'>,
-      'onClick' | 'onMouseDown' | 'type' | 'tabIndex'
-    > {
+export interface ButtonProps extends WithThemeInjectedProps {
   children?: React.ReactNode
 
   /** Whether or not the button is disabled. */
@@ -22,9 +17,6 @@ export interface ButtonProps
   /** Optional style overrides. */
   style?: RadiumStyles
 
-  /** Any additonal props to add to the element (e.g. data attributes). */
-  elementAttributes?: ElementAttributes<React.ComponentPropsWithoutRef<'button'>>
-
   /** An optional icon. Can be a an icon name or a Snacks `Icon` component. */
   icon?: string | React.ReactElement<any> // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -41,6 +33,19 @@ export interface ButtonProps
   href?: string
 }
 
-declare const Button: ApplyWithTheme<React.ComponentClass<ButtonProps>>
+type ButtonElementProps<C extends React.ElementType> = Pick<
+  React.ComponentPropsWithRef<C>,
+  'onClick' | 'onMouseDown' | 'type' | 'tabIndex'
+> & {
+  elementAttributes?: ElementAttributes<React.ComponentPropsWithoutRef<C>>
+}
+
+type ButtonBase<C extends React.ElementType, P = {}> = ApplyWithTheme<
+  (props: P & ButtonProps & ButtonElementProps<C>) => JSX.Element
+>
+
+type Button = ButtonBase<'a', { href: string }> & ButtonBase<'button'>
+
+declare const Button: Button
 
 export default Button

src/components/Icon/Icon.d.ts

@@ -4,16 +4,16 @@ import hexValues from './hexValues'
 
 export interface IconProps {
   /** String name of icon - ex 'cart' */
-  name: keyof typeof hexValues
+  name?: keyof typeof hexValues
 
   /** Hexcode of desired icon from ic-icons */
-  code: string
+  code?: string
 
   /** Optional style overrides */
   style?: RadiumStyles
 
   /** Callback function called after button click */
-  onClick: React.ComponentProps<'i'>['onClick']
+  onClick?: React.ComponentProps<'i'>['onClick']
 }
 
 declare const Icon: React.ComponentType<IconProps>

src/components/Loading/LoadingBox.d.ts

@@ -3,16 +3,16 @@ import { RadiumStyles } from '../..'
 
 export interface LoadingBoxProps {
   /** Use for rendering dark backgrounds. */
-  background: 'light' | 'dark'
+  background?: 'light' | 'dark'
 
   /** Use for rendering light backgrounds, overrides dark */
-  shape: 'circle' | 'square' | 'line'
+  shape?: 'circle' | 'square' | 'line'
 
   /**
    *  By default, `size` will determine the components width.
    *  If the `shape` is prop `circle` or `square`, `size` will apply to height and width.
    */
-  size: string | number
+  size?: string | number
 
   style?: RadiumStyles
 }

src/styles/themer/utils.d.ts

@@ -32,9 +32,7 @@ export declare function cleanConfig<T extends Theme>(themeConfig: T): Theme
 
 export declare function validConfigValue(section: string, sectionKey: string): boolean
 
-type DeepPartial<T> = { [P in keyof T]?: DeepPartial<T[P]> }
-
-export interface ThemePropTypes extends DeepPartial<Theme> {}
+export type ThemePropTypes = Theme
 
 export declare const themePropTypes: PropTypes.Requireable<
   PropTypes.InferProps<{

test/typescript/foobar.tsx

@@ -2,7 +2,15 @@ import * as React from 'react'
 import { Button, SVGIcon } from '../../src'
 
 export function Foo() {
-  return <Button>Foo</Button>
+  return <Button onClick={(e: React.MouseEvent<HTMLButtonElement>) => e}>Foo</Button>
+}
+
+export function Foo2() {
+  return (
+    <Button href="foo.html" onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e}>
+      Foo
+    </Button>
+  )
 }
 
 export function Bar() {