@basic-ui/core 0.0.38 → 0.0.41

package/src/Accordion/AccordionHeader.tsx

@@ -1,14 +1,21 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  MouseEvent,
+  KeyboardEvent,
+  FocusEvent,
+} from 'react';
 import { forwardRef, useRef, useState, useEffect } from 'react';
-import type * as React from 'react';
+
 import { wrapEvent, assignMultipleRefs, getCircularIndex } from '../utils';
 import { useAccordionContext, useAccordionItemContext } from './context';
 import { headerScopeQuery as scopeQuery } from './scopeQuery';
 
-export interface AccordionHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface AccordionHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
@@ -40,33 +47,30 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
       }
     }, [accordionContext]);
 
-    const onClick = wrapEvent(
-      onClickProp,
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        let index = 0;
-        if (accordionItemContext.expanded) {
-          index = -1;
-        } else if (accordionContext) {
-          const allHeaders =
-            accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
+    const onClick = wrapEvent(onClickProp, (e: MouseEvent<HTMLDivElement>) => {
+      let index = 0;
+      if (accordionItemContext.expanded) {
+        index = -1;
+      } else if (accordionContext) {
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery) || [];
 
-          index = allHeaders.findIndex((e) => e === ref.current);
-          if (index === accordionContext.expandedIndex) {
-            index = -1;
-          }
-          accordionContext.onChange && accordionContext.onChange(e, index);
+        index = allHeaders.findIndex((e) => e === ref.current);
+        if (index === accordionContext.expandedIndex) {
+          index = -1;
         }
-
-        accordionItemContext.onChange &&
-          accordionItemContext.onChange(e, index >= 0);
+        accordionContext.onChange && accordionContext.onChange(e, index);
       }
-    );
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      accordionItemContext.onChange &&
+        accordionItemContext.onChange(e, index >= 0);
+    });
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
       switch (e.key) {
         case 'Enter':
         case ' ': {
-          onClick((e as unknown) as React.MouseEvent<HTMLDivElement>);
+          onClick(e as unknown as MouseEvent<HTMLDivElement>);
           e.preventDefault();
           break;
         }
@@ -77,9 +81,8 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
           if (!accordionContext) {
             return;
           }
-          const allHeaders = accordionContext.scope.current.queryAllNodes(
-            scopeQuery
-          );
+          const allHeaders =
+            accordionContext.scope.current.queryAllNodes(scopeQuery);
 
           e.preventDefault();
 
@@ -124,11 +127,10 @@ export const AccordionHeader = forwardRef<HTMLDivElement, AccordionHeaderProps>(
       }
     };
 
-    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
       if (accordionContext) {
-        const allHeaders = accordionContext.scope.current.queryAllNodes(
-          scopeQuery
-        );
+        const allHeaders =
+          accordionContext.scope.current.queryAllNodes(scopeQuery);
         const newFocusIsHeader =
           allHeaders.findIndex((header) => header === e.relatedTarget) >= 0;
 

package/src/Accordion/AccordionItem.tsx

@@ -1,15 +1,23 @@
+import type {
+  HTMLAttributes,
+  ElementType,
+  ReactNode,
+  KeyboardEvent,
+  MouseEvent,
+} from 'react';
 import { Fragment, forwardRef, useId } from 'react';
-import type * as React from 'react';
-import { AccordionItemContextProps, AccordionItemProvider } from './context';
+
+import type { AccordionItemContextProps } from './context';
+import { AccordionItemProvider } from './context';
 
 export interface AccordionItemProps
-  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;
   expanded?: boolean;
   onChange?: (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
     value: boolean
   ) => void;
 }

package/src/Accordion/context.ts

@@ -1,5 +1,7 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
 import { useContext, createContext } from 'react';
