chore: fix eslint-react type issues

Our prop types are fine, but eslint-react isn't detecting them
correctly.

With a little help

jsx-eslint/eslint-plugin-react#3284 (comment)

we can tell it what the props are.

Author: ojeytonwilliams

src/alert/alert.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 
 type AlertVariant = "success" | "info" | "warning" | "danger";
 
-export type AlertProps = React.ComponentProps<"div"> & {
+export type AlertProps = ComponentProps<"div"> & {
 	variant: AlertVariant;
 };
 

src/drop-down/menu-item/menu-item.tsx

@@ -1,8 +1,8 @@
 import { Menu } from "@headlessui/react";
-import React from "react";
+import React, { type ComponentPropsWithoutRef } from "react";
 import { type ButtonProps, HeadlessButton } from "../../button";
 
-export type MenuItemsProps = React.ComponentPropsWithoutRef<typeof Menu.Items> &
+export type MenuItemsProps = ComponentPropsWithoutRef<typeof Menu.Items> &
 	ButtonProps;
 
 const defaultClass =

src/form-control/form-control-feedback.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 
 export const FormControlFeedback = ({
 	children,
 	className,
 	...props
-}: React.ComponentProps<"span">): JSX.Element => {
+}: ComponentProps<"span">): JSX.Element => {
 	const defaultClasses =
 		"absolute top-[30px] right-0 z-2 block w-8 h-8 leading-8 text-center pointer-events-none text-green-700";
 

src/form-control/form-control-static.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 
 export const FormControlStatic = ({
 	className,
 	children,
 	...props
-}: React.ComponentProps<"p">): JSX.Element => {
+}: ComponentProps<"p">): JSX.Element => {
 	const defaultClasses = "py-1.5 mb-0 min-h-43-px text-foreground-secondary";
 
 	const classes = [defaultClasses, className].join(" ");

src/form-control/form-control.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { FormControl } from ".";
 
@@ -49,7 +49,7 @@ export const Static: StoryObj<typeof FormControl.Static> = {
 	},
 };
 
-const FeedBackTemplate: StoryFn<React.ComponentProps<"span">> = (args) => {
+const FeedBackTemplate: StoryFn<ComponentProps<"span">> = (args) => {
 	return <FormControl.Feedback {...args} />;
 };
 

src/form-control/types.ts

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { type ComponentProps } from "react";
 
 export type FormControlProps<
 	TElement extends
 		| keyof JSX.IntrinsicElements
 		| React.JSXElementConstructor<unknown> = "input",
 > = {
 	componentClass?: TElement | string;
-} & React.ComponentProps<TElement>;
+} & ComponentProps<TElement>;

src/help-block/help-block.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, type ComponentProps } from "react";
 import { FormContext } from "../form-group/form-group";
 
 const defaultClasses = "block mt-1 mb-2";
@@ -10,7 +10,7 @@ const validationLabel = {
 
 export const HelpBlock = React.forwardRef<
 	HTMLSpanElement,
-	React.ComponentProps<"span">
+	ComponentProps<"span">
 >(({ className, children, ...props }, ref): JSX.Element => {
 	const { validationState } = useContext(FormContext);
 

src/modal/modal.stories.tsx

@@ -37,7 +37,7 @@ const DefaultTemplate: StoryFn<StoryProps> = ({
 	showCloseButton,
 	alignment,
 	...modalProps
-}) => {
+}: StoryProps) => {
 	const [open, setOpen] = useState(false);
 
 	const handleClose = () => setOpen(false);

src/panel/panel.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, type ComponentProps } from "react";
 
 import { PanelProps } from "./types";
 
@@ -22,7 +22,7 @@ const Body = ({
 	children,
 	className,
 	...props
-}: React.ComponentProps<"div">): JSX.Element => {
+}: ComponentProps<"div">): JSX.Element => {
 	const classes = [className, "p-3.5"].join(" ");
 	return (
 		<div className={classes} {...props}>
@@ -35,7 +35,7 @@ export const Heading = ({
 	children,
 	className,
 	...props
-}: React.ComponentProps<"div">): JSX.Element => {
+}: ComponentProps<"div">): JSX.Element => {
 	const { variant } = useContext(PanelContext);
 
 	const headingStyles = variant
@@ -53,7 +53,7 @@ export const Heading = ({
 export const Title = ({
 	children,
 	...props
-}: React.ComponentProps<"h3">): JSX.Element => {
+}: ComponentProps<"h3">): JSX.Element => {
 	return (
 		<h3 className="text-inherit mb-0 text-xl" {...props}>
 			{children}

src/tabs/tabs.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ComponentPropsWithoutRef } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
 
 const buttonClassNames =
@@ -10,15 +10,15 @@ const listClassNames =
 
 export const TabsTrigger = React.forwardRef<
 	React.ElementRef<typeof Trigger>,
-	React.ComponentPropsWithoutRef<typeof Trigger>
+	ComponentPropsWithoutRef<typeof Trigger>
 >(({ className, ...props }, ref) => {
 	const triggerClasses = [buttonClassNames, className].join(" ");
 	return <Trigger ref={ref} className={triggerClasses} {...props} />;
 });
 
 export const TabsList = React.forwardRef<
 	React.ElementRef<typeof List>,
-	React.ComponentPropsWithoutRef<typeof List>
+	ComponentPropsWithoutRef<typeof List>
 >(({ className, ...props }, ref) => {
 	const listClasses = [listClassNames, className].join(" ");
 	return <List ref={ref} className={listClasses} {...props} />;