@basic-ui/material 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/Ripple/useRippleHandlers.ts

@@ -1,5 +1,5 @@
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 import { useRef } from 'react';
-import type * as React from 'react';
 
 import type { RippleOptions } from './useRipple';
 import { useRipple } from './useRipple';
@@ -18,7 +18,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handlePointerDown = (e: React.PointerEvent<T>) => {
+  const handlePointerDown = (e: PointerEvent<T>) => {
     const rect = e.currentTarget.getBoundingClientRect();
     activate(rect, e.clientX, e.clientY, opts.center);
     window.addEventListener('pointerup', handlePointerUp);
@@ -36,7 +36,7 @@ export function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {
     deactivate();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<T>) => {
+  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {
     if (e.key !== ' ' || !keyReleased.current) {
       return;
     }

package/src/Ripple/useRippleSurface.ts

@@ -1,4 +1,9 @@
-import type { CSSProperties } from 'react';
+import type {
+  CSSProperties,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from 'react';
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 
@@ -17,12 +22,12 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
   center?: boolean;
   disabled?: boolean;
   style?: CSSProperties;
-  onPointerDown?: React.PointerEventHandler<T>;
-  onKeyDown?: React.KeyboardEventHandler<T>;
+  onPointerDown?: PointerEventHandler<T>;
+  onKeyDown?: KeyboardEventHandler<T>;
 }
 
 export function useRippleSurface<T extends HTMLElement>(
-  opts: UseRippleSurfaceOptions<T>
+  opts: UseRippleSurfaceOptions<T> = {}
 ) {
   let {
     // eslint-disable-next-line prefer-const
@@ -62,67 +67,78 @@ export function useRippleSurface<T extends HTMLElement>(
     ...rippleProps,
   });
 
-  const css: SxStyleProp = {
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear',
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity,
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&:active::before': {
-        opacity: pressedOpacity,
+  const css: SxStyleProp = useMemo(
+    () => ({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear',
       },
-    }),
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity,
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity,
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity,
-    },
-    ...(!rippleEnabled && {
-      '&[aria-pressed="true"]:active::before': {
-        opacity: pressedOpacity + pressedOpacity,
+      '&:hover::before': {
+        opacity: hoverOpacity,
       },
-    }),
-    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
-    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
-    '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
-      {
-        opacity: 0,
+      '&:focus-visible::before': {
+        opacity: focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&:active::before': {
+          opacity: pressedOpacity,
+        },
+      }),
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity,
+      },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity,
       },
-    '&:disabled,&[data-disabled]': {
-      cursor: 'default',
-    },
-    // ripple
-    ...(rippleEnabled && {
-      '&::after': { ...rippleStyle({ animation }) },
+      '&[aria-pressed="true"]:focus-visible::before': {
+        opacity: pressedOpacity + focusOpacity,
+      },
+      ...(!rippleEnabled && {
+        '&[aria-pressed="true"]:active::before': {
+          opacity: pressedOpacity + pressedOpacity,
+        },
+      }),
+      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +
+      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +
+      '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before']:
+        {
+          opacity: 0,
+        },
+      '&:disabled,&[data-disabled]': {
+        cursor: 'default',
+      },
+      // ripple
+      ...(rippleEnabled && {
+        '&::after': { ...rippleStyle({ animation }) },
+      }),
     }),
-  };
+    [
+      animation,
+      baseOpacity,
+      focusOpacity,
+      hoverOpacity,
+      pressedOpacity,
+      rippleColor,
+      rippleEnabled,
+    ]
+  );
 
   return {
     style: { ...animationStyle, ...style },

package/src/Select/Select.tsx

@@ -1,5 +1,10 @@
+import type {
+  SelectHTMLAttributes,
+  ReactNode,
+  ChangeEvent,
+  ComponentType,
+} from 'react';
 import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-import * as React from 'react';
 import {
   wrapEvent,
   assignMultipleRefs,
@@ -27,21 +32,21 @@ const componentMap = {
 
 export interface SelectProps
   extends Omit<
-    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,
+    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,
     'value' | 'defaultValue' | 'onChange'
   > {
   variant?: 'outlined' | 'filled';
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   defaultValue?: string;
   value?: string;
   native?: boolean;
   theme?: Theme;
   error?: boolean | string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
   renderValue?: (value?: string) => string | undefined;
-  leadingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
 }
 
 export const Select = forwardRef<
@@ -115,7 +120,7 @@ export const Select = forwardRef<
 
   const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;
 
-  const Comp: React.ComponentType<any> = native
+  const Comp: ComponentType<any> = native
     ? (SelectComp as any)
     : (SelectButton as any);
 

package/src/Select/SelectIcon.tsx

@@ -1,16 +1,16 @@
 import type { SVGAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { rem } from 'polished';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { PADDING_RIGHT_WITH_ICON } from '../TextField/consts';
+import { EASING_STANDARD } from '../motion';
 
 export type SelectIconProps = BoxProps<
   SVGElement,
-  React.SVGAttributes<SVGElement>
+  SVGAttributes<SVGElement>
 > & { open?: boolean };
 
 export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
@@ -32,8 +32,7 @@ export const SelectIcon = forwardRef<SVGElement, SelectIconProps>(
           color: open ? 'primary' : alpha('on.surface', 0.54),
           pointerEvents: 'none',
           transform: open ? 'rotate(180deg)' : undefined,
-          transition:
-            'transform .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .15s ${EASING_STANDARD}, color .15s ${EASING_STANDARD}`,
         }}
         {...otherProps}
       >

package/src/Select/context.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
 import { useContext, createContext } from 'react';
 
 // Select Component
@@ -5,7 +6,7 @@ export interface SelectContextProps {
   native: boolean;
   value?: string;
   onSelect: (
-    e: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>
+    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>
   ) => void;
 }
 

package/src/Select/defaultRender.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 import { Children, isValidElement } from 'react';
 
 export const makeDefaultRender =
-  (children?: React.ReactNode) =>
+  (children?: ReactNode) =>
   (val?: string): string | undefined => {
     if (children && val !== undefined) {
       const allChildren = Children.toArray(children);

package/src/Select/styledComponents.tsx

@@ -1,14 +1,18 @@
+import type {
+  ElementType,
+  FC,
+  RefAttributes,
+  SelectHTMLAttributes,
+} from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { MenuButtonProps } from '@basic-ui/core';
 import { MenuButton as BaseMenuButton } from '@basic-ui/core';
 
 import type { Theme } from '../theme';
 import { Input } from '../TextField/Input';
 
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  as?: React.ElementType<any>;
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  as?: ElementType<any>;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
   theme: Theme;
@@ -17,9 +21,8 @@ export interface SelectProps
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ as: asProp = 'select', ...props }, forwardedRef) => {
-    const InputSelect: React.FC<
-      SelectProps & React.RefAttributes<HTMLSelectElement>
-    > = Input as any;
+    const InputSelect: FC<SelectProps & RefAttributes<HTMLSelectElement>> =
+      Input as any;
 
     return <InputSelect as={asProp} ref={forwardedRef} {...props} />;
   }
@@ -27,11 +30,10 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
 const SelectButtonInner = forwardRef<
   HTMLButtonElement,
-  SelectProps & { innerAs?: React.ElementType<any> }
+  SelectProps & { innerAs?: ElementType<any> }
 >(({ innerAs = 'div', ...props }, forwardedRef) => {
-  const InputButton: React.FC<
-    SelectProps & React.RefAttributes<HTMLButtonElement>
-  > = Input as any;
+  const InputButton: FC<SelectProps & RefAttributes<HTMLButtonElement>> =
+    Input as any;
 
   return (
     <InputButton as={innerAs} ref={forwardedRef} tabIndex={0} {...props} />

package/src/SelectionControl/SelectionControlLabel.tsx

@@ -1,17 +1,13 @@
-import type { LabelHTMLAttributes } from 'react';
+import type { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
 export interface SelectionControlLabelProps
-  extends BoxProps<
-    HTMLLabelElement,
-    React.LabelHTMLAttributes<HTMLLabelElement>
-  > {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends BoxProps<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>> {
+  as?: ElementType<any>;
+  children?: ReactNode;
 }
 
 export const SelectionControlLabel = forwardRef<

package/src/SelectionControl/SelectionControlText.tsx

@@ -1,13 +1,13 @@
+import type { ElementType, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { TextProps } from '../Text';
 import { Text } from '../Text';
 import { alpha } from '../color';
 
 export interface SelectionControlTextProps extends TextProps {
-  as?: React.ElementType<any>;
-  children?: React.ReactNode;
+  as?: ElementType<any>;
+  children?: ReactNode;
   disabled?: boolean;
 }
 

package/src/Skeleton/DelayAppearance.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { keyframes } from '@emotion/react';
 import type { Keyframes } from '@emotion/serialize';
 
@@ -14,7 +14,7 @@ export const appearAnimation: Keyframes = keyframes({
 
 export interface DelayAppearanceProps extends BoxProps {
   timeoutInMilliseconds?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 /**

package/src/Skeleton/Skeleton.story.tsx

@@ -34,13 +34,13 @@ const Example = () => {
   return (
     <>
       <Box>
-        <Text variant="h4" px={2}>
+        <Text variant="title-large" px={2}>
           Pulse
         </Text>
         <Skeletons animation="pulse" />
       </Box>
       <Box>
-        <Text variant="h4" px={2}>
+        <Text variant="title-large" px={2}>
           Wave
         </Text>
         <Skeletons animation="wave" />

package/src/Skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
@@ -8,10 +8,10 @@ import { useTheme } from '../theme';
 import { pulseAnimationStyle, waveAnimationStyle } from './animation';
 
 export interface SkeletonProps
-  extends BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>> {
-  as?: React.ElementType<any>;
-  innerAs?: React.ElementType<any>;
-  children?: React.ReactNode;
+  extends BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
   animation?: 'pulse' | 'wave';
 }
 
@@ -21,7 +21,7 @@ export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
     const theme = useTheme();
 
     return (
-      <Box<BoxProps<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>>
+      <Box<BoxProps<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>>
         ref={forwardedRef}
         as={as}
         __css={{

package/src/Snackbar/Snackbar.tsx

@@ -1,7 +1,7 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
+import type { ReactElement } from 'react';
 import { cloneElement, forwardRef, useRef } from 'react';
-import * as React from 'react';
 
 import { Box } from '../Box';
 import {
@@ -15,7 +15,7 @@ import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
 export interface SnackbarProps extends PaperProps {
-  action?: React.ReactElement;
+  action?: ReactElement;
   timeout?: number;
   dismissible?: boolean;
 }
@@ -68,7 +68,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
         }}
         {...otherProps}
       >
-        <Text variant="body2" as="span" py={2}>
+        <Text variant="body-medium" as="span" py={2}>
           {children}
         </Text>
         {action && (

package/src/Snackbar/Stack.tsx

@@ -1,4 +1,4 @@
-import type { MutableRefObject, ReactElement, FC } from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
 import {
   useLayoutEffect,
   createContext,
@@ -7,7 +7,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import * as React from 'react';
 
 export type StackPlacement =
   | 'top-right'
@@ -98,9 +97,7 @@ function StackContent({
   gap: number;
   placement: StackPlacement;
   maxSize: number;
-  onAddItemRef: React.MutableRefObject<
-    ((element: React.ReactElement) => void) | null
-  >;
+  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;
 }) {
   const id = useRef(0);
   const items = useRef<StackItem[]>([]);
@@ -110,7 +107,7 @@ function StackContent({
   }
 
   useEffect(() => {
-    onAddItemRef.current = (element: React.ReactElement) => {
+    onAddItemRef.current = (element: ReactElement) => {
       const itemId = String(++id.current);
 
       items.current.push({
@@ -200,7 +197,7 @@ interface StackItem {
 }
 
 export const StackProvider: FC<{
-  children?: React.ReactNode | React.ReactNode[];
+  children?: ReactNode | ReactNode[];
   gap?: number;
   placement?:
     | 'top-right'
@@ -211,8 +208,8 @@ export const StackProvider: FC<{
     | 'bottom-left';
   maxSize?: number;
 }> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {
-  const onAddItemRef = useRef<(element: React.ReactElement) => void>(null);
-  function onAddItem(element: React.ReactElement) {
+  const onAddItemRef = useRef<(element: ReactElement) => void>(null);
+  function onAddItem(element: ReactElement) {
     onAddItemRef.current?.(element);
   }
 

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,6 +1,7 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
+import { EASING_STANDARD } from '../motion';
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;
@@ -100,7 +101,7 @@ export const placements = {
 const commonStyle = { position: 'fixed', zIndex: 'snackbar' };
 
 function getTransition(timems: number) {
-  return `opacity ${timems}ms cubic-bezier(.4,0,.2,1),transform ${timems}ms cubic-bezier(.4,0,.2,1)`;
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
 
 const defaultAnimation = {
@@ -110,7 +111,7 @@ const defaultAnimation = {
 };
 
 export function useSnackbarAnimation(
-  ref: React.MutableRefObject<HTMLDivElement | null>,
+  ref: MutableRefObject<HTMLDivElement | null>,
   timeout: number
 ): {
   style: CSSProperties;

package/src/Switch/Switch.tsx

@@ -1,6 +1,5 @@
-import type { InputHTMLAttributes } from 'react';
+import type { ElementType, FC, InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 
 import type { RippleBoxProps } from '../Ripple';
@@ -14,18 +13,15 @@ import {
 } from '../SelectionControl';
 import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
 
-const CheckBoxCore: React.FC<
+const CheckBoxCore: FC<
   SwitchProps & {
-    innerAs?: React.ElementType<any>;
+    innerAs?: ElementType<any>;
   }
 > = _CheckBoxCore as any;
 
-interface SwitchProps
-  extends BoxProps<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
-  > {
-  as?: React.ElementType<any>;
+export interface SwitchProps
+  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+  as?: ElementType<any>;
   checked?: boolean;
   disabled?: boolean;
 }

package/src/Switch/styledComponents.tsx

@@ -1,6 +1,7 @@
 import { rem } from 'polished';
 
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 
 const BORDER_WIDTH = 2;
 const TRAIL_WIDTH = 52;
@@ -48,8 +49,7 @@ export const SwitchThumb = ({ checked = false, ...otherProps }) => (
         (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2
       )})) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      transition:
-        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: THUMB_SIZE,
         height: THUMB_SIZE,

package/src/Tab/Tab.tsx

@@ -1,6 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import type { TabProps as TabPropsCore } from '@basic-ui/core';
 import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
@@ -14,10 +13,7 @@ import { TabIndicator } from '../TabIndicator';
 import { useTabListContext } from './context';
 
 export type TabProps = TabPropsCore &
-  RippleBoxProps<
-    HTMLButtonElement,
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  >;
+  RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
 
 const TabInner = forwardRef<
   HTMLButtonElement,
@@ -27,7 +23,7 @@ const TabInner = forwardRef<
   const { textColor, indicatorColor, selectedTextColor } = useTabListContext();
 
   return (
-    <Box position="relative" display="flex" flexGrow={1} flexDirection="column">
+    <Box position="relative" display="flex" flex={1} flexDirection="column">
       <RippleBox<
         RippleBoxProps<
           HTMLButtonElement,
@@ -57,7 +53,7 @@ const TabInner = forwardRef<
       >
         <Text
           as="span"
-          variant="button"
+          variant="label-large"
           color="inherit"
           height="100%"
           textAlign="center"

package/src/TabIndicator/TabIndicator.tsx

@@ -5,6 +5,7 @@ import { assignMultipleRefs } from '@basic-ui/core';
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
 
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
@@ -59,7 +60,7 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           transform: `scale(1)`,
           opacity: selected ? 1 : 0,
           transformOrigin: 'left',
-          transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+          transition: `transform .25s ${EASING_STANDARD}`,
           zIndex: 1,
         }}
         {...otherProps}

package/src/TabIndicator/context.ts

@@ -1,8 +1,9 @@
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 // TabIndicator Component
 export interface TabIndicatorContextProps {
-  currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;
+  currentIndicator: MutableRefObject<HTMLSpanElement | null>;
 }
 
 const TabIndicatorContext = createContext<TabIndicatorContextProps>({