-import { Scope } from '../hooks/useScope';
+
+import type { Scope } from '../hooks/useScope';
 
 // AccordionGroup Component
 export interface AccordionContextProps {
@@ -8,7 +10,7 @@ export interface AccordionContextProps {
   scope: Scope<HTMLElement>;
   expandedIndex: number;
   onChange?: (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
     index: number
   ) => void;
 }
@@ -23,7 +25,7 @@ export interface AccordionItemContextProps {
   bodyId: string | undefined;
   expanded: boolean;
   onChange?: (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
     value: boolean
   ) => void;
 }

package/src/CheckBox/CheckBox.tsx

@@ -1,12 +1,12 @@
+import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { useControlledState } from '../hooks';
 
-export interface CheckBoxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(

package/src/ComboBox/ComboBox.story.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState, useRef } from 'react';
-import type * as React from 'react';
+import type { ChangeEvent } from 'react';
+import { useMemo, useState } from 'react';
+
 import { ComboboxOption } from './ComboboxOption';
 import { ComboboxList } from './ComboboxList';
 import { ComboboxPopover } from './ComboboxPopover';
 import { ComboboxInput } from './ComboboxInput';
 import { ComboboxLabel } from './ComboboxLabel';
 import { Combobox } from './Combobox';
-import { Popper } from '../Popper';
 import cities from './cities';
 import './styles.css';
 
@@ -32,7 +32,7 @@ export function UncontrolledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
   };
 
@@ -73,7 +73,7 @@ export function ControlledClientSideExample({ initialValue = '' }) {
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setTerm(event.target.value);
     setSelected('');
   };

package/src/ComboBox/Combobox.tsx

@@ -1,15 +1,13 @@
+import type { HTMLAttributes, ReactNode, ElementType } from 'react';
 import { forwardRef, useRef, useMemo, useId } from 'react';
-import type * as React from 'react';
-import {
-  stateChart,
-  comboboxReducer,
-  isVisible,
-  INIT,
-  ActionTypes,
-} from './hooks';
-import { ComboBoxProvider, ComboBoxContextProps } from './context';
+
+import type { ActionTypes } from './hooks';
+import { stateChart, comboboxReducer, isVisible, INIT } from './hooks';
+import type { ComboBoxContextProps } from './context';
+import { ComboBoxProvider } from './context';
 import { useReducerMachine } from '../hooks/useReducerMachine';
