@basic-ui/core 0.0.40 → 0.0.41

package/src/Modal/ModalBackdrop.tsx

@@ -1,15 +1,20 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  CSSProperties,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
 import { useRef, forwardRef } from 'react';
-import * 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;
 }
@@ -31,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) {
@@ -48,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/Popper/Popper.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, RefObject, ReactNode } from 'react';
 import {
   forwardRef,
   useRef,
@@ -6,7 +7,6 @@ import {
   useMemo,
   memo,
 } from 'react';
-import * as React from 'react';
 import type {
   Placement,
   Modifier,
@@ -32,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,12 +1,12 @@
+import type { ElementType, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * 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/RadioButton/RadioButton.tsx

@@ -1,15 +1,20 @@
+import type {
+  ChangeEvent,
+  ElementType,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 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;
 }
@@ -26,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,5 +1,10 @@
+import type {
+  ChangeEvent,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 import { forwardRef, useId } from 'react';
-import * as React from 'react';
 
 import type { RadioValue } from './context';
 import { RadioGroupProvider } from './context';
@@ -7,19 +12,16 @@ 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 * 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.tsx

@@ -1,23 +1,27 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+} from 'react';
 import { forwardRef, useState, useRef } from 'react';
-import * 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;
 }
@@ -41,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':

package/src/Spinner/SpinnerButton.tsx

@@ -1,14 +1,19 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useSpinnerContext } from './context';
 import { wrapEvent } from '../utils';
 
 export interface SpinnerButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   type: 'next' | 'previous';
 }
 
@@ -21,7 +26,7 @@ export const SpinnerButton = forwardRef<HTMLButtonElement, SpinnerButtonProps>(
       throw new Error('Missing <Spinner /> in component tree');
     }
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       const delta = type === 'next' ? 1 : -1;
 
       spinnerContext.onChange &&

package/src/Spinner/context.ts

@@ -1,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 // Spinner Component
@@ -7,9 +8,7 @@ export interface SpinnerContextProps {
   maxValue: number;
   stepSize: number;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLDivElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement>,
     value: number
   ) => void;
   clamp: (value: number) => number;

package/src/Tabs/Tab.tsx

@@ -1,5 +1,11 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from 'react';
 import { forwardRef, useRef } from 'react';
-import * as React from 'react';
 
 import { useTabsContext, useTabListContext } from './context';
 import { assignMultipleRefs, getCircularIndex, wrapEvent } from '../utils';
@@ -24,11 +30,10 @@ function getNextIndex(
   return null;
 }
 
-export interface TabProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
@@ -51,7 +56,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     throw new Error('Missing <Tabs /> or <TabList /> in the component tree');
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     const right = tabListContext.vertical ? 'ArrowDown' : 'ArrowRight';
     const left = tabListContext.vertical ? 'ArrowUp' : 'ArrowLeft';
     const first = 'Home';
@@ -94,7 +99,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     }
   };
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     const allTabs = tabListContext.tabsScope.current.queryAllNodes(scopeQuery);
     const currentIndex = ref.current ? allTabs.indexOf(ref.current) : -1;
 

