Update prop to variant

Author: vntguva

README.md

@@ -34,7 +34,7 @@ Check out these demos:
 - [Extra Props](#extra-props)
   - [`size`](#size--options-sm-md-lg--default-md)
   - [`colorScheme`](#colorscheme)
-  - [`appearanceVariant`](#appearanceVariant)
+  - [`variant`](#variant)
   - [`tagVariant`](#tagvariant--options-subtle-solid-outline--default-subtle)
   - [`isInvalid`](#isinvalid--default-false)
   - [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
@@ -142,13 +142,13 @@ return (
 );
 ```
 
-#### `appearanceVariant`
+#### `variant`
 
 You can set `outline`, `unstyled`, `flushed` or `filled`, which will reflect the same styles of Chakra-Ui select possible appearances [Check chakra-ui variants styles](https://chakra-ui.com/docs/components/select#changing-the-appearance)!
 
 ```js
 return (
-  <Select appearanceVariant="flushed" />
+  <Select variant="flushed" />
 );
 ```
 

src/chakra-components/containers.tsx

@@ -72,7 +72,7 @@ export const ValueContainer = <
     isMulti,
     hasValue,
     innerProps,
-    selectProps: { size, chakraStyles, appearanceVariant: variant },
+    selectProps: { size, chakraStyles, variant },
   } = props;
 
   // Getting the css from input instead of select

src/chakra-components/control.tsx

@@ -37,7 +37,7 @@ const Control = <
       chakraStyles,
       focusBorderColor,
       errorBorderColor,
-      appearanceVariant: variant,
+      variant,
     },
   } = props;
 

src/module-augmentation.ts

@@ -2,11 +2,11 @@
 import type { CSSObject } from "@chakra-ui/system";
 import type { GroupBase } from "react-select";
 import type {
-  AppearanceVariant,
   ChakraStylesConfig,
   SelectedOptionStyle,
   Size,
   TagVariant,
+  Variant,
 } from "./types";
 
 /**
@@ -77,14 +77,14 @@ declare module "react-select/dist/declarations/src/Select" {
     colorScheme?: string;
 
     /**
-     * The `appearanceVariant` prop that changes the select main style
+     * The `variant` prop that changes the select main style
      *
      * Options: "outline" | "unstyled" | "flushed" | "filled"
      *
      * @defaultValue `outline`
      * @see {@link https://chakra-ui.com/docs/components/select#changing-the-appearance}
      */
-    appearanceVariant?: AppearanceVariant;
+    variant?: Variant;
 
     /**
      * The `variant` prop that will be forwarded to your `MultiValue` component

src/types.ts

@@ -40,7 +40,7 @@ export interface SizeProps<PropType = string | number> {
 
 export type Size = "sm" | "md" | "lg";
 
-export type AppearanceVariant = "outline" | "unstyled" | "flushed" | "filled";
+export type Variant = "outline" | "unstyled" | "flushed" | "filled";
 
 export type TagVariant = "subtle" | "solid" | "outline";