-import { Scope, getScope } from '../hooks';
+import type { Scope } from '../hooks';
+import { getScope } from '../hooks';
 
 export type SelectEventHandler = (
   text: string,
@@ -17,16 +15,13 @@ export type SelectEventHandler = (
   obj: any
 ) => void;
 
-export type ComboboxProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'onSelect'
-> & {
+export type ComboboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
   onSelect?: SelectEventHandler;
   openOnFocus?: boolean;
   selectOnBlur?: boolean;
-  children?: React.ReactNode;
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  children?: ReactNode;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
 };
 
 export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(

package/src/ComboBox/ComboboxButton.tsx

@@ -1,17 +1,24 @@
+import type {
+  ButtonHTMLAttributes,
+  ElementType,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { useComboBoxContext } from './context';
 import { useKeyDown, IDLE, OPEN_WITH_BUTTON, CLOSE_WITH_BUTTON } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';
 
 export interface ComboboxButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-  children?: React.ReactNode;
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxButton = forwardRef<
@@ -21,14 +28,8 @@ export const ComboboxButton = forwardRef<
   { as: Comp = 'button', innerAs, onClick, onKeyDown, ...props },
   ref
 ) {
-  const {
-    transition,
-    data,
-    state,
-    buttonRef,
-    listboxIdRef,
-    isVisible,
-  } = useComboBoxContext();
+  const { transition, data, state, buttonRef, listboxIdRef, isVisible } =
+    useComboBoxContext();
 
   const handleKeyDown = useKeyDown();
 

package/src/ComboBox/ComboboxInput.tsx

@@ -1,5 +1,14 @@
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ElementType,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import type * as React from 'react';
+
 import {
   useBlur,
   CLEAR,
@@ -15,7 +24,7 @@ import { assignMultipleRefs, wrapEvent } from '../utils';
 import { useComboBoxContext } from './context';
 
 export interface ComboboxInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
+  extends InputHTMLAttributes<HTMLInputElement> {
   // clear on ESC
   clearOnEscape?: boolean;
   // highlights all the text in the box on click when true
@@ -26,13 +35,13 @@ export interface ComboboxInputProps
   defaultValue?: string;
   // value for controlled mode
   value?: string;
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id?: string;
 }
 
@@ -95,7 +104,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
     // [*]... and when controlled, we don't trigger handleValueChange as the user
     // types, instead the developer controls it with the normal input onChange
     // prop
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       // After the user started typing, lets forget the defaultValue
       hasStartedInteracting.current = true;
 

package/src/ComboBox/ComboboxLabel.tsx

@@ -1,11 +1,12 @@
+import type { ElementType, LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { useComboBoxContext } from './context';
 
 export interface ComboboxLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+  extends LabelHTMLAttributes<HTMLLabelElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id?: string;
 }
 

package/src/ComboBox/ComboboxList.tsx

@@ -1,15 +1,15 @@
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
 import { forwardRef, useRef, useEffect } from 'react';
-import type * as React from 'react';
+
 import { useComboBoxContext } from './context';
 import { getScope } from '../hooks';
 import { assignMultipleRefs } from '../utils';
 
-export interface ComboboxListProps
-  extends React.HTMLAttributes<HTMLUListElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ComboboxListProps extends HTMLAttributes<HTMLUListElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   persistSelection?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(

package/src/ComboBox/ComboboxOption.tsx

@@ -1,21 +1,25 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import type {
+  ElementType,
+  LiHTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 
-import type * as React from 'react';
 import { SELECT_WITH_CLICK, CLEAR_SELECTION } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { useComboBoxContext } from './context';
 import { makeHash } from './makeHash';
 
-export interface ComboboxOptionProps
-  extends React.LiHTMLAttributes<HTMLLIElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
+export interface ComboboxOptionProps extends LiHTMLAttributes<HTMLLIElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
   id: string;
   value: any;
   text?: string;
-  onClick?: React.MouseEventHandler<HTMLLIElement>;
-  children?: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLLIElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps>(

package/src/ComboBox/ComboboxPopover.tsx

@@ -1,17 +1,23 @@
+import type {
+  ElementType,
+  FocusEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  ReactNode,
+} from 'react';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+
 import { useKeyDown, useBlur } from './hooks';
 import { wrapEvent } from '../utils/wrapEvent';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useComboBoxContext } from './context';
 
-export interface ComboboxPopoverProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  onBlur?: React.FocusEventHandler<HTMLDivElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-  children?: React.ReactNode;
+export interface ComboboxPopoverProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+  children?: ReactNode;
 }
 
 export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(

package/src/ComboBox/context.ts

@@ -1,15 +1,17 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
-import { ActionTypes, StateTypes, ReducerState } from './hooks';
-import { SelectEventHandler } from './Combobox';
-import { Scope } from '../hooks';
+
+import type { ActionTypes, StateTypes, ReducerState } from './hooks';
+import type { SelectEventHandler } from './Combobox';
+import type { Scope } from '../hooks';
 
 export interface ComboBoxContextProps {
   data: Omit<ReducerState, 'state'>;
-  inputRef: React.MutableRefObject<HTMLInputElement | null>;
-  popoverRef: React.MutableRefObject<HTMLDivElement | null>;
-  buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+  inputRef: MutableRefObject<HTMLInputElement | null>;
+  popoverRef: MutableRefObject<HTMLDivElement | null>;
+  buttonRef: MutableRefObject<HTMLButtonElement | null>;
   onSelect?: SelectEventHandler;
-  optionsRef: React.MutableRefObject<{
+  optionsRef: MutableRefObject<{
     [itemId: string]: {
       value: string | unknown;
       text: string;
@@ -18,11 +20,11 @@ export interface ComboBoxContextProps {
   listScope: Scope<HTMLElement>;
   state: StateTypes;
   transition: (action: ActionTypes, payload?: any) => void;
-  listboxIdRef: React.MutableRefObject<string | undefined>;
-  labelIdRef: React.MutableRefObject<string | undefined>;
-  autocompletePropRef: React.MutableRefObject<boolean>;
-  persistSelectionRef: React.MutableRefObject<boolean>;
-  clearOnEscapeRef: React.MutableRefObject<boolean>;
+  listboxIdRef: MutableRefObject<string | undefined>;
+  labelIdRef: MutableRefObject<string | undefined>;
+  autocompletePropRef: MutableRefObject<boolean>;
+  persistSelectionRef: MutableRefObject<boolean>;
+  clearOnEscapeRef: MutableRefObject<boolean>;
   isVisible: boolean;
   openOnFocus: boolean;
   selectOnBlur: boolean;

package/src/ComboBox/hooks.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable default-case */
+import type { KeyboardEvent, MutableRefObject } from 'react';
 import { useEffect } from 'react';
-import {
+
+import type {
   StateChart as GenericStateChart,
   StateMachineState,
 } from '../hooks/useReducerMachine';
@@ -220,7 +222,7 @@ export const isVisible = (state: any) => visibleStates.indexOf(state) >= 0;
 // the popup.
 export function useFocusManagement(
   lastActionType: ActionTypes,
-  inputRef: React.MutableRefObject<HTMLInputElement | null>
+  inputRef: MutableRefObject<HTMLInputElement | null>
 ) {
   // useEffect so that the cursor goes to the end of the input instead
   // of awkwardly at the beginning, unclear to me why ...
@@ -288,7 +290,7 @@ export function useKeyDown() {
     listScope,
   } = useComboBoxContext();
 
-  return function handleKeyDown(event: React.KeyboardEvent<any>) {
+  return function handleKeyDown(event: KeyboardEvent<any>) {
     const optionNodes = listScope.current.queryAllNodes(scopeQuery);
 
     switch (event.key) {
@@ -357,10 +359,8 @@ export function useKeyDown() {
       }
       case 'Enter': {
         if (state === NAVIGATING && navigationItem !== '') {
-          const {
-            value: navigationValue,
-            text: navigationText,
-          } = optionsRef.current[navigationItem];
+          const { value: navigationValue, text: navigationText } =
+            optionsRef.current[navigationItem];
 
           // don't want to submit forms
           event.preventDefault();
@@ -408,10 +408,8 @@ export function useBlur() {
             transition(BLUR, { text: stateText, item: '' });
           } else {
             // select the currently selected item
-            const {
-              value: navigationValue,
-              text: navigationText,
-            } = optionsRef.current[navigationItem];
+            const { value: navigationValue, text: navigationText } =
+              optionsRef.current[navigationItem];
 
             onSelect &&
               onSelect(navigationText, navigationItem, navigationValue);

package/src/FocusLock/FocusLock.tsx

@@ -1,16 +1,23 @@
+import type {
+  ElementType,
+  FC,
+  HTMLAttributes,
+  MutableRefObject,
+  ReactNode,
+} from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
+
 import { useFocusLock } from './useFocusLock';
 
-export interface FocusLockProps extends React.HTMLAttributes<HTMLDivElement> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
-  childRef: React.MutableRefObject<HTMLElement | null>;
+export interface FocusLockProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  childRef: MutableRefObject<HTMLElement | null>;
   enabled?: boolean;
 }
 
-export const FocusLock: React.FC<FocusLockProps> = function FocusLock(props) {
+export const FocusLock: FC<FocusLockProps> = function FocusLock(props) {
   const {
     as: Comp = 'div',
     childRef,

package/src/FocusLock/useFocusLock.ts

@@ -1,15 +1,17 @@
+import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
+
 import { focusOnChildNode } from './tabUtils';
 
 export interface FocusLockOptions {
   enabled: boolean;
-  lockStartRef: React.MutableRefObject<HTMLElement | null>;
-  lockEndRef: React.MutableRefObject<HTMLElement | null>;
+  lockStartRef: MutableRefObject<HTMLElement | null>;
+  lockEndRef: MutableRefObject<HTMLElement | null>;
 }
 
 const focusLockStack: HTMLElement[] = [];
 export function useFocusLock(
-  ref: React.MutableRefObject<HTMLElement | null>,
+  ref: MutableRefObject<HTMLElement | null>,
   opts: FocusLockOptions
 ) {
   const { enabled = true, lockStartRef, lockEndRef } = opts;

package/src/List/List.tsx

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

package/src/List/ListItem.tsx

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