package/src/Tabs/TabList.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
 import {
   forwardRef,
   useRef,
@@ -6,18 +7,17 @@ import {
   cloneElement,
   useId,
 } from 'react';
-import * as React from 'react';
 
 import { TabListProvider, useTabsContext } from './context';
 import { useScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';
 
-export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   manualActivation?: boolean;
   vertical?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(

package/src/Tabs/TabPanel.tsx

@@ -1,12 +1,12 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { useTabsContext } from './context';
 
-export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   lazy?: boolean;
 }
 

package/src/Tabs/TabPanels.tsx

@@ -1,11 +1,11 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef, Fragment, Children, cloneElement } from 'react';
-import * as React from 'react';
 
 export interface TabPanelsProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   lazy?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(

package/src/Tabs/Tabs.tsx

@@ -1,17 +1,15 @@
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { forwardRef, Fragment, useState } from 'react';
-import * as React from 'react';
 
 import { TabsProvider } from './context';
 import { useControlledState } from '../hooks';
 
 export interface TabsProps {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
     value: number
   ) => void;
   index?: number;

package/src/Tabs/context.ts

@@ -1,3 +1,4 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { Scope } from '../hooks/useScope';
@@ -6,9 +7,7 @@ import type { Scope } from '../hooks/useScope';
 export interface TabsContextProps {
   currentIndex: number;
   onChange?: (
-    e:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.KeyboardEvent<HTMLButtonElement>,
+    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
     value: number
   ) => void;
   tabListId: string | null;

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef } from 'react';
+import { useRef, forwardRef } from 'react';
 
 import { Tooltip } from './';
 import { Popper } from '../Popper/Popper';

package/src/Tooltip/Tooltip.tsx

@@ -1,14 +1,20 @@
-import type { ReactElement, RefAttributes } from 'react';
-import React, { forwardRef, cloneElement, Children } from 'react';
+import type {
+  ElementType,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  RefAttributes,
+} from 'react';
+import { forwardRef, cloneElement, Children } from 'react';
 
 import { useTooltip } from './useTooltip';
 export type { InjectedTooltipProps } from './useTooltip';
 
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  label: React.ReactNode;
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  label: ReactNode;
   disabled?: boolean;
 }
 

package/src/Tooltip/useTooltip.ts

@@ -1,4 +1,11 @@
-import type { RefAttributes } from 'react';
+import type {
+  HTMLAttributes,
+  KeyboardEvent,
+  ReactNode,
+  Ref,
+  RefAttributes,
+  RefObject,
+} from 'react';
 import { useRef, useEffect, useState, useId } from 'react';
 
 import { assignMultipleRefs } from '../utils/assignRef';
@@ -18,20 +25,19 @@ import {
   Visible,
 } from './stateMachine';
 
-export type ChildProps = React.HTMLAttributes<HTMLElement> &
+export type ChildProps = HTMLAttributes<HTMLElement> &
   RefAttributes<HTMLElement>;
 
-export interface InjectedTooltipProps
-  extends React.HTMLAttributes<HTMLElement> {
-  anchorEl: React.RefObject<HTMLElement>;
+export interface InjectedTooltipProps extends HTMLAttributes<HTMLElement> {
+  anchorEl: RefObject<HTMLElement>;
   visible: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export function useTooltip(
   childProps: ChildProps,
-  childRef: React.Ref<HTMLElement> | undefined,
-  tooltipProps: React.HTMLAttributes<HTMLElement> & { label?: React.ReactNode }
+  childRef: Ref<HTMLElement> | undefined,
+  tooltipProps: HTMLAttributes<HTMLElement> & { label?: ReactNode }
 ): [ChildProps, InjectedTooltipProps] {
   const {
     onMouseEnter,
@@ -86,7 +92,7 @@ export function useTooltip(
     }
   }
 
-  function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {
     if (event.key === 'Enter' || event.key === ' ') {
       send(SelectWithKeyboard);
     }

package/src/hooks/useAutoFocus.ts

@@ -1,10 +1,11 @@
+import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
 import { focusOnChildNode } from '../FocusLock/tabUtils';
 
 export function useAutoFocus(
   open: boolean,
-  elementRef: React.MutableRefObject<HTMLElement | null>
+  elementRef: MutableRefObject<HTMLElement | null>
 ) {
   useEffect(() => {
     if (open) {

package/src/hooks/useControlledState.ts

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction, SyntheticEvent } from 'react';
 import { useRef, useState } from 'react';
 
 import type { CustomEventHandler } from '../utils';
@@ -5,20 +6,16 @@ import { wrapEvent } from '../utils';
 
 export function useControlledState<
   V,
-  E extends React.SyntheticEvent<any>,
+  E extends SyntheticEvent<any>,
   H extends unknown[]
 >(
   valueProp: V | undefined,
   onChangeProp: CustomEventHandler<E, H> | undefined,
   defaultValue: V,
   defaultOnChange: (
-    setValue: React.Dispatch<React.SetStateAction<V>>
+    setValue: Dispatch<SetStateAction<V>>
   ) => CustomEventHandler<E, H>
-): [
-  V,
-  CustomEventHandler<E, H> | undefined,
-  React.Dispatch<React.SetStateAction<V>>
-] {
+): [V, CustomEventHandler<E, H> | undefined, Dispatch<SetStateAction<V>>] {
   const isControlled = useRef(valueProp !== undefined);
   const [valueState, setValueState] = useState<V>(defaultValue);
 

package/src/hooks/useFocusState.ts

@@ -1,11 +1,12 @@
+import type { FocusEventHandler } from 'react';
 import { useState } from 'react';
 
 import { wrapEvent } from '../utils/wrapEvent';
 
 export function useFocusState<T>(
   props: {
-    onFocus?: React.FocusEventHandler<T>;
-    onBlur?: React.FocusEventHandler<T>;
+    onFocus?: FocusEventHandler<T>;
+    onBlur?: FocusEventHandler<T>;
   } = {}
 ) {
   const { onFocus, onBlur } = props;

package/src/hooks/useGestureHandlers.ts

@@ -1,5 +1,9 @@
+import type {
+  MutableRefObject,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
 
 export interface GestureHandlersState {
   target: null | EventTarget;
@@ -26,8 +30,8 @@ type SetStateFunc<S> = (
 ) => void;
 
 export interface GestureHandlersReturn {
-  onMouseDown: (e: React.MouseEvent<HTMLElement>) => void;
-  onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
+  onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;
+  onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;
 }
 
 export interface GestureHandlerOptions {
@@ -59,7 +63,7 @@ const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
 
 export function gestureHandlers(
   set: SetStateFunc<GestureHandlersState>,
-  containerRef?: React.MutableRefObject<HTMLElement | null>,
+  containerRef?: MutableRefObject<HTMLElement | null>,
   options: GestureHandlerOptions = {}
 ): GestureHandlersReturn {
   const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;
@@ -192,7 +196,7 @@ export function gestureHandlers(
     handleMove(e.touches.item(0) as any);
   }
 
-  function handleTouchStart(e: React.TouchEvent<HTMLElement>) {
+  function handleTouchStart(e: ReactTouchEvent<HTMLElement>) {
     // making sure we're not dragging the element when more than one finger press the screen
     const { touches } = e;
     if (touches.length > 1) {
@@ -221,7 +225,7 @@ export function gestureHandlers(
   }
 
   // Mouse handlers
-  function handleMouseDown(e: React.MouseEvent<HTMLElement>) {
+  function handleMouseDown(e: ReactMouseEvent<HTMLElement>) {
     if (
       ensureTargetIsContainer &&
       containerRef &&
@@ -251,7 +255,7 @@ export function gestureHandlers(
 }
 
 export const useGestureHandlers = (
-  containerRef: React.MutableRefObject<HTMLElement | null> | undefined,
+  containerRef: MutableRefObject<HTMLElement | null> | undefined,
   onGesture: (e: GestureHandlersState) => void,
   options: GestureHandlerOptions = {}
 ) => {

package/src/hooks/useMeasure.ts

@@ -1,7 +1,8 @@
+import type { MutableRefObject } from 'react';
 import { useRef, useState, useEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-export function useMeasure(ref: React.MutableRefObject<HTMLElement | null>) {
+export function useMeasure(ref: MutableRefObject<HTMLElement | null>) {
   const ro = useRef<ResizeObserver | null>(null);
   const [bounds, setBounds] = useState({
     left: 0,