@basic-ui/core 0.0.38 → 0.0.41

package/src/Menu/Menu.story.tsx

@@ -1,7 +1,8 @@
+import type { MouseEvent } from 'react';
 import { useState } from 'react';
-import type * as React from 'react';
-import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
 import { animated, useSpring } from 'react-spring';
+
+import { Menu, MenuButton, MenuItem, MenuList, MenuPopover } from './';
 import './styles.css';
 
 export default {
@@ -13,7 +14,7 @@ const noop = () => {
 };
 
 const Wrapper = ({ children }) => {
-  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
     console.log('Clicked ' + e.currentTarget.innerText);
     e.preventDefault();
   };
@@ -91,10 +92,10 @@ const MenuControlledWithAnimation = () => {
         <MenuList
           as={animated.ul}
           style={{
-            opacity: (opacity as unknown) as number,
-            transform: (scale.to(
+            opacity: opacity as unknown as number,
+            transform: scale.to(
               (x) => `scale(${x}, ${x * x})`
-            ) as unknown) as string,
+            ) as unknown as string,
           }}
         >
           <MenuItem>Dog</MenuItem>

package/src/Menu/Menu.tsx

@@ -1,17 +1,25 @@
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  PointerEvent,
+  ReactNode,
+  ElementType,
+} from 'react';
 import { forwardRef, useRef, Fragment, useId } from 'react';
-import type * as React from 'react';
-import { MenuProvider, MenuContextProps } from './context';
+
+import type { MenuContextProps } from './context';
+import { MenuProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface MenuProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   onChange?: (
     e:
-      | React.KeyboardEvent<HTMLElement>
-      | React.MouseEvent<HTMLElement>
-      | React.PointerEvent<HTMLElement>,
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
     isOpen: boolean
   ) => void;
   open?: boolean;

package/src/Menu/MenuButton.tsx

@@ -1,15 +1,19 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
 import { forwardRef, useId } from 'react';
-import type * as React from 'react';
+
 import { useMenuContext } from './context';
 import { wrapEvent } from '../utils/wrapEvent';
 
-export type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   onClick?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
   ) => void;
 };
 
@@ -23,18 +27,13 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       disabled,
       ...otherProps
     } = props;
-    const {
-      menuListIdRef,
-      openWithArrowKeyRef,
-      open,
-      buttonRef,
-      onChange,
-    } = useMenuContext();
+    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =
+      useMenuContext();
 
     const buttonIdGenerated = useId();
     const buttonId = preferredId || buttonIdGenerated;
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
       if (disabled) {
         return;
       }
@@ -54,7 +53,7 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
       }
     };
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (disabled) {
         return;
       }

package/src/Menu/MenuItem.tsx

@@ -1,14 +1,21 @@
+import type {
+  LiHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  KeyboardEvent,
+  KeyboardEventHandler,
+} from 'react';
 import { forwardRef, useRef, useId } from 'react';
-import type * as React from 'react';
+
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils';
 
-export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   onSelect?: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
   disabled?: boolean;
 }
