Add consistent-type-imports eslint rule

Author: csandman

demo/eslint.config.js

@@ -25,6 +25,13 @@ const eslintConfig = tseslint.config(
       ...react.configs.recommended.rules,
       ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          disallowTypeAnnotations: true,
+        },
+      ],
       "react/prop-types": "off",
       "react-refresh/only-export-components": [
         "warn",

demo/src/app.tsx

@@ -10,11 +10,10 @@ import {
   Stack,
   Text,
 } from "@chakra-ui/react";
+import type { GroupBase, LoadingIndicatorProps } from "chakra-react-select";
 import {
   AsyncSelect,
   CreatableSelect,
-  GroupBase,
-  LoadingIndicatorProps,
   Select,
   chakraComponents,
 } from "chakra-react-select";
@@ -36,7 +35,8 @@ import {
   SelectValueText,
 } from "./components/ui/select";
 import animeMovies from "./data/anime-movies";
-import { ColorOption, colorOptions, groupedOptions } from "./data/options";
+import type { ColorOption } from "./data/options";
+import { colorOptions, groupedOptions } from "./data/options";
 
 const mappedColorOptions = colorOptions.map((option) => ({
   ...option,

demo/src/components/advanced-examples/custom-indicator-icons-example.tsx

@@ -1,9 +1,5 @@
-import {
-  GroupBase,
-  Select,
-  SelectComponentsConfig,
-  chakraComponents,
-} from "chakra-react-select";
+import type { GroupBase, SelectComponentsConfig } from "chakra-react-select";
+import { Select, chakraComponents } from "chakra-react-select";
 import { LuArrowDown, LuCircleX } from "react-icons/lu";
 import { groupedOptions } from "../../data/options";
 

demo/src/components/advanced-examples/dynamic-selected-option-color-example.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Select } from "chakra-react-select";
-import { ColorOption, colorOptions } from "../../data/options";
+import type { ColorOption } from "../../data/options";
+import { colorOptions } from "../../data/options";
 
 const DynamicSelectedOptionColorExample = () => {
   const [selectedOptionColorPalette, setSelectedOptionColorPalette] =

demo/src/components/advanced-examples/menu-portal-target-example.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Stack } from "@chakra-ui/react";
-import { Select, Props as SelectProps } from "chakra-react-select";
+import type { Props as SelectProps } from "chakra-react-select";
+import { Select } from "chakra-react-select";
 import { colorOptions } from "../../data/options";
 import { Button } from "../ui/button";
 import {

demo/src/components/advanced-examples/select-popover-example.tsx

@@ -1,13 +1,14 @@
 import { useRef, useState } from "react";
 import { Icon } from "@chakra-ui/react";
-import {
+import type {
   ChakraStylesConfig,
-  Select,
   SelectInstance,
   SingleValue,
 } from "chakra-react-select";
+import { Select } from "chakra-react-select";
 import { LuChevronDown, LuSearch } from "react-icons/lu";
-import { StateOption, stateOptions } from "../../data/options";
+import type { StateOption } from "../../data/options";
+import { stateOptions } from "../../data/options";
 import { Button } from "../ui/button";
 import {
   PopoverBody,

demo/src/data/countries.ts

@@ -1,4 +1,4 @@
-import { GroupBase, OptionBase } from "chakra-react-select";
+import type { GroupBase, OptionBase } from "chakra-react-select";
 
 export interface CountryOption extends OptionBase {
   label: string;

demo/src/data/options.ts

@@ -1,5 +1,5 @@
-import { ColorPalette } from "@chakra-ui/react";
-import { OptionBase } from "chakra-react-select";
+import type { ColorPalette } from "@chakra-ui/react";
+import type { OptionBase } from "chakra-react-select";
 
 export interface ColorOption extends OptionBase {
   label: string;