Have primer components extend props for their native elements.

.gitignore

@@ -7,3 +7,4 @@
 coverage/
 dist/
 node_modules
+.cache

index.d.ts

@@ -60,11 +60,14 @@ declare module '@primer/components' {
       StyledSystem.AlignSelfProps,
       StyledSystem.OrderProps {}
 
-  interface FlexContainerProps
+  interface FlexProps
     extends BaseProps,
       CommonProps,
       LayoutProps,
-      FlexItemProps,
+      StyledSystem.FlexProps,
+      StyledSystem.JustifySelfProps,
+      StyledSystem.AlignSelfProps,
+      StyledSystem.OrderProps,
       StyledSystem.FlexBasisProps,
       StyledSystem.FlexDirectionProps,
       StyledSystem.FlexWrapProps,
@@ -73,41 +76,38 @@ declare module '@primer/components' {
       StyledSystem.JustifyContentProps,
       StyledSystem.JustifyItemsProps {}
 
-  export interface FlexProps
-    extends FlexContainerProps,
-      Omit<React.HTMLProps<HTMLDivElement>, keyof FlexContainerProps> {}
-
   export const Flex: React.FunctionComponent<FlexProps> & {
     Item: React.FunctionComponent<FlexItemProps>
   }
 
-  export interface BoxProps extends BaseProps, CommonProps, LayoutProps {}
+  export interface BoxProps extends BaseProps, CommonProps, LayoutProps, React.HTMLAttributes<HTMLDivElement> {}
 
   export const Box: React.FunctionComponent<BoxProps>
 
-  export interface TextProps extends BaseProps, CommonProps, TypographyProps {}
+  export interface TextProps extends BaseProps, CommonProps, TypographyProps, React.HTMLAttributes<HTMLSpanElement> {}
 
   export const Text: React.FunctionComponent<TextProps>
 
-  export interface HeadingProps extends BaseProps, CommonProps, TypographyProps {}
+  export interface HeadingProps
+    extends BaseProps,
+      CommonProps,
+      TypographyProps,
+      React.HTMLAttributes<HTMLHeadingElement> {}
 
   export const Heading: React.FunctionComponent<HeadingProps>
 
   type DetailsRenderFunction = (args: {open: boolean; toggle: () => void}) => React.ReactElement
 
-  export interface DetailsProps extends CommonProps {
-    open?: boolean
+  export interface DetailsProps extends CommonProps, React.HTMLAttributes<HTMLDetailsElement> {
     render?: DetailsRenderFunction
     children?: DetailsRenderFunction | React.ReactNode
     overlay?: boolean
   }
 
   export const Details: React.FunctionComponent<DetailsProps>
 
-  export interface ButtonProps extends BaseProps, CommonProps {
-    disabled?: boolean
+  export interface ButtonProps extends BaseProps, CommonProps, React.HTMLAttributes<HTMLDetailsElement> {
     grouped?: boolean
-    onClick?: Function
     size?: 'sm' | 'large'
   }
 
@@ -116,9 +116,7 @@ declare module '@primer/components' {
   export const ButtonDanger: React.FunctionComponent<ButtonProps>
   export const Button: React.FunctionComponent<ButtonProps>
 
-  export interface AvatarProps extends CommonProps {
-    alt: string
-    src: string
+  export interface AvatarProps extends CommonProps, React.HTMLAttributes<HTMLImageElement> {
     isChild?: boolean
     size?: number
   }
@@ -129,7 +127,7 @@ declare module '@primer/components' {
 
   export const BaseStyles: React.FunctionComponent<BaseStylesProps>
 
-  export interface BorderBoxProps extends CommonProps, LayoutProps {
+  export interface BorderBoxProps extends CommonProps, LayoutProps, BoxProps {
     border?: string
     borderColor?: string
     borderRadius?: string | number
@@ -138,19 +136,17 @@ declare module '@primer/components' {
 
   export const BorderBox: React.FunctionComponent<BorderBoxProps>
 
-  export interface BranchNameProps extends CommonProps {
-    href?: string
-  }
+  export interface BranchNameProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {}
 
   export const BranchName: React.FunctionComponent<BranchNameProps>
 
-  export interface CircleBadgeProps extends CommonProps {
+  export interface CircleBadgeProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     size?: string | number
   }
 
   export const CircleBadge: React.FunctionComponent<CircleBadgeProps>
 
-  export interface CircleOcticonProps extends CommonProps {
+  export interface CircleOcticonProps extends CommonProps, FlexProps {
     size?: number
     icon: React.ReactNode
   }
@@ -164,9 +160,9 @@ declare module '@primer/components' {
 
   export const StyledOcticon: React.FunctionComponent<StyledOcticonProps>
 
-  export interface DropdownProps extends CommonProps {}
+  export interface DropdownProps extends CommonProps, ButtonProps {}
 
-  export interface DropdownMenuProps extends CommonProps {
+  export interface DropdownMenuProps extends CommonProps, React.HTMLAttributes<HTMLUListElement> {
     direction?: string
     title: string
   }
@@ -176,11 +172,11 @@ declare module '@primer/components' {
     Item: React.FunctionComponent<DropdownProps>
   }
 
-  export interface FilterListProps extends CommonProps {
+  export interface FilterListProps extends CommonProps, React.HTMLAttributes<HTMLUListElement> {
     small?: boolean
   }
 
-  export interface FilterListItemProps extends CommonProps {
+  export interface FilterListItemProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {
     count?: number
     selected?: boolean
   }
@@ -189,41 +185,44 @@ declare module '@primer/components' {
     Item: React.FunctionComponent<FilterListItemProps>
   }
 
-  export interface FlashProps extends CommonProps {
+  export interface FlashProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     full?: boolean
     scheme?: string
   }
 
   export const Flash: React.FunctionComponent<FlashProps>
 
-  export interface CounterLabelProps extends CommonProps {
+  export interface CounterLabelProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
     scheme?: string
   }
 
   export const CounterLabel: React.FunctionComponent<CounterLabelProps>
 
-  export interface LabelProps extends CommonProps {
+  export interface LabelProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
     outline?: boolean
     size?: 'small' | 'medium' | 'large' | 'xl'
     dropshadow?: boolean
   }
 
   export const Label: React.FunctionComponent<LabelProps>
 
-  export interface LinkProps extends CommonProps, TypographyProps {
-    href: string
+  export interface LinkProps extends CommonProps, TypographyProps, React.HTMLAttributes<HTMLAnchorElement> {
     underline?: boolean
   }
 
   export const Link: React.FunctionComponent<LinkProps>
 
-  export interface PointerBoxProps extends CommonProps, LayoutProps {
+  export interface PointerBoxProps extends CommonProps, LayoutProps, BorderBoxProps {
     caret?: string
   }
 
   export const PointerBox: React.FunctionComponent<PointerBoxProps>
 
-  export interface PositionComponentProps extends PositionProps, CommonProps, LayoutProps {}
+  export interface PositionComponentProps
+    extends PositionProps,
+      CommonProps,
+      LayoutProps,
+      React.HTMLAttributes<HTMLDivElement> {}
 
   export const Relative: React.FunctionComponent<PositionComponentProps>
   export const Absolute: React.FunctionComponent<PositionComponentProps>
@@ -237,25 +236,26 @@ declare module '@primer/components' {
 
   export const StateLabel: React.FunctionComponent<StateLabelProps>
 
-  export interface TextInputProps extends CommonProps {
+  export interface TabNavProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {}
+
+  export interface TabNavLinkProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {
+    selected?: boolean
+  }
+
+  export const TabNav: React.FunctionComponent<TabNavProps> & {
+    Link: React.FunctionComponent<TabNavLinkProps>
+  }
+
+  export interface TextInputProps extends CommonProps, React.HTMLAttributes<HTMLInputElement> {
     autocomplete?: string
-    'aria-label'?: string
     block?: boolean
-    disabled?: boolean
-    id?: string
-    name?: string
-    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void
-    placeholder?: string
-    required?: boolean
     size?: 'small' | 'large'
-    value?: string
   }
 
   export const TextInput: React.FunctionComponent<TextInputProps>
 
-  export interface TooltipProps extends CommonProps {
+  export interface TooltipProps extends CommonProps, React.HTMLAttributes<HTMLSpanElement> {
     align?: 'left' | 'right'
-    'aria-label'?: string
     direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
     noDelay?: boolean
     text?: string
@@ -264,17 +264,30 @@ declare module '@primer/components' {
 
   export const Tooltip: React.FunctionComponent<TooltipProps>
 
-  export interface UnderlineNavProps extends CommonProps {
+  export interface UnderlineNavProps extends CommonProps, React.HTMLAttributes<HTMLDivElement> {
     actions?: React.ReactNode
     align?: 'right'
-    'aria-label'?: string
     full?: boolean
     label?: string
   }
 
-  export const UnderlineNav: React.FunctionComponent<UnderlineNavProps>
+  export interface UnderlineNavLinkProps extends CommonProps, React.HTMLAttributes<HTMLAnchorElement> {
+    selected?: boolean
+  }
+
+  export const UnderlineNav: React.FunctionComponent<UnderlineNavProps> & {
+    Link: React.FunctionComponent<UnderlineNavLinkProps>
+  }
 
   export const theme: Object
+
+  export interface DialogProps extends CommonProps {
+    title: string
+    isOpen: boolean
+    onDismiss: () => unknown
+  }
+
+  export const Dialog: React.FunctionComponent<DialogProps>
 }
 
 declare module '@primer/components/src/Box' {
@@ -404,6 +417,10 @@ declare module '@primer/components/src/StateLabel' {
   import {StateLabel} from '@primer/components'
   export default StateLabel
 }
+declare module '@primer/components/src/TabNav' {
+  import {TabNav} from '@primer/components'
+  export default TabNav
+}
 declare module '@primer/components/src/TextInput' {
   import {TextInput} from '@primer/components'
   export default TextInput
@@ -420,3 +437,7 @@ declare module '@primer/components/src/theme' {
   import {theme} from '@primer/components'
   export default theme
 }
+declare module '@primer/components/src/Dialog' {
+  import {Dialog} from '@primer/components'
+  export default Dialog
+}