@@ -34,16 +41,14 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
 
   const handleSelect = wrapEvent(
     onSelect,
-    (
-      e: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>
-    ) => {
+    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {
       onChange && onChange(e, false);
       buttonRef.current?.focus();
       e.preventDefault();
     }
   );
 
-  const handleClick = (e: React.MouseEvent<HTMLLIElement>) => {
+  const handleClick = (e: MouseEvent<HTMLLIElement>) => {
     if (!disabled) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       onNavigate && onNavigate(ref.current!);
@@ -51,7 +56,7 @@ export const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(
     }
   };
 
-  const handleKeyDown: React.KeyboardEventHandler<HTMLLIElement> = (e) => {
+  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {
     switch (e.key) {
       case 'Enter':
       case ' ':

package/src/Menu/MenuList.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,7 +6,7 @@ import {
   useState,
   useLayoutEffect,
 } from 'react';
-import type * as React from 'react';
+
 import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -16,9 +17,9 @@ import { getCircularIndex, wrapEvent } from '../utils';
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-export interface MenuListProps extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface MenuListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   defaultActiveItemValue?: string;
 }
 
@@ -32,13 +33,8 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       ...otherProps
     } = props;
 
-    const {
-      menuListIdRef,
-      buttonRef,
-      onChange,
-      openWithArrowKeyRef,
-      open,
-    } = useMenuContext();
+    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =
+      useMenuContext();
 
     const [navigationItem, setNavigationItem] = useState<
       HTMLElement | undefined
@@ -105,7 +101,7 @@ export const MenuList = forwardRef<HTMLUListElement, MenuListProps>(
       true
     );
 
-    function handleKeyDown(e: React.KeyboardEvent<HTMLUListElement>) {
+    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {
       switch (e.key) {
         case 'Escape':
         case 'Tab': {

package/src/Menu/MenuPopover.tsx

@@ -1,12 +1,14 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Popper, PopperProps } from '../Popper';
+
+import type { PopperProps } from '../Popper';
+import { Popper } from '../Popper';
 import { useMenuContext } from './context';
 
 export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(

package/src/Menu/context.ts

@@ -1,4 +1,10 @@
-import { createContext, useContext, MutableRefObject } from 'react';
+import type {
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  PointerEvent,
+} from 'react';
+import { createContext, useContext } from 'react';
 
 export type ItemObject = { text: string; value: any; id: string | undefined };
 
@@ -9,9 +15,9 @@ export interface MenuContextProps {
   openWithArrowKeyRef: MutableRefObject<string | null>;
   onChange?: (
     e:
-      | React.KeyboardEvent<HTMLElement>
-      | React.MouseEvent<HTMLElement>
-      | React.PointerEvent<HTMLElement>,
+      | KeyboardEvent<HTMLElement>
+      | MouseEvent<HTMLElement>
+      | PointerEvent<HTMLElement>,
     isOpen: boolean
   ) => void;
   open: boolean;

package/src/Modal/Modal.story.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';

package/src/Modal/Modal.tsx

@@ -1,14 +1,20 @@
-import { ReactNode, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import type {
+  CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
+import { forwardRef, useRef } from 'react';
+
 import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
 import { FocusLock } from '../FocusLock';
 import { assignMultipleRefs } from '../utils';
 
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   children?: ReactNode;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   trapFocus?: boolean;
 }
 

package/src/Modal/ModalBackdrop.tsx

@@ -1,14 +1,20 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  CSSProperties,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
 import { useRef, forwardRef } from 'react';
-import type * as React from 'react';
+
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 
-export interface ModalBackdropProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ModalBackdropProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   onClose?: () => void;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   disableCloseOnClick?: boolean;
   disableEscapeKeyDown?: boolean;
 }
@@ -30,7 +36,7 @@ export const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(
     const ref = useRef();
     const mouseDownTargetRef = useRef<EventTarget | null>(null);
 
-    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleClick = (e: MouseEvent<HTMLDivElement>) => {
       // Ignore the events not coming from the "backdrop"
       // We don't want to close the dialog when clicking the dialog content.
       if (e.target !== e.currentTarget) {
@@ -47,11 +53,11 @@ export const ModalBackdrop = forwardRef<HTMLDivElement, ModalBackdropProps>(
       e.stopPropagation();
     };
 
-    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
       mouseDownTargetRef.current = e.target;
     };
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       if (e.key === 'Escape') {
         !disableEscapeKeyDown && onClose?.();
         e.stopPropagation();

package/src/Modal/NavDrawer.story.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Modal, ModalBackdrop } from './';
 import { Portal } from '../Portal';
 import './styles.css';
@@ -65,9 +66,8 @@ const Wrapper = ({ children }) => {
 
 const SimpleModalControlledAnimated = () => {
   const [open, setOpen] = useState(false);
-  const [pointerEvents, setPointerEvents] = useState<PointerEventsProperty>(
-    'none'
-  );
+  const [pointerEvents, setPointerEvents] =
+    useState<PointerEventsProperty>('none');
   const [{ transformX, opacity }, set] = useSpring(() => ({
     transformX: -120,
     opacity: 0,

package/src/Popper/Popper.story.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect } from 'react';
 import { useSpring, animated } from 'react-spring';
+
 import { Popper } from './Popper';
 import { PopperArrow } from './PopperArrow';
 import './styles.css';
@@ -160,9 +161,7 @@ function Menu() {
   );
 }
 
-const PopperFixedExample = ({ showAll = false, showArrow = false }) => {
-  const ref = useRef<any>(null);
-
+const PopperFixedExample = () => {
   return (
     <>
       <div
@@ -259,6 +258,6 @@ export const AllPointsWithArrow = () => (
   <PopperExample showAll={true} showArrow={true} />
 );
 
-export const FixedPopperAllPoints = () => <PopperFixedExample showAll={true} />;
+export const FixedPopperAllPoints = () => <PopperFixedExample />;
 export const RerenderingPopper = () => <RerenderingPopperExample />;
 export const JumpingPopper = () => <JumpingPopperExample />;

package/src/Popper/Popper.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';
 import {
   forwardRef,
   useRef,
@@ -6,22 +7,22 @@ import {
   useMemo,
   memo,
 } from 'react';
-import type * as React from 'react';
-import { assignMultipleRefs } from '../utils/assignRef';
-import { PopperProvider, PopperContextProps } from './context';
-import { Portal } from '../Portal';
-
-import {
+import type {
   Placement,
   Modifier,
   PositioningStrategy,
   Instance,
   Rect,
-  createPopper,
 } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
 import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
 import type { ArrowModifier } from '@popperjs/core/lib/modifiers/arrow';
 
+import { assignMultipleRefs } from '../utils/assignRef';
+import type { PopperContextProps } from './context';
+import { PopperProvider } from './context';
+import { Portal } from '../Portal';
+
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
@@ -31,11 +32,11 @@ export type OffsetsFunction = (arg0: {
   placement: Placement;
 }) => [number | null | undefined, number | null | undefined];
 
-export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  anchorEl: React.RefObject<HTMLElement>;
-  children?: React.ReactNode;
+export interface PopperProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  anchorEl: RefObject<HTMLElement>;
+  children?: ReactNode;
   placement?: Placement;
   strategy?: PositioningStrategy;
   modifiers?: Array<Partial<Modifier<any, any>>>;

package/src/Popper/PopperArrow.tsx

@@ -1,11 +1,12 @@
+import type { ElementType, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { usePopperContext } from './context';
 import { assignRef } from '../utils/assignRef';
 
-export interface PopperArrowProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface PopperArrowProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
 }
 
 export const PopperArrow = forwardRef<HTMLDivElement, PopperArrowProps>(

package/src/Popper/context.ts

@@ -1,4 +1,5 @@
-import { createContext, MutableRefObject, useContext } from 'react';
+import type { MutableRefObject } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface PopperContextProps {
   arrowRef: MutableRefObject<HTMLSpanElement | null>;

package/src/Portal/Portal.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 export interface PortalProps {

package/src/RadioButton/RadioButton.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { RadioButton, RadioGroup } from './';
 // import './styles.css';
 

package/src/RadioButton/RadioButton.tsx

@@ -1,13 +1,20 @@
+import type {
+  ChangeEvent,
+  ElementType,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { RadioValue, useRadioGroupContext } from './context';
+
+import type { RadioValue } from './context';
+import { useRadioGroupContext } from './context';
 import { wrapEvent } from '../utils';
 
 export interface RadioButtonProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   checked?: boolean;
   value: RadioValue;
 }
@@ -24,7 +31,7 @@ export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
     } = props;
     const radioGroupContext = useRadioGroupContext();
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       radioGroupContext?.onChange?.(e, valueProp);
     };
 

package/src/RadioButton/RadioGroup.tsx

@@ -1,23 +1,27 @@
+import type {
+  ChangeEvent,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef, useId } from 'react';
-import type * as React from 'react';
-import { RadioGroupProvider, RadioValue } from './context';
+
+import type { RadioValue } from './context';
+import { RadioGroupProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface RadioGroupProps
   extends Omit<
-    React.HTMLAttributes<HTMLDivElement>,
+    HTMLAttributes<HTMLDivElement>,
     'onChange' | 'value' | 'defaultValue'
   > {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   value?: RadioValue;
   defaultValue?: RadioValue;
   name?: string;
-  onChange?: (
-    e: React.ChangeEvent<HTMLInputElement>,
-    value: RadioValue
-  ) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
 }
 
 export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(

package/src/RadioButton/context.ts

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 export type RadioValue = string | number | boolean;
@@ -5,10 +6,7 @@ export type RadioValue = string | number | boolean;
 // RadioGroup Component
 export interface RadioGroupContextProps {
   value: RadioValue | undefined;
-  onChange?: (
-    e: React.ChangeEvent<HTMLInputElement>,
-    value: RadioValue
-  ) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;
   name: string | undefined;
 }
 

package/src/SkipNav/SkipNav.tsx

@@ -1,10 +1,10 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
 
-export interface SkipNavProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(

package/src/Spinner/Spinner.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Spinner, SpinnerButton } from './';
 import './styles.css';
 

package/src/Spinner/Spinner.tsx

@@ -1,22 +1,27 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
 import { forwardRef, useState, useRef } from 'react';
-import type * as React from 'react';
+
 import { SpinnerProvider } from './context';
 import { clamp as clampFunc } from '../utils/clamp';
 import { wrapEvent, assignMultipleRefs } from '../utils';
 
 export interface SpinnerProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   value?: number;
   minValue?: number;
   maxValue?: number;
   stepSize?: number;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLDivElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
     value: number
   ) => void;
 }
@@ -40,7 +45,7 @@ export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
 
     const clamp = (value: number) => clampFunc(value, minValue, maxValue);
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       let nextValue = value;
       switch (e.key) {
         case 'ArrowUp':