build: Update TypeScript to 5.9

package.json

@@ -82,7 +82,7 @@
         "@babel/register": "^7.0.0",
         "@doist/eslint-config": "12.0.0",
         "@doist/prettier-config": "4.0.0",
-        "@doist/tsconfig": "^1.0.0",
+        "@doist/tsconfig": "2.0.0",
         "@geometricpanda/storybook-addon-badges": "^0.2.2",
         "@rollup/plugin-commonjs": "28.0.9",
         "@rollup/plugin-node-resolve": "16.0.3",
@@ -97,7 +97,7 @@
         "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addons": "^6.5.3",
         "@storybook/jest": "^0.0.10",
-        "@storybook/react": "^6.5.3",
+        "@storybook/react": "6.5.17-alpha.0",
         "@storybook/testing-library": "^0.0.13",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
@@ -127,6 +127,7 @@
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-prettier": "5.5.4",
         "eslint-plugin-react": "7.37.5",
+        "fork-ts-checker-webpack-plugin": "6.5.3",
         "husky": "^4.3.0",
         "jest": "^28.1.0",
         "jest-axe": "^5.0.1",
@@ -156,7 +157,7 @@
         "svg-url-loader": "^6.0.0",
         "ts-loader": "^8.0.2",
         "tslib": "^2.0.0",
-        "typescript": "^4.8.3",
+        "typescript": "5.9.3",
         "webpack": "^4.43.0"
     },
     "dependencies": {
@@ -168,5 +169,8 @@
         "react-keyed-flatten-children": "^1.3.0",
         "react-markdown": "^5.0.3",
         "use-callback-ref": "^1.3.0"
+    },
+    "overrides": {
+        "fork-ts-checker-webpack-plugin": "$fork-ts-checker-webpack-plugin"
     }
 }

src/avatar/avatar.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react'
 
 import { Box } from '../box'
-import { getClassNames, ResponsiveProp } from '../utils/responsive-props'
+import { getClassNames } from '../utils/responsive-props'
 
 import { emailToIndex, getInitials } from './utils'
 
 import styles from './avatar.module.css'
 
 import type { ObfuscatedClassName } from '../utils/common-types'
