fix: override types

components/auto-complete/auto-complete.tsx

@@ -40,7 +40,8 @@ const defaultProps = {
   className: '',
 }
 
-export type AutoCompleteProps = Props & typeof defaultProps & React.InputHTMLAttributes<any>
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
+export type AutoCompleteProps = Props & typeof defaultProps & NativeAttrs
 
 const childrenToOptionsNode = (options: AutoCompleteOptions) => {
   if (options.length === 0) return null

components/avatar/avatar.tsx

@@ -21,8 +21,8 @@ const defaultProps = {
   className: '',
 }
 
-type NativeAttrs = React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>
-export type AvatarProps = Props & typeof defaultProps & Partial<NativeAttrs>
+type NativeAttrs = Omit<Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>, keyof Props>
+export type AvatarProps = Props & typeof defaultProps & NativeAttrs
 
 const getAvatarSize = (size: NormalSizes | number): string => {
   if (typeof size === 'number') return `${size}px`

components/badge/badge.tsx

@@ -16,7 +16,8 @@ const defaultProps = {
   className: '',
 }
 
-export type BadgeProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type BadgeProps = Props & typeof defaultProps & NativeAttrs
 
 const getFontSize = (size: NormalSizes) => {
   const sizes: { [key in NormalSizes]: string } = {

components/button-dropdown/button-dropdown-item.tsx

@@ -21,7 +21,8 @@ const defaultProps = {
   className: '',
 }
 
-export type ButtonDropdownItemProps = Props & typeof defaultProps & React.ButtonHTMLAttributes<any>
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
+export type ButtonDropdownItemProps = Props & typeof defaultProps & NativeAttrs
 
 const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = React.memo(({
   children, onClick, className, main, type: selfType, ...props

components/button-dropdown/button-dropdown.tsx

@@ -27,7 +27,8 @@ const defaultProps = {
   className: '',
 }
 
-export type ButtonDropdownProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type ButtonDropdownProps = Props & typeof defaultProps & NativeAttrs
 
 const stopPropagation = (event: MouseEvent<HTMLElement>) => {
   event.stopPropagation()

components/button/button.tsx

@@ -31,7 +31,8 @@ const defaultProps = {
   className: '',
 }
 
-export type ButtonProps = React.ButtonHTMLAttributes<any> & Props & typeof defaultProps
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
+export type ButtonProps = Props & typeof defaultProps & NativeAttrs
 
 const Button: React.FC<React.PropsWithChildren<ButtonProps>> = React.memo(({
   children, disabled, type, loading, shadow, ghost, effect, onClick,

components/capacity/capacity.tsx

@@ -18,7 +18,8 @@ const defaultProps = {
   className: '',
 }
 
-export type CapacityProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type CapacityProps = Props & typeof defaultProps & NativeAttrs
 
 const getColor = (val: number, palette: ZeitUIThemesPalette): string => {
   if (val < 33) return palette.cyan

components/card/card.tsx

@@ -14,7 +14,8 @@ const defaultProps = {
   className: '',
 }
 
-export type CardProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type CardProps = Props & typeof defaultProps & NativeAttrs
 
 const Card: React.FC<React.PropsWithChildren<CardProps>> = React.memo(({
   children, hoverable, className, shadow, ...props

components/checkbox/checkbox-group.tsx

@@ -15,7 +15,8 @@ const defaultProps = {
   className: '',
 }
 
-export type CheckboxGroupProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type CheckboxGroupProps = Props & typeof defaultProps & NativeAttrs
 
 const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = React.memo(({
   disabled, onChange, value, children, className, ...props

components/checkbox/checkbox.tsx

@@ -32,7 +32,8 @@ const defaultProps = {
   value: '',
 }
 
-export type CheckboxProps = Props & typeof defaultProps & React.LabelHTMLAttributes<any>
+type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>
+export type CheckboxProps = Props & typeof defaultProps & NativeAttrs
 
 const Checkbox: React.FC<CheckboxProps> = React.memo(({
   checked, defaultChecked, disabled, onChange, className, children, value, ...props

components/code/code.tsx

@@ -17,7 +17,8 @@ const defaultProps = {
   className: '',
 }
 
-export type CodeProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type CodeProps = Props & typeof defaultProps & NativeAttrs
 
 const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
   children, block, bash, darkBash, className, width, ...props

components/col/col.tsx

@@ -15,7 +15,8 @@ const defaultProps = {
   className: '',
 }
 
-export type ColProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type ColProps = Props & typeof defaultProps & NativeAttrs
 
 const Col: React.FC<React.PropsWithChildren<ColProps>> = React.memo(({
   component, children, span, offset, className, ...props

components/collapse/collapse-group.tsx

@@ -16,7 +16,8 @@ const defaultProps = {
   className: '',
 }
 
-export type CollapseGroupProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type CollapseGroupProps = Props & typeof defaultProps & NativeAttrs
 
 const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
   children, accordion, className, ...props

components/collapse/collapse.tsx

@@ -21,7 +21,8 @@ const defaultProps = {
   initialVisible: false,
 }
 
-export type CollapseProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type CollapseProps = Props & typeof defaultProps & NativeAttrs
 
 const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   children, title, subtitle, initialVisible, shadow, className,

components/description/description.tsx

@@ -14,7 +14,8 @@ const defaultProps = {
   className: '',
 }
 
-export type DescriptionProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type DescriptionProps = Props & typeof defaultProps & NativeAttrs
 
 const Description: React.FC<DescriptionProps> = React.memo(({
   title, content, className, ...props

components/display/display.tsx

@@ -15,7 +15,8 @@ const defaultProps = {
   className: '',
 }
 
-export type DisplayProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type DisplayProps = Props & typeof defaultProps & NativeAttrs
 
 const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
   children, caption, shadow, className, width, ...props

components/dot/dot.tsx

@@ -14,7 +14,8 @@ const defaultProps = {
   className: '',
 }
 
-export type DotProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type DotProps = Props & typeof defaultProps & NativeAttrs
 
 const getColor = (type: NormalTypes, theme: ZeitUIThemes): string => {
   const colors: { [key in NormalTypes]?: string } = {

components/fieldset/fieldset-footer-actions.tsx

@@ -9,7 +9,8 @@ const defaultProps = {
   className: ''
 }
 
-export type FieldsetFooterActionsProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type FieldsetFooterActionsProps = Props & typeof defaultProps & NativeAttrs
 
 const FieldsetFooterActions: React.FC<FieldsetFooterActionsProps> = React.memo(({
   className, children, ...props

components/fieldset/fieldset-footer-status.tsx

@@ -9,7 +9,8 @@ const defaultProps = {
   className: ''
 }
 
-export type FieldsetFooterStatusProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type FieldsetFooterStatusProps = Props & typeof defaultProps & NativeAttrs
 
 const FieldsetFooterStatus: React.FC<FieldsetFooterStatusProps> = React.memo(({
   className, children, ...props

components/fieldset/fieldset-footer.tsx

@@ -11,7 +11,8 @@ const defaultProps = {
   className: '',
 }
 
-export type FieldsetFooterProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type FieldsetFooterProps = Props & typeof defaultProps & NativeAttrs
 
 const FieldsetFooter: React.FC<React.PropsWithChildren<FieldsetFooterProps>> = React.memo(({
   className, children, ...props

components/fieldset/fieldset-group.tsx

@@ -15,7 +15,8 @@ const defaultProps = {
   className: '',
 }
 
-export type FieldsetGroupProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type FieldsetGroupProps = Props & typeof defaultProps & NativeAttrs
 
 const FieldsetGroup: React.FC<React.PropsWithChildren<FieldsetGroupProps>> = React.memo(({
   className, children, value, onChange, ...props

components/fieldset/fieldset-subtitle.tsx

@@ -10,7 +10,8 @@ const defaultProps = {
   className: ''
 }
 
-export type FieldsetSubtitleProps = Props & typeof defaultProps & React.HTMLAttributes<HTMLHeadingElement>
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
+export type FieldsetSubtitleProps = Props & typeof defaultProps & NativeAttrs
 
 const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = React.memo(({
   className, children, ...props

components/fieldset/fieldset-title.tsx

@@ -9,7 +9,8 @@ const defaultProps = {
   className: ''
 }
 
-export type FieldsetTitleProps = Props & typeof defaultProps & React.HTMLAttributes<HTMLHeadingElement>
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
+export type FieldsetTitleProps = Props & typeof defaultProps & NativeAttrs
 
 const FieldsetTitle: React.FC<FieldsetTitleProps> = React.memo(({
   className, children, ...props

components/fieldset/fieldset.tsx

@@ -25,7 +25,8 @@ const defaultProps = {
   className: '',
 }
 
-export type FieldsetProps = Props & typeof defaultProps & React.FieldsetHTMLAttributes<any>
+type NativeAttrs = Omit<React.FieldsetHTMLAttributes<any>, keyof Props>
+export type FieldsetProps = Props & typeof defaultProps & NativeAttrs
 
 const Fieldset: React.FC<React.PropsWithChildren<FieldsetProps>> = React.memo(({
   className, title, subtitle, children, value, label, ...props

components/file-tree/tree-file.tsx

@@ -20,7 +20,8 @@ const defaultProps = {
   parentPath: '',
 }
 
-export type TreeFileProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TreeFileProps = Props & typeof defaultProps & NativeAttrs
 
 const TreeFile: React.FC<React.PropsWithChildren<TreeFileProps>> = ({
   name, parentPath, level, extra, className, ...props

components/file-tree/tree-folder.tsx

@@ -24,7 +24,8 @@ const defaultProps = {
   parentPath: '',
 }
 
-export type TreeFolderProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TreeFolderProps = Props & typeof defaultProps & NativeAttrs
 
 const TreeFolder: React.FC<React.PropsWithChildren<TreeFolderProps>> = ({
   name, children, parentPath, level: parentLevel, extra, className, ...props

components/file-tree/tree.tsx

@@ -31,7 +31,8 @@ const defaultProps = {
   className: '',
 }
 
-export type TreeProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TreeProps = Props & typeof defaultProps & NativeAttrs
 
 const makeChildren = (value: Array<FileTreeValue> = []) => {
   if (!value || !value.length) return null

components/image/image.tsx

@@ -18,7 +18,8 @@ const defaultProps = {
   scale: '100%',
 }
 
-export type ImageProps = Props & typeof defaultProps & React.ImgHTMLAttributes<any>
+type NativeAttrs = Omit<React.ImgHTMLAttributes<any>, keyof Props>
+export type ImageProps = Props & typeof defaultProps & NativeAttrs
 
 const Image: React.FC<ImageProps> = React.memo(({
   src, width, height, animation, className, scale, ...props

components/input/input.tsx

@@ -42,7 +42,8 @@ const defaultProps = {
   initialValue: '',
 }
 
-export type InputProps = Props & typeof defaultProps & React.InputHTMLAttributes<any>
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
+export type InputProps = Props & typeof defaultProps & NativeAttrs
 
 const Input: React.FC<InputProps> = ({
   placeholder, label, labelRight, size, status, disabled,

components/keyboard/keyboard.tsx

@@ -21,7 +21,8 @@ const defaultProps = {
   className: '',
 }
 
-export type KeyboardProps = Props & typeof defaultProps & React.KeygenHTMLAttributes<any>
+type NativeAttrs = Omit<React.KeygenHTMLAttributes<any>, keyof Props>
+export type KeyboardProps = Props & typeof defaultProps & NativeAttrs
 
 type CustomLayout = {
   padding: number | string

components/link/link.tsx

@@ -21,7 +21,8 @@ const defaultProps = {
   className: '',
 }
 
-export type LinkProps = Props & typeof defaultProps & React.AnchorHTMLAttributes<any>
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
+export type LinkProps = Props & typeof defaultProps & NativeAttrs
 
 const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
   href, color, underline, pure, children, className, block, ...props

components/loading/loading.tsx

@@ -17,7 +17,8 @@ const defaultProps = {
   type: 'default' as NormalTypes,
 }
 
-export type LoadingProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type LoadingProps = Props & typeof defaultProps & NativeAttrs
 
 const getIconSize = (size: NormalSizes) => {
   const sizes: { [key in NormalSizes]: string } = {

components/modal/modal-action.tsx

@@ -21,7 +21,8 @@ const defaultProps = {
   onClick: (event: ModalActionEvent) => event.close && event.close(),
 }
 
-export type ModalActionProps = Props & typeof defaultProps & React.ButtonHTMLAttributes<any>
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
+export type ModalActionProps = Props & typeof defaultProps & NativeAttrs
 
 const ModalAction: React.FC<ModalActionProps> = React.memo(({
   className, children, onClick, passive, disabled, ...props

components/modal/modal-content.tsx

@@ -10,7 +10,8 @@ const defaultProps = {
   className: ''
 }
 
-export type ModalContentProps = Props & typeof defaultProps & React.HTMLAttributes<HTMLElement>
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>
+export type ModalContentProps = Props & typeof defaultProps & NativeAttrs
 
 const ModalContent: React.FC<ModalContentProps> = React.memo(({
   className, children, ...props

components/modal/modal-subtitle.tsx

@@ -10,7 +10,8 @@ const defaultProps = {
   className: ''
 }
 
-export type ModalSubtitleProps = Props & typeof defaultProps & React.HTMLAttributes<HTMLHeadingElement>
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
+export type ModalSubtitleProps = Props & typeof defaultProps & NativeAttrs
 
 const ModalSubtitle: React.FC<ModalSubtitleProps> = React.memo(({
   className, children, ...props

components/modal/modal-title.tsx

@@ -10,7 +10,8 @@ const defaultProps = {
   className: ''
 }
 
-export type ModalTitleProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type ModalTitleProps = Props & typeof defaultProps & NativeAttrs
 
 const ModalTitle: React.FC<ModalTitleProps> = React.memo(({
   className, children, ...props

components/modal/modal.tsx

@@ -26,7 +26,8 @@ const defaultProps = {
   open: false,
 }
 
-export type ModalProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type ModalProps = Props & typeof defaultProps & NativeAttrs
 
 const Modal: React.FC<React.PropsWithChildren<ModalProps>> = React.memo(({
   children, disableBackdropClick, onClose, onOpen, open

components/note/note.tsx

@@ -20,7 +20,8 @@ const defaultProps = {
   className: '',
 }
 
-export type NoteProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type NoteProps = Props & typeof defaultProps & NativeAttrs
 
 const getStatusColor = (type: NormalTypes, filled: boolean, theme: ZeitUIThemes) => {
   const colors: { [key in NormalTypes]?: string } = {

components/progress/progress.tsx

@@ -28,7 +28,8 @@ const defaultProps = {
   className: '',
 }
 
-export type ProgressProps = Props & typeof defaultProps & React.ProgressHTMLAttributes<any>
+type NativeAttrs = Omit<React.ProgressHTMLAttributes<any>, keyof Props>
+export type ProgressProps = Props & typeof defaultProps & NativeAttrs
 
 const getCurrentColor = (
   ratio: number,

components/radio/radio-description.tsx

@@ -10,7 +10,8 @@ const defaultProps = {
   className: '',
 }
 
-export type RadioDescriptionProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type RadioDescriptionProps = Props & typeof defaultProps & NativeAttrs
 
 const RadioDescription: React.FC<React.PropsWithChildren<RadioDescriptionProps>> = React.memo(({
   className, children, ...props

components/radio/radio-group.tsx

@@ -18,7 +18,8 @@ const defaultProps = {
   useRow: false,
 }
 
-export type RadioGroupProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type RadioGroupProps = Props & typeof defaultProps & NativeAttrs
 
 const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = React.memo(({
   disabled, onChange, value, children, className, initialValue, useRow, ...props

components/radio/radio.tsx

@@ -31,7 +31,8 @@ const defaultProps = {
   className: '',
 }
 
-export type RadioProps = Props & typeof defaultProps & React.InputHTMLAttributes<any>
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
+export type RadioProps = Props & typeof defaultProps & NativeAttrs
 
 const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({
   className, id: customId, checked, onChange, disabled,

components/row/row.tsx

@@ -21,7 +21,8 @@ const defaultProps = {
   className: '',
 }
 
-export type RowProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type RowProps = Props & typeof defaultProps & NativeAttrs
 
 const getFlexAlignment = (justify: Justify, align: Align) => {
   const flexJustifyMap: { [key in Justify]?: string } = {

components/select/select-option.tsx

@@ -17,7 +17,8 @@ const defaultProps = {
   preventAllEvents: false,
 }
 
-export type SelectOptionProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type SelectOptionProps = Props & typeof defaultProps & NativeAttrs
 
 const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
   value: identValue, className, children, disabled, preventAllEvents, ...props

components/select/select.tsx

@@ -28,7 +28,8 @@ const defaultProps = {
   className: '',
 }
 
-export type SelectProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type SelectProps = Props & typeof defaultProps & NativeAttrs
 
 const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   children, size, disabled, initialValue: init, placeholder,

components/spacer/spacer.tsx

@@ -16,7 +16,8 @@ const defaultProps = {
   className: ''
 }
 
-export type SpacerProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type SpacerProps = Props & typeof defaultProps & NativeAttrs
 
 const getMargin = (num: number): string => {
   if (num < 0) {

components/spinner/spinner.tsx

@@ -14,7 +14,8 @@ const defaultProps = {
   className: '',
 }
 
-export type SpinnerProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type SpinnerProps = Props & typeof defaultProps & NativeAttrs
 
 const getSpans = (theme: ZeitUIThemes) => {
   return [...new Array(12)].map((_, index) => (

components/tabs/tabs.tsx

@@ -16,7 +16,8 @@ const defaultProps = {
   className: '',
 }
 
-export type TabsProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TabsProps = Props & typeof defaultProps & NativeAttrs
 
 const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
   initialValue: userCustomInitialValue, value, children, onChange,

components/tag/tag.tsx

@@ -14,7 +14,8 @@ const defaultProps = {
   className: '',
 }
 
-export type TagProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TagProps = Props & typeof defaultProps & NativeAttrs
 
 const getColor = (type: NormalTypes, theme: ZeitUIThemes): string => {
   const colors: { [key in NormalTypes]?: string } = {

components/text/child.tsx

@@ -41,7 +41,8 @@ const getTypeColor = (type: NormalTypes, palette: ZeitUIThemesPalette) => {
   return colors[type] || colors.default
 }
 
-export type TextChildProps = Props & typeof defaultProps & React.DetailsHTMLAttributes<any>
+type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>
+export type TextChildProps = Props & typeof defaultProps & NativeAttrs
 
 const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(({
   children, tag, className, type, ...props

components/text/text.tsx

@@ -41,7 +41,8 @@ const defaultProps = {
 
 type ElementMap = { [key in (keyof JSX.IntrinsicElements)]?: boolean }
 
-export type TextProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type TextProps = Props & typeof defaultProps & NativeAttrs
 
 const getModifierChild = (tags: Array<keyof JSX.IntrinsicElements>, children: ReactNode) => {
   if (!tags.length) return children

components/textarea/textarea.tsx

@@ -29,7 +29,8 @@ const defaultProps = {
   className: '',
 }
 
-export type TextareaProps = Props & typeof defaultProps & React.TextareaHTMLAttributes<any>
+type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>
+export type TextareaProps = Props & typeof defaultProps & NativeAttrs
 
 const Textarea: React.FC<React.PropsWithChildren<TextareaProps>> = ({
   width, status, minHeight, disabled, readOnly, onFocus, onBlur,