docs: fix typecheck

Author: segunadebayo

website/components/framework-select.tsx

@@ -23,7 +23,7 @@ export function FrameworkSelect() {
         fontWeight="semibold"
         color="text-primary-bold"
         defaultValue={framework}
-        onChange={(event) => {
+        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
           const newFramework = event.currentTarget.value as Framework
           setFramework?.(newFramework)
           if (asPath.includes(framework) && newFramework !== framework) {

website/components/machines/toast.tsx

@@ -47,7 +47,7 @@ export function ToastGroup(props: { controls: any }) {
   })
 
   const api = toast.group.connect(service, normalizeProps)
-  const id = useRef<string>()
+  const id = useRef<string | undefined>(undefined)
 
   return (
     <>

website/components/machines/tree-view.tsx

@@ -1,7 +1,7 @@
 import { normalizeProps, useMachine } from "@zag-js/react"
 import * as tree from "@zag-js/tree-view"
 import { LuFile, LuFolder, LuChevronRight } from "react-icons/lu"
-import { useId } from "react"
+import { JSX, useId } from "react"
 
 interface Node {
   id: string

website/components/playground.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, HStack, Stack } from "@chakra-ui/layout"
 import { chakra } from "@chakra-ui/system"
 import { openInStackblitz } from "lib/open-in-stackblitz"
-import { useState } from "react"
+import { JSX, useState } from "react"
 import { SiStackblitz } from "react-icons/si"
 
 const Header = (props: any) => (
@@ -164,7 +164,7 @@ export function Playground(props: PlaygroundProps) {
                     type="text"
                     defaultValue={value as any}
                     bg="bg-subtle"
-                    onChange={(e) => {
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       setState({ ...state, [key]: e.target.value })
                     }}
                   />
@@ -184,7 +184,7 @@ export function Playground(props: PlaygroundProps) {
                     px="2"
                     bg="bg-subtle"
                     defaultValue={state[key] as number}
-                    onChange={(e) => {
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       const val = e.currentTarget.valueAsNumber
                       setState((s) => ({ ...s, [key]: isNaN(val) ? 0 : val }))
                     }}
@@ -205,7 +205,7 @@ export function Playground(props: PlaygroundProps) {
                   px="1"
                   bg="bg-subtle"
                   defaultValue={state[key] as any}
-                  onChange={(e) => {
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                     setState((s) => ({ ...s, [key]: e.target.value }))
                   }}
                 >

website/package.json

@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@internationalized/date": "3.7.0",
-    "@chakra-ui/cli": "2.4.1",
+    "@chakra-ui/cli": "3.11.0",
     "@chakra-ui/icon": "3.2.0",
     "@chakra-ui/layout": "2.3.1",
     "@chakra-ui/provider": "2.4.2",
     "@chakra-ui/system": "2.6.2",
-    "@chakra-ui/theme": "3.3.1",
+    "@chakra-ui/theme": "3.4.6",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@stackblitz/sdk": "^1.11.0",