+import type { ResponsiveProp } from '../utils/responsive-props'
 
 const AVATAR_COLORS = [
     '#fcc652',

src/banner/banner.test.tsx

@@ -4,7 +4,9 @@ import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
-import { Banner, SystemBannerType } from './banner'
+import { Banner } from './banner'
+
+import type { SystemBannerType } from './banner'
 
 describe('Banner', () => {
     it('renders as a <div /> element', () => {

src/banner/banner.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react'
 
 import { Box } from '../box'
-import { Button, ButtonProps, IconButton } from '../button'
+import { Button, IconButton } from '../button'
 import { BannerIcon } from '../icons/banner-icon'
 import { CloseIcon } from '../icons/close-icon'
 import { TextLink } from '../text-link'
 import { useId } from '../utils/common-helpers'
 
 import styles from './banner.module.css'
 
+import type { ButtonProps } from '../button'
+
 /**
  * Represents the type of a banner.
  * 'neutral' accepts a custom icon, the rest do not.

src/base-field/base-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { Box, BoxProps } from '../box'
+import { Box } from '../box'
 import { Column, Columns } from '../columns'
 import { Spinner } from '../spinner'
 import { Stack } from '../stack'
@@ -9,6 +9,7 @@ import { useId } from '../utils/common-helpers'
 
 import styles from './base-field.module.css'
 
+import type { BoxProps } from '../box'
 import type { WithEnhancedClassName } from '../utils/common-types'
 
 // Define the remaining characters before the character count turns red

src/box/box.stories.tsx

@@ -5,7 +5,6 @@ import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
 import {
-    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
     reusableBoxProps,
@@ -15,9 +14,10 @@ import {
     Wrapper,
 } from '../utils/storybook-helper'
 
-import { Box, BoxBorderRadius } from './box'
+import { Box } from './box'
 
 import type { Space, SpaceWithNegatives } from '../utils/common-types'
+import type { PartialProps } from '../utils/storybook-helper'
 import type {
     BoxAlignItems,
     BoxBackground,
@@ -29,6 +29,7 @@ import type {
     BoxPaddingProps,
     BoxTextAlign,
 } from './'
+import type { BoxBorderRadius } from './box'
 
 export default {
     title: 'Design system/Box',

src/box/box.test.tsx

@@ -3,7 +3,9 @@ import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 
-import { Box, BoxProps } from './'
+import { Box } from './'
+
+import type { BoxProps } from './'
 
 describe('Box', () => {
     it('renders its children as its content', () => {

src/button/button.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react'
 
-import { Role, RoleProps } from '@ariakit/react'
+import { Role } from '@ariakit/react'
 import classNames from 'classnames'
 
 import { Box, getBoxClassNames } from '../box'
 import { Spinner } from '../spinner'
-import { Tooltip, TooltipProps } from '../tooltip'
+import { Tooltip } from '../tooltip'
 
 import styles from './button.module.css'
 
+import type { RoleProps } from '@ariakit/react'
+import type { TooltipProps } from '../tooltip'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 function preventDefault(event: React.SyntheticEvent) {

src/columns/columns.stories.tsx

@@ -4,7 +4,6 @@ import { Box } from '../box'
 import { Stack } from '../stack'
 import {
     disableResponsiveProps,
-    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
     reusableBoxProps,
@@ -16,6 +15,7 @@ import {
 
 import { Column, Columns } from './columns'
 
+import type { PartialProps } from '../utils/storybook-helper'
 import type {
     ColumnsCollapseBelow,
     ColumnsHorizontalAlignment,

src/columns/columns.test.tsx

@@ -5,7 +5,9 @@ import { axe } from 'jest-axe'
 
 import { runSpaceTests } from '../utils/test-helpers'
 
-import { Column, Columns, ColumnWidth } from './'
+import { Column, Columns } from './'
+
+import type { ColumnWidth } from './'
 
 const columnWidths: Array<ColumnWidth> = [
     '1/2',

src/components/time/time-utils.ts

@@ -87,4 +87,5 @@ const TimeUtils = {
     },
 }
 
-export { TimeConfig, TimeUtils }
+export type { TimeConfig }
+export { TimeUtils }

src/components/time/time.tsx

@@ -4,7 +4,9 @@ import * as React from 'react'
 
 import { Tooltip } from '../../tooltip'
 
-import { TimeConfig, TimeUtils } from './time-utils'
+import { TimeUtils } from './time-utils'
+
+import type { TimeConfig } from './time-utils'
 
 const DELAY = 60000
 

src/inline/inline.stories.tsx

@@ -4,7 +4,6 @@ import { Heading } from '../heading'
 import { Stack } from '../stack'
 import {
     disableResponsiveProps,
-    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
     reusableBoxProps,
@@ -13,7 +12,10 @@ import {
     Wrapper,
 } from '../utils/storybook-helper'
 
-import { Inline, InlineAlign } from './inline'
+import { Inline } from './inline'
+
+import type { PartialProps } from '../utils/storybook-helper'
+import type { InlineAlign } from './inline'
 
 export default {
     title: 'Design system/Inline',

src/menu/menu.tsx

@@ -5,20 +5,22 @@ import * as React from 'react'
 import {
     Menu as AriakitMenu,
     MenuButton as AriakitMenuButton,
-    MenuButtonProps as AriakitMenuButtonProps,
     MenuGroup as AriakitMenuGroup,
     MenuItem as AriakitMenuItem,
-    MenuItemProps as AriakitMenuItemProps,
-    MenuProps as AriakitMenuProps,
-    MenuStore,
-    MenuStoreProps,
     Portal,
     Role,
-    RoleProps,
     useMenuStore,
 } from '@ariakit/react'
 import classNames from 'classnames'
 
+import type {
+    MenuButtonProps as AriakitMenuButtonProps,
+    MenuItemProps as AriakitMenuItemProps,
+    MenuProps as AriakitMenuProps,
+    MenuStore,
+    MenuStoreProps,
+    RoleProps,
+} from '@ariakit/react'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 type MenuContextState = {

src/modal/modal.tsx

@@ -2,19 +2,21 @@ import * as React from 'react'
 import { forwardRef } from 'react'
 import FocusLock from 'react-focus-lock'
 
-import { Dialog, DialogOptions, Portal, PortalOptions, useDialogStore } from '@ariakit/react'
+import { Dialog, Portal, useDialogStore } from '@ariakit/react'
 import { hideOthers } from 'aria-hidden'
 import classNames from 'classnames'
 
 import { Box } from '../box'
-import { IconButton, IconButtonProps } from '../button'
+import { IconButton } from '../button'
 import { Column, Columns } from '../columns'
 import { Divider } from '../divider'
 import { CloseIcon } from '../icons/close-icon'
 import { Inline } from '../inline'
 
 import styles from './modal.module.css'
 
+import type { DialogOptions, PortalOptions } from '@ariakit/react'
+import type { IconButtonProps } from '../button'
 import type { DividerProps } from '../divider'
 import type { ObfuscatedClassName } from '../utils/common-types'
 

src/password-field/password-field.tsx

@@ -3,9 +3,10 @@ import * as React from 'react'
 import { IconButton } from '../button'
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon'
 import { PasswordVisibleIcon } from '../icons/password-visible-icon'
-import { TextField, TextFieldProps } from '../text-field'
+import { TextField } from '../text-field'
 
 import type { BaseFieldVariantProps } from '../base-field'
+import type { TextFieldProps } from '../text-field'
 
 interface PasswordFieldProps
     extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,

src/prose/prose.stories.tsx

@@ -2,9 +2,11 @@ import * as React from 'react'
 
 import { Box } from '../box'
 
-import { Prose, ProseProps } from './prose'
+import { Prose } from './prose'
 import { proseExample } from './prose-example'
 
+import type { ProseProps } from './prose'
+
 export default {
     title: 'Design system/Prose',
     component: Prose,

src/select-field/select-field.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
 
-import { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'
+import { BaseField } from '../base-field'
 import { Box } from '../box'
 
 import styles from './select-field.module.css'
 
+import type { BaseFieldVariantProps, FieldComponentProps } from '../base-field'
+
 interface SelectFieldProps
     extends Omit<
             FieldComponentProps<HTMLSelectElement>,

src/stack/stack.stories.tsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 import { Heading } from '../heading'
 import {
     disableResponsiveProps,
-    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
     reusableBoxProps,
@@ -17,6 +16,7 @@ import {
 import { Stack } from './stack'
 
 import type { DividerWeight } from '../divider'
+import type { PartialProps } from '../utils/storybook-helper'
 
 export default {
     title: 'Design system/Stack',

src/switch-field/switch-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { FieldComponentProps, FieldMessage } from '../base-field'
+import { FieldMessage } from '../base-field'
 import { Box } from '../box'
 import { HiddenVisually } from '../hidden-visually'
 import { Stack } from '../stack'
@@ -9,6 +9,8 @@ import { useId } from '../utils/common-helpers'
 
 import styles from './switch-field.module.css'
 
+import type { FieldComponentProps } from '../base-field'
+
 interface SwitchFieldProps
     extends Omit<
         FieldComponentProps<HTMLInputElement>,

src/tabs/tabs.tsx

@@ -4,18 +4,21 @@ import {
     Tab as BaseTab,
     TabList as BaseTabList,
     TabPanel as BaseTabPanel,
-    TabPanelProps as BaseTabPanelProps,
-    TabProps as BaseTabProps,
-    TabStore,
     useTabStore,
 } from '@ariakit/react'
 import classNames from 'classnames'
 
-import { Box, BoxJustifyContent } from '../box'
+import { Box } from '../box'
 import { Inline } from '../inline'
 
 import styles from './tabs.module.css'
 
+import type {
+    TabPanelProps as BaseTabPanelProps,
+    TabProps as BaseTabProps,
+    TabStore,
+} from '@ariakit/react'
+import type { BoxJustifyContent } from '../box'
 import type { ObfuscatedClassName, Space } from '../utils/common-types'
 
 type TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {

src/text-area/text-area.tsx

@@ -3,11 +3,13 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { useMergeRefs } from 'use-callback-ref'
 
-import { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'
+import { BaseField } from '../base-field'
 import { Box } from '../box'
 
 import styles from './text-area.module.css'
 
+import type { BaseFieldVariantProps, FieldComponentProps } from '../base-field'
+
 interface TextAreaProps
     extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,
         Omit<