@basic-ui/material 0.1.16 → 1.0.0-alpha.2

package/src/Chip/ChipBase.tsx

@@ -1,11 +1,18 @@
 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 { useTheme } from '../theme';
-import { alpha } from '../color';
 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';
+
 export type ChipBaseProps<
   H = HTMLDivElement,
   Attr = React.HTMLAttributes<H>
@@ -17,15 +24,24 @@ export type ChipBaseProps<
   disabled?: boolean;
 };
 
-function getFilledCSS(bg: string, color: string) {
+function getFilledCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  disabled: boolean
+) {
   return {
-    bg,
-    color: alpha(color, 0.87),
+    ...(!disabled && bg !== 'surface'
+      ? { bg }
+      : {
+          ...getColorOverlay(theme, 'surface', 'primary', 0.05),
+        }),
+    color,
     '&::before': {
       backgroundColor: 'currentColor',
       position: 'absolute',
       content: '""',
-      opacity: 0.12,
+      opacity: 0,
       pointerEvents: 'none',
       top: 0,
       right: 0,
@@ -38,13 +54,19 @@ function getFilledCSS(bg: string, color: string) {
     '& > *': {
       zIndex: 1,
     },
+    ...(disabled && { boxShadow: 0, bg: alpha('on.surface', 0.32) }),
   };
 }
 
-function getOutlinedCSS(bg: string, color: string, borderOpacity: number) {
+function getOutlinedCSS(
+  theme: Theme,
+  bg: string,
+  color: string,
+  borderOpacity: number
+) {
   return {
-    bg,
-    color: alpha(color, 0.87),
+    ...(bg !== 'surface' ? { bg } : getDarkThemeBackgroundOverlay(theme, 2)),
+    color: color,
     borderColor: alpha(color, borderOpacity),
     borderStyle: 'solid',
     borderWidth: rem(1),
@@ -71,6 +93,7 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
   return (
     <Box
       as={as}
+      data-disabled={disabled ? '' : undefined}
       ref={forwardedRef}
       __css={{
         boxSizing: 'border-box',
@@ -84,9 +107,11 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
         fontSize: 'inherit',
         border: 0,
         overflow: 'hidden',
+        whiteSpace: 'nowrap',
         cursor: 'default',
         WebkitTapHighlightColor: 'transparent',
         willChange: 'transform,opacity',
+        minWidth: 'auto',
         '&::-moz-focus-inner': {
           border: 0,
         },
@@ -98,9 +123,14 @@ export const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(
           },
         })({ variant: variantProp, theme }),
         ...(variantProp === 'filled'
-          ? getFilledCSS(backgroundColorProp, colorProp)
-          : getOutlinedCSS(backgroundColorProp, colorProp, borderOpacityProp)),
-        opacity: disabled ? 0.37 : 1,
+          ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled)
+          : getOutlinedCSS(
+              theme,
+              backgroundColorProp,
+              colorProp,
+              borderOpacityProp
+            )),
+        opacity: disabled ? 0.38 : 1,
         ...__css,
       }}
       {...otherProps}

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,
@@ -14,7 +17,8 @@ export type ChoiceChipProps = ChipBaseProps<
   checked?: boolean;
   disabled?: boolean;
   type: 'checkbox' | 'radio';
-  leftIcon?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
 };
 
 const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
@@ -30,21 +34,23 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
       defaultValue,
       disabled,
       onChange,
-      leftIcon,
+      leadingIcon,
+      trailingIcon,
       children,
+      __css,
       ...otherProps
     } = props;
 
     const theme = useTheme();
-    const sumOpacity = checked ? 0.12 : 0;
 
     return (
       <ChipBase
         as="label"
         disabled={disabled}
-        backgroundColor={'surface'}
-        color={checked ? color : 'on.surface'}
-        borderOpacity={checked ? 0.6 : 0.24}
+        backgroundColor={checked ? color + '-container' : 'surface'}
+        color={checked ? 'on.' + color + '-container' : 'on.surface'}
+        borderOpacity={checked ? 0 : 0.24}
+        __css={__css}
         {...otherProps}
       >
         <Box
@@ -56,6 +62,8 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             display: 'inline-flex',
             alignItems: 'center',
             justifyContent: 'center',
+            pl: leadingIcon ? rem(8) : rem(12),
+            pr: trailingIcon ? rem(8) : rem(12),
           }}
         >
           <RippleBox<
@@ -75,13 +83,13 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
             theme={theme}
             disabled={disabled}
             rippleColor={color}
-            baseOpacity={0 + sumOpacity}
-            hoverOpacity={0.12 + sumOpacity}
-            focusOpacity={0.24 + sumOpacity}
+            baseOpacity={0}
+            hoverOpacity={0.12}
+            focusOpacity={0.24}
             name={name}
             ref={forwardedRef}
             __css={{
-              backgroundColor: 'rgba(0,0,0,0)',
+              bg: 'transparent',
               top: 0,
               left: 0,
               width: '100%',
@@ -93,15 +101,11 @@ const InnerInput: React.FC<any> = forwardRef<HTMLInputElement, ChoiceChipProps>(
               border: 'none',
               borderRadius: 0,
               position: 'absolute',
-              color: 'inherit',
             }}
           />
-          <Box as="span" pl={rem(4)} pr={rem(8)}>
-            {leftIcon}
-          </Box>
-          <Box as="span" pr={rem(12)}>
-            {children}
-          </Box>
+          {leadingIcon}
+          {children}
+          {trailingIcon}
         </Box>
       </ChipBase>
     );
@@ -112,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';
@@ -98,7 +108,8 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         ref={forwardedRef}
         innerAs={as}
         outlined={false}
