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

package/src/Box/Box.tsx

@@ -1,19 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { CSSObject } from '@emotion/react';
+import * as React from 'react';
+import type { CSSObject } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  compose,
-  space,
-  layout,
-  typography,
-  color,
-  flexbox,
-  border,
-  grid,
-  background,
-  position,
-  shadow,
+import type {
   SpaceProps,
   LayoutProps,
   TypographyProps,
@@ -27,13 +16,27 @@ import {
   ResponsiveValue,
 } from 'styled-system';
 import {
-  css,
-  get,
+  compose,
+  space,
+  layout,
+  typography,
+  color,
+  flexbox,
+  border,
+  grid,
+  background,
+  position,
+  shadow,
+} from 'styled-system';
+import type {
   SystemStyleObject,
   ResponsiveStyleValue,
 } from '@styled-system/css';
+import { css, get } from '@styled-system/css';
 import shouldForwardProp from '@styled-system/should-forward-prop';
-import { useTheme, Theme } from '../theme';
+
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 
 export type SxStyleProp =
   | SystemStyleObject
@@ -87,7 +90,7 @@ export type BoxProps<
   Partial<KnownBoxProps> &
   React.RefAttributes<H>;
 
-const BoxBase = styled(('div' as unknown) as React.FC, {
+const BoxBase = styled('div' as unknown as React.FC, {
   shouldForwardProp,
 })<BoxProps<HTMLDivElement>>(
   {

package/src/Button/BaseButton.tsx

@@ -1,8 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { useTheme } from '@emotion/react';
 import { variant } from 'styled-system';
-import { Box, BoxProps } from '../Box';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface BaseButtonProps
   extends BoxProps<

package/src/Button/Button.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Button } from './';
 import { Box } from '../Box';
 
@@ -16,6 +17,15 @@ const AppsIcon = (props) => (
   </svg>
 );
 
+const NavigationIcon = (props) => (
+  <svg height={48} width={48} viewBox="0 0 48 48" {...props}>
+    <path
+      fill="currentColor"
+      d="m26.35 42-5.7-14.65L6 21.65V19.5L42 6 28.5 42Zm.9-5.7 9.6-25.15-25.1 9.6 11.2 4.3Zm-4.3-11.25Z"
+    />
+  </svg>
+);
+
 const Example = (props) => {
   return (
     <Box bg="surface">
@@ -43,15 +53,18 @@ const Example = (props) => {
       </Box>
       <Box p={3} display="flex" sx={{ gap: 2 }}>
         <Button variant="fab-mini" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="24px" height="24px" />
         </Button>
         <Button variant="fab" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="24px" height="24px" />
         </Button>
         <Button variant="fab-large" elevation="floating" {...props}>
-          S
+          <NavigationIcon width="36px" height="36px" />
         </Button>
         <Button variant="fab-extended" elevation="floating" {...props}>
+          <Box mr={2} lineHeight={0}>
+            <NavigationIcon width="24px" height="24px" />
+          </Box>
           Fab extended
         </Button>
       </Box>

package/src/Button/Button.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import * as TransparentButton from './TransparentButton';
 import * as FloatingActionButton from './FloatingActionButton';
 import * as FilledButton from './FilledButton';
@@ -7,7 +8,7 @@ import * as OutlinedButton from './OutlinedButton';
 import * as IconButton from './IconButton';
 import { useTheme } from '../theme';
 import { useRippleSurface } from '../Ripple';
-import { BaseButtonProps } from './BaseButton';
+import type { BaseButtonProps } from './BaseButton';
 import { useButtonGroupContext } from './context';
 
 export type ButtonVariants =

package/src/Button/ButtonGroup.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef, useMemo } from 'react';
-import { ButtonProps } from './Button';
-import { ButtonGroupContext, ButtonGroupContextProps } from './context';
+
+import type { ButtonProps } from './Button';
+import type { ButtonGroupContextProps } from './context';
+import { ButtonGroupContext } from './context';
 
 export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
 

package/src/Button/FilledButton.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
 import { readableColor, rem } from 'polished';
+import { get, css } from '@styled-system/css';
+
 import { BaseButton } from './BaseButton';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 import { alpha, getBackgroundOverlay } from '../color';
-import { get, css } from '@styled-system/css';
 
 export const FilledButton = styled(BaseButton)(
   ({ color = 'primary', theme }) =>

package/src/Button/FloatingActionButton.tsx

@@ -1,5 +1,5 @@
 import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 
 export function getRippleProperties(theme: Theme) {
   return {

package/src/Button/IconButton.tsx

@@ -1,5 +1,5 @@
 import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
-import { Theme } from '../theme';
+import type { Theme } from '../theme';
 
 export function getRippleProperties(theme: Theme) {
   return {

package/src/Button/OutlinedButton.tsx

@@ -1,9 +1,10 @@
-import { TransparentButton } from './TransparentButton';
 import styled from '@emotion/styled';
 import { css } from '@styled-system/css';
-import { alpha } from '../color';
 import { rem } from 'polished';
 
+import { alpha } from '../color';
+import { TransparentButton } from './TransparentButton';
+
 export const OutlinedButton = styled(TransparentButton)(
   css({
     borderStyle: 'solid',

package/src/Button/SpinnerButton.story.tsx

@@ -1,25 +1,24 @@
-import { useState, FC } from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
+import type { SpinnerProps, SpinnerButtonProps } from '@basic-ui/core';
 import {
   Spinner as SpinnerBase,
   SpinnerButton as SpinnerButtonBase,
-  SpinnerProps,
-  SpinnerButtonProps,
 } from '@basic-ui/core';
+
 import { Button, Box, Text } from '../';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
-import { BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
 
 export default {
   title: 'components/SpinnerButton',
 };
 
-const Spinner: FC<
-  Omit<BoxProps, 'onChange'> & SpinnerProps
-> = SpinnerBase as any;
-const SpinnerButton: FC<
-  BoxProps & SpinnerButtonProps
-> = SpinnerButtonBase as any;
+const Spinner: FC<Omit<BoxProps, 'onChange'> & SpinnerProps> =
+  SpinnerBase as any;
+const SpinnerButton: FC<BoxProps & SpinnerButtonProps> =
+  SpinnerButtonBase as any;
 
 function AddIcon(props) {
   return (

package/src/Button/TransparentButton.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { get } from '@styled-system/css';
+import { get, css } from '@styled-system/css';
+import { rem } from 'polished';
+
 import { BaseButton } from './BaseButton';
-import { Theme } from '../theme';
-import { css } from '@styled-system/css';
+import type { Theme } from '../theme';
 import { alpha } from '../color';
-import { rem } from 'polished';
 
 export const TransparentButton = styled(BaseButton)(
   ({ theme, color = 'primary' }) =>

package/src/Button/context.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+
 import type { ButtonProps } from './Button';
 
 // ButtonGroup Component

package/src/CheckBox/CheckBox.story.tsx

@@ -1,7 +1,8 @@
 import { useState, useRef } from 'react';
-import { CheckBox, Box } from '../';
 import { keyframes } from '@emotion/react';
-import { Keyframes } from '@emotion/serialize';
+import type { Keyframes } from '@emotion/serialize';
+
+import { CheckBox, Box } from '../';
 
 export default {
   title: 'components/CheckBox',

package/src/CheckBox/CheckBox.tsx

@@ -1,10 +1,14 @@
-import { forwardRef, cloneElement, 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, cloneElement } from 'react';
+import * as React from 'react';
 import { rem } from 'polished';
 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 { CheckBoxIcon } from './CheckBoxIcon';
 import {
   SelectionControlLabel,

package/src/CheckBox/CheckBoxIcon.tsx

@@ -1,7 +1,9 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { CheckPath } from './CheckPath';
 import { IndeterminatePath } from './IndeterminatePath';
 

package/src/Chip/ButtonChip.tsx

@@ -1,9 +1,11 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { ChipBaseProps, ChipBase } from './ChipBase';
+import * as React from 'react';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
 import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { rem } from 'polished';
 
 export type ButtonChipProps = ChipBaseProps & {
   checked?: boolean;
@@ -21,7 +23,7 @@ export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
       leadingIcon,
       trailingIcon,
       children,
-      color = 'surface',
+      color,
       __css,
       ...otherProps
     } = props;

package/src/Chip/Chip.story.tsx

@@ -1,7 +1,6 @@
 import { Chip } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
-import { alpha } from '../color';
 import { RadioGroup } from '../RadioButton';
 import { ChoiceChip } from './ChoiceChip';
 import { LoremIpsum } from '../Text/LoremIpsum';

package/src/Chip/ChipBase.tsx

@@ -1,14 +1,17 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { variant } from 'styled-system';
-import { Box, BoxProps } from '../Box';
-import { Theme, useTheme } from '../theme';
+import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { Theme } from '../theme';
+import { useTheme } from '../theme';
 import {
   alpha,
   getDarkThemeBackgroundOverlay,
   getColorOverlay,
 } from '../color';
-import { rem } from 'polished';
 
 export type ChipBaseProps<
   H = HTMLDivElement,
@@ -32,7 +35,6 @@ function getFilledCSS(
       ? { bg }
       : {
           ...getColorOverlay(theme, 'surface', 'primary', 0.05),
-          ...getDarkThemeBackgroundOverlay(theme, 2),
         }),
     color,
     '&::before': {

package/src/Chip/ChoiceChip.tsx

@@ -1,11 +1,14 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { RadioButton, CheckBox } from '@basic-ui/core';
-import { ChipBaseProps, ChipBase } from './ChipBase';
-import { RippleBox, RippleBoxProps } from '../Ripple';
+import { rem } from 'polished';
+
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase } from './ChipBase';
+import type { RippleBoxProps } from '../Ripple';
+import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
 import { Box } from '../Box';
-import { rem } from 'polished';
 
 export type ChoiceChipProps = ChipBaseProps<
   HTMLInputElement,
@@ -113,9 +116,9 @@ export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
   function ChoiceChip(props, forwardedRef) {
     const { type = 'checkbox', ...otherProps } = props;
 
-    const Comp: React.FC<ChoiceChipProps> = (type === 'radio'
-      ? RadioButton
-      : CheckBox) as any;
+    const Comp: React.FC<ChoiceChipProps> = (
+      type === 'radio' ? RadioButton : CheckBox
+    ) as any;
 
     return (
       <Comp ref={forwardedRef} as={InnerInput} type={type} {...otherProps} />

package/src/ColorMode/ColorModeProvider.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { Global } from '@emotion/react';
-import { ColorMode, ColorModeContext } from './color-mode';
+
+import type { ColorMode } from './color-mode';
+import { ColorModeContext } from './color-mode';
 import {
   DARK_THEME_CLASS,
   DEFAULT_THEME_CLASS,

package/src/Combobox/Combobox.story.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
+
 import {
   Combobox,
   ComboboxOption,

package/src/Combobox/Combobox.tsx

@@ -1,31 +1,41 @@
-import { FC, forwardRef } from 'react';
-import type * as React from 'react';
+import type { FC } from 'react';
+import { forwardRef } from 'react';
+import * as React from 'react';
+import type {
+  ComboboxProps as ComboboxPropsCore,
+  ComboboxInputProps as ComboboxInputPropsCore,
+  ComboboxLabelProps as ComboboxLabelPropsCore,
+  ComboboxListProps as ComboboxListPropsCore,
+  ComboboxOptionProps as ComboboxOptionPropsCore,
+  ComboboxPopoverProps as ComboboxPopoverPropsCore,
+  ComboboxButtonProps as ComboboxButtonPropsCore,
+  PopperProps as PopperCoreProps,
+} from '@basic-ui/core';
 import {
   Combobox as _ComboboxCore,
-  ComboboxProps as ComboboxPropsCore,
   ComboboxInput as _ComboboxInputCore,
-  ComboboxInputProps as ComboboxInputPropsCore,
   ComboboxLabel as _ComboboxLabelCore,
-  ComboboxLabelProps as ComboboxLabelPropsCore,
   ComboboxList as _ComboboxListCore,
-  ComboboxListProps as ComboboxListPropsCore,
   ComboboxOption as _ComboboxOptionCore,
-  ComboboxOptionProps as ComboboxOptionPropsCore,
   ComboboxPopover as _ComboboxPopoverCore,
-  ComboboxPopoverProps as ComboboxPopoverPropsCore,
   ComboboxButton as _ComboboxButtonCore,
-  ComboboxButtonProps as ComboboxButtonPropsCore,
   Popper as _PopperCore,
-  PopperProps as PopperCoreProps,
   useComboBoxContext,
 } from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
-import { TextField, TextFieldProps } from '../TextField';
-import { List, ListProps } from '../List';
-import { ListItem, ListItemProps } from '../ListItem';
-import { Text, TextProps } from '../Text';
-import { Button, ButtonProps } from '../Button';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import type { TextFieldProps } from '../TextField';
+import { TextField } from '../TextField';
+import type { ListProps } from '../List';
+import { List } from '../List';
+import type { ListItemProps } from '../ListItem';
+import { ListItem } from '../ListItem';
+import type { TextProps } from '../Text';
+import { Text } from '../Text';
+import type { ButtonProps } from '../Button';
+import { Button } from '../Button';
 import { alpha } from '../color';
 
 export { useComboBoxContext } from '@basic-ui/core';
@@ -99,6 +109,7 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         innerAs={as}
         outlined={false}
         elevation={2}
+        darkThemeBackgroundOverlay={2}
         __css={{
           maxHeight: rem(300),
           overflowY: 'auto',
@@ -145,7 +156,8 @@ const ComboboxPopperBox = forwardRef<HTMLDivElement, PopperProps>(
 
 export type ComboboxPopoverProps = ComboboxPopoverPropsCore & ListProps;
 
-const ComboboxPopoverCore: FC<ComboboxPopoverProps> = _ComboboxPopoverCore as any;
+const ComboboxPopoverCore: FC<ComboboxPopoverProps> =
+  _ComboboxPopoverCore as any;
 
 export const ComboboxPopover = forwardRef<HTMLDivElement, ComboboxPopoverProps>(
   (props, forwardedRef) => {

package/src/Dialog/Dialog.story.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
-import { Dialog, DialogAnimationModes } from './';
+
+import type { DialogAnimationModes } from './';
+import { Dialog } from './';
 import { Button } from '../Button';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Box } from '../Box';

package/src/Dialog/Dialog.tsx

@@ -1,10 +1,15 @@
 import { forwardRef } from 'react';
 import { Portal } from '@basic-ui/core';
-import { Scrim, ScrimProps } from './Scrim';
-import { DialogContainer, DialogContainerProps } from './DialogContainer';
-import { DialogSurface, DialogSurfaceProps } from './DialogSurface';
+
+import type { ScrimProps } from './Scrim';
+import { Scrim } from './Scrim';
+import type { DialogContainerProps } from './DialogContainer';
+import { DialogContainer } from './DialogContainer';
+import type { DialogSurfaceProps } from './DialogSurface';
+import { DialogSurface } from './DialogSurface';
 import { useDialogAnimation } from './useDialogAnimation';
-import { DialogBackdrop, DialogBackdropProps } from './DialogBackdrop';
+import type { DialogBackdropProps } from './DialogBackdrop';
+import { DialogBackdrop } from './DialogBackdrop';
 import type { DialogAnimationModes } from './useDialogAnimation';
 export type { DialogAnimationModes } from './useDialogAnimation';
 

package/src/Dialog/DialogBackdrop.tsx

@@ -1,10 +1,10 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import {
-  ModalBackdrop as _ModalBackdrop,
-  ModalBackdropProps,
-} from '@basic-ui/core';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
+import type { ModalBackdropProps } from '@basic-ui/core';
+import { ModalBackdrop as _ModalBackdrop } from '@basic-ui/core';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 const ModalBackdrop = _ModalBackdrop as React.FC<
   DialogBackdropProps & { ref?: React.Ref<HTMLDivElement> }

package/src/Dialog/DialogContainer.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 DialogContainerProps = BoxProps;
 

package/src/Dialog/DialogSurface.tsx

@@ -1,11 +1,13 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Modal as _Modal, ModalProps } from '@basic-ui/core';
-import { Paper, PaperProps } from '../Paper';
-import { useTheme } from '../theme';
+import * as React from 'react';
+import type { ModalProps } from '@basic-ui/core';
+import { Modal as _Modal } from '@basic-ui/core';
 import { rem } from 'polished';
 import { get, variant } from 'styled-system';
-import { getColorOverlay } from '../color';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
 
 const Modal = _Modal as React.FC<
   DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
@@ -30,8 +32,8 @@ export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
         as={Paper}
         theme={theme}
         elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
         __css={{
-          ...getColorOverlay(theme, 'surface', 'primary', overlayValue),
           position: 'relative',
           borderRadius: 'small',
           width: '100%',

package/src/Dialog/Scrim.tsx

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

package/src/Divider/Divider.tsx

@@ -1,7 +1,9 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Box, BoxProps } from '../Box';
+import * as React from 'react';
 import { rem } from 'polished';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { alpha } from '../color';
 
 export interface DividerProps extends BoxProps {

package/src/FloatingLabel/FloatingLabel.story.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+
 import { FloatingLabel as FloatingLabelComponent } from './FloatingLabel';
 import { Box } from '../Box';
 import { Button } from '../Button';

package/src/FloatingLabel/FloatingLabel.tsx

@@ -1,7 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Text as _Text } from '../Text';
+import * as React from 'react';
 import { rem } from 'polished';
+
+import { Text as _Text } from '../Text';
 import { useNotchedOutlineContext } from '../NotchedOutline/context';
 
 export interface FloatingLabelProps

package/src/LineRipple/LineRipple.story.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+
 import { LineRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';

package/src/LineRipple/LineRipple.tsx

@@ -1,8 +1,11 @@
-import { forwardRef, useState, useRef, useEffect, CSSProperties } from 'react';
-import type * as React from 'react';
+import type { CSSProperties } from 'react';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import * as React from 'react';
 import { rem } from 'polished';
+
 import { useTheme } from '../theme';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 
 export interface LineRippleProps extends BoxProps {
   active?: boolean;