docs: fix typos (#7340)

packages/components/checkbox/package.json

@@ -13,7 +13,7 @@
     "use-checkbox",
     "checkboxGroup",
     "checkbox-group-hook",
-    "use-checbox-group"
+    "use-checkbox-group"
   ],
   "sideEffects": false,
   "author": "Segun Adebayo <sage@adebayosegun.com>",

packages/components/checkbox/tests/checkbox.test.tsx

@@ -480,7 +480,7 @@ test("Uncontrolled FormControl - calls all onFocus EventHandler", () => {
 
   const { container } = render(
     <FormControl mt={4} onFocus={formControlOnFocusMock}>
-      <FormLabel>onFocus xample</FormLabel>
+      <FormLabel>onFocus example</FormLabel>
       <CheckboxGroup>
         <Checkbox value="1" onFocus={checkboxOnFocusMock}>
           onFocus Opt-in 1
@@ -517,7 +517,7 @@ test("Uncontrolled FormControl - calls all onBlur EventHandler", () => {
   expect(checkboxOnBlurMock).toHaveBeenCalled()
 })
 
-test("On reseting form, checkbox should reset to its default state i.e., checked", () => {
+test("On resetting form, checkbox should reset to its default state i.e., checked", () => {
   const { getByRole } = render(
     <form>
       <label htmlFor="myCheckbox">My Checkbox</label>
@@ -532,7 +532,7 @@ test("On reseting form, checkbox should reset to its default state i.e., checked
   expect(checkbox).toBeChecked()
 })
 
-test("On reseting form, checkbox should reset to its default state i.e., unchecked", () => {
+test("On resetting form, checkbox should reset to its default state i.e., unchecked", () => {
   const { getByRole } = render(
     <form>
       <label htmlFor="myCheckbox">My Checkbox</label>

packages/components/live-region/package.json

@@ -6,7 +6,7 @@
     "aria",
     "screenreader",
     "feedback",
-    "accessbility",
+    "accessibility",
     "a11y",
     "react",
     "chakra ui"

packages/components/menu/docs.json

@@ -35,7 +35,7 @@
     "direction": {
       "type": "\"ltr\" | \"rtl\"",
       "required": false,
-      "description": "If `rtl`, poper placement positions will be flipped i.e. 'top-right' will\nbecome 'top-left' and vice-verse"
+      "description": "If `rtl`, proper placement positions will be flipped i.e. 'top-right' will\nbecome 'top-left' and vice-verse"
     },
     "eventListeners": {
       "type": "type ONLY_FOR_FORMAT =\n  | boolean\n  | { scroll?: boolean | undefined; resize?: boolean | undefined }",
@@ -301,7 +301,7 @@
     "direction": {
       "type": "\"ltr\" | \"rtl\"",
       "required": false,
-      "description": "If `rtl`, poper placement positions will be flipped i.e. 'top-right' will\nbecome 'top-left' and vice-verse"
+      "description": "If `rtl`, proper placement positions will be flipped i.e. 'top-right' will\nbecome 'top-left' and vice-verse"
     },
     "eventListeners": {
       "type": "type ONLY_FOR_FORMAT =\n  | boolean\n  | { scroll?: boolean | undefined; resize?: boolean | undefined }",

packages/components/menu/src/use-menu.ts

@@ -103,7 +103,7 @@ export interface UseMenuProps
    */
   lazyBehavior?: LazyMode
   /**
-   * If `rtl`, poper placement positions will be flipped i.e. 'top-right' will
+   * If `rtl`, proper placement positions will be flipped i.e. 'top-right' will
    * become 'top-left' and vice-verse
    */
   direction?: "ltr" | "rtl"

packages/components/menu/stories/menu.stories.tsx

@@ -128,7 +128,7 @@ export const WithDisabledButFocusableItem = () => (
   </Menu>
 )
 
-export const WithTogglableMenuItems = () => {
+export const WithToggleableMenuItems = () => {
   const [items, setItems] = React.useState<
     {
       content: string

packages/components/pin-input/README.md

@@ -1,6 +1,6 @@
 # Pin Input
 
-The PinInupt component is optimized for entering sequences of digits. The most
+The PinInput component is optimized for entering sequences of digits. The most
 common application is for entering single-use security codes. It is optimized
 for entering digits quickly.
 

packages/components/select/tests/select.test.tsx

@@ -43,7 +43,7 @@ test("renders in disabled state if isDisabled is true", () => {
   expect(iconWrapper).toHaveAttribute("data-disabled", "")
 })
 
-test("doesnt renders in disabled state if isDisabled is false", () => {
+test("doesn't render in disabled state if isDisabled is false", () => {
   const { container } = render(
     <Select isDisabled={false} placeholder="Select an option" />,
   )

packages/components/skip-nav/package.json

@@ -9,7 +9,7 @@
     "navigation",
     "a11y",
     "screen reader",
-    "accessbility",
+    "accessibility",
     "react",
     "chakra ui"
   ],

packages/components/theme-tools/src/color.ts

@@ -145,7 +145,7 @@ export const lighten = (color: string, amount: number) => (theme: Dict) => {
 export const contrast = (fg: string, bg: string) => (theme: Dict) =>
   getContrast(getColor(theme, bg), getColor(theme, fg))
 
-interface WCAG2Parms {
+interface WCAG2Params {
   level?: "AA" | "AAA"
   size?: "large" | "small"
 }
@@ -161,13 +161,13 @@ interface WCAG2Parms {
  * @deprecated This will be removed in the next major release.
  */
 export const isAccessible =
-  (textColor: string, bgColor: string, options?: WCAG2Parms) => (theme: Dict) =>
+  (textColor: string, bgColor: string, options?: WCAG2Params) => (theme: Dict) =>
     isReadable(getColor(theme, bgColor), getColor(theme, textColor), options)
 
 export function isReadable(
   color1: string,
   color2: string,
-  wcag2: WCAG2Parms = { level: "AA", size: "small" },
+  wcag2: WCAG2Params = { level: "AA", size: "small" },
 ): boolean {
   const readabilityLevel = readability(color1, color2)
   switch ((wcag2.level ?? "AA") + (wcag2.size ?? "small")) {

packages/legacy/react-utils/package.json

@@ -22,7 +22,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/legaacy/react-utils"
+    "directory": "packages/legacy/react-utils"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"