@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.3

package/src/Snackbar/Snackbar.tsx

@@ -1,14 +1,16 @@
 import { assignMultipleRefs } from '@basic-ui/core';
 import { rem } from 'polished';
 import { cloneElement, forwardRef, useRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,
   useColorMode,
 } from '../ColorMode';
-import { Paper, PaperProps } from '../Paper';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 import { Text } from '../Text';
 import { useSnackbarAnimation } from './useSnackbarAnimation';
 
@@ -40,7 +42,7 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
     return (
       <Paper
         elevation={4}
-        backgroundOverlay={4}
+        darkThemeBackgroundOverlay={4}
         className={
           colorMode === 'default' ? DARK_THEME_CLASS : DEFAULT_THEME_CLASS
         }

package/src/Snackbar/Stack.tsx

@@ -1,13 +1,13 @@
-import { MutableRefObject, ReactElement, useLayoutEffect } from 'react';
-import type * as React from 'react';
+import type { MutableRefObject, ReactElement, FC } from 'react';
 import {
+  useLayoutEffect,
   createContext,
-  FC,
   useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
+import * as React from 'react';
 
 export type StackPlacement =
   | 'top-right'

package/src/Snackbar/useSnackbarAnimation.ts

@@ -1,4 +1,6 @@
-import { CSSProperties, useEffect } from 'react';
+import type { CSSProperties } from 'react';
+import { useEffect } from 'react';
+
 import { useStackItem } from './Stack';
 
 const TRANSITION_TIME = 150;

package/src/Switch/Switch.tsx

@@ -1,9 +1,13 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-import type * as React from 'react';
-import { RippleBox, RippleBoxProps } from '../Ripple';
-import { Box, BoxProps } from '../Box';
-import { useTheme } from '../theme';
+import type { 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';
+import { RippleBox } from '../Ripple';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
 import {
   SelectionControlLabel,
   SelectionControlText,

package/src/Switch/styledComponents.tsx

@@ -1,4 +1,5 @@
 import { rem } from 'polished';
+
 import { Box } from '../Box';
 
 const BORDER_WIDTH = 2;
@@ -77,17 +78,19 @@ export const SwitchCircle = ({ checked = false, ...otherProps }) => (
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: 'inherit',
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
-        backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
-      },
-      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
-        height: checked
-          ? CIRCLE_SIZE_ACTIVE_CHECKED
-          : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-        width: checked
-          ? CIRCLE_SIZE_ACTIVE_CHECKED
-          : CIRCLE_SIZE_ACTIVE_UNCHECKED,
-      },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &':
+        {
+          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+        },
+      '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &':
+        {
+          height: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+          width: checked
+            ? CIRCLE_SIZE_ACTIVE_CHECKED
+            : CIRCLE_SIZE_ACTIVE_UNCHECKED,
+        },
       '[data-switch-thumb=""]:disabled ~ &': {
         opacity: checked ? 1 : 0.38,
         backgroundColor: checked ? 'surface' : 'on.surface',

package/src/Tab/Tab.tsx

@@ -1,8 +1,12 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import type * as React from 'react';
-import { Tab as TabCore, TabProps as TabPropsCore } from '@basic-ui/core';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+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';
+
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
 import { Text } from '../Text';
 import { Box } from '../Box';

package/src/Tab/TabList.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, useRef } from 'react';
-import {
-  TabList as TabListCore,
-  TabListProps as TabListPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
+import { TabList as TabListCore } from '@basic-ui/core';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { TabIndicatorProvider } from '../TabIndicator';
 import { TabListProvider } from './context';
 

package/src/Tab/TabPanel.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import {
-  TabPanel as TabPanelCore,
-  TabPanelProps as TabPanelPropsCore,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
+import { TabPanel as TabPanelCore } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TabPanelProps = TabPanelPropsCore & BoxProps;
 

package/src/TabIndicator/TabIndicator.tsx

@@ -1,9 +1,11 @@
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
-import { Box, BoxProps } from '../Box';
 import { rem } from 'polished';
-import { useTabIndicatorContext } from './context';
 import { assignMultipleRefs } from '@basic-ui/core';
 
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTabIndicatorContext } from './context';
+
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
   color?: string;
@@ -22,7 +24,8 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
       if (selected && ref.current) {
         if (currentIndicator.current !== null) {
           // We are switching indicator, let's slide!
-          const previousClientRect = currentIndicator.current.getBoundingClientRect();
+          const previousClientRect =
+            currentIndicator.current.getBoundingClientRect();
           const currentClientRect = ref.current.getBoundingClientRect();
           const widthDelta = previousClientRect.width / currentClientRect.width;
           const xPosition = previousClientRect.left - currentClientRect.left;

package/src/Table/Table.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Paper, PaperProps } from '../Paper';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 
 export type TableProps = PaperProps;
 
@@ -14,6 +16,7 @@ export const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       width="100%"
       flexDirection="column"
       elevation={elevation}
+      darkThemeBackgroundOverlay={elevation}
       {...rest}
     >
       {children}

package/src/Table/TableBody.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TableBodyProps = BoxProps;
 

package/src/Table/TableCell.tsx

@@ -1,5 +1,7 @@
 import { forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { useTableHeadContext } from './context';
 
 export type TableCellProps = BoxProps;

package/src/Table/TableHead.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
+import { rem } from 'polished';
+
 import { TableHeadProvider } from './context';
-import { TableBody, TableBodyProps } from './TableBody';
+import type { TableBodyProps } from './TableBody';
+import { TableBody } from './TableBody';
 import { alpha } from '../color';
-import { rem } from 'polished';
 
 export type TableHeadProps = TableBodyProps;
 

package/src/Table/TableRow.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import { Text, TextProps } from '../Text';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import { alpha } from '../color';
+
 export type TableRowProps = TextProps;
 
 export const TableRow = forwardRef<HTMLDivElement, TableRowProps>(

package/src/Text/LoremIpsum.tsx

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import type { FC } from 'react';
+
 import { Text } from '.';
 
 const phrase =

package/src/Text/Text.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type TextVariants =
   | 'h1'

package/src/TextField/FilledContainer.tsx

@@ -1,12 +1,14 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { get } from '@styled-system/css';
+import { rem } from 'polished';
+
 import { useTheme } from '../theme';
 import { FloatingLabel } from '../FloatingLabel';
 import { LineRipple } from '../LineRipple';
-import { rem } from 'polished';
 import { alpha } from '../color';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,

package/src/TextField/HelperText.tsx

@@ -1,9 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { alpha } from '../color';
-import { TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
 
 export interface HelperTextProps extends TextProps {
   children?: React.ReactNode;

package/src/TextField/IconContainer.tsx

@@ -1,6 +1,7 @@
 import { rem } from 'polished';
-import { FC } from 'react';
-import type * as React from 'react';
+import type { FC } from 'react';
+import * as React from 'react';
+
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';

package/src/TextField/Input.tsx

@@ -1,6 +1,9 @@
 import { rem } from 'polished';
-import { InputHTMLAttributes, forwardRef } from 'react';
-import { Box, BoxProps } from '../Box';
+import type { InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 import {
   ICON_WIDTH,
@@ -59,7 +62,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         display: 'flex',
         alignItems: 'center',
         ...(!multiline && {
-          lineHeight: 1,
           overflow: 'hidden',
           whiteSpace: 'nowrap',
           textOverflow: 'ellipsis',

package/src/TextField/OutlinedContainer.tsx

@@ -5,11 +5,13 @@ import {
   useState,
   useRef,
 } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import { NotchedOutline } from '../NotchedOutline';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,

package/src/TextField/TextField.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 import { Select, SelectItem } from '../';

package/src/TextField/TextField.tsx

@@ -1,12 +1,15 @@
 import { forwardRef, useState, useId } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
-import { Input, InputProps } from './Input';
+
+import type { InputProps } from './Input';
+import { Input } from './Input';
 import { useTheme } from '../theme';
 import { FilledContainer } from './FilledContainer';
 import { OutlinedContainer } from './OutlinedContainer';
 import { HelperText } from './HelperText';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { IconContainer } from './IconContainer';
 
 const componentMap = {

package/src/ThemeExplorer/ColorPicker.tsx

@@ -1,18 +1,22 @@
-import {
+import type {
   Color,
-  ColorPicker as _BaseColorPicker,
-  Hue as _Hue,
-  HueCursor as _HueCursor,
-  Saturation as _Saturation,
-  SaturationCursor as _SaturationCursor,
   ColorPickerProps as BaseColorPickerProps,
   HueProps,
   HueCursorProps,
   SaturationProps,
   SaturationCursorProps,
 } from '@basic-ui/color-picker';
-import { Box, BoxProps } from '../Box';
-import { VFC } from 'react';
+import {
+  ColorPicker as _BaseColorPicker,
+  Hue as _Hue,
+  HueCursor as _HueCursor,
+  Saturation as _Saturation,
+  SaturationCursor as _SaturationCursor,
+} from '@basic-ui/color-picker';
+import type { FC } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
   BaseColorPickerProps) & {
@@ -20,17 +24,16 @@ export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
   onChange: (color: Color) => void;
 };
 
-const BaseColorPicker: VFC<
+const BaseColorPicker: FC<
   Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
 > = _BaseColorPicker as any;
-const Hue: VFC<BoxProps & HueProps> = _Hue as any;
-const HueCursor: VFC<BoxProps & HueCursorProps> = _HueCursor as any;
-const Saturation: VFC<BoxProps & SaturationProps> = _Saturation as any;
-const SaturationCursor: VFC<
-  BoxProps & SaturationCursorProps
-> = _SaturationCursor as any;
+const Hue: FC<BoxProps & HueProps> = _Hue as any;
+const HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;
+const Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;
+const SaturationCursor: FC<BoxProps & SaturationCursorProps> =
+  _SaturationCursor as any;
 
-export const ColorPicker: VFC<ColorPickerProps> = ({
+export const ColorPicker: FC<ColorPickerProps> = ({
   color,
   onChange,
   width = 450,

package/src/ThemeExplorer/TextFieldColorPicker.tsx

@@ -1,7 +1,10 @@
-import { Color, toColor } from '@basic-ui/color-picker';
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
 import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
-import { alpha, Box, TextField, Button, TextFieldProps } from '../';
 import { useRef, useState, memo, useCallback } from 'react';
+
+import type { TextFieldProps } from '../';
+import { alpha, Box, TextField, Button } from '../';
 import { ColorPicker } from './ColorPicker';
 
 export interface TextFieldColorPickerProps

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -1,11 +1,13 @@
 import React, { useMemo, useDeferredValue, useEffect } from 'react';
-import { Box } from '..';
 import {
   CorePalette,
   argbFromHex,
   hexFromArgb,
 } from '@material/material-color-utilities';
-import { toColor, Color } from '@basic-ui/color-picker';
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+
+import { Box } from '..';
 import { TonalColors } from './components';
 import { TextFieldColorPicker } from './TextFieldColorPicker';
 import { ThemeColors } from './ThemeColors';
@@ -32,16 +34,10 @@ const ThemeBuilder = () => {
     [deferredPrimaryColor.hex]
   );
 
-  const [
-    secondaryColor,
-    secondaryColorTonal,
-    setSecondaryColor,
-  ] = useDeferredColor('secondary', a2);
-  const [
-    tertiaryColor,
-    tertiaryColorTonal,
-    setTertiaryColor,
-  ] = useDeferredColor('tertiary', a3);
+  const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
+    useDeferredColor('secondary', a2);
+  const [tertiaryColor, tertiaryColorTonal, setTertiaryColor] =
+    useDeferredColor('tertiary', a3);
   const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
     'neutral',
     n1

package/src/ThemeExplorer/ThemeColors.tsx

@@ -1,7 +1,8 @@
 import React, { memo } from 'react';
+
 import { Box } from '..';
 import { ColorRow } from './components';
-import { makeColorScheme } from './makeColorScheme';
+import type { makeColorScheme } from './makeColorScheme';
 
 export const ThemeColors = memo(
   ({

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
+
 import { ThemeColors } from './ThemeColors';
 import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, Box } from '../';
 

package/src/ThemeExplorer/components.tsx

@@ -1,8 +1,10 @@
-import React, { memo, useState, CSSProperties } from 'react';
-import { Box, Text, Tooltip } from '../';
+import type { CSSProperties } from 'react';
+import React, { memo, useState } from 'react';
 import { rgb, parseToHsl, parseToRgb } from 'polished';
 import { hexFromArgb, TonalPalette } from '@material/material-color-utilities';
 
+import { Box, Text, Tooltip } from '../';
+
 export const ColorItem = memo(
   (props: {
     token: string;
@@ -166,22 +168,7 @@ export const TonalColorsFromToken = memo((props: { token: string }) => {
 
 export const TonalColors = memo((props: { palette: TonalPalette }) => {
   const luminanceLevels = [
-    0,
-    10,
-    20,
-    25,
-    30,
-    35,
-    40,
-    50,
-    60,
-    70,
-    80,
-    90,
-    95,
-    98,
-    99,
-    100,
+    0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,
   ];
   return (
     <Box display="flex" height="72px" width="100%">

package/src/ThemeExplorer/makeColorScheme.tsx

@@ -1,4 +1,5 @@
-import { TonalPalette, hexFromArgb } from '@material/material-color-utilities';
+import type { TonalPalette } from '@material/material-color-utilities';
+import { hexFromArgb } from '@material/material-color-utilities';
 
 export function makeColorScheme(opts: {
   primary: TonalPalette;

package/src/ThemeExplorer/useDeferredColor.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useDeferredValue } from 'react';
 import { TonalPalette, argbFromHex } from '@material/material-color-utilities';
-import { Color } from '@basic-ui/color-picker';
+import type { Color } from '@basic-ui/color-picker';
+
 import { useLocalStorageCachedState } from './useLocalStorageCachedState';
 
 // import './styles.css';

package/src/Tooltip/Tooltip.story.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+
 import { Tooltip } from './';
 import { Button } from '../Button';
 // import './styles.css';

package/src/Tooltip/Tooltip.tsx

@@ -1,6 +1,10 @@
-import { Tooltip as _BaseTooltip, Popper, PopperProps } from '@basic-ui/core';
-import React, { forwardRef, VFC } from 'react';
-import { Box, BoxProps } from '../Box';
+import type { PopperProps } from '@basic-ui/core';
+import { Tooltip as _BaseTooltip, Popper } from '@basic-ui/core';
+import type { FC } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface TooltipProps
@@ -10,7 +14,7 @@ export interface TooltipProps
   disabled?: boolean;
 }
 
-const BaseTooltip: VFC<
+const BaseTooltip: FC<
   BoxProps & {
     innerAs?: React.ElementType<any>;
   } & Omit<PopperProps, 'color' | 'anchorEl'>