-        elevation={8}
+        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,36 +1,53 @@
 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 type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { useTheme } from '../theme';
 
 const Modal = _Modal as React.FC<
   DialogSurfaceProps & { ref?: React.Ref<HTMLDivElement> }
 >;
 
-export type DialogSurfaceProps = ModalProps & PaperProps;
+export type DialogSurfaceProps = ModalProps &
+  PaperProps & {
+    variant?: 'base';
+  };
 
 export const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(
   function DialogSurface(props, forwardedRef) {
-    const { __css, ...otherProps } = props;
+    const { __css, variant: variantProp = 'base', ...otherProps } = props;
     const theme = useTheme();
 
+    const overlayValue =
+      (get(theme, 'dialogs.backgroundColorOverlay') as number) || 0;
+
     return (
       <Modal
         ref={forwardedRef}
         as={Paper}
         theme={theme}
-        elevation={24}
+        elevation={3}
+        darkThemeBackgroundOverlay={overlayValue}
         __css={{
           position: 'relative',
-          bg: 'surface',
-          borderRadius: rem(8),
+          borderRadius: 'small',
           width: '100%',
           maxWidth: rem(600),
           maxHeight: '100%',
           overflow: 'auto',
           pointerEvents: 'auto',
+          ...variant({
+            scale: 'dialogs.variants',
+            prop: 'variant',
+            variants: {
+              base: {},
+            },
+          })({ variant: variantProp, theme }),
           ...__css,
         }}
         {...otherProps}

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;

package/src/Link/Link.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 LinkProps

package/src/List/List.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { Paper, PaperProps } from '../Paper';
+import * as React from 'react';
+
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
 
 export interface ListProps extends PaperProps {
   as?: React.ElementType<any>;
@@ -31,6 +33,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(function List(
       py={py}
       px={px}
       elevation={elevation}
+      darkThemeBackgroundOverlay={elevation}
       variant={variant}
       outlined={outlined}
       __css={{

package/src/ListItem/ListItem.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { ListItem, ListItemText } from './';
 import { List } from '../List';
 // import './styles.css';

package/src/ListItem/ListItem.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
-import type * as React from 'react';
-import { BoxProps } from '../Box';
+import * as React from 'react';
 import { rem } from 'polished';
-import { RippleBox } from '../Ripple';
-import { useTheme } from '../theme';
-import { ListItemProvider } from './context';
 import { get } from '@styled-system/css';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { useTheme } from '../theme';
 import { alpha } from '../color';
 
 export interface ListItemProps extends BoxProps {
@@ -33,41 +33,66 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
       ...otherProps
     } = props;
     const selected = ariaSelectedProp || selectedProp;
-    const color = colorProp ? colorProp : selected ? 'primary' : 'on.surface';
+    const color = rippleColor || colorProp || 'primary';
     const theme = useTheme();
 
+    const baseOpacity = 0.12;
+    const hoverOpacity = 0.16;
+    const focusOpacity = 0.24;
+
     return (
-      <ListItemProvider value={{ color, disabled }}>
-        <RippleBox
-          ref={forwardedRef}
-          as={innerAs || as}
-          theme={theme}
-          display="flex"
-          data-disabled={disabled ? '' : undefined}
-          rippleColor={rippleColor || color}
-          baseOpacity={selected ? 0.12 : 0}
-          hoverOpacity={selected ? 0.16 : 0.04}
-          focusOpacity={selected ? 0.24 : 0.12}
-          aria-selected={selected ? 'true' : undefined}
-          disabled={disabled}
-          {...otherProps}
-          __css={{
-            px: 3,
-            py: rem(12),
-            backgroundColor: 'transparent',
-            color: disabled ? alpha(color, 0.6) : alpha(color, 0.87),
+      <Box
+        ref={forwardedRef}
+        as={innerAs || as}
+        theme={theme}
+        display="flex"
+        data-disabled={disabled ? '' : undefined}
+        aria-selected={selected ? 'true' : undefined}
+        disabled={disabled}
+        {...otherProps}
+        __css={{
+          px: 3,
+          py: rem(12),
+          transition: 'background-color 75ms linear',
+          backgroundColor: 'transparent',
+          color: alpha('on.surface', 0.87),
+          cursor: 'pointer',
+          ':hover': {
+            backgroundColor: alpha('on.surface', hoverOpacity),
+          },
+          ':focus': {
+            outline: 'none',
+            backgroundColor: alpha('on.surface', focusOpacity),
+          },
+          ':active': {
+            backgroundColor: alpha('on.surface', baseOpacity + 0.12),
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: alpha(color, baseOpacity + 0.12),
+            ':hover': {
+              backgroundColor: alpha(color, hoverOpacity + 0.12),
+            },
             ':focus': {
               outline: 'none',
+              backgroundColor: alpha(color, focusOpacity + 0.12),
             },
-            textDecoration: 'none',
-            WebkitTapHighlightColor: 'transparent',
-            ...get(theme, 'text.subtitle1'),
-            ...__css,
-          }}
-        >
-          {children}
-        </RippleBox>
-      </ListItemProvider>
+            ':active': {
+              backgroundColor: alpha(color, baseOpacity + 0.24),
+            },
+          },
+          '&[data-disabled]': {
+            color: alpha('on.surface', 0.6),
+            backgroundColor: 'transparent',
+            cursor: 'default',
+          },
+          textDecoration: 'none',
+          WebkitTapHighlightColor: 'transparent',
+          ...get(theme, 'text.subtitle1'),
+          ...__css,
+        }}
+      >
+        {children}
+      </Box>
     );